Jab
07-22-2005, 02:28 AM
Okay, I'm making my site out of DIV's which you don't really explain on your site and I'm having some trouble. I just started this sucker and I'm still new to HTML cause I only do it off and on. What I'm having trouble with is I'm trying to make the middle row (http://shizamclan.8m.com/new/swill2.html) be like the other two rows on the side but wider and be the same length as both of the ones on the side. I still have a ton of work to do, it doesn't look good at all now and I still need to organize my CSS and all that. This is my source for the home page: <html>
<head>
<title>Swill - Home</title>
<link rel="stylesheet" type="text/css" href="/new/css_layout_2.css">
</head>
<!--Begin-->
<body id="home"><div align="center">
<div id="container_1" align="center">
<div id="header">
<ul><h1>SWILL</h1></ul>
<ul><div id="menu_main"><a href="/index.html">Home</a> | <a href="/index.html">Roster</a> | <a href="/index.html">About</a> | <a href="/index.html">Join</a> | <a href="/index.html">Forum</a> | <a href="/index.html">Leagues</a> | <a href="/index.html">Contact</a></div></ul>
<ul></ul>
</div>
<div id="column_1">
<dl>
<dt>Test</dt>
<dd>Test Test</dd>
</dl>
<dl>
<dt>Test</dt>
<dd>Test Test</dd>
</dl>
</div>
<div id="column_2">
<da>
<dt>NEWS</dt>
<db>Test Test Test</db>
<div class="divider"></div>
<db>testtest</db>
</da>
</div>
<div id="column_3">
<dl>
<dt>Test</dt>
<dd>Test asdfTest</dd>
</dl>
<dl>
<dt>Test</dt>
<dd>Test Test</dd>
</dl>
</div>
<!--End-->
</div>
</body>
</html>And it comes out to look like this (http://shizamclan.8m.com/new/swill2.html). As you can see my problem is that the middle row stays in the blue part and doesn't go into the grey part like the others do. I think the problem is in this part of the CSS:dl {
border: 1px solid white;
border-top: none;
background: #272A2F;
font-family: verdana;
font-size: 13px;
height: 100px;
margin: 0;
display: block;
}
da {
border-bottom: 1px solid white;
background: #272A2F;
font-family: verdana;
font-size: 13px;
height: 100px;
margin: 0;
display: block;
}
dt {
border-bottom: 1px solid white;
background-color: #003366;
font-family: verdana;
font-size: 20px;
letter-spacing: 5px;
text-align: center;
font-weight: bold;
display: block;
}
dd {
color: FFFFFF;
font-family: verdana;
font-size: 13px;
padding: 0;
margin: 0;
margin-left: 0px;
display: block;
}
db {
color: FFFFFF;
font-family: verdana;
font-size: 13px;
padding: 0;
margin: 0;
margin-left: 0px;
display: block;
}Like I said I'm a little new to this and on the sources of the websites that I looked at to learn DIV's they all used stuff like dl, dd, dt and I don't know if you have to use those are not but I added my own in (da & db) and seemed to be working. If you need more of my CSS or somthing else tell me to send you a PM of it.
-Jab
<head>
<title>Swill - Home</title>
<link rel="stylesheet" type="text/css" href="/new/css_layout_2.css">
</head>
<!--Begin-->
<body id="home"><div align="center">
<div id="container_1" align="center">
<div id="header">
<ul><h1>SWILL</h1></ul>
<ul><div id="menu_main"><a href="/index.html">Home</a> | <a href="/index.html">Roster</a> | <a href="/index.html">About</a> | <a href="/index.html">Join</a> | <a href="/index.html">Forum</a> | <a href="/index.html">Leagues</a> | <a href="/index.html">Contact</a></div></ul>
<ul></ul>
</div>
<div id="column_1">
<dl>
<dt>Test</dt>
<dd>Test Test</dd>
</dl>
<dl>
<dt>Test</dt>
<dd>Test Test</dd>
</dl>
</div>
<div id="column_2">
<da>
<dt>NEWS</dt>
<db>Test Test Test</db>
<div class="divider"></div>
<db>testtest</db>
</da>
</div>
<div id="column_3">
<dl>
<dt>Test</dt>
<dd>Test asdfTest</dd>
</dl>
<dl>
<dt>Test</dt>
<dd>Test Test</dd>
</dl>
</div>
<!--End-->
</div>
</body>
</html>And it comes out to look like this (http://shizamclan.8m.com/new/swill2.html). As you can see my problem is that the middle row stays in the blue part and doesn't go into the grey part like the others do. I think the problem is in this part of the CSS:dl {
border: 1px solid white;
border-top: none;
background: #272A2F;
font-family: verdana;
font-size: 13px;
height: 100px;
margin: 0;
display: block;
}
da {
border-bottom: 1px solid white;
background: #272A2F;
font-family: verdana;
font-size: 13px;
height: 100px;
margin: 0;
display: block;
}
dt {
border-bottom: 1px solid white;
background-color: #003366;
font-family: verdana;
font-size: 20px;
letter-spacing: 5px;
text-align: center;
font-weight: bold;
display: block;
}
dd {
color: FFFFFF;
font-family: verdana;
font-size: 13px;
padding: 0;
margin: 0;
margin-left: 0px;
display: block;
}
db {
color: FFFFFF;
font-family: verdana;
font-size: 13px;
padding: 0;
margin: 0;
margin-left: 0px;
display: block;
}Like I said I'm a little new to this and on the sources of the websites that I looked at to learn DIV's they all used stuff like dl, dd, dt and I don't know if you have to use those are not but I added my own in (da & db) and seemed to be working. If you need more of my CSS or somthing else tell me to send you a PM of it.
-Jab