Jump to content

Search the Community

Showing results for tags 'list'.

More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • W3Schools
    • General
    • Suggestions
    • Critiques
  • HTML Forums
    • CSS
  • Browser Scripting
    • JavaScript
    • VBScript
  • Server Scripting
    • Web Servers
    • Version Control
    • SQL
    • ASP
    • PHP
    • .NET
    • ColdFusion
    • Java/JSP/J2EE
    • CGI
  • XML Forums
    • XML
    • Schema
    • Web Services
  • Multimedia
    • Multimedia
    • FLASH


  • Community Calendar




Website URL








Found 14 results

  1. Stylng Multiple Lists

    I have 2 lists I am trying to complete in my website. The first list I have is a navigation bar that runs horizontally. I have all of the css and html for that. In addition, under my gallery division I am trying to add another list to replace my table and make it layout similar to the table. When I add my list it is effected by the navigation bar css. To remedy this I added a class to the division that carries nav bar and added that syntax to my list css such as <div class="nav"> and nav, ul {}. This doesn't seem to be helping though. I don't want to give a class for every li or ul and I'm sure it is an easy fix but I need some help. <!DOCTYPE html> <html> <head> <style> * { box-sizing: border-box; } .header, .footer { background-color: #333;; color: lightgrey; padding: 50px; clear: both; } a {color:white;} .clearfix::after { content: ""; clear: both; display: table; } nav, ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #333; position: fixed; top: 0; width: 100%; } .nav, li { float: left; font-family: arial; } .nav, li a { display: block; color: white; text-align: center; padding: 14px 16px; text-decoration: none; } li a:hover { background-color: #111; } #border1 { border: 3px solid #2990EA; padding: 10px; } .birthday { float: left; margin-right: 100px; margin-left: 400px; width:500px; } .footer a { text-decoration: none; clear: both; } .column { background-color: #ebecf6; overflow: hidden; clear: both; } .container { background-color:#909ca2; } div.gallery img { width: 300px; height: 250px; padding: 5px; float: left; margin-bottom: 50px; } .gallery1 { margin-left: 500px; } .table1 { padding:100px; } th { font-size: 200%; } tr { font-size: 150%; } tr, p { margin-left: 200px; } </style> </head> <body style="font-family: sans-serif;"> <div class="nav"> <ul> <li class="li" style="float:right"><a href="#about school">ABOUT SCHOOL</a></li> <li class="li" style="float:right"><a href="#about family">ABOUT FAMILY</a></li> <li class="li" style="float:right"><a href="#about me">ABOUT ME</a></li> <li id="border" style="float:right"><a href="#home">HOME</a></li> </ul> </div> <div class="header"> <h1 style="color: #e9cf76;text-align:center;font-size:300%">About Me</h1> </div> <div class="container"> <div class="gallery"> <img class="gallery1" src="bun.jpg" alt="Trolltunga Norway" width="100" height="100"> </div> <div class="gallery"> <img src="3eb.jpeg" alt="Trolltunga Norway" width="100" height="100"> <div class="gallery"> <img src="westworld.jpg" alt="Trolltunga Norway" width="100" height="100"> </div> <div class="list1"> <ul> <li>Technology Teacher</li> <li>Previously a Manager</li> </ul> <ul> <li>Lamb Karahi</li> <li>Pho Thai</li> </ul> </div> <div class="table1"> <table style="width:100%"> <tr> <th>Job</th> <th>Food</th> </tr> <tr> <td><p>Technology Teacher</p></td> <td><p>Lamb Karahi</p></td> </tr> <tr> <td><p>Previously a Manager</p></td> <td><p>Pho Thai</p></td> </tr> </table> </div> </div> <div class="column content"> <img class="birthday" src="birthday.jpg"> <h1 style="text-align:center;font-size:300%">Who am I?</h1> <p style="font-size: 150%">I have two children and a third on the way. My oldest child's name is Harper and her brother is called Nolan. The third baby gender is a mystery to all but me, and no I won't tell you! Minus the lack of sleep being a parent is the best thing that ever happened to me.</p> <p style="font-size: 150%"> teach technology at MMSA. I am one of the few teachers who can say that they have taught every single grade level. I graduated from Wayne State University with a Bachelor's Degree in Secondary Education in 2011. I have been teaching since 2013. </p> </div> </div> <div class="footer"> <p STYLE="text-align:center"><SPAN id="border1"><a href="https://www.weebly.com/" target="_blank">CREATE A FREE WEBSITE</SPAN></a></p> </div> </body> </html>
  2. Removing specific items from a list

    Hi, I would like to list all the items contained in a folder except for 2 or 3 specific ones. For example, let's say I've item 1, item 2, …, item 10 in /myFolder. I would like to list all the items of /myFolder but item 1, item 3 and item 4. I've come up with the following code which does the work but looks a bit awkward. <?php $dir = '/myFolder'; $filesDir = new FilesystemIterator($dir, FilesystemIterator::SKIP_DOTS); $fileName = ''; foreach ($filesDir as $file) { $fileName = $file->getBasename(); if ($fileName != 'item1' && $fileName != 'item3' && $fileName != 'item4') { echo $fileName.'<br>'; } } Is there a simple and more elegant way to accomplish this? Any help would be appreciated, thanks!
  3. Good Day to All. I have a website to display my artwork and poetry. In the poetry section there is the main page with links to other pages and also an anthology which lists my poems by title, the titles are linked to a page to view the poems in their entirety. When you click the link to any poem, that page also displays the anthology so that you can easily navigate to the next poem that interests you without having to return to the main poetry page. The problem I find myself with is that when I want to add a new poem to the anthology I need to edit every page that contains that list. Not something I am interested in doing. I created the website from scratch several years ago and am just a novice, nothing fancy. I have searched the internet for answers but have yet to find what I am looking for. I would like to create the Anthology as a list of links on a separate page/file that can be referenced/sourced in each poetry page that would display the list. In this manner I only have to edit one page and those changes will reflect on all the associated pages. This is the navigation portion of the code that reflects the links desired; <div id="nav"> <ul> <li><a href="../index.html">Home Page</a></li> <li><a href="../aboutartist.html">About the Artist</a></li> <li><a href="../all-art.html">Gallery</a></li> </ul> <h2>Anthology</h2> <ul> <li><a href="achildcries.html">A Child Cries</a></li> <li><a href="addedupon.html">Added Upon</a></li> <li><a href="brokenflowers.html">Broken Flowers</a></li> <li><a href="deadlovers.html">Dead Lovers</a></li> <li><a href="dreamchaser.html">Dream Chaser</a></li> <li><a href="ebb.html">Ebb</a></li> <li><a href="eyes.html">Eyes</a></li> <li><a href="inthedark.html">In The Dark Recesses of Our Soul</a></li> <li><a href="luna.html">Luna</a></li> <li><a href="myancientpictographs.html">My Ancient Pictographs</a></li> <li><a href="raindrop.html">Rain Drop on the Back Porch Railing</a></li> <li><a href="restlessthenight.html">Restless The Night</a></li> <li><a href="summer.html">Summer</a></li> <li><a href="tameroftheuniverse.html">Tamer of the Universe</a></li> <li><a href="thankyouchild.html">Thank You Child</a></li> <li><a href="theburning.html">The Burning</a></li> <li><a href="unopenedbooks.html">Unopened Books</a></li> <li><a href="whereangelstread.html">Where Angels Tread</a></li> </ul> </div> Ideally, all the links below <h2>Anthology</h2> would be referenced/sourced from a different page/file. My difficulty is two fold. 1. How to source the link. I have tried javascript (which i do not know); <script src="../Poetry List/poetrylist.js"></script> This was the closest thing I could find that might get me where I want. 2. how to create/format the source page that contains the information. currently it is saved as .js Here is the poetry page of the website;http://sagebrushart.com/Poetry.html Any and all help would be greatly appreciated.
  4. Down here the code to call a function it works with list. I dont understand how list works, In my example list gives a survey of 2 arrays that are executed inside the function here is how I call the function: $row = list ($variable, $number) = my_function(); var_dump($row); the output is like this: I need the values separated but how can I list the second array (the one with the numbers) as single numbers outside an own function?
  5. drop-down list problem

    Hello & Thanks , I have a small DropDownList with 3 options . Problem is when I select , let's say , 2nd option . No probs , a new page is opened . If I click on option 1 or 3 , no probs . However , if I click on 2nd option again , instead of clicking on 1 or 2 , no new page is opened . Is there a way to correct this , so that clicking on whatever always opens a new window . Thanks...Vern <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>myFavs-HtmlProbs.html</title> <meta name="Generator" content="PureBasic"> <meta name="Description" content="Your description here..."> <meta name="Description" content="...Created by myFavs % PureBasic..."> <style type="text/css"> </style> </head> <body text="#000000" style="background-color:#A69E80; text-align:center;"> <br> <br> <br> <!--dd <div style=--> <table width="100%" border="0" style="text-align:center" cellspacing="0" cellpadding="0"> <tr style="text-align:center"> <!-- EXAMPLE: <MenuName="aaMost-Used"> --> <!-- rgb(250,240,255) --> <select style="width:200px; font:14px Arial Black; color:rgb(0,0,0); background- color:rgb(231,169,126);" name="menu" onchange="window.open(this.value)"> <option selected="0" value="">aaMost-Used</option> <option value="http://alternativeto.net/">AlternativeToSoftwares</option> <option value="https://www.biblegateway.com/reading-plans/chronological/today? version=NLT">One Year Chronological Bible NLT</option> <option value="http://www.portablefreeware.com/">portablefreeware.com/</option> </select></td></tr></table><br></body></html>
  6. foreach loop with list / array

    My goal is to loop with foreach through two variables. So I found this script; <?php $abc = array('Mark','Laura'); $add = array('cocktails','champagne'); $array = array($abc,$add); foreach ($array as list($arr1, $arr2)) { // echo '<br>'; echo '<br>'; echo $arr1; echo '<br>'; echo $arr2; } But the output is not wat is desired. It says: And I would rather have: Is there any function / command in the php array reference to do this or should other code be used?
  7. Horizontal list paging

    Hi! I would like to create a horizontal list and fill its elements dynamically, so I don't know how many elements the list will contain of. The width of the list is 100% and I'd like to have just one single line. If there are too many elements I would like to make pages, i.e. the list slides to the left and shows the next elements. Is it possible to create such a paging option using css or do I have to code this in Javascript. If its only possible to do it in javascript, how could I realize this? Thank you in advance for your help. loggo
  8. I can't get my nav-bar align in the center

    The problem is that I can't get my nav-bar align in the center. This is my code: <div id="nav"><ul><li><a href="startpagina.html">Startpagina</a></li><li><a href="zomercollectie.html">Zomercollectie</a></li><li><a href="wintercollectie.html">Wintercollecite</a></li><li><a href="kerstcollectie.html">Kerstcollectie</a></li><li><a href="contact.html">Contact</a><ul><li><a href="contact-voor-particulieren.html">Contact voor particulieren</a><li><a href="contact-voor-bedrijven.html">Contact voor bedrijven</a> </ul><li><a href="over-ons.html">Over ons</a></li></ul> <br class="clearboth"/></div> .clearboth { margin: 0; padding: 0; clear: both;} #nav { font-family: verdana; font-weight: bold; font-size: 9pt; margin: 10px auto 10px auto; text-align: center;} #nav ul { margin: 0; padding: 0; list-style: none; text-align:center;} #nav a:link,#nav a:visited { color: #ffffff; text-decoration: none;} #nav a { display: block; padding: 6px 8px;} #nav li { float: left; background-color: #44A04D; margin-right: 1px; position: relative; width:15%;} #nav li li{ width: 100%; margin-top: 1px;} #nav li:hover { background-color: #006837;}#nav li li:hover { background-color: #006837;} #nav ul ul { position: absolute; visibility: hidden;} #nav ul ul ul{ position: absolute; left: 100%; top: -2px; border: solid 1px transparent;} #nav li:hover > ul { visibility: visible;} .right-arrow { float: right;} Can anyone solve my problem?
  9. CSS - Hover Over 1 List Item

    Hello, I am very new to CSS and HTML and have been learning since last week, so i hope someone can help me. I have a list, please see the HTML below, I want to make the list item 'Sparkling', sparkle when hovered over. I thought the CSS code below might make it sparkle, but that makes the entire list sparkle on hover - can anyone help me please?! Thank you! HTML<div class="container_12 clearfix"> <div id="header" class="grid_12"> <h1>Lacosta Wines</h1> <div id"nav"> <ul> <li><a href="index.html">Home</a></li> <li><a href="">Red</a></li> <li><a href="">White</a></li> <li><a id="sparkle" href="">Sparking</a></li> <li><a href="">Fine Wines</a></li> <li><a href="">Wine Tastings</a></li> </ul> </div> </div> CSSa:hover, #sparkle {background-image:url('http://www.addglitter.com/link-sparkle.gif');}
  10. Solution for negative padding attribute

    I have a table with two columns and three rows (6 cells). In each cell, I have a "header" and then a list of links. This list can vary from 1 link to 5+ and is subject to change. The client does not like how much white space there is between the the last item in the list, and the next header. I haven't set the cellpadding or cellspacing attributes, so I'd assume that they are 0 since not specified. The attribute that would work perfectly for my solution- cell padding, does not support negative values. :-( Does anyone else have any ideas? Many Thanks,Jg
  11. I'm trying to create a dropdown menu effect here http://cbd-alpha.com/ideal/But I'm stuck with how to get the menu items under the "about" menu item to stack vertically like a standard dropdown. Here's the CSS: #mainNav { margin: 82px 0 0 160px;}#mainNav ul {list-style-type: none;padding-top: 8px;}#mainNav li { float: left; padding-left: 21px;}#mainNav li:first-child { padding-left: 80px; background: none;}#mainNav a { text-decoration: none; padding: 0px 10px; font: normal 14px "ITCAvantGarde", Helvetica, Arial, sans-serif; color: #FFF;}#mainNav ul ul { display: none;}#mainNav ul ul li { padding-left: 0 !important; z-index: 999 !important;}#mainNav ul ul ul { }#mainNav ul ul a { }#mainNav li:hover > a,#mainNav ul ul :hover > a { color: #afc2d1;}#mainNav ul ul a:hover { }#mainNav ul li:hover > ul { display: block;} And here's the css of a similar menu: #mainNav { margin: 0 auto; position: relative; width: 1000px; z-index: 101; } #mainNav ul { border-left: 1px solid #CCCCCC; border-right: 1px solid #FFFFFF; float: left; height: 37px; list-style: none outside none; margin: 0 auto; padding-left: 0; position: relative; z-index: 100; } #mainNav li { border-left: 1px solid #FFFFFF; border-right: 1px solid #CCCCCC; float: left; position: relative; } #mainNav a { color: #8D8C8C; display: block; font: 18px/38px "GothamBoldRegular",Helvetica,Arial,sans-serif; height: 37px; padding: 0 11px; text-decoration: none; text-transform: uppercase; } #mainNav ul ul { border: medium none; display: none; float: left; left: 0; position: absolute; top: 38px; width: 260px; z-index: 99; } #mainNav ul ul li { background: url("images/nav_bg_hover.png") repeat scroll 0 0 transparent; border: medium none !important; float: none; padding: 0 !important; } #mainNav ul ul ul { left: 100%; top: 0; } #mainNav ul ul a { background-image: none !important; border-bottom: 1px dotted #FFFFFF; color: #FFFFFF; font-weight: normal; height: auto; line-height: normal; overflow: hidden; padding: 10px !important; position: relative; text-transform: capitalize; width: 240px; z-index: 99; } #mainNav li:hover { color: #6A99C8; } #mainNav li:hover { background: url("images/nav_a_hover.jpg") repeat-x scroll center bottom transparent; } #mainNav li:hover li { color: #FFFFFF; } #mainNav ul ul li:hover a { background: url("images/nav_bg_hover.png") repeat scroll 0 0 #56A1D5 !important; } #mainNav ul li:hover > ul { display: block; } How do I stack them vertically?
  12. CSS: 2 columns

    I have this menu with tabs on it for deferent info on products. The problems is that in this tab i added a list of two columns, but the info i placed on the list wont show. I dont have problems with the other tabs, thinking there might be a problem on the css or bad sintax.Code on css: #lateral_X{width: 100px;background-color: #CCCCCC;float:left;}#lateral_Y{margin-left:190px;background-color: #FFFFFF;border:#000000 1px solid;} code HTML <div id="panel_02"> <div id="lateral_X"> <li><p>Functions</p></li> <li><p>blablabla</p></li> <li><p>blablabla</p></li> <li><p>*Product</p></li> <li><p>*Product</p></li> <li><p>*Product</p></li> <li><p>*Product</p></li> </div> <div id="lateral_Y"> <li><p>Functons</p></li> <li><p>blablabla</p></li> <li><p>blablabla</p></li> <li><p>*Product</p></li> <li><p>*Product</p></li> <li><p>*Product</p></li> <li><p>*Product</p></li> </div></div>
  13. IE Compatability Issues with List

    I'm having issues with a list displaying properly, or at least how I'd like it to, in IE. It shows up like so in Firefox and Safari: With IE, the circles around the list items are squares. Does anyone have a fix for this? Here is the CSS for the list: .circlemenu{width: 100%;overflow:hidden;margin: 1.2em 0em} .circlemenu ul{margin: 0;padding: 0;font: bold 14px Geneva, Arial, Helvetica, sans-serif;list-style-type: none;text-align: left; /* "left", "center", or "right" align menu */margin: 0em 0em 0em 10em} .circlemenu li{display: inline;} .circlemenu li a{display:inline-block;text-align:center;text-decoration: none;border: solid 1pt #555555;color: #555555 ;margin: 0;margin-right:6em; /*right spacing between each link */width: 6em;height: 6em;border-radius: 4em; /*really large border radius to create round borders*/-moz-border-radius: 4em;-webkit-border-radius: 4em;} .circlemenu a span{position:relative;top:40%;} .circlemenu li a:visited{color: white;} .circlemenu a:hover{border: solid 1pt #CC0000;color: #CC0000;}
  14. Problem with unneeded spaces at list

    Hello,I'm having an unusual problem with CSS. Here is a picture of a problem. I pointed the "arrows" to these unneeded spaces,there should be just an border together,not having a space. Here is a code: .h-wrapper ul { width: 97%; height: 60px; position: relative; float: left; left:18px; background-color: rgba(50,50,50,0.98); -webkit-border-radius: 0 0 3px 3px; -moz-border-radius: 0 0 3px 3px; -khtml-border-radius: 0 0 3px 3px; border-radius: 0 0 3px 3px; box-shadow: 0 0 10px rgba(201,150,48,0.75); -moz-box-shadow: 0 0 10px rgba(201,150,48,0.75); -webkit-box-shadow: 0 0 10px rgba(201,150,48,0.75);} .h-wrapper ul li { list-style-type: none; height: 50px; width: 100px; line-height:60px; float: left; text-align: center; border-right: 1px rgb(201, 150, 48 ) solid; border-left: 1px rgb(201,150,48) solid; padding: 5px 0; /* Fixes border cut */} .h-wrapper ul li:hover { background-color:rgba(201,150,48,0.75);} I tried margin,padding,everything,didn't work And the problem isn't at HTML,everything is OK there ^^