ZeroShade Posted October 11, 2006 Share Posted October 11, 2006 I don't know what to do with this list I have going on. I want it to look nice and fill the area, and be able to look the same on all browsers... can somebody help me with the code? I'm having a brain ######. /* Martin vanPutten, Assignment 2 - Branding And The Web *//* Main Styles */ html, body{ background-image: url(background.jpg); color:#ffffff; font-family:sans-serif, verdana; font-size:10pt;}#title{ position:absolute; top:0px; left:200px;}#navtitle{ position:absolute; top:260px; left:25px; font-style:oblique; color:#ffffff; border-width:3px; border-bottom:solid; border-color:#ffffff;}#nav{ position:absolute; top:300px; left:0px; width:120px;}li{ display:block; float:left; padding:10px;}a{ color:#ffffff; font-style:oblique;}#main{ position:absolute; top:230px; left:200px; display:block; width:600px;}a:link{ text-decoration:none;}a:visited{ text-decoration:none;}#nav a:hover{ text-decoration:underline; border-color:#ffffff; border-style:outset; color:#ffffff;}a:active{ color:#ffffff;} #info{ border-color:#ffffff; border-top:solid; border-width:1px; color:#ffffff; text-align:center; font-size:8pt; position:absolute; top:130%; left:0px;}/* Collectables Styles */#collectpic{ position:absolute; top:200px; left:600px;}/* Products Styles */#letters{ color:#ffffff; text-align:center; border-width:1px; border-bottom:solid; border-top:solid; border-color:#ffffff; list-style-type:none;}#letters a:hover{ text-decoration:underline; border-color:#ffffff; border-style:outset; color:#ffffff;}#a, #b, #c, #d, #e, #f, #g, #h, #i, #j, #k, #l, #m, #n, #o, #p, #q, #r, #s, #t, #u, #v, #w, #x, #y, #z,{ width:500px; border-width:1px; border-bottom:dashed; border-top:dashed; border-color:#ffffff;}#letterprod{ font-size:8pt; font-style:italic;}#infoprod{ border-color:#ffffff; border-top:solid; border-width:1px; color:#ffffff; text-align:center; font-size:8pt;} <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head profile="http://gmpg.org/xfn/11"> <!-- Martin vanPutten, Assignment 2 - Branding And The Web --> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Coca-Cola - Products</title> <link rel="stylesheet" href="styles.css" type="text/css" /> <link rel="stylesheet" href="iestyles.css" type="text/css" /> </head> <body> <div id="title"> <img src="logo.gif" alt="" /> </div> <h2 id="navtitle">Navigation</h2> <div id="nav"> <ul> <li><a href="index.html">Home</a></li> <li><a href="info.html">Company</a></li> <li><a href="flavors.html">Flavors</a></li> <li><a href="diet.html">Diet</a></li> <li><a href="products.html">Products</a></li> <li><a href="collect.html">Collectables</a></li> </ul> </div> <div id="main"> <h1 id="top">Coca-Cola</h1> <h2>Products</h2> <p />Coca-Cola has many products that the company deals in. Here is a list of the products that are current to this date: <p id="letters" /><a href="#a">A</a> - <a href="#b">B</a> - <a href="#c">C</a> - <a href="#d">D</a> - <a href="#e">E</a> - <a href="#f">F</a> - <a href="#g">G</a> - <a href="#h">H</a> - <a href="#i">I</a> - <a href="#j">J</a> - <a href="#k">K</a> - <a href="#l">L</a> - <a href="#m">M</a> - <a href="#n">N</a> - <a href="#o">O</a> - <a href="#p">P</a> - <a href="#q">Q</a> - <a href="#r">R</a> - <a href="#s">S</a> - <a href="#t">T</a> - <a href="#u">U</a> - <a href="#v">V</a> - <a href="#w">W</a> - <a href="#x">X</a> - <a href="#y">Y</a> - <a href="#z">Z</a> <div id="letterprod"> <p /><ul id="a"> <li>A&W</li> <li>Alive</li> <li>Andina Frut</li> <li>Aquactive</li> <li>Aybal-Kin</li> <li>Ades</li> <li>Ambasa</li> <li>Andina Nectar</li> <li>Aquana</li> <li>Alhambra*</li> <li>Andina Fortified</li> <li>Aqua</li> <li>Aquarius</li> <li>Ali</li> <li>Andina Fresh</li> <li>Aquabona</li> <li>Arwa</li> </ul> <a href="#top">Back to top</a> <p /><ul id="b"> <li>Bacardi Mixers*</li> <li>Barq's Floatz</li> <li>Bibo</li> <li>Bimbo Break</li> <li>Bjare</li> <li>BonAqua/BonAqa</li> <li>Burn</li> <li>Bacardi Premium Mixers*</li> <li>Beat</li> <li>Big Crush</li> <li>Bird's Nest*</li> <li>BlackFire</li> <li>BPM</li> <li>Bankia</li> <li>Beltè</li> <li>Big Tai</li> <li>Bistra</li> <li>Boco</li> <li>Bright & Early</li> <li>Barq's</li> <li>Beverly</li> <li>Bimbo</li> <li>Bistrone</li> <li>Bom Bit Maesil</li> <li>Bubbly</li> </ul> <a href="#top">Back to top</a> <p /><ul id="c"> <li>CAFE ZU</li> <li>caffeine free diet Inca Kola</li> <li>Cappy</li> <li>Cepita</li> <li>cherry Coke</li> <li>Citra</li> <li>Coca-Cola Blak</li> <li>Coca-Cola with Lime</li> <li>Coke II</li> <li>Crystal</li> <li>caffeine free Barq's</li> <li>Calypso</li> <li>Caprice</li> <li>Charrua</li> <li>Chinotto</li> <li>Club</li> <li>Coca-Cola C2</li> <li>Coca-Cola with Raspberry</li> <li>Cresta</li> <li>caffeine free Coca-Cola</li> <li>Canada Dry</li> <li>Carioca</li> <li>Chaudfontaine</li> <li>Chinotto light</li> <li>Coca-Cola</li> <li>Coca-Cola Citra</li> <li>Coca-Cola Zero</li> <li>Cristal</li> <li>caffeine free Diet Coke/Coca-Cola light</li> <li>Cannings</li> <li>Carver's</li> <li>Cheers</li> <li>Ciel</li> <li>Coca-Cola Black Cherry Vanilla</li> <li>Coca-Cola with Lemon</li> <li>Cocoteen</li> <li>Crush</li> </ul> <a href="#top">Back to top</a> <p /><ul id="d"> <li>Daizu no Susume</li> <li>DASANI Nutriwater</li> <li>diet Andina Nectar/Andina Nectar light</li> <li>Diet Coke/Coca-Cola light</li> <li>Diet Coke with Lemon/Coca-Cola light with Lemon</li> <li>diet Dr Pepper/Dr Pepper Zero</li> <li>DANNON*</li> <li>Delaware Punch</li> <li>diet Barq's</li> <li>Diet Coke Black Cherry Vanilla</li> <li>Diet Coke with Lime/Coca-Cola light with Lime</li> <li>diet Fanta/Fanta light/Fanta Zero/Fanta Free</li> <li>DASANI</li> <li>diet A&W</li> <li>diet Canada Dry</li> <li>Diet Coke Citra/Coca-Cola light Citra</li> <li>Diet Coke with Raspberry</li> <li>diet Freskyta</li> <li>DASANI Flavors</li> <li>diet Andina Frut/Andina Frut light</li> <li>diet cherry Coke</li> <li>Diet Coke Sweetened with Splenda</li> <li>diet Crush</li> <li>diet INCA KOLA</li> <li>diet Kia Ora</li> <li>diet Master Pour</li> <li>diet Quatro/Quatro light</li> <li>diet Squirt</li> <li>Disney Xtreme Coolers*</li> <li>diet Krest</li> <li>diet Mello Yello</li> <li>diet Schweppes</li> <li>diet Tai/Tai light</li> <li>Dobriy</li> <li>diet Lift/Lift light</li> <li>diet Nestea/Nestea light*</li> <li>diet Seagrams*</li> <li>diet Vanilla Coke</li> <li>Dorna</li> <li>diet Lilt/Lilt Zero</li> <li>diet Oasis</li> <li>diet Sprite/Sprite light/diet Sprite Zero/Sprite Zero</li> <li>Disney Hundred Acre Wood*</li> <li>Dr Pepper</li> </ul> <a href="#top">Back to top</a> <p /><ul id="e"> <li>E2</li> <li>El Rayek</li> <li>Earth & Sky</li> <li>Escuis</li> <li>Eight O'Clock</li> <li>Eva Water</li> <li>Eight O'Clock Funchum</li> &nb Link to comment Share on other sites More sharing options...
S@m Posted October 11, 2006 Share Posted October 11, 2006 Do you have a link so we can see what is happening? Link to comment Share on other sites More sharing options...
ZeroShade Posted October 13, 2006 Author Share Posted October 13, 2006 Do you have a link so we can see what is happening?no i don't, sorry, i guess all u can do is copy and paste it into notepad. Its just a little something i'm working on to get better at the code. Link to comment Share on other sites More sharing options...
ZeroShade Posted October 13, 2006 Author Share Posted October 13, 2006 Can somebody please help me. With its current position it looks really bad in firefox. What can I do to fix this? Link to comment Share on other sites More sharing options...
ZeroShade Posted October 18, 2006 Author Share Posted October 18, 2006 I see that 149 people have looked at this page... does anybody know how to do what I'm asking? Or can it not be done? Link to comment Share on other sites More sharing options...
jesh Posted October 18, 2006 Share Posted October 18, 2006 no i don't, sorry, i guess all u can do is copy and paste it into notepad. Its just a little something i'm working on to get better at the code.The HTML that you posted is being cut off. I think because there is too much of it to post on this forum at once. Perhaps if you simplified the code a bit and posted that, someone here could copy it into a new html file and test it for you.Also, posting a screenshot of what you are seeing may be enough for someone here to suggest an answer. Link to comment Share on other sites More sharing options...
ZeroShade Posted October 19, 2006 Author Share Posted October 19, 2006 Ok, lets see if I can do this right to get the picture up. As you can see, i would like the list of items shown in a single row. Link to comment Share on other sites More sharing options...
ible-white Posted October 20, 2006 Share Posted October 20, 2006 Ok, lets see if I can do this right to get the picture up. As you can see, i would like the list of items shown in a single row. set your display to inline:display:inline Link to comment Share on other sites More sharing options...
ZeroShade Posted October 22, 2006 Author Share Posted October 22, 2006 I switched it to inline, but there not inline... I experimented with the ul li and the div id combined and it doesn't work either... what could I be doing wrong? Link to comment Share on other sites More sharing options...
ible-white Posted October 22, 2006 Share Posted October 22, 2006 ok ZeroShade, i am really not sure exactly what it is that u r looking for. but i came up with this nonetheless. it may not even be what u want tho. good luck. shout back and lets see ur progression. ps- having a site we can look at will be nice tho. <style type="text/css">#prodlist{ font-family:sans-serif, verdana; background-color: #CCFFCC; border: solid 1px #BFCCD7; cursor:text; }#prodlist ul,li{ list-style:none; text-align:left; margin:0 auto; padding:0 1px 0 1px; } #prodlist li{ display:inline; position:relative;}#prodlist a { border-left:1px solid #CFD3E2; font-size: 11px; text-decoration: none; line-height:18px; color: #000000; padding:3px 9px; cursor:text;}#prodlist a:hover{color: #000000;padding-bottom:1px;border-bottom:2px solid red;}</style></head><body><h1>Inline list</h1><div id="prodlist"> <ul> <li><a href="#">ice cream</a></li><li><a href="#">smile</a></li><li ><a class="last" href="#">malt</a></li> <li><a href="#">big </a></li><li><a href="#">sugar city</a></li><li ><a class="last" href="#">water</a></li> <li><a href="#">happy</a></li><li><a href="#">Caribbean</a></li><li ><a class="last" href="#">hide me</a></li> <li><a href="#">Guyana</a></li><li><a href="#">yes yes yes</a></li><li ><a class="last" href="#">Hahahahaaaaa</a></li> <li><a href="#">visit me</a></li><li><a href="#">indent</a></li><li ><a class="last" href="#">house</a></li> <li><a href="#">friendly</a></li><li><a href="#">inline</a></li><li ><a class="last" href="#">www</a></li> <li><a href="#">be happy</a></li><li><a href="#">St. Kitts</a></li><li ><a class="last" href="#">Help</a></li> <li><a href="#">water is the best</a></li><li><a href="#">laugh</a></li><li ><a class="last" href="#">help</a></li> <li><a href="#">i hate frogs</a></li><li><a href="#">coding</a></li><li ><a class="last" href="#">yes and no</a></li> <li><a href="#">whoaaaa</a></li><li><a href="#">css</a></li><li ><a class="last" href="#">flip</a></li> </ul></div></body></html> Link to comment Share on other sites More sharing options...
ZeroShade Posted October 23, 2006 Author Share Posted October 23, 2006 Ok... put up a brief page on geocities... cause its free . Heres the link: http://www.geocities.com/links_chip/products.html Link to comment Share on other sites More sharing options...
boen_robot Posted October 23, 2006 Share Posted October 23, 2006 Exactly what you need to have on one row? That's the thing I'm personally not grasping.If it's the lists of products on each letter, try something like: #letterprod ul {white-space: pre;} or #letterprod ul {white-space: nowrap;} Link to comment Share on other sites More sharing options...
ZeroShade Posted October 23, 2006 Author Share Posted October 23, 2006 Exactly what you need to have on one row? That's the thing I'm personally not grasping.If it's the lists of products on each letter, try something like:#letterprod ul {white-space: pre;} or #letterprod ul {white-space: nowrap;} Yes... I just want it in one row so that its easier to look at. The pre and nowrap don't help though... I don't understand what their suppose to do either? Link to comment Share on other sites More sharing options...
boen_robot Posted October 24, 2006 Share Posted October 24, 2006 Actually, I think that currently, it looks great. Otherwise, horizontal scrollbars will appear and believe me, those annoy people a lot more then a few lines of products.The only way I found to make all products on one line, at resolution of 1280x1024 is giving "#letterprod ul"a width of 1265%.Not only that, but "#letterprod ul" is actually a replacement for the "#a, #b, ..." seletor (which is the same thing, but longer, though more precise. Link to comment Share on other sites More sharing options...
ZeroShade Posted October 24, 2006 Author Share Posted October 24, 2006 Actually, I think that currently, it looks great. Otherwise, horizontal scrollbars will appear and believe me, those annoy people a lot more then a few lines of products.The only way I found to make all products on one line, at resolution of 1280x1024 is giving "#letterprod ul"a width of 1265%.Not only that, but "#letterprod ul" is actually a replacement for the "#a, #b, ..." seletor (which is the same thing, but longer, though more precise.Sorry! I don't mean a horizontal line. I mean a verticle line from top to bottom. Yah, I know... I don't like the horizontal scrollbar either. Sorry to put you through the trouble of finding out 1265%. Is it possible to put it in one verticle line? Link to comment Share on other sites More sharing options...
boen_robot Posted October 24, 2006 Share Posted October 24, 2006 OOOOOOOUUUU!!!! Why didn't you said that from the start?Well, in just a minute I found two ways for that, but the one I reccomend is turning the "li" selector into "#nav li". You might want to also create another style for all "li"s to carry the padding though. It seemed nice. Link to comment Share on other sites More sharing options...
ZeroShade Posted October 24, 2006 Author Share Posted October 24, 2006 OOOOOOOUUUU!!!! Why didn't you said that from the start?Well, in just a minute I found two ways for that, but the one I reccomend is turning the "li" selector into "#nav li". You might want to also create another style for all "li"s to carry the padding though. It seemed nice.Ok... so what i did to see if it would work was... I took all the "A"'s and changed the <li> to <li id="list"> and then in my style sheet, #list li{ display:inline; padding:10px;}But its not doing anything. Whats wrong? Link to comment Share on other sites More sharing options...
boen_robot Posted October 24, 2006 Share Posted October 24, 2006 Ok... so what i did to see if it would work was... I took all the "A"'s and changed the <li> to <li id="list"> and then in my style sheet, #list li{ display:inline; padding:10px;}But its not doing anything. Whats wrong?#nav is the ID of the div containing the navigational list, not the list item itself. Your style would work for all "li" elements that are descendants of the current one, but not on the current one itself. What's with "inline" in this case anyway? It arranges list items as "plain text", not aligning them vertically as you want.It's just that your current style is aimed at ALL li's. You're applying the navigational list's styles over the product's styles. What I'm suggesting is to simply "isolate" that style to serve only where it's needed. Lists display in a vertical line by default anyway. Link to comment Share on other sites More sharing options...
ZeroShade Posted October 24, 2006 Author Share Posted October 24, 2006 I'm not getting this. Somebody told me earlier that the inline would set it "inline"... didn't work anyway. So I took that out... put the div id around the A's only and then set the style sheet like this: #list li{ padding:10px;}I've already used #nav so in this case i'm using #list. Its still not doing anything though. Link to comment Share on other sites More sharing options...
boen_robot Posted October 24, 2006 Share Posted October 24, 2006 I'm not getting this. Somebody told me earlier that the inline would set it "inline"... didn't work anyway. So I took that out... put the div id around the A's only and then set the style sheet like this: #list li{ padding:10px;}I've already used #nav so in this case i'm using #list. Its still not doing anything though.Oh... just... remove the styles for all "li"s (line 39 to 45) and add this right below your "#nav" styles (on line 39), will you?#nav li{ display:block; float:left;}li{ padding:10px;} You'll see the point right after you see the result. Link to comment Share on other sites More sharing options...
ZeroShade Posted October 24, 2006 Author Share Posted October 24, 2006 Oh... just... remove the styles for all "li"s (line 39 to 45) and add this right below your "#nav" styles (on line 39), will you?#nav li{ display:block; float:left;}li{ padding:10px;} You'll see the point right after you see the result. Ohhh! I see... i had another li that was affecting it as well. WOW!! Its so simple now. Thank you very much. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now