|
CSS - Width: 100% Not Filling Entire Page
I'm using this html:
Code: <div id="titlebox">
<div id="title">
<img src="images/title.png" alt="Garden Pub & Grille" />.
</div>
</div>
with this css: Code: html, body {
font-family: Century Gothic;
text-align: center;
background-color: #DEF9FA;
height: 100%;
min-width: 100%;
margin: 0;
padding: 0;
top: 0px;
position: relative;
}
body > #container {
height: auto;
min-height: 100%;
min-width: 100%;
}
#titlebox div {
background-color: black;
position: absolute;
min-width: 100%;
margin-left: 0px;
margin-right: 0px;
left: 0px;
top: 0px;
height: 64px;
z-index: 1000;
}
#title div {
width: 1000px;
background-color: black;
}
Trying to get a black bar across the top with an image centered in it. Problem is, when the page is smaller than the content and there is a horizontal scrollbar, the black bar only goes to the edge of the window, but when you scroll right, it dissapears and is cut off. I have a similar setup on the bottom of the page that works correctly (a table with links is inside that one). Why is this not working? Thanks. URL Image doesn't seem to be showing up, link: http://img15.imageshack.us/img15/5697/29946518.png Similar TutorialsHowcome: html, body { color: #06F; background-color: #000; font-size: 16px; text-align: center; width: 768px; } Doesn't center the page in the browser? How can I center it? Output example on my website here. hi, i m trying to design a page with a logo at the top.just like this site. http://richgirlstore.com/xcart/home.php but i want the logo to be displayed in a way that it covers the entire width of the browser window when a user opens the page.the screen sizes are different depending on the type of monitor used by people.so how can i fix this problem.thanks... Hello, I have a header which extends to 100% the width of the browser. I am trying to get the footer to do the same but it's only about 90% the browser's width. Here's my CSS for the footer: Code: #footer {
width:100%; /* this will create a container 80% of the browser width */
background: #327ec1;
margin: 0 0 0 -38; /* the auto margins (in conjunction with a width) center the page */
border: 0px;
text-align: left; /* this overrides the text-align: center on the body element. */
height:120px;
}
#footer_container {
width:950px; /* this will create a container 80% of the browser width */
background: #327ec1;
margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
border: 0 px;
text-align: left; /* this overrides the text-align: center on the body element. */
height:120px;
}
the site ishere any ideas? thanks Something for the css pros: Can anybody give me a hint on how to convert the following (table) based markup snippet to div-only markup? http://www.twosailors.net/test.html In all my tests I cannot get the rightmost cell expand so the whole menu gets it's total size. I do NOT want to convert the boxes to fixed width but keep them shrinkwrapping around the menu texts. Also, I do want a border around the boxes so any faking with background colors will not work either. Any ideas? Andreas Pardeike Hi, Here is my problem: I have a horizontal css menu using a list. It is embedded within a table <td> element. The menu is floating to the left as I suppose is inteneded by the css code, but I want the whole list to be centered with respect to the <td> element. I put <td align=center> but that does not center the whole list. It is still flushed against the left side of the <td> element. Also, I want the entire list to cover the entire width of the <table>. How do I accomplish these tasks? I have searched on google without any success. thank you for your help in advance. Here is the CSS code and Html code for your reference: CSS: Code:
<style type="text/css">
.horizontalcssmenu ul{
margin: 0;
padding: 0;
list-style-type: none;
}
/*Top level list items*/
.horizontalcssmenu ul li{
position: relative;
display: inline;
float: left;
}
/*Top level menu link items style*/
.horizontalcssmenu ul li a{
display: block;
width: 80px; /*Width of top level menu link items*/
#width: 95px;
_width: 95px;
padding: 2px 8px;
border: 0px solid #202020;
border-left-width: 0;
border-right-width: 0;
text-decoration: none;
/*background: url(http://asc2009.dreamhosters.com/menubg.gif) center center repeat-x;*/
color: white;
font: bold 13px Tahoma;
}
.horizontalcssmenu ul li a:visited{
color:white;
#color:white;
/*background: url(menubgover.gif) center center repeat-x;*/
}
.horizontalcssmenu ul li a:hover{
background: yellow;
color: blue;
#color: blue;
/*background: url(menubgover.gif) center center repeat-x;*/
}
HTML Code: Code: <table width="900" height="20" border="0" cellpadding="0" cellspacing="0" style="border-bottom:1px solid black;"> <tr> <td background="menubg.jpg" align="center"> <div class="horizontalcssmenu" align="center"> <ul> <li><a href="default.htm">Home</a></li> <li style="border-left:1px solid black"><a href="default.htm">About Us</a></li> <li style="border-left:1px solid black"><a href="default.htm" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu1, '150px')" onMouseout="delayhidemenu()">Products</a></li> <li style="border-left:1px solid black"><a href="default.htm">Downloads</a></li> <li style="border-left:1px solid black"><a href="default.htm">Service</a></li> <li style="border-left:1px solid black"><a href="default.htm">Requests</a></li> <li style="border-left:1px solid black"><a href="default.htm">References</a></li> <li style="border-left:1px solid black"><a href="default.htm">What's New</a></li> <li style="border-left:1px solid black"><a href="default.htm">Contact Us</a></li> </ul> </div> </td> </tr> </table> Please visit my site where the menu is currently hosted. the url is http://asc2009.dreamhosters.com You will see my problem. You will notice when you hover your mouse over the last item in the menu, you will notice that the hover color does not go the whole way to the end of the td element. the list is flush to the left of the td element I need it to cover the whole width of the table. any help would be very much appreciated. Hi, I'm trying to make a div in my website take up the entire height of the page, or more if the page is longer. However when I've managed to get the div the full height of the page, the contents leave the div when it's longer than the page. I want the div to stretch, but be at least as long as the page. Here is a simplification of my code as an example: Code:
<html>
<head>
<style>
.contentdiv{
height: 100%;
width: 758px;
top: 0px;
position: relative;
border: 1px solid #89a9c7;
padding-top: 0px;
padding-bottom: 0px;
border-spacing: 5px;
bottom: auto;
}
.footerdiv
{
position: absolute;
bottom: 0px;
background-color: blue;
width: 100%;
height: 20px;
}
</style>
</head>
<body>
<div class="contentdiv">
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
<div class="footerdiv">a</div>
</div>
</body>
</html>
Hello all. I am working on a sign on page that uses two divs nested in a table. I have a header above them, and a footer below, and I want the divs (which have a nice gradient background) to stretch all the way down to the footer, regardless of the amount of content. In a simplified format, I have: Code:
<table cellpadding="0" cellspacing="0" style="height:100%; padding-top:20px; padding-bottom:20px; width:976px;" border="0">
<tr>
<td class="wrapper1" id="wrapper1" valign="top">
<table cellpadding="0" cellspacing="0" border="0" height="100%">
<tr>
<td valign="top" width="100%" style="border:3px dotted black; height:100%;">
<table style="width:100%; height:100%;" border="1">
<tr>
<td valign="top" style="height:100%;">
<xsl:call-template name="bodyContainerTemplate"/>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
The tables stretch just fine. Where I am running into problems is in my bodyContainerTemplate. That template looks like: Code:
<!--bodyContainerTemplate-->
<div class="bgcolor1" style="width:976px; height:100%; border:2px solid;">
<div class="login_bg" style="height:100%;" id="login_bg">
<table width="100%" height="100%" border="0" style="position:relative;">
<tr>
<td>
My content goes here
</td>
</tr>
</table>
For some reason, once it gets into the template, height:100%; doesn't work anymore, and the divs simply stretch big enough to make room for the content. What styles am I missing for those divs to be 100%? I have messed with: min-height height:auto, relative, etc. margin:0 and a few other things, none of which are seeming to make a difference. Thanks! For caching purposes and/or maximum performance would it be more beneficial to have the same large css document referenced in every page on my site or to have a much smaller different one referenced for each page in my site. example is at http://bluewebpages.com/arch.php I am fairly proficient at coding css and think it's about time to clean(organize) it all up, even though it does validate. Anyway I was wondering if someone could please help me with the overlap problem for the right (smaller) column. I want the entire main content of the page, the part before the footer, to extend down when there is more content to side, not just the left/main content side. EDIT: Fixed .. thanks! The `clear:both;` was what it needed Hi all, I have written a page with jsp and ajax to dynamically load page contents. I also added a hidden "processing.." message image with the following code: Code: <img src="<%=IMAGE_BASE_URL%>/processing-img.gif" id="processing" style="display:none;z-index:2;position:relative;top:250;right:-250"> this img tag was placed right after the <body> tag. When the user clicks on a link, I turned this css property to display:block so that it shows in the middle of the page. But strangely, when it is showing the processing message image, the entire page content after the <img> tag was shifted down a bit and showing an empty row! Does anybody know what's wrong with it? I've tried to change the display to inline using javascript but it still won't help... Any help would be appreciated..thanks.. I'm new to web development and I'm trying to figure out how to make my page a set width, if the view size is less than a certain amount I want the width scroll bar to appear as opposed to the default which rearranges everything? Some examples of what I'm talking about: youtube stackoverflow darkroastedblend (can't post urls) Can anyone point me in the right direction or show me how this is done please? Greetings, I am writing a page that uses CSS to currently place three columns, left, center, and right. I have written the graphics and remainder of the page to fit 1024 x 768. However, when I execute the page, my columns fill the entire resolution (for instance 1280 x 1024) rather than fitting into a 1024 width. What I would like to do is constrain my three columns to a total width of 1024px. The three columns in my CSS look something like this: Code:
#leftcol {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bolder;
border: thin none #EF4138;
margin: 4px;
padding: 4px;
width: 220px;
position: absolute;
height: 280px;
left: 1px;
top: 354px;
background-color: #FFFFFF;
}
#centercol {
border: thin none #EF4138;
margin: 4px 240px;
padding: 4px;
}
#rightcol {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: normal;
border: thin none #EF4138;
margin: 4px;
padding: 4px;
position: absolute;
height: 280px;
width: 220px;
top: 354px;
right: 1px;
}
Is there a CSS command that can constrain these three columns to be only 1024, or must I use an HTML table? Thanks, Korky On http://www.h****inson.co.uk/h****inson5.4 (I guess you can work out the name of the site...I've used a tiny-url in the link though) a horizontal scrollbar is displayed even though there is not content (as far as I can see) that is pushing the sides out this far. Although it is not detremental to the website, can anyone please suggest what is wrong. The main css code is at http://www.h****inson.co.uk/h****inson5.4/files/css.css Thanks for any help. Hi I don't know if this is a CSS issue, but how do you allow limit the movement of web pages when you drag IE window. So if its fixed it can be structured so that it can be seen by users who have a resolution of 800 X 600. And if its not fixed, then the page is stretched when you enlarge the window. Cheers I am trying to build a website and am having problems limiting the width. I need it to go a little something like this ....I need the page width to be limited to 800 pixels so the contents stops on that ?boundary I am trying to update an old site with lots of pages, I am trying to create a printing stylesheet (first time as you may guess) I have managed to exclude what I do not want to print but some text is still running off the RHS of the page. I have tried playing with page widths and margins but to no effect, any suggestions? this is what I currently have: TBODY { position: static; width: 700px; margin: 0 auto; } Hello, I am having a problem getting the section that says WHAT OUR CUSTOMERS HAVE TO SAY to span the entire right side of the page. I would like to set it up so that no matter what screen resolution the page is viewed in, that section will stretch all the way to the right side. Any suggestions? http://www.discinsights.com/cyber/Scripts/default.asp Thanks ahead of time! I have a layout that has text in a left div and the form input in the right. I want the form input to be 100% width of DIV.standard_field_right not 100% width of the entire page. Can someone give me a hint please. CSS and XHTML below: PHP Code: DIV.standard_field_container { width: 98%; padding: 0.4em; border: 1px solid #8B8B8B; background-color: #E2E2E2; overflow: hidden; } DIV.standard_field_left { width: 10em; float: left; margin-right: 5em; font: bold 0.8em Verdana, Arial, Helvetica, sans-serif; } DIV.standard_field_right { font: normal 0.8em Verdana, Arial, Helvetica, sans-serif; } SPAN.standard_field_type_info { font-weight: normal; color: #ff0000; border-bottom: 1px dashed #ff0000; cursor: help; } INPUT.input_text_field { width: 30em; } XHTML: PHP Code: <div class="standard_field_container"> <div class="standard_field_left"> <span class="standard_field_name"><?php echo $field_definition[1]; ?></span> <span class="standard_field_type_info" title="<?php echo $field_definition[7]; ?>">Information</span> </div> <div class="standard_field_right"> <span class="standard_field_input_area"><input name="<?php echo $field_definition[0]; ?>" type="text" id="<?php echo $field_definition[0]; ?>" maxlength="<?php echo $field_definition[10]; ?>"<?php if ($value_applies == '1') { ?> value="<?php echo $row["$field_definition[0]"]; ?>" <?php } ?> class="input_text_field" /></span> </div> </div> is it possible? its the banner... the content spans around 1000 pixels wide so with 100% width i miss a piece when i scroll to right of page just making the body around 1000 pixels seems to get a horizontal scrollbar when its not needed for the content....either that or its just missing some pixels... cant a div be 100% of the page? can it be done? ideally in IE5-6 and Netscape6+ cheers |
|||||||