help with a margin setting (Full Version)

All Forums >> [Web Development] >> Cascading Style Sheets



Message

yb2 -> help with a margin setting (9/6/2006 18:11:23)

Hello cs sexperts[;)]

Wondering if you could help with this little annoyance in front of me. I have a horizontal list (thanks to Eric Meyer's horiz list), and Ive popped images into the list too. It looks quite cool at the mo, which is nice but I'd really like the image to be on top of the text, but instead it's displaying them inline.

<li><a href="#">
<img src="images/Events.gif" />Item four</a></li>


I've tried

#navlist img
{
border-style:none;
display:block;
}

but that just negates the display:inline use on the li's.

I've also tried several types of margin setting but to no avail. Any bright ideas? here's the full css.

body {
}
#navlist
{
padding: 3px 0;
margin-left: 0;
border-bottom: 1px solid #778;
font: bold 12px Verdana, sans-serif;
}
#navlist li
{
list-style: none;
margin: 0;
display: inline;
}

#navlist li a
{
padding: 3px 0.5em;
margin-left: 3px;
border: 1px solid #778;
border-bottom: none;
background: #DDE;
text-decoration: none;
}

#navlist li a:link { color: #448; }

#navlist li a:visited { color: #667; }

#navlist li a:hover
{
color: #000;
background: #AAE;
border-color: #227;
}

#navlist li a#current
{
background: white;
border-bottom: 1px solid white;
}

#navlist img
{
border-style:none;
margin: 0 1em 1em 2em;
}

and the html, the images are about 50x50

<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="#" id="current">
<img src="images/news.gif" />Item one</a></li>
<li><a href="#">
<img src="images/docs.gif" />Item two</a></li>
<li><a href="#">
<img src="images/big.gif" />Item three</a></li>
<li><a href="#">
<img src="images/Events.gif" />Item four</a></li>
<li><a href="#">
<img src="images/map.gif" />Item five</a></li>
<li><a href="#">
<img src="images/links.gif" />Item six</a></li>
<li><a href="#">
<img src="images/jobs.gif" />Item seven</a></li>
<li><a href="#">
<img src="images/info3.jpg" />Item eight</a></li>
</ul>
</div>




womble -> RE: help with a margin setting (9/6/2006 19:33:00)

I'm not quite sure I understand what you're trying to do...

...you've got your images on the left of the text, but you want them still on the left of the text but higher up? I'd add some bottom padding to the images. If you're wanting to move them up and across, you could try giving them a position: relative and shifting them however many pixels you want. You got a pic/example of what you're wanting it to look like?



yb2 -> RE: help with a margin setting (9/6/2006 19:53:32)

I want the image immediately above the text but still remain part of the list object. I'd prefer not to have to bother with positioning, that's a fiddle.

I'll sort out an image for you...



womble -> RE: help with a margin setting (9/6/2006 20:32:03)

[img]http://ecanus.net/smileys/coolup-blue.gif[/img]
Off to bed now (I've run out of coffee). I think I sort of get what you mean but I'm not sure (too long staring at the screen for anything to make sense)



c1sissy -> RE: help with a margin setting (9/6/2006 20:46:18)

You would be better of I believe, with a definition list to do this with.
Maybe something like
this?



yb2 -> RE: help with a margin setting (9/6/2006 21:12:17)

Ah yes! I will give it a go and let you know.

I'm a poet and don't I know it :)



c1sissy -> RE: help with a margin setting (9/7/2006 7:39:49)

quote:

ORIGINAL: yb2

Ah yes! I will give it a go and let you know.

I'm a poet and don't I know it :)

Your feet are long fellows also [:D]

The first technique that you used would have been ok, but there is sometimes a problem with getting it to go how you wish for it to go.

There is also another way of doing this as well, each photo could become its own div. So you could create the div just a bit larger then your photo, margin that photo with your styles, then you could add a paragraph and style that paragraph to be under the photo. Here is a site I am working on now,

You can see how the artists photos are all in a div, and the paragraph comes under the image. Then you can text align your paragraph so that it is center or left, then you can use margins to make sure that you get that paragraph where you want it to be.

as they say 6 of one half dozen of another. IMO I think the divs are a bit better myself as there is a bit more play with the styles then with a definition list.

Its up to the individual though. Some might feel an ul is better, a def list, or the divs.

Please, do post back and let us know how you make out. If you do decide to go with any of them and need assistance don't hesitate to post in here.

btw, let me know when you have viewed that link as I will need to remove it as it won't be there long under that name and won't leave dead links [;)]

<edit removed due to soon becoming a dead link>



womble -> RE: help with a margin setting (9/7/2006 8:14:25)

CSSPlay's always a good place to check out for techniques for navigation as well.



yb2 -> RE: help with a margin setting (9/7/2006 13:08:56)

Thanks for the link C1sissy, I see what you mean.

I'll have a go at this tomorrow, didn't sleep last night and been at a meeting all day... want to sleep but going out now, on my last legs.

I appreciate the help, and when I get it done I shall post a link and let you marvel at my/your/our wonderful creation! :)



c1sissy -> RE: help with a margin setting (9/7/2006 13:35:49)

LOL!
Good luck and get some sleep.



dave52jones -> Web Designer for Platinum Television Group (9/11/2006 13:48:43)

The advice already given in this forum was excellant, but I thought that I could add an additional suggestion which may be helpful if I understand your problem correctly.

Maybe this will be too much work, but you could use tables mixed with absolute positioning. For example:

<table>
<tr>
<td style="width:280px;padding:10px;">
<img src="imagelocation" style="padding-top:100px;" />
</td>

<td style="width:280px;padding:10px;">
<img src="imagelocation" style="padding-top:100px;" />
</td>

<td style="width:280px;padding:10px;">
<img src="imagelocation" style="padding-top:100px;" />
</td>

</tr>

<!-- the image has a white space of 100px at the top -->

<p style="position:absolute; top:10px;left:20px; width:260px;">Put the text here. It will wrap automatically.</p>

Maybe my suggestion is too much work, but I think it's always good to understand your options even if you don't plan to use all of them.


Platinum Television Group



c1sissy -> RE: Web Designer for Platinum Television Group (9/26/2006 14:58:22)

quote:

ORIGINAL: dave52jones

The advice already given in this forum was excellant, but I thought that I could add an additional suggestion which may be helpful if I understand your problem correctly.

Maybe this will be too much work, but you could use tables mixed with absolute positioning. For example:




The idea of css dave52jones is to seperate content from presentation. Images are for presentation,. Why would I put them into a table?



Page: [1]

Valid CSS!




Forum Software © ASPPlayground.NET Advanced Edition 2.4.5 ANSI
0.078125