|
| |
|
|
yb2
Posts: 653
Joined: 1/30/2006
Status: offline
 |
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>
_____________________________
it is natural for people not to see one's own faults, and to exaggerate other people's faults and failings.
Currently listening to: L'Enfer Des Formes by Stereolab
|
|
|
|
yb2
Posts: 653
Joined: 1/30/2006
Status: offline
|
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...
_____________________________
it is natural for people not to see one's own faults, and to exaggerate other people's faults and failings.
Currently listening to: L'Enfer Des Formes by Stereolab
| |
|
|
|
yb2
Posts: 653
Joined: 1/30/2006
Status: offline
|
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 :)
_____________________________
it is natural for people not to see one's own faults, and to exaggerate other people's faults and failings.
Currently listening to: L'Enfer Des Formes by Stereolab
| |
|
|
|
c1sissy
Posts: 5079
Joined: 7/20/2002
From: NJ
Status: offline
|
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 
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>
< Message edited by c1sissy -- 9/26/2006 14:55:54 >
_____________________________
Deb-aka-c4Ksissy
high panjandurum and alpha female of the silverback tribe
As decreed by Jesper 5-24-2003.
The only stupid question is... the one that is never asked!!
http://directory.css-styling.com
http://fmsforum.com
http://positioniseverything.net/
http://www.tanfa.co.uk/
| |
|
|
|
yb2
Posts: 653
Joined: 1/30/2006
Status: offline
|
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! :)
_____________________________
it is natural for people not to see one's own faults, and to exaggerate other people's faults and failings.
Currently listening to: L'Enfer Des Formes by Stereolab
| |
|
|
|
dave52jones
Posts: 1
Joined: 9/11/2006
Status: offline
|
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
Posts: 5079
Joined: 7/20/2002
From: NJ
Status: offline
|
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?
_____________________________
Deb-aka-c4Ksissy
high panjandurum and alpha female of the silverback tribe
As decreed by Jesper 5-24-2003.
The only stupid question is... the one that is never asked!!
http://directory.css-styling.com
http://fmsforum.com
http://positioniseverything.net/
http://www.tanfa.co.uk/
| |
|
 New Messages |
 No New Messages |
 Hot Topic w/ New Messages |
 Hot Topic w/o New Messages |
 Locked w/ New Messages |
 Locked w/o New Messages |
|
Post New Thread
Reply to Message
Post New Poll
Submit Vote
Delete My Own Post
Delete My Own Thread
Rate Posts
|
|
|
Printable Version 
