[SOLVED] CSS noob here

SirChick · December 19, 2007

Hey im trying to convert my old html methods to the new CSS

But am having difficulty as my images are "on top" of the text so you can see the image but the text cannot be seen.... how do i correct this.. this is what i got:

#bv_textleft {
width: 100%;
height:16px;
text-align: left;
font-family: "Lucida Bright";
font-size: 32px;
text-decoration:underline;
font-weight:bold;
margin: 0 auto;
padding-top: 10px;
color: #000000;
}

HTML:

</script>
<link href="test.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="wrapper">
<div id="banner">
	<img src="Banner1.jpg" id="Image1" alt="" align="top" border="3" width="700" height="94">
</div>

<div id="bv_text">
    	Welcome to the Homepage!!
</div>


	<div id="bv_textleft">
	What The Heck?

	</div>

//this image is "above" the title "what the heck?" when really the text should be in front of the image...

<div id="bv_" style="position:absolute;left:16px;top:164px;width:307px;height:430px" align="left">
<img src="menu_gradient.gif" id="Shape1" align="top" alt="" border="0" width="307" height="430"></div>

phpQuestioner · December 19, 2007

It's because you position is set to absolute and you set the "top" properties to low and that will put it over your other elements - if "top" is not set far enough below them.

<style>
#bv_textleft {
width: 100%;
text-align: left;
font-family: Lucida Bright;
font-size: 32px;
text-decoration:underline;
font-weight:bold;
margin: 0 auto;
padding-top: 10px;
color: #000000;
}
</style>


<div id="wrapper">
<div id="banner">
	<img src="Banner1.jpg" id="Image1" alt="" align="top" border="3" width="700" height="94">
</div>

<div id="bv_text">
    	Welcome to the Homepage!!
</div>


	<div id="bv_textleft">
	What The Heck?

	</div>

//this image is "above" the title "what the heck?" when really the text should be in front of the image...

<div id="bv_" style="position:absolute;left:16px;top:200px;width:307px;height:430px" align="left">
<img src="menu_gradient.gif" id="Shape1" align="top" alt="" border="0" width="307" height="430">
</div>

</div>

dbrimlow · December 19, 2007

phpQuestioner is right, the image is doing exactly what you are telling it to do.

why?

this ...

<div id="bv_" style="position:absolute;left:16px;top:164px;width:307px;height:430px" align="left">

... is telling the image to ignore the flow of html and put the image EXACTLY 16px left of, and 164px down from the top of, THE BROWSER WINDOW itself. It ignores your flow of html altogether - as if it wasn't even there.

Depending upon where you want the image (and without seeing a sample with the other css commands it is hard to guess) I would recommend trying this:

<div id="bv_" style="position:relative; margin-top:164px; margin-left:16px; width:307px; height:430px">

By changing "position:absolute" to "position:relative" and the "left:" and "top:" elements to margin, you can now position your image relative to the div that precedes it. Then tweak the margins until you have the image where you want it.

Again, without knowing where you want the image (and other css elements on the page that may affect layout) my solution may not be what you need. But it will certainly bring the image back into the flow of the html.

This is the second time I've come across a really poorly coded ID called "<div id="bv_">".

Is there a bad template floating around that beginners are using?

SirChick · December 19, 2007

Ok thanks guys.

My goal was to convert that image into CSS how ever am having difficult how i get it to appear on the page in the correct place + behind the image...

Could you show me how you do it?

My biggest difficulty in understanding CSS is positioning things up down left and right.. as i been using the old fashioned div method I have difficulty grasping the new positioning method.

dbrimlow · December 20, 2007

You would have to show us all css and all html in order to see if you have any html/header errors first - and how other divs (ids and classes) position on the page.

A well laid out page starts with well formed html first.

And each css element controls how other elements behave.

SirChick · December 20, 2007

Well my html is a bit of the new CSS and the rest is the old html method which im trying to convert to CSS but that was why i cldnt work out how to do position but this is what i got:

CSS:

body {
background-color: #466B98;
}

