|
CSS - Pulling Data From Db And Displaying With Divs
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. Similar TutorialsDIV 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 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 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 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'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>
In the interest of tableless design, I'm trying to organize columns and rows of data with divs and spans, but they aren't conforming to the static width I've set for them. First let me ask, since tables were originally designed to organize data, is it still considered acceptable to use them in this way since the concept of tableless design has taken hold? Also, is it acceptable to use divs and spans to organize data since they were designed only for layout purposes? If it is acceptable, what's going on here? I'm specifying a width for the spans, but they aren't taking that width, they are only as wide as the text, which doesn't wrap. See, nothing here about width: Code: .alt0{ /* Alternating cells for search and management list */
background-color: #eeeeee;
}
.alt1{ /* Alternating cells for search and management list */
background-color: #dddddd;
}
.default { /* Default Text */
color: #222222;
text-decoration: none;
font-color: #222222;
font-family: Arial;
font-size: 12px;
font-style: normal;
font-weight: normal;
}
Two rows: Code: <div class="alt0" style="width: 800px;"> <div class="default" style="width:600px;"> <a href="index.cgi">test post</a> </div> <div class="default" style="width:200px;"> 1 March 2006, 01:36 pm </div> </div> <div class="alt1" style="width: 800px;"> <div class="default" style="width:600px;"> <a href="index.cgi">aaaaatest post</a> </div> <div class="default" style="width:200px;"> 1 March 2006, 01:36 pm </div> </div> 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. I'm using margin:auto; to center my pages. I've got an image on the left side, so I pad the write and then do the center on teh whole container. It works great all the pages of my site except for one. http://www.sexy-tan.com but when you go to the cart page to view your cart http://www.sexy-tan.com/cart/cart.php it breaks and the page floats left. I"m using the EXACT same css for all the pages and the same layout, I"ve copy and pasted a working hierarchy from another page and still no dice. Any ideas? Also, it works just fine in firefox, but messes up only in IE. I am trying to create a simple horizontal list menu on this page.(link: http://northshorewebdesign.net/testsite/) This is the menu under the slideshow. When I add the menu, the menus above get messed up. I tried changing margin, padding etc but the other menus get mesed up. The site looks ok in IE but it looks bad in FF and Opera. Here's what I am trying to achieve(Link: http://webone.mcaec.org/wordpress/) Here's the code I'm using: Code: .homepage-sub-menu {width: 960px; height: 70px; background-color:#00CCFF; position: relative;}
.homepage-sub-menu ul {list-style-type: none; margin: 0; padding: 0; overflow: hidden;}
.homepage-sub-menu li {float: left;}
.homepage-sub-menu li a:link,a:visited {display: block; width: 192px; font-family:Calibri, Arial, Helvetica, sans-serif; color: #ffffff; text-align: center; text-decoration: none; padding-top: 10px;}
.homepage-sub-menu li a:hover {text-decoration: underline;}
Any help or suggestions would be appreciated I'm new to css and have been impressed with the way you can make style changes to a whole site by just altering one stylesheet (if you've set if up right). My question is, can css or xhtml be used to do that with content? I want to create a site with a Nav column floated on the left hand side of every page, but I'm worried I'd have to change hundreds of pages if i ever added/altered the column. Is there any way I can get every page to pull a table/other-xhmtl from one source, maybe by putting something in the stylesheet? Thanks. Hi all, I am having an issue with IE7. www[dot]novakwebsales[dot]com/help/index6.html When you hover over the top category tabs, it shifts the footer up. Then if you hover over the subcategory tabs on the left it drops down again??? It works fine in Firefox... Any ideas? Thanks in advance, Tbone 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? 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. Hello, I am working on a site. theweedkiller dot com I have 3 links which are being laid out using a <ul> The problem is the margin between home and service is fine, but the margin between services and contact seems to be double the size. I have tried adding display:inline; and it seemed to do nothing. I am getting this problem in Chrome, Firefox, and IE8. I am using a CSS reset too. Heres is the HTML I am using - <div id="nav"> <ul> <li> <a href="index.html" id="current">Home</a> </li> <li> <a href="services.html">Service</a> </li> <li> <a href="contact.html">Contact</a> </li> </ul> </div> <!--end of nav div--> Heres is the CSS I am using - #nav ul { margin-left:370px; list-style-type:none; } #nav ul li { float:left; display:inline; } #nav ul li a { font-family:"Myriad Pro", Arial, sans-serif; font-size:20px; font-weight:bold; color:#302013; padding:25px 50px 5px 50px; background-image:url(images/nav.png); background-repeat:no-repeat; text-decoration:none; display:inline; margin-right:10px;!important } #nav ul li a:hover { font-family:"Myriad Pro", Arial, sans-serif; font-size:20px; font-weight:bold; color:#fff; background-image:url(images/nav-over.png); background-repeat:no-repeat; text-decoration:none; } #nav #current { font-family:"Myriad Pro", Arial, sans-serif; font-size:20px; font-weight:bold; color:#fff; background-image:url(images/nav-over.png); background-repeat:no-repeat; text-decoration:none; } I have no clue why this is happening. Any help would be useful. Thanks! 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, everyone. Currently I have a 4 column layout contained in a fixed with, centered container div. This is behaving perfectly, but I'd like the ability to add content inside a div, spanning the width of the first two columns without pushing the last two onto a new line lines. Any Ideas? Thanks. Example: Here is the code I have so far: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>3 Contained Column Skeleton.</title>
<style type="text/css">
body
{
margin: 0; /* asthetic */
padding: 0; /* asthetic */
background-color: gray; /* asthetic */
}
#top
{
width: 955px; /* core structure */
margin: 0 auto; /* core structure */
}
#bottom
{
clear: both; /* core structure */
width: 955px; /* core structure */
margin: 0 auto; /* core structure */
}
#content
{
width: 955px; /* core structure */
margin: 0 auto; /* core structure */
overflow: hidden; /* core structure */
}
#content .column
{
float: left; /* core structure */
width: 260px; /* core structure */
padding-bottom: 20010px; /* core structure */
margin-bottom: -20000px; /* core structure */
position: relative;
border-right: 5px solid yellow; /* asthetic */
}
/** This is just a skinny column with no border-right **/
#content .skyscrape
{
float: left; /* core structure */
width: 160px; /* core structure */
padding-bottom: 20010px; /* core structure */
margin-bottom: -20000px; /* core structure */
position: relative;
}
#content .skyscrape img
{
border: none; /* asthetic */
}
</style>
</head>
<body>
<div id="top" style="background-color: purple">
HEADER
</div>
<div id="content">
<div style="background-color: brown">
<img style="border:1px solid yellow;border-right:4px solid yellow;" src="http://img120.imageshack.us/img120/1418/imgou3.gif" alt="image" />
<p style="width:523px;margin:0;padding:3px;background-color:white;">
Etiam mattis. Sed gravida gravida massa. Etiam posuere est sed orci! Curabitur porttitor egestas turpis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sed magna.
</p>
</div>
<div class="column" style="background-color: pink;">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin faucibus justo a tellus. Donec quis tortor? In bibendum pretium metus. Vestibulum vehicula risus a enim. Cras libero lacus; egestas in, commodo eget, dictum eu, mi! Proin eget erat. Nullam elementum dignissim leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque enim erat, adipiscing nec, lacinia a, porta in, ipsum.
</p>
<p>
Curabitur quam risus, condimentum ut, viverra vestibulum, pulvinar a, lorem? Duis dolor. Suspendisse nibh. Donec eu sapien. Proin ornare nulla et nibh! Morbi nunc felis, tristique et, cursus non, mollis eget, sapien. Quisque tristique ante vitae pede. Ut venenatis commodo velit. Curabitur dignissim enim eget ante. Donec nisl? Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
</p>
<p>
Duis in dolor. Vestibulum venenatis. Integer vulputate odio vel nisl. Proin malesuada tellus sed sapien pharetra blandit. Curabitur eget nibh sit amet odio mattis condimentum. Aliquam erat volutpat. Vivamus blandit accumsan nibh. Nulla imperdiet aliquet leo. In nulla. Maecenas sed erat sit amet diam venenatis pharetra. Pellentesque egestas nisl a est! Suspendisse vulputate viverra felis. Pellentesque malesuada rhoncus augue. Cras id mi at magna aliquam mattis. Cras elementum lacus at diam. Suspendisse id nunc sed nunc semper laoreet. Pellentesque suscipit, pede et ultricies ullamcorper, dolor felis tincidunt ipsum, quis ullamcorper purus diam vitae nisl! Etiam congue interdum ipsum. Donec eros nisl, pulvinar ultricies; semper id, bibendum eu, enim! Nulla scelerisque ornare purus!
</p>
</div>
<div class="column" style="background-color: orange">
<p>
Sed nec risus. Praesent sit amet enim. Cras sed ipsum a dui vehicula luctus. Ut dui. Quisque pulvinar elementum odio. Integer non sapien! Nam tincidunt velit non sem. Suspendisse sollicitudin, nisi varius vulputate volutpat, tellus erat volutpat pede, quis luctus mauris lorem sit amet augue. Quisque placerat turpis eu erat. Donec posuere ultricies orci. Sed vitae ligula. Phasellus quis ipsum. Nam et eros. Vivamus risus libero; vehicula eu, convallis non, adipiscing vitae, velit! Integer faucibus lorem et augue! Duis consequat mauris. Sed sed nibh quis nisi accumsan ornare. Praesent lectus. Aenean consequat augue sit amet purus.
</p>
<p>
Cras eu augue a elit auctor congue. Curabitur a enim ut turpis placerat porta? Suspendisse eu urna. Vestibulum tincidunt aliquam augue. Pellentesque vel urna. Phasellus euismod turpis in purus. Vivamus viverra, magna eget egestas aliquet, libero libero venenatis mauris, non laoreet purus pede blandit massa. Quisque pulvinar tempus metus! Nullam metus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Quisque enim nibh, interdum eu, gravida eu, tristique id, elit. Fusce quis odio? Nam dui. Duis a ante eget lorem mattis euismod. Morbi non lectus. Vestibulum aliquet risus porttitor tortor. Nam ultrices.
</p>
<p>
Sed sed turpis et velit facilisis viverra. Nam adipiscing metus commodo diam. Aenean placerat viverra tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer elementum libero et ipsum rhoncus egestas. Vivamus felis. Fusce dapibus, quam in sagittis ullamcorper, pede tortor iaculis nibh, at pharetra ante massa quis elit. In condimentum, neque et ultricies gravida, dolor est bibendum metus, in cursus sapien quam at erat. Etiam condimentum. Suspendisse fermentum. Vestibulum ullamcorper rutrum urna. Sed convallis, sapien quis sagittis porttitor, enim tortor mattis lacus, vitae interdum neque urna ut purus. Duis porta tincidunt orci. Maecenas porta ullamcorper magna! Sed eu est vel felis tincidunt dictum! Nullam vitae neque ac arcu porttitor convallis? Phasellus gravida rutrum tellus. Donec quis nisl.
</p>
</div>
<div class="column" style="background-color: blue">
<p>
Ut ultrices ultrices nisi. Sed ultrices ultricies lectus. Proin est. Integer massa. Cras imperdiet! Sed ante? Aliquam in urna. Pellentesque iaculis, magna ut ullamcorper sagittis, urna ante aliquet enim, et convallis erat elit et turpis. Integer interdum mauris in augue. Integer velit dolor, pharetra et, mattis sed, cursus eget, arcu. Phasellus facilisis, ante et bibendum ullamcorper, arcu elit fringilla augue, quis pellentesque nibh dolor in metus. Duis venenatis felis quis est. Vestibulum tristique porta nibh! Nulla vitae leo vel diam molestie venenatis. Cras a mi id sem volutpat convallis.
</p>
<p>
Nunc imperdiet vulputate arcu. In venenatis mauris at nunc dignissim euismod. Integer mattis. Etiam pede purus, imperdiet non; molestie quis, lobortis ut, risus. Ut quis eros. Pellentesque elementum vulputate urna! Praesent ac mi. Duis felis lectus, vestibulum ac, posuere vitae, dignissim id, leo. Sed nisl lectus; consequat vel, consectetur in, mattis id, dui. Maecenas quis dolor. Proin eu dui. Aenean interdum? Donec vel pede vel mauris laoreet lobortis. Integer vehicula, neque nec elementum posuere, magna erat tristique tellus, eu consectetur leo magna vitae eros. Quisque erat pede, lobortis id, gravida non, pretium id, enim. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras lacus nibh, semper non, laoreet quis, placerat in, ante. Vivamus porttitor eros et erat.
</p>
<p>
Aenean eget orci non orci vulputate sodales. Cras pede sapien, scelerisque ac, dapibus in, aliquam sit amet, sem. Donec feugiat. Duis aliquam mauris vel erat. Integer quam. Pellentesque vitae lacus! In molestie augue id nibh. Curabitur non leo non metus convallis molestie! Curabitur imperdiet. Etiam laoreet rhoncus nisi. Maecenas pharetra lorem iaculis dui. Ut eu est sed eros feugiat malesuada! Nullam sit amet purus vitae eros posuere aliquam.
</p>
</div>
<div class="skyscrape" style="background-color: lightgrey;">
<a href="#"><img src="http://img515.imageshack.us/img515/7244/img2bk8.gif" alt="image"/></a>
<a href="#"><img src="http://img530.imageshack.us/img530/6606/img3mm0.gif" alt="image"/></a>
</div>
</div>
<div id="bottom" style="background-color: purple">
FOOTER
</div>
</body>
</html>
|
|||||||