Arwen-Undomiel.com
http://arwen-undomiel.com/forum/

Backgrounds and top images - CSS hates me
http://arwen-undomiel.com/forum/viewtopic.php?f=27&t=19504		 Page 1 of 1
Author:  Johnny's Fan [ November 21st, 2008, 11:20 pm ]
Post subject:  Backgrounds and top images - CSS hates me
Ok, so I am *trying* to make my second layout. It was all going hunky-dory until my background image and top image decided they didn't like each other and won't match up. :duh:

I was following Gil's tutorial, which was going great.

I have a background image like she has: http://www.skyward-thoughts.com/images/ ... uttut7.jpg

And a top image: http://www.skyward-thoughts.com/images/ ... uttut6.jpg

With the code she has provided, as far as I know I have done everything correctly, although my navigation bar I don't need, so I have omitted that part of the code.

I am having trouble aligning the main content to match the header, but I can deal with that, as I can obviously change the pixel width or height.

But I can't seem to find anything in the code that will allow me to change the background or even the header so they match. At the moment the header is where is should be, but part of the background just repeats itself.

Image

The orange part should actually be all there is in that area as that is the background. The red shouldn't be there as that is the content background and is on the opposite side to where this is.

All I can see is that according to Gil's tutorial, the top image needed to have some of the red content colour below the header, which is what I did. And from the way the background is misplaced, you can clearly see where the top image begins so I can only presume it's the background I need to fix.

Any ideas anyone?
Author:  Nurrantiel Mashiara [ November 22nd, 2008, 11:45 am ]
Post subject: 
It's really hard to tell without seeing your CCS. For me, at least, there may be some web geniuses out there who can help you.

Okay, so in your current layout you have
Code:
body {
background-color : #000000;
background-position : center 0%;
background-attachment : scroll;


How much of that is changed? I don't know if that would make a difference, but it is possible.
Author:  Johnny's Fan [ November 22nd, 2008, 12:00 pm ]
Post subject: 
Here is my style.css

Quote:
#content{
position:absolute;
top:450px;
left:80px;
width:550px;
filter:alpha(opacity=100);
}

body{
background: url('http://img212.imageshack.us/img212/4384/bggvh4.jpg');
background-position : center 0%;
background-attachment : scroll;
position:absolute;
margin-top:0px;
margin-left:0px;
color:#EBDDC7;
font-family:arial;
font-size:8pt;
}

a{
text-decoration: none;
color: #E09646;
}

a:hover{
text-decoration: none;
color: #EBDDC7;
}


When I added the code you gave me, the red moved to the left hand side, rather than it being on the right. So it looks better although it still doesn't match.

This is my index code, well just the top part.

Quote:
<html>
<head>
<title>Paved With Stars</title >
<link href="stlyes.css" rel="stylesheet" type="text/css">
</head>


<body marginleft="0" margintop="0">

<img src="http://img165.imageshack.us/img165/6353/topimageedn8.jpg">

<div id="content">


In an ideal world, I don't want to use the img src as where my header goes, as I have imagemapped a header instead, but I wanted to try and get the layout sorted before I attempted to use that. It's quite frustrating really as I can see it's almost there.

:hug: :hug: I'm just glad there are people out there who know what they're doing with layouts. :-)
Author:  Nurrantiel Mashiara [ November 22nd, 2008, 12:57 pm ]
Post subject: 
Okay, that's helpful. Don't look at the code I posted. I think the problem may be the background position thing. I'd try getting rid of the background-position:0 and changing "scroll" to fixed and see what that does.

Quote:
#content{
position:absolute;
top:450px;
left:80px;
width:550px;
filter:alpha(opacity=100);
}

body{
background: url('http://img212.imageshack.us/img212/4384/bggvh4.jpg');
background-position : center 0%;
background-attachment : scroll;
position:absolute;
margin-top:0px;
margin-left:0px;
color:#EBDDC7;
font-family:arial;
font-size:8pt;
}

a{
text-decoration: none;
color: #E09646;
}

a:hover{
text-decoration: none;
color: #EBDDC7;
}

I'm happy to try to help. Don't know if it works, but trying. :)
Author:  Johnny's Fan [ November 22nd, 2008, 7:44 pm ]
Post subject: 
Hmm, I tried that and it just went back to how it was before I used the code you gave me.
Author:  Gilraen Ringeril [ November 22nd, 2008, 11:13 pm ]
Post subject: 
I will try to figure this out within the next week :D It is most likely that I am forgetting something in the code to tell all you wonderful people, but it might take me a little bit to find it xD

But no fear! Gil is here and I will do my best to fix it :P haha!
Author:  Johnny's Fan [ November 23rd, 2008, 12:43 pm ]
Post subject: 
It's most likely to be something I'm doing wrong Gil. XD

Thank you. :hug: :hug:
Page 1 of 1 All times are UTC - 5 hours [ DST ]
Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group
http://www.phpbb.com/