|
CSS - Nested Lists : Categories Underneath 'children'?
hello, this will perhaps sound like a crazy thing to do, but i am trying to style my nested list(s) in order for the 'category' to appear below its children.
so rather than having, for example sport football cricket formula one i have football cricket formula one sport the reason for trying this is that i am hoping to display my lists at various positions along a base line (over a bg image) and certain positions within the image require the category name to be under the 'children'. is it possible though? i tried making the inner list's position to be relative and adjusting the top position to -20 etc but of course this brings the children up rather than push the category down. here is an example of my nested list Code: <ul> <li>sport <ul class="up"> <li>football</li> <li>f1</li> </ul> </li> <li>music <ul class="up"> <li>stuff</li> <li>stuff2</li> </ul> </li> </ul> it probably isn't possible but i thought i would ask before giving up on the idea completely. thank you for your time Similar TutorialsOK i have a nested list: PHP Code: <div id="sideMenu"> <ul> <li><a href="">Menswear</a> <ul> <li><a href="">Shalwar</a></li> <li><a href="">Shalwar2</a></li> </ul> </li> <li><a href="">Womenswear</a></li> <li><a href="">Jewelry</a></li> </ul> </div> i am applying css to it! i want to set the background of the LI to be one colour but i want the background of the nested lists to be another. but what is happening (and its not really a bug) is that whne i apply the background colour to LI this colour also goes behind the nested lis? http://www.zahra-zahra.com/fullpage.html i am talking about the side menu (purple and light purple) is there a "fix"? I'm looking to use lists to create 2 columns of info: Info 1 Info A Info 2 Info B Presumably I would do this like (excuse the inline style): Code:
<ul style="display:inline">
<li style="display:inline">
<ul style="display:inline">
<li>Info 1</li>
<li>Info 2</li>
</ul>
</li>
<li style="display:inline">
<ul style="display:inline">
<li>Info A</li>
<li>Info B</li>
</ul>
</li>
</ul>
This outputs: Info 1 Info 2 Info A Info B I'm also looking to do a mix of images and text in a list, but have alignment issues. Code: <ul style="display:inline;list-style:none"> <li style="display:inline">Some</li> <li style="display:inline">random</li> <li style="display:inline">words</li> <li style="display:inline">with</li> <li style="display:inline">an</li> <li style="display:inline"><img src="mypic.jpg"></li> <li style="display:inline">mixed</li> <li style="display:inline">in</li> </ul> Is this bad practice? Should I just make a table, or a seperate div to contain the images and text apart from each other? Tia! PS. Hi Kravvitz :P ok i would like to have on my nested list 1.1 and 1.2 instead of 1? ie Code: 1. hhh 1.1 jjj 1.2 kkk 2. kkk 2.1 kkkk etc but currently if i have the list-style-type as decimal the inner list comes out as just 1,2,3 etc... is it even possible to do this? Hi I found it: ********************** Code:
#tableLeftCol ul.menu li#current a {
background-image: url('../images/menu-active-rect.gif');
background-position: right top;
background-repeat: repeat-y;
}
#tableLeftCol ul.menu li#current ul li a {
background-image: none;
}
*************************** I have a nested list representing a menu. I want the active menuitems (listitem) link to have a background image. When active menuitem is a parent then all the childs also get the background image...... How to I change the CSS so only active menuitems link get the background image set, and not the child links of the parent? If possible, I want to make it work without changing any in the HTML! Here is current CSS and list structu Code:
#tableLeftCol ul.menu li#current a {
background-image: url('../images/menu-active-rect.gif');
background-position: right top;
background-repeat: repeat-y;
}
#tableLeftCol ul.menu li ul li#current a {
background-image: url('../images/menu-active-rect.gif');
background-position: right top;
background-repeat: repeat-y;
}
Code: <div id="tableLeftColPadding"> <ul class="menu"> <li id="current" class="parent active item54"> <a href="/index.php?option=com_content&view=article&id=48&Itemid=54"> <span>Parent</span> </a> <ul> <li class="item57"> <a href="/index.php?option=com_content&view=article&id=50&Itemid=57"> <span>Child-A</span> </a> </li> <li class="item81"> <a href="/index.php?option=com_content&view=article&id=71&Itemid=81"> <span>Child-B</span> </a> </li> <li class="item59"> <a href="/index.php?option=com_content&view=article&id=52&Itemid=59"> <span>Child-C</span> </a> </li> </ul> </li> </ul> </div> This seems odd to me to even bother putting this up here, as I'm guessing it is a simple fix. I'm familiar with css and html, so I hate to post this, but it is a pressing matter that I'm drawing a blank on. I'll post the HTML and CSS below, as I don't have a live location I can place it as an example. Hopefully someone will pop open dreamweaver and take a few minutes to help me out The div 'main' contains the divs 'rightColumnPartners' , 'mainContentPartners', and 'leftColumn'. However, main does not push down to contain the content of those children divs. Maybe I'm missing something elementary and simple, but it seems considering main encompasses these divs, it should stretch downways to contain the content within them. Below is the HTML and CSS, again I apologize for not having an example page up, but it is pretty basic and should be easy to visualize. ---------------- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <link href="main.css" media="all" rel="Stylesheet" type="text/css" /> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <meta name="keywords" content=""> <meta name="description" content=""> <title>Test</title> </head> <body> <div id="topSection"> </div> <!--close of topSection --> <div id="header"> <div id="mainnavigation"> </div> <!--close of mainnavigation --> </div> <!--close of header --> <div id="main"> <p>test</p> <p>test</p> <p>test</p> <p>test</p> <p>test</p> <p>test</p> <div id="leftColumn"> </div> <!--close of leftColumn --> <div id="rightColumnPartners"> <div id="mainContentPartners"> <h2 class="darkHeader"> Partners </h2><br /> <h2 class="darkDescriptionBold">Filler Partner </h2> <h2 class="darkDescriptionPartners">This would be the first partner and the information that pertains to them. Fill this spot with appropriate descriptive content and possibly contact information for the partner.</h2> <br /> <h2 class="darkDescriptionBold">Filler Partner Two</h2> <h2 class="darkDescriptionPartners">This would be the first partner and the information that pertains to them. Fill this spot with appropriate descriptive content and possibly contact information for the partner.</h2> <br /> <h2 class="darkDescriptionBold">Filler Partner Three</h2> <h2 class="darkDescriptionPartners">This would be the first partner and the information that pertains to them. Fill this spot with appropriate descriptive content and possibly contact information for the partner.</h2> <br /> <h2 class="darkDescriptionBold">Filler Partner Four</h2> <h2 class="darkDescriptionPartners">This would be the first partner and the information that pertains to them. Fill this spot with appropriate descriptive content and possibly contact information for the partner.</h2> <br /> <h2 class="darkDescriptionBold">Filler Partner Five</h2> <h2 class="darkDescriptionPartners">This would be the first partner and the information that pertains to them. Fill this spot with appropriate descriptive content and possibly contact information for the partner.</h2> <br /> <h2 class="darkDescriptionBold">Filler Partner </h2> <h2 class="darkDescriptionPartners">This would be the first partner and the information that pertains to them. Fill this spot with appropriate descriptive content and possibly contact information for the partner.</h2> <br /> <h2 class="darkDescriptionBold">Filler Partner Two</h2> <h2 class="darkDescriptionPartners">This would be the first partner and the information that pertains to them. Fill this spot with appropriate descriptive content and possibly contact information for the partner.</h2> <br /> <h2 class="darkDescriptionBold">Filler Partner Three</h2> <h2 class="darkDescriptionPartners">This would be the first partner and the information that pertains to them. Fill this spot with appropriate descriptive content and possibly contact information for the partner.</h2> <br /> <h2 class="darkDescriptionBold">Filler Partner Four</h2> <h2 class="darkDescriptionPartners">This would be the first partner and the information that pertains to them. Fill this spot with appropriate descriptive content and possibly contact information for the partner.</h2> <br /> <h2 class="darkDescriptionBold">Filler Partner Five</h2> <h2 class="darkDescriptionPartners">This would be the first partner and the information that pertains to them. Fill this spot with appropriate descriptive content and possibly contact information for the partner.</h2> <br /> </div><!--close of mainContentPartners --> </div> <!--close of rightColumnPartners --> </div> <!--close of main --> <div id="footer"> </div> <!--close of footer --> </body> </html> ---------------- @charset "UTF-8"; /* CSS Document */ /**********************/ /* CONSISTENCY CODE */ /**********************/ * { margin: 0px; padding: 0px; font-size: 24px; } /**********************/ /* POSITIONING CODE */ /**********************/ #mainnavigation { background: #1E0F08; height: 36px; width: 100%; } body { height:100%; background: url(bg_gradient.jpg) SaddleBrown repeat-x; } #homecontainer { width: 100%; height: 100%; /*height: auto;*/ position:relative; } #topSection { width: 1000px; height: 30px; background: #754221; margin: auto auto; border-width: medium; border-color: #432306; border-left-style: solid; border-right-style: solid; } #header { background: url(header_bg.jpg) repeat-x bottom; height: 123px; border-width: thin; border-color: #d29553; border-top-style: solid; border-bottom-style: solid; } #titleimage { margin-top: 0px; padding-left:0px; float: left; left: 0; position: absolute; } #main { width: 1000px; /*background: #703b1b;*/ background: red; margin: 0 auto; border-width: medium; border-color: #432306; border-left-style: solid; border-right-style: solid; clear:both; } #leftColumn { width: 20%; margin-left: 0px; position: relative; background: black; height: 100%; height:600px; border-width: medium; border-color: #432306; border-right-style: solid; float: left; } #rightColumnPartners { width: 70%; float: left; background: white; } #mainContent { margin: 40px auto 0; background: url(../images/solutionsProven.jpg) no-repeat; width: 619px; } #mainContentPartners { margin: 40px auto 0px; /*background: url(emptybackground.jpg) no-repeat #FFDFB9;*/ width: 611px; background: blue; } #footer { background: #190B08 ; height:67px; border-width: thin; border-color: #d29553; border-top-style: solid; border-bottom-style: solid; position:relative; clear:both; } .darkHeader { color: #edbb8a; font-size: 90%; font-family: "Arial","Trebuchet MS",sans-serif; padding-left: 15px; padding-top: 10px; } .darkDescriptionBold { color: white; font-size: 14px; font-family: "arial","helvetica",sans-serif; font-weight: 800; padding-left: 20px; padding-right: 15px; width: 90%; } .darkDescriptionPartners { color: white; font-size: 12px; font-family: "arial","helvetica",sans-serif; font-weight: 200; padding-left: 20px; padding-right: 15px; width: 70%; } ----------------- Thanks again. ~SS I am converting a working table layout to a better div layout. One problem is that the height of the rows, which in a table layout would effectively be the height of the tallest cell, is being set to 0 in my divs. I basically have this nested structure Code:
<div id="tabl" style="position:absolute;">
<!-- not important, this is basically a container div--!>
<div class="row" style="position:relative;">
<!-- important, relative is the only way i know
how to arrange children by % values --!>
<div class="cola" style="position:absolute; left:25%; width:25%;">
</div>
<div class="colb" style="position:absolute; left:50%; width:25%;">
</div>
<!-- more cells --!>
</div><!--closes the row --!>
<div class="row"><!-- same as above, the structure repeats--!>
</div>
</div>
that's not a copy/paste of the actual code, just an adaptation highlighting what's important. The columns align perfectly, the problem is that the height of the rows is 0, and so the rows all overlap. Setting the height of row to 100px proved this basically. I could set height to a value large enough so that overlapping becomes unlikely, but I would much prefer to have the height automatically assume the value of the height of the tallest child, much like auto, but available to an element whose position is relative. if you want to see a live model of the actual code you can see it at: http://www.drfool.net/test/articles/ As you can see, the rows overlap. If there is no way to solve this problem in the way I described, I'm open to suggestions (so long as they don't involve table layout and/or something silly like frames) thank you PS, it's 5 in the morning and I'm going to sleep. I'll verify any suggestions in the afternoon when I wake up. Side note, that entire wing of the website is basically dead, so no need to tell me "the links don't work, the images don't load" UPDATE: Ha ha, the code works exactly as desired in IE (IE ignores height:100px, which is actually what I wanted in this case, to demonstrate my problem, irony) but not in FF3, which is my target browser. UPDATE: made the code more clear Pretty much what the title says. I have a parent div that I fill up up floating div's using javascript, but the parent won't grow. Only ie7 is a problem. To see the problem... Link is here... http://esteemforthehome.stealthwd.c...electedPageID=7 Add a couple products to the cart, click on "View Cart"... Filling in shipping info and click "Calculate Shipping". Its the "viewCartShippingOptions" div that doesn't expand. Thanks in advance Hi, I want to get the footer (copyright notice) to appear below the all of the others. Basically I want it to appear below the left and right navbars, but in the centre of the page. The site is www.freesitetips.com. Can anyone help? Thanks! Im really new to this so please forgive the stupid questions. I have a logo div and I want to output a bit of PHP to the right of the logo. I put my code right after the header div and it places the output under the image, not to the right. Here is my code: Code: <h1 id="logo"><a href="<?php echo $this->getUrl('') ?>"></a></h1>
<img src="cart.jpg" alt="Cart" />
<?php $_cartQty = $this->getSummaryCount() ?>
<?php if ($_cartQty>0): ?>
<?php echo $this->__('There are <a href="%s"><strong>%s items</strong></a> in your cart.', $this->getUrl('checkout/cart'), $_cartQty) ?>
<?php echo $this->__('Cart Subtotal:') ?> <strong><?php echo Mage::helper('checkout')->formatPrice($this->getSubtotal()) ?></strong>
<?php if ($_subtotalInclTax = $this->getSubtotalInclTax()): ?>
<br />(<strong><?php echo Mage::helper('checkout')->formatPrice($_subtotalInclTax) ?></strong> <?php echo Mage::helper('tax')->getIncExcText(true) ?>)
<?php endif ?>
<?php endif; ?>
<?php if($_cartQty && $this->isPossibleOnepageCheckout()): ?>
<div class="actions">
<button class="form-button" type="button" onclick="setLocation('<?php echo $this->getCheckoutUrl() ?>')">
<span><?php echo $this->__('Checkout') ?></span>
</button>
</div>
<?php endif ?>
<?php $_items = $this->getRecentItems() ?>
<?php if(count($_items)): ?>
<?php echo $this->__('Recently added item(s)') ?>
<?php foreach($_items as $_item): ?>
<?php echo $this->getItemHtml($_item) ?>
<?php endforeach; ?>
<script type="text/javascript">decorateList('cart-sidebar', 'non-recursive')</script>
<?php else: ?>
<?php echo $this->__('You have no items in your shopping cart.') ?>
<?php endif ?>
Red is the code im trying to position. Attached is an image showing at the top what it is currently, and then at the bottom what im trying to achieve. Is the best way to do this to create a seperate DIV with float right or something along those lines? In css I can get 2 objects to display on right hand side at top of page easy enough. I don't want to use absolute positioning for an object's position. I have to position an object relative to another object eg this object should go underneath this object, can i do this ? I use this , and is this the best way you can do it? position:relative; right=-240;top=0 Greetings, friends! I have a quick question about CSS. I am fairly versed in CSS 2.0 and the selectors that are used within. However, I am not sure if any specific type of selector is available to help me do what I want. I am looking for a selector that will define styles for an element that contains specific children. To give you an example, let's say that I have an image on my page. That image is assigned the class of "alignleft". Now, let's say that I make that image into a link. I would like to find a CSS selector that allows me to assign style definitions to that link. Let's say my code looks like: Code: <a href="http://www.example.com/"><img src="example-pic.png" class="alignleft" alt="Example Picture" /></a> Now, I know if it was the other way around: Code: <a class="alignleft" href="http://www.example.com/"><img src="example-pic.png" alt="Example Picture" /></a> I could use something like: Code: .alignleft > img However, I am not sure if there is any way to go up a level in CSS. I would envision it looking something like: Code: a < img.alignleft but I can't find anything in the CSS spec that refers to instances like that. Does anyone know of anything? For instance, I would want a spec that looks something like: Quote: E < F - Matches any E element that is the parent of an element F. The specific reason I'm looking for something like this is that I am using the class of "external" to assign a background image to all of my links that lead away from our Web site. However, if that link is an image rather than text, I want to set the background of my link to "none" so that the background image does not interfere with the image itself. Any help would be greatly appreciated. Thank you. Hi, I have the following code and under the main menu, it's a space as you can see under Contact for example for the entire menu. If I want to move down the menu with margin-top, the bottom will exceed the bottom of logo.png image. How do I insert an image here ? http :// imageshack.us/photo/my-images/600/44485569.jpg/ this is css code body { margin: 0; padding: 0; border: solid 1px black; } #nav { position: relative; margin: 0px auto; width: 960px; padding: 10px 0px 10px 0px; border: solid 1px red; } ul { list-style-type: none; margin: 0; padding: 0; font-family: Georgia; font-size: 21px; } ul a { text-decoration: none; padding-left: 25px; padding-right: 25px; display: block; color: #843bbb; } ul a:hover { color: #bd66ff; } ul a:visited { color: orange; } li { float: left; } How can I achieve same positioning with logo on left side, menu on right side, and I want somehing like an add in the middle using float and divs and not a table ? Thanks. I have pictures lined up horizontally in a content box, which is fine. The issue I am having is having links beneath each picture. The issue I have is that all of the links bunch up next to the last picture horizontally and don't appear on a separate line underneath the images. HTML Code: <div id="content"> <h2>Pictures from Events</h2> <ul class="hoverbox"> <li> <a href="#"><img src="images/TEST1.jpg" alt="description" /><img src="images/TEST1.jpg" alt="description" class="preview" /></a> </li> <li> <a href="#"><img src="images/TEST1.jpg" alt="description" /><img src="images/TEST1.jpg" alt="description" class="preview" /></a> </li> <li> <a href="#"><img src="images/TEST2.jpg" alt="description" /><img src="images/TEST2.jpg" alt="description" class="preview" /></a> </li> <li> <a href="#"><img src="images/TEST3.jpg" alt="description" /><img src="images/TEST3.jpg" alt="description" class="preview" /></a> </li> </li> </ul> <p id="links"><a href="#"> Epic Fridays| </a> <a href="#">Zen West </a> <a href="#">|Green Turtle </a> <a href="#">|Craig's </a> </div> CSS Code:
#content { float: right; width: 560px; height: 300px; color:#2C5923; background-image:url(images/Picscontent2.jpg); background-repeat: no-repeat; padding-top:20px; padding-left:20px;
Help! Could someone please have a look at the website I'm making at brandnewcommunicatie.nl/mall? Problem is: I've created a simple table to display text and an image next to eachother. However, the textcolumn is under the image. I'm posting it here, because I'm fairly certain it's a CSS related problem. Probably some value in my CSS that isn't right. I just don't see it, after staring at the code for hours. I'd really appreciate it if someone can figure this one out Hi, I'm new to this forum I hope someone can help. I'm using a jquery slidemenu to make menus pop down from a ul but I'm having trouble in that when the menu opens up, it opens behind a div below. Any tips much appreciated Thanks **sorted myself found a position relative on some bit being underlapped i have a scrolling marquee. when the drop down menu extends, couple of the items gets hidden underneath the marquee container. when i define z-index:-1 then the marquee container disappears on the screen. does anyone have a suggestion for this? thanks. btw. it only happens in IE http://gcterminal.mallfinder.com/index.cfm?refresh=1&showdebug=1 I'm having problems with a javascript rotating picture overlapping my drop down menu! I've fiddled around the the z-index but cant seem to get the drop down menu to drop ABOVE the picture. Everything is contained inside my <div id="wrapper"> and my layout scheme works like: Banner = top image ("Why won't my drop menu's show up") the image extends all the way down to the menu, and then the navigation is just words that go on top of the menu texture i've made. The only gif im using in the #nav is for the small yellow triangle for the roll over effect on the menu's. I get the white and menu bar on the sides because i just made the background a 40px height by 10px width image the sample and had it repeat in x only and then set background colour to that grey. My images are all inside the .main_view div id. Any help is appreciated! you can see my problem he htmltest2.weebly.com What do i need to do to fix this?! I'm using a free template that is utilizing a custom font called "chewy" I have custom font "Fortuna dot" that I'd like to use instead, however the only way I've found online to edit this is using a plugin. There must be a way to do it without a plugin because the template is doing so. Can any one help? Also I would like to remove the categories from the page and move the navigation bar there instead. Please please help me. I have the CSS for dummies book and I still can't figure it out. SITE: havenhart[dot]com Hi there, I have a content glider script, but I have added it to a wrapper with a background image. The css is using a white background colour so when a new layer is glided up, it covers the one underneath it. However, I want the background to be transparent to show the background image underneath.... If I remove the white background, they layers become transparent and overlay each other, so you can see all text in the layers on top of each other making it impossible to read. Is there anyway I can make it so it has a transparent background, but so it will not show the content under the new slide? This is my CSS: PHP Code: .glidecontentwrapper{ position: relative; /* Do not change this value */ height: 230px; /* Set height to be able to contain height of largest content shown*/ overflow: hidden; } /* Total wrapper width: 350px+5px+5px=360px Or width of wrapper div itself plus any left and right CSS border and padding Adjust related containers below according to comments */ .glidecontent{ /*style for each glide content DIV within wrapper.*/ position: absolute; /* Do not change this value */ background: white; visibility: hidden; width: 330px; } /* Total glidecontent width: 330px+10px+10px=350px Or width of wrapper div itself (not counting wrapper border/padding) */ .glidecontenttoggler{ /*style for DIV used to contain toggler links. */ width: 360px; margin-top: 6px; text-align: center; /*How to align pagination links: "left", "center", or "right" background: white; /*always declare an explicit background color for fade effect to properly render in IE*/ } Any help would be great! Thanks. |
|||||||