|
|
Post by Ellethwen on Jun 9, 2007 19:59:58 GMT -5
I'm trying to build a site about PGSM costumes, but I'm having trouble with the layout. I thought I knew everything about coding with HTML after almost 3 years, but I guess I was wrong. I'm bad with tables. Anyways, what I want is to have a banner that streches across two columns-one for the sidebar, and one for the conent. I want to have both colomns stretch down to match the other so that the borders match up. Then at the bottom I want to have my disclaimer stretch across both colomns. That's probably confusing, so here's some screenshots: What I have (Wrong)See how the content colomn continues on, but the sidebar doesn't? I don't want that. I won't even discuss the disclaimer image. And, thanks to the editing magic of Photoshop... What I wantThat's what I want. But I don't know how to get it. Here's my codes for the tables right now. There's two because I can't seem to fit the header in the same table as the other stuff. I tried it with a different file but it makes the stuff all...weird. Header/nav code: Code for the content: Stylsheet stuff: Anyone know how to get what I want? |
|
Larry Laffer
Dream Mirror
l33t Smartass
I shall not BOW! EVER!
Posts: 6,625
|
Post by Larry Laffer on Jun 10, 2007 0:18:48 GMT -5
You forgot to mention the sidebar table! Without which(or without a direct link) I for one can't figure out exactly what you did wrong  But until hen, you switched the closing tags on the row and detail on the content table: you closed them with </tr> and </td> and, obviously it's the other way around |
|
Amy-Chan
Dream Mirror
Water is a thing that flows!
????#??? ??????????? ?
Posts: 6,182
|
Post by Amy-Chan on Jun 10, 2007 11:12:57 GMT -5
i believe you'll need it all in one table for it to work if i understand you right
something like this right?
<html>
<body>
<table width="100%" border="1">
<tr>
<td colspan="2">banner</td>
</tr>
<tr>
<td width="19%"><img src="header01.jpg" border="0"></img src><br>
<img src="nav01.jpg" border="0"></img src></td>
<td width="81%">Right colomn content (main stuff)</td>
</tr>
<tr>
<td colspan="2">disclaimer </td>
</tr>
</table>
</body>
</html>
|
|
Larry Laffer
Dream Mirror
l33t Smartass
I shall not BOW! EVER!
Posts: 6,625
|
Post by Larry Laffer on Jun 10, 2007 11:21:22 GMT -5
*me lolz*
umm, right, don't mind me, I was just laughing of myself, carry on! ;D
|
|
|
|
Post by Betty Ann on Jun 22, 2007 0:07:15 GMT -5
sorry it took me a while to get around to this topic... let me see if I understand you correctly: you want the bottom area to stretch across both columns? The first thing I suggest is to get away from tables!! They are not made for design, just for content. You are on the right track, really; just make a few changes to make them div layers instead of tables. After you do that, it should be really easy to get everything in line. When you do that, make a "container" div layer and put all the other layers inside that. The one that stretches across the bottom will be like a footer layer, and will show up inside that. This website that I designed is somewhat similar to what you're trying to do... feel free to check out the code and see if that helps: www.alphadeltasigma.org/more.php |
|
|
|
Post by Ellethwen on Jun 26, 2007 10:48:13 GMT -5
Thanks for your help everyone! I figured it out, thanks to www.pmob.co.uk, but now I'm just running into ANOTHER problem concerning footers, this time for the new layout at TLotE. I've got my footer and everything, but I can't position my navigation in the right spot, and my content shows up under the footer and everything, although I'm sure the div is in the right spot. Also, I can't figure out how to get my background image for the content to not extend past the footer. img514.imageshack.us/img514/7623/cap3as0.jpg-screencap of what I'm getting. Here's my HTML & stylesheet (please excuse the messiness): <HTML>
<HEAD>
<title>* The Light of the Evenstar * V. 4.7-Tossed Upon the Clouds * Celebrating 2
years online! *</title>
<link rel=stylesheet href="style.css" type="text/css">
<meta name="Title" content="The Light of the Evenstar">
<meta name="Author" content="Megan Schmidt">
<meta name="Subject" content="The Lord of the Rings fansite">
<meta name="Description" content="A Lord of the Rings fansite with a small gallery,
friendly forum, media, and more.">
<meta name="Keywords" content="The Lord of the Rings, Ellethwen, Fantasy, Media,
Forum, Gallery, Avatars, Wallpaper, Icons, Peter Jackson, Liv Tyler, Elijah Wood,
Viggo Mortensen, Miranda Otto, Sean Astin">
<meta name="Generator" content="Notepad">
<meta name="Language" content="English">
<meta name="Expires" content="January 1, 2010">
<meta name="Copyright" content="© Copyright 2005-2006 Megan Schmidt">
<meta name="Designer" content="Megan Schmidt">
<meta name="Publisher" content="Megan Schmidt">
<meta name="Distribution" content="Global">
</HEAD>
<BODY>
<div id="container">
<div id="mainheader">
<div class="blank2"></div>
<!-- for decoration only -->
</div>
<div id="header">
<img src="header03.png" border="0"></img src>
</div>
<div id="sidebar">
<p>Sidebar content goes here : Sidebar content goes here : Sidebar content
goes here : Sidebar content goes here : Sidebar content goes here : Sidebar
content goes here : Sidebar content goes here : Sidebar content goes here
: Sidebar content goes here : Sidebar content goes here : Sidebar content
goes here : Sidebar content goes here : </p>
</div>
<div id="content">
<p>Footer stays at the bottom of the window unless the content is longer then
it stays at the bottom of the document.</p>
<p>Footer stays at the bottom of the window unless the content is longer then
it stays at the bottom of the document.</p>
</div>
<div id="clearfooter"></div>
<!-- to clear footer -->
<div id="footer">
<div class="divider1"></div>
<div class="blank"></div>
<!-- for decoration only -->
<p><img src="footer01.png" border="0"></img src></p>
</div>
</div>
</BODY>
</HTML><!--body {
color:#0D5099;
font-size:10pt;
font-family:Verdana;
background-color: #E3DCCA;
background-image: url(back03.png);
background-attachment: none;
}-->
<!--BODY{
scrollbar-face-color: #81805F;
scrollbar-highlight-color: #81805F;
scrollbar-3dlight-color: #81805F;
scrollbar-darkshadow-color: #81805F;
scrollbar-shadow-color: #81805F;
scrollbar-arrow-color: #E3DCCA;
scrollbar-track-color: #E3DCCA;
}
A:link{color:#093869; text-decoration: none; font-weight: bold; font-size:9pt;}
A:visited{color:#093869; text-decoration: none; font-weight: bold; font-size:9pt;}
A:active{color:#093869; text-decoration: none; font-weight: bold; font-size:9pt;}
A:hover{color:#396DA6; text-decoration: underline; font-weight: bold;
font-size:9pt;}
U {font-family: Verdana; color: #396DA6; letter-spacing: 0pt; font-size:10pt;}
B, STRONG {font-family:Verdana; font-weight: bold; color: #396DA6;
letter-spacing:none;font-size: 11px;}
i, EM {font-family:Verdana; color: #396DA6; letter-spacing:none;}
input {
color: #0D5099;
background: 0;
font-size: 12px;
font-weight: normal;
text-decoration: none;
font-family: Verdana;
text-align: left;
border-width: 1px;
border-style: solid;
border-color:#396DA6;
}
.head
{font-weight:bold; letter-spacing:0px;
border: solid #396DA6;
border-width: 0px 1px 1px 0px;
color:#396DA6;padding-left:2px;
font-size: 12px; font-family: Verdana;
text-align:right;text-transform:uppercase;}
/* commented backslash hack v2 \*/
html, body{height:100%;}
/* end hack */
html,body {
margin: 0;
padding: 0;
}
body {
font: x-small arial, hevetica, sans-serif;
text-align: center;
color: #505367;
}
#container {
margin-left:auto;
margin-right:auto;
width: 650px;
min-height:100%;
text-align: left;
position:relative;
background-image: url(contback01.png);
}
/* commented backslash hack v2 \*/
* html #container {height:100%;}
* html #container {width:650px;width:650px;}
* html body{font-size:xx-small;font-size:x-small}
/* end hack */
#mainheader {
position:absolute;
left:0;top:0;
width:100%;
z-index:1;
}
#header {
width:100%;
height:450px;
margin: 0px 0px 5px 0px;
position:relative;
z-index:2;
overflow:hidden;
}
* html #mainheader {height:161px;height:160px}
#sidebar {
float: right;
width: 185px;
padding:6px;
}
#content {
width: 553px;
padding:5px 0 ;
}
#content p, #sidebar p, #header p,#footer p {margin:0 5px 5px 5px}
#footer {
position:absolute;
bottom:0;
width:100%;
height: 24px;
}
#footer p {margin:0;padding:0}
.divider1 {
width:100%;
height:5px;
overflow:hidden;
position:relative;
}
#clearfooter {height:27px;width:100%;clear:both}
.blank , .blank2 {
position:absolute;
left:547px;
width:7px;
height:0px;
overflow:hidden;
}
.blank {top:-1px;}I seem to get a lot of problems with webdesign, but I suppose that if you've been doing virtually the same layout style for two years, you get a little stuck. |
|
|
|
Post by Betty Ann on Jun 26, 2007 11:04:07 GMT -5
I'm not able to see your screencap for some reason... can you show me the page itself? Have you tried using absolute positioning for the navigation layer, or whichever one is giving you problems? Also, make sure you get your CSS validated: jigsaw.w3.org/css-validator/ |
|
Larry Laffer
Dream Mirror
l33t Smartass
I shall not BOW! EVER!
Posts: 6,625
|
Post by Larry Laffer on Jun 26, 2007 11:05:15 GMT -5
|
|
|
|
Post by Ellethwen on Jun 26, 2007 11:12:25 GMT -5
|
|
|
|
Post by Betty Ann on Jun 26, 2007 11:15:49 GMT -5
hm, I think I still need to see the actual page. Why do you have so many layers? You have a LOT of layers crammed in here; I think getting rid of some of those/combining them would help you immensely, even if just for organization.
Since I haven't seen the actual page, I still don't know exactly what the problem is, but I suspect it has something to do with the width of your layers and maybe the sheer number of them... it kind of looks like they are pushing each other out of place.
|
|
|
|
Post by Ellethwen on Jun 26, 2007 11:16:46 GMT -5
It was a pmob template. I have no idea why there's so many layers.
|
|
|
|
Post by Betty Ann on Jun 26, 2007 12:20:13 GMT -5
ok, I looked over the CSS VERY thoroughly. It just looks like bad coding to me... there were too many div layers (you didn't even need some of them), and information is getting mixed up. For example, there were two "body" sections that said conflicting things!! The biggest problem I've seen is that the widths are not correct. For example, the width of the sidebar area was 185px, but the green part where you want to contain it is only 155px. So of course it's going to go beyond the green part.
I did some editing, and here's what I came up with, which I tested and should work:
body {
background-color: #E3DCCA;
background-image: url(back03.png);
background-attachment: none;
scrollbar-face-color: #81805F;
scrollbar-highlight-color: #81805F;
scrollbar-3dlight-color: #81805F;
scrollbar-darkshadow-color: #81805F;
scrollbar-shadow-color: #81805F;
scrollbar-arrow-color: #E3DCCA;
scrollbar-track-color: #E3DCCA;
font: x-small arial, hevetica, sans-serif;
color: #505367;
text-align: center;
}
html, body {
height: 100%;
margin: 0;
padding: 0;
}
A:link{color:#093869; text-decoration: none; font-weight: bold; font-size:9pt;}
A:visited{color:#093869; text-decoration: none; font-weight: bold; font-size:9pt;}
A:active{color:#093869; text-decoration: none; font-weight: bold; font-size:9pt;}
A:hover{color:#396DA6; text-decoration: underline; font-weight: bold; font-size:9pt;}
U {font-family: Verdana; color: #396DA6; letter-spacing: 0pt; font-size:10pt;}
B, STRONG {font-family:Verdana; font-weight: bold; color: #396DA6; letter-spacing:none;font-size: 11px;}
i, EM {font-family:Verdana; color: #396DA6; letter-spacing:none;}
input {
color: #0D5099;
background: 0;
font-size: 12px;
font-weight: normal;
text-decoration: none;
font-family: Verdana;
text-align: left;
border-width: 1px;
border-style: solid;
border-color:#396DA6;
}
.head {
font-weight:bold; letter-spacing:0px;
border: solid #396DA6;
border-width: 0px 1px 1px 0px;
color:#396DA6;padding-left:2px;
font-size: 12px; font-family: Verdana;
text-align:right;text-transform:uppercase;
}
#container {
position:relative;
margin-left:auto;
margin-right:auto;
width: 650px;
min-height:100%;
text-align: left;
background-image: url(contback01.png);
}
#header {
width:100%;
height:450px;
margin: 0px 0px 5px 0px;
position:relative;
z-index:2;
overflow:hidden;
}
#sidebar {
float: right;
position:relative;
right: 20px;
width: 155px;
padding: 5px;
font: x-small arial, hevetica, sans-serif;
color: #505367;
margin-bottom: 10em;
}
#content {
position:relative;
width: 455px;
padding: 15px;
font: x-small arial, hevetica, sans-serif;
color: #505367;
}
#footer {
position:absolute;
bottom:0;
width:100%;
height: 24px;
}
#footer p {margin:0;padding:0}
.divider1 {
width:100%;
height:5px;
overflow:hidden;
position:relative;
}
#clearfooter {height:27px;width:100%;clear:both}
.blank , .blank2 {
position:absolute;
left:547px;
width:7px;
height:0px;
overflow:hidden;
}
.blank {top:-1px;}
<HTML>
<HEAD>
<title>* The Light of the Evenstar * V. 4.7-Tossed Upon the Clouds * Celebrating 2 years online! *</title>
<link rel=stylesheet href="style.css" type="text/css">
<meta name="Title" content="The Light of the Evenstar">
<meta name="Author" content="Megan Schmidt">
<meta name="Subject" content="The Lord of the Rings fansite">
<meta name="Description" content="A Lord of the Rings fansite with a small gallery, friendly forum, media, and more.">
<meta name="Keywords" content="The Lord of the Rings, Ellethwen, Fantasy, Media, Forum, Gallery, Avatars, Wallpaper, Icons, Peter Jackson, Liv Tyler, Elijah Wood, Viggo Mortensen, Miranda Otto, Sean Astin">
<meta name="Generator" content="Notepad">
<meta name="Language" content="English">
<meta name="Expires" content="January 1, 2010">
<meta name="Copyright" content="© Copyright 2005-2007 Megan Schmidt">
<meta name="Designer" content="Megan Schmidt">
<meta name="Publisher" content="Megan Schmidt">
<meta name="Distribution" content="Global">
</HEAD>
<BODY>
<div id="container">
<div id="header">
<img src="header03.png" border="0"></img src>
</div>
<div id="sidebar">
<p>Sidebar content goes here : Sidebar content goes here : Sidebar content
goes here : Sidebar content goes here : Sidebar content goes here : Sidebar
content goes here : Sidebar content goes here : Sidebar content goes here
: Sidebar content goes here : Sidebar content goes here : Sidebar content
goes here : Sidebar content goes here : </p>
</div>
<div id="content">
<p>Footer stays at the bottom of the window unless the content is longer then
it stays at the bottom of the document.</p>
<p>Footer stays at the bottom of the window unless the content is longer then
it stays at the bottom of the document.</p>
</div>
<div id="clearfooter"></div>
<!-- to clear footer -->
<div id="footer">
<div class="divider1"></div>
<div class="blank"></div>
<!-- for decoration only -->
<p><img src="footer01.png" border="0"></img src></p>
</div>
</div>
</BODY>
</HTML>
|
|
|
|
Post by Ellethwen on Jun 26, 2007 12:46:36 GMT -5
Okay, I'll try that out in a sec. I had changed the width because I originally had a different background image for the sidebar, which was the larger width, then forgot to change it. Thanks! EDIT: Yay! Now I just need to figure out how to keep the background from going on. Is that even possible? Betty Ann, you are getting much  and credit when I finish with this. ;D |
|
Amy-Chan
Dream Mirror
Water is a thing that flows!
????#??? ??????????? ?
Posts: 6,182
|
Post by Amy-Chan on Jun 26, 2007 13:28:52 GMT -5
do you mean for the background to stay fixed in one spot? or for it to be not repeated? both are possible
|
|
|
|
Post by Ellethwen on Jun 26, 2007 13:41:00 GMT -5
Well, the thing is, the background for the content continues on past the footer, and it looks...weird. I'm just curious if there is a way to get the content background to not do that.
|
|
