|
CSS - Css Layout & 3 Background Images
Hello Community,
I'll get cracking with my code and explain all below. My CSS; Code: html, body { height:100%; margin:0; padding:0; font-family:'lucida grande',tahoma,verdana,arial,sans-serif; background:url(../_images/stretch_header.jpg) repeat-x top left; }
body { text-align:center; font-family:'lucida grande',tahoma,verdana,arial,sans-serif; background:url(../_images/stretch_header.jpg) repeat-x top left; }
#outer { min-height:100%; height:auto; width:987px; margin-left:auto; margin-right:auto; position:relative; text-align:left; background:url(../_images/stretch_body.jpg) repeat-y top left; }
* html #outer { height:100%; width:987px; w\idth:987px; background:url(../_images/stretch_body.jpg) repeat-y top left; }
#contentContainer { width:100%; overflow:auto; }
#headerContainer { margin:0px auto; width:987px; height:117px; background:url(../_images/stretch_header.jpg) repeat-x top left; }
#centerContent { width:735px; float:right; padding:10px 10px 15px 10px; }
#footerContainer { position:absolute; bottom:0; left:0; width:100%; height:61px; text-align:center; background:url(../_images/stretch_footer.jpg) repeat-x top left; }
#footer { width:987px; height:61px; background:url(../_images/footer.jpg) no-repeat top left; }
#clearfooter { clear:both; height:61px; width:100%; }
My HTML; Code: <body> <div id="outer"> <div id="contentContainer"> <div id="headerContainer"></div> <div id="centerContent">a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br></div> <div id="clearfooter"></div> </div> <div id="footerContainer"> <div id="footer"></div> </div> </div> </body> At the moment you will be able to see that this layout is a 1 column, centered layout. As it stands it works very well. However what I am trying to accomplish now is causing problems. You can see from my CSS that I have 3 Background Images (stretch_header, stretch_body, stretch_footer). These are to stretch 100% of the browser, width, height, width respectively. The problem I have is that I only have enough elements present to use 2 of these backgrounds. stretch_header - put on the body/html works perfectly 100% width. stretch_body - put on the "outer" div works perfectly 100% height. This means I don't have another 100% width div to put the stretch_footer on. Every time I try to include a new div, using "position" or "float" cause various div to remove themselves from the document flow, and cause errors. The reason for the excess "a<br>" is to force the document out of the workspace and make sure it still retains it's rigidity when combined with content. So basically i'm asking how can I include another div to include the footer background 100% width. Any help would be greatly appreciated. Similar TutorialsHello, I've made a layout using Photoshop and Dreamweaver. As you can see here. Everything is fine for me except the Site Updates section. As you can see the sides of the site updates section aren't layers, instead they're images. When I tried making them as layers they didn't give me the outcome I wanted. Can somebody please tell me how to replace those images with layers so the section expands with more content. Thanks 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. I am working on a new layout for a friend's website; i have done a lot of the initial work and am now starting to finish things off. I know there are a few issues to deal with but i am trying to work on one thing at a time. Firstly if you take a look at the site in question, tinyurl.com/3dkeuh , if you look towards where the data and time are displayed on the site, top right, you will either notice that it displays correctly in firefox, and other browsers, but does not in ie, and other browsers, in ie the image does not fit the area it is meant to so the black background colour shows through causing two small black lines which also make the background stripes seem misaligned. The image in question is the only image on the page that is part of the layout and is not the background image of a div using css. I am trying to get the image to display in ie as it does in ff. i cannot understand why the background colour shows through as the image is the same size as the div it fits in. I am posting this in CSS Help as i believe the solution may lie in my css, maybe setting the image to the background image of a div with the same height. When i remove the decorative gun image logo thing the problem resolves itself but even when i replace the gun logo thing with a half size image the problem returns. Thanks for your time I hope this makes sense - I can send you a link where you can find a screenshot but unfortunately the forum is not allowing me to paste URLs. Hopefully someone can lend me a hand getting my head around this one. I have a background texture which is repeated over my page.(body:width&height:100%) I then have a top centered background image(width:1492px) at the top of my content pane .(width:970px;margin:auto Directly underneath the content pane background image I need a 83px height horizontal black strip which pans 100% width across the site. My content pane needs a different color which also pans 100% width across the site & grows in size with the text inserted although it cant be implemented from the beginning of the content pane or it would overlay the top centered background image and should only start after the black strip as this is where the charcoal color begins. My content pane starts in the middle of the content pane image so the charcoal color should only come into effect after the black strip. The black strips position should remain the same regardless of the content inserted in the content pane . The charcoal colors start position should also remain the same although should grow downwards based on the content pane's text. Thanks a million! I'm trying to create a layout (internal to a page - in the content area) that looks like this image image image image text text text text without using tables. This works great using floats but I want the entire block of images/ text centered in the container. Currently this is just left justified which looks really bad my code Code: <div align="center"> To view the site plan, please click the image below. </div> <br> <div align="center"> <div class="lfloat"> <a href="#self#?fuseaction=ecbs.showsiteplan&selshow=#attributes.selshow#&sp=1"> <img src="siteplan/images/ecbs_01.gif" alt="Pier 66"></a><br> Bahia Mar </div> <div class="lfloat"> <a href="#self#?fuseaction=ecbs.showsiteplan&selshow=#attributes.selshow#&sp=2"> <img src="siteplan/images/ecbs_01.gif"></a><br> Pier 66 </div> <div class="lfloat"> <a href="#self#?fuseaction=ecbs.showsiteplan&selshow=#attributes.selshow#&sp=3"> <img src="siteplan/images/ecbs_01.gif"></a><br> Convention Center </div> <div class="lfloat"> <a href="#self#?fuseaction=ecbs.showsiteplan&selshow=#attributes.selshow#&sp=4"> <img src="siteplan/images/ecbs_01.gif"></a><br> Sailfish Pavilion </div> </div> lfloat just specifies float:left Hi everyone, Please take a look at this site: http://174.122.106.156/~johanna/php The layout is fine in FF3.6, Chrome9, IE7 and IE8, but in IE6, the layout is buggered. Can anyone tell me what's wrong and why? Also, what is a good way to debug/troubleshoot layout problems in IE6? Currently, I use IETester to "view" pages in different versions of IE, but I can't poke around with the IE Developer Plugin or FireBug and know exactly what's the offending code. How do you guys find and fix IE6-specific layout issues? Thanks. Ive been trying to get my new site layout up, but as I was testing different browsers, IE7 has 1 problem. kb-studio.org/test/ when i was testing how it would look in different browser sizes, i noticed that it looked fine in all sizes above 1280 x 720. If you open, the site in a 1024 resolution, something weird happens to the background (only in IE). I validated my css and xhtml, can anyone help? Well I am having serious problems with CSS floats. I created a design in Photoshop, sliced it and imported everything in Dreamweaver. So far, so good. However when you slice with Photoshop, you get a CSS with "position: absolute", which I am trying to avoid. However I managed to get the header partially correctly floated, but for some reason, it doesn't display correctly in Firefox. Not to mention Internet Explorer 8, which shows (empty) spaces everywhere (tried padding/margin 0px, but didn't do anything). Can someone take a quick peek and see what I am doing wrong here? And if possible correct the errors or tell me what I am doing wrong? Cause I am really hitting a brick wall at the moment. Here is the page: link Thanks in advance. //edit Okay I fixed the empty space problem in IE, I seem to have forgotten to set the doctype up correctly; my bad. But I am still having a problem with the floats. Hey everyone! This is my first post here as I am bordering on throwing my laptop out of the window so I'm in dire need of some help! My problem is - I have a background image which consists of 2 columns and a main content area. I want this to be tiled vertically and to fill the width of the page (but not repeat.) But no matter what I try it will just hugely overflow the browser horizontally and so I'm only seeing the left column and half of the center part. This is a scaled down version of the image I'm using: ht tp://ww w.frontier-music.co.uk/example2.jpg This is driving me absolutely mental as I just expected there to be a quick fix for keeping the image within the browser size! This is the sort of thing I'm after: ht tp://ww w.frontier-music.co.uk/example.jpg If anyone could offer any sort of help I would be hugely greatfull as I'm having a bit of trouble getting my head around all of this code! ht tp://ww w.teddyzoo.com - This is a pretty similar background effect to what I'm after, the based my background image around theirs to try and work out what they had done! Many thanks in advance Josh EDIT - Sorry about the broken links, I wasn't allowed to post working ones. CSS back ground image isn't showing at all. Tried everything, googled, flipped through CSS books, moved the image into different directories, drank more tea and finally flipped Help! Site link : http://weary.me.uk/MT/ Code: * { margin:0; padding:0; }
BODY { background-color:#FFFFFF;
font-size:12px;
}
#header { background-color:#FFFFFF;
padding:0px; }
#left {
float:left;
width:18%;
padding:0%;
margin-left:1%;
margin-top:0%;
}
#right {
background-image: url(right_background.jpg);
background-repeat: no-repeat;
margin-right: 20px;
width: 220px;
border:1px solid #d2d7e4;
float:right;
width:20%;
margin-right:0%;
margin-top:0%;
padding:0px;
}
#center {
margin-right:30%;
margin-left:14%;
padding-left:10%;
background-color:#FFFFFF;
}
#footer { clear:both;
background-color:#FFFFFF;
padding:8px; }
Hi, I have a background image that I want to incorporate into the header div of a fixed width layout. The header is of a gradient style - on the left it is a solid color and as you move along towards the right it fades to white. The image is 981x76. If I bring it into Gimp, I can scale it to 1920 x 76 and it looks the same. I would like to be able to do that in a div tag, with the image as a background. I would like the image to scale horizontally just like I can do using Gimp. Is this possible? Basically, I want the browser to manage the scaling of the image. I have a site that will be relying heavily on background images sitting behind all the tables. These backgrounds will work in concert with the overall background-color: property. My question is this, on the style sheet, of which I would like to have ONE. Is there a way to change entire background-images for each page within the site. In another post, we went over how to change images within the same <div> by simply making the <div> a holder and swapping the image on each page by using something like: <div id="image" class="page_two"> Is there a way to do something similar using an entire background image? Or do I need a separate style sheet for each page? Perhaps the main style sheet which has a body like this body { margin:0px; } and then attach an additional style sheet to each page that supersedes the body tag in the main sheet? I hope I am making sense... thanks jon Hi there, hopefully someone can help me out with some background image issues. I simply want a right hand section on my site, where i can fill it with content and it can expand appropriately as per the content and display a top, middle and bottom background image. this is because the style of the site has curved edges, so this will be a top image with the curves, a centre image and a bottom image with bottom curves. here is my code but none of the top or bottom background images show. please help, thanking you in advance. css: #feature { float:right; width: 287px; height: auto; } .featuretop { background-image:url(../images/css/featuretop.gif); background-position:top; background-repeat:no-repeat; } .featuremiddle { background-image:url(../images/css/feature.gif); background-position:center; background-repeat:repeat-y; } .featurebottom { background-image:url(../images/css/featurebottom.gif); background-position:bottom; background-repeat:no-repeat; } html code: <div id="feature"> <div class="marTOP10"> <div class="featuretop"></div> <div class="featuremiddle"></div> <div class="featurebottom"></div> </div> </div> Hi Folks, I've designed an H1 page heading within a DIV with rounded ends. and HTML text inbetween. It should appear as a horizontally expanding and contracting capsule. I can make one end rounded with a CSS background image in the DIV or the H1 - but how can I do the other? No tables allowed here and it has to be done only in the stylesheet. I've tried a BG in the DIV and a BG in the H1 but they don't line-up, even when there's no padding or margins. Is it possible to somehow attach an image to one side of an element? Thanks John K. I have my content bg which is to repeat, but I want to put like another background image set to the right in the content box. HTML Coding ************* <div id="special_feature_top"> <img src="images/specialfeatures.jpg" width="800" height="30" alt="" /> </div> <div id="special_feature_mid"> <img src="images/imagegalleryfeature.jpg" width="193" height="178" alt="Image Gallery" /> <img src="images/jointodayfeature.jpg" width="193" height="178" alt="Join Battle Glory Today!" /> <img src="images/forumsfeature.jpg" width="193" height="178" alt="Forums" /> </div> <div id="special_feature_btm"> <img src="images/specialfeatures_btm.jpg" width="800" height="30" alt="" /> </div> CSS Coding ************* #special_feature_mid { padding: 1px 0px 1px 10px; background-image: url('images/content_bg.jpg'); } That's the coding for the image now just with the content_bg. Now the other image I just want set to the background also so text can over lap or other images. It's a really nice opacity image that blends in perfect. I just want it in background also positioned to the right. thanks Matta Is there some way to rig CSS to display 2 separate background images. I wanted to put the 2 images on opposite sides. I tried, but both IE 6 and Firefox 1.0.2 displayed only 1 bg image. Anyone got a suggestion? Edit - Oh yeah...this is for the BODY tag. I thought I ought to mention that. Hi I have a table which i want to add 2 background images too. what i have is. one image with no-repeat at the top. Then for the rest of the table, i want to have a gradient background. Is this possible? Hello, I'm new to Dev Shed, I hope I won't seem like a fool here Is there any way to have to background images? I mean, I want to have a heading background image, and a footer background image to the same table. longing to your replies>>>> Hello, as the subject states I have a question about whether IE can display a background image on a tr and a td correctly. I have a table row with a repeating background then in the first cell in that row I have another background image that goes in the top left corner with a transparent background color on the cell so that the tr background can show though. This works as it should in all browsers except IE where only the td background image appears and its transparent to the page background not the tr background. This is the css: Code: .professor_forum_row {
background: #ffffff url(../images/author_post_background.jpg) repeat top left;
}
.professor_corner_tab {
background: transparent url(../images/article_sticky_author.jpg) no-repeat top left;
}
the html is just a table with those classes assigned to the row and first td. Any ideas on why this is happening? Thanks, Ryan Ive got three divs all nested in a row. The idea is to have the main div (body tag) contain the background image that composes the color. Then the next div contains the upper left hand image and the next div contains the lower right hand image. The problem is this. When I specify "top-left" for the image the image is positioned to the top left. When I specify "bottom-right" for the image in the next div, instead of going to the bottom right, the image ends up all the way over on the top left. why is that? here are my three divs: Code: body {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
text-align: center;
margin: 0px;
border: 3px solid black;
background-image: url(http://www.doublethinkdesigns.com/pics/dtdbg.jpg);
background-repeat: repeat;
/*
*/
}
div#outer {
margin: 0px;
border: 3px solid white;
background-image: url(http://www.doublethinkdesigns.com/pics/upper-left-fan.gif);
background-position: top-left;
background-repeat: no-repeat;
}
div#inner {
margin: 0px;
border: 3px solid black;
background-image: url(http://www.doublethinkdesigns.com/pics/lower-right-samurai.gif);
background-position: right;
background-repeat: no-repeat;
}
|
|||||||