CSS no work (positioning) 2

JimJx · Jan 28, 2003

Hi all,

I am trying to get a logo to show above some links using nested DIVs. However, the text always appears on top of the logo and the logo is about 100px lower than it should be on the screen.

Can anyone spot the problem? I have been looking for this for so long it is all starting to look the same to me.

I have tried it in NN4, NN6 and IE6, I get the same issue in all.

Any ideas suggestions are greatly appreciated.
Jim

Styles:

Code:

#divSlideCont {
	HEIGHT: 350px; LEFT: 0px; POSITION: absolute; TOP: 100px; VISIBILITY: hidden; WIDTH: 150px; Z-INDEX: 10
}
A.clSlideLinks {
	COLOR: #FFCC33; FONT-FAMILY: Verdana, Helvetica, Helv, Serif; FONT-SIZE: 14px; FONT-WEIGHT: bold; TEXT-DECORATION: none; WIDTH: 130px
}
A.clSlideSubLinks {
	COLOR: #FFCC33; FONT-FAMILY: Verdana, Helvetica, Helv, sans-serif; FONT-SIZE: 12px; TEXT-DECORATION: none; WIDTH: 125px
}
.Logo {
top: 0px;
left: 0px;
margin-left: 5px;
margin-top: 5px;
}

HTML:

Code:

<DIV Class=&quot;LeftSide&quot;>
<DIV id=&quot;divSlideCont&quot;>
<DIV ID=&quot;Logo&quot;>
<IMG src=&quot;Images/rcdsmall2.png&quot; width=&quot;115&quot; height=&quot;96&quot;>
</div>
        <DIV id=&quot;divSlide0&quot; class=&quot;clSlide&quot;><A href=&quot;index.html&quot;  onclick=&quot;swmenu(0,-1,-1); if(bw.ie || bw.ns6) this.blur(); &quot; class=&quot;clSlideLinks&quot;> Home</a><BR></div>
        <DIV id=&quot;divSlide1&quot; class=&quot;clSlide&quot;><A href=&quot;#&quot;  onclick=&quot;swmenu(1,-1,-1); if(bw.ie || bw.ns6) this.blur(); return false&quot; class=&quot;clSlideLinks&quot;> Portfolio</a><BR></div>
                <DIV id=&quot;divSlideSub1_0&quot; class=&quot;clSlideSub&quot;><A  onclick=&quot;swmenu(1,0,-1); if(bw.ie || bw.ns6) this.blur(); &quot; href=&quot;webportfolio.html&quot; class=&quot;clSlideSubLinks&quot;>  Web Portfolio</a><BR></div>
                <DIV id=&quot;divSlideSub1_1&quot; class=&quot;clSlideSub&quot;><A  onclick=&quot;swmenu(1,1,-1); if(bw.ie || bw.ns6) this.blur(); &quot; href=&quot;printportfolio.html&quot; class=&quot;clSlideSubLinks&quot;>  Print Portfolio</a><BR></div>
        <DIV id=&quot;divSlide2&quot; class=&quot;clSlide&quot;><A href=&quot;about.html&quot;  onclick=&quot;swmenu(2,-1,-1); if(bw.ie || bw.ns6) this.blur(); &quot; class=&quot;clSlideLinks&quot;> About Us</a><BR></div>

</div>
</div>

4x4uk · Jan 28, 2003

Try this for start
<DIV Class="Logo" position:absolute; Left

x;Top

x;Width

x;Height

x;>image.gif</div>

You will need to put the figures in for positioning, but remember they refer to its position within the <div> the Logo <div> is nested in.
Regards ian
It's not a lie if you believe it!

http://www.ne4x4.org.uk/

http://www.ne4x4.org.uk/Ian/

http://www.ne4x4.fsnet.co.uk/beck/

JimJx · Jan 29, 2003

Thanks for the reply Ian.

I already tried to do it inline with no joy....

If you, or anyone, has any other suggestions, I am still open to them.

Jim

deecee · Jan 29, 2003

DIV id="clSlide"

try that [soapbox]

sleep is good

tjd · Jan 29, 2003

Hi,

If LeftSide dec looks like this:

Code:

.LeftSide{
	position:static;
	left:50px;
	width:200px;
	height:200px;
	
}

The rest works in isolation (that is all alone on a page of its own). I used a little logo jpeg and ran it ok on ie 6 with DOCTYPE XHTML 1 transitional. The pos-static may be the key to the inline thing. I just had a bitch of a time with something because I'd used an in-line run in incorrectly further up the page. If anyone knows of a prog that shows a graphical shot of relationships between page elements on a complex page, I'll kiss their feet.

Here's the page:

Code:

<!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;>[/URL]

<html>
<head>
	<title>some old title</title>
	<style type=&quot;text/css&quot;>	
.LeftSide{
	position:static;
	left:50px;
	width:200px;
	height:200px;
	
}
position
#divSlideCont {
    HEIGHT: 350px; LEFT: 0px; POSITION: absolute; TOP: 100px; VISIBILITY: hidden; WIDTH: 150px; Z-INDEX: 10
}
A.clSlideLinks {
    COLOR: #FFCC33; FONT-FAMILY: Verdana, Helvetica, Helv, Serif; FONT-SIZE: 14px; FONT-WEIGHT: bold; TEXT-DECORATION: none; WIDTH: 130px
}
A.clSlideSubLinks {
    COLOR: #FFCC33; FONT-FAMILY: Verdana, Helvetica, Helv, sans-serif; FONT-SIZE: 12px; TEXT-DECORATION: none; WIDTH: 125px
}
.Logo {
top: 0px;
left: 0px;
margin-left: 5px;
margin-top: 5px;
}

</style>
</head>

