 |
|
|
| View previous topic :: View next topic |
| Author |
Message |
selectoe
Joined: 10 Mar 2008
Posts: 3
|
 Posted: Mon Mar 10, 2008 4:55 pm centered table with 100% width bar/header |
 |
|
|
Hi, I was wondering how this is done: having a table that is 750px wide, centered in the browser window, and having parts of the website extending to 100% width, as in www.zeald.com or www.stuelken.com/?ref=xampp.com
if you reduce the size of their windows, the table stays centered, and the bits to the sides of the table start disappearing. |
|
ogsolution
Joined: 26 Dec 2007
Posts: 144
|
| Posted: Mon Mar 10, 2008 11:04 pm |
|
|
|
The two websites you mentioned use different methods to layout their site. Personally, I would use the www.zeald.com way, which uses the following code:
| Code: |
<html>
<head>
<style type="text/css">
.wrapper{
margin: 0px auto;
display: block;
width: 750px;
background-color: gray;
}
</style>
</head>
<body>
<div class="wrapper">
Everything else here...
<div style="width:1px; height:100px;">
</div>
</body>
</html> |
|
|
selectoe
Joined: 10 Mar 2008
Posts: 3
|
| Posted: Thu Mar 13, 2008 4:01 pm |
|
|
|
thanks for the reply, but it does not seem to have the desired effect.
Last edited by selectoe on Sun Mar 16, 2008 1:58 pm; edited 1 time in total |
|
ogsolution
Joined: 26 Dec 2007
Posts: 144
|
| Posted: Thu Mar 13, 2008 9:39 pm |
|
|
|
Sorry, I didn't get what you meant the first time but I think I know now. You are talking about the extended blue portion on the top of the www.zeald.com page right?
If that's the case, you can do something like this:
| Code: |
<html>
<head>
<style type="text/css">
body{
background: url(bg.gif) repeat-x top left;
width: 100%;
margin: 0px;
padding: 0px;
}
#wrapper{
margin: 0px auto;
width: 750px;
background-color: Gray;
}
</style>
</head>
<body>
<div id="wrapper">
contents here...
<div style="width:1px; height:1000px;"></div>
</div>
</body>
</html> |
You can create a small repeatable background image and just use CSS to repeat horizontally on your body. Then center your wrapper div in the page and you'll get that effect.
Hope this helps. |
|
selectoe
Joined: 10 Mar 2008
Posts: 3
|
| Posted: Sun Mar 16, 2008 2:00 pm |
|
|
|
| yes it does. thanks |
|
|
|
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum
|
|
|
|
|
 |
|
|
|
|
|
|
|
Forum Home
FAQ
Search
Memberlist
Register
Profile
Log in to check your private messages
Log in
