|
CSS - Heading Container Not Sticking To Top Of Its Container
Hi There -
Have a simple container div containing two other divs, top and content. My problem is that I can't get the colorboxtop to stick to the top of its container. There's a wayward space. Can't find any stray margins or padding hanging around. Perhaps fresh eyes can see what I cannot. Please let me know. Any help you can give me would be greatly appreciated. Thanks! Code:
<body>
<div class="colorbox">
<div class="colorboxtop">
<h2>title goes here</h2>
</div><!-- /colorboxtop -->
<div class="boxcontent">
<p>You should read this and <a href="#">Click Here</a>.</p>
<a title="Go Here!" href="#">[button]</a>
</div><!-- /boxcontent -->
</div><!-- /colorbox -->
</body>
No great complexity there...here's the CSS: Code:
body {
color:#666666;
font-family:Lucida Grande,Verdana,sans;
font-size:10px;
font-size-adjust:none;
font-style:normal;
font-variant:normal;
font-weight:normal;
line-height:13px;
}
.colorbox {
margin-bottom:9px;
padding-bottom:15px;
width:300px;
border:thin solid #CCCCCC;
}
.colorbox h2 {
color:#FFCC33;
}
.colorbox {
color:#CC6633;
padding:0px 20px 15px;
margin-top:0;
margin-bottom:10px;
}
.colorboxtop {
background-color: #dddddd;
height:50px;
color:#666666;
background-image: url(images/bg_Tiles/stripe-dk-blue-green.png);
padding:auto 20px;
}
.colorbox a {
color:#C5DBE9;
font-weight:bold;
text-decoration:none;
}
Similar TutorialsHello there, first post, just need a quick fix. Hope you don't mind. So I'm trying to make myself a new portfolio site, but there's this 'error' I can't seem to fix... (Can't post a link in my first post, so just copy/paste "hellspike.thanez.org/newsite" in the addybar.) Basically that 150*300 infobar is supposed to be right next to the image, but it always ends up above or below the container. <!--AK47--> <div id="imgcont0"> <div id="imgcont1"><img src="images/ak47/1.jpg"></div> <div id="imgcont2"><img src="images/ak47/info.jpg"></div> </div> <!--/AK47--> imgcont0 is a 825*300 container, in which imcont1 (render) and 2 (infobar) are supposed to be. Stylesheet: #imgcont0 { width: 825px; height: 300px; margin-left: auto; margin-right: auto; } #imgcont1 { width: 650px; } #imgcont2 { margin-left: 675px; width: 150px; } As you see the code is simple, yet I can't seem to fix this problem. Ideas? I am a new user to the board and apparently cannot make posts containing URL's. Examples illustrating my issues described below are at ...lilinks.com /gp/css_prob/kickboxing.html I want to get the vertical scrolling images to consistently display from the top of the page and terminate at the top of the black footer. Similar image scrollers will appear on other pages that will be of varying depth (follow the 'Brazilian Jiu Jitsu' link for an example) Right now I have one 'container' that would be used for all the pages. I could create separate 'containers' for each scroller and set the height in pixels, but of course I cannot control browser settings, OS, etc. So my basic question is how can I contain the 'container' to 100% of the main content area without exceeding it. I want it to look like this: /gp/css_prob/kb.jpg The style sheet is he /gp/css_prob/css/test.css Thank you in advance for your assistance. Hello, I am asking this here because maybe you people have seen something like this before. I am trying to create a container that will contain other div boxes. These boxes could have differen width and heigths, and I would like thos container to handle there position. I do not know if this is even possible, another solution would be that you put the boxes in the container and determine how many you want to display in one line. However thanks for any sugestions, regards, sim085 I'm not sure where I'm making my mistake but I can't seem to get the boxes inside the container to stay at 100%. Here is the css code Code:
body {
margin: 0; /* zeroes the margins on the body */
padding: 0; /* zeroes the padding on the body ~ Opera carries a default
padding and requires this zeroing */
border: 0; /* zeroes off any existing border */
text-align: center; /* Hack to center the wrapper in IE5.x pc */
background-color:#BB7900;
font-family: Arial, Helvetica, sans-serif;
font-size: 10pt;
}
/* START OF LAYOUT FOR LITTLECREATIONSPHOTOGRAPHY.COM */
.wrapper { /* This is the block that contains all other blocks */
width:100%;
height:100%;
position:relative;
border:1px solid black;
}
.top_menu { /* This is the box that will contain the link at the top */
height:80px;
width:100%;
border-bottom:1px solid white;
}
.middle_container { /* This is the container box that keeps everything right width and center */
position:relative;
width:750px;
height:100%;
margin:0px auto;
z-index:0;
border:1px solid white;
z-index:1;
}
.left_content { /* This the the left hand on content box */
position:relative;
float:left;
height:100%; /*546px;*/
width:160px;
text-align:left;
padding: 2px 4px 2px 2px;
border-right:1px solid white;
z-index:2;
}
.right_content { /* The box that will contain right hand content, company title and picture */
position:relative;
height:100%;
margin-left:160px;
text-align:left;
padding:4px 2px 2px 10px;
border:1px solid black;
}
And here is the link that will show you want it looks like right now. http://littlecreationsphotography.com/css/ Thanks for any help that may come my way.. Stephen Firefox is giving: http://www.promogift.be/index.php?page=producten&catnr=7 So it shows the content out of his box, after a refresh everything is correct, how can i get it working from first loadtime? I have the following: Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>My page </title>
<style type="text/css">
#content { width: 100%; float: left; margin-right: -1px }
.content_container { clear: both; }
.content_header_even, .content_header_odd { width: 100%; background-color: #69bfde; color: #595441; padding: 0.5em 0; text-indent: 1em; }
.content_header_odd { background-color: #b4e8fb; }
.content_graph_container { padding: 1em; }
.content_graph_container_even { background: #ff0000; }
.content_graph_container_odd { background: #00ff00; }
.content_info { width: 20em; float: left; }
</style>
</head>
<body>
<div id="content">
<div class="content_container">
<p class="content_header_even">Header</p>
<div class="content_graph_container content_graph_container_even">
<div class="content_info">
<p>This is column a. This is column a. This is column a. This is column a. This is column a. This is column a. This is column a. This is column a. This is column a. This is column a. This is column a. This is column a. This is column a. This is column a. This is column a. This is column a. This is column a. This is column a. This is column a. This is column a. This is column a. This is column a. This is column a. This is column a. This is column a. This is column a. This is column a. This is column a. This is column a. This is column a. This is column a. This is column a. This is column a. This is column a. This is column a. This is column a. This is column a. This is column a. </p>
</div>
</div>
</div>
</div>
</body>
</html>
Ideally, this will repeat and alternate colors but the text is not colored only a small section above the text. I thought that by enclosing it in the div, the background would be applied to the entire text. What am I doing incorrectly? here's my site for reference. http://www.tobaccosmokeshop.com/temp.htm here's some code PHP Code: #breakfootercontainer{ clear:both; border:solid 1px red; background:url(images/navback.gif); background-repeat: repeat-y; padding:0px 0px 0px 189px; width:100%; } #footer{ border:solid 1px green; float:left; width:562px; text-align:center; } breakfootercontainer is a div that spans the whole width of my site, but pads over for my navigation bar. The problem is, In IE the container holds the footer, but in Mozilla (PC) and on my mac in safari and Mozilla the container is only like 0 px height and the footer div pops over the bottom border on the container. Here's my code I'm using. PHP Code: <div id='breakfootercontainer'> <div id='footer'> <a href='' class="mainnav">duplicate nav</a><br> <a href='' class="mainnav">duplicate nav</a><br> <a href='' class="mainnav">duplicate nav</a><br> <a href='' class="mainnav">duplicate nav</a><br> </div> </div> What is causing the container to not fill around the info inside the footer? Also, I have 2 columns(red border around field picture and welcome column and the nav with the blue border) with a container around them (big white border around both), one shorter than the other (the red border column), but I want the shorter one to go the full length of the container (white border) so my column backgrounds line up and part of the page isn't longer than the other. I want to use my footer as a cap all the way across the page. Is there any way to do this without putting <br>'s in the smaller container to fill it out? Hi, I'm trying to center the main container here, as you can see it's aligning to the left: http://www.wordpressforrealestate.c...es/Design2/www/ If I remove the container width of 100% it centers, however, I need that 100% width so my footer background image can span across the whole footer. Any ideas? Thanks. I want to position my website logo to top left corner (0,0) and I dont want it push my container div down. I cant place logo tag within container tag because the logo overflows to left. if you couldnt picture it in your mind, please check the attached image thank you in advance. http://www.refinethetaste.com/html/ Hey All, I am wondering if it is possible to make a <div> container that grows depending on the size of the other <div> inside of it. Basically the scenario that I am going for... - I have a container <div> that centers all other <div>s on the page. - The container <div> has a double border on it that I would like to appear all of the time. - Depending on the content from page to page that sizes the <div>s inside the container <div> I want the container <div> to change (in height) so that the border stays and so that I can just keep the CSS definitions the same and not worry about changing them on every page. Is this possible? A cheesy way to do this is to just put a whole bunch of line breaks in the container <div> until the page is the height that I want it to be. That's fine, but it makes the code look sloppy and there HAS to be a better way to do this. ~darknailblue Hi, i seem to be having a problem displaying my container as 100%. I have a centred column with a grey background with the following as my html and my css: Code: <html> <head> <link rel="stylesheet" href="default.css" type="text/css" /> </head> <body> <div id="container"><!--BEGIN CONTAINER--> <div id="logo"></div> <div id="motto"> <div id="telno"></div> <div id="quote"></div> </div> <div id="navigation"> </div> <div id="search"><!--BEGIN SEARCH--> </div> <div id="banner_1"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="empty"></div> <div class="box2"></div> <div id="contenthome"></div> <div id="sectiontwo"></div> <div id="sectionthree"></div><!--END SECTION THREE--> <div id="footer"></div><!--END FOOTER--> </div><!--END CONTAINER--> </body> </html> CSS Code:
*{
padding:0; margin:0;
}
body {
height: 100%; font-family: Arial, Helvetica, sans-serif; font-size: 12px;
color: #797979; margin: 0; padding: 0; background-color:#dfdede;
}
div {
border: 1px solid #000;
}
a {
font-family: Arial, Helvetica, sans-serif; font-size: 11px;
color: #66308f; text-decoration:none;
}
#container {
height: 100%; width: 927px; margin: auto;
padding-left: 10px; padding-right: 10px; background-color: #ffffff;
min-height: 100%; /* for mozilla */
}
#logo {
background-image:url(../images/logo.jpg); background-repeat:no-repeat;
height: 164px; width: 374px; float: left; margin-top: 0px; margin-left: 0px;
}
#motto {
height: 164px; width: 549px; float: right; margin-top: 0px;
}
#telno {
height: 58px; width: 549px; float: right; margin-top: 24px; text-align:right;
}
#quote {
height: 80px; width: 549px; float: right; margin-top: 0px;
font-size: 25px; color:#2a4b59; text-align:right;
}
/* top menu navigation */
#navigation {
height: 35px; width: 670px; float: left; margin-top: 0px;
}
/* search box */
#search {
height: 35px;width: 253px; float: left;
margin-top: 0px; background-color:#66308f; text-align:center; vertical-align:middle;
}
.button {margin:0px 0 -3px 5px;}
.inputbox {
width: 13em; margin:2px 0 0px 0px; color: #878484; text-align:left;
}
/* search box end */
.box{
height:52px; width:205px; float: right;
margin-top: 0px; margin-right: 0px; margin-bottom: 4px; margin-left:0px;
}
.empty {
height: 94px; width: 205px; float:right;
}
.box2{
height:141px; width:205px; float: right;
margin-top: 0px; margin-right: 0px; margin-bottom: 4px; margin-left:0px;
}
#contenthome {
height: 50px; width: 927px; float: left;
margin-top: 5px; margin-left: 0px;
}
#sectiontwo {
height: 50px; width: 927px; float: left;
margin-top: 0px; margin-bottom: 10px;
}
#sectionthree {
height: 50px; width: 927px; float:left;
margin-top: 0px; margin-bottom: 15px;
}
#footer {
background-color:#b3d800; height: 56px; width: 927px;
float: left; margin-top:0px;
}
#banner_1 {
height: 413px; width: 701px; float: left; margin-top: 0px;
margin-left: 0px; border-right-color: #FFFFFF; border-right-style: solid; border-right-width: 2px;
}
but for some reason i cant seem to get the container to fill the complete height of the page and i cant seem to locate what error i have made. If somebody could please help, as i would like this to work in all browsers. Thanks in advance. Hi all, I'm working on a website which has a horizontal navigation menu, much like the one on DaniWeb. Basically I need to include an icon which floats right for each list item. IE7 has a bug whereby if the container div does not have a width stipulated then a right floated element inside of the div will cause it to expand to 100% width. I've tried numerous workarounds that i've seen in blogs and other forums but to no avail. I've spent around 15 hours on this bug. I'm not a designer but due to lack of designer resource I'm having to take this on and finding it difficult to come up with a solution. Also the width of the container div is not known as the information is dynamic, so therefore I cannot simply set a fixed width. Here is an example of my code: Code: <div id="navSearchBar"> <!-- My repeater item --> <Item Template> <li> <a href="http://somelink.com">Click me<a> <img src="image_example.png" class="icon"> </li> </Item Template> </div> Code: #navSearchBar{
float:left;
width:auto !important; margin:0 0 10px;
background: #4594bf url(../LayoutImages/previewNav.png) repeat-x !important;
}
.icon
{
margin-top:4px;
margin-bottom:4px;
margin-right:4px;
margin-left:4px;
width:20px;
height:20px;
float:right;
}
Hey guys, I have a web layout with 1 centre column with a height of 100% (i.e. it fills the whole window from top to bottom). I have achieved this using height: 100% and its worked so far but I've just hit a problem. When the content is less than the height of the browser window it is fine - the white extends to the bottom perfectly in both FF and IE. However, if the content extends over the height of the window, the white background stops. So the CSS is making the column the height of the window without taking into consideration the content that is inside it so that when you scroll down, the background dissappears. Any help would be appreciated. The page that works fine: http://www.dgwd.co.uk/1476/site/aircadets/index.php The page that doesnt: http://www.dgwd.co.uk/1476/site/aircadets/uniform.php Thanks a lot guys. Dan I got a bit of a problem, I don't know if this is possible but I want a container that resizes depending on the content inside it. BUT I want the rest of the containers to be the same size as the biggest. I.e. --------- --------- --------- --------- | | | | | | | | | | | | | | | | | | --------- --------- --------- --------- See the first one is bigger? Well I want the rest to be of the same size, i.e. --------- --------- --------- --------- | | | | | | | | | | | | | | | | | | | | | | | | --------- --------- --------- --------- Hello all, I'm trying to create a site using all css positioning but I'm running into some problems that to me, shouldn't even be problems. The main issue I'm having is getting a container div's height to expand based on the height of divs nested inside the container. Vut all I get is the nested divs flowing outside of the container div. I don't have any code to share, because I have it so screwed up right now it wouldn't even help explain my issue. I'm going for a 3 column design, that is wrapped by said container div, and the container divs height would be based on the height of the longest div nested within. I've done alot of searching on the web, and the answer seems to be that this can't be done. But I'm giving it one more try here. I'm also a bit confused about relative positioning. Say that my conatiner div actually worked, and the height adjusted appropriatly. I have a left column, and a right column. both are position relative to the container. But when I do this, it seems to come out that the right columns top positioning is relative to the left columns positioning. If I design everything based on viewable browser area, and allow scrolling when necassery, css is a dream. But thats not very practical. It seems that css great for static websites, but not quite up to par for anything dynamic. Once I calm down and I'm not so frustrated, I'll start over and post some code if my explaination isn't descriptive enough. Any input would be appreciated! :-) Hi! I want to align my container div 120px to the left from the center, what css code should I use for that? You can see the homepage at madeleinegaterud dot com/test I've losing my mind on this. When I look at the following layout in IE6, the "matterR" DIV background color is filling up the entire "content" DIV -- as opposed to staying in its container DIV ("columnR") like I need it to. Any idea why it's bigger than it's container DIV? Code: #content { margin-right: 10px; margin-bottom: 5px; margin-left: 10px; width: 780px; overflow: hidden }
#columnR { width: 595px; height: 308px; float: right; overflow: auto }
#matterR { background: #6d6f71; padding: 20px 20px 40px 70px }
<div id="content">
<div id="columnR">
<div id="matterR">Scrolling text content here...</div>
</div>
</div>
Keep in mind that I can't really assign a pixel width to "matterR" -- as its container DIV needs to scroll vertically. It seems if I assign a pixel width, it want to scroll horizontally to compensate for the scrollbar. Any ideas? Thank you! Please see: http://www.larreamma.com/staff2.html Is there a better way to expand 'main2' then adding/increasing the 'margin-bottom' of the last (empty) paragraph? <p style="margin-bottom:150px"> </p> Without it the bottom floated image overlaps 'main2' and meets the footer. This was not an issue on the other pages of the site as the text extended beyond the floated image(s)/elements. C'mon Kravvitz... |
|||||||