#wrapper {
margin: 0 auto;
width: 800px;
}
#banner {
width: 100%;
height:94px;
margin: 0 auto;
}
#bv_text {
width: 100%;
height:36px;
text-align: center;
font-family: "Lucida Bright";
font-size: 32px;
text-decoration:underline;
font-weight:bold;
margin: 0 auto;
padding-top: 10px;
color: #FFFFFF;
}
#bv_textleft {
width: 100%;
height:16px;
text-align: left;
font-family: "Lucida Bright";
font-size: 32px;
text-decoration:underline;
font-weight:bold;
margin: 0 auto;
padding-top: 10px;
color: #000000;
}

#error {
position: relative;
width: 100%;
height:36px;
text-align: center;
font-family: "Lucida Bright";
font-size: 32px;
text-decoration:underline;
font-weight:bold;
margin: 0 auto;
padding-top: 20px;
padding-bottom: 20px;
color: #00FFFFFF;
}

</style>

HTML:

<link href="test.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="wrapper">
<div id="banner">
	<img src="Banner1.jpg" id="Image1" alt="" align="top" border="3" width="700" height="94">
</div>

<div id="bv_text">
    	Welcome to the Homepage!!
</div>


	<div id="bv_textleft">
	What The Heck?

	</div>

<div id="bv_" style="position:absolute;left:740px;top:164px;width:206px;height:448px" align="left">
<img src="menu_gradient.gif" id="Shape4" align="top" alt="" border="0" width="206" height="448"></div>
<div id="bv_" style="position:absolute;left:354px;top:453px;width:359px;height:150px" align="left">
<img src="menu_gradient.gif" id="Shape3" align="top" alt="" border="0" width="359" height="150"></div>
<div id="bv_" style="position:absolute;left:327px;top:164px;width:410px;height:268px" align="left">
<img src="menu_gradient.gif" id="Shape2" align="top" alt="" border="0" width="410" height="268"></div>
<div id="bv_" style="position:absolute;left:16px;top:164px;width:307px;height:430px" align="left">
<img src="menu_gradient.gif" id="Shape1" align="top" alt="" border="0" width="307" height="430"></div>


<div id="bv_" style="position:absolute;left:39px;top:230px;width:260px;height:325px;z-index:12" align="center">
<font style="font-size:15px" color="#000000" face="Arial">text<br>
more text</font></div>

