1 Attachment(s)
[HTML, CSS] Page width exceeding 100%
Hello again!
This time my problem is with my stylesheet (I presume, anyways). To put it short and sweet, the page creates a scrollbar, making the page exceed "100%" to the right if you know what I mean.
I've tried to fix it, but I'm stumped and grew pissed off at it.
If you have any fixes for this, I'd gladly listen. Thank you in advance.
[Edit]: Solution found. It was a problem with the div width, obviously. Thank you anyway.
The web-page is as follows
-
> index.php
Code:
<html>
<head>
<title>Xenzo: Modern Solutions</title>
<link rel="stylesheet" type="text/css" href="styles/global.css">
<link rel="shortcut icon" type="image/png" href="favicon.png">
</head>
<body>
<div id="xenzo-body">
<div id="friends">
<div id="xH">
Meet our friends over at <a href="http://www.koolabar.com" target="_blank">Koolabar</a>.
</div>
</div>
<div id="clear"></div>
<div id="xenzo-head">
<div id="xH">
<table cellspacing="0">
<tr>
<td>
<div id="logo">
<a href="http://www.xenzo.net"><img src="images/logo.png"></a>
</div>
</td>
<td align="right">
<div id="nav">
<table id="nav" cellspacing="0">
<tr>
<td valign="top"><a href="http://www.xenzo.net/"><img src="images/navigation/home.png" onmouseover="this.src='images/navigation/home-hover.png'" onmouseout="this.src='images/navigation/home.png'"></a></td>
<td valign="top"><a href="http://www.xenzo.net/hosting/"><img src="images/navigation/hosting.png" onmouseover="this.src='images/navigation/hosting-hover.png'" onmouseout="this.src='images/navigation/hosting.png'"></a></td>
<td valign="top"><a href="http://www.xenzo.net/support/"><img src="images/navigation/support.png" onmouseover="this.src='images/navigation/support-hover.png'" onmouseout="this.src='images/navigation/support.png'"></a></td>
<td valign="top"><a href="http://www.xenzo.net/support/"><img src="images/navigation/storage.png" onmouseover="this.src='images/navigation/storage-hover.png'" onmouseout="this.src='images/navigation/storage.png'"></a></td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</div>
<div id="xenzo-major-banner">
<div id="xH" style="text-align: center;">
<img src="images/banners/excited.png">
</div>
</div>
<div id="xH" style="text-align: center;">
<img src="images/xenzo_products.png">
</div>
</div>
<div id="clear"></div>
<div id="xenzo-products">
<div id="xH">
<table align="center" style="padding-top: 25px;">
<tr>
<td>
<div id="xenzo-product-layer1">
<div id="xenzo-product-layer2">
<div id="xenzo-product-layer3">
lol hai
</div>
</div>
</div>
</td>
<td>
<div id="xenzo-product-layer1">
<div id="xenzo-product-layer2">
<div id="xenzo-product-layer3">
lol hai
</div>
</div>
</div>
</td>
<td>
<div id="xenzo-product-layer1">
<div id="xenzo-product-layer2">
<div id="xenzo-product-layer3">
lol hai
</div>
</div>
</div>
</td>
</tr>
</table>
</div>
</div>
</div>
</center>
</body>
</html>
> /style/global.css
Code:
/* --------------------------------------
| Copyright 2009 The Xenzo Project |
| http://www.xenzo.net/ |
---------------------------------------*/
body
{
background-color: #ffffff;
margin: 0px;
}
div
{
margin-right: auto;
margin-left: auto;
width: 740px;
}
#xenzo-body
{
width: 100%;
}
#xH
{
width: 50%;
}
#friends
{
padding-top: 5px;
padding-bottom: 5px;
width: 100%;
font-size: 11px;
font-family: lucida grande, arial;
color: #7f7f7f;
text-align: right;
background-color: #eeeeee;
}
#friends a, a:link
{
color: #7f7f7f;
font-weight: bold;
text-decoration: none;
}
#friends a:hover
{
color: #cecece;
}
#clear
{
height: 1px;
width: 100%;
background: #dddddd;
}
#xenzo-head
{
width: 100%;
background-color: #ffffff;
padding-top: 3px;
}
#logo
{
height: 49px;
width: 141px;
display: block;
margin-top: 13px;
margin-left: 10px;
}
#nav
{
margin-right: 50px;
}
#nav td
{
height: 17px;
padding-left: 10px;
padding-right: 10px;
}
#xenzo-major-banner
{
width: 100%;
}
#xenzo-products
{
width: 100%;
background: url('../images/products_gradient.png') repeat-x;
height: 200px;
}
#xenzo-product-layer1
{
width: 300px;
border: 1px solid #dddddd;
height: 210px;
background: #ffffff url('../images/product_info_gradient.png') repeat-x;
}
#xenzo-product-layer2
{
width: 100%;
border: 1px solid #ffffff;
height: 210px;
}
#xenzo-product-layer3
{
padding: 5px;
}
The web-site is attatched if you would like to run your own.
And, excuse the crappy coding, I know, it usually gets the job done :)
Re: [HTML, CSS] Page width exceeding 100%
When you have the width at 100% and the padding-left/right is in use, than it will excede the limit. Either change it to 90%, or take out the padding.
Re: [HTML, CSS] Page width exceeding 100%
Quote:
Originally Posted by
s-p-n
When you have the width at 100% and the padding-left/right is in use, than it will excede the limit. Either change it to 90%, or take out the padding.
I've already fixed the problem if you didn't see. And I know that, and it wasn't the problem. But thank you anyway.
