2 replies [Last post]
j4mes_bond25
Offline
Regular
Leicester, UK
Last seen: 15 years 42 weeks ago
Leicester, UK
Joined: 2006-04-08
Posts: 20
Points: 0

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:

#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:

/* 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;
}

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 9 years 18 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

[Solved] CSS - space between &quot;li&quot; ???

Floats require special treatment when you use them. In your case, you should use clear on the following <LI> elements to ensure it starts the floated image within the previous <LI>.

e.g.

#content ul li {
  clear: both;
}

You may want to make the image the first element in each list item. That way the text will be all line up next to the image.

j4mes_bond25
Offline
Regular
Leicester, UK
Last seen: 15 years 42 weeks ago
Leicester, UK
Joined: 2006-04-08
Posts: 20
Points: 0

[Solved] CSS - space between &quot;li&quot; ???

Chris..S wrote:
Floats require special treatment when you use them. In your case, you should use clear on the following <LI> elements to ensure it starts the floated image within the previous <LI>.

e.g.

#content ul li {
  clear: both;
}

You may want to make the image the first element in each list item. That way the text will be all line up next to the image.

Fantastic.

It works perfectly well now. So the next stage would be to get rid of BUSLOADS of <br /> that I've between "li" at the moment.

Thanks for your time & help. Much appreciated.