HTML Help

afx777 · Joined: 30 Jul 2009 Posts: 9

Hi, I'm struggling to work out how to centre this whole page with a fixed width of 900px, what I am doing wrong and what is the solution please? Thanks in advance.

Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title></title>

<style type="text/css">
/*begin of frames setting*/
html{
margin:0;
padding:0;
height:100%;
overflow:hidden;

_padding:102px 201px 1px 1px;
}

.frame{
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
overflow:hidden;
zoom:1;
_right:0;
_bottom:0;
_width:100%;
_height:100%;
_position:relative;

}

.frame-bd{
zoom:1;
}

#pri-main{
overflow: hidden;
position: absolute;
top: 61px;
left: 201px;
right: 1px;
bottom: 41px;
z-index: 2;
_top: 61px;
_bottom: auto;
_height: 100%;
background-color: #FFFFFF;
}

#pri-main .frame{
overflow:auto;
}

#pri-sub{
overflow:hidden;
position:absolute;
height:0px;
top:61px;
left:201px;
right:1px;
z-index:1;

_botom:0;
_width:100%;
}

#pri-sub .frame{
overflow:hidden;
}

#sec-main{

overflow:hidden;
position:absolute;
width:200px;

top:61px;
bottom:41px;
left:0;
z-index:4;

_height:100%;
_bottom:auto;
_padding:0 0 1px 0;
}

#sec-main .frame{

overflow:hidden;
_padding:0 0 1px 0;
}

#trd-main{

overflow:hidden;
position:absolute;
width:0px;

top:61px;
right:0;
bottom:41px;

z-index:4;

_height:100%;
_bottom:auto;
_padding:0 0 1px 0;
}

#trd-main .frame{
overflow:auto;
_padding:0 0 1px 0;
}

/*My Customized Theme*/

body {
/* Need to set body margin and padding to get consistency between browsers. */background-position: center;
background: buttonface url(metal-solid.gif);
margin: auto 0 0 0;
text-align: center;
max-width: 900px;
position: fixed;
width: 900px;
right: auto;
top: auto;
left: auto;
height: auto;
}

#Content {
width: 500px;
margin: 0px auto;
/* Right and left margin widths set to "auto" */ text-align: left; /* Counteract to IE5/Win Hack */;
padding: 15px;
border: 1px dashed #333;
background-color: #eee;
position: fixed;
}

.frame{
background:#fff url(frame-shadow.gif) 0 0 no-repeat;
_background-attachment:fixed;

}

/*Free HedgerWow Style*/

li{
_vertical-align:top;
}
.mod{

}

.mod .bd{
padding:12px;
}

a.valid{
font:0/0 Arial;
text-indent:-5000px;
display:block;
width:88px;
height:33px;
margin:4px 0;
background:#ccc url(http://www.w3.org/Icons/valid-xhtml10) no-repeat;
}

a.generate{
padding:12px;
display:-moz-inline-box;
display:inline-block;
color:#222;
background:buttonface;
border:solid 1px buttonshadow;
border-top-color:buttonhighlight;
border-left-color:buttonhighlight;
margin:4px 12px 4px 0;
vertical-align:top;
}

a.generate:hover{
border:solid 1px buttonshadow;
border-right-color:buttonhighlight;
border-bottom-color:buttonhighlight;
}

h1,h2,h3,h4{
margin:0;

color:#fff;
font-size:small;
padding:5px;
font-weight:bold;
letter-spacing:1px;
background:#444 url(metal-solid-dark.gif);
opacity:0.7;
zoom:1;
filter:alpha(opacity=70);
}
p{
margin:3px 0;
color:#666;
}

</style>

</head>
<body>
<div id="content">
<div id="doc">


<div id="pri">

<div id="pri-main">

<div class="frame">
<div class="frame-bd">

</div>

</div>
</div>

</div>


</div>



<div id="sec">


<div id="sec-main" style="left: 8; top: 61px; bottom: 41px">
<div class="frame">
<div class="frame-bd">
</div>

</div>

</div>


</div>
</div></div></body>
</html>

afx777 · Joined: 30 Jul 2009 Posts: 9

How would I add a "container" around the whole page/frames which may centre the website?

sticks464 · Joined: 31 Dec 2006 Posts: 2625

I'm not sure what your trying to accomplish with the frames. Frames work with a framset doctype but not with an xhtml doctype. If you are trying to achieve a two column layout it can be done with less markup and css using divs instead of frames. If for some reason if you need frames you should use iframes.

afx777 · Joined: 30 Jul 2009 Posts: 9

