CSS - space between "li" ???

j4mes_bond25 · #1 May 8th, 2006, 18:10

Is there any way, I could AUTOMATICALLY have "space" between two "li" i.e. each new "li" should start from a fresh line.

I think "margin" should be the best bet, but I'm afraid that's not working, as you can see from the code.

Earlier, I was merely using MANY <br /> until the new "li" pushes down & starts on new page, but that time-consuming to do on every single pages & beside, it gets displayed differently on different resolution window (sometime it shows perfect, but sometimes it has TOO MUCH space between two "li")

I've got rid of all the <br /> between "li" in the Drinkware heading of "Alcohol.html" page on: http://homepage.ntlworld.com/darsh25/alcohol.html

Now you can see that all the "li" are over-lapping each other. This ONLY happen when there's an image within the "li" (but if it's ONLY text, then the new "li" always starts on the fresh line).

All the "li" related coding (along with "img" that's WITHIN these "li" are:

Code: Select all

#content ul
{
    font-family:Verdana, Arial, Helvetica, sans-serif;
    text-align:left;
    color:black;
    margin:20px 30px;
    list-style-image:url(list_icon.gif);
}

#content ul li
{
    margin:20px;
}


/* ............................... IMAGES WITHIN "li" ............................. */

#content img.left
{
    float:left;
    padding:10px;
}

#content img.right
{
    float:right;
    padding:10px;
}

Entire Stylesheet is:

Code: Select all

/* CSS Document */

body 
{
    background-image:url(background.jpg);
    background-attachment:fixed;
}

/* ........................................ Banner ........................................ */

#banner
{
    width:100%;
    height:100px;
    text-align:center;
}


/* ......................................... Top Menu .................................... */

#topMenu
{
    background-color:transparent;
    cursor:default;
    text-align:center;
    width:980px;
    float:right;
}

#topMenu ul
{
    list-style: none;
    font-size:medium;
    float:right;
    position:relative;
    margin-left: 130px;
    width:850px;
    padding: 0;
}

#topMenu ul li 
{
    display: inline;
    border:1px solid black;
    width:210px;
    background-color:white;
    color:#FF00FF;
    float:left;
    position: relative;
    font-size:large;
}

#topMenu ul li:hover
{
    background-color:black;
}

#topMenu a
{
    display:block;
    text-decoration:none; 
    font-size:larger;
    color:red; 
}

#topMenu a:hover
{
    color:white;
    text-transform:uppercase;
}

/* ....................................... Left Menu .......................................... */

#leftMenu
{
    background-color:transparent;
    cursor:default;
    text-align:center;
    width:100px;
    float:left;
}

#leftMenu ul
{
    text-align:center;
    list-style:none;
    margin:0px;
    position:relative;
    padding:0px;
    width:120px;
    border:thin solid red;
    border-bottom:0px;
}

#leftMenu ul li
{
    display: block;
    background-color:white;
    width:120px;
    border-bottom:thin solid red;
    color:purple;
    position: relative;
    font-size:large;
    line-height:50px; 
}

#leftMenu ul li:hover
{
    color:black;
    background-color:yellow;
    text-transform:uppercase;
}

#leftMenu ul li ul 
{
    position:absolute;
    display: none;
    text-transform:none;
    left:120px;
    width:123px;
    top:0px;
}

#leftMenu ul li ul a
{
    display:block;
    position:relative;
    text-decoration:none; 
    background-color:white;
    line-height:20px; 
    font-size:large;
    width:123px;
    color:green;
    text-transform:none;
}

#leftMenu ul li ul a:hover
{
    color:#00FFFF;
    background-color:black;
}

#leftMenu ul li ul {display:none;}
#leftMenu ul li:hover ul {display:block;}


/* This Code is for Microsoft Internet Explorer Browser 
to it shows the effect of "li:hover" */

body { behavior: url(csshover.htc); }


/* ................................... Content ................................................ */

#content
{
    background-color:white;
    width:850px; 
    border:1px solid green;
    float:right;
    border-bottom:none;
}

#content h2
{
    font-family:"Times New Roman", Times, serif;
    text-align:justify;
    margin:30px;
    color:#990033;
    text-decoration:underline;
}

#content h3
{
    font-family:Georgia, "Times New Roman", Times, serif;
    text-align:left;
    font-size:large;
    margin:30px;
    color:blue;
    text-decoration:none;
}

#content h4
{
    font-family:"Courier New", Courier, monospace;
    text-align:left;
    font-size:large;
    color:red;
    margin:30px;
    text-decoration:none;
}

#content h5
{
    font-family:"Courier New", Courier, monospace;
    text-align:left;
    font-size:large;
    color:fuchsia;
    margin:30px;
    text-decoration:none;
}

#content h6
{
    font-family:"Courier New", Courier, monospace;
    text-align:left;
    font-size:medium;
    color:black;
    margin:30px;
    text-decoration:underline;
}

#content p
{
    font-family:Verdana, Arial, Helvetica, sans-serif;
    text-align:justify;
    margin:20px 30px;
    color:black;
}

#content p.first-letter:first-letter
{
    color:red;
    margin-left:20px;
    font-size:xx-large;
}

#content ul
{
    font-family:Verdana, Arial, Helvetica, sans-serif;
    text-align:left;
    color:black;
    margin:20px 30px;
    list-style-image:url(list_icon.gif);
}

#content ul li
{
    margin:20px;
}

#content ol
{
    font-family:Verdana, Arial, Helvetica, sans-serif;
    text-align:justify;
    color:black;
    margin:20px 30px;
    list-style-type:decimal;
}

#content ol li
{
    margin:20px;
}

#content img.left
{
    float:left;
    padding:10px;
}

#content img.right
{
    float:right;
    padding:10px;
}

#content ul li a
{
    font-family:Verdana, Arial, Helvetica, sans-serif;
    text-align:justify;
    color:black;
    text-decoration:none;
}

#content ul li a:hover
{
    color:red;
    background-color:yellow;
    font-weight:bold;
}

#content ul a:active
{
    color:blue;
    font-weight:bold;
}

#content ul a:visited
{
    color:grey;
}

/* ................................... Other Class ......................................... */

.boldText
{
    font-family:Verdana, Arial, Helvetica, sans-serif;
    text-align:justify;
    color:black;
    font-weight:bold;
}

.italicText
{
    font-family:Verdana, Arial, Helvetica, sans-serif;
    text-align:justify;
    color:black;
    font-style:italic;
}

.underlineText
{
    font-family:Verdana, Arial, Helvetica, sans-serif;
    text-align:justify;
    color:black;
    text-decoration:underline;
}

.centerTop img
{
    text-align:center;
    border:0px;
}

/* ................................... Table ......................................... */

.table
{
    background-color:black;
    border-style:outset;
    border-width:thick;
    border-spacing:20px;
    margin:30px 30px;
    font-family:Georgia, "Times New Roman", Times, serif;
    text-align:center;
}

.table:hover
{
    border-style:inset;
    border-width:thick;
}

.tr
{
    border:1px solid red;
}

.th
{
    border:1px solid yellow;
    color:fuchsia;
}

.td
{
    border:1px solid red;
    font-size:medium;
    color:yellow;
}

/* ................................... Bottom Menu ......................................... */


#bottomMenu
{
    border:1px solid red;
    float:left;
    background-color:black;
    color:#FFFFFF;
    text-align:center;
    font-family:"Times New Roman", Times, serif;
    font-style:italic;
    font-size:large;
    width:100%; 
    height:5%; 
    margin:0px;
}

Rob · #2 May 8th, 2006, 18:57

When floating LI elements, you would need to use display:block in the LI CSS

If you get stuck, post a URL

masonbarge · #3 May 8th, 2006, 19:13

Code: Select all

li {padding: 20px 0 0 0;}

j4mes_bond25 · #4 May 8th, 2006, 20:09

Quote:

Originally Posted by Rob

When floating LI elements, you would need to use display:block in the LI CSS

If you get stuck, post a URL

I'm terribly sorry but sadly, even trying "display:block" didn't work, I'm afraid, since it still overlapped, however, while delving into it, I managed to get it sorted out now using:

clear:both;

Code: Select all

#content ul li
{
    margin:20px;
    clear:both;
}

as you can see, it being seen perfectly well on: homepage.ntlworld.com/darsh25/alcohol.html

Thanks for your time & help, in the mean time. Much appreciated.

Rob · #5 May 8th, 2006, 20:13

yeah.... that'll work

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Creating a "tag" system to find relevant "related" pages	MrQuestions	PHP Forum	3	Mar 20th, 2008 23:06
[SOLVED] Show "Image" Depends On User "Status"?	Monie	Classic ASP	6	Oct 16th, 2007 01:22
? IS "meta name="robots" content="?" necessary in pages ?	Love2Java	Starting Out	6	Aug 8th, 2007 13:48
window.opener.document["nameForm"].getElementById("someid").value; doesnt work	drpompeii	JavaScript Forum	0	Feb 17th, 2007 23:09
<option value="yes" class="x"> problem in Firefox	mameha1977	Web Page Design	1	Jun 21st, 2006 11:20

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
CSS - space between "li" ???