Hi,
I have been doin a it of work on using div tags rather than tables...
However, I'm stuck
<!-- m --><a class="postlink" href="http://www.epvideo.co.uk/NewEPV/epvondiv.htm">http://www.epvideo.co.uk/NewEPV/epvondiv.htm</a><!-- m -->
<!-- m --><a class="postlink" href="http://www.epvideo.co.uk/NewEPV/style.css">http://www.epvideo.co.uk/NewEPV/style.css</a><!-- m -->
The page is always right to the left hand side. It looks spot on on 800x600 resolution browser, but on bigger - it looks out of place I think.
I have created an alternative - re-direct to index2.htm and use a differnet style sheet - with thing bigger, so it fills the page more - and don't look small out of place, if you know what I mean.
I prefer the 800x600 one (the only one thats online at the moment). Would like it centred on screen though, so its in the middle on 1024 as well.try using %'s as opposed to exact values.Nope, that don't work, when you resize the browser, things slowly creep out of position.sitebody {
width:760px;
height: 550px;
background-color: #EEEEEE;
position: absolute;
left: 50%;
margin-left: -380px;
}Try this:
body {
text-align: center;
}
.sitebody {
width:760px;
margin-left: auto;
margin-right: auto;
background-color: #EEEEEE;
}I would also suggest a touch of "box model hacking" as it doesn't looks so smashing in anything but IE.Originally posted by cthulhu
Try this:
body {
align: center;
}
.sitebody {
width:760px;
margin-left: auto;
margin-right: auto;
background-color: #EEEEEE;
}
Property align doesn't exist : centerOriginally posted by Triumph
Property align doesn't exist : center Ehm.. text-align
Originally posted by Triumph
I would also suggest a touch of "box model hacking" as it doesn't looks so smashing in anything but IE.
whats that?Originally posted by Triumph
.sitebody {
width:760px;
height: 550px;
background-color: #EEEEEE;
position: absolute;
left: 50%;
margin-left: -380px;
}
Cheers...That did it.
Thanks everyone
Use are all a great help. I'm learning stillOriginally posted by Triumph
I would also suggest a touch of "box model hacking" as it doesn't looks so smashing in anything but IE.
LOL, thanks for the compliment...didn't think it was smashing myself...
whats box hacking?OK then, have both versions now - centred on both resolutions - and full page on both.
what one do you think is better
<!-- m --><a class="postlink" href="http://www.epvideo.co.uk/NewEPV/style1.htm">http://www.epvideo.co.uk/NewEPV/style1.htm</a><!-- m -->
or
<!-- m --><a class="postlink" href="http://www.epvideo.co.uk/NewEPV/style2.htm">http://www.epvideo.co.uk/NewEPV/style2.htm</a><!-- m -->
ta againOriginally posted by kevinmcqueen
whats box hacking? Something that prevents this:The more I look at it perhaps box model hack won't fix that...maybe the widths just aren't wide enough in parts. Hmmm.You can ry removing "width:760px;" from .middle and .bottom for starters.You don't need to absolutely position the main div:
.sitebody {
width:760px;
margin: 10px auto;
background-color: #EEEEEE;
}Just this will do the job
#container {
margin-left: auto;
margin-right: auto;
}
<body>
<div id="container">
everything in here
</div>
</body>sorry I left out the width
#container {
margin-left: auto;
margin-right: auto;
width:750px;
}
<body>
<div id="container">
everything in here
</div>
</body>Originally posted by NogDog
You don't need to absolutely position the main div:
.sitebody {
width:760px;
margin: 10px auto;
background-color: #EEEEEE;
}
I think you do with the negative margins thing. otherwise the left variable doesn't act properly.Originally posted by cthulhu
You can ry removing "width:760px;" from .middle and .bottom for starters. Yeah, that was it. I feel dumb.
sorted that...
to take into account the 10px padding as wellThe code below is all you need to center a DIV layout, along with notes about any browser bugs you could run into.
<!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>
<title>Center whole layout</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css" media="screen">
<!--
/* text-align: center; will center the layout for IE5-Win and IE6-Win
running quirks mode (no DOCTYPE tag at beginning of document). */
body {
margin: 0;
padding: 0;
text-align: center;
}
/* The auto left and right margins center the layout in standards
browsers, IE6-Win (in standards mode) and IE5-Mac. */
#wrapper {
margin: 0 auto 0 auto;
text-align: left; /* Reset text alignment for Western languages. */
width: 770px;
}
/* Standards browsers will cut off portions of the left and right edges
of a layout if the browser viewport is too narrow, unless the
#wrapper <div> has a left and right border. Internet Explorer is not
affected by this, and the style rules are hidden. Setting the border
color to transparent initially returns a CSS syntax error at the W3C
CSS validator, so for the sake of validation, the border color is
set to transparent on a separate line. */
html>body #wrapper {
border: 1px solid #fff;
border-color: transparent;
border-top: 0;
border-bottom: 0;
}
-->
</style>
</head>
<body>
<div id="wrapper">
<!-- Place all HTML for the entire page here. -->
</div>
</body>
</html>
I have been doin a it of work on using div tags rather than tables...
However, I'm stuck
<!-- m --><a class="postlink" href="http://www.epvideo.co.uk/NewEPV/epvondiv.htm">http://www.epvideo.co.uk/NewEPV/epvondiv.htm</a><!-- m -->
<!-- m --><a class="postlink" href="http://www.epvideo.co.uk/NewEPV/style.css">http://www.epvideo.co.uk/NewEPV/style.css</a><!-- m -->
The page is always right to the left hand side. It looks spot on on 800x600 resolution browser, but on bigger - it looks out of place I think.
I have created an alternative - re-direct to index2.htm and use a differnet style sheet - with thing bigger, so it fills the page more - and don't look small out of place, if you know what I mean.
I prefer the 800x600 one (the only one thats online at the moment). Would like it centred on screen though, so its in the middle on 1024 as well.try using %'s as opposed to exact values.Nope, that don't work, when you resize the browser, things slowly creep out of position.sitebody {
width:760px;
height: 550px;
background-color: #EEEEEE;
position: absolute;
left: 50%;
margin-left: -380px;
}Try this:
body {
text-align: center;
}
.sitebody {
width:760px;
margin-left: auto;
margin-right: auto;
background-color: #EEEEEE;
}I would also suggest a touch of "box model hacking" as it doesn't looks so smashing in anything but IE.Originally posted by cthulhu
Try this:
body {
align: center;
}
.sitebody {
width:760px;
margin-left: auto;
margin-right: auto;
background-color: #EEEEEE;
}
Property align doesn't exist : centerOriginally posted by Triumph
Property align doesn't exist : center Ehm.. text-align
Originally posted by Triumph I would also suggest a touch of "box model hacking" as it doesn't looks so smashing in anything but IE.
whats that?Originally posted by Triumph
.sitebody {
width:760px;
height: 550px;
background-color: #EEEEEE;
position: absolute;
left: 50%;
margin-left: -380px;
}
Cheers...That did it.
Thanks everyone
Use are all a great help. I'm learning stillOriginally posted by Triumph I would also suggest a touch of "box model hacking" as it doesn't looks so smashing in anything but IE.
LOL, thanks for the compliment...didn't think it was smashing myself...
whats box hacking?OK then, have both versions now - centred on both resolutions - and full page on both.
what one do you think is better
<!-- m --><a class="postlink" href="http://www.epvideo.co.uk/NewEPV/style1.htm">http://www.epvideo.co.uk/NewEPV/style1.htm</a><!-- m -->
or
<!-- m --><a class="postlink" href="http://www.epvideo.co.uk/NewEPV/style2.htm">http://www.epvideo.co.uk/NewEPV/style2.htm</a><!-- m -->
ta againOriginally posted by kevinmcqueen
whats box hacking? Something that prevents this:The more I look at it perhaps box model hack won't fix that...maybe the widths just aren't wide enough in parts. Hmmm.You can ry removing "width:760px;" from .middle and .bottom for starters.You don't need to absolutely position the main div:
.sitebody {
width:760px;
margin: 10px auto;
background-color: #EEEEEE;
}Just this will do the job
#container {
margin-left: auto;
margin-right: auto;
}
<body>
<div id="container">
everything in here
</div>
</body>sorry I left out the width
#container {
margin-left: auto;
margin-right: auto;
width:750px;
}
<body>
<div id="container">
everything in here
</div>
</body>Originally posted by NogDog
You don't need to absolutely position the main div:
.sitebody {
width:760px;
margin: 10px auto;
background-color: #EEEEEE;
}
I think you do with the negative margins thing. otherwise the left variable doesn't act properly.Originally posted by cthulhu
You can ry removing "width:760px;" from .middle and .bottom for starters. Yeah, that was it. I feel dumb.
sorted that...to take into account the 10px padding as wellThe code below is all you need to center a DIV layout, along with notes about any browser bugs you could run into.
<!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>
<title>Center whole layout</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css" media="screen">
<!--
/* text-align: center; will center the layout for IE5-Win and IE6-Win
running quirks mode (no DOCTYPE tag at beginning of document). */
body {
margin: 0;
padding: 0;
text-align: center;
}
/* The auto left and right margins center the layout in standards
browsers, IE6-Win (in standards mode) and IE5-Mac. */
#wrapper {
margin: 0 auto 0 auto;
text-align: left; /* Reset text alignment for Western languages. */
width: 770px;
}
/* Standards browsers will cut off portions of the left and right edges
of a layout if the browser viewport is too narrow, unless the
#wrapper <div> has a left and right border. Internet Explorer is not
affected by this, and the style rules are hidden. Setting the border
color to transparent initially returns a CSS syntax error at the W3C
CSS validator, so for the sake of validation, the border color is
set to transparent on a separate line. */
html>body #wrapper {
border: 1px solid #fff;
border-color: transparent;
border-top: 0;
border-bottom: 0;
}
-->
</style>
</head>
<body>
<div id="wrapper">
<!-- Place all HTML for the entire page here. -->
</div>
</body>
</html>