Hi, thanks for the reply, I just like a two column page to start off with, left side for the menu of course but all centered to around 900px width.

sticks464 · Joined: 31 Dec 2006 Posts: 2625

Something like this
Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Two Equal Columns ~ Fixed Width & Content first</title>

<style type="text/css">
/*===== Resets =====*/
body, address, blockquote, dl, ol, ul, li, form, fieldset, legend, h1, h2, h3, h4, h5, h6, p, pre {
margin:0;
padding:0;
}
body {
background: #BBB;
padding:20px 0;
}
html {overflow-y:scroll;} /*keep scrollbar present in FF*/

h1,h2,h3,h4,p {
margin:0;
padding: 10px 10px 0 10px;
}
#navbar h4, #footer h4 {padding:0}

/*==== Begin Layout Styles ====*/

#wrapper {
margin: 0 auto;
width: 900px;
background: #BCC5E1; /*sidebar color*/
border: 1px solid black;
overflow:hidden; /* float containment for modern browsers */
}
#header {
min-height:80px;
text-align:center;
border-bottom: 1px solid black;
}
* html #header {height:80px;} /*min height for IE6*/

#navbar {
height:1.65em;
line-height:1.65em;
background:#8293C3;
text-align:center;
border-bottom: 1px solid black;
}
#container {
margin-left: 175px;
border-left: 1px solid black;
background: #EEF; /*content color*/
min-height:600px; /*for demo only, remove if not needed*/
position:relative; /*IE6 needs this*/
}
* html #container {height:600px;} /*for demo only, remove if not needed*/
#content {
float:right;
width:724px;
background:#EEF; /*content color*/
padding-bottom:10px;
}
#left {
float:left;
width:175px;
margin-left:-176px;
display:inline;
padding-bottom:10px;
position:relative; /*IE6 needs this*/
background:#BCC5E1;
}
.clear {clear:both}
#footer {
clear:both;
height:1.65em;
line-height:1.65em;
background:#8293C3;
text-align:center;
border-top: 1px solid black;
}
#navbar h4, #footer h4 {padding:0}
</style></head><body>

<div id="wrapper">
<div id="header">
<h2>Two Equal Columns ~ Fixed Width</h2>
<h4>Content first in source</h4>

</div>
<div id="navbar">
<h4>Navigation</h4>
</div>
<div id="container">
<div id="content">
<h2>Main Content</h2>
<p>Lorem ipsum dolor sit amet consectetuer ut velit consequat consequat ut. Pede et Suspendisse
faucibus Suspendisse dis risus quis fermentum justo egestas. Fusce lacinia non orci Aenean auctor
eget interdum et Aenean nulla. Nulla Morbi id Curabitur quis et quis metus pellentesque euismod
congue. Congue Praesent consequat urna id Sed Curabitur libero ornare platea orci.</p>

<p>Lorem ipsum dolor sit amet consectetuer ut velit consequat consequat ut. Pede et Suspendisse
faucibus Suspendisse dis risus quis fermentum justo egestas. Fusce lacinia non orci Aenean auctor
eget interdum et Aenean nulla. Nulla Morbi id Curabitur quis et quis metus pellentesque euismod
congue. Congue Praesent consequat urna id Sed Curabitur libero ornare platea orci. Nulla Morbi
id Curabitur quis et quis metus pellentesque euismod congue.</p>
</div>
<div id="left">
<h3>Left Sidebar</h3>
<p>Lorem ipsum dolor sit amet consectetuer ut velit consequat consequat ut. Pede et Suspendisse
faucibus Suspendisse dis risus quis fermentum justo egestas. Fusce lacinia non orci Aenean auctor
eget interdum et Aenean nulla.</p>
</div>
<div class="clear"></div>
</div>
<div id="footer">
<h4>footer stuff</h4>
</div>
</div>

</body></html>

afx777 · Joined: 30 Jul 2009 Posts: 9

Looks good thanks! :) I'm a total CSS novice to be honest.

I've always used html frames in the past. How would I show a page from the left menu in the main content? Is it similar to Code: <a href=page2.html target="main">page2</a> for example?

sticks464 · Joined: 31 Dec 2006 Posts: 2625

Your menu would go in the left div and the content from page2.html would go in the content div. Instead of creating a new page to open in a frame, you create a new page with the menu in the left div and new content in the content frame.

You can delete the div navbar and the css for it since your menu will be in the left div.

Delete
Code: <div id="navbar">
<h4>Navigation</h4>
</div>
and
#navbar {
height:1.65em;
line-height:1.65em;
background:#8293C3;
text-align:center;
border-bottom: 1px solid black;
}