<div id="bv_" style="position:absolute;left:445px;top:369px;width:202px;height:16px;z-index:13" align="center">
<font style="font-size:14px" color="#FF0000" face="Arial"><b><u>Oh, No! I forgot My Password!</u></b></font></div>
<div id="bv_" style="position:absolute;left:410px;top:507px;width:258px;height:25px;z-index:14" align="center">
<font style="font-size:22px" color="#FF0000" face="Georgia Ref"><b><u><a href="regr.php">Register A New Account!</a></u></b></font></div>
<img src="Airport.jpg" id="Image2" alt="" align="top" border="1" width="163" height="98" style="position:absolute;left:754px;top:214px;width:163px;height:98px;z-index:15">
<div id="bv_" style="position:absolute;left:760px;top:321px;width:150px;height:48px;z-index:16" align="left">
<font style="font-size:13px" color="#000000" face="Arial">The United Kingdom has announced a new airport is to be....</font></div>
<div id="bv_" style="position:absolute;left:769px;top:191px;width:150px;height:16px;z-index:17" align="center">
<font style="font-size:13px" color="#000000" face="Arial"><b><u>News...</u></b></font></div>
<div id="bv_" style="position:absolute;left:759px;top:471px;width:150px;height:64px;z-index:18" align="left">
<font style="font-size:13px" color="#000000" face="Arial">In other news, the United Kingdom has reached a population of <?=$totalusers ?> users. Experts say...</font></div>
<img src="population picture.jpg" id="Image3" alt="" align="top" border="0" width="167" height="93" style="position:absolute;left:752px;top:373px;width:167px;height:93px;z-index:19">
<div id="bv_" style="position:absolute;left:85px;top:570px;width:175px;height:16px;z-index:20" align="left">
<font style="font-size:13px" color="#000000" face="Arial"><i>Players must be 13 or older!</i></font></div>
<div id="bv_" style="position:absolute;left:92px;top:670px;width:150px;height:24px;z-index:21" align="left">
<font style="font-size:21px" color="#FFFFFF" face="Arial"><b><u>ScreenShots!</u></b></font></div>
<div id="bv_" style="position:absolute;left:407px;top:675px;width:187px;height:24px;z-index:22" align="center">
<font style="font-size:21px" color="#FFFFFF" face="Arial"><b><u>Terms Of Service</u></b></font></div>
<div id="bv_" style="position:absolute;left:734px;top:665px;width:193px;height:22px;z-index:23" align="center">
<font style="font-size:19px" color="#FFFFFF" face="Arial"><b><u>Contact Us</u></b></font></div>
<div id="bv_" style="position:absolute;left:339px;top:757px;width:330px;height:32px;z-index:24" align="center">
<font style="font-size:13px" color="#000000" face="Arial">The entire website is Copyright © 2004-2007 Netwalk. All rights reserved.</font></div>
<div id="bv_" style="position:absolute;left:760px;top:545px;width:150px;height:64px;z-index:25" align="left">
<font style="font-size:13px" color="#000000" face="Arial">Log in and read the News for other important and helpful infomation...</font></div>
<div id="bv_" style="position:absolute;left:326px;top:814px;width:330px;height:16px;z-index:26" align="center">
<font style="font-size:13px" color="#466B98" face="Arial">Bottom of page</font></div>
<div id="bv_" style="position:absolute;left:392px;top:225px;width:271px;height:150px;z-index:27" align="left">
<form name="Loginform" method="POST" action="" id="Form1" onsubmit="return ValidateForm1(this)">
<input type="submit" id="Button1" name="Login" value="Login" style="position:absolute;left:101px;top:100px;width:75px;height:24px;z-index:0">
<input type="text" id="Editbox1" style="position:absolute;left:132px;top:13px;width:126px;font-family:Courier;font-size:19px;z-index:1" size="14" name="Username" value="">
<input type="password" id="Editbox2" style="position:absolute;left:132px;top:50px;width:126px;font-family:Courier;font-size:19px;z-index:2" size="14" name="Password" value="" maxlength="15">
<div id="bv_Text4" style="position:absolute;left:8px;top:10px;width:113px;height:24px;z-index:3" align="right">
<font style="font-size:21px" color="#000000" face="Arial"><u>Username</u> :</font></div>
<div id="bv_Text5" style="position:absolute;left:18px;top:49px;width:112px;height:24px;z-index:4" align="left">
<font style="font-size:21px" color="#000000" face="Arial"><u>Password</u> :</font></div>

</form>
</div>

Mossman · December 20, 2007

Hey im trying to convert my old html methods to the new CSS

But am having difficulty as my images are "on top" of the text so you can see the image but the text cannot be seen.... how do i correct this.. this is what i got:

I usually stick my images into div's on my CSS page. It means your html will be much neater too. I didn't understand if you were having problems with the image literally covering the text or just appearing below it on the page or something? I would insert my image like this:

#banner {
background-image:url(file:///C|/Documents and Settings/etc.jpg);
width: 800px;
height: 200px;
margin-left: 5px;
margin-top: 20px;
border: 1px #000 solid;
}

Then you could just call the image with <div id='banner'> and move it's position with different margins. You can then write over it with your text as well by putting it inside the image div

SirChick · December 20, 2007

Right so a div within a div will be "above" it... as in like using z-index etc

Mossman · December 20, 2007

Yea, that should do the trick.

Something like:

blah blah blah

</div>

ought to do it. It might not be the best solution but it works for me!

SirChick · December 20, 2007

So to position :

<div id="bv_" style="position:absolute;left:740px;top:164px;width:206px;height:448px" align="left">
<img src="menu_gradient.gif" id="Shape4" align="top" alt="" border="0" width="206" height="448"></div>

I just have to have:

width: 206px;
height: 448px;
margin-left: 740px;
margin-top: 164px;

in the css div for it?

Mossman · December 20, 2007

yea that should do it mate - obviously with the image included in the div as well (background-image:).

Sign In

[SOLVED] CSS noob here

Recommended Posts

SirChick

Link to comment

Share on other sites

phpQuestioner

Link to comment

Share on other sites

dbrimlow

Link to comment

Share on other sites

SirChick

Link to comment

Share on other sites

dbrimlow

Link to comment

Share on other sites

SirChick

Link to comment

Share on other sites

Mossman

Link to comment

Share on other sites

SirChick

Link to comment

Share on other sites

Mossman

Link to comment

Share on other sites

SirChick

Link to comment

Share on other sites

Mossman

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information