relative positioning ...

liunx · Jan 10, 2008

Okay I'm having a little trouble with "relative" positioning of a picture. I positioned the background so that it repeats vertically straight in the middle no matter what resolution that you're viewing it in and I used this code in my CCS: 
body {background-image: url(coldback.jpg); background-repeat: repeat-y; background-position: top center; background-color: #000000;} 
 
So how do I line up my main image (not in the background) in the center as well? I want it to be "top center" too but I can't figure out the code. Whenever I try I always get a gap right above the picture and I don't want that. I want it to be 0px from the top. I hoping I'm explaining this well. 
 
Help?

What about the margin? 
 
<style type="text/css"> 
 
BODY { 
margin: 0px 0px 0px 0px; 
font-family: verdana, arial, helvetica; 
background-image: url(layout/sfeerstrook/site_home.jpg); 
background-repeat: no-repeat; 
font-size: 14px; 
font-color: #000000; 
color: #000066;} 
</style> 
 
:rocker:Having a gap isn't the only problem; I need it so that it's "top center" just like the background, and no matter what resolution you're using you can see it aligned correctly on the page. If I use absolute positioning by pixels it won't show up correctly unless on a certain resolution. I guess that's my main problem.Can you upload this page as testpage.html? 
 
:rocker:okay it's right here: 
<a class="postlink" href="http://aphoria.org/coldplay.htm">http://aphoria.org/coldplay.htm</a> 
 
That's what it looks like now but I want the main image to line up with the background regardless of the resolution. I want some way to have the "main" image be "top center" just like I have the background.Your code makes no sense to me at all. First, CSS must go in the head (unless it is inline). 
<html> 
<head> 
<title>Title</title> 
<style type="text/css"> 
 
</style> 
</head> 
<body> 
Hello world 
</body> 
</html> 
Make sure that you follow that basic outline. 
 
Second, your CSS isn't even close to valid. 
body { 
body,p,td {font-family:arial; font-size:11px; color:#F3E2C4; 
 
scrollbar-arrow-color: CE8E68; 
 
scrollbar-track-color: 000000; 
 
scrollbar-face-color: 000000; 
 
scrollbar-shadow-color: #CE8E68; 
 
scrollbar-highlight-color: #000000; 
 
scrollbar-darkshadow-color: #CE8E68; 
 
scrollbar-3dlight-color: #CE8E68; } 
As far as I know, you cannot nest CSS statements. You are also missing the "#" in front of some of the colors, but not all of them. The "#" must be there. If you declare the font family and size in the body, it will be inherited by all elements within the body, so you only need to specify the "p" and "td" fonts when they are different from the body. So the above can be cleaned up to look like this: 
body { font-family:arial; 
font-size:11px; 
color:#F3E2C4; 
scrollbar-arrow-color: #CE8E68; 
scrollbar-track-color: #000000; 
scrollbar-face-color: #000000; 
scrollbar-shadow-color: #CE8E68; 
scrollbar-highlight-color: #000000; 
scrollbar-darkshadow-color: #CE8E68; 
scrollbar-3dlight-color: #CE8E68; } 
In your "a" elements, you have some funky stuff, too. Again, you must have the "#" in front of the hex number that represents a color. I've never heard of the filter attribute, but I'll leave that alone. In your height attributes, you have a value of "1". One what? px, em, or pt? You need to specify. A:hover is missing the "cursor:" in front of the word "default;" So: 
A:link { color:#CE8E68; 
text-decoration:none; 
cursor:default; 
filter:shadow(color=F3E2C4,offX=1,offY=1); 
height:1em; } 
 
A:visited { color:#CE8E68; 
text-decoration:none; 
cursor:default; 
filter:shadow(color=F3E2C4,offX=1,offY=1); 
height:1em; } 
 
A:active { color:#CE8E68; 
text-decoration:none; 
cursor:default; 
filter:shadow(color=F3E2C4,offX=1,offY=1); 
height:1em; } 
 
A:hover { color:#F3E2C4; 
text-decoration:none; 
cursor: default; 
border-bottom: dashed 2px #CE8E68; } 
After the "a" elements, you have another body element. That should be combined with the previous body. You also need to put the url in quotes. 
body { font-family:arial; 
font-size:11px; 
color:#F3E2C4; 
background: #000000 url("coldback.jpg") repeat-y top center; 
scrollbar-arrow-color: #CE8E68; 
scrollbar-track-color: #000000; 
scrollbar-face-color: #000000; 
scrollbar-shadow-color: #CE8E68; 
scrollbar-highlight-color: #000000; 
scrollbar-darkshadow-color: #CE8E68; 
scrollbar-3dlight-color: #CE8E68; } 
Putting it all together, your CSS now looks like this: 
<style type="text/css"> 
 
</style> 
Now, for some reason, in your body tag, you have specified a background color. That will over-ride your CSS, so take it out. 
 
To position your image absolutely, but still make it move on a screen resize, you can use percentages. Oh, and get rid of those "font" tags. Please, please, please do not use those when you are already using CSS. It defeats the purpose. You should also move those inline styles up to the style in the head and call them with a class or id.I have used the css of doogxela 
 
and the margin set to 0px 
 
see the attachment. 
No gap at the top. 
 
//// take this part out of my code 
REVIHSSHIVER_bestanden/ 
(it is a dir on my computer) 
//// 
 
 
:rocker:peter looks like you forgot to attach it

Originally posted by leoo24 
peter looks like you forgot to attach it

ja ja.....getting older

ok here it is 
 
:rocker:

relative positioning ...

liunx

Guest