|
CSS - Displaying Rows Of Assembled Divs
I'm having display issues trying to draw a dynamic image gallery.
There may be 0-12 images displayed at any time, and each one is displayed on a background image ("holder"), and has a caption. Each image is in a div with the "holder" image set as the background and a caption displayed as a span following a linebreak. At first I thought I should have the divs display:inline, but couldn't format them properly. Finally I floated them all left and wrote code to dynamically introduce a break with the class clearing every four images to create the rows. This is working fine, so I think. But once again IE/Win comes to bite me in the rear. Link: http://www.spearsphotography.com/monochrome.php CSS: (look for #gallery and it's children) http://www.spearsphotography.com/css/style.css If anyone have any ideas how I can fix this? You can see the desired result in Firefox/Safari/Opera/NN7+. You can see it break in IE. Still learning Thanks -- Aiden Similar TutorialsHi, I wonder if you can help me, In FF, this site has it's rows messed up. If you scroll down towards the bottom the colours become out-of-sync with the text. Can anyone help? (It works fine in IE and Opera) Thanks CSS Code (scroll down): http://jigsaw.w3.org/css-validator/...&usermedium=all Thanks again DIV blocks display incorrectly in IE8 and it's driving me insane.. I tried adjusting padding for each column amongst other things but no dice! Everything looks fine in FireFox and IE9. I'm not allowed to post links as a new user but the website is dmstriping dot com. You'll have to fix the below links yourself. Any help would be greatly appreciated! **Here are the css files:** dmstriping dot com/new site/css/style.css dmstriping dot com/new site/css/layout.css Web Site: dmstriping dot com/new site/index.html So I'm trying to pull info from a mysql DB and display the contents to a page. Basically, the database has 35 products which I want to display in rows of 5 with the image showing, and right beneath, the title of the product. I'm trying to use divs to display these items one after another, until it counts to 5 and then starts a new line. I'm not sure what I'm doing wrong (or missing), but on the 1st row (and various other rows, there are 5 per row.. However, there are other rows that will show any other number of items... mostly right justified. I'm sure this will be simple enough of a solution, but here's what I've been using: PHP Code: $sql = "SELECT * FROM `products`"; $result = mysql_query($sql, $conn) or die(mysql_error()); $i == 0; while($row = mysql_fetch_array($result)) { extract($row); $i ++; $image_loc = "images/products/" . $image; $j = $i/5; $display .= "<div style=\"width:150px; float:left; padding-bottom:60px; padding-left:15px; padding-right:15px;\"><img src=\"".$image_loc . "\" style=\"width:100px;\"><br />" . $item_name . "</div>"; if (is_int($j)) { $display .= "<div clear:both;></div>"; } else { } } I have tried with and without the if statement, and with/without the clear:both. The if statement is there to determine if the count has gotten to 5 so that it can start a new line. Thanks. I have been trying in vain to get div elements on a page to behave how i want them to. I have a list of items, in the middle of which i need to display some tablular information witha picture along side it. This i have managed to acieve fine, but i can't get the next <li> to start below these 2, it starts alongside and the wraps underneath. I have tried everything. Can anyone help? <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <style type="text/css"> <!-- #wrapper{ font-family:Verdana, Arial, Helvetica, sans-serif; margin-left: 20px; width: 550px; font-size: 12px; line-height: 22px; letter-spacing: 0.5px; color: #666666; } #topimg { margin: 20px 0; padding-bottom: 20px; border-bottom: 1px dotted #CCCCCC; text-align:left; display:block; } #secondimg { margin: 0 0 0 20px; text-align:left; display:block; } #bodyimg{ padding: 20px 0px 20px 20px; float:left; display:block; } #listtable{ padding-top: 20px; padding-bottom: 20px; float:left; font-size: 10px; letter-spacing: 0.5px; color: #891C46; list-style-type: none; line-height:18px; } #listtable li{ margin: 1px; padding: 1px; } #listtable div { margin: 1px; padding: 1px; background-color: #F7F7F7; } --> </style> <title>Carlton</title> </head> <body> <div id="wrapper"> <div id="topimg"> <img src="/carlton-newsite/img/planandbuy/planandbuy.gif" width="173" height="33"> </div> <div id="secondimg"> <img src="/carlton-newsite/img/planandbuy/thebasics.gif" width="133" height="23"> </div> <ul> <li>Cinema Advertising is available in weekly blocks starting on Fridays.</li> <li>It is possible to buy <em> guaranteed admissions</em> by TV region, <em> follow specific films</em> or <em> nominate individual screens</em>. </li> <li>The minimum time unit available is 5 seconds. Prices differ based on commercial length with indeces using 30” as a base: </li> <div id="listtable"> <table width="200" border="0" cellspacing="0" cellpadding="0" class="nobullet"> <tr> <td width="105"> <li> <div>5”</div> </li> <li>10”</li> <li> <div>20”</div> </li> <li>30”</li> <li> <div>40”</div> </li> <li>45”</li> <li> <div>50”</div> </li> <li>60”</li> <li> <div>90”</div> </li> </td> <td width="95"> <li> <div>.3”</div> </li> <li>.5”</li> <li> <div>.8”</div> </li> <li>.1.00”</li> <li> <div>.1.33”</div> </li> <li>.1.50”</li> <li> <div>.1.67”</div> </li> <li>.2.00”</li> <li> <div>.3.00”</div> </li> </td> </tr> </table> </div> <div id="bodyimg"> <img src="/carlton-newsite/img/digital_adver/satelite.jpg" width="220" height="182"> </div> <li>Cinema commercials are shown on 35mm film, it is easy to get your TV ad transferred by our production department. </li> <li>Lead times from booking to getting on screen are 3 weeks, although CSA’s <em> Early Booking Incentive</em> guarantees extra value if you can book your campaign 6 weeks in advance of start date. </li> <li>Cinema Advertising Association <em> cinema buying guidelines</em> ensure your campaign meets industry agreed standards. </li> </ul> </div> </body> </html> Hi everyone A bit of a call for help with some niggly issues - all found on the following page and css: http://www.crashingbydesign.com.au/rsaa/index.html http://www.crashingbydesign.com.au/rsaa/home.css 1. Two of the absolutely positioned divs don't show up at all in IE6, but they're fine in Opera 7.5 and Firefox 1.0PR. The ones with id's "title" and "utility" are the problem ones and I can't see what the problem is with IE. In addition to this, this div shows up in a different position in both Opera and Firefox (10 pixels higher in Opera). Please help!! 2. The links in the "mainnav" div are only clickable either at the very top of the <a> element (Firefox) or the very bottom of the <a> element (Opera), however in IE the whole <a> element is completely clickable. I can't see any element that is overlapping. What is going on?? All help appreciated. Cheers Bevester I am trying to work on a project from HTML Utopia: Designing without Tables Using CSS. It is from Chapter 9. It should be a layout with a header and three columns. A footer was added to the bottom and floats were incorporated to the content and sidebars so that nothing interferes with the footer. So, the footer shows up okay, but the positioning of the sidebars is now screwed up. It would be nice if I could show you an image of what this looks like, but this site won't let me do that because I am a new member. I will try to describe it the best I can. Instead of being a layout with a header and three columns on top with the footer on the bottom, it has the header and middle content div on top and the two sidebars are both on the bottom with lots of space above them. The footer is on the bottom as it should be. Here is the code (this is not the whole code--this is the code I think would effect the layout): body { margin: 0; padding: 0; background-color: #050845; color: white; background-image: url(web_site_files/02_creating_the_layout/img/bg.jpg); background-repeat: repeat-x; font: small Arial, Helvetica, sans-serif; } #wrapper { background-color: #fdf8f2; color: black; margin: 30px 40px 30px 40px; padding: 10px; } #sidebar2 { float: left; width: 159px; border-top: 1px solid #b9d2e3; border-left: 1px solid #b9d2e3; border-bottom: 1px solid #b9d2e3; background-color: white; color: black; margin: 0; padding: 0; top: 1px; } #main { width: 100%; margin-top: 10px; } #sidebar { float: right; width: 220px; background-color: #256290; margin: 0; padding: 0; color: white; } Does anything look weird with the code above? If all of that looks right, then I can look and see if it is something else. I am seriously confuzzeled. I appreciate the help--I am trying to learn this on my own. (: I'm having some problems with creating a layout using nested 'divs' displayed as inline-blocks. I know that for FireFox 3.0 all that needs to be done is display:inline-block; and for IE lte 8 I need to trigger layout in the 'divs' and then set them as display:inline; To my understanding setting display:inline-block; triggers layout in IE (as does zoom: 1; or giving the div depth; height and width) Then all you need is to do is <!--[if lte IE 8]> <style> display:inline;</style><![endif]--> I've achieved this layout style in a previous website, yet with the exact same technique my results are nill. Can someone please compare at my code in ff3 and IE and tell me what I'm doing wrong.
Code: <html> <head> <!--[if IE]> <style type="text/css"> #container div {display:inline;} #ul_top li {display:inline;} #header p {display:inline;} #main_content div {display:inline;} #recreation div {display:inline;} </style> <![endif]--> <style type="text/css"> body {padding:0px; margin: 20px 0px 0px 20px; } h1 {color:#990D0D; font-size: 20px; text-indent: 40px} #limiter {width: 1003px; } #ul_top {margin:0px; text-align:right; } #ul_top li {display:inline-block; zoom:1; padding: 0px 5px 0px 0px; } #ul_top li a {color:#000; text-decoration:none; font: veranda; font-size: 11px; } #ul_top li a:hover {color:#DE6800; text-decoration: none; font: veranda; font-size: 11px; } #container {border: solid #000 1px; background: #FFF url('background.jpg'); text-align:left; width: 1000px; height: 750px; } #header {width:1000px; height:303px; background:#yellow url('red_rock_header.jpg') no-repeat; } #header p {display:inline-block; zoom:1; font-size: 20px; } p.company_name:first-letter { color:#990D0D; font-size:40px; } #main_content div {display:inline-block; vertical-align:top; zoom:1;} #recreation {width:430px;} #recreation div {display:inline-block; vertical-align:top; zoom:1;} #text_holder{ border-right: dashed black 1px; padding:15px; width: 375px;} a.rec_links {color:#DE6800; font-size: 18px; } a.rec_links:hover {color:#000; font-size: 18px; } a.pic_links { display:block; position: relative; width: 200px; height: 160px; } #climbing {border: solid #FA9928 1px; -moz-border-radius: 10px; -webkit-border-radius: 10px; width: 200px; height: 160px; padding: 5px; margin-top: 5px; background: orange url('climbing.jpg') no-repeat; } #bicycling {border: solid #FA9928 1px; -moz-border-radius: 10px; -webkit-border-radius: 10px; width: 200px; height: 160px; padding: 5px; margin-top: 5px; background: orange url('bicycling.jpg') no-repeat; } #hiking {border: solid #FA9928 1px; -moz-border-radius: 10px; -webkit-border-radius: 10px; width: 200px; height: 160px; padding: 5px; margin-top: 5px; background: orange url('hiking.jpg') no-repeat; } #wildlife {border: solid #FA9928 1px; -moz-border-radius: 10px; -webkit-border-radius: 10px; width: 200px; height: 160px; padding: 5px; margin-top: 5px; background: orange url('wildlife.jpg') no-repeat; } p.discription {font-size: 12px; text-indent: 20px; } </style> </head> <body> <div id="limiter"> <ul id="ul_top"> <li><a class="mini_link" href="#">Contact us</a></li> <li><a class="mini_link" href="#">Area Map</a></li> <li><a class="mini_link" href="#">About us</a></li> </ul> <div id="container"> <div id="header"> <p class="company_name">Red<p class="company_name">Rock</p><p class="company_name">Recreation</p> </div> <div id="main_content"> <div id="text_holder"> <h1>Red Rock Canyon Las Vegas NV:</h1><p class="discription"> Red Rock Canyon, located just a few miles west of Las Vegas, is named for the deep red 3,000-foot-high sandstone cliffs that are perched above the dusty wastelands of this part of the Mojave Desert. The view from any part of the park is breathtaking: mostly nature fills the view, but from some points you can make out the entire Las Vegas Strip in the distance!</p><p class="discription"> Climbing, hiking, and bicycling throughout the park is fun and exiting for the whole family. In the summer time water, sunscreen, and proper equipment is necessary. Elderly and young children can opt to drive around the park (a small fee for motorized vehicles aplies) along a 13-mile paved loop and still experience the scenic views.</p><p class="discription"> A visitor's center provides information on area history, geology, flora and fauna (visitors may encounter burros, big horn sheep or desert tortoises). You can also pick up a map of the park with detailed hiking routes (beginner, intermediate, and advanced levels). Rangers offer guided tours at no charge -- see website for schedules.</p> </div> <div style="width: 100px;"><p class="company_name">Red<p class="company_name">Rock</p><p class="company_name">Recreation</p></div> <div id="recreation"> <div style="text-align:center;"><a class="rec_links" href="#">Climbing</a><br /> <div id="climbing"> <a href="#" class="pic_links"></a> </div> </div> <div style="text-align:center;"><a class="rec_links" href="#">Bicycling</a><br /> <div id="bicycling"> <a href="#" class="pic_links"></a> </div> </div> <div style="text-align:center;"><a class="rec_links" href="#">Hiking</a><br /> <div id="hiking"> <a href="#" class="pic_links"></a> </div> </div> <div style="text-align:center;"><a class="rec_links" href="#">Wildlife</a><br /> <div id="wildlife"> <a href="#" class="pic_links"></a> </div> </div> </div> </div> </div> </body> </html>
Hi, So I know this is a common problem but my attempts at following past suggested advice did not help my page. I want to display two divs (sidebar and content) side by side on the page. Unfortunately, rather than display side by side, the two elements are placing one on top of the other. I've tried float: left/right, position: relative and display in line. Never the less, the elements still won't stay next to each other. Does anyone have any ideas? Thanks. Ok, so I've learned to stay away from tables when you don't need them, and I have an instance where this is the case. I have a container div that has a header, content and a footer. On my home page, I have to divs next to each other with the same height and a div below them towards the right. To simplify my problem, look at this example. Code:
<html>
<body>
<div style="float:right">
Hello there!
</div>
<hr>
</body>
</html>
If there's a "float:right" on that div, the hr tag below doesn't get pushed down. But if I use relative positioning and don't use the floats, I can't put the two top divs next to each other. The other option is to use absolute positioning, but again content below doesn't get pushed down correctly. It seems that using "clear:both" works, but it seems weird that this has to be done. For example if I have floating divs in a container, I can get them to stretch out the container like so: Code:
<html>
<body>
<div style="border: 1px solid #000; ">
<div style="float:right">
Hello there!<br />
Hello there!<br />
Hello there!<br />
Hello there!<br />
Hello there!<br />
Hello there!<br />
Hello there!<br />
</div>
<div style="clear: both"></div>
</div>
<hr>
</body>
</html>
Am I missing something fundamental here? Is there a better solution? Thanks in advance. Centering DIVs inside other DIVs in Firefox? Can it be done in a straight forward way? Setting the inner DIVs float to none seemed to work for IE but not FF. Here's the site in Question: http://www.winchps.vic.edu.au It's a standard fixed width floated DIV columns with a wrapper. One thing it does have is a second DIV inside both columns to display the Gradient background over the top of the repeated background. It works perfect in Firefox & IE7 (with a tweak) but IE6 mkes the sidebar nested div drop below the original sidebar DIV click here for a screenshot for those lucky enough not to have IE6. Here's the CSS code for the basic layout: Code:
body {
font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif;
font-size: 12px;
text-align: center;
margin: 0px 0px 60px 0px;
padding:0px;
border: 0;
line-height: 2;
}
#header {
width: 802px;
}
#wrapper {
width: 802px;
margin:0px;
padding: 0px;
text-align: left;
margin: 0 auto;
background: url(images/bodybg.jpg) center repeat-y;
}
#content {
padding: 0px;
margin: 0px;
}
#maingrad {
background: url(images/winchcontentgrad.jpg) top left repeat-x;
padding: 10px;
}
#main {
width: 589px;
float: right;
background: url(images/winchcontentbg.jpg) repeat;
border-left: solid 1px #000;
border-right: solid 1px #000;
}
#mainstop {
width: 589px;
float: right;
background: url(images/winchcontentbg.jpg) repeat;
border-left: solid 1px #000;
border-right: solid 1px #000;
border-bottom: solid 1px #000;
font-size: 10px;
}
#sidebargrad {
background: url(images/winchsidebargrad.jpg) top left repeat-x;
padding: 10px 5px 0px 10px;
}
#sidebar {
width: 200px;
float: left;
background: url(images/winchsidebg.jpg) repeat;
line-height: 2;
font-size: 14px;
border-left: solid 1px #000;
border-right: solid 1px #000;
}
I obviously need to put a conditional comment in there, same for what I did for the minor IE7 tweak, but I'm struggling to suss out what's causing it, I haven't found the specific issue on any of the regular sites (PIE etc). Anyone got any ideas? The Example I've read a bunch about how div's won't stretch to accomidate div's inside of them if they overrun the height/min-height set for the container div. How do I get around this? You can see the skeleton of the site above. It's fine unless you resize the window smaller than the content. Alright, I've been working on my own custom border box for a while and I've almost got it, but it has a few problems still. How I do it is I have one div that contains it all (.box) that defines the height and width of the whole box. Then I have three boxRows to lay out the images, and then I define how three cells in each of those rows should behave, very much like how custom borders used to be done with tables. Here are the problems: In both firefox and internet explorer, the bottom row and the far right column actually appear OUTSIDE the .box containing box. There are two additional problems in internet explorer. First, the middle row handles the auto height differently and only expands about 10px instead of the height of the containing box. The second is that the whole middle row for some reason appears to be pushed to the right by about 16px. Any help would be appreciated. Here's the code: HTML: Code: <html> <head> <link rel="stylesheet" type="text/css" href="reset.css" /> <link rel="stylesheet" type="text/css" href="testBox.css"> </head> <body> <div class="box"> <div class="boxRowTop"> <div class="boxCellLeft"></div> <div class="boxCellMiddle"></div> <div class="boxCellRight"></div> </div> <div class="boxRowMiddle"> <div class="boxCellLeft"></div> <div class="boxCellMiddle"></div> <div class="boxCellRight"></div> </div> <div class="boxRowBottom"> <div class="boxCellLeft"></div> <div class="boxCellMiddle"></div> <div class="boxCellRight"></div> </div> </body> </html> And here is the layout css file: Code: /* Box classes */
.box {
background: rgb(120,120,120);
height: 200px;
width: 500px;
}
.boxRowTop {
height: 16px;
position: relative;
width:%100;
}
.boxRowMiddle {
height: auto;
width:%100;
position: relative;
}
.boxRowBottom {
height: 16px;
width:%100;
position: relative;
}
.boxCellLeft {
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 16px;
}
.boxCellMiddle {
height: 100%;
margin-left: 16px;
margin-right: 16px;
width: auto;
}
.boxCellRight {
height: 100%;
left: 100%;
position: absolute;
top: 0;
width: 16px;
}
/* Define Cell Backgrounds/Images */
.boxRowTop .boxCellLeft {
background: url(../LandingImages/topleft_circ_corner.png) no-repeat;
}
.boxRowTop .boxCellMiddle {
background: url(../LandingImages/top_border.png) repeat-x;
}
.boxRowTop .boxCellRight {
background: url(../LandingImages/topright_circ_corner.png) no-repeat;
}
.boxRowMiddle .boxCellLeft {
background: url(../LandingImages/left_border.png) repeat-y;
}
.boxRowMiddle .boxCellMiddle {
background: rgb(255,255,255);
}
.boxRowMiddle .boxCellRight {
background: url(../LandingImages/right_border.png) repeat-y;
}
.boxRowBottom .boxCellLeft {
background: url(../LandingImages/bottomleft_circ_corner.png) no-repeat;
}
.boxRowBottom .boxCellMiddle {
background: url(../LandingImages/bottom_border.png) repeat-x;
}
.boxRowBottom .boxCellRight {
background: url(../LandingImages/bottomright_circ_corner.png) no-repeat;
}
And last, the reset CSS, which I don't think has anything to do with the problems because if I take it out it still has them. Code: html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, tt, var, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, caption
{
margin:0;
padding:0;
border:0;
vertical-align:baseline;
}
* {font-size:1em; font-family: inherit;}
:focus {outline:none;}
body { font-size: 62.5%; line-height:normal; font-family: Arial, Sans-Serif; color:Black; } /* 62.5% (10px), 75% (12px), 87.5% (14px), 100% (16px) */
p { margin: 0 0 1.2em 0; }
a { color:#ff0000; text-decoration:none; }
a:link { color:#ff0000; text-decoration:nonee; }
a:visited { color:#ff0000; text-decoration:none; }
a:active { color:#ff0000; text-decoration:none; }
a:hover { color:#ff0000; text-decoration:none; }
a.h1,a.h2,a.h3,a.h4,a.h5,a.h6,h1,h2,h3,h4,h5,h6
{
font-weight:bold;
display:block;
text-decoration:none;
color:Black;
}
h1, a.h1, a:link.h1, a:visited.h1, a:active.h1, a:hover.h1 { color:Black; text-decoration:none; font-size: 2.00em; }
h2, a.h2, a:link.h2, a:visited.h2, a:active.h2, a:hover.h2 { color:Black; text-decoration:none; font-size: 1.75em; } /* this is normally skipped? 1.50em */
h3, a.h3, a:link.h3, a:visited.h3, a:active.h3, a:hover.h3 { color:Black; text-decoration:none; font-size: 1.50em; } /* 1.25em */
h4, a.h4, a:link.h4, a:visited.h4, a:active.h4, a:hover.h4 { color:Black; text-decoration:none; font-size: 1.25em; } /* 1.00em */
h5, a.h5, a:link.h5, a:visited.h5, a:active.h5, a:hover.h5 { color:Black; text-decoration:none; font-size: 1.00em; } /* 0.75em */
h6, a.h6, a:link.h6, a:visited.h6, a:active.h6, a:hover.h6 { color:Black; text-decoration:none; font-size: 0.75em; } /* 0.66em WTF? */
fieldset { border:solid 1px; padding:0.25em 0.5em 0.75em; margin: 0 0 1.5em; }
legend { margin:0 0 0 2em; padding:0 1em; }
textarea, input, select { border:solid 1px #ccc; margin:0; padding:0; }
textarea, input { padding:0 .2em; }
input:focus,textarea:focus,select:focus { border:solid 1px black; }
small { font-size:.9em; }
ul, ol, dl { position: relative; padding:0 0 0 1.5em; margin:1.5em 0; }
dir, menu { margin:1.5em 0; }
/* nested lists have no top/bottom margins */
ul ul, ul ol, ul dir, ul menu, ul dl,
ol ul, ol ol, ol dir, ol menu, ol dl,
dl ul, dl ol, dl dir, dl menu, dl dl,
dir ul, dir ol, dir dir, dir menu, dir dl,
menu ul, menu ol, menu dir, menu menu, menu dl
{
margin:0;
padding: 0 0 0 1.5em;
}
hr { margin:0.75em 0; padding:0; }
Any help would be GREATLY appreciated, as I've been working on this for a while! Thanks! Hey guys is t possible to hhave my query echo in rows intead of one afther the other? like regualr echo will show(depending on how many values are in the DB) ggggggg llllllllllllllllll ddddddd i would like ggggggg iiiiiiiiiiiiii ddddddd ffffffff sssssssss llllllllllllllllll kkkkkk kkkkkkkk kkkkkk kkkkkkkkk i got it going with this echo { display:inline; } echo "<span class='echo'>".$row['Nom']."</span>"; it shows it in line .now is there a way to limit it ?like 10 in each row I have too many items for one row of tabs, how do I get a second row? Save this as tab.png URL Here's my working fine one row code: design.css Code: ol#toc {
height: 2em;
list-style: none;
margin: 0;
padding: 0;
}
ol#toc li {
float: left;
margin: 0 1px 0 0;
}
ol#toc a {
background: #bdf url(tab.png);
color: #008;
display: block;
float: left;
height: 2em;
padding-left: 10px;
text-decoration: none;
}
ol#toc a:hover {
background-color: #3af;
background-position: 0 -120px;
}
ol#toc a:hover span {
background-position: 100% -120px;
}
ol#toc li.current a {
background-color: #48f;
background-position: 0 -60px;
color: #fff;
font-weight: bold;
}
ol#toc li.current span {
background-position: 100% -60px;
}
ol#toc span {
background: url(tab.png) 100% 0;
display: block;
line-height: 2em;
padding-right: 10px;
}
div.content {
border: #48f solid 3px;
clear: left;
padding: 1em;
}
h1.html Code: <html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>1 row</title>
<link href="design.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h1>1 row</h1>
<ol id="toc">
<li class="current"><a href="h1.html"><span>H1</span></a></li>
<li><a href="h2.html"><span>H2</span></a></li>
<li><a href="h3.html"><span>H3</span></a></li>
</ol>
<div class="content">
<h2>H1</h2>
<p>Pic and text...</p>
</div>
</body>
</html>
And here's my bad attempt at 2 rows! design2rows.css Code: ol#toc {
height: 2em;list-style: none;
margin: 0;
padding: 0;
}
ol#toc li.first {
float: left;
margin: 0 1px 0 0;
}
ol#toc li.drop {
clear: left;
margin: 0 1px 0 0;
padding:0 0 0 6px;
}
ol#toc a {
background: #bdf url(tab.png);
color: #008;
display: block;
float: left;
height: 2em;
padding-left: 10px;
text-decoration: none;
}
ol#toc a:hover {
background-color: #3af;
background-position: 0 -120px;
}
ol#toc a:hover span {
background-position: 100% -120px;
}
ol#toc li.current a {
background-color: #48f;
background-position: 0 -60px;
color: #fff;
font-weight: bold;
}
ol#toc li.current span {
background-position: 100% -60px;
}
ol#toc span {
background: url(tab.png) 100% 0;
display: block;
line-height: 2em;
padding-right: 10px;
}
div.content {
border: #48f solid 3px;
clear: left;
padding: 1em;
}
q1.html Code: <html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Tab 2 row</title>
<link href="design2row.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h1>Tab 2 row</h1>
<ol id="toc">
<li class="first">
<li class="current"><a href="q1.html"><span>1</span></a></li>
<li><a href="q2.html"><span>2</span></a></li>
<li><a href="q3.html"><span>3</span></a></li>
<li><a href="q4.html"><span>4</span></a></li>
<li><a href="q5.html"><span>5</span></a></li>
<li><a href="q6.html"><span>6</span></a></li>
<li><a href="q7.html"><span>7</span></a></li>
<li><a href="q8.html"><span>8</span></a></li>
<li><a href="q9.html"><span>9</span></a></li>
<li><a href="q10.html"><span>10</span></a></li>
<li><a href="q11.html"><span>11</span></a></li>
<li><a href="q12.html"><span>12</span></a></li>
<li><a href="q13.html"><span>13</span></a></li>
<li><a href="q14.html"><span>14</span></a></li>
<li><a href="q15.html"><span>15</span></a></li>
<li><a href="q16.html"><span>16</span></a></li>
<li><a href="q17.html"><span>17</span></a></li>
<li><a href="q18.html"><span>18</span></a></li>
</li>
<li class="drop">
<li><a href="q19.html"><span>19</span></a></li>
<li><a href="q20.html"><span>20</span></a></li>
<li><a href="q21.html"><span>21</span></a></li>
</li>
</ol>
<div class="content">
<h2>1</h2>
<p>Pic and text...</p>
</div>
</body>
</html>
I have table in html with 3 col and 15 rows. I want to set the color of the even rows 'red' and odd 'blue'. How it is possible. please help? Adil Hi all, I need my data to display like the states on this page: http://www.designfirms.org/directory/Internet_Design/Web_Design How do I achieve this using css and no tables? Can anyone help? I am using php/mysl to generate the data and this is the current code to pull the info: <table border="0" cellpadding="3" cellspacing="0" width="100%" id="table1"> <tr valign="top"> <td> PHP Code: <? $sql = "SELECT * FROM db"; $execute = MYSQL_QUERY($sql); $numrows = MYSQL_NUMROWS($execute); $counter = 0; $increment = 1; // Loop throuch all the categories with parent id = 0 for ($i=0; $i <$numrows; $i++) { $rs = MYSQL_FETCH_ARRAY($execute); $counter = $counter + $increment; $category_name = $rs["cname"]; $category_url2 = str_replace(' ', '-', $category_name); $category_url = strtolower($category_url2); //echo $counter; if ($counter == 4) { // close the last row and start a new row $counter = 1; echo "</td><td>"; ?> <span class="med">> <a href="/directory/<?=$category_url?>.html"><?=$category_name?></a><br></span> <? } else { ?> <span class="med">> <a href="/directory/<?=$category_url?>.html"><?=$category_name?></a><br></span> <? // end of the if counter statement } ?> <? // end of the for loop } ?> </tr> </table> The NEW results would need to display in the <div id="center"></div> area. Any help would be much appreciated. I have a page where I would like to have boxes floating to the left. I have a constant width on the containing div, so that I get three boxes per row. Now, I would like these boxes to have the same height per row so that if one box have more content than the others on that row, they will stretch so that they all have the same height. I would like it to look like the products on www.netonnet.se, but using divs instead of tables. As I've done it now the boxes get different height. Anyone got a fix? here's my content and the css for the boxes: #contentProducts{ position:absolute; width:600px; margin-top:1em; } .box { float:left; text-align:center; width: 190px; background: #ffffff; border-right: 1px solid rgb(151,149,150); margin-left:0.4em; margin-bottom:0.5em; height:100%; } .box a{ font-weight: bold; text-decoration: none; color: #0c2c56; } .box a:hover{ text-decoration: underline; } .box h1 { margin:0; font: bold 1em Verdana, Arial; text-align: center; } .box h2 { margin: 0.5em 0.5em 0.9em 1em; font: .8em Verdana, Arial; text-align: left; } .box h3 { margin:0; font: 1em Verdana, Arial; text-align: center; color: #ce3929; font-weight: bold; } .box .contentProductButtons { position:relative; cursor:hand; background: url('../../Images/fill.gif'); background-color:#fff; border-right:1px solid #999; border-bottom:1px solid #999; Z-INDEX: 3; bottom: 0px; left:0px; margin-top:10px; WIDTH: 190px; height:20px } Hi, I made an intranet webpage using PHP, MySQL, some JavaScript (collapsible 'windows') and CSS. In IE8 it looks like the image on the left. In Firefox 3.6 it looks like the image on the right. The rows are actually separate div elements, with tables inside them; this seemed to be the only way I could get the collapsible animation script to work without error. Without subjecting myself to the humiliating scrutiny of my appalling coding, is there any obvious tip towards making the table on the left appear a little more like the table on the right? The reason why I want to use IE8 to view this page is, in part, to take advantage of its ability to link to folders on the file system - something that Firefox cannot do (at least not without some customizing). I hope that makes sense and, as always, any help appreciated. |
|||||||