I was wondering how I could recreate this table from this image. For my class project we are supposed to redesign this page, however I have no idea how to implement anything like that. It seems almost as if someone embedded an excel spreadsheet in the page.
Use a table header to add the blue background to the top row with CSS.
th { background: some blue-ish color}
Add a fixed width div (the table should be inside this div) and use overflow: scroll; for the scrollbar effect.
Rowspan for the first column.
Pretty basic CSS stuff, do you need to add functionality too or just the CSS?
Related
I have a php script that returns a list of small images (like thumbprints) that are displayed based on search criteria.
I'd like these images to be displayed on after another until they reach approx 45% across the screen and then if there are more images than will fit in the space, the images continue on to a new line.
I have used CSS to set the following within a div.
.example {
Float: left;
Width: 45%;
}
But the images continue beyond the 45%.
If I used the style overlap:scroll; or overlap:hidden, the images stop at 45% and either you can scroll to see the others or they are hidden.
How can I make the images continue onto a new 'line'.
I've tried word-wrap without success.
Thanks for your help.
the way you describe it it should work just fine.
I made a jsfiddle DEMO
images are by default displayed as inline elements, if the elements are not images try using display:inline on them or display:inline-block.
Try adding display:inline-block; to the element.
I tried to create a link witch goes to two div's in once. I like to go for example to #item4 and then directly to #item4_section10.
here's an example:
manage
div with id #item4 is horizontal and div with id item4_section10 vertical. if i go directly to item4_section10 this destroy the style of my page.
im new and i need your help.. thanx a lot!
You need to make your anchor display: block and after that you can give it a height and width and style your divs in it with float or inline-block or as you wish.
I have made a small div box, just enough to contain 2 and a half line of sentence. But actually what I want to do is, I am just showing the preview (few lines of sentence ). And I want to add "read more..." at the end of the sentence, which when clicked by the user would lead to another page showing the whole article.
I am extracting these article from the database. My problem is, how to extract just a few line from the database and preview it in the small div box...?
what is the best way to do it? how should I control the amount of the text as a preview to be shown in a div box.
can it be controlled with Javascript, PhpMysql extraction code, CSS ? what is the best way ?
note:
(I am extracting article from database. As a test bed I am using the wamp server along with its mysql database)
What you can do is extract the whole text from the database, and run the following javascript on your text nodes:
Cutter.js
From their documentation:
Cutter.run( oApplyTo, oTarget, nWords, oTexts, oClasses )
You can do something like excerpt column in your database and show it in your div box and when user clicks on read more you can load full text from db. Or you can write simple js script which will be cut everything you don't need. Or you can give your div box an size via css and set overflow property to hidden:
.excerpt {
width: xx px;
height: xx px;
overflow: hidden;
}
Not the ANSWER, but some hints:
You may try ajax, to fetch the entire article & clip it using js.
Alternately, provide a server side support to provide clipped article & fetch that using ajax.
After you have got the clipped part of the article, it should be fairly easy to display it in the div, using innerHTML.
To fix the location of the div box, you can either use js or css.
We are in the process of importing some old pages from our legacy website which was designed in tables into our new DIV based layout. Our site is built on a PHP include system, so we have our pages split into three components; header, body, and footer. These old pages need to be pulled in for our launch of revision 1.0, and then as we get all of the wrinkles ironed out, we will redesign.
Our header component is working out just fine, and the body content displays as it should, but unfortunately the existing footer element plugs into the bottom of the table. Our footer for the new design extends for 100% of the width, but the existing table only allows for 960px width. Thus our footer is getting cut off.
We are trying to find a dynamic solution, either a using JavaScript, or the jQuery Attr() call to dynamically effect the table dimensions to allow the footer to extend to the edge of the page, yet everything I have tried does not modify the table dimensions or allow overfow to show at all.
Here are a couple of screenshots for you to see what I am talking about.
Div layout:
Table Layout:
If you like to take a peek at the code, you can look at my Demo Page, but just know that this is a demo version which is not using PHP to pull in the components. Its a simple HTML/CSS based layout I have been using to search for alternatives. (I'm not a PHP guy)
We are trying to avoid having to go through hundreds of documents and cutting and pasting the footer in below the table, or having to modify any other code by hand. If we could just include a CSS or JavaScript doc in the header that would render a workaround is the ideal solution.
You can also make a div with the footer Background - separate from the contents and underneath. Put a div with the same css styles as 'footer' after your element. Then you can take the background image (footer_bg.jpg repeat-x) off of footer.
See campdavidozarks.org for a website I made with the same idea.
Center the table, and use the same footer-background on the parent, 100% width element, too with alignment to the bottom and no-repeat on y. Done. Pure CSS solution.
I am trying to export some dynamic content into a PDF file with a small bit of page formatting.
I'd like to have the PDF pages have a small padding with a border and then inside that border, a small company logo should appear up the top right on each page.
Now the issue is that because the content is dynamic, the number of pages and content per page can vary. This means I can't manually create a DIV with a border and an image inside because the content could be more or less pages depending on what gets exported.
I'm trying to find a way to create a 'page background' for each PDF page and then in this background I would then draw up the borders and the logo and then have all the content superimposed on this customer background.
Is this even at all possible with DOMPDF? Or are there any alternatives that may provide a little more customisation like this?
jfoucher's method could be what you need, but if you need an HTML content and/or a logo on each page, you could also use DOMPDF from the SVN trunk, and use fixed positionning, like if the "CSS position fixed" example here.
This is indeed possible with dompdf.
What I do is simply set the following CSS properties (or similar) on the body:
body{
background-image:url('/assets/img/bg_pdf.jpg');
background-repeat:no-repeat;
background-position: 15px 1450px;
}
In this case, I am using it for a page footer, but change these values according to your needs. The pixels values are obtained by trial and error... The background is an actual image, which you'll have to create in an image editor.