|
HTML - Fluid Width Layouts With Divs And Background Images.........
Ok so here I am yet again with another mess on my hands. I know tables are tales of yore so I have recently dived into the world of divs. Well now I find myself with a coding issue that I could easily achieve with a table no problem.
If I was using a table I could set a BG image and then I could put text over the image or another transparent image over that. I am wanting to achieve the same effect but with divs. If I am not mistaken all I have to do is create a div and float another div on top of that div however this I am finding is not as easy for the CSS beginner. Mind you I am not new to programming. So how is it done? here is a link to the site I am working on DeeJayOctane I am wanting to put text on top of the image in the nav div. But yet again this alludes me for some odd reason. Any help would be appreciated! Thanks Similar TutorialsHello, Lately I've been getting more into HTML/CSS, but I have a problem. What I'm trying to do is make the website the same size on every browser window / resolution. I have heard Fluid Layouts does the trick, however I have not clue how to do that. I've tried going by tutorials, but no one really explains it step by step. What I was wondering if anyone has a link to a "Video Tutorial" on learning how to do Fluid Layouts, or if anyone knows a different way to accomplish this. Thank you I have a centered background image, with a navigation div over the image. Now, I want to put my body div under the picture, CENTERED, and the only way I know how is to use <br /> This is my problem. When I put <br />'s, it looks good in one browser, but terrible in another. Is there some way, hopefully in CSS to center AND absolutely position my div? I figured i would post all of my questions in one post so here i go. 1: What is a blue box, where can i find it, and how do i use it? 2: How can i make a background image so that it fits perfectly into the background and everything else just goes over it. 3:Could someone give me a list of colors that look very good together, and some cool color schemes. 4:how do i use divs? 5:Is there a way that i can make a solid color bar and put text over it? and how can i put text over images? Hi Guys I would like to get the footer background on this site to stretch accross the full width of the browser, but as I have already applied a background image to the body then I'm not sure how to achieve this effect. At the moment I have a background image applied to the footer but I may take this out and just have a simple white strip which covers the full width. The site: http://horizonwebsites.co.uk/soccerwaveuk/ The CSS: http://horizonwebsites.co.uk/soccerwaveuk/screen.css This is an effect I've wanted to use for a while now on several projects so if any one has done this or knows of sites that use it I'd be really keen to learn how. Thanks, Kev Hey I would like to have a bar span the entire width of any screen, but by using 3 seperate images: <-- image goes on forever left ] [ central image ] [ image goes on forever right --> Is this possible? if so, would you kindly show me how? much love... I have a background image written like (<div style="background-image:url(gbackground.gif); width:100%; height:100%). the problem is that only the right side of the image stretches to fill out the right side of the browser window. as seen here only the right grey column stretches to fill out the browser window, while the left side stays at its original width. in the image the columns are equal width. any way i can fix this? thx. Hi, I was trying to develop a page in HTML/CSS but having some difficulties. I have created many pages before but this one is giving me a hard time. What I have done differently this time it, i have used Positioning tags. The problem i am having is I can not set any two divs or images side by side. If i set 1 image and 1 div side by side they are being placed on top of each other. But, i may be going crazy here, i was able to place the top two divs side by side (logo and privacy_protected). Can any one please tell me what i am doing wrong or what i should do? Here is the code that i am using: Code: <body>
<div id="wrapper">
<div id="bodypic">
<div id="logo"><a href="index.html"><img src="images/transparent.png" width="319" height="100" border="0" /></a></div><!--logo -->
<div id="privacy_protected"></div><!--privacy_protected -->
<img src="images/transparent.png" height="29" width="1020"/>
<div id="728block">
<img src="images/transparent.png" height="89" width="18" style="float:left"/>
<div id="728adunit"><img src="images/728x90.jpg" width="728" height="90" /></div><!--728adunit -->
<a href="#"><img src="images/transparent.png" height="89" width="23" style="float:left"/></a>
<a href="#"><img src="images/transparent.png" height="45" width="219" style="float:left"/></a>
<a href="#"><img src="images/transparent.png" height="43" width="202" style="float:left"/></a></div><!--728adblock -->
</div><!--bodypic -->
</div><!--wrapper -->
</body>
And the CSS Code: #wrapper {
height: 1174px;
width: 1024px;
margin-right: auto;
margin-left: auto;
}
#bodypic {
background-image: url(images/wrapper.jpg);
float: left;
height: 1174px;
width: 1024px;
}
body {
background:#FFF;
font-family:Arial, Helvetica, sans-serif;
text-align:justify;
font-size:14px;
}
a:link {
color: #06F;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #06F;
}
#logo {
background-image: url(images/Editorial_v3-1_01.gif);
float: left;
height: 103px;
width: 498px;
}
#privacy_protected {
background-image: url(images/Editorial_v3-1_02.jpg);
float: left;
height: 103px;
width: 526px;
}
#728block {
float: left;
height: 91px;
width: 1024px;
}
#728adunit {
float: left;
height: 90px;
width: 728px;
}
a:hover {
text-decoration: underline;
color: #06F;
}
a:active {
text-decoration: none;
}
Please help! Hi All, Nice site BTW, my problem is i want to add some text with a background colour behind it but i want the background colour to stretch the full width of the page ? Can anybody help me out Thanks I've got another problem with my website. I've taken a screenshot that I wanted for my website background. But since it was took on my screen, it doesn't fill the screen on wider monitors. I'm just wondering if there's any information on auto-resizing a website background. Or is it a scirpt/CSS/php style thing? This problem seems abit more complex than me previous problem. I'm on a 19 inch monitor. Here is my website for those that have bigger screens than me. http://www.dawncraftmc.com/ Hi, I'm trying to put some background images into my web page. But in this case I don't wan't them to cover all the background, nor to repeat themselves. I wan't different images as a backgrond. One would be the head banner at the top, the other one would be the image as background of the index and navigation bar at the left and the other image would be the one that serves as background to the site's content to the right. I need to know how to align this images into the exact position I need them to be, and how to upload this images. I used this code: TD width=160 background="imagename" border="0"" height=345></TD> however, it doesn't takes it as a background but as an image and it pushes the text down instead of being behind. So, please if someone could explain me about this I would be very grateful. Thanks a lot. I just wanted to know if we can put 2 background images in the same webpage ? The first 200 pixels (height) should have one image and the rest of the webpage should have another image. Is this possible in anyway ? Thnx in Advance Hi, this is probably an easy question, but I'm a complete html newb so here goes: I want to put an image on my nevada refinance website of a house or something and then set it into the background so I can overlay a form for submitting your zipcode to get free mortgage quotes. I've found suggestions for setting a background image for the whole page, but I don't want to do that, just put an image on the page and set it into the background to the text box goes over the top. Can someone give me a little advice on how to do this? I'm trying to put a background on my website Im using Wordpad I put the code in but it's coming up as a image not as a background. <body BACKGROUND="...."> Am i using the rong code? Hi, Please help me. I have issue with the background images, when the width of the page/table increases background images are not expending /auto resizing dependent on the column/td width. Please let me know how to solve this issue. Please find code below. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <META NAME="Keywords" CONTENT=""> <META NAME="Description" CONTENT=""> </HEAD> <BODY> <TABLE cellSpacing=0 cellPadding=0 width="100%" border=0> <tr> <td width="1%" height=60px; background="/images/tabs.1.1.gif" style="background-repeat:no-repeat;" > test1 </td> <td width="25%" height=60px; background="/images/tabs.2.gif" style="background-repeat:no-repeat;"> test2 </td> <td width="25%" height=60px; background="/images/tabs.3.gif" style="background-repeat:no-repeat;"> test3 </td> <td width="25%" height=60px; background="/images/tabs.4.gif" style="background-repeat:no-repeat;"> test4 </td> <td width="23%" height=60px; background="/images/tabs.5.gif" style="background-repeat:no-repeat;"> test5 </td> <td width="1%" height=60px; background="/images/tabs.6.gif" style="background-repeat:no-repeat;"> test6 </td> </tr> </TABLE> </BODY> </HTML> Thanks, Raj I'm trying to do a profile layout design using multiple background images in the body. body background-image: url('http://www.geocities.com/korknup/HATEBOOK/LOGO.jpg') is it even possible to embed more than one image in the body, like an image gallery? Hi... I have the following table: HTML Code: <table width="180" border="0" cellpadding="0" cellspacing="0"> <tr> <td> <a href="#"><img src="http://www.radioimaging101.com/images/a65.jpg" width="180" height="37" border="0" /></a></td> </tr> <tr> <td> <img src="http://www.radioimaging101.com/images/spacer.gif" width="180" height="10" /></td> </tr> <tr> <td> <a href="#"><img src="http://www.radioimaging101.com/images/a72.jpg" width="180" height="37" border="0" /></a></td> </tr> <tr> <td> <img src="http://www.radioimaging101.com/images/spacer.gif" width="180" height="10" /></td> </tr> <tr> <td> <a href="#"><img src="http://www.radioimaging101.com/images/a76.jpg" width="180" height="37" border="0" /></a></td> </tr> <tr> <td> <img src="http://www.radioimaging101.com/images/spacer.gif" width="180" height="10" /></td> </tr> <tr> <td> <a href="#"><img src="http://www.radioimaging101.com/images/a82.jpg" width="180" height="37" border="0" /></a></td> </tr> </table> What I want to do is make those images (a65.jpg) part of the background, so that I can place objects on top and cover it up when needed, but have it show through when not covered by another object. I know this is probably remarkably simple, but I've just never had to do it before and haven't had luck with my trial and error approach. Any help is appreciated. This code is on the page at http://www.radioimaging101.com/index.php Thanks! Hey everyone, im new to this site and am hoping that someone on here can help me with this small but annoying problem I have been having. I am designing my first java script site for a friend, and am really happy with the design. However when the site is viewed in Internet Explorer the background image for the header lock onto the page instead of aligning to middle. See it for yourself here. I dont want to have to redesign the layout, but im not happy with leaving that problem as it looks really unprofessional for a business site. I am relatively new to this, but am a quick learner, just hoping someone can help push me in the right direction. Thanks for any help you can offer. Josh Hey All Groovie forum you got here Ok, now to my main point... I want to be able to stretch a image (banner) fully across the screen. I dont want to adjust the height, just make it run from one to side to the other. Also how do I stretch the background image to fullscreen without css? Cheers I am designing a website for an author and generally I only do ColdFusion developing so I am a bit weak nowadays on HTML and CSS, but I was trying to figure out a way to resize a background image without editing. Basically, I am making a table and I want the image to take up 100% of the background of said table. Is there some CSS style code that I could put in to do that? Thank you very much for your help. It is much appreciated. |
|||||||