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.
Related
I am trying to create a slanted/diagonal list, but want to avoid having several nested uls, is there a way to do this, here is the code I have so far:
<ul className={style.steps}>
<li>
<p className={style.step}>Lorem</p>
<ul className={style.steps}>
<li>
<p className={style.step}>Ipsum</p>
<ul className={style.steps}>
<li>
<p className={style.step}>dolor</p>
<ul className={style.steps}>
<li>
<p className={style.step}>sit</p>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
If you can update how the code outputs, you don't need nth-selectors, especially if the list is dynamic and changes length, you can use CSS vars.
You can set a default value using :root, then you can add the custom property value on each li element --index: number. You can change the CSS var on the element to whatever you need.
:root {
--margin-value: 10px;
}
ul,
li {
margin: 0;
padding: 0;
}
li {
margin-left: calc(var(--index) * var(--margin-value));
}
<ul>
<li style="--index: 1">One</li>
<li style="--index: 2">Two</li>
<li style="--index: 3">Three</li>
<li style="--index: 4">Four</li>
<li style="--index: 5">Five</li>
</ul>
The :nth-child selector would allow you to set different spacing rules on different <li>s within a single list.
https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child
ul {
list-style: none;
}
ul li:nth-child(1) {
margin-left: 0;
}
ul li:nth-child(2) {
margin-left: 30px;
}
ul li:nth-child(3) {
margin-left: 60px;
}
ul li:nth-child(4) {
margin-left: 90px;
}
<ul>
<li>Lorem</li>
<li>ipsum</li>
<li>dolor</li>
<li>sit</li>
</ul>
You did not use the javascript tag, but it could be handy here , so not really an answer but another approach.
Demo below:
var elMargin = 0;
for (let e of document.getElementsByClassName('indent')) {
elMargin = elMargin + 1;
e.style.marginLeft = elMargin + 'em';
}
ul {counter-reset:lis}
li:before{counter-increment:lis;content:counter(lis);
<ul>
<li class="indent"></li>
<li class="indent"></li>
<li class="indent"></li>
<li class="indent"></li>
<li class="indent"></li>
<li class="indent"></li>
<li class="indent"></li>
</ul>
Hi I am looking to display my ordered list this:
so the first node and the first nested node appear on the top line and the remaining nested nodes appear under the 2nd column (under red).
Apples Red
Green
Yellow
Banana Yellow
html:
<ul class="lst" id="list_Apple">
<li>Apple</li>
<ul>
<li id="Apple">Red</li>
<li id="Apple">Green</li>
<li id="Apple">Yellow</li>
</ul>
</ul>
<ul class="lst" id="list_Banana">
<li>Banana</li>
<ul>
<li id="Banana">Yellow</li>
</ul>
</ul>
There is a slight mistake in your html. The <ul> tag should be inside a <li>.
HTML:
<ul class="lst" id="list_Apple">
<li>Apple</li>
<li>
<ul>
<li id="Apple">Red</li>
<li id="Apple">Green</li>
<li id="Apple">Yellow</li>
</ul>
</li>
</ul>
<ul class="lst" id="list_Banana">
<li>Banana</li>
<li>
<ul>
<li id="Banana">Yellow</li>
</ul>
</li>
</ul>
And add this CSS:
.lst {
clear: both;
}
.lst li {
list-style: none;
}
.lst > li {
float: left;
}
Here's a Fiddle: http://jsfiddle.net/rayg8ua9/1/
lithanks... Yes I missed the li tag.
.lst {
clear: both;
padding-top: 10px;
}
.lst li {
list-style: none;
width:100px;
}
.lst > li {
float: left;
}
I have html:
<div class="wd">
<ul id="postlist">
<li><span class="num">h1</span>
<ul>
<li><span class="dt">h2</span>
<ul>
<li><span class="pun">h3</span></li>
</ul>
</li>
</ul>
</li>
<li><span class="num">1<br/>11<br/>111</span>
<ul>
<li><span class="dt">1.1</span>
<ul>
<li><span class="pun">1.1.1</span></li>
</ul>
</li>
</ul>
</li>
<li><span class="num">2<br/>2</span>
<ul>
<li><span class="dt">2.1</span>
<ul>
<li><span class="pun">2.1.1</span></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
how to set with css width of #postlist 100%, .num,.dt,.pun - 33% each?
http://jsfiddle.net/mma75kq7/
You can pull that off, but you'll need to change your css a bit:
outer wrapper, .wd set it to display table & 100% width, or if you plan on having something else inside it, maybe wrap the whole thingy in a div of its own with display table and 100% width
the top <li> set it to have the width of 33.3333%
then the <ul> inside the <ul> give it a width of 66.6666%
the <li> inside the children <ul>, with .dt and another ul, set both children to display table cell, and the same for the next children
and it should get going.
Alternatively you could just use a regular <table> if you plan on displaying tabular data, instead of pouring css rules to mimic the table behavior.(seems like a awful amount of markup to pull off 'undercover' table )
Check out the demo here or the snippet bellow:
.wd {
width: 100%;
display: table;
}
ul {
display: table-cell;
vertical-align: top;
list-style: none outside none;
width: 100%;
padding: 0;
}
ul ul {
width: 66.6666%;
}
li {
vertical-align: top;
display: table;
width: 100%;
}
.num {
display: table-cell;
width: 33.3333%;
}
.dt {
display: table-cell;
width: 50%;
}
.pun {
display: table-cell;
width: 50%;
}
ul#postlist >li {
border-bottom: 1px solid black;
}
<div class="wd">
<ul id="postlist">
<li><span class="num">h1</span>
<ul>
<li><span class="dt">h2</span>
<ul>
<li><span class="pun">h3</span>
</li>
</ul>
</li>
</ul>
</li>
<li><span class="num">1<br/>11<br/>111</span>
<ul>
<li><span class="dt">1.1</span>
<ul>
<li><span class="pun">1.1.1</span>
</li>
</ul>
</li>
</ul>
</li>
<li><span class="num">2<br/>2</span>
<ul>
<li><span class="dt">2.1</span>
<ul>
<li><span class="pun">2.1.1</span>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
I, belatedly, offer the following simplified HTML and CSS that achieves the same result.
.wd {
width:100%;
}
ul#postlist {
display: table;
width:100%;
margin: 0;
padding: 0;
}
ul#postlist > li {
display:table-row;
}
.num, .dt, .pun {
display:table-cell;
vertical-align: top;
list-style: none outside none;
width: 33.333333333%;
border-bottom: 1px solid black;
}
<div class="wd">
<ul id="postlist">
<li>
<div class="num">h1</div>
<div class="dt">h2</div>
<div class="pun">h3</div>
</li>
<li>
<div class="num">1
<br/>11
<br/>111</div>
<div class="dt">1.1</div>
<div class="pun">1.1.1</div>
</li>
<li>
<div class="num">2.
<br/>2..</div>
<div class="dt">2.1</div>
<div class="pun">2.1.1</div>
</li>
</ul>
</div>
I have a vertical UL list on a html page, with a sublist inside of it. At the end of the sublist, it has an unwanted gap, like a linebreak, though I can't seem to find anything in my css or html that would cause it (and my attempts at trying to get it to go away aren't working very well).
Here's what it looks like;
1. Item
2. Item
1. Sub Item
2. Sub Item
3. Item
4. Item
My html code:
<ul class="fic">
<li class="fic"><a href="">item</li>
<li class="fic"><a href="">item
<ul class="fic">
<li class="fic">item</li>
<li class="fic">item</li>
</ul>
</li>
<li class="fic">item</li>
<li class="fic">item</li>
<li class="fic">item</li>
<li class="fic">item</li>
<li class="fic">item</li>
<li class="fic">item</li>
<li class="fic">item</li>
<li class="fic">item
<ul class="fic">
<li class="fic">item</li>
</ul></li>
</ul>
And my css code that I was trying to use;
.fic ul {
padding: 0px;
margin: 0px;
}
And since my template came with menu code for the ul used in the navigation bar, here's that;
#menu ul {
display: block;
width: 778px;
margin: 0em auto;
list-style: none;
padding-left: 2.5em;
}
#menu li {
display: inline;
}
#menu li a {
color: #ffffff;
font-weight: bold;
font-size: 1.2em;
text-decoration: none;
padding: 0.25em 0.75em 0.25em 0.75em;
}
#menu li a:hover {
background: #342117 url('images/hover.gif') top left repeat-x;
color: #fffdc6;
}
html code for navigation menu;
<div id="menu">
<ul>
<li class="first">Home</li>
<li>Fan Art</li>
<li>Fan Fiction</li>
<li>Fan Videos</li>
<li>Other</li>
<li>Forum</li>
</ul>
</div>
Help would be appreciated, thank you.
The menu styles are the culprit, need full code
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.