ok, you can view my current content box here:
<!-- m --><a class="postlink" href="http://www.sureo.com/">http://www.sureo.com/</a><!-- m -->
as you can see, i use a nested table within the main page layout
the content box is a table with 3 rows. 5 cells on first row, 1 cell on 2nd row, and 1 cell on the 3rd row...now, keep in mind that right now the center of the content box is fluid. (where it says "News"). Now, preferbably having a fluid content box header center (doesnt HAVE to be if it makes things much more complicated), how can i do this using css...
check below for the new page im trying to do in all css
here is my new css layed out page:
<!-- m --><a class="postlink" href="http://www.sureo.com/tcg/template.php">http://www.sureo.com/tcg/template.php</a><!-- m -->
(dont comment on fotter
)You're going to have to get your HTML right to succeed with a css design. E.g. the left nav list items have no container and there are actually two lists there.wait, are you talking about my css or html version of the site...
the html version of the site was done using very unstandard ALL table designs and layouts...
im not sure what you meant there... in my css design, what do u mean i have 2 lists...what exactly am i making a mistake in?also, if i want to add a rollover effect using css and want to change the hover background color, how do i make it so the whole box changes and not just the color behind the area the text itself covers?
is it using something like display:block; ...i just recall seeing that in other sites...New HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>The Clans Guild</title>
<link rel="StyleSheet" href=http://www.webdeveloper.com/forum/archive/index.php/"template.css" type="text/css" />
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<meta name="keywords" content="Sureo, Sureo.com, Noda, Abe" />
</head>
<body>
<div id="container">
<div id="header"></div>
<div id="menu_l">
<h1>Menu</h1>
<ul>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"./index.php">Home Page</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"./index.php">TcG- Clans</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"./index.php">Enlist'n CG</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"./index.php">TcG Forum</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"./index.php">Chat-room</a></li>
</ul>
<h1>Clans</h1>
<ul>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"http://dome.sureo.com">Clan DoMe</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"http://omk.sureo.com">Clan OmK</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"./index.php">*Opening~</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"./index.php">*Opening~</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"./index.php">*Opening~</a></li>
</ul>
</div><!--End menu_1-->
<div id="middle"></div><!--End middle-->
<div id="menu_r">hi</div><!--End menu_r-->
<div id="footer">Copyright ?2005 Sureo Network, All Rights Reserved ?<a href=http://www.webdeveloper.com/forum/archive/index.php/"sitehq.php">Legal Info</a> ?<a href="sitehq.php">Affiliates</a> ?<a href="sitehq.php">Contact Me</a> ?<a href="sitehq.php">About Me</a> ?<a href="sitehq.php">Our Staff</a></div><!--End footer-->
</div><!--End container-->
</body>
</html>New CSS:
/* WEBSITE W3C CSS LAYOUT */
body {
background:#e5e5e5 url(./images/bgmain.png);
text-align:center;
font-family:Verdana, Arial, Helvetica, sans-serif;
}
li, ul {
list-style-type:none;
margin: 0;
padding: 0;
}
#container {
border:1px solid #98AAB1;
margin:0px auto;
width:780px;
text-align:left;
background: #efefef url(./images/bgbordr.png);
}
#header {
background-color:transparent;
height:105px;
border-bottom:1px solid #98aab1;
background-image:url(./images/hdmain.png)
}
#menu_l {
padding-top:1px;
width:129px;
float:left;
height:100%;
}
#menu_l h1 {
text-align:center;
font-size:9pt;
font-weight: normal;
height:17px;
border:1px solid #dee3e7;
background-image:url(./images/hdmenu.png);
margin: 0;
}
#menu_l ul {
margin: 0 0 20px 0;
}
#menu_l ul li {
height:17px;
border:1px solid #dee3e7;
background-color:#f0f0f0;
display: block;
}
#menu_l ul li a {
font-size:8pt;
color:#006699;
padding:3px 0 3px 7px;
text-decoration:none;
background-color: red; /*replace with desired colour*/
display: block;
}
#menu_l ul li a:hover {
font-size:8pt;
color:#dd6900;
text-decoration:none;
background-color: blue; /*replace with desired colour*/
display: block;
}
#middle {
padding-top:1px;
height:375px;
float:left;
width:520px;
border-right:1px solid #98aab1;
border-left:1px solid #98aab1;
}
#menu_r {
padding-top:1px;
width:129px;
float:left;
}
#footer {
text-align:center;
height:45px;
clear:both;
width:780px;
background-image:url(./images/bgfootr.png);
font: 8pt Verdana, Arial, Helvetica, sans-serif;
color:#006699;
padding-top: 30px;
margin:0;
}
#footer a {
text-decoration:none;
color:#006699;
}
#footer a:hover {
color:#dd6900;
text-decoration:none;
}wait, are you talking about my css or html version of the site...css
in my css design, what do u mean i have 2 lists...what exactly am i making a mistake in?A list item (<li>) is not a stand alone tag. It is part of a list (<ul>, <ol>).
how do i make it so the whole box changesTypically you style the anchor display:block so it can fill its container.ok
<!-- m --><a class="postlink" href="http://tcg.sureo.com/template.php">http://tcg.sureo.com/template.php</a><!-- m -->
still, the header logo is loading last and later for me on the initial load
...
also, now i have the rollovers for the lft menu working almost perfectly (under the class menu_t a and a:hover) EXCEPT for the fact that the display:block has moved the text so its not really in the middle of each box in the menu...understand what i mean? its on vertically-centered in each box. (closer to the top than bottom border). need help fixing this!
thanks for the help so far!it will take longer, its an image.
Your current page is still quite wrong. <lu></lu> ?
I fixed the issues with the hovers in the stylesheet that I provided for you.
I finished your footer,
And I fixed your menus.
You should be able to copy and paste the stylesheet and the html, and add any addition php that you may want/require.
I wonder if you even looked at my posts?ok im really sorry, didnt really notice that you were editing that code!
ok, got most everything fixed now im using ur method for getting the ul's right.
but your way there still was too much space between the text and the top and bottom padding of each box. u had it balacned out by specifying 3px 3px.
its like the display:block automatically set a bottom-padding...
o and im not using ur thing for the footer bc i had an all image idea for the footer, but thanks now i know how to do it!
<!-- m --><a class="postlink" href="http://www.sureo.com/">http://www.sureo.com/</a><!-- m -->
as you can see, i use a nested table within the main page layout
the content box is a table with 3 rows. 5 cells on first row, 1 cell on 2nd row, and 1 cell on the 3rd row...now, keep in mind that right now the center of the content box is fluid. (where it says "News"). Now, preferbably having a fluid content box header center (doesnt HAVE to be if it makes things much more complicated), how can i do this using css...
check below for the new page im trying to do in all css
here is my new css layed out page:
<!-- m --><a class="postlink" href="http://www.sureo.com/tcg/template.php">http://www.sureo.com/tcg/template.php</a><!-- m -->
(dont comment on fotter
)You're going to have to get your HTML right to succeed with a css design. E.g. the left nav list items have no container and there are actually two lists there.wait, are you talking about my css or html version of the site...the html version of the site was done using very unstandard ALL table designs and layouts...
im not sure what you meant there... in my css design, what do u mean i have 2 lists...what exactly am i making a mistake in?also, if i want to add a rollover effect using css and want to change the hover background color, how do i make it so the whole box changes and not just the color behind the area the text itself covers?
is it using something like display:block; ...i just recall seeing that in other sites...New HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>The Clans Guild</title>
<link rel="StyleSheet" href=http://www.webdeveloper.com/forum/archive/index.php/"template.css" type="text/css" />
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<meta name="keywords" content="Sureo, Sureo.com, Noda, Abe" />
</head>
<body>
<div id="container">
<div id="header"></div>
<div id="menu_l">
<h1>Menu</h1>
<ul>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"./index.php">Home Page</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"./index.php">TcG- Clans</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"./index.php">Enlist'n CG</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"./index.php">TcG Forum</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"./index.php">Chat-room</a></li>
</ul>
<h1>Clans</h1>
<ul>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"http://dome.sureo.com">Clan DoMe</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"http://omk.sureo.com">Clan OmK</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"./index.php">*Opening~</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"./index.php">*Opening~</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"./index.php">*Opening~</a></li>
</ul>
</div><!--End menu_1-->
<div id="middle"></div><!--End middle-->
<div id="menu_r">hi</div><!--End menu_r-->
<div id="footer">Copyright ?2005 Sureo Network, All Rights Reserved ?<a href=http://www.webdeveloper.com/forum/archive/index.php/"sitehq.php">Legal Info</a> ?<a href="sitehq.php">Affiliates</a> ?<a href="sitehq.php">Contact Me</a> ?<a href="sitehq.php">About Me</a> ?<a href="sitehq.php">Our Staff</a></div><!--End footer-->
</div><!--End container-->
</body>
</html>New CSS:
/* WEBSITE W3C CSS LAYOUT */
body {
background:#e5e5e5 url(./images/bgmain.png);
text-align:center;
font-family:Verdana, Arial, Helvetica, sans-serif;
}
li, ul {
list-style-type:none;
margin: 0;
padding: 0;
}
#container {
border:1px solid #98AAB1;
margin:0px auto;
width:780px;
text-align:left;
background: #efefef url(./images/bgbordr.png);
}
#header {
background-color:transparent;
height:105px;
border-bottom:1px solid #98aab1;
background-image:url(./images/hdmain.png)
}
#menu_l {
padding-top:1px;
width:129px;
float:left;
height:100%;
}
#menu_l h1 {
text-align:center;
font-size:9pt;
font-weight: normal;
height:17px;
border:1px solid #dee3e7;
background-image:url(./images/hdmenu.png);
margin: 0;
}
#menu_l ul {
margin: 0 0 20px 0;
}
#menu_l ul li {
height:17px;
border:1px solid #dee3e7;
background-color:#f0f0f0;
display: block;
}
#menu_l ul li a {
font-size:8pt;
color:#006699;
padding:3px 0 3px 7px;
text-decoration:none;
background-color: red; /*replace with desired colour*/
display: block;
}
#menu_l ul li a:hover {
font-size:8pt;
color:#dd6900;
text-decoration:none;
background-color: blue; /*replace with desired colour*/
display: block;
}
#middle {
padding-top:1px;
height:375px;
float:left;
width:520px;
border-right:1px solid #98aab1;
border-left:1px solid #98aab1;
}
#menu_r {
padding-top:1px;
width:129px;
float:left;
}
#footer {
text-align:center;
height:45px;
clear:both;
width:780px;
background-image:url(./images/bgfootr.png);
font: 8pt Verdana, Arial, Helvetica, sans-serif;
color:#006699;
padding-top: 30px;
margin:0;
}
#footer a {
text-decoration:none;
color:#006699;
}
#footer a:hover {
color:#dd6900;
text-decoration:none;
}wait, are you talking about my css or html version of the site...css
in my css design, what do u mean i have 2 lists...what exactly am i making a mistake in?A list item (<li>) is not a stand alone tag. It is part of a list (<ul>, <ol>).
how do i make it so the whole box changesTypically you style the anchor display:block so it can fill its container.ok
<!-- m --><a class="postlink" href="http://tcg.sureo.com/template.php">http://tcg.sureo.com/template.php</a><!-- m -->
still, the header logo is loading last and later for me on the initial load
...also, now i have the rollovers for the lft menu working almost perfectly (under the class menu_t a and a:hover) EXCEPT for the fact that the display:block has moved the text so its not really in the middle of each box in the menu...understand what i mean? its on vertically-centered in each box. (closer to the top than bottom border). need help fixing this!
thanks for the help so far!it will take longer, its an image.
Your current page is still quite wrong. <lu></lu> ?
I fixed the issues with the hovers in the stylesheet that I provided for you.
I finished your footer,
And I fixed your menus.
You should be able to copy and paste the stylesheet and the html, and add any addition php that you may want/require.
I wonder if you even looked at my posts?ok im really sorry, didnt really notice that you were editing that code!
ok, got most everything fixed now im using ur method for getting the ul's right.
but your way there still was too much space between the text and the top and bottom padding of each box. u had it balacned out by specifying 3px 3px.
its like the display:block automatically set a bottom-padding...
o and im not using ur thing for the footer bc i had an all image idea for the footer, but thanks now i know how to do it!