CSS - Create 3 Columns The Center Has A Tiled Background That Resizes
I am trying to build this re-sizable box for an iPod Touch application.
mo-de . net/d/bg.jpg #content_container_top {width:50%; height:13px; padding: 0px; position: relative;} #content_container_top_left {width:13px; height:13px; padding: 0px; top: 0px; left: 0px; position: absolute; background-image: url(../images/content_container_a/tl.png); background-repeat: no-repeat;} #content_container_top_repeat {width:100%; height:13px; padding: 0px; top: 0px; left: 13px; position: absolute; background-image: url(../images/content_container_a/ttrepeat.png); background-repeat: repeat-x;} <div id="content_container_top"><!--Start top with three columns --> <!-- Top columns 1 --> <div id="content_container_top_left"> </div> <!-- Top columns 2 --> <div id="content_container_top_repeat"> </div> <!-- Top columns 3 --> <div id="content_container_top_right"> </div> </div><!--End top with three columns → This is a rough version of what I was thinking. In the old days I could do this easily with tables but I am trying to do this with divs. My question is how can I create three columns the center has a tiled background that resizes. How do I make the center duplicate its self and not over ride the right side? I know how to make fixed size three column layouts but not sure how to make dynamic re-sizable three columns. Similar TutorialsIn short, I'm trying to get this one image to tile down the page to the bottom, underneath a static background image. Basically, it's a 2pixel high image that's ready to tile vertically, just having a tough time getting it to work. You can clearly see the problem here, a gap at the bottom: http://www.groundedgroup.com/clients/NWR/ Here's the relevant css: http://www.groundedgroup.com/client...WR-GG/style.css I've googled and subsequently tried out some solutions, but no luck. Got any ideas? Thanks in advance. PS - Is there a way to keep the spiders from indexing my links above? The site is on a test server, so I don't want the url indexed. Page set up is as folows: 1)At the top is a panel 750x200 to hold an image 2)under that is a panel. 3)Followed by a container that contains the Lnav div and the data div which are to be next to each other. How can I these two to stretch to fill the browser? and stretch further together when the data exceeds. 4)Under this are 2 more panels one below the other. Code: html, body { height: 100%; } body { margin: 0; padding: 0; text-align: center; min-height: 400px; /* For Mozilla/Opera/Safari */ } #Container { position: relative; margin: 0 auto; text-align: left; width: 750px; height: 100%; background: #ccc; } #Content { margin: 0 auto; text-align: left; width: 750px; min-height: 100%; height: auto; background: #666; } #top {text-align: left; width: 750px; height: 250px; background: red;} #page {text-align: right; width: 750px; background: green; } #lNav {text-align: left; float: left; width: 150px; min-height: 100%; height: auto; background: orange; position: relative; margin: 0 auto;} #data {text-align: left; float: left; width: 600px; min-height: 100%; height: auto; background: yellow; position: relative; margin: 0 auto;} #bNav {text-align: center; width: 750px; background: blue;} #bottom {text-align: right; width: 750px; background: purple;} /* Hack for IE */ * html #Content{ height: 100%; } /* End IE Hack */ Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title></title> <LINK REL=stylesheet HREF="container.css" TYPE="text/css"> </head> <body> <div id="Container"> <div id="top">top</div> <div id="page">page</div> <div id="Content"> <div id="lNav">lNav</div> <div id="data">data</div> </div> <div id="bNav">bNav</div> <div id="bottom">bottom</div> </div> </body> </html> I am trying to create a multi-column layout with DIVs but I am running into some problems. I have a wrapper div that goes around my columns with a background image that is tiled etc... for my multiple columns I use 3 more divs all floated to the left at the correct widths. The 3 columns all work great they look exactly how I want them to... the only problem is that even though they extend about half the page they do not cause their wrapper div to also extent to that length... is there a way to force this wrapper div to extend the same amount as the contained column divs without manually setting its height? Hi all, I'm trying to achieve the following: <div id="left">This column is of blue background, and stretches all the way to the left.</div> <div id="center"> THIS COLUMN IS FIXED WIDTH, 760px </div> <div id="right">This column is of red background, and stretches all the way to the right.</div> Hope that is self explanatory.. I've Googled all this but can only find solutions for fluid "center" columns with fixed width right/left columns. I'm trying to do the opposite. Could anyone let me know how I can do this? I've got some messy CSS that definitely needs to be corrected, I'm trying out different things so here's my 'trial& error' code: Code: #left { background-color: blue; float: left; margin: auto; position: absolute; } #center { background: #DFDFEB url(../images/body/top.jpg) no-repeat; width: 760px; margin: 0 auto; } #right { background-color: red; } Thanks in advance! I have a three column layout. The third column is empty except for a background image which I'd like to be the same length as the main (content) centre column. This would ensure the background image in the right column is at the same length as the main content Any ideas how I can do that? The site is weary.me.uk/MT and the CSS is weary.me.uk/MT/css/threeColumn.css Thank you so much Hey all, a fairly simple situation which is driving me crazy! =p I have a table row which has two columns. Now using css I have set the row to have a background image like so: Code: background-image:url(images/newsmiddle.jpg); background-repeat:repeat-y; } Now in firefox this works fine ( he content box has the image run through both columns as intended ). But in Internet Explorer on the second column the bg image starts again as if I had set the background image for that cell which is not what I want. Anyone able to help for an IE solution? Thanks I am trying to create a very basic div and css template with 3 columns. I want 3 columns visible, and want to give a backgroundcolor to the container. When my columns gets higher (the left, middle or the right column), I want the div wich contains these 3 columns to get higher (and reveiling this by the background color). All goes well in Internet Explorer 6, and even 7... but Firefox seems to have problems with it. Can anybody help me out? The following code is used: PHP Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Test</title> <style type="text/css"> .container{ width:600px; background-color:#660066; height:auto; } .kolomlinks{ /*COLUMNLEFT*/ float:left; width:80px; background-color:#66FF33; padding:10px; } .kolommidden{ /*COLUMNMIDDLE*/ float:left; width:380px; border:dotted 10px; background-color:#FFFFCC; } .kolomrechts{ /*COLUMNRIGHT*/ float:left; width:80px; margin:10px; background-color:#FF0000; } </style> </head> <body> <center> <div class="container"> <div class="kolomlinks">Left</div> <div class="kolommidden">Middle<br /> <br /> The background color of the overall container doesn't get extended in firefox. </div> <div class="kolomrechts">Right</div> </div> </center> </body> </html> I'm working with a php script that i purchased. In my admin_login.php page is the entry for the image and my entry from my layout.css page. I'm only seeing half my background image. I cant seem to get it centered. admin_login.php... 5.<div id="container_login"> 6. <a href="http://www.myglobalpnr.com" target="_blank" id="login_logo"><img src="<?php echo IMG_PATH; ?>login_logo.jpg" alt="Property Listing Script by ClassifiedsGeek.com" /></a> 7. <div id="main_login"> 8. <?php require $content_tpl; ?> 9. </div> <!-- main_login --> 10. </div> <!-- container_login --> 11. 12.layout.css... 13. 14./* login */ 15.#container_login{ 16. font-family: Arial, sans-serif; 17. font-size: 12px; 18. margin: 0 auto; 19. overflow: hidden; 20. position: relative; 21. max-width: 100%; 22. height: 1306px; 23.} 24.a#login_logo{ 25. position: absolute; 26. top: 0; 27. left: 404px; 28. height: 129px; 29. margin: 0 auto; 30. width: 192px; 31.} 32.#container_login #main_login{ 33. float: none; 34. margin: 200px auto 0; 35. position: relative; 36. text-align: left; 37. width: 343px; 38.} 39.#container_login h3{ 40. font-size: 1.3em; 41. font-weight: bold; 42. margin: 5px 15px; 43. text-transform: uppercase; I know there's one thing that i didn't do. Can you help me please? Thanks in advance, Scotty13 Hey All, Firstly, I apologise if this has already been answered. The search feature wasn't working for me, and to be frank, I didn't know what to search either! Secondly, I'm developing a site with Joomla and am implementing my own design. I'm a bit of a CSS newbie, well un-experienced at least, and fail at being able to pick cross-browser bugs. Thus I have turned to the masters for help! Ok - So this is what it should look like: BrowserShots in IE8 And this is what it shouldn't look like: BrowserShots in IE7 What it appears to be doing, to me, is pushing the logo div to the next line, as the pillmenu div is floated to the left. In the process of doing this, it stuffs up the margins and pushes the whole layout out. On a second level, it appears to me that the background image is off centred, which COULD be BrowserShots being funny, but I'm not sure? Live site is at: techmonkeys.com.au I would love it if anybody could help me identify what bugs are occuring here. Or if it's just an error on my behalf, which it sure could be! I also highly appreciate any advice, tips, or criticism you want to provide. But not about my menu! That's not done :P Thanks in advance. Cheers, Chris So I have a page where the content itself will be an 800px wide light column down the center of the page. But the background (to the left and right of the column) I want to be a gradient lightblue. I would usually accomplish this by making the background color lightblue and simply attaching the gradient to the top using CSS. Then I would create a table for the center column and make it the light background color. The problem is that on short pages, I want the center column to extend all the way to the bottom of the page, irregardless of the content. Unfortunately, height="100%" or it's CSS variants don't work for tables, cells, or even DIVS so I can't force the table to extend down to the bottom of the page. The only way it seems I could do this, then, is by using the body background image attribute or body background CSS to make the column color the background for the entire center of the document, but those attributes are already both used up creating the gradient. Any thoughts on how I might go about this. A sample of what I'm getting at is at http://www.poweredpages.com/fdr/index2.php. There, you can see the background gradient and the column that should extend to the bottom, even if there's very little text. Thanks, Jeremy I have a problem with my background image. I need to centre the background image and center the container div on top of that. I have used the below CSS which has the desired effect in Mozilla but for some reason in ie, the background moves depending on browser size when it needs to stay put! Any ideas? body { font-size: 0.70em; font-family: Arial, Helvetica, sans-serif; text-align: center; background:#ffffff url('../images/content_bg.gif') top center no-repeat; color: #303030; height:100%; min-height:100%; } #container { width: 900px; text-align:left; position: absolute; margin-left:-450px; left:50%; z-index: 100; } Hi there, I am trying to create a link which will have a bacground colour appear "around" it when on hover. I currently have a background image, but I tried adding a margin with a background color, but it is not working. This is my code: PHP Code: a.button{ background-image: url('img/button.png'); height: 22px; width: 210px; font-family:Arial, Helvetica, sans-serif; font-size: 14px; color: #ffffff; text-decoration: underline; padding: 3px 0 0 5px; margin: 20px; } a.button:hover{ background-image: url('img/button.png'); height: 22px; width: 210px; font-family:Arial, Helvetica, sans-serif; font-size: 14px; color: #ffffff; text-decoration: underline; padding: 3px 0 0 5px; margin: 20px; background-color: #f6f6f6; } Any ideas how I can acheive this? Thanks Hello, I'm working now on div layout that contains 3 sections (header, body, footer) in one centered wrapper with border (divs with background imgs). My problem is: - divs that are in fact borders (id="l_outerborder_b" and id="r_outerborder_b") don't stretch when main container (id="body_content_text") grows. Here is a html code: Code: <!--BEGIN TEMPLATE HEADER --> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <link href="template.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="template.js" /> </head> <body onload="onloadprocedures()"> <div id="main_container"> <div id="template_header"> <div id="tl_outerborder"></div> <div id="t_outerborder"></div> <div id="tr_outerborder"></div> <div id="l_outerborder_h"></div> <div id="header_content"> <div id="logo"><img src="img/logo.png" alt="" /></div> <div id="slogan"><img src="img/slogan.png" alt="Centrum zdrowia" /></div> </div> <div id="r_outerborder_h"></div> </div> <!-- END TEMPLATE HEADER --> <!-- BEGIN TEMPLATE BODY --> <div id="template_body"> <div id="l_outerborder_b"></div> <div id="body_content"> <div id="body_content_text"> <p>TEST</p> </div> </div> <div id="r_outerborder_b"></div> </div> <!-- END TEMPLATE BODY --> <!-- BEGIN TEMPLATE FOOTER --> <div id="template_footer"> <div style="clear:both"></div> <div id="l_outerborder_f"></div> <div id="footer_content"></div> <div id="l_outerborder_f"></div> <div id="bl_outerborder"></div> <div id="b_outerborder"></div> <div id="br_outerborder"></div> </div> </div> </body> </html> <!-- END TEMPLATE FOOTER --> and CSS: Code: @charset "utf-8"; /* CSS Document */ body { background-color:#FFFFFF; font-family:Tahoma, Verdana, "Times New Roman", Arial; font-size:12px; } a:link {text-decoration: none} /* unvisited link */ a:visited {text-decoration: none} /* visited link */ a:hover {text-decoration: none} /* mouse over link */ a:active {text-decoration: none} /* selected link */ #main_container { position:relative; margin:auto; width:960px; height:auto; } #template_header { float:left; position:relative; width:960px; height:300px; } #header_content { float:left; position:relative; width:900px; height:270px; } #logo { width:310px; height:130px; position:relative; float:left; top:0px; left:0px; } #slogan { width:580px; height:100px; position:relative; float:left; top:0px; left:0px; } #tl_outerborder { float:left; position:relative; background-image:url(img/tl_outerborder.png); width:30px; height:30px; } #t_outerborder { float:left; position:relative; background-image:url(img/t_outerborder.png); width:900px; height:30px; } #tr_outerborder { float:left; position:relative; background-image:url(img/tr_outerborder.png); width:30px; height:30px; } #l_outerborder_h { float:left; position:relative; background-image:url(img/l_outerborder.png); background-repeat:repeat-y; width:30px; height:270px; } #r_outerborder_h { float:right; position:relative; background-image:url(img/r_outerborder.png); background-repeat:repeat-y; width:30px; height:270px; } #body_content { float:left; position:relative; width:900px; overflow:hidden; } #body_content_text { float:left; position:relative; width:600px; margin: auto; overflow:hidden; } #l_outerborder_b { float:left; position:relative; background-image:url(img/l_outerborder.png); background-repeat:repeat-y; width:30px; height:inherit; } #r_outerborder_b { float:right; position:relative; background-image:url(img/r_outerborder.png); background-repeat:repeat-y; width:30px; height:inherit; } #l_outerborder_f { float:left; position:relative; background-image:url(img/l_outerborder.png); background-repeat:repeat-y; width:30px; height:inherit; } #r_outerborder_f { float:right; position:relative; background-image:url(img/r_outerborder.png); background-repeat:repeat-y; width:30px; height:inherit; } #template_body { float:left; position:relative; width:960px; overflow:hidden; } #bl_outerborder { float:left; position:relative; background-image:url(img/bl_outerborder.png); width:30px; height:30px; } #b_outerborder { float:left; position:relative; background-image:url(img/b_outerborder.png); width:900px; height:30px; } #br_outerborder { float:left; position:relative; background-image:url(img/br_outerborder.png); width:30px; height:30px; } Thanks in advance for info how to stretch those doomed divs EDIT: Here is layout concept. URL hTTp://qsrc.pl/layout.jpg Trying to delete my post but no option to delete so just removing content. hey, i have 2 CSS problems. number 1: my main <div> is not centered in IE. it's fine in FF, mozilla, and opera, but it stays all the way to the left in IE. Code: #main { width: 77%; margin: 0 auto; border: 1px solid #999; overflow: auto; background: #970303; color: #FFF; -moz-border-radius-topleft: 20px; -moz-border-radius-topright: 20px; -moz-border-radius-bottomleft: 20px; -moz-border-radius-bottomright: 20px; } Code: <div id='main' align='center'> number 2: i can't figure out this gradient background stuff. i have an image, 1 px wide and 1000 px high. it works fine, but once theres enough information on a page, and its longer than the 1000px, the image starts over and looks extremely unprofessional. how can i make so that the one gradient image is stretched out for the length of the page? thanks. I am trying to make a pattern tile the full height of the page and match up with an image at the top. It's a little bit hard to explain and a lot easier to show, so I've documented my first two attempts below. Failed Solution 1 - Pattern as a part of a div set at height: 100%; with outer divs also set at height: 100%; See attempt 1: Code: http://www.hesterdesigns.com/Web2/yellow.html Problem is that the divs aren't growing to the height of the page, and so the pattern isn't tiling the whole height of the page. Failed Solution 2 - The Pattern is part of the body background which tiles on y. See attempt 2: Code: http://www.hesterdesigns.com/Web2/index.html Any suggestions? I'm hoping to find a way to do this using only CSS and without having to resort to Javascript solutions. I am using the following code how do I change it so that it would show up in the center of the brower window? Thanks Tim PHP Code: <div style="position: absolute; left: 0px; z-index: 1; top: 0px; align: center\"> <object classid=\"clsid:d27cdb6e-ae6d-11cf-96b8-444553540000\" codebase=\"http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0 ,0\" width=\"544\" height=\"396\" id=\"cardio\" align=\"middle\"> <param name=\"allowScriptAccess\" value=\"sameDomain\" /> <param name=\"movie\" value=\"ads/cardio3.swf\" /> <param name=\"loop\" value=\"false\" /> <param name=\"quality\" value=\"high\" /> <param name=\"wmode\" value=\"transparent\" /> <param name=\"bgcolor\" value=\"#ffffff\" /> <embed src=\"ads/cardio3.swf\" loop=\"false\" quality=\"high\" wmode=\"transparent\" bgcolor=\"#ffffff\" width=\"544\" height=\"396\" name=\"cardio\" align=\"middle\" allowScriptAccess=\"sameDomain\" type=\"application/x-shockwave-flash\" pluginspage=\"http://www.macromedia.com/go/getflashplayer\" /> </object> </div> I have a div with a background color set, that I want to have slightly transparent. Inside that div, is essentially my entire website. Now if I apply the opacity to the main outer div, all the divs inside inherit that transparency. Any ways to get around this? The outer Div with the transparency is the "content_wrapper" div. It excludes the header and footer. So the only issue is correcting everything wrapped inside the "content_wrapper" and "content" div. I tried setting the "content" div to opacity: 1; but it had no effect whatsoever. http://www.area51entertainment.co/index.php?about So I have a design where the background is a large (1400x1100) image that fades into a vertical gradient at the edges. I've set up the css as follows: body { background: #000 url(gradient.jpg) repeat-x; margin: 0; } Here's where I run into my problem... I've created an empty DIV to hold the large image which will appear on top of the gradient and positioned it absolutely. <div id="bg_image"></div> #bg_image { width: 100%; height: 1100px; background: url(images/bg_image.jpg) no-repeat top center; margin: 0; position:absolute; } This works and the background looks like it should, however because the large image is inside a DIV, any time the browser window is smaller than that div (which will be the case for most users considering the image size) there will be scrollbars. This makes perfect sense of course I just can't come up with an alternative. If there was a way to extend a background image beyond the borders of a DIV that would work but overflow:visible; doesn't seem to work with background images only content. I wish I could set a repeating background AND a static background in the body style, because that is exactly the effect I'm trying to achieve. Any suggestions would be greatly appreciated! Thanks, Josh The layout I have going is a bit difficult to explain. Here's a diagram.. The area of importance is the header. The content and main head area are centered. The area to the left and right of the header are a <div>. However, as you can see, the background image on the left is different than the one on the right. I'm having difficulty making this work. the images can be stretched horizontally without a problem, but the two sides must meet in the middle beneath the header. I hope this makes sense. What I've got to do, I think, is tell the background image of the underlying <div> to stretch to 100%, and make this image 300px wide or so including both sides of the image and a split. The split would hide behind the header. I can't find a method to stretch the background image, though. Does anybody know of a better way, or a way to achieve this method at all without getting into completely different layouts? Thanks in advance for any assistance/suggestions. |