Member Avatar for Eva0607

Hello everyone :)

I am trying to get rid of extra space that appears beneath the page due to relative positioning. I tried assigning one div element with an absolute position to which all of the other relative divs are positioned but this still doesn't seem to work - not when it comes to any browser other than Firefox - and I am desperate to get this to work.

This is supposed to be a profile page and I am limited to not being able to use javascript or php or anything else other than plain css and html. I opted for relative positioning because this is the only way (that I know of) to make my rollovers work.

Here's the code: (and here's what the page looks like)

<html>
<head>
<style type="text/css">
body
{font-family: tahoma;font-size: 11px;color: #D1C6AD; line-height: 14px;background: #000000 url(http://expressions.evatangerine.net/Background.jpg) no-repeat center top; }

.main {position:absolute; left:375px; top:330px; width:205px; z-index:2; background: none;}
.dedications {position:absolute; left:602px; top:220px; width:450px; z-index:2; background: none;}
h1 {letter-spacing: 3px; font-family: "century gothic"; font-size: 12px;color: #ffb000; text-align: left; border-bottom: 2px solid #313535;text-transform:uppercase; }
h2 {font-family: "century gothic"; font-size: 11px;color: #B2121C; border-bottom: 1px solid #313535; text-align:right;letter-spacing:3px;text-transform:uppercase; }
b {font-size:11px; font-family: Arial; font-size:10px; color: #FFFFFF;}
i {font-size:11px; color: #B80C22; font-family: georgia;}
u {font-size:11px; color: #e19127;border-bottom-width: 2px;border-bottom-style: solid;border-bottom-color: #cccccc;}
s {font-size:12px; color: #B2121C;}
em {font-size:11px; color: #B80C22; font-family: georgia;}

a:active, a:link {
color:#B1111D; 
text-align: center;
text-decoration: none;
font-size: 12px; 
font-family: Tahoma; 
background: none; }

a:visited {
color:#B1111D; 
text-align: center;
text-decoration: none;
font-size: 12px; 
font-family: Tahoma;
background: none; }

a:hover {
color:#fff; 
text-align: center;
font-size: 12px; 
font-family:Tahoma; } 

.a {font: 22px tahoma;color: #54211b;font-weight: normal;text-transform: uppercase;text-align: center;line-height: 24px;letter-spacing: 0px;background-color: transparent;border-bottom: 1px solid #54211b; border-top: 1px solid #54211b;}

.b {font: 10px tahoma;color: #2b271b;font-weight: bold;text-transform: uppercase;text-align: center;line-height: 12px;letter-spacing: 0px;background-color: transparent;border-bottom: 1px solid #2b271b;}
i,em,u {color: #2E4881; font-family: georgia; font-size: 12px; line-height: 14px;}
b,strong {color: #2E4881; font-family: tahoma; font-size: 11px; line-height: 14px;}

.fp {
position:relative;
font-family: arial, verdana, helvetica, sans-serif;
background-image: url(http://i305.photobucket.com/albums/nn223/eva0607/Layouts/Luke/Fictionpress-Over.jpg);
background-repeat: no-repeat;
display: block;
width: 122px;
height: 29px;
margin: 0;
margin-bottom:0px;
padding: 0;
}

.fp a {
display:block;
font-size: 11px;
width: 122px;
height: 29px;
float: left;
margin: 0;
padding: 0;
color: black; text-decoration: none;
}

.fp img {width: 100%; height: 100%; border: 0; }
* html a:hover {visibility:visible}
.fp a:hover img{visibility:hidden}
.fp span {
position:absolute;
top:1px;
left:1px;
margin:0;
}

.da {
position:relative;
font-family: arial, verdana, helvetica, sans-serif;
background-image: url(http://i305.photobucket.com/albums/nn223/eva0607/Layouts/Luke/Deviantart-Over.jpg);
background-repeat: no-repeat;
display: block;
width: 110px;
height: 29px;
margin: 0;
margin-bottom:0px;
padding: 0;
}

.da a {
display:block;
font-size: 11px;
width: 110px;
height: 29px;
float: left;
margin: 0;
padding: 0;
color: black; text-decoration: none;
}

.da img {width: 100%; height: 100%; border: 0; }
* html a:hover {visibility:visible}
.da a:hover img{visibility:hidden}
.da span {
position:absolute;
margin:0;
}

.scr {
position:relative;
font-family: arial, verdana, helvetica, sans-serif;
background-image: url(http://i305.photobucket.com/albums/nn223/eva0607/Layouts/Luke/SCR-Over.jpg);
background-repeat: no-repeat;
display: block;
width: 54px;
height: 29px;
margin: 0;
margin-bottom:0px;
padding: 0;
}

.scr a {
display:block;
font-size: 11px;
width: 54px;
height: 29px;
float: left;
margin: 0;
padding: 0;
color: black; text-decoration: none;
}

.scr img {width: 100%; height: 100%; border: 0; }
* html a:hover {visibility:visible}
.scr a:hover img{visibility:hidden}
.scr span {
position:absolute;
margin:0;
}

.repo {
position:relative;
font-family: arial, verdana, helvetica, sans-serif;
background-image: url(http://i305.photobucket.com/albums/nn223/eva0607/Layouts/Luke/Repo-Over.jpg);
background-repeat: no-repeat;
display: block;
width: 221px;
height: 29px;
margin: 0;
margin-bottom:0px;
padding: 0;
}

.repo a {
display:block;
font-size: 11px;
width: 221px;
height: 29px;
float: left;
margin: 0;
padding: 0;
color: black; text-decoration: none;
}

.repo img {width: 100%; height: 100%; border: 0; }
* html a:hover {visibility:visible}
.repo a:hover img{visibility:hidden}
.repo span {
position:absolute;
margin:0;
}

.befriend {
position:relative;
background-image: url(http://i305.photobucket.com/albums/nn223/eva0607/Layouts/Luke/Befriend-Over.jpg);
background-repeat: no-repeat;
display: block;
width: 117px;
height: 23px;
margin: 0;
margin-bottom:0px;
padding: 0;
}

.befriend a {
display:block;
width: 117px;
height: 23px;
float: left;
margin: 0;
padding: 0;
color: black; text-decoration: none;
}

.befriend img {width: 100%; height: 100%; border: 0; }
* html a:hover {visibility:visible}
.befriend a:hover img{visibility:hidden}
.befriend span {
position:absolute;
margin:0;
}

.owl {
position:relative;
font-family: arial, verdana, helvetica, sans-serif;
background-image: url(http://i305.photobucket.com/albums/nn223/eva0607/Layouts/Luke/Owl-Over.jpg);
background-repeat: no-repeat;
display: block;
width: 113px;
height: 23px;
margin: 0;
margin-bottom:0px;
padding: 0;
}

.owl a {
display:block;
font-size: 11px;
width: 113px;
height: 23px;
float: left;
margin: 0;
padding: 0;
color: black; text-decoration: none;
}

.owl img {width: 100%; height: 100%; border: 0; }
* html a:hover {visibility:visible}
.owl a:hover img{visibility:hidden}
.owl span {
position:absolute;
margin:0;
}

.luke {
position:relative;
font-family: arial, verdana, helvetica, sans-serif;
background-image: url(http://expressions.evatangerine.net/Luke-Over.gif);
background-repeat: no-repeat;
display: block;
width: 152px;
height: 241px;
margin: 0;
margin-bottom:0px;
padding: 0;
}

.luke a {
display:block;
font-size: 11px;
width: 152px;
height: 241px;
float: left;
margin: 0;
padding: 0;
color: black; text-decoration: none;
}

.luke img {width: 100%; height: 100%; border: 0; }
* html a:hover {visibility:visible}
.luke a:hover img{visibility:hidden}
.luke span {
position:absolute;
margin:0;
}

.shilo {
position:relative;
font-family: arial, verdana, helvetica, sans-serif;
background-image: url(http://i305.photobucket.com/albums/nn223/eva0607/Layouts/Luke/Shilo-Over.jpg);
background-repeat: no-repeat;
display: block;
width: 98px;
height: 167px;
margin: 0;
margin-bottom:0px;
padding: 0;
}

.shilo a {
display:block;
font-size: 11px;
width: 98px;
height: 167px;
float: left;
margin: 0;
padding: 0;
color: black; text-decoration: none;
}

.shilo img {width: 100%; height: 100%; border: 0; }
* html a:hover {visibility:visible}
.shilo a:hover img{visibility:hidden}
.shilo span {
position:absolute;
margin:0;
}

.henchwoman {
position:relative;
font-family: arial, verdana, helvetica, sans-serif;
background-image: url(http://i305.photobucket.com/albums/nn223/eva0607/Layouts/Luke/Henchwoman-Over.jpg);
background-repeat: no-repeat;
display: block;
width: 98px;
height: 167px;
margin: 0;
margin-bottom:0px;
padding: 0;
}

.henchwoman a {
display:block;
font-size: 11px;
width: 98px;
height: 167px;
float: left;
margin: 0;
padding: 0;
color: black; text-decoration: none;
}

.henchwoman img {width: 100%; height: 100%; border: 0; }
* html a:hover {visibility:visible}
.henchwoman a:hover img{visibility:hidden}
.henchwoman span {
position:absolute;
margin:0;
}

.meg {
position:relative;
font-family: arial, verdana, helvetica, sans-serif;
background-image: url(http://i305.photobucket.com/albums/nn223/eva0607/Layouts/Luke/Meg-Over.jpg);
background-repeat: no-repeat;
display: block;
width: 98px;
height: 167px;
margin: 0;
margin-bottom:0px;
padding: 0;
}

.meg a {
display:block;
font-size: 11px;
width: 98px;
height: 167px;
float: left;
margin: 0;
padding: 0;
color: black; text-decoration: none;
}

.meg img {width: 100%; height: 100%; border: 0; }
* html a:hover {visibility:visible}
.meg a:hover img{visibility:hidden}
.meg span {
position:absolute;
margin:0;
}

.luigi {
position:relative;
font-family: arial, verdana, helvetica, sans-serif;
background-image: url(http://i305.photobucket.com/albums/nn223/eva0607/Layouts/Luke/Luigi-Over.jpg);
background-repeat: no-repeat;
display: block;
width: 98px;
height: 167px;
margin: 0;
margin-bottom:0px;
padding: 0;
}

.luigi a {
display:block;
font-size: 11px;
width: 98px;
height: 167px;
float: left;
margin: 0;
padding: 0;
color: black; text-decoration: none;
}

.luigi img {width: 100%; height: 100%; border: 0; }
* html a:hover {visibility:visible}
.luigi a:hover img{visibility:hidden}
.luigi span {
position:absolute;
margin:0;
}

.pavi {
position:relative;
font-family: arial, verdana, helvetica, sans-serif;
background-image: url(http://i305.photobucket.com/albums/nn223/eva0607/Layouts/Luke/Pavi-Over.jpg);
background-repeat: no-repeat;
display: block;
width: 98px;
height: 167px;
margin: 0;
margin-bottom:0px;
padding: 0;
}

.pavi a {
display:block;
font-size: 11px;
width: 98px;
height: 167px;
float: left;
margin: 0;
padding: 0;
color: black; text-decoration: none;
}

.pavi img {width: 100%; height: 100%; border: 0; }
* html a:hover {visibility:visible}
.pavi a:hover img{visibility:hidden}
.pavi span {
position:absolute;
margin:0;
}
</style> 
</head>
<body>
<div style="position: absolute; top: 1px; left: 1px; height: 850px; ">

<div class="fp" style="position: relative; top: 764px; left: 270px; margin-top: 15px; width: 122px; height: 29px; "><a href="http://www.fictionpress.com/u/627706/Laviathon"><img src="http://i305.photobucket.com/albums/nn223/eva0607/Layouts/Luke/Fictionpress-Normal.jpg"></a></div>

<div class="da" style="position: relative; top: 720px; left: 502px; margin-top: 15px; width: 122px; height: 29px; "><a href="http://lukemorris369.deviantart.com/"><img src="http://i305.photobucket.com/albums/nn223/eva0607/Layouts/Luke/Deviantart-Normal.jpg" position: relative; top: -5px; left: 2px; /></a></div>

<div class="scr"style="position: relative; top: 676px; left: 674px; margin-top: 15px; width: 54px; height: 29px; "><a href="http://www.hexrpg.com/forum/index.php?forum=903"><img src="http://i305.photobucket.com/albums/nn223/eva0607/Layouts/Luke/SCR-Normal.jpg"></a></div>

<div class="repo" style="position: relative; top: 632px; left: 814px; margin-top: 15px; width: 221px; height: 29px; "><a href="http://www.youtube.com/watch?v=xETgGym8cnE"><img src="http://i305.photobucket.com/albums/nn223/eva0607/Layouts/Luke/Repo-Normal.jpg"></a></div>

<div class="befriend" style="position: relative; top: 562px; left: 424px; margin-top: 15px; width: 117px; height: 23px; "><a href="http://www.hexrpg.com/hogfriends.php?hogfriend=Luke_Morris&link=1"><img src="http://i305.photobucket.com/albums/nn223/eva0607/Layouts/Luke/Befriend-Normal.jpg"></a></div>

<div class="owl" style="position: relative; top: 538px; left: 760px; margin-top: 1px; width: 113px; height: 23px; "><a href="http://www.hexrpg.com/owlpost/Luke_Morris"><img src="http://i305.photobucket.com/albums/nn223/eva0607/Layouts/Luke/Owl-Normal.jpg"></a></div>

<div class="shilo" style="position: relative; top: -215px; left: 398px; margin-top: 15px; width: 98px; height: 167px; "><a href="http://www.hexrpg.com/userinfo/_Eva_"><img src="http://i305.photobucket.com/albums/nn223/eva0607/Layouts/Luke/Shilo-Normal.jpg"></a></div>

<div class="henchwoman" style="position: relative; top: -397px; left: 516px; margin-top: 15px; width: 98px; height: 167px; "><a href="http://www.hexrpg.com/userinfo/ifocusonthepain"><img src="http://i305.photobucket.com/albums/nn223/eva0607/Layouts/Luke/Henchwoman-Normal.jpg"></a></div>

<div class="meg" style="position: relative; top: -580px; left: 640px; margin-top: 15px; width: 98px; height: 167px; "><a href="http://www.hexrpg.com/userinfo/simone_jowett"><img src="http://i305.photobucket.com/albums/nn223/eva0607/Layouts/Luke/Meg-Normal.jpg"></a></div>

<div class="luigi" style="position: relative; top: -761px; left: 768px; margin-top: 15px; "><a href="http://www.hexrpg.com/userinfo/laila123"><img src="http://i305.photobucket.com/albums/nn223/eva0607/Layouts/Luke/Luigi-Normal.jpg" width="98" height="167" /></a></div>

<div class="pavi" style="position: relative; top: -943px; left: 880px; margin-top: 15px; width: 98px; height: 167px; "><a href="http://www.hexrpg.com/userinfo/mugglebornmegan07"><img src="http://i305.photobucket.com/albums/nn223/eva0607/Layouts/Luke/Pavi-Normal.jpg"></a></div>


<div class="luke" style="position: relative; top: -929px; left: 175px; margin-top: 15px; width: 152px; height: 241px; "><a href="http://www.hexrpg.com/userinfo/_Eva_"><img src="http://expressions.evatangerine.net/Luke-Normal.png"></a></div>
</div>

<div id class="main">
<h1>BASICS</h1>

<p align="left">
<p><b>Name:</b> Luke Morris <br>
<b>Birthday:</b> June 18th<br>
<b>Favorite bands:</b> The Butterfly Effect, NIN, Rise Against, Karnivool, OSI, Deftones, Celldweller, Porcupine Tree, Ashes Divide<br>

<b>Favorite Books:</b> See Literary Canon<br>
<b>Favorite Movies:</b> Repo! The Genetic Opera, Sin Eater, Juno, Perfume, Gone In Sixty Seconds, Star Wars<br>
<b>Hobbies:</b> Conquering the Ancient World, listening to music, writing stuff... being a Jedi<br>
<b>Likes:</b> Sleep, Skype, Skye<br>
<b>Dislikes:</b>Stephanie Meyer, Twilight, heat <br>

<b>Repo! Conversions:</b> 15 and climbing<br>
</p>
</div>

<div id class="dedications">

<h1>PEOPLE</h1>
<p>
<a href="http://www.hexrpg.com/userinfo/_eva_">Eva</a> text text text text text<br><br>
<a href="http://www.hexrpg.com/userinfo/xmooneyx">Holly</a> text text text text text text<br><br>

<a href="http://www.hexrpg.com/userinfo/simone_jowett">Simone</a> text text text text text<br><br>
<a href="http://www.hexrpg.com/userinfo/laila123">Lu</a> text text text text text<br><br>
<a href="http://www.hexrpg.com/userinfo/mugglebornmegan05">Megan</a> text text text text text text<br>
</div>
</body>
</html>

Does anyone know what I should do? =/

Edited by Eva0607 because: n/a
  • 5 Contributors
  • 12 Replies
  • 3K Views
  • 3 Days Discussion Span
  • Latest Post Latest Post by Eva0607
Member Avatar for Hangfire

Try adding this to the start of your css

*{padding:0;margin:0;}

Might help, if not post back

Also this is a great tutorial on how to make rollover images appear.

http://meyerweb.com/eric/css/edge/popups/demo.html

Edited by Hangfire because: added a url
Member Avatar for Eva0607

Try adding this to the start of your css

*{padding:0;margin:0;}

Might help, if not post back

Also this is a great tutorial on how to make rollover images appear.

http://meyerweb.com/eric/css/edge/popups/demo.html

Hey, thanks for answering so fast :)

I tried adding that to the start of my css but it didn't do the trick =/

Member Avatar for Cragdo

Hi,

You have anumber of errors in your code:

On line 4 of your html doc you have:

{padding:0;margin:0;}

on line 436 you have code which is not declared as a style:

position: relative; top: -5px; left: 2px;

on line 442 you have an unencoded & in your url. Try changing it to &amp;

<a href="http://www.hexrpg.com/hogfriends.php?hogfriend=Luke_Morris&link=1">

on line 460 and 476 you have id's that are not declared

<div id class="main">
<div id class="dedications">

Don't know if this will fix your problem but you never know.

Member Avatar for Traevel

Hi there,

Apart from the issues Cragdo mentioned above, line 463 has an unnecessary <p> tag.

To answer your question: the "white space" is being caused in line 456 <div class="luke" style="position: relative; top: -929px; It could be because of the png-image (IE doesn't really like them) but a quick fix might be <div class="luke" style="position: absolute; top: 220px; By the way, the layout only seems to work at a screen-width of 1280 pixels. :icon_eek:
You might want to look into that. :D

Good luck,

Traevel

Member Avatar for Eva0607

Thanks for replying, you guys.

I will read through the posts and see if anything suggested will help.

I wasn't home for the weekend so I didn't get a chance to reply.

Member Avatar for Cragdo

Hi,

If you are using Firefox you should install a validator like Total Validator so that you can check and fix all the errors in your document. You can find this in the Firefox add-ons and use the W3C validators at http://validator.w3.org/ for both html and css.

Hope this helps

Member Avatar for Eva0607

Embarrassing story time:
I am pretty much self-taught when it comes to HTML & CSS.
I understand it somewhat, but by no means do I know enough to create 'complicated websites'.
I like playing around in photoshop and sometimes I have this idea of what I like the site to look like but I can't exactly carry it out; not without help, anyway.

I normally wouldn't tackle on a project like this but it's a favor for a close friend and I really want to finish it, so if you have any suggestions as to what I need to do with the code in order to have the whole page centered so that it looks good in every browser on any screen resolution without getting rid of the rollovers, that would be very much appreciated :)

Member Avatar for MidiMagic

Idea: Make the background color match one of the elements. Then the white space is not white.

Centering objects is much harder in css than it was in the old html. But you can do this by setting the margins to auto, or clearing both sides.

Member Avatar for Eva0607

Thanks, I did do that. If you click the link, you'll see. Unfortunately, this is the least of my problems. I guess I'll have to find a different solution for the rollovers...

Member Avatar for Cragdo

Hi,

If you give your rollovers a wrapper then set the left and right margins to auto then this should centre it.

.navwrapper{
margin: 0 auto;
}

then

<div class="navwrapper"><div class="whatever-classs">Your Rollovers</div></div>

You also need to create a doctype on the top of every page as in

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

There are a number of different doctypes you can use which you can read about here http://www.w3.org/QA/2002/04/valid-dtd-list.html. Without a doctype your page can render incorrectly.

You really want to fix those page errors too as this can also affect the way your page renders.

Hope this helps

Member Avatar for Eva0607

Hey, thanks for replying. Unfortunately, the site this website is to be "hosted" on forces the <title> tag to break and this is the main reason why I don't include the whole
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

Anyway, I found a better improved rollovers technique where you only use one image (http://expressions.evatangerine.net/Back.png)

It turned out great and as far as I know it works on every resolution. View here: http://expressions.evatangerine.net/new.html

My only remaining problem right now are the two text containers. It seems like they change position depending on the screen resolution :(

Is there a quick fix for that or should I really start pulling my hair out?
Ugh. It's so frustrating...

Edited by Eva0607 because: n/a
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.