Amy-Chan
Dream Mirror
Water is a thing that flows!
????#??? ??????????? ?
Posts: 6,182
|
Post by Amy-Chan on Jun 26, 2007 13:52:34 GMT -5
if its the one betty posted the background is global set in body, if you moved the background (the 3 lines) to 'content' it should work that only the content area has the background image
|
|
|
Post by Ellethwen on Jun 26, 2007 13:56:31 GMT -5
The problem with that is is that there was one image for the whole nav/back thing, and if I put it in just content, nav looses the background and it gets all disjointed. It probably depends on when the container div ends.
|
|
Amy-Chan
Dream Mirror
Water is a thing that flows!
????#??? ??????????? ?
Posts: 6,182
|
Post by Amy-Chan on Jun 26, 2007 14:00:56 GMT -5
one massive pic? seperate it out into smaller pics and attach the background pics to the needed div parts - then background can have a background, content a background, nav a background, and these can be stretched automatically by the web page downwards and not ruin the look of your page
|
|
|
Post by Ellethwen on Jun 26, 2007 20:50:07 GMT -5
I decided to just edit the footer and let the background continue on. It looks good that way, actually, now that the drop shadow is gone. I just have one more problem. Then I'll go. I swear. Now that everything is set up, I'm ready to start adding content with this layout, except... The sidebar gets pushed...down... evenstar.crowned-meadow.net/4.8/Stylesheet: 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-family: Georgia; color: #CFC6B3; text-align:center; }
html, body { height: 100%; margin: 0; padding: 0; }
A:link{color:#81805F; text-decoration:none; font-family: Georgia;} A:visited{color:#81805F; text-decoration:none; font-family: Georgia;} A:active{color:#81805F; text-decoration:none; font-family: Georgia;} A:hover{color:#B9B5A0; text-decoration:none; font-family: Georgia;}
U {font-family: Georgia; color: #81805F; letter-spacing: 0pt; border-bottom: 1px; border-style: dashed, border-color: #81805F;} B, STRONG {font-family:Georgia; font-weight: bold; color: #81805F; letter-spacing:none;} i, EM {font-family:Georgia; color: #81805F; letter-spacing:none;}
input { font-family: Georgia; color: #CFC6B3; background: 0; font-size: 12px; font-weight: normal; text-decoration: none; text-align: left; border-width: 1px; border-style: dashed; border-color:#81805F; }
.head { font-weight:bold; letter-spacing:2px; border: dashed #81805F; border-width: 0px 0px 1px 0px; color:#81805F;padding-left:2px; font-size: 12px; font-family: Georgia; text-align:center;text-transform:uppercase; }
.sidenav { color: #81805F; padding: 2px; background-color: #DDDCBA; border-bottom: 1px dashed #81805F; font-size: 11px; text-align: center; display: block; margin-bottom: 3px; margin-left: 1px; }
.sidenav:hover { color: #B9B5A0; font-family: Georgia; background-color: #EBE5D9; border-bottom: 1px dashed #B9B5A0; text-decoration: none; display: block; }
.box { color:#81805F; width:90%; background:#DDDCBA url(boxside01.png) left repeat-y; padding-left:50px; padding-right:5px; padding-top:5px; padding-bottom:5px; border-top:3px solid #81805F; border-right:3px solid #81805F; border-bottom:3px solid #81805F; }
#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; }
#content { font-family: Georgia; color: #BBB19D; font-size: 12px; position:relative; width: 465px; padding: 15px; margin-bottom: 10em; }
#sidebar { font-family: Georgia; color: #B0AF8B; font-size: 12px; float: right; position:relative; right: 27px; width: 155px; padding: 5px; margin-bottom: 10em; }
#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: <HTML>
<HEAD>
<title>T H E L I G H T O F T H E E V E N S T A R | C R O W N E D W I T H R A D I A N C E</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="content"> <p class="head">Test</p> <b>Bold</b> <i>Italic</i> <u>Underline</u><br><br> <a href="index.html">Link</a href><br><br> Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content <center><div class="box">Box content Box content Box content Box content Box content Box content Box content Box content Box content Box content Box content Box content Box content Box content Box content Box content Box content Box content Box content Box content Box content Box content Box content Box content Box content Box content Box content Box content Box content Box content Box content Box content Box content Box content Box content Box content Box content Box content Box content Box content Box content Box content Box content Box content Box content Box content Box content Box content Box content Box content Box content Box content Box content Box content Box content Box content Box content Box content Box content Box content Box content Box content Box content Box content Box content Box content Box content Box content Box content Box content Box content Box content Box content Box content Box content </div></center> </div> <div id="sidebar"> <p class="head">Test</p> Sidebar content Sidebar content Sidebar content Sidebar content Sidebar content Sidebar content Sidebar content Sidebar content <br><br> <a href="index.html" class="sidenav">Link Name</a href> </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>
I need the nav...up at the top. Or else everyone will be lost, and that's not good. Once I get this fixed, I should be A-okay!
|
|
Amy-Chan
Dream Mirror
Water is a thing that flows!
????#??? ??????????? ?
Posts: 6,182
|
Post by Amy-Chan on Jun 27, 2007 6:57:56 GMT -5
try adding margin-top:-43em; to the sidebar, the code is't 100% neutral across browsers, mainly the box - check firefox and IE to see what i mean, but defining the font fully in body should help a little such as:
font-family: Georgia; font-style:normal; font-size: 12px; line-height: normal; font-weight: normal; font-variant: normal; letter-spacing:normal;
|
|
|
Post by Ellethwen on Jun 27, 2007 7:15:20 GMT -5
That moved it behind the header
|
|
Amy-Chan
Dream Mirror
Water is a thing that flows!
????#??? ??????????? ?
Posts: 6,182
|
Post by Amy-Chan on Jun 27, 2007 7:21:00 GMT -5
hmm... strange did't with me... adjust the size to be smaller
|
|
|
Post by Ellethwen on Jun 27, 2007 8:53:34 GMT -5
Oy. This thing is weird.
It's working now though. It had to be at -47.
Thanks so much everyone. I'll see how it goes from here, but it should work.
|
|
|
Post by Ellethwen on Jun 27, 2007 9:06:27 GMT -5
*grinds teeth* I took out the box over to the left and it did it again. It's practially dependant on that thing.
EDIT:
Or, rather, it's dependant on the fact that the content seems to need to be longer then the sidebar. Which is a little hard to do.
|
|
Amy-Chan
Dream Mirror
Water is a thing that flows!
????#??? ??????????? ?
Posts: 6,182
|
Post by Amy-Chan on Jun 27, 2007 14:43:36 GMT -5
just a thought.. but have you tried floating left both the main text div and navigation div? the nav will float by the side of the main text with out positioning left/right issues (like i see on the webpage in firefox)
|
|
|
Post by Betty Ann on Jun 27, 2007 15:00:30 GMT -5
lol, I think you should re-write the whole layout from scratch! That's what I do when a layout is giving me trouble.
Also, stay away from that pmob site. I'm not convinced that they know very much about good CSS coding :\
|
|
|
Post by Ellethwen on Jun 27, 2007 15:03:19 GMT -5
It worked fine on Celestial Trance's layout. Maybe it's just what I was doing?
I'm waiting for a response frmo the people at Lissa Explains. If they can't figure it out, I'll try a different coding.
|
|