Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Chris Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

How to place lists side by side inside a div

Status
Not open for further replies.
waydown

waydown

Programmer
Apr 27, 2009
49
GB
Hi,
I want to place firstly an image and then three lists side
by side in a div. It is to act as a footer to a web page. What would be the best way to do this? I have made some kind of an attempt. The first list appears after the image but then the positioning gets lost. I am not using position:absolute to avoid resizing problems. Here is the code:
<head>
<style type="text/css">
body
{ text-align: center;
min-width: 1044px;
margin: 0px 0px;
padding: 0px;
font-family: arial;
}
#wrapper
{ position: relative;
text-align: left;
width: 1044px;
height: 100%;
margin: 0 auto;
}
#lower-block
{ width: 1010px;
height: 170px;
border-style: dotted;
border-width: 1px;
}
#first-list
{ margin-left:262px;
padding-left: 50px;
width:190px;
height:130px;
}
#first-list li a
{ font-family:arial, verdana, sans-serif;
font-size: 11px;
text-decoration: none;
color: #494B3E;
}
#first-list li a:hover
{ text-decoration: underline;
}
.bullet
{ list-style-image: url(arrow_85.gif);
}

</style>
</head>

<body>
<div id="wrapper">
<div id="lower-block" style="background-color:#FFDEAD;">
<a href="#">
<img style="float:left;margin-left:11px;
border-right:1px dotted;padding:0px 15px 0px 12px;"
alt="" src="" width="223" height="147" />
</a>
<ul id="first-list">
<li style="list-style-type:none;font-size:17px;
font-weight:bold;color:blue">This company<br></li>
<li class="bullet"><a href="#">Another Site</a></li>
<li class="bullet"><a href="#">Jobs With Us</a></li>
<li class="bullet"><a href="#">Regional</a></li>
<li class="bullet"><a href="#">Advertisement</a></li>
<li class="bullet"><a href="#">Charity Donor</a></li>
</ul>
<ul id="first-list" style="margin:0px 0px 0px 580px;">
<li style="list-style-type:none;font-size:17px;
font-weight:bold;color:blue">This company<br></li>
<li class="bullet"><a href="#">Another Site</a></li>
<li class="bullet"><a href="#">Jobs With Us</a></li>
<li class="bullet"><a href="#">Regional</a></li>
<li class="bullet"><a href="#">Advertisement</a></li>
<li class="bullet"><a href="#">Charity Donor</a></li>
</ul>
<ul id="first-list" style="margin:0px 0px 0px 580px;">
<li style="list-style-type:none;font-size:17px;
font-weight:bold;color:blue">This company<br></li>
<li class="bullet"><a href="#">Another Site</a></li>
<li class="bullet"><a href="#">Jobs With Us</a></li>
<li class="bullet"><a href="#">Regional</a></li>
<li class="bullet"><a href="#">Advertisement</a></li>
<li class="bullet"><a href="#">Charity Donor</a></li>
</ul>
</div>

</div> <!--4 wrapper-->

</body>

</html>

I would be grateful for all help.
 
Sort by date Sort by votes
Loose those weird 580px margins, and simply float the lists.


Code: 
<div id="wrapper" style="overflow:auto;">
  <div id="lower-block" style="background-color:#FFDEAD;">
    <a href="#">
      <img style="float:left; margin-left:11px;
         border-right:1px dotted;padding:0px 0px 0px 0px;"
         alt="" src="" width="223" height="147" />
    </a>
    <ul id="first-list" style="margin:0px 0px 0px 0px; float:left;">
      <li style="list-style-type:none;font-size:17px;
        font-weight:bold;color:blue">This company<br></li>
      <li class="bullet"><a href="#">Another Site</a></li>
      <li class="bullet"><a href="#">Jobs With Us</a></li>
      <li class="bullet"><a href="#">Regional</a></li>
      <li class="bullet"><a href="#">Advertisement</a></li>
      <li class="bullet"><a href="#">Charity Donor</a></li>
    </ul>
    <ul id="second-list" style="float:left; margin:0px 0px 0px 0px;">
      <li style="list-style-type:none;font-size:17px;
        font-weight:bold;color:blue">This company<br></li>
      <li class="bullet"><a href="#">Another Site</a></li>
      <li class="bullet"><a href="#">Jobs With Us</a></li>
      <li class="bullet"><a href="#">Regional</a></li>
      <li class="bullet"><a href="#">Advertisement</a></li>
      <li class="bullet"><a href="#">Charity Donor</a></li>
    </ul>
    <ul id="third-list" style="float:left; margin:0px 0px 0px 0px;">
      <li style="list-style-type:none;font-size:17px;
        font-weight:bold;color:blue">This company<br></li>
      <li class="bullet"><a href="#">Another Site</a></li>
      <li class="bullet"><a href="#">Jobs With Us</a></li>
      <li class="bullet"><a href="#">Regional</a></li>
      <li class="bullet"><a href="#">Advertisement</a></li>
      <li class="bullet"><a href="#">Charity Donor</a></li>
    </ul>
  </div>
</div>

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Behind the Web, Tips and Tricks for Web Development.
 
Upvote 0 Downvote
Be aware that your markup is invalid for many reasons:

- There is no opening <html> tag. While most browsers might forgive this, some might not, and you should have it to keep your markup well-formed.

- There is no DOCTYPE. While not invalid per se, it means that:

a) IE (and possibly other browsers) will display in "quirks mode" - meaning more work for you to get consistency across all browsers, and

b) Your code won't validate as no validator will know what DOCTYPE to validate it against.

I'd advise using either the XHTML strict or transitional DOCTYPEs, perhaps transitional might be best given that I don't know what else you intend for your page / site.

- You have duplicate ID attributes. IDs should be unique per page. I'm guessing this is an oversight / copy/paste error, as you seem to know about classes.

Anyway - this would be my refactor:

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml"[/URL] xml:lang="en" lang="en">
<head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
	<meta http-equiv="content-language" content="en" />

	<title>My page</title>

	<style type="text/css">
		body {
			text-align: center;
			min-width: 1044px;
			margin: 0px;
			padding: 0px;
			font-family: arial;
		}
		#wrapper {
			position: relative;
			text-align: left;
			width: 1044px;
			height: 100%;
			margin: 0px auto;
		}
		#lower-block {
			width: 1010px;
			height: 170px;
			border-style: dotted;
			border-width: 1px;
			background-color: #FFDEAD;
		}
		#lower-block > a > img {
			float: left;
			margin: 0px 26px 0px 11px;
			border-right: 1px dotted;
			padding: 0px 15px 0px 12px;
		}
		.arrowList {
			margin-left: 0px;
			padding-left: 50px;
			width: 190px;
			height: 130px;
			float: left;
		}
		.arrowList li {
			list-style-image: url(arrow_85.gif);
		}
		.arrowList li.noArrow {
			list-style-image: none;
			font-size: 17px;
			font-weight: bold;
			color: blue;
		}
		.arrowList li a {
			font-family: arial, verdana, sans-serif;
			font-size: 11px;
			text-decoration: none;
			color: #494B3E;
		}
		.arrowList li a:hover {
			text-decoration: underline;
		}
	</style>
</head>

<body>
	<div id="wrapper">
		<div id="lower-block">
			<a href="#">
				<img alt="" src="" width="223" height="147" />
			</a>
			<ul class="arrowList">
				<li class="noArrow">This company</li>
				<li><a href="#">Another Site</a></li>
				<li><a href="#">Jobs With Us</a></li>
				<li><a href="#">Regional</a></li>
				<li><a href="#">Advertisement</a></li>
				<li><a href="#">Charity Donor</a></li>
			</ul>
			<ul class="arrowList">
				<li class="noArrow">This company</li>
				<li><a href="#">Another Site</a></li>
				<li><a href="#">Jobs With Us</a></li>
				<li><a href="#">Regional</a></li>
				<li><a href="#">Advertisement</a></li>
				<li><a href="#">Charity Donor</a></li>
			</ul>
			<ul class="arrowList">
				<li class="noArrow">This company</li>
				<li><a href="#">Another Site</a></li>
				<li><a href="#">Jobs With Us</a></li>
				<li><a href="#">Regional</a></li>
				<li><a href="#">Advertisement</a></li>
				<li><a href="#">Charity Donor</a></li>
			</ul>
		</div>
	</div>
</body>

</html>

Apart from the points I mentioned above, I've also moved most of the inline styles into the CSS block. Unless you really need them inline (for specificity reasons, or if your content is dynamically generated), I'd keep them with the CSS.

Note: I've used the child selector (>) to address the <img>... IE 6 doesn't understand this, so if IE 6 is one of your target browsers then you'll need to give the <img> an ID / class and modify the selector accordingly.

Other changed I made were:

- Given it was on more <li> elements than not, I dispensed with the class of "bullet" and added a class of "arrowList" to the <ul> element instead, and then added a class of "noArrow" the the first in each list.

- Removed the unnecessary <br> elements from the initial <li> elements - they simply didn't have any effect, and if you want to add spacing under the title, you can style the bottom margin on li.noArrow.

- Removed the ID from the first <ul>, as I'm guessing you only had it in place to set its margin differently. So instead of putting the margin on the <ul>, I put it on the anchor instead. This means all of the lists share common styling now.

Hope this helps,

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:
Code Couch Snippets & Info:
The Out Atheism Campaign
 
Upvote 0 Downvote
Hi,
Many thanks for the replies. Dan I've used your solution but I've just one problem which I can't overcome. For the code:
.arrowList li.noArrow {
list-style-image: none;
list-style-type: none;
font-size: 17px;
font-weight: bold;
color: blue;
margin-bottom: 3px;
margin-right: 10px;
}
I've added list-style-type:none; to get rid of the default bullet but it leaves an indentation. What I really want to do is to give the appearance that the first item in the list is a kind of heading in which case the first character has to be in the same vertical line as the images on the left. But I can't get that to happen. I've tried using margin-right to force the item to move left but that does not work. It works for margin-bottom, as suggested by you, to create a gap between the first list item and the others. I wonder if you could suggest something. Again many thanks for your help.
 
Upvote 0 Downvote
Adding the following should push your list item text to the left where the list item image/type would normally be:

Code: 
list-style-position:inside;

HTH,
Larry
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

bdwilcox
  • Locked
  • Question
More efficient / manageable way to code this HTA w/ VBScript?
Replies
0
Views
508
bdwilcox
bdwilcox
scorney
  • Locked
  • Question
background image with overlay which Hover when over a specific Area/Form
Replies
1
Views
516
3esolar
3
Mike Lewis
  • Locked
  • Question
How to refresh a Javascript file in the browser's cache?
Replies
4
Views
890
Mike Lewis
Mike Lewis
Alt255
  • Locked
  • Question
Searching for a string that contains brackets
Replies
0
Views
155
Alt255
Alt255
soni21
  • Locked
  • Question
JavaScript String to Number Conversion in HTML: Seeking Clarification
Replies
4
Views
1K
Chris Miller
Chris Miller

Part and Inventory Search

Sponsor

Back
Top