|
HTML - Problem With List Style Image
Similar TutorialsHi, I have created a test list using the code found he http://css.maxdesign.com.au/listamatic/vertical01.htm This is my HTML Code: <div id="area_links"> <ul id="area_links"> <li><a href="#">Item one</a></li> <li><a href="#">Item two</a></li> <li><a href="#">Item three</a></li> <li><a href="#">Item four</a></li> <li><a href="#">Item five</a></li> </ul> </div> This is my CSS Code: #area_links li {
list-style-type:none;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
font-weight:bold;
text-decoration:underline;
color:#6ba033;
}
The colour is showing up as blue but the colour i have put in is a greeny colour. I just want a list without bullets. Have i done somthing wrong? CC_DESIGN So, I'm looking to make a drop down style menu that can be seen on all (or at least the vast vast majority) browsers/universal. Basically, I don't want anything too flashy, but I just have no idea to do any sort of dropdown list aside from the basic html menu and input type of thing. To give an example of something I'm trying to do, I made a simple picture. I'm not looking to make it with flash or anything fancy; as I said, it's really basic and I just want it to be text. Any help or links would be appreciated! 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 Hello, Is there a way to use a submit style button (so HTML automatically generates the button image) instead of having to have a image file? For example: <a href="../invoices.htm"> <img border="0" src="../btn_invoices.jpg" width="73" height="25"></a> where the src is can this be repalced with a button command? without using a FORM or POST option? Something similiar to: <button> <a href="http://www.microsoft.com/">Microsoft</a> </button> Thanks for your help, Doug I'd like to improve the appearance of three buttons on an html page. i believe this is the code: Code: <input type="submit" name="purchase" value="Use Remaining Credits" style="margin:7px 0" style="padding:1px 2px 1px 2px" rel="gb_page_center[600, 635] "> <input type="button" name="search" value="Get New Credits" onclick="window.location.href='newcredits.php';" style="margin:7px 0" style="padding:1px 2px 1px 2px"> <input type="button" name="search" value="Search Again Now" onclick="window.location.href='page.php??page=12';" style="margin:7px 0" style="padding:1px 2px 1px 2px"> How can I add more attractive buttons, which would include the text "Use Remaining Credits", etc.? can you please provide a code example, with image code? Thanks Here is what I'm dealing with: http://kr3t3n.com/premiership/ Look at the left sidebar, where the Arsenal links are. I need to put that 10t in the right side, i have used: < li >< a href="http://www.arsenal.com" >1. Arsenal< p style="float:right;width:25px;height:16px;margin:0;padding:0;display:inline;" > 10t < /p > < /a >< /li > but it seems to be wrong, can you please tell me where I'm wrong?!?! Hi I have a requirement. i have an image with float:left style. I have a text following that and an line just below the text spanning entire width of column(not just width of text). I tried 2 ways of displaying it, but the underline was displaying below the floated image not just below the text. Can you please help me here? Two ways 1) Image: float:left, Text and <HR> 2)Image:float:left, Text and dot image spanning entire width of column and height 1 pixel Thanks rakesh I am sort of new to web programming and used a free web template to design my homepage. In Dreamweaver it previews perfectly fine, and when I preview it in Safari it views fine. However, after uploading it to my server it shows up with an all white background, nothing is laid out correctly, text colors are incorrect. I assume this is because of the relationship between with html and the style.css sheet. I am using a seperate style sheet and it is in the same folder as my index. The beginning of the code is written like this and is followed by my <body> tags and regular stuff like tables and images: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <title>David Broderick | Denton Songwriter</title> <link href="style.css" rel="stylesheet" type="text/css" /> </head> Problem: I have an image floated right, but my UL list appears below the image instead of next to it. I can get all text to wrap around my images except UL lists.. I have the image in a p tag & my UL list would show below it anyway .... The long way i think would be to place the image & UL list into 2 seperate divs like: 1) <div class="imgRight"><img>xxx/></div> use css to float right 2) div class="ulLeft"><ul>xxx</ul></div> use css to float left I have alot of pages with different size images & UL lists so im looking for the easy way out. here is my html <p><img class="floatRight" alt="" align="right" width="281" height="427" p="" src="...images/Photo_01.jpg" /></p> <p>SCQS Quantity Surveyors can provide full Estimating and Tendering solutions to all our clients, including Main Contractors, Sub-Contractors and Private Clients. Our coverage includes a wide variety of areas including residential, commercial, industrial, sports & recreation facilities, retail facilities and hotels etc...</p> <p>The services which we provide our clients with includes:</p> <h2>Estimating & Tendering for Main Contractors & Sub-Contractors</h2> <ul> <li>The Preparation and Submission of Competitive Tenders for Building Main Contractors and Sub-contractors for all Types & Value Ranges of Projects</li> <li>Negotiating and Tenders / Contracts with the Client's Quantity Surveyor for Agreement & Awarding of Contracts</li> </ul> <h2>Estimating & Tendering for Private Clients</h2> <ul> <li>Pre-Tender Price Estimating</li> <li>Advise on Tendering Procedures, Contractual Arrangements and Select Tenderers</li> <li>Preparation of Tender / Negotiation Documentation – (i.e. Bills of Quantities, Schedules of Rates and Contracts etc...)</li> <li>Tender Analysis</li> <li>Examination and Reporting on Tenders Received from Contractors</li> </ul> any help on the best possible way would be appreciated semaus Is it possible to choose an image from a drop down menu which would change an image on the page? for example using mouseover you can make thumbnail images or hyperlinks when hovered over, change an image on the page to the image that the link or thumbnail represents. can the same be done with a drop down list when an image number is chosen from a list can a centre image be linked with the choice chosen? http://oasisenergyconsultants.com/test.html I have 2 major problems right now: 1. my image is blocking/overlapping the numbers of a numbered list 2. my image has a border around it I can't remove. typically I add border="0", but that doesn't seem to be working this time. as you can see, the border is very visible. I'm hoping someone can give me some pointers to fix these 2 problems.. thanks Hello...I posted a question about this before but it doesn't seem to have caught anyone's eye so I thought I'd try again: http://www.trekandromeda.com/index/news.html http://www.trekandromeda.com/index/home.css I've got this site cross-browser compatible in Firefox, IE7, and Safari and was about ready to put it up for viewing when I discovered that Opera (which I have to consider because some of my community members use it) is reading the lists slightly bizarrely -- if you look at the page above you'll notice that the date/title things are offset oddly from the blue image in a way that they are not in either Firefox or IE. Does anyone know why this is, and if so, does anyone know how to fix it? I really need to get this working soon, and it's the only problem I have left to solve. I recently posted this in the middle of someone else's thread, which wasn't the best thing to do, so here it is again in its own thread. On my web site I have a drop-down menu with a "Go" button beside it. when JavaScript is enabled in Firefox and IE7, selecting an option from the list automatically takes you to that location without touching the Go button. However, when JavaScript is disabled, the drop-down's automatic redirection is also disabled. So you need a "Go" button next to the drop-down bar. This works in Firefox, but it doesn't work in IE7, and I don't know why. Any help would be gratefully received. You can see the drop-down working at: http://www.historyfiles.co.uk/MainFeaturesIndex.htm Here's the script: <table border="0" cellpadding="0" cellspacing="0"> <form method="get" action="" tabindex="3" target="_top"> <tbody> <tr> <td height="16"> <select name="link" class="xbar" onchange="if (this.options[selectedIndex].value != '') location.href=this.options[selectedIndex].value"> <option value="#"> Choose a topic </option> <option value="MainFeaturesIndex.htm"> British Isles </option> </select> <input value="Go" src="images/nav-gobutton.jpg" border="0" value="Go" alt="Go" type="image" class="xGo" tabindex="4" onclick="if (this.options[selectedIndex].value != '') location.href=this.options[selectedIndex].value" width="22" height="16"> </td> </tr> </tbody></form> </table> I got a problem with the list I pasted below. I would like to get rid of the space between the last </dd> and the opening of the <ol> tag. Is their any other way I can do this so I don't have the space between the 2 elements? <dl> <dt>CHAPTER 1:Why HTML Rocks!</dt> <dd>Coding isn't for pussies</dd> <dd>What do you need to know</dd> <dd>Common Mistakes</dd> <ol> <li>Eat</li> <li>Sleep</li> <li>Huh?</li> </ol> </dl> Thanks Hi everyone I am new to these forums and I am having trouble with ordered lists on one of the article on my site: http://boostplace.com/automotives/fitting-a-motorcycle-helmet/ If you look at the list it goes from 1 to 9 then resets to zero. Please can someone help me with this? I am using wordpress 3.2.1 as my cms P.S. I didn't want to link the article properly as this is my first post. Sorry about having to copy an paste. Thanks 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. I am an HTML n00b and don't understand why this simple example is not working as I would like. I want 2 levels of indentation for list items and then I want the next line to be back at the zero margin. However, the last line is coming out indented as far as the previous list item as though the browser is remembering the margin settings for that item. How do I get the last line back to the zero margin? Code: <html>
<head>
<style>
<!--
p.Standard
{margin-top:0cm;
margin-right:0cm;
margin-bottom:0cm;
margin-left:0cm;
line-height:128%;
font-size:11.0pt;
font-family:"Calibri","sans-serif";}
li.Level1
{margin-top:0cm;
margin-right:0cm;
margin-bottom:0cm;
margin-left:0cm;
line-height:128%;
font-size:11.0pt;
font-family:"Calibri","sans-serif";}
li.Level2
{margin-top:0cm;
margin-right:0cm;
margin-bottom:0cm;
margin-left:1cm;
line-height:128%;
font-size:11.0pt;
font-family:"Calibri","sans-serif";}
-->
</style>
</head>
<body lang=EN-AU link=blue vlink=blue style='tab-interval:36.0pt'>
<li class=Level1>This is a list item</li>
<li class=Level2>This is indented</li>
<p class=Standard>I want this back with zero margin</p>
</body>
</html>
|
|||||||