I have two UL's:
How can I add text to appear in the top green area.
The text needs to not be in an LI.
Every attempt I make has the text appear outside the boxes. I've had the two UL's wrapped in both a div and a span (currently a span as below) with text before the UL but but neither helped and the text was still outside.
jsfiddle: http://jsfiddle.net/gThjy/
<html>
<head>
<style>
#list_to_process, #categories {
color: blue; background-color: green; border: solid;
border-width: 4px; padding-top:40px
}
.panel { color: red; background-color: yellow;
border: solid; border-width: 4px }
ul { padding: 10px; margin: 50px; float:left; list-style:none; }
li { color: yellow; padding: 25px 80px; cursor: move; }
li:nth-child(even) { background-color: #000 }
li:nth-child(odd) { background-color: #666 }
</style>
</head>
<body>
<span class="a_list">
header1
<ul id="list_to_process">
<li class="to_process" id="left1">1</li>
<li class="to_process" id="left2">2</li>
<li class="to_process" id="left3">3</li>
<li class="to_process" id="left4">4</li>
<li class="to_process" id="left5">5</li>
</ul>
</span>
<span class="a_list">
<ul id="categories">
<li id="righta">a</li>
<li id="rightb">b</li>
<li id="rightc">c</li>
<li id="rightd">d</li>
<li id="righte">e</li>
</ul>
</span>
</body>
</html>
With your current markup this addition to CSS will work and be semantic:
#list_to_process:before, #categories:before{
content:"Read this: ";
}
Maybe this could help:
<ul id="list_to_process">
Header 1
<li class="to_process" id="left1">1</li>
<li class="to_process" id="left2">2</li>
<li class="to_process" id="left3">3</li>
<li class="to_process" id="left4">4</li>
<li class="to_process" id="left5">5</li>
</ul>
<ul id="categories">
Header 2
<li id="righta">a</li>
<li id="rightb">b</li>
<li id="rightc">c</li>
<li id="rightd">d</li>
<li id="righte">e</li>
</ul>
Well its only valid in HTML to have an <li> as a child of a <ul> or <ol> so wrapping any text in a different element isn't possible. You can simply just add text directly after the starting tag for the <ul> and it'll show up in the green area, though I'm not sure thats exactly what you're after. I'm also unsure of whether its valid to have a text-node directly after a <ul> tag, though I will try to find a source.
http://jsfiddle.net/PerfectDark/gThjy/5/
Update: Adding text before the starting <ul> tag is also invalid according to the validator:
Line 38, Column 10: Text not allowed in element ul in this context.
I think your best option is to absolutely position an element to have it appear its inside the box.
Related
I'm building a css dropdown menu and have been unable to get the submenus to appear below their respective parent li elements. I've tried a bunch of the solutions suggested in response to similar questions but have been unable to get them to work.
Here's a sample of the menu I'm building:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Menu Test</title>
<link rel="stylesheet" href="menustyle.css" type="text/css">
</head>
<body>
<div id="menudiv">
<ul class="menu">
<li class="menuitem">Aluminum</li>
<ul class="submenu">
<li class="subitem">Round</li>
<li class="subitem">Sheet</li>
<li class="subitem">Plate</li>
</ul>
</li>
<li class="menuitem">Copper</li>
<ul class="submenu">
<li class="subitem">Round</li>
<li class="subitem">Sheet</li>
</ul>
<li class="menuitem">Steel</li>
</ul>
</div>
</body>
</html>
And here's the css:
#menudiv {
text-align:center;
}
ul.menu {
list-style-type:none;
}
li.menuitem {
position:relative;
display:inline-block;
}
ul.submenu {
display:none;
position:absolute;
}
.menuitem:hover+ul.submenu {
display:block;
}
I can move the submenus around by adding things like right:50px; to ul.submenu, but that moves all the submenus to the same location.
What am I missing here? Thanks!!
Here's a Fiddle.
First of all, the following markup structure :
<li class="menuitem">Aluminum</li>
<ul class="submenu">
<li class="subitem">Round</li>
<li class="subitem">Sheet</li>
<li class="subitem">Plate</li>
</ul>
is incorrect. It should be :
<li class="menuitem">Aluminum
<ul class="submenu">
<li class="subitem">Round</li>
<li class="subitem">Sheet</li>
<li class="subitem">Plate</li>
</ul>
</li>
Secondly, you could use a CSS reset for ul,li elements. For the sake of simplicity I've used :
* {
margin: 0;
padding: 0;
}
Now, coming to your question. the following classes needs to be changed :
.menuitem:hover+ul.submenu {
display:block;
}
to
.menuitem:hover > ul.submenu {
display:block;
}
and
ul.submenu {
display:none;
position:absolute;
top:0px;
right:50px;
}
to
ul.submenu {
display:none;
position:absolute;
}
You can then modify the following class (so that the child ul elements "fits-in" to the parent li):
li.menuitem {
position:relative;
display:inline-block;
}
to
li.menuitem {
position:relative;
display:inline-block;
padding: 5px 10px;
margin: 0 10px;
}
In summary, I guess this is what you are looking for :
* {
margin: 0;
padding: 0;
}
#menudiv {
text-align:center;
}
ul.menu {
display: inline-block;
list-style-type:none;
}
li.menuitem {
position:relative;
display:inline-block;
padding: 5px 10px;
margin: 0 10px;
}
ul.submenu {
display:none;
position:absolute;
}
.menuitem:hover > ul.submenu {
display:block;
}
<body>
<div id="menudiv">
<ul class="menu">
<li class="menuitem">Aluminum
<ul class="submenu">
<li class="subitem">Round</li>
<li class="subitem">Sheet</li>
<li class="subitem">Plate</li>
</ul>
</li>
<li class="menuitem">Copper
<ul class="submenu">
<li class="subitem">Round 2</li>
<li class="subitem">Sheet 2</li>
</ul>
<li class="menuitem">Steel</li>
</ul>
</div>
</body>
Hope this helps!!!
Try placing the <ul class="submenu"> inside the <li class="menuitem">. Then set the <li> to position:relative; and set the <ul> to position:absolute;left:0;. This will position the <ul> relative to its parent element, the <li>.
Here's a codepen example: http://codepen.io/anon/pen/WQdMjX
Your markup is incorrect for nesting a sub-list.
You're doing this:
<ul>
<li>text</li><!-- incorrect, don't close li here -->
<ul>
<li>sub</li>
</ul>
</li><!-- correct, though li is already closed -->
<li>text</li><!-- incorrect, don't close li here -->
<ul>
<li>sub</li>
</ul>
<!-- needs closing li here -->
<li>text</li>
</ul>
Instead do this:
<ul>
<li>text
<ul>
<li>sub</li>
</ul>
</li>
</ul>
Then update your CSS selector from .menuitem:hover + ul.submenu to .menuitem:hover > ul.submenu as you're no longer selecting a sibling element (+) but a child element (>).
You'll need to fine tune the positioning of your sub-menus from here but this should get you where you need to be.
Remember, when you are developing menus you need to make sure the link content is inside anchor tags, including the links at the top level navigation that launch the subnav. That way these links are natively focusable. You want to be able to reach these menu elements with a keyboard only since many with arthritis, Parkinson's disease, etc. may be unable to use a mouse (and you won't want to use tabindex to mimic this behaviour since screen-readers will look for anchor tags.)
There was a similar StackOverflow question yesterday: Absolutely positioned child's top edge pinned to the bottom edge of its parent that has unknown height?
You can also Bootstrap Dropdown CSS in a normal case too.
The following is a screen capture of the issue that i'm faced with. The drop down menu is supposed to appear under the second menu item in the top menu.
The HTML is,
<nav class="nav">
<ul>
<li class="menu-item">Hi Alexander!</li>
<li class="menu-item"><a>My Account</a>
<div class="my-sub-menu">
<ul class="sub-list">
<li class="list-item"><a>History</a></li>
<li class="list-item"><a>Personal Details</a></li>
<li class="list-item"><a>Preferences</a></li>
<li class="list-item"><a>Bonuses</a></li>
<li class="list-item"><a>Wishlist</a></li>
<li class="list-item"><a>Newsletter</a></li>
<li class="list-item"><a>Invite Friends</a></li>
<li class="list-item"><a>FAQ</a></li>
<li class="list-item"><a>Sign out</a></li>
</ul>
</div>
</li>
<li class="menu-item"><a>Contact Us</a></li>
<li class="menu-item"><a>Chat</a></li>
<li class="menu-item"><a>Chat</a></li>
</ul>
</nav>
The CSS is as follows,
.nav {
margin-top: 2px;
position: relative;
float: right;
}
.nav > ul {
padding: 0;
margin: 0;
}
.menu-item{
list-style: none;
float: left;
}
.menu-item .my-sub-menu {
visibility: hidden;
position: absolute;
padding: 0;
margin: 0;
}
.menu-item:hover .my-sub-menu {
visibility: visible;
}
.list-item {
list-style: none;
}
I need the sub menu to appear under the second item in the top menu. This is only in firefox and IE but chrome renders it perfectly. I cant figure out what the issue is. Is there at least e fix that i could use for these two browsers? or another alternative to get around this issue.
Tahnk you in advance.
If you add position:relative to .menu-item it will make the absolute positioning work from the list item itself. The only draw back is if you are using a percentage based width on your drop down it will take the width of the parent li as 100% so a pixel width may have to be specified.
try doing
.sub-list{
padding:0px !important;
}
and if by second menu u want it to come under contact us
then change the position of the div
<div class="my-sub-menu">
<ul class="sub-list">
<li class="list-item"><a>History</a></li>
<li class="list-item"><a>Personal Details</a></li>
<li class="list-item"><a>Preferences</a></li>
<li class="list-item"><a>Bonuses</a></li>
<li class="list-item"><a>Wishlist</a></li>
<li class="list-item"><a>Newsletter</a></li>
<li class="list-item"><a>Invite Friends</a></li>
<li class="list-item"><a>FAQ</a></li>
<li class="list-item"><a>Sign out</a></li>
</ul>
</div>
into the next li element ie cntact us
kind of a fiddle
fiddle ex
I have the following html
<ul>
<li class="main"> Main 1
<ul>
<li class="sub">Sub 1</li>
<li class="sub">Sub 2</li>
<li class="sub">Sub 3</li>
</ul>
</li>
<li class="main"> Main 2 </li>
<li class="main">Main 3 </li>
</ul>
I want the background-color of the first level change on mouse over. But when I try this code
.main:hover {
background-color: red;
}
.sub:hover {
background-color: none;
}
The sublevel menu also gets changed. Is there a way to change only the background of the outside element.
This code can be seen in action in this codepen.
http://codepen.io/anon/pen/Bvauf
What you're seeing is the background of .main, because the children's backgrounds are transparent. You could explicitly set it to white:
.main:hover {
background-color: red;
}
.main:hover > ul {
background-color: #fff;
}
Or
.main ul {
background-color: #fff;
}
.sub {
background-color: white;
}
You should go with setting background colors to ul and not li as others have suggested
I am creating an email client, I want the inbox to resemble that of Mac Mail
I am pulling the emails themselves from a database using ajax (outputting to XML) and then looping through the entries and pulling the relevant elements.
What I have never been confident with is the css. I want to create the elements using <ul> and <li>. My understanding is that I will need to nest these. For example:
<ul>
<li>
<ul>
<li class="from">Mike # Hotmail</li>
<li class="subject">Hello</li>
<li class="date">13/01/2013</li>
<li class="preview">Lorem Ipsum....</li>
</ul>
</li>
<li>
<ul>
<li class="from">Jame # Gmail</li>
<li class="subject">Out Of Office</li>
<li class="date">12/01/2013</li>
<li class="preview">Lorem Ipsum....</li>
</ul>
</li>
.from {
}
.subject {
}
.date {
}
.preview {
}
What I don't know is whether I need to reference the <ul> and <li> items within the CSS, does that make a difference? Also, what are the things that I need to create this look?
PLEASE DO NOT ANSWER THIS. I THINK I HAVE WORKED IT OUT. WHEN I AM HAPPY WITH THE OUTCOME I WILL POST HERE FOR OTHERS TO WORK FROM IN THE FUTURE...
Ok, I give up, this is what I have so far:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.inboxPanel {
width: 420px;
}
ul.inbox {
width: 100%;
list-style-type: none;
}
ul.message {
list-style-type: none;
display: block;
}
.from {
width: 50%;
border: 1px solid #ccc;
font-weight: 700;
float: left;
display: inline-block;
}
.subject {
border: 1px solid #ccc;
}
.date {
width: 50%;
border: 1px solid #ccc;
float: right;
display: inline-block;
}
.preview {
border: 1px solid #ccc;
}
</style>
<title></title>
</head>
<body>
<div class="inboxPanel">
<ul class="inbox">
<li>
<ul class="message">
<li class="from">Mike # Hotmail</li>
<li class="subject">Hello</li>
<li class="date">13/01/2013</li>
<li class="preview">Lorem Ipsum....</li>
</ul>
</li>
<li>
<ul class="message">
<li class="from">Jame # Gmail</li>
<li class="subject">Out Of Office</li>
<li class="date">12/01/2013</li>
<li class="preview">Lorem Ipsum....</li>
</ul>
</li>
<li>
<ul class="message">
<li class="from">Mike # Hotmail</li>
<li class="subject">Hello</li>
<li class="date">13/01/2013</li>
<li class="preview">Lorem Ipsum....</li>
</ul>
</li>
<li>
<ul class="message">
<li class="from">Jame # Gmail</li>
<li class="subject">Out Of Office</li>
<li class="date">12/01/2013</li>
<li class="preview">Lorem Ipsum....</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
Ok, first of all
<ul>
<li class="from">Mike # Hotmail</li>
<li class="subject">Hello</li>
<li class="date">13/01/2013</li>
<li class="preview">Lorem Ipsum....</li>
</ul>
makes no sense semantically. From, subject, date and preview are not a list. Your email messages ARE a list, but the email components are not.
What you should do is something like this:
<ul>
<li>
<span class="from"></span>
<span class="date"></span>
<p class="subject></p>
<p class="preview"></p>
</li>
<ul>
CSS:
li { overflow: hidden; }
li span.from { float: left; font-weight: bold; }
li span.date { float: right; }
li p.subject { clear: both; font-weight: bold; }
li p.preview { color: #ccc; }
This is just rough styling to make the layout look the way you want. You'll have to tweak it for proper padding, colors, etc.
I have the following HTML code:
<ul class="blogEntry">
<li class="title section">
<span><asp:Literal ID="litTitle" runat="server" /></span>
<span class="date"><asp:Literal ID="litDate" runat="server" Text="10/1/1000" /></span>
</li>
<li class="body section"><asp:Literal ID="litBody" runat="server" /></li>
<li class="tags section">
<ul class="tags">
<li class="tag">Tag 1</li>
<li class="tag">Tag 2</li>
<li class="tag">Tag 3</li>
</ul>
</li>
</ul>
And the following CSS code:
ul.blogEntry
{
border: 1px solid black;
border-bottom: 0px;
padding: 0px;
}
ul.blogEntry li.section, ul.blogEntry li.lastsection
{
list-style: none;
}
ul.blogEntry li.title
{
background-color: #67A7FF;
font-size: 14px;
font-weight: bold;
}
ul.blogEntry li.title span
{
display: inline;
}
ul.blogEntry li.title.section span.date
{
float: right;
}
ul.blogEntry li.section
{
padding: 4px;
border-bottom: 1px solid black;
}
As is, the date will drop to a new line and float to the right. If I change the ul.blogEntry li.title span CSS and add float: left; The outer LI element's height shrinks and the bottom border cuts right through the spans' text. Advice?
Please don't add any elements for clearing. Elements which only enable specific styling significantly breaks semantics and separation of concerns.
The simple answer is to add overflow:auto; to the container element (i.e. li.title) but there are other ways:
http://www.positioniseverything.net/easyclearing.html
http://www.innovatingtomorrow.net/2008/03/24/how-clear-floats-css
http://www.sitepoint.com/blogs/2005/02/26/simple-clearing-of-floats/
Clearing blocks are EVIL.
try:
.section {min-height: 10px;}
that should clear your floats for all your section classes in ie7 and 8. you may try floating the element above your date left to see if that works.
also, when floating something, you should usually set the width