<body>
<DIV Class=&quot;LeftSide&quot;>
<DIV id=&quot;divSlideCont&quot;>
<DIV ID=&quot;Logo&quot;>
<IMG src=&quot;[URL unfurl="true"]http://www.towersoflondon.com/images/tolsm.jpg&quot;[/URL] width=&quot;115&quot; height=&quot;96&quot;>
</div>
        <DIV id=&quot;divSlide0&quot; class=&quot;clSlide&quot;><A href=&quot;index.html&quot;  onclick=&quot;swmenu(0,-1,-1); if(bw.ie || bw.ns6) this.blur(); &quot; class=&quot;clSlideLinks&quot;> Home</a><BR></div>
        <DIV id=&quot;divSlide1&quot; class=&quot;clSlide&quot;><A href=&quot;#&quot;  onclick=&quot;swmenu(1,-1,-1); if(bw.ie || bw.ns6) this.blur(); return false&quot; class=&quot;clSlideLinks&quot;> Portfolio</a><BR></div>
                <DIV id=&quot;divSlideSub1_0&quot; class=&quot;clSlideSub&quot;><A  onclick=&quot;swmenu(1,0,-1); if(bw.ie || bw.ns6) this.blur(); &quot; href=&quot;webportfolio.html&quot; class=&quot;clSlideSubLinks&quot;>  Web Portfolio</a><BR></div>
                <DIV id=&quot;divSlideSub1_1&quot; class=&quot;clSlideSub&quot;><A  onclick=&quot;swmenu(1,1,-1); if(bw.ie || bw.ns6) this.blur(); &quot; href=&quot;printportfolio.html&quot; class=&quot;clSlideSubLinks&quot;>  Print Portfolio</a><BR></div>
        <DIV id=&quot;divSlide2&quot; class=&quot;clSlide&quot;><A href=&quot;about.html&quot;  onclick=&quot;swmenu(2,-1,-1); if(bw.ie || bw.ns6) this.blur(); &quot; class=&quot;clSlideLinks&quot;> About Us</a><BR></div>
</div>
</div>
</body>
</html>

Hope it helps. - &quot;Oops! I've joined a club that'll have me as a member?&quot; -

tjd · Jan 30, 2003

Sorry the bit I left out of that: the missing psclass descriptor "clslide" . . . could be therein prhaps? - "Oops! I've joined a club that'll have me as a member?" -

Ecniv · Jan 30, 2003

This is your html changed a little....

It might help just to start with boxes on background before putting things in them....

Post up what you think.... I hope it helps

Vince

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<head>
<title>some old title</title>
<style type="text/css">

.LeftSide
{
position:static;
left:50px;
width:200px;
height:200px;
background: #005555 none no-repeat fixed 0 0;

}

#divSlideCont {
background: #550055 none no-repeat fixed 0 0;
position: absolute;
top: 0px;
left: 100px;
width: 150px;
height: 350px;
visibility: visible;
z-index: 10;
}

A.clSlideLinks
{ COLOR: #FFCC33; FONT-FAMILY: Verdana, Helvetica, Helv, Serif; FONT-SIZE: 14px; FONT-WEIGHT: bold; TEXT-DECORATION: none; WIDTH: 130px }
A.clSlideSubLinks
{ COLOR: #FFCC33; FONT-FAMILY: Verdana, Helvetica, Helv, sans-serif; FONT-SIZE: 12px; TEXT-DECORATION: none; WIDTH: 125px }

.Logo
{
background: #FFFF00 none no-repeat fixed 0 0;
top: 0px;
left: 0px;
width: 119px;
height: 100px;
padding:2px 0px 0px 0px;
text-align: center;
}

</style>
</head>

<body>
<!--
<DIV Class="LeftSide">
<DIV id="divSlideCont">
<DIV class="Logo"><IMG src="

http://www.towersoflondon.com/images/tolsm.jpg";

width="115" height="96"></div>
<DIV id="divSlide0" class="clSlide"><A href="index.html" onclick="swmenu(0,-1,-1); if(bw.ie || bw.ns6) this.blur(); " class="clSlideLinks"> Home</a><BR></div>
<DIV id="divSlide1" class="clSlide"><A href="#" onclick="swmenu(1,-1,-1); if(bw.ie || bw.ns6) this.blur(); return false" class="clSlideLinks"> Portfolio</a><BR></div>
<DIV id="divSlideSub1_0" class="clSlideSub"><A onclick="swmenu(1,0,-1); if(bw.ie || bw.ns6) this.blur(); " href="webportfolio.html" class="clSlideSubLinks"> Web Portfolio</a><BR></div>
<DIV id="divSlideSub1_1" class="clSlideSub"><A onclick="swmenu(1,1,-1); if(bw.ie || bw.ns6) this.blur(); " href="printportfolio.html" class="clSlideSubLinks"> Print Portfolio</a><BR></div>
<DIV id="divSlide2" class="clSlide"><A href="about.html" onclick="swmenu(2,-1,-1); if(bw.ie || bw.ns6) this.blur(); " class="clSlideLinks"> About Us</a><BR></div>
</div>
</div>
-->
<div class="LeftSide">
<div id="divSlideCont">
<div class="Logo"><IMG src="

http://www.towersoflondon.com/images/tolsm.jpg";

width="115" height="96"></div>
</div>
</div>
</body>
</html>

JimJx · Jan 30, 2003

Thanks for all the responses!

I tried the last 2 sections of code from tjd and ecniv and they both worked.

I really apppreciate all of the thanks to everyone!

Jim

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

CSS no work (positioning) 2

JimJx

Technical User

4x4uk

Technical User

JimJx

Technical User

deecee

Technical User

tjd

IS-IT--Management

tjd

IS-IT--Management

Ecniv

Programmer

JimJx

Technical User

Similar threads

Part and Inventory Search

Sponsor