|
CSS - Main Division Only Wraps Two Child Divisions Out Of 4
i have a layout like so:
Image here the reason for the main block was to see if i could set the footer to the bottom of the main block so that it would stay below the content column, ive added a border to the main block to see where it is, and it only seems to go around the header and footer, ignoring the middle columns. You can view the site here, the big border at the top is the border around the main part Similar TutorialsI know this is in the archives. I thought I understood how to do this but I can't seem to get it to work correctly. As always it's ie that won't render it correctly. I have one division inside another. The outer division will center but the nested division will not. I've set html and body to text-align:center , I've added the text-align:center to the body tag and then the division to text-align: left . It's just not working. Here's the example code: Code:
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type='text/css'>
HTML { align-text:center;}
body { align-text:center;}
#wrapper { margin: 50px auto; text-align: left; height:124px; width: 250px; }
.upper { margin: 15px auto; width: 50%;}
</style>
</head>
<body bgcolor="#FFFFFF" text="#000000" style="text-align:center">
<DIV id="wrapper">
<DIV class="upper">Just some text. Just some text. Just some text. Just some text. Just some text. Just some text.</div>
Text to show the area.
</div>
</body>
</html>
Help Also, why is it necessary to have the text-align=center definition in both the embedded sheet and the in-line. Hi guys I have the following CSS code Code:
a.mainlevel:link, a.mainlevel:visited {
display: block;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-weight: bolder;
text-decoration: none;
text-indent: 44px;
font-size: 11px;
background-image: url(../images/bgmainlevel.jpg);
background-position: left;
background-repeat: no-repeat;
color: #336699;
width: 100%;
line-height: 20px;
height: 33px;
margin-bottom: 3px;
margin-left: 0px;
border-bottom: 1px solid #E1E1E1;
}
a.mainlevel:hover {
color: #336699;
text-decoration: underline;
}
This code builds a menu, like the one you can see in the following image. The thing is that I would not like the text to wrap over the background image. Does Any1 know how to correct the css code so this not happens ? Thanks a lot Hey everyone I'm a beginner at CSS. I'm trying to place divisions exactly where I want, but when I attempt to overlap them it doesn't render the way I intend it to (inconsistent in different browsers as well.) Does anyone have any tips? 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" />
<?php
//variables
//title
$title_ = "Title";
?>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
#myhr {
width: 90%;
}
body {
padding: 15px 0px 15px 0px;
margin-left:auto;
margin-right:auto;
margin-top:auto;
margin-bottom:auto;
width: 904px;
background-color:#CCCC66;
}
#container {
padding:
float: left;
width: 898px;
height: 900px;
background-color:#999999;
border: solid rgb(250,0,255);
border-width: 2px 2px 2px 2px
}
#link1{
margin: 0px 0px 0px 0px;
float: left;
width: 222px;
background-color:#CCCC66;
height: 25px;
border: solid rgb(250,0,255);
border-width: 2px 1px 2px 1px;
z-index:1;
}
#link2{
float: left;
height: 25px;
margin: 0px 0px 0px 0px;
width: 223px;
background-color:#CCCC66;
border: solid rgb(250,0,250);
border-width: 2px 1px 2px 1px;
z-index:1;
}
#link3{
float: left;
margin: 0px 0px 0px 0px;
height: 25px;
width: 223px;
background-color:#CCCC66;
border: solid rgb(250,0,250);
border-width: 2px 1px 2px 1px;
}
#link4{
float: left;
height: 25px;
width: 222px;
margin: 0px 0px 0px 0px;
background-color:#CCCC66;
border: solid rgb(250,0,250);
border-width: 2px 1px 2px 1px;
z-index:2;
}
#innerbox{
width:136px;
height:177px;
margin: 0px 0px 0px 68px;
z-index:0;
background: #CCCC66;
border: solid rgb(250,0,250);
border-width: 2px 2px 2px 2px;
}
#innerbox2{
width:136px;
height:177px;
margin: -182px 0px 0px 275px;
z-index:0;
background: #CCCC66;
border: solid rgb(250,0,250);
border-width: 2px 2px 2px 2px;
}
#innerbox3{
width:136px;
height:177px;
margin: -182px 0px 0px 482px;
z-index:0;
background: #CCCC66;
border: solid rgb(250,0,250);
border-width: 2px 2px 2px 2px;
}
#innerbox4{
width:136px;
height:177px;
margin: -260px 0px 0px 689px;
z-index:1;
background: #CCCC66;
border: solid rgb(250,0,250);
border-width: 2px 2px 2px 2px;
}
</style>
<title><? echo $title_; ?></title>
</head>
<body>
<div id="container"><br />
<h1 id="myh1" class="h1color_" align="center"><? echo $title_; ?></h1>
<div align="center">
<hr align="center" id="myhr" />
</div>
<br />
<div id="link1" style="background-color:#CCCC66"><p>link1</p></div>
<div id="link2">link2</div>
<div id="link3">link3</div>
<div id="link4">link4</div>
<!--<button onclick="positioning_width_other()">pos other</button>-->
<br />
<br />
<br />
<br />
<div id="innerbox"><p align="center">Box</p></div>
<div id="innerbox2"><p align="center">Box2</p></div>
<div id="innerbox3"><p align="center">Box3</p></div>
<div id="innerbox4"><p align="center">Box4</p></div>
</div>
</body>
</html>
I'm basically asking the same question as this post, but hoping that I can press for a better solution. I have an element which contains an image and some text, and I need that element to expand to the width of the image, not the text. The size of the image will change, so I can't set a fixed width on the containing element. The code I have which doesn't work looks like this: Code: <html> <head> </head> <body> <span style="display: inline-block; border: 1px solid black"> <img src="someimage.jpg" style="width: 400px; height: 200px;" /> <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam vel placerat sapien. Aenean tempus lorem justo, at eleifend mi. Nam elementum nisl ut elit blandit dapibus. Donec et massa turpis, ac tincidunt odio.</div> </span> </body> </html> The solution proposed in the post I linked to looks like this: Code: <html> <head> </head> <body> <table width="1"> <tr> <td> <img src="someimage.jpg" style="width: 400px; height: 200px;" /> </td> </tr> <tr> <td> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam vel placerat sapien. Aenean tempus lorem justo, at eleifend mi. Nam elementum nisl ut elit blandit dapibus. Donec et massa turpis, ac tincidunt odio. </td> </tr> </table> </body> </html> The second example gives me the functionality I'm looking for, but I would really like to avoid using tables. I'm hoping there is a CSS solution to this. Thanks. Just like the title says, the child is wider than the parent, and i want it automatically centered, so t hat the centers of both divs are inline with each other. I tried the Code: margin 0px auto; which works if the child is smaller, but it doesn't seem to work in this case, any other ideas? I have a division on my web page. I've set the width to 800 and the height to 100. Inside of the division I have 3 nested divisions The first holds a logo and is positioned absolutely within the wrapping division so that it appears on the left side. The division has a background image and the word "HTML" that is centered both vertically and horizontally within the nested division. The second nested division is positioned so that the text within it appears in the upper right of the wrapper. The third nested division is positioned so that the text displays in the lower right hand. The problem is that in IE I am getting alot of white space between the bottom of the wrapper and the bottom of the third nested division. This does not happen in firefox. Can anyone tell me what is hapening here. after just getting my site fixed up, I have encountered a small problem with the divs, where the middle div (the main content) just ignores the right div (where im going to put adds). I was hoping someone could take a quick look at it and tell me how i could fix this small problem. http://funnyguys99.tripod.com/index.htm There are better details of the errors on my page, if you didn't quite get the problem. Hi, these forums have being a godsend to me so far, providing really useful information on my road to becoming a webdesigner, I wondered if someone could help me with a CSS problem I am having. I want to have a green background behind some text, however, I want the background to just be behind the text not to extend all the way across the screen. I think that the best way to do this is to have a division that I set the length of using CSS and include the text in there, my code so far is as follows: <style type="text/css"> body {background-color:} h1 {background-color: #00ff00} p {background-color:} h2 {background-color: transparent} div.block {style=width:300px} </style> <div style="width: 300px"} <p><h1>THIS TEST</h1></p> </div> <div class="block"> <p><h1>THIS TEST</h1></p> </div> For some reason the div is not tallying with the div.block in the style sheet, if I specify the width of the division in the actual html tag within the body its working fine, can anyone spot what I might be doing wrong. I will give some time back at this forum helping others when I am finished on my current project in exhange for the time people have given up for me. Thanks I know how to center a division horizontily in a page with this: Code: #division {
width:800px;
left:50%;
margin-left:-400px;
}
Now I havent been able to center it both horizontilly and vertically, in a fashion that will resize the division based on the resolution. In other words I do not want to use absolute left or right locations. Any help would be appreciated, thanks! Ok what i have been asked to do is set up a webpage with three divisions ( i think), in a column structure. Title at top then seperate divisions? for each of my books which will be getting added. Now the books should be contained as the book title, author, publisher etc with an image to the right of all this information. However the author, title and publisher have all different formats, the author should be bold, the title in italics etc etc. I am finding it difficult to know what tag to use to split up this information. Just now i have created a <div> section labelled book1 for the first book. How do you go about splitting up the txt within this division tag as i will be writing a CSS sheet to manipulate the author, title and publisher with all different formats. Thanks Hi, I have been a CSS/XHTML developer for about 6 months now and I just came accross a problem that I have had difficulty solving... I have spent about a week on this problem, and still no luck... I kind of restarted too with no luck... I am thinking this may be a bug... But it works fine in IE... In firefox, the content division background does not continue, instead a footer background is moved up... This is so weird, I dont know how this can be possible... This has been extremely frustrating... If anyone can help, that would be great! Thanks a lot! Hello, My site contains a basic slideshow that is encapsulated in a "main" div tag. For some reason I cannot center it on the page! I can move it back and fourth but I cannot center it. Can someone please help. www(dot)katieandconrad(dot)com Regards, CB I am using this: http://bonrouge.com/3c-hf-fluid.php At that code stands the #main div starts off at minimum height and expands with content. The #clearfooter div stops it covering the footer when it expands. However. I need the #main div to start off filling the gap between the header and footer rather than it being an expanding element. The reason is that I need a background to cover the area between #header and #footer. I have run out of ideas on how to accomplish this. The CSS I have created so far is: PHP Code: html { height: 100%; } body { margin: 0; padding: 0; height: 100%; background-image: url(../images/2500px_height_bg.gif); font-family: Verdana, Arial, 'Times New Roman', Serif; text-align: center; } #wrap { min-height: 100%; } * html #wrap { height:100%; } #contain_header { height: 20px; text-align: center; padding: 0; } #header { margin:0 auto; width: 760px; height: 20px; background-image: url(../images/header_bg.gif); line-height: 20px; vertical-align: center; } #clearfooter { clear: both; height: 21px; overflow: hidden; background-color: red; } #contain_footer { height: 21px; background-image: url(../images/contain_footer_bg.gif); background-repeat: repeat-x; margin-top: -21px; text-align: center; padding: 0; } #footer { margin:0 auto; width: 760px; height: 21px; background-image: url(../images/footer_bg.gif); line-height: 21px; vertical-align: center; z-index: 1000; } #wrap_content { position: absolute; width: 100%; min-height: 100%; margin-top: -21px; padding-bottom: 31px; padding-top: 20px; background-color: transparent; } * html #wrap_content { height: 100%; } #main { position: relative; top: 0px; left: 0px; height: 100%; background-color: white; } * html #main { height: 1px; } Any suggestions welcome I am trying to add a border to my pictures. I read a tutorial about it but however in firefox it escapes from the box. In IE it looks fine. Has anyone had this problem before? Any tips on fixing it? Thank you here is the link http://www.conceptofgravity.com/test/pictures_test.html Hi, I guess I can't post the URL of my test page with the problem which would make it a lot easier to explain. I don't quite see why anyone would want to re-create the page from pasted code when they could just look at the actual page but oh well. Anyway, I'm working on a website that is supposed to look like a folder -- it is composed of a top graphic, content area, bottom graphic, all wrapped in an outer div. It looks like it ought to in Firefox. In IE there is a gap between the top graphic and the main content div. I've tried making sure all relevant margins, padding etc are set to 0. I can't put the top graphic inside the content div (fixed a similar problem this way on another project) as it is wider! Here is the page code: Code: <%@ LANGUAGE=JScript %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN"> <html> <head> <link rel=stylesheet type="text/css" HREF="kahn.css"> <title>Crollard Kahn</title> </head> <body> <div class="Outer"> <img src="images/top2h.png" style="border: none; margin: 0; padding: 0;"> <div class="Main"> <div class="InnerMain"> <div style="text-align: left; padding: 10px; margin: 0 0 10px 0; background-color: #5C0D10; color: ffffc2; font-size: medium;"> <!--<img src="home_selected.png" border="0"><img src="home1.png" border="0"><img src="home1.png" border="0"><img src="home1.png" border="0"><img src="home1.png" border="0">--> Top navigation bar here... </div> <div class="Left"> <div class="InnerLeft"> Left navbar<br>here<br>...<br>...<br>...<br>... </div> </div> <div class="Right"> <div class="InnerRight"> <h1 class="Header1 Top">Header</h1> <p>Text.</p> <p>More Text.</p> <p>More Text.</p> <p>More Text.</p> </div> </div> <div style="clear: both; margin: 0; padding: 0;"></div> </div> <!-- InnerMain --> </div> <!-- Main --> <img src="images/footer2.png" style="border: none; margin: 0; padding: 0;"> </div> <!-- Outer --> </body> </html> Here is the stylesheet: Code: BODY { background: #868B6B; margin: 0; padding: 0; text-align: center; font-family: MS Sans Serif; color: black;}
DIV.Outer { width: 980px; background-color: #868B6B; margin-left:auto; margin-right:auto; margin-top: 0;}
DIV.Main { width: 950px; background-color: #ffffc2; padding: 0 0 10px 0; margin-left:auto; margin-right:auto; margin-top: 0;}
DIV.InnerMain { width: 918px; background-color: #ffffd9; padding: 0 0 10px 0; margin-left:auto; margin-right:auto;}
DIV.Left {float: left; width: 220px; text-align: center; padding: 0 0 0 0; }
DIV.InnerLeft {width: 212px; margin-left: auto; margin-right: auto; padding: 0 0 0 0;}
DIV.Right {float: right; width: 696px; padding: 0 0 0 0; text-align: center; border-left: 1px solid #5C0D10;}
DIV.InnerRight {width: 668px; margin-left: auto; margin-right: auto; padding: 0 0 0 0; text-align: left;}
.Header1 { font-weight: bold; font-size: x-large; font-family: Times New Roman; color: #5B0D0F; font-variant: small-caps; }
.Header2 { font-weight: bold; font-size: large; font-family: Times New Roman; color: #5B0D0F; font-variant: small-caps; }
.Question { font-weight: normal; font-style: italic; color: black; font-variant: small-caps;}
.Answer { color: black; }
.CK { font-variant: small-caps; }
.Topic { font-weight: bold; color: black; }
.TopicLink { font-weight: bold; color: black; text-decoration: underline; }
P.List { margin-bottom: 2em; }
.Top { margin: 0; } /* weird firefox blank space otherwise */
I'm fairly new to CSS, but am trying to leave tables behind as much as possible. Can anybody please tell me how to fix this? Regards, Elisabeth Hi All, I think the following is a css problem that I have tried to solve but without success and cause a markup validation error that I can't get rid of. Here you can see the original problem simonedegan.net/index_III.html which I tried to correct (see he simonedegan.net) but when I go to validate the code I have the following errors: Line 92, Column 24: ID "flashcontent" already defined. <div class="style4" id="flashcontent">This SlideShowPro photo gallery requires t Line 88, Column 24: ID "flashcontent" first defined here. <div class="style3" id="flashcontent"> Originally I changed the padding from 15px to 200px to allow a proper alignment of the words in the parent pages (e.g. simonedegan.net/news.html). If it is the case how can I create a 'rule' with the padding of 15px on the left only for the main page where the flash instance is (i.e. simonedegan.net) without affecting the parent pages? Many thanks for helping P.S.: my apologies to the moderator for the links. I did not know how to post the questions without URLs so I removed the initial http://. Again my apologies. I have tried multiple times to have a kind of "content" div, where it resizes vertically to the amount of content in it, and stays the same width and is centered. How can I do this? I know min-height doesn't work in IE. Another problem I was having, certain pages would be off to the left when they should have been centered. Please help! Thanks for taking the time to read my question. I have a MainBox that I have all my page in. <div id="MainBox"></div> I had a height set and both IE and FF displayed ok, but if the content was higher than the box, FF expanded and IE didn't. So I took the height off and IE expaned and FF shrunk to nothing. What's up with that? I've attached the code and the one pic. What can I do to get them to display the same? right now all files go in the same folder. Thanks, Brad Hi, I have created a main div and that div have a border color. Know I want that every thing to be within that main div container except footer. But when I put multiple div and use especially float or position the multiple div exceed the border of main div.thing Know how can I put every thing within that main border. I am pasting the css and HTML code. Immediate help appreciated. CSSCODE; #maincotainer { margin-left:auto; margin-right:auto; width:900px; } #containerwithborder { border:1px solid #CCCCCC; width:900px; } #header { margin:0; } #content { padding:1px; clear:both; } #footer { clear:both; margin-right:auto; margin-left:auto; height:78px; width:900px; background-image:url(images/footerbackground.jpg); } #box1 { position:relative; float:left; width:614px; } #box2 { margin-top:30px; position: absolute; float:left; margin-left:630px; } .manu { margin-left:2px; clear:both; position:relative; float:left; background-image:url(images/manuback.jpg); width:235px; height:307px; } .manuitem { padding-top:28px; } .manuitem ul { margin:0; padding:0; } .manuitem ul li { display:block; } .manudevider { background-image:url(images/manudevider.jpg); height:2px; margin-bottom:10px; margin-top:7px; } .errow_spacing { padding-right:10px; padding-left:20px; } #flashportion { position:absolute; margin-left:265px; float:left; width:345px; height:307px; } #servics_manu { position:relative; float:left; width:238px; margin-top:5px; } .serviceslist { padding-left:40px; padding-top:10px; } .serviceslist ul { margin:0; padding:0; } .serviceslist li { list-style-image:url(images/errow2.jpg); text-decoration:underline; } #welcome { margin-top:10px; position:absolute; float:left; margin-left:250px; width:630px; } |
|||||||