PDA

View Full Version : CSS help please



Jamcojay
Jan 20th, 2007, 06:21 AM
I am trying to learn by going through some example pages but I am a bit stuck.

This is the index.html part I am stuck on


<div id="clear"><div>
<img src="images/pic_1.jpg" width="623" height="254" alt="Pic 1">
</div>
</div>
<div id="search-news">
</div>

The search-news is suppose to line up in a column at the same height as the image but for some reason it wants to go below the image. I looked at the CSS page but I am stumped on how to make it line up on the right of the image. here is the css code I believe pertains to the above code.


#photo {
float: left;
width: 624px;
}
#photo div {
border: 1px solid #D8D8D8;
padding: 2px;
}
#photo img {
display: block;
}

#search-news {
float: right;
width: 140px;
}
#search-news div {
padding: 3px 0;
margin: 0;
}
#search-news #q {
width: 140px;
border: 1px solid #859D31;
}
#search-news .downcast {
background: #E6E7E7;
border-top: 1px solid #CFD0D0;
padding: 3px 4px 4px 4px;
margin: 2px 0 0 0;
}
#search-news h3 {
background: url(images/bullet_letter.gif) no-repeat;
padding-left: 15px;
font-weight: bold;
margin: 1em 0 0.4em 0;
}
#search-news p {
padding-left: 15px;
padding-right: 2px;
margin: 0.1em 0;
}
a {
font-weight: bold;
color: #5C5C5C;
}

#body {
padding-top: 2em;
text-align: justify;
}


Thank you for any help.

koyama
Jan 20th, 2007, 11:12 AM
Your css that involves #photo won't be doing anything unless you put in id="photo" in your <div> containing your image.

Tip when making columnar layout: either use left float OR right float. You might be having trouble with IE if you use both.

Jamcojay
Jan 20th, 2007, 03:23 PM
Thank you I fixed it.

Do you have any idea how I can insert a search form to the right of the picture. Right now everytime I try to put it in it wants to go to the bottom of the picture.

koyama
Jan 20th, 2007, 03:35 PM
Like 3 columns? Just add another div in a similar fashion and float it. Not really sure what you mean.

You'll have to explain better what you want or post some code explaining what the problem is.

Jamcojay
Jan 20th, 2007, 04:08 PM
http://www.imageforemp.com/temp/files/1/example.jpg




The code that represents the above picture is in my first post. Please be a little descriptive I am at a bit of a learning curve.

koyama
Jan 20th, 2007, 04:18 PM
Appears that the float was dropped so something is probably too wide. But I cannot see your #serach-news on your screenshot?

Probably you have to upload to some server and post a link so we can see it live.

Jamcojay
Jan 22nd, 2007, 12:31 AM
It took me a few but I figured it out thx for your help...