PDA

View Full Version : Need to add a UL to my page. Help please!



moss2076
Aug 30th, 2007, 07:08 PM
Apologies for posting again (and to those who answered my last post) but I didnt explain my Ul (or span) list positioning problem correctly.

I have posted my banner with everything positioned as I want it. I have a UL at the top, followed by my bannerimage, a banner and <p> for date.

I want to add a second <li> or span of links directly to the right of my bannerimage. The second set of links is to be the same layout as the top set of links on the page.

The link to the code is -
http://www.tomkilbourn.com/newsite/test/banner.shtml

I am also aware that the order of my html code may need changing, but I am struggling to change it to the correct order and keep the positioning as I want.

harbingerOTV
Aug 31st, 2007, 03:20 AM
do you mean like this:



<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>

<style type="text/css">

/* CSS Document */

/*On the first blank line, enter the following CSS rules:*/

body {
background-color: #fff;
background-repeat: repeat-x;
font: 10px verdana, arial, helvetica, sans-serif;
margin: 5px;
padding: 0px;
}


ul#toplist, ul#side {
font:600 11px Arial,Helvetica,sans-serif;
padding: 0;
margin: 0;
background-color: #970000;
margin: 0;
}

ul#toplist {
width: 100%;
}

ul#side {
float: left;
}

ul#toplist li, ul#side li {
display: inline;
padding: 1px 0 0 0;
border-right: 1px solid white;
}

ul#toplist li a, ul#side li a {
padding: 0 5px;
color: #ccc;
text-decoration: none;
}

#masthead a:hover, #side a:hover {
color:#999;
text-decoration:underline;
}

ul#toplist li.toplistlast, ul#side li.toplistlast {
border:none;
}


#masthead {
background: #C50101 url(http://www.tomkilbourn.com/newsite/images/gradient_banner.gif) top left repeat-x;
overflow: hidden;
}

#masthead img {
float: left;
}

#masthead p {
float: right;
width: 140px;
border: solid #bbb;
border-width: 1px 0px 1px 1px;
text-align: center;
background-color: #9933CC;
padding: 0px;
margin: 0px;
}

</style>
</head>

<body>

<div id="masthead">
<ul id="toplist">
<li><a href="#">toplist one</a></li>
<li><a href="#">toplist two</a></li>
<li><a href="#">toplist three</a></li>
<li><a href="#">toplist four</a></li>
<li class="toplistlast"><a href="#">toplist five</a></li>
</ul>

<p>Date goes here</p>

<img src="http://www.tomkilbourn.com/newsite/images/bannerimage.gif" alt="tom's test site" longdesc="http://www.tomkilbourn.com/newsite/test/test.shtml" />

<ul id="side">
<li><a href="#">toplist one</a></li>
<li><a href="#">toplist two</a></li>
<li><a href="#">toplist three</a></li>
<li><a href="#">toplist four</a></li>
<li class="toplistlast"><a href="#">toplist five</a></li>
</ul>

</div>

</body>
</html>


i tossed in some short hand and your piece of code border: 1px 0 1px 1px solid #bbb doesn't do anything so I fixed it to


border: solid #bbb;
border-width: 1px 0px 1px 1px;

moss2076
Aug 31st, 2007, 02:38 PM
Thanks that is exactly what I was looking to do. Thank you.

Can I just ask another question? How do I enable the div to wrap down to the full height of the bannerimage in Dreamweaver design mode? It displays fine in IE7, but in Dreamweaver design mode it doesnt drop fully down.

Also, I noticed you removed the <h1> tags, I assume you did this as they werent really needed for this occasion?

Thanks again.

ahallicks
Aug 31st, 2007, 02:50 PM
I can give you a hint here: DON'T USE DREAMWEAVER DESIGN VIEW. It does not accurately mimick a browser display... only a browser can do that. Test in all the lastest browsers and never use the design view for creating a web site or testing a web site.

Just a tip :)

moss2076
Aug 31st, 2007, 03:00 PM
I always use IE, Firefox and safari to test, its just when im designing in DW that I want to see the page as close to how it will look on the internet. I have added a <br style="clear: both;"/> right before the closing /div, and it has made the div drop to the full height in DW. Everything still appears fine in IE and FF also.

Can I ask if I can or need to incorporate a <h1> tag anywhere as it is to be the top navgation area.

croatiankid
Aug 31st, 2007, 03:07 PM
I can think of only a few reasons to use DW's design view: image maps, and automatic character encoding if using characters not in the charset you're using (but I suggest using utf-8 in most circumstances anyway).

harbingerOTV
Sep 1st, 2007, 01:30 AM
I removed the h1 tag since you were using it well, wrong. It's supposed to be the the main topic of the page. you had it's only contents of it being an image. If you want the image text to be the title then you can do something like:


<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>

<style type="text/css">

/* CSS Document */

/*On the first blank line, enter the following CSS rules:*/

body {
background-color: #fff;
background-repeat: repeat-x;
font: 10px verdana, arial, helvetica, sans-serif;
margin: 5px;
padding: 0px;
}


ul#toplist, ul#side {
font:600 11px Arial,Helvetica,sans-serif;
padding: 0;
margin: 0;
background-color: #970000;
margin: 0;
}

ul#toplist {
width: 100%;
}

ul#side {
float: left;
}

ul#toplist li, ul#side li {
display: inline;
padding: 1px 0 0 0;
border-right: 1px solid white;
}

ul#toplist li a, ul#side li a {
padding: 0 5px;
color: #ccc;
text-decoration: none;
}

#masthead a:hover, #side a:hover {
color:#999;
text-decoration:underline;
}

ul#toplist li.toplistlast, ul#side li.toplistlast {
border:none;
}


#masthead {
background: #C50101 url(http://www.tomkilbourn.com/newsite/images/gradient_banner.gif) top left repeat-x;
overflow: hidden;
}

#masthead h1 {
float: left;
position: relative;
height: 70px;
width: 300px;
padding: 0;
margin: 0;
text-align: center;
line-height: 70px;
}

#masthead img {
position: absolute;
top: 0;
left: 0;
z-index: 2;
}

#masthead p {
float: right;
width: 140px;
border: solid #bbb;
border-width: 1px 0px 1px 1px;
text-align: center;
background-color: #9933CC;
padding: 0px;
margin: 0px;
}

</style>
</head>

<body>

<div id="masthead">
<ul id="toplist">
<li><a href="#">toplist one</a></li>
<li><a href="#">toplist two</a></li>
<li><a href="#">toplist three</a></li>
<li><a href="#">toplist four</a></li>
<li class="toplistlast"><a href="#">toplist five</a></li>
</ul>

<p>Date goes here</p>

<h1><img src="http://www.tomkilbourn.com/newsite/images/bannerimage.gif" alt="tom's test site" longdesc="http://www.tomkilbourn.com/newsite/test/test.shtml" />Tom's Test Site</h1>

<ul id="side">
<li><a href="#">toplist one</a></li>
<li><a href="#">toplist two</a></li>
<li><a href="#">toplist three</a></li>
<li><a href="#">toplist four</a></li>
<li class="toplistlast"><a href="#">toplist five</a></li>
</ul>

</div>

</body>
</html>


Basically wrap the image in the h1 like before. But then float the h1 so it's only as wide as whats in it and still allows the list to sit next to it. Now you need real text inside it to make it really function for what it really is for. So we type in your alt text from the image. Now the fun part. The text will sit to the left of the image. we want to hide the text or slide it off the page. Snce the text is short I chose to hide it. So we set the h1 to position: relative and the image to position: absolute. This way the image is being confined inside the relative h1. give the h1 the height and width of the image and z-index the image so it sits on top of the text. Now you have an image with the h1 text in it and a real h1 that search engines can actually read as a h1. I gave the h1 the line-height of the same height of the h1 the vertically center the text. Thought it looked better with images off ;)

and like they said. Don't use design view. In my code I used overflow:hidden on the div to make it wrap. DW doesn't know that but browsers do. I assued by the look that you were not going to have drop downs on the menu. If you were, then the br works fine. If your not, it's saves 1 tag from being written.

moss2076
Sep 1st, 2007, 10:55 AM
Im not going to use drop downs, ive never liked them on webpages.

I do have another question, basically I joined here after using another forum for a long time and the people there all went on about how I should be using H1 at the top of the page, h2, further down etc etc.

Now, the way my page is layed out with a divs to seperate areas eg banner,nav, footer, content area, ul's for positioning menus etc I have not had to use any headers (h1, 2, 3's etc) in my page. But I am unsure if headers should be used for the layout, or for the actual content area? I do have a nice big empty content area at the moment waiting to be filled with content, should I save the headers for that and not use them in the layout of the page?

Feel free to take a peek at my page, it is still in early design -
http://www.tomkilbourn.com/newsite/test/test.shtml

harbingerOTV
Sep 1st, 2007, 05:48 PM
Headers are used for presentational purposes rather than structural ones. They are to elaborate on and define the content of the pages and sub sections of the page.

You have 1 h1 per page. This is the main idea of what the content that follows is all about. The others break up the rest of the content into blocks of similar information.

something like this:


<h1>Dog Breeds</h1>

<h2>Western Breeds<h2>
<p>Text about western breeds</p>
<h3>History of western breeds</h3>
<p>Some text about the history</p>
<h4>Working Breeds</h4>
<p>Working breeds text</p>
<h4>Hunting Breeds</h4>
<p>Hunting breeds text</p>

<h2>Eastern Breeds</h2>
<p>Text about eastern breeds</p>
<h3>History of eastern breeds</h3>
<p>Some text about the history</p>
<h4>Working Breeds</h4>
<p>Working breeds text</p>
<h4>Hunting Breeds</h4>
<p>Hunting breeds text</p>


If you've ever done an outline for an English class, it's basically the same thing.

moss2076
Sep 1st, 2007, 08:48 PM
I understand. I am going to leave any h1's etc for the content of my site, and not use them in the structure.