|
HTML - Same List Items On Several Pages
Hi Folks,
I'm a newbi and just learning. Does anyone know if there is a tag or an object that would allow me to enter the same short list of items on several pages and be able to change the list on all the pages by changing it on one page? In other words if I change the list items on say a master page, it changes the list on all other pages where the same items are listed? Thanks for your help. Joel Similar TutorialsI see the use of the <ul> and <li> tags when creating things like menus and in the case of digg and gamegrep at the least, comments. I can see a possible use with comments for indentatiing replies to other comments. The question still stands for things like menus though, does it have to do with search engine crawlers and how they parse the page? Any insight by anyone who knows anything about this would be nice. Thanks Hi, I know this is being an extreme perfectionist. But, if you look at http://www.tendervendors.com/dev/hr_systems.html, at the selected link on the navigation bar (HR Systems), you'll see that there are 2 lines either side of the HR Systems (selected) link. This is fine, however because the bottom border is on the other links and not the selected one, and the two side borders are on the selected link, the don't line up. I'm aware that i could specify the right border on the 1st link and the left border on the 3rd link, but i was trying to make it simple, so someone without alot of understanding and program it after i've done. So, i then thought, well i could overlap the links, 2px to the left, so set li { position:relative }, and then li {left:-2px}. but it doesn't overlap the li's, it overlaps the entire ul over the page (content div) border. Any ideas as to why this is? Thanks, Matthew Millar Hi there, I was wondering if it's good practice to put <li> tags inside table cells. Normally, I would just put the list items in their own div container without the table, but for specific design reasons, I need to separate the list items in their own table data cells. This is how I'm currently doing it: Code: <div id="container"> <ul> <table width="100%" border="0" cellpadding="0" cellspacing="0"> <tr> <td><h2>List Header</h2></td> </tr> <tr> <td height="29"><li><a href="itemone.html">Item One</a></li></td> </tr> <tr> <td height="29"><li><a href="itemtwo.html">Item Two</a></li></td> </tr> <tr> <td height="29"><li><a href="itemthree.html">Item Three</a></li></td> </tr> <tr> </table> </ul> </div> Notice that the H2 header isn't actually a list item but is still within the <ul> tags. Is any of this confusing or incorrect for google indexing? Hi every one I have a quick question. I'm building and interface this is make of unordered list items. Those list items are contained in a span so that interface can have separate look for the other links on the page. But when I validate my page in Dreamweaver I get some page errors that. Here is the error: The tag:"span" is not allowed within: "ul" It is only allowed within: a, abbr, acronym, address, b, bdo, big, button, caption, cite, code, dd, del, dfn, div, dt, em, fieldset, h1, h2, h3, h4, h5, h6. . ..[XHTML 1.0 strict] Now here is the code in question: HTML Code: <ul id="nav">
<span class="left_links">
<li class="nav_items_00"><a href="index.html">Home</a></li>
<li class="nav_items_00"><a href="services.html">Services</a></li>
<li class="nav_items_00"><a href="gallery.html">Gallery</a></li>
<li class="nav_items_00"><a href="events.html">Events</a></li>
<li class="nav_items_00"><a href="http://hsgsphoto.wordpress.com/" target="_blank">Blog</a></li>
<li class="nav_items_00"><a href="about.html">About</a></li>
</span>
The page that you can see this code in action is located at: http://www.hsgsphoto.com I guess my question is what would be the best practice in this situation. I need the a way to tell this group of links to act different then links in other parts of the page but the error I'm getting in validation is that list items (li) tags are not to be used within a span. Thank you so much for any feed back and help John Hey, I've got this problem involving a list in IE. I've basically made a LI within another LI like so:- Code: <ul class="mainNav">
<li><a href="/index.php?frc=1" class="first">Home</a></li>
<li><a href="/GamePortal.php">Games</a></li>
<li class="headlink"><a href="/edit_profile.php">My Profile</a>
<ul>
<li><a href="/edit_profile.php">Game Profile</a></li>
<li><a href="/link.php">Community Profile</a></li>
</ul>
</li>
<li><a href="/promotions.php">Promotions</a></li>
</ul>
This generates a sort of list underneith a list to be used as a dropdown menu. I've assigned it some CSS to do this Code: .mainNav li.headlink ul {
list-style: none;
display: none;
float: none;
margin: 0px;
position: absolute;
top: 35px;
z-index: 100;
min-width: 72px;
text-align: center;
padding: 5px;
}
What happens is that when using FF the content displays perfect (no suprises there) but when I use IE for the same page, it moves the drop down list to the end of the item above on it's x axis (the y is fine). I've tried all sorts of different things; I used relative which worked but then expanded the LI item above it shifting everything along in the line. So it has to be absolute positioned to stop that from happening. I've messed about with every single margin I can think of to no avail. Any Ideas. Somebody suggested I do this using list items instead of left-floating DIVs, so I did. But I have no other experience of working with lists and no matter what I do, I can't get the list items to sit right next to each other. There's always a gap between them that I can't get rid of. Code: <!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" lang="en" xml:lang="en">
<HEAD>
<STYLE>
ul { list-style-type:none; }
li { display:inline; }
#headings { font-family:Courier New; line-height:25px; font-size:16px; font-weight:bold; text-align:center; margin-top:10px; }
#headings a { background-color:#000; padding:7px; padding-top:4px; padding-bottom:2px; border:1px solid #f00; }
#headings A:link { color:#ccc; }
#headings A:visited { color:#ccc; }
#headings A:hover { background-color:#aaa; color:#000; }
</STYLE>
</HEAD>
<BODY>
<DIV id="headings">
<UL>
<LI><A HREF="p1.html">News</A></LI>
<LI><A HREF="p2.html" onMouseover=showmenu(event,linkset[0],'110px') onMouseout=delayhidemenu()>Produkt</A></LI>
<LIl><A HREF="p3.html">Media</A></LI>
<LI><A HREF="p4.html">Downloads</A></LI>
<BR>
<LI><A HREF="p5.html" onMouseover=showmenu(event,linkset[1],'166px') onMouseout=delayhidemenu()>Col Dee</A></LI>
<LI><A HREF="p6.html">Contact</A></LI>
<LI><A HREF="p7.html">Guestbook</A></LI>
</UL>
</DIV>
</BODY>
</HTML>
As you can see the "panels" are split into two rows using a simple linebreak. By the way, I've managed to get zero top and bottom margins by controlling the line-height attribute. Can anyone help with this? Thanks for reading, Seymour. Hello, I ran into this problem today in my Basic XHTML class, and it was enough to stump me and the instructor: if you want to put an unordered list in the middle of a page, but you want the list items to be left-aligned so the bullets are one on top of the other...how do you do it? I started with code something like <div align="center"> <ul type="disc"> <li>Wine</li> <li>Women</li> <li>Song</li> </ul> </div> This centers the list on the page, but it also centers each list item. I tried placing a <div align="left"> around the list items, individually and collectively, but depending on the positioning it either had no effect or it nullified the center attribute completely and gave me a left-aligned list on the left edge of the page. Attempts to change the style of the <li> tag, which I haven't done in months and was never all that good at, failed. I know I can do this in ten seconds by putting the list inside a one-cell table, and with much fiddling I could probably do it with a spacer GIF...but what's the 1.0 Strict way? This will be hard for me to explain so I will add an image: http://img75.imageshack.us/my.php?image=examplexu6.gif How do I go about loading a page within a page. For example, in the pic, if you clicked Cost it would load a page within the loading area without taking off to another location. I seen it on a site before, i remember the links were something like "/?p=cost" or something like that. And the page appeared to not navigate elsewhere, the cost page was just loaded within the page i was on. hope that makes sense, if so any examples on this? is it hard to do? messy? safe with most browsers? thanks I have a big list and I want to show on my webpage 6lines from that list randomly (when webpage is refreshed another 6 lines appear). can anyone help me with he code, how should the list look like so it works...or where can I find more info on this ? thanks I am making a website with a list inside list for my navigation bar. It looks good on safari(win/mac) and firefox but the list looks horrible in IE7.0(didnt check 6.0) I was wondering if anyone know what it could be HTML Code: Code: <div id="nav"> <img class="menupic" src="images/mainmenu.png" alt="Main Menu"/> <ul class="navli"> <li><a class="point" href="#"><img src="images/menu_findme.png" alt="findMe"/></a></li> <li> <ul class="navlinks"> <li><a href="#goto_facebook" id="facebook">- Facebook</a></li> <li><a href="#goto_myspace" id="myspace">- Myspace</a></li> <li><a href="#goto_youtube" id="youtube">- Youtube</a></li> </ul> </li> </ul> <ul class="navli"> <li><a class="point" href="#"><img src="images/menu_blog.png" alt="blog"/></a></li> <li> <ul class="navlinks"> <li><a href="#blogid2" id="blogid2">- Testing | May 01</a></li> <li><a href="#blogid1" id="blogid1">- Debut Album | Apr 30</a></li> <li><a href="#goto_blogarchive" id="blogarchive">- Archives</a></li> <li class="donthidethis"><ul class="navli donthidethiseither" style="padding:0;"> <li><a class="point" href="#">- Categories</a></li> <li><ul class="navlinks"> <li><a href="#goto_catid2" id="catid2">- Media</a></li><li><a href="#goto_catid1" id="catid1">- News</a></li><li><a href="#goto_catid3" id="catid3">- Off Topic</a></li><li><a href="#goto_catid4" id="catid4">- Tutorials</a></li> </ul></li> </ul></li> </ul></li> </ul> <ul class="navli"><li><a class="point" href="#"><img src="images/menu_eliasmusictv.png" alt="eliasMusic Tv"/></a></li> <li><ul class="navlinks"> <li><a href="#" id="coming">- Coming soon...</a></li> </ul></li> </ul> <ul class="navli"><li><a class="point" href="#"><img src="images/menu_about.png" alt="about"/></a></li> <li><ul class="navlinks"> <li><a href="#goto_biography" id="biography">- biography</a></li> </ul></li> </ul> <ul class="navli"><li><a class="point" href="#"><img src="images/menu_links.png" alt="links"/></a></li> <li><ul class="navlinks"> <li><a href="#" id="links">- Coming soon...</a></li> </ul></li> </ul> <ul class="navli"><li><a class="point" href="#"><img src="images/menu_contact.png" alt="contact"/></a></li> <li><ul class="navlinks"> <li><a href="#goto_contact" id="contactpage">contactForm</a></li> </ul></li> </ul> CSS Code: Code: #nav { float:right; width:195px; padding-left:20px; background:url("images/navback.png"); } #nav ul { list-style: none; margin-left:1px; border: none; } #nav .navli { padding-top:3px; padding-bottom:3px; } #nav .navlinks { padding-left:25px; } #nav .navlinks a,a:link { color:#262626; } #nav .navli img { margin-top:5px; margin-bottom:5px; } #nav .navlinks a:hover { color:#dadada; } #nav img.menupic { margin:20px 10px 5px 95px; } #nav a { font-size:14px; display:block; } #nav a.point { font-size:14px; font-weight:bold; } .navliover { background:url("images/navhover.jpg"); }
Any help at all would be appriciated please I can show u the website via Private message if you are interested in helping Thanks in advance Reply With Quote Hi: Enviro: IE 7 (for now) My list items (i.e., <li>) are too close together, *but* if I put a line-break at the end of each item, they are too far apart. I tried using CSS with a margin setting to get some separation but that didn't work either. So, how does one get some afjustable separation between list items please ? Thanks, -Mel Smith Hi All, I started doing a website that had a picture, then flash overlaid on top of the picture, then some text centered on the flash... the size of the picture and flash is 990px in width and 792px high, the reason i put a picture on screen 1st is the flash take a few minutes to load, so it looks good till the flash kicks in. Anyway it looks good on my 1024 x 768 monitor, some of my friends have widescreen and say they is a huge gap to the right.. so how can i center width only an image of 900 x 792 and then in the exact postion of the centered image place the flash, and then add some text on top of the flash once again centered on top of the flash... this if it can be done will leave a even gap to the left and right if on widescreen and be virtually full screen on a normal 1024 x 768 monitor. I tried absolute Code: <center><div style="position: absolute; top: 0px; "> the image </div></center> <center><div style="position: absolute; top: 0px; "> the flash </div></center> <center><div style="position: absolute; top: 100px; "> the text </div></center the image and flash and text had the right html to show, just used the above code to show what i tried... anyway it did not work right for some reason, im sure im going down the wrong path and they is a much better way to do this... Can anyone help me Thanks I am developing C# web application in which it contains a htm page. This Htm page contains a menu file. under file there are two items save and exit. I added the menu and items in the menu. what i need is how can i add the icons beside the items of the menu. Any one please Help. Thanks in advance. Hi to you all, I am trying to write script to search an xml form and return any of the correct responses. The form is here http://bubbleweb.eu/Rentals/search.html and it is using: http://bubbleweb.eu/Rentals/index.xml http://bubbleweb.eu/Rentals/searchindex.js I want the customer to be able to search for a 'property ref', or if they don't have one to leave that field blank, and for the relevant item(s) to be returned. So if I search 'Bur1001' its returning that item, but if I leave it blank its returning all 4 items. That's all good, that is working fine! However, I want the form to be able to search other fields like 'short term', 'area' and 'bedrooms' etc, so if they leave the 'ref' field blank but 'short term' is selected then i ONLY want the 'short term' items to be returned. Does anybody know how I can achieve this? Thanks in advance for your time! I want to have two bulleted items on one line, but can't seem to accomplish it. I tried... <ul><li type=circle>item1</li> <li type=circle>item2</li></ul> Would there be an easy way to do this? Hi, I'm new to this forum and could use some help. I created a website in iweb and I'm having an issue with items moving on the page. The website is VoiceFromHevin.com, not necessarily the welcome page, but the pages after that. So here is the backstory: When I first published my site I had problems with items moving around on the page when you shrank your browser window. The background would stay center while other images and text would move left. So, to combat that problem I changed two lines of code. <body style="background: rgb(255, 255, 255) url(About_files/background%20Test%202%20cropped%20longer.jpg) no-repeat scroll center top; margin: 0pt; " onload="onPageLoad();"> I changed part of the line of code from "no-repeat scoll center center;" to "no-repeat scroll center top;" I then change one more line of code which was: <div style="margin-bottom: 0px; margin-left: auto; margin-right: auto; margin-top: 0px; overflow: hidden; position: relative; word-wrap: break-word; background: transparent; text-align: left; width: 980px; " id="body_content"> and made these changes to it: <div style="margin-bottom: 0px; margin-left: -512px; margin-top: 0px; overflow: hidden; position: absolute; left: 50%; word-wrap: break-word; background: transparent; text-align: left; width: 1024px; " id="body_content"> However, if you notice the pages, the three blue logos have moved off of the cloud image (they should be resting on the cloud). And also the footer links at the bottom have moved. Is there a way to move those items back to where they should be? Any help would be much appreciated! Thanks! Hi, how can I rearrange items by name or genre? I want to make a sort of collection for a few movies, with information about actors and so on. I have the information for each movie in a div tag. What do I have to do so that when I click, let's say on name, it lists the movies alphabetically? Is there any solution for this? Or generally how would you do this? Thank you. I'm having trouble adding a line break between my form items. I've tried all the obvious solutions and nothing is working; either the breaks appear about the forms and below the text, or the form itself is moved to halfway across the page. I've tried using <br> tags and I've tried <tr> <td colspan="2"> <br> </td> <tr> and many variations, but none do what I what. Here's my code: Page Content goes here. <BR><BR><BR> <form id="form1" name="form1" method="post" action="http://www.usa-7.com/scripts/shared/refmlr"> <input name="destEmail" value="emailaddressgoeshere" type="hidden"/> <input name="reqType" value="Contact Us" type="hidden" /> <input name="numReqParms" value="5" type="hidden" /> <script src="validate.js"></script> <style> input.invalid {background: #ff0000;} input.valid [background: #afa; } </style> <table height="200" cellpadding="0" cellspacing="0"> <tbody> <tr> <td> First Name: </td> <td><input name="First Name" size="30" maxlength="55" type="text" /></td> </tr> <tr> <td> Last Name: </td> <td><input name="Last Name" size="30" maxlength="55" type="text" /></td> </tr> <tr> <td> Email Address: </td> <td><input name="Email" size="30" maxlength="200" type="text" /></td> </tr> <tr> <td> Phone Number: </td> <td><input name="Phone" size="30" maxlength="35" type="text" /></td> </tr> <tr> <td> Comments: </td> <td><textarea name="Comments" cols="50" rows="8"></textarea></td> </tr> </tbody> </table> any help would be great. Thanks! Hi, I usually use frames to split my pages into sections. No problem the But you can think that having a page with over 25 frames defined in the HTML code is quite confusing at times. I wanted to ask if and how it is possible to position an image/paragraph/table/etc. at exact pixel-coordinates. My example: I want to place an image at (50px|50px) and a table at (200px|100px) Thanks in advance.... PS: (x|y) What would be the best way to center the items listed in the left column? Thank you. Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0.11 Transitional//EN">
<html><head>
<title>test</title>
<script src="java.js" type="text/javascript"></script>
<link rel="STYLESHEET" type="text/css" href="styles.css">
<style type="text/css">
.test{background-color:#ffdead;}
#header {
width: 830px;
margin-left: auto;
margin-right: auto;
margin-top: -15px;
background-color: #ffdead;
}
#header_table {
width: 75%;
border-collapse: collapse;
border: solid 1px;
border-color: #b7b7b7;
}
.header_bar {
padding: 0px;
margin: 0px;
border-bottom-style: solid;
border-bottom-width: 10px;
border-bottom-color: #b7b7b7;
background-color: #800000;
width: 150px;
border-collapse: collapse;
border-right-width: 0px;
border-left-width: 0px;
}
.header_body {
padding: 0px;
margin: 0px;
border-left-style: solid;
border-left-width: 1px;
border-left-color: #b7b7b7;
border-right-style: solid;
border-right-width: 1px;
border-right-color: #b7b7b7;
}
</style>
</head>
<body bgcolor="#ffffff">
<table id="header_table" align='center' cellpadding='0' cellspacing='0'>
<tr>
<td class="header_bar" colspan='2'> </td>
</tr>
<tr>
<td align='center' colspan='2'>
<img src="imgi/img11.jpg" height="134" width="461">
<img src="imgi/topimg2.jpg" height="160" width="309">
</td>
</tr>
<tr>
<td class='header_body' valign='top' width="200">
<form action="login.asp" method="post">
<table width="100%" height="100%" align='center' cellpadding="0" cellspacing="0" border="0" >
<tr><td valign="top" class='header_bar' colspan='2'> </td></tr>
<tr>
<!-- SIDE MENU -->
<% If Session("PMMS_IN") = "True" Then '// CHECK IF MEMBER IS LOGGED IN ALREADY %>
<!-- MENU FOR LOGGED MEMBER ONLY -->
<td colspan="2"><br><br>Welcome <i><%'=Session("PMMS_NAME")%></i><br /><br /></td>
</tr><tr>
<td width="15">º</td>
<td><a class="lnk" href="profile.asp">My Profile</a></td>
</tr><tr>
<td width="15">º</td>
<td><a class="lnk" href="_purchase.asp">Purchase</a></td>
</tr><tr>
<td width="15">º</td>
<td><a class="lnk" href="newsletter.asp">Newsletters</a></td>
</tr><tr>
<td width="15">º</td>
<td><a class="lnk" href="members.asp">Member List</a></td>
</tr><tr>
<td width="15">º</td>
<td><a class="lnk" href="members_by_group.asp">Group Member List</a></td>
</tr><tr>
<td width="15">º</td>
<td><a class="lnk" href="file_cate.asp">File Repository</a></td>
</tr><tr>
<td width="15">º</td>
<td><a href="login.asp?logout=True">Log Out</a></td>
</tr>
<!-- [ MENU FOR LOGGED MEMBER ONLY ] -->
<% Else ' IF NOT LOGGED IN THEN SHOW THE LOGIN FORM%>
<!-- INCLUDE LOGIN FORM -->
<br><br><td colspan='2'><br><br>Username:<center><br /><input class="textbox" type="Text" name="username" value="<%=Trim(Request.Cookies("USERNAME"))%>" maxlength="25" size="20" /></td>
</tr><tr>
<td colspan='2'><br>Password:<center><br /><input class="textbox" type="Password" name="password" value="" maxlength="25" size="20" /></td>
</tr><tr>
<td>
<br><input type="Checkbox" name="rem" value="1"<%If NOT Trim(Request.Cookies("USERNAME")) = "" Then%> checked<%End If%> />Save Username<br />
<input style="width: 50%;" type="Submit" value="Login Now" /><br /><br /><a href="reminder.asp">Password Reminder</a>
</td>
</tr>
<tr>
<td>
<br />
<input type="Hidden" name="mode" value="login" /><input type="Hidden" name="ref_page" value="<% If Len(Trim(Request.QueryString("ref_page"))) = 0 Then%><%=Request.ServerVariables("URL") & "?" & Request.QueryString%><%Else%><%=Request.QueryString("ref_page")%><%End If%>" />
<!-- [ INCLUDE LOGIN FORM ] -->
<% End If %>
</td>
</tr>
<tr>
<td>
<br /><br />
<img src="img/linkimg1.gif" width="25" height="24" alt="" border="0" /><a class="MainMenuLNKExample" href="index.asp"> HOME</a><br /><br>
<img src="img/linkimg3.gif" width="25" height="24" alt="" border="0" /><a class="MainMenuLNKExample" href="register.asp"> FAQ</a><br /><br>
<% If Session("PMMS_IN") = "True" Then '// CHECK IF MEMBER IS LOGGED IN ALREADY %>
<img src="img/_example/arrow_gray_top_inverse_b.gif" width="15" height="14" alt="" border="0" /><a class="MainMenuLNKExample" href="login.asp?logout=True">LOG OUT</a>
<% Else %>
<img src="img/linkimg2.gif" width="25" height="24" alt="" border="0" /><a class="MainMenuLNKExample" href="register.asp"> REGISTER</a><br /><br>
<% End If %>
<img src="img/linkimg4.gif" width="25" height="24" alt="" border="0" /><a class="MainMenuLNKExample" href="register.asp"> TERMS OF USE</a><br /><br>
<img src="img/linkimg5.gif" width="25" height="24" alt="" border="0" /><a class="MainMenuLNKExample" href="register.asp"> CONTACT US</a><br /><br />
</a>
<!-- [ SIDE MENU ] -->
<br /><br />
</td>
</tr>
</table>
</form>
</td>
<td class='header_body'>
<!-- MAIN PAGE CONTENT -->
|
|||||||