...

View Full Version : horizontal placement of links within main div



jg2008
11-25-2008, 01:55 AM
Hi,
I am trying to horizontally arrange a few groups of multiple links within the main div of a web page.

Right now I have the links organized into a table but I would like to find a better way to arrange the three groups of data horizontally. Could I achieve this effect by nesting divs? I have tried to nest divs but end up with a vertical list. I would like to avoid organizing the links as a vertical list.

I am new to css and xhtml and would really appreciate any help or suggestions about the code that would allow me to do this. I have copied the xhtml code below. Thanks.

[<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Sample Page
</title>
<link rel="stylesheet" type="text/css" href="cssfile.html" />
</head>

<body>
<div id="wrapper">
<div id="header">

<table class= "name2">
<tr>
<td class="name1">&nbsp;&nbsp;&nbsp;</td>
<td style="background-color:#2e9fa1;">&nbsp;</td>
</tr>

<tr>
<td style="background-color:#2e9fa1;">&nbsp;</td>
<td class="name">Name</td>
</tr>
</table>

</div>

<div id="navbararea"><!--Navigation bar begins-->

<div id="navbar">
<ul>
<li><a href=#>Link</a></li>
<li><a href=#>Link</a></li>
<li><a href=#>Link</a></li>
<li><a href=#>Link</a></li>
<li><a href=#>Link</a></li>
<li><a href=#>Link</a></li>
</ul>
</div>
<br />

<h2>Page Name</h2>
</div><!--Navigation bar ends-->

<div id="sidebar"><!--Sidebar begins-->
<br />
<br />
<div style="width:110px; height:250px; padding: 2px; border: thick outset #CCCC99;">
<p class="boldtext"><span style="text-decoration:underline">Notes</span></p>
<p class="sidetext"><br />Notes.<br /><br />Notes.<br /><br /></p>
</div>
</div><!--Sidebar ends-->

<div id="main"><!--Main content area begins-->
<p class="boldtext">Welcome!</p><br />
<p class="text">written text here. written text here. written text here.written text here.</p>
<br />
<br />
<br />
<hr />
<br />
<br />
<table style= "width: 90%">
<tr>
<td class="maintitle">Title 1<br /><br />
<a href="#" class="normal">Link</a><br />
<a href="#" class="normal">Link</a><br />
<a href="#" class="normal">Link</a><br />
</td>

<td class="maintitle">Title 2<br /><br />
<a href="#" class="normal">Link</a><br />
<a href="#" class="normal">Link</a><br />
<a href="#" class="normal">Link</a><br />
<a href="#" class="normal">Link</a><br />
<a href="#" class="normal">Link</a><br />
<a href="#" class="normal">Link</a><br />
</td>

<td class="maintitle">Title 3<br /><br />
<a href="#" class="normal">Link</a><br />
<a href="#" class="normal">Link</a><br />
<a href="#" class="normal">Link</a><br />
<a href="#" class="normal">Link</a><br />
<a href="#" class="normal">Link</a><br />
<a href="#" class="normal">Link</a><br />
<a href="#" class="normal">Link</a><br />
<a href="#" class="normal">Link</a><br />
<a href="#" class="normal">Link</a></td>
</tr>
</table>
<br />
</div><!--End of main content area-->

<div id="footer"><!--Footer begins-->
<hr />
<div id="footermenu">
<ul>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#" >Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul><br style="clear: left" />
</div>
<br />

<p class="copy"> 2008 Name</p>
<br />
</div><!--Footer ends-->
<br />
</div>
</body>
</html>]

GardenGnome2
11-25-2008, 02:12 AM
Does this help?


<style type="text/css">
#div ul {
list-style-type:none;
}

#div li {
display:inline;
}

#div li a {
}
</style>

<div id="div">
<ul>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>

Excavator
11-25-2008, 03:39 AM
Hello jg2008,
It's probably ok to just have links there. Style them with a class but don't put them in a div or a list...
Like this maybe?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Sample Page</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#main {
width: 100%;
}
#left {
width: 33%;
float: left;
background: #993;
}
#right {
width: 33%;
float: right;
background: #F60;
}
#center {
margin: 0 0 0 33%;
background: #0C6;
}
.normal_new {
display: inline;
padding: 2px 8px;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">

<table class= "name2">
<tr>
<td class="name1">&nbsp;&nbsp;&nbsp;</td>
<td style="background-color:#2e9fa1;">&nbsp;</td>
</tr>

<tr>
<td style="background-color:#2e9fa1;">&nbsp;</td>
<td class="name">Name</td>
</tr>
</table>

</div>

<div id="navbararea"><!--Navigation bar begins-->

<div id="navbar">
<ul>
<li><a href=#>Link</a></li>
<li><a href=#>Link</a></li>
<li><a href=#>Link</a></li>
<li><a href=#>Link</a></li>
<li><a href=#>Link</a></li>
<li><a href=#>Link</a></li>
</ul>
</div>
<br />

<h2>Page Name</h2>
</div><!--Navigation bar ends-->

<div id="sidebar"><!--Sidebar begins-->
<br />
<br />
<div style="width:110px; height:250px; padding: 2px; border: thick outset #CCCC99;">
<p class="boldtext"><span style="text-decoration:underline">Notes</span></p>
<p class="sidetext"><br />Notes.<br /><br />Notes.<br /><br /></p>
</div>
</div><!--Sidebar ends-->

<div id="main"><!--Main content area begins-->
<p class="boldtext">Welcome!</p><br />
<p class="text">written text here. written text here. written text here.written text here.</p>
<br />
<br />
<br />
<hr />
<br />
<br />
<div id="left">
<a href="#" class="normal_new">Link</a><br />
<a href="#" class="normal_new">Link</a><br />
<a href="#" class="normal_new">Link</a><br />
<a href="#" class="normal_new">Link</a><br />
<a href="#" class="normal_new">Link</a><br />
<a href="#" class="normal_new">Link</a><br />
<a href="#" class="normal_new">Link</a><br />
<a href="#" class="normal_new">Link</a><br />
<!--end left--></div>
<div id="right">
<a href="#" class="normal_new">Link</a><br />
<a href="#" class="normal_new">Link</a><br />
<a href="#" class="normal_new">Link</a><br />
<a href="#" class="normal_new">Link</a><br />
<a href="#" class="normal_new">Link</a><br />
<a href="#" class="normal_new">Link</a><br />
<a href="#" class="normal_new">Link</a><br />
<a href="#" class="normal_new">Link</a><br />
<!--end right--></div>
<div id="center">
<a href="#" class="normal_new">Link</a><br />
<a href="#" class="normal_new">Link</a><br />
<a href="#" class="normal_new">Link</a><br />
<a href="#" class="normal_new">Link</a><br />
<a href="#" class="normal_new">Link</a><br />
<a href="#" class="normal_new">Link</a><br />
<a href="#" class="normal_new">Link</a><br />
<a href="#" class="normal_new">Link</a><br />
<!--end center--></div>
</div><!--End of main content area-->

<div id="footer"><!--Footer begins-->
<hr />
<div id="footermenu">
<ul>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#" >Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul><br style="clear: left" />
</div>
<br />

<p class="copy"> 2008 Name</p>
<br />
</div><!--Footer ends-->
<br />
</div>
</body>
</html>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum