homepage Welcome to WebmasterWorld Guest from 54.226.147.84
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
List To The Left, Image To The Right
Foxhole



 
Msg#: 4119512 posted 5:19 pm on Apr 21, 2010 (gmt 0)

Hi again all,

Just hoping someone out there is able to help me, I have been struggling again with a very basic thing and I can't understand where I'm going wrong.

Basically I have a fixed width (960px) white background on my web page, I have a bullet point list positioned to the left, and I want to display my image over on the right inline with it.

I can position the image over to the right but it always goes underneath the list. I have tried putting these together in a division but it did'nt seem to work, I'm not too sure if that is the right approach anyway.

I would be very grateful if someone can help,

Here is the code:

HTML:

<ul>
<li>Custom Website Design And Redesign</li>
<li>Logo Design</li>
<li>Domain Name Registration</li>
<li>Website Hosting</li>
<li>On-Site Photography</li>
<li>Content Control And Management</li>
<li>Customer Support</li>

</ul>

<img id="pricestar" src="kwd_graphics/pricefromsign.png" alt="pricefromsign" />




CSS:

li {
font-family: century gothic, tahoma;
color: #464646;
font-size: 14px;
line-height: 18px;
text-align: left;
padding: 0 0 0 0;
margin: 0 0 0 0;
clear: right;
}

#pricestar {
display: inline;
margin-left: auto;
margin-right: 30px;
padding: 20px 0 20px 0;
float: right;
}



Don't be fooled by the list items, i'm no web designer! Just trying to learn.

Thanks for your help all,

Foxhole

 

webeno



 
Msg#: 4119512 posted 9:38 pm on Apr 21, 2010 (gmt 0)

then i suggest you learn how to wrap other divs and also the float property ;)

i would simply setup 3 divs, one that wraps the list items, another one that wraps the image and a 3rd one that wraps the whole thing. make sure the width of the wrapper div is always the same or more than the sum of the 2 "sub-wraps".

HTML:

<div id="wrapper">
<div id="lister">
<ul>
<li>Custom Website Design And Redesign</li>
<li>Logo Design</li>
<li>Domain Name Registration</li>
<li>Website Hosting</li>
<li>On-Site Photography</li>
<li>Content Control And Management</li>
<li>Customer Support</li>
</ul>
</div>

<div id="rightpic">
<img src="kwd_graphics/pricefromsign.png" alt="pricefromsign" />
</div>
</div>


CSS:

li {
font-family: century gothic, tahoma;
color: #464646;
font-size: 14px;
line-height: 18px;
text-align: left;
padding: 0;
margin: 0;
}

#wrapper {
width: 600px
}

#lister {
width: 400px;
float: left;
}

#rightpic {
display: inline;
margin-left: auto;
margin-right: 30px;
padding: 20px 0 20px 0;
width: 200px;
float: right;
}


alternatively you can simply leave out the lister and rightpic selectors and setup the wrapper selector width your image as background to the right and set it's with to big enough not to overlap into the text on the left.

HTML:

<div id="wrapper">
<ul>
<li>Custom Website Design And Redesign</li>
<li>Logo Design</li>
<li>Domain Name Registration</li>
<li>Website Hosting</li>
<li>On-Site Photography</li>
<li>Content Control And Management</li>
<li>Customer Support</li>
</ul>
</div>


CSS:

li {
font-family: century gothic, tahoma;
color: #464646;
font-size: 14px;
line-height: 18px;
text-align: left;
padding: 0;
margin: 0;
}

#wrapper {
width: 600px;
background: url(kwd_graphics/pricefromsign.png) no-repeat right
}


not entirely sure why you used clear: right; styling the list, also if your padding and margin is 0, you don't have to set all 4 sides, but it's enough to set it once, like margin: 0; paddig 0;

rocknbil

WebmasterWorld Senior Member rocknbil us a WebmasterWorld Top Contributor of All Time 5+ Year Member



 
Msg#: 4119512 posted 4:03 am on Apr 22, 2010 (gmt 0)

Welcome aboard Foxhole, when you float an element, it needs something to float around. To see "what's really going on" with your float as is, put a border on ul, it will become evident:

ul { border: 1px solid #000; }

You may need a width on the list, but the solution will be to put the image pricestar before the list in the source code, it should work, like

<img>
<ul>
...
</ul>

Also take display:inline off pricestar, what you probably want is display:block (or nothing at all.)

If you need to leave it where it is, float the list left, but you may still have to put a width on both elements.

You don't need clear on list items, clear has the basic effect of insuring any items following it will be forced below the clearing element (in most cases.)

Foxhole



 
Msg#: 4119512 posted 6:13 pm on Apr 22, 2010 (gmt 0)

Thanks you both for your help, it is really appreciated. It makes a lot more sense now you have explained it in simple terms.

I have been reading through a book I have, specifically on the chapter regarding positioning images and after about three or four readthroughs, it still didn't make sense!

Thanks again,

Foxhole

hbmehta



 
Msg#: 4119512 posted 1:37 pm on Apr 29, 2010 (gmt 0)

webeno's first solution should fix the problem. Just want to add something to it. Margin-right to rightPic was giving problem. Remove it. It should show both in one line.

Foxhole



 
Msg#: 4119512 posted 2:00 pm on Apr 30, 2010 (gmt 0)

Thanks Hbmehta,

All sorted, just reading how they explained the resolution to this problem gave me a much better understanding how this works so I was able to put it right.

seems so simple now but was sending me nuts before!

Thanks again all,

Foxhole

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved