|
CSS - Example + Questions About Example (divs, Backgrounds, Floating)
I am working on this site for a client and I can't figure out what the hell I'm doing wrong. It doesn't "work" in FireFox, which of course (I assume) means that IE is simply forgiving my errors, but let's not have a religious debate, let's solve problems.
http://www.nolower.com/example.php http://www.nolower.com/css/public.css I am curious about two things: 1) Why is my white background (the main div) not showing up on this page? I thought I had cleared every float, yet, still, there it isn't! 2) Why does the background shadow (the main div), a background image that extends into the padding in IE as you'll see, not show up on FireFox? If anyone can help identify what I've done wrong and explain to me what made it break in CSS, I'd be very grateful. I've been trying to figure out the peculiarities of CSS and its very poor cross-implementation (not that tables were ever cross-implemented well either, oi) for about a year now and I always either make a new mistake or find something I haven't figured out yet. Thanks! Similar TutorialsHello. I need some help with positioning css. I want a div in the center of the page with a width of 780 px and a height of the entire page. On the left I want a background image aligning to the right and on the right side I want a background image aligning to the left. These two div's must be stretching to the whatever size your screen is. I just can't get it done. Right now I have this, but well, it's not really working properly. PHP Code: .left { width:30%; margin-bottom:0px; background-position:top right; float:left; height:100%; background: url("../img/left.jpg") top right repeat-y; } .right { width:30%; margin-right:0px; margin-bottom:0px; float:left; height:100%; background: url("../img/right.jpg"); } .centerpositie { width: 40%; //border:1px solid black; float:left; top:0px; background-color:#FFFFFF; width:780px; height:100%; } Hello all, I've been scratching my head on this one for a bit. First of all, here's the site I'm working on: http://dev.discoverahost.com If you'll note, the background for the content is currently blank. I'm trying to get a background to cover that area. Here's the basic structure for that page: Code: <div id="main_header"> </div> <div id="main_navigation"> Home :: About :: Link :: Such and Such </div> <div id="content_wrap"> <div id="image_below_nav"> </div> <div id="content_main_header"> </div> <div id="content_main"> Lorem Ipsum blah blah blah </div> </div> Note: That's not all the code. You can look at the souce for the full thing. The background I'm trying to apply I want to go on the wrapper background (content_wrap). I've got it all defined in the CSS file, located he http://dev.discoverahost.com/css/style.css The problem is that the wrapper isn't expanding vertically to include the background, even though I've got plenty of text inside of another nested div. Now it works if I put content outside of these divs ... which I really don't want to do. Maybe I've got my structure all wrong for doing this kind of thing, but any and all help is very much appreciated. Thanks! - Adam Hi all! I've got a slight problem with my div layout, and seem to be stuck, maybe one here has had similar troubles, and found a solution *g* I've got a Layout, that needs the following things: *) repeat-y background image for a parchment background *) header and footer images for the beginning and end of the parchment *) text that flows over the parchment, header and footer images Normally I'd just put the parchment in a parent div, put the header and footer in another div (contained in the parent div) and put the text in another div with biggest z-index (also contained in parent div). Unfortunately, as the text needs to stretch the parent div so that the parchment background is behind the whole text, I can not set the text div as position absolute, 'cause absolute divs don't expand their parents. I also can not position the header and footer divs without position absolute. But position absolute divs are always above non absolute divs, even is z-index is set higher in the non absolute divs. Is there anything i miss? Is it simply not possible? Thanks in advance! Roman Hi! Does floating an inline element automatically converts it to a block-level element? If yes, what does this give for an inline element: float: left; display: inline; ? Is it bad practice to float inline elements directly? (img, span, input, and so on). Thanks Hi im experiencing big problems with creating this layout. I spent whole day with positiooning this divs but i cant do this final layout. Everytime i want to float divs to left DIV 1 and DIV 2 are ok but DIV 3 jump to new line under DIV 2 and dont fit the gap between DIV 3 and div 1 . Can someone please help me ? Thanks ... link to image : xipic.eu/ufiles/njf25uy8_divs.png Hello, can anyone help me with this? I'm having trouble floating some divs and I can't find the problem. 1. navigation should be aligned with the bottom of the h1 logo 2. the content div should come next to the list of brands. The content div should overlap the black bg at the top. www. claeysconsult . be / misskado / index2.html Thanks in advance... I am working on css for a project of mine and I am having a few minor problems with the position and widths of my divs. If I have a parent container and divs within the parent container do the child containers not inherit the width and height of the parent containers? For example here is my css thus far: Code:
/* CSS Document */
h1 {
font-family: Geneva, Arial, sans-serif;
font-size: 20px;
color:#000000;
}
h2{
font-family: Geneva, Arial, sans-serif;
font-size: 16px;
color:#000000;
}
h4{
font-family: Geneva, Arial, sans-serif;
font-size: 12px;
color:#000000;
}
body {
margin: 0;
border: 0;
background: #ededed;
}
/*============================ Begin Layout Structure ============================*/
#wrapper {
width: 1024px;
min-height: 768px;
position: relative;
margin-left: auto;
margin-right: auto;
margin-top: 5px, auto;
background: #ffffff;
}
#accountselector {
position: relative;
height: 15px;
margin-left: auto;
margin-right: auto;
margin-top: auto;
}
#headerwrapper {
position: relative;
padding-top: 5px;
width: 100%;
height: 200px;
}
#headerwrapper-left {
position: relative;
width: 65%
height: 100%;
}
#headerwrapper-left-logo {
position: relative;
height: 75px;
width: 100%;
background: blue;
}
#headerwrapper-left-navigation {
position: relative
height: 15px;
width: 100%;
background: red;
}
#headerwrapper-left-banner {
position: relative;
height: 110px;
width: 100%;
}
#headerwrapper-right {
position: relative;
width: 35%;
height: 100%;
}
#headerwrapper-right-heading {
position: relative;
width: 100%;
height: 15px;
}
#headerwrapper-right-customer{
position: relative;
width: 100%;
height: 185px;
}
#bodywrapper {
position: relative;
min-height: 478px;
width: 100%;
padding-top: 10px;
}
#bodywrapper-leftwrapper {
position: relative;
height: 100%;
width: 20%;
}
#bodywrapper-leftwrapper-subnav {
position: relative;
height: 50%;
width: 100%;
}
#bodywrapper-leftwrapper-news {
position: relative;
height: 50%;
width: 100%;
}
#bodywrapper-rightwrapper {
position: relative;
height:100%;
width: 80%;
}
#bodywrapper-rightwrapper-body {
position: relative;
height: 100%;
width: 100%;
}
My HTML is as follows: Code: <!DOCTYPE html> <html> <head> <title></title> <link rel="stylesheet" type="text/css" href="test5.css" /> </head> <body> <div id= "wrapper"> <div id= "accountselector">Home Business</div> <div id= "headerwrapper"> <div id="headerwrapper-left"> <div id= "headerwrapper-left-logo">US Sonet Logo</div> <div id= "headerwrapper-left-navigation">Link1 Link2 Link3</div> <div id= "headerwrapper-left-banner">US Sonet Banner</div> </div> <div id="headerwrapper-right"> <div id="headerwrapper-right-heading">Manage Account</div> <div id="headerwrapper-right-customer">Account Control Center</div> </div> </div> <div id="bodywrapper"> <div id="bodywrapper-leftwrapper"> <div id="bodywrapper-leftwrapper-subnav">Link1 Link2 Link3</div> <div id="bodywrapper-leftwrapper-news" >News</div> </div> <div id="bodywrapper-rightwrapper"> <div id="bodywrapper-rightwrapper-body"> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras volutpat, purus ac pellentesque adipiscing, mauris ligula convallis metus, vitae scelerisque nibh orci quis mi. *** sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur porttitor aliquam libero. Quisque molestie ornare sem. Nam euismod sem lacinia ipsum. In pharetra metus ut dolor cursus aliquam. Maecenas eu ante quis enim tincidunt laoreet. Pellentesque varius nunc in ipsum pulvinar sollicitudin. Nunc et mi. Donec auctor dignissim orci. Aliquam sed magna. Pellentesque in dui. In eget elit. Praesent eu lorem.</p> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras volutpat, purus ac pellentesque adipiscing, mauris ligula convallis metus, vitae scelerisque nibh orci quis mi. *** sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur porttitor aliquam libero. Quisque molestie ornare sem. Nam euismod sem lacinia ipsum. In pharetra metus ut dolor cursus aliquam. Maecenas eu ante quis enim tincidunt laoreet. Pellentesque varius nunc in ipsum pulvinar sollicitudin. Nunc et mi. Donec auctor dignissim orci. Aliquam sed magna. Pellentesque in dui. In eget elit. Praesent eu lorem.</p> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras volutpat, purus ac pellentesque adipiscing, mauris ligula convallis metus, vitae scelerisque nibh orci quis mi. *** sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur porttitor aliquam libero. Quisque molestie ornare sem. Nam euismod sem lacinia ipsum. In pharetra metus ut dolor cursus aliquam. Maecenas eu ante quis enim tincidunt laoreet. Pellentesque varius nunc in ipsum pulvinar sollicitudin. Nunc et mi. Donec auctor dignissim orci. Aliquam sed magna. Pellentesque in dui. In eget elit. Praesent eu lorem.</p> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras volutpat, purus ac pellentesque adipiscing, mauris ligula convallis metus, vitae scelerisque nibh orci quis mi. *** sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur porttitor aliquam libero. Quisque molestie ornare sem. Nam euismod sem lacinia ipsum. In pharetra metus ut dolor cursus aliquam. Maecenas eu ante quis enim tincidunt laoreet. Pellentesque varius nunc in ipsum pulvinar sollicitudin. Nunc et mi. Donec auctor dignissim orci. Aliquam sed magna. Pellentesque in dui. In eget elit. Praesent eu lorem.</p></div> </div> </div> </div> </body> </html> Why aren't the children divs inheriting their width from the parents or do they not function this way? Hi there! I'm using this code: CSS: Code:
#content {
margin-top: 75px;
width: 597px;
height: auto;
}
#left {
width: 110px;
height: 497px;
margin: 0px;
padding: 0px;
float: left;
}
#right {
width: 485px;
height: 100px;
}
HTML: Code: <div id="content"> <div id="left"> </div> <div id="right"> </div> </div> --------- But the right-div goes under or over the left-div. I've tried clear:both; between the div's, but it didn't help. URL Hi, If I have Code:
#parent {
background-color: red;
padding: 2px;
margin: 2px;
}
#child1 {
float: left;
}
#child2 {
float: left;
}
</style>
<div id="parent">
<div id="child1">
Some text
</div>
<div id="child2">
Some text 2
</div>
</div>
Then the two child divs will appear underneath the parent one, whereas I want the background from the parent one to be the backdrop for the two child divs. if I remove float: left then they appear in it, but underneath each other. I want them side by side. Is this possible with css? I've used divs before and got them to work just fine. I've read previous posts and can't find the answer I'm looking for because it seems so basic. But here is my problem. I simply can't get the divisions to float left or right. They just sit on top of one another. Here is my style sheet code: Code: #container
{
margin: 0px;
padding: 0px;
width: 800px;
}
#header
{
margin: 0px;
padding: 0px;
background-color: Blue;
}
#menu
{
background-color: Gray;
float: left;
margin: 0px;
padding: 0px;
width: 140px;
}
#content
{
float: right;
margin: 0px;
padding: 0px;
width: 650px;
}
#footer
{
margin: 0px;
padding: 0px;
width: 800px;
}
and my HTML: Code: <div id="container">
<div id="header" align="center">
<!-- #INCLUDE VIRTUAL="includes/example_header.aspx" -->
</div>
<div id="midsection" align="center">
<div id="menu">
<!-- #INCLUDE VIRTUAL="includes/example_menu.aspx" -->
</div>
<div id="content">
<!-- #INCLUDE VIRTUAL="includes/example_common_content.aspx" -->
<p>
Garbage.
</p>
</div>
</div>
<div id="footer" align="center">
<!-- #INCLUDE VIRTUAL="includes/example_footer.aspx" -->
</div>
</div>
Thanks in advance for your help. Hello all, sorry if this is a "newb" question, but I am having trouble with the code on my site. The element "#arrival" is not displaying the proper height unless I literally type code in to fill it up the full 400px. I haven't implemented any paragraph styles, I just want to get the basic elements done for this landing page. How would I go about fixing this? Also, do I have to "float" the "#arrival" element? I would like to have the dog house overlap the first div element of the dog jumping (#dog) like in the jpg. Any help would be greatly appreciated. Here is what it should like: http://i33.tinypic.com/2uh7evm.jpg But this is actually what is happening: http://www.amandambruce.com/DROH/index.html Thanks in advance, Amanda p.s. here is the code directly from the source: Code:
<!DOCTYPE html PUBLIC "-//w3c//DTD XHTML 1.0 Transitional//EN"
"(URL address blocked: See forum rules)">
<html xmlns="html://(URL address blocked: See forum rules)/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8" />
<title>The Dachsund Rescue of Houston</title>
<style type="text/css">
body{
background: url(images/background.jpg) no-repeat top center;}
#contain{
width: 800px;
height: auto;
margin-left: auto;
margin-right: auto;
}
#menu{ width: 466px;
height: 98px;
float: right;
margin-top: 15px;
}
#dog{ width: 491px;
heigth: 257px;
margin-top: 19px;
margin-left: 22px;
float: left; }
/* margin-top is the menu plus the remaining pixels (19) so,
from the very TOP of the page. I guess you keep "adding"
*/
#community{ float: right;
background: url(images/community_spot.jpg) no-
repeat;
width: 231px;
height: 259px;
margin-top: 19px;
margin-right: 22px;
}
#arrival{
clear: right;
background: url(images/arrivals.png) no-repeat;
width: 800 px;
height: 400 px;
}
p{
font-family: helvetica;
font-size: 12pt;
color: #000000;
padding-left: 10px;
margin-right: 10px;
}
</style>
</head>
<body>
<div id="contain">
<div id="menu">
<a href="about.html"><img src="images/about_btn.png" alt="About
button" title="About" border="0"/></a>
<a href="adopt.html"><img src="images/adopt_btn.png" alt="Adopt
button" title="Adopt" border="0"/></a>
<a href="help.html"><img src="images/help_btn.png" alt="Help
button" title="Help DROH" border="0"/></a>
<a href="resources.html"><img src="images/resources_btn.png"
alt="Resources button" title="Resources" border="0"/></a>
<a href="contact.html"><img src="images/contact_btn.png"
alt="Contact button" title="Contact" border="0"/></a>
</div>
<div id="dog">
<img src="images/jumping.jpg" border="0"/> </div>
<div id="community"> </div>
<div id="arrival"> lll
</div></div>
</body>
</html>
Reply With Quote
[code] <div id="wrapper" style="background-color:black;padding:2px;overflow:visible;"> <div id="left-floating-box" style="background-color:red;float:left;">asdfsadf</div> <div id="right-floating-box" style="background-color:blue;float:right;">asdfsadf</div> </div> [code] here is a problem, warpper div doesnt strech to the height of the floating divs, ofcourse when you get rid of floating then everything work but i need this to work as it intended and that is two floating boxes with in one div and this div would wrap around two floating boxes and that way background would stretch as well. I rember solving this problem. Long time ago, but for some reason i am stock right now with this problem. Any one can refresh or sugest anything. Thank you. I'm redoing the layout of my site (www.brohawk.com) using floating divs with negative margins to produce a fluid left column and a fixed right column. I followed an article on A List Apart for the basics and got it working fairly nicely. As a matter of fact, the site works beautifull in Mozilla/Firefox and with minmal errors in NS7. I've even got all but the forums working in Opera. I haven't even begun to work on making it IE compliant. Saving the worst for last. Anyhow, on all the pages except the forums, the divs line up perfectly. However, on the forums page, the right div doesn't stay up top, instead it wraps around under the left div. However, I still get all the space to the right of the left div where the right one should go. Anybody with Opera should be able to check it out and see what I mean. Anyhow, can anybody tell me why it won't float properly on that one page, but it works on all the others? What I have: I have a <div id="content"> that contains the main content of the site. In this <div> I have two other <div>s that are arranged in columns, using float. The left column forms the Navigation for the site and is surrounded by a black border. Here is the problem: If the content on the right is small, the border on the left stretches from top to bottom (since the left div controls the height). However, when there is a lot of content on the right, the border on the left only surrounds the content of the left div and leaves space underneath the bottom border-line. My question: Is there a way to "stretch" the left div so the border touches the top of its parent div on top and the bottom of its parent div on the bottom? Or in other words: Can I force the left div to have the same height as the right div? Here is an example of what I have right now (before tackling the problem): CSS: Code:
#content {
width: 800px;
margin: 0;
padding: 0;
}
#contentNav {
width: 140px;
float: left;
border: thin solid black;
margin: 0;
padding: 0;
}
#contentMain {
width: 600px;
float: right;
margin: 0;
padding: 0;
}
HTML: Code: <div id="content"> <div id="contentNav"> <a href="">Link1</a><br /> <a href="">Link2</a><br /> <a href="">Link3</a><br /> </div> <div id="contentMain"> <p>Here comes a lot of text that spans over many lines. </div> </div> I have two div tags that I want to float next to each other. The page looks like this <table>These Tables stretch 100% of the width</table> <table>''</table> <div class="ParentDiv"> <div class="menuholder"></div> <div class="ChildDiv"></div></div> in FF everything works the way I want to. In IE if I shrink down the browser then the second div tag drops below the first. I want to change this so that it does not drop below but remains in the same place. Is there anything I can set to do that? If I remove the float and change the position on the menuholder the childdiv tag does not drop but the menuHolder content does not stretch the size of the parentDiv and gets chopped off at the height of the childDiv Code:
.ParentDiv {
position: relative;
width: 100%;
width:expression(document.body.clientWidth < 997 ? '997px' : '100%');
min-width:997px;
max-width:100%;
overflow:hidden;
min-height: 400px;
}
.ChildDiv {
position: relative;
width: 100%;
min-height: 400px;
}
.menuholder {
background-color: #EFF3F5;
color: #eef;
position: relative;
float: left;
left: 0px;
top: 0px;
overflow: hidden;
width: 160px;
z-index: 100;
}
Basically, #bodycont has a background. When I type text into this div, it expands and the background is show. However when I put the divs menu and news into it the background doesn't show. I've had this problem before but I can't remember how to fix it html4strict Code: Original - html4strict Code <div id="bodycont"> <div id="menu"> <img src="imgs/menutop.png" /> </div> <div id="news"> wefwef </div> </div>
css Code: Original - css Code #bodycont { background-image:url(../imgs/background.jpg); width:100%; height:auto; } #menu { width:245px; float:left; } #news{ width:545px; height:auto; float:right; }
hi, this might be a simple question: i have a "sidebar" div and a "img-content" div. I floated "sidebar" left and "img-content" right. i want them to be side-by-side. in IE6, the "img-content" div is to the right of "sidebar," but is also below it. in other browsers, they sit side-by-side (which is what i want). this must be a common problem, so before i post my code, wondering if anyone can point me to the fix/hack to get the 2 divs to sit side-by-side in IE6? thanks, tim I have a container div that contains multiple divs floating left within it. The container css is Code:
div.divContainer{
width:100%;
}
The child divs css is: Code:
div.div1{
float: left;
width:50%;
}
When the contents of the left div gets too large (and the browser window too small) the end divs wrap. I have researched this quite a bit and it seems like a solution is to give the container a fixed pixel width. I would like to keep it a relative width. Any ideas? I would even consider placing a horizontal scrollbar on the container rather than having it wrap Thanks |
|||||||