SitePoint.com

jodmcc · Apr 13, 2004, 09:44

Hello,

I am trying to add another item in my navigation DIV for email. I have the navigation setup as an unordered list. I have tried putting another DIV inside the Navigation DIV, but that didn't work. Should I put this in as another list item or is there a better way to do this? There are 7 list items for each page listed in my navigation and the "contact" link was going to be next to that group of 7 items on the right side spanning the height of the group. I'm still getting confused with the "float left", "float right" settings.

Any help would be great.

Thanks,

John

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html401/loose.dtd">
<html>
<head>
<title>Welcome to Yummy Desserts</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body>
<div id="container">
<div id="banner"><img src="yummydessertshead.jpg" alt="yummy desserts logo banner" width="600" height="128"></div>
<div id="nav">
<ul>
<li><a href="index.html">Cheesecakes</a></li>
<li><a href="poundcake.html">Pound Cakes</a></li>
<li><a href="southernspecial.html">Southern Specialties</a></li>
<li><a href="holiday.html">Holiday Extras</a></li>
</ul>
<ul>
<li><a href="valentine.html">Valentines Specials</a></li>
<li><a href="noahsark.html">Noah's Ark Cakes</a></li>
<li><a href="personchef.html">Personal Dessert Chef</a></li>
</ul>
</div>
<h2>Cheesecakes</h2>
<div id="content">
<div id="col1cheese">
<dl class="col1picture">
<dt><img src="cheesecake.jpg" alt="cheesecake" width="160" height="160"></dt>
<dt>Chocolate Orange Swirl Cheesecake</dt>
</dl>
<dl><dt class="cakelisttitle">Pumpkin Cheesecake</dt>
<dd class="cakelistdescription">Ginger Snap Crust</dd>
<dt class="cakelisttitle">Chocolate Cheesecake</dt>
<dd class="cakelistdescription">Chocolate Crust</dd>
<dt class="cakelisttitle">Pina Colada Cheesecake</dt>
<dd class="cakelistdescription">Macaroon Crust(large only)</dd>
<dt class="cakelisttitle">Apricot Swirl Cheesecake</dt>
<dd class="cakelistdescription">Graham Cracker Crust</dd>
<dt class="cakelisttitle">Chocolate Orange Cheesecake</dt>
<dd class="cakelistdescription">Chocolate Crust</dd>
<dt class="cakelisttitle">Plain Yummy Cheesecake</dt>
<dd class="cakelistdescription">Graham Cracker Crust</dd>
</dl>
</div>
<div id="col2cheese">
<table id="pricemenucheese">
<thead></thead>
<tbody>
<tr>
<td>Large</td>
<td>$25</td>
</tr>
<tr>
<td>Not-so-Large</td>
<td>$20</td>
</tr>
<tr>
<td>Lower Fat, Large</td>
<td>$30</td>
</tr>
<tr>
<td>Lower Fat, Not-so-Large</td>
<td>$25</td>
</tr>
<tr>
<td>With Artfully Arranged Fresh Fruit</td>
<td>$10 extra</td>
</tr>
</tbody>
</table>
</div>
<div class="clearboth"></div>
</div>
<div class="clearboth"></div>
<div id="details">
<div id="detailparagraphs"><p>Please order 24-48 hours in advance. Desserts can be baked in your own pans and custom packaging is available for weddings, birthdays, showers, etc. We welcome large or corporate orders.</p>
<p>All desserts are made from scratch using only the finest ingredients. Special requests are cheerfully accomodated if possibly.</p>
<p class="phoneline">Place your order by calling Laura at 832-721-6635</p>
<p class="blessing">“May God bless you and keep you today and every day, and may you enjoy your desserts!”</p>
</div>
</div>
</div>
</body>
</html>

CSS:

<style type="text/css">

</style>

albion7 · Apr 16, 2004, 21:40

I can't visualize your problem. Why not just add another <li> to your "nav" <ul>?

A link might help us get a better grasp of what you are trying to accomplish, and the problem you're experiencing.

Paul O'B · Apr 17, 2004, 07:12

Hi Albion7,

I think I ansered this question in this thread:
http://www.sitepoint.com/forums/showthread.php?t=163772

I wasn't sure what John wanted originally either

Paul

Apr 13, 2004, 09:44	#1
jodmcc SitePoint Addict Join Date: Dec 2003 Location: Houston, Texas Posts: 216	Problems with CSS Positioning Hello, I am trying to add another item in my navigation DIV for email. I have the navigation setup as an unordered list. I have tried putting another DIV inside the Navigation DIV, but that didn't work. Should I put this in as another list item or is there a better way to do this? There are 7 list items for each page listed in my navigation and the "contact" link was going to be next to that group of 7 items on the right side spanning the height of the group. I'm still getting confused with the "float left", "float right" settings. Any help would be great. Thanks, John HTML: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html401/loose.dtd"> <html> <head> <title>Welcome to Yummy Desserts</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> </head> <body> <div id="container"> <div id="banner"><img src="yummydessertshead.jpg" alt="yummy desserts logo banner" width="600" height="128"></div> <div id="nav"> <ul> <li><a href="index.html">Cheesecakes</a></li> <li><a href="poundcake.html">Pound Cakes</a></li> <li><a href="southernspecial.html">Southern Specialties</a></li> <li><a href="holiday.html">Holiday Extras</a></li> </ul> <ul> <li><a href="valentine.html">Valentines Specials</a></li> <li><a href="noahsark.html">Noah's Ark Cakes</a></li> <li><a href="personchef.html">Personal Dessert Chef</a></li> </ul> </div> <h2>Cheesecakes</h2> <div id="content"> <div id="col1cheese"> <dl class="col1picture"> <dt><img src="cheesecake.jpg" alt="cheesecake" width="160" height="160"></dt> <dt>Chocolate Orange Swirl Cheesecake</dt> </dl> <dl><dt class="cakelisttitle">Pumpkin Cheesecake</dt> <dd class="cakelistdescription">Ginger Snap Crust</dd> <dt class="cakelisttitle">Chocolate Cheesecake</dt> <dd class="cakelistdescription">Chocolate Crust</dd> <dt class="cakelisttitle">Pina Colada Cheesecake</dt> <dd class="cakelistdescription">Macaroon Crust(large only)</dd> <dt class="cakelisttitle">Apricot Swirl Cheesecake</dt> <dd class="cakelistdescription">Graham Cracker Crust</dd> <dt class="cakelisttitle">Chocolate Orange Cheesecake</dt> <dd class="cakelistdescription">Chocolate Crust</dd> <dt class="cakelisttitle">Plain Yummy Cheesecake</dt> <dd class="cakelistdescription">Graham Cracker Crust</dd> </dl> </div> <div id="col2cheese"> <table id="pricemenucheese"> <thead></thead> <tbody> <tr> <td>Large</td> <td>$25</td> </tr> <tr> <td>Not-so-Large</td> <td>$20</td> </tr> <tr> <td>Lower Fat, Large</td> <td>$30</td> </tr> <tr> <td>Lower Fat, Not-so-Large</td> <td>$25</td> </tr> <tr> <td>With Artfully Arranged Fresh Fruit</td> <td>$10 extra</td> </tr> </tbody> </table> </div> <div class="clearboth"></div> </div> <div class="clearboth"></div> <div id="details"> <div id="detailparagraphs"><p>Please order 24-48 hours in advance. Desserts can be baked in your own pans and custom packaging is available for weddings, birthdays, showers, etc. We welcome large or corporate orders.</p> <p>All desserts are made from scratch using only the finest ingredients. Special requests are cheerfully accomodated if possibly.</p> <p class="phoneline">Place your order by calling Laura at 832-721-6635</p> <p class="blessing">“May God bless you and keep you today and every day, and may you enjoy your desserts!”</p> </div> </div> </div> </body> </html> CSS: <style type="text/css"> <!-- body { background-image: url(yummybkgrd.gif); background-repeat: repeat-y; background-position: center top; } #container { margin: auto; text-align: center; } #banner { width: 720px; height: 128px; margin: auto; clear: both; } #nav { padding: 5px; text-align: center; clear: both; } #nav ul { margin: 0px; padding: 0px 0px 10px; list-style-type: none; } #nav ul li { font-family: "Times New Roman", Times, serif; font-size: 12px; font-style: italic; font-weight: bold; color: #000000; display: inline; padding-top: 10px; padding-right: 20px; padding-bottom: 10px; padding-left: 20px; } #nav ul li a { text-decoration: none; padding-top: .2em; padding-right: 1em; color: #4169E1; } #nav ul li a:hover { color: #763736; text-decoration: underline; } #col1cheese { width: 390px; padding: 0px; margin-left: 8px; float: left; text-align: left; } #col2cheese { width: 300px; margin-left: 10px; float: left; text-align: left; } #content { text-align: center; width: 720px; margin: auto; } img.cheesecake { float: left; margin-top: 0px; margin-right: 10px; margin-bottom: 80px; margin-left: 0px; } .cakelisttitle { font-family: "Times New Roman", Times, serif; font-size: 16px; color: #E1B941; font-weight: bold; font-variant: normal; } .cakelistdescription { font-family: "Times New Roman", Times, serif; font-size: 12px; color: #000000; margin-bottom: 8px; } dl { margin: 0px; } table#pricemenucheese { font-family: "Times New Roman", Times, serif; font-size: 14px; margin: 0px; padding: 0px; width: 300px; vertical-align: top; } .clearboth { clear: both; } td { padding-bottom: 20px; } h2 { font-family: "Times New Roman", Times, serif; font-size: 30px; font-style: italic; color: #ABBDF2; margin: 10px 0px; padding: 0px; } #details { width: 720px; text-align: center; margin: auto; } p { font-family: "Times New Roman", Times, serif; font-size: 14px; text-align: left; line-height: 15px; margin-bottom: 8px; margin-top: 0px; margin-right: 0px; margin-left: 0px; } #detailparagraphs { width: 500px; margin: 20px 110px 0px; } .phoneline { font-size: 18px; font-style: italic; color: #E141B9; text-align: center; } .blessing { font-size: 12px; font-style: italic; color: #E1B941; text-align: center; } .col1picture { float: left; width: 160px; text-align: center; margin-right: 10px; margin-bottom: 50px } .col1picture dt { font-family: "Times New Roman", Times, serif; font-weight: bold; font-style: italic font-size: 9px } --> </style>

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

Apr 16, 2004, 21:40	#2
albion7 SitePoint Enthusiast Join Date: Nov 2003 Location: Northern CA, USA Posts: 46	I can't visualize your problem. Why not just add another <li> to your "nav" <ul>? A link might help us get a better grasp of what you are trying to accomplish, and the problem you're experiencing.

Apr 17, 2004, 07:12	#3
Paul O'B CSS Advisor Join Date: Jan 2003 Location: Hampshire UK Posts: 27,432	Hi Albion7, I think I ansered this question in this thread: http://www.sitepoint.com/forums/showthread.php?t=163772 I wasn't sure what John wanted originally either Paul