I'm trying to CSS style some HTML to look like the following image. I've decided to use a definition list with some classes to do this.
I'm trying to
move the price to immediately follow the dt tag and
remove the default dd styling so that it is all the way to the left.
Here is my HTML:
<dl>
<dt>Classic Italian Hoagie</dt>
<dd class="price">$8</dd>
<dd class="desc">Pepperoni, salimi, capicola, banana peppers, romaine, tomatoes, provolone & housemade olive oil & herb vinaigrette on a hoagie bun</dd>
</dl>
To answer the first part of your question, floating the dt and the .price to the left will line them up next to one another.
You can then get the other dd tags to clear:left which solves your problem.
dt, .price{
float:left;
clear:none;
margin-right:5px;
}
dd{
clear:left;
}
Working example
As for your second question, I don't see any default styling causing margins on the dd. It looks as required for me but if not you can always put a margin-left:0; on the dd.
Related
Good day, I have one single <dl> with multiple <dt> and <dd>.
What I'm hoping for, is through CSS (2 or 3), allow for one <dt> and it's child <dd> to be on a left column, the other one on a right column through a CSS class.
My current HTML:
<dl>
<dt class="LeftList">DT Name</dt>
<dd>DD Info 1</dd>
<dd>DD Info 2</dd>
<dt class="RightList">DT Name</dt>
<dd>DD Info 1</dd>
<dd>DD Info 2</dd>
</dl>
My current CSS:
.LeftList{
float:left;
margin-left:1.333em;
display:inline-block}
.RightList{
float:left;
margin-left:13em;
display:inline-block}
float elements are automatically displayed as a block elements, thus your inline is being ignored. Can you supply a picture of what you are trying to get?
I am just guessing that you are trying to get something like this:
For now I just changed your CSS a bit, as can be seen from the fiddle
.RightList{
margin-left:13em;
display:block}
http://jsfiddle.net/nx7zws31/2/
please share with us a bit more information, abut your vision.
In my app I have situations where I need to use what I and some frameworks call a "post-link". Basically a link that might be used to delete (or post) data with it and as such must actually be a a form.
I'm using bootstrap as my base css and have assigned the link class to the submit button to give it a link appearance. When using in a table with another, ordinary, <a> tag next to it I can't seem to get the two links to align alongside each other, no matter how wide I make the viewport or table cell.
Here is a fiddle to demonstrate: http://jsfiddle.net/miocene/dbTqC/670/ I'm referring to the pencil and cross icons as my normal link and post-link.
Any ideas how I can get them to align side-by-side?
You either need to define a width for the td or use this. I gave the div in the td a class .lol
DEMO
<td>
<div class="btn-toolbar inline lol">BLAH BLAH</div>
</td>
.lol *{
display:inline-block;
float:left;
width:50%;
}
.lol .btn{
padding:2px;
}
Instead of my background only acting as a background for the 4 different types of pottery in the ul element, the red background covers my name and navigation bar. Why is it doing this? I have tried to make everything relative positioning but doesnt seem to make a difference. Why is the ul element not following the flow of the document, it should sit below my name and navigation.
Please advise, see example here: example
If i am getting your problem correct then here is the solution
check this updated fiddle: http://jsfiddle.net/4GUkU/2/
Note: Please let me know if am lagging here so i can change as per requirement.
Browers have a difficult time with heights of floated DIVs. The easiest thing to do is to put:
<div style="clear:both;"></div>
after the tag.
The red color everywhere is due to
#featured {
...
background-color:Red;
...
}
And the UL displays below "The Pottery Club" and the nav links for me (in Chrome). Which browser are you using?
By the way, semantically you do not need to use and in a tag. tags are already interpreted vertically, unless you choose otherwise with CSS.
You could rewrite your navigation menu like so:
<nav id="nav-main">
<a title="Book Class" href="">Book Class</a>
<a title="Plan your visit" href="/visiting">Plan your visit</a>
<a title="Contact us" href="/visiting">Contact us</a>
</nav>
If you keep the and in your , a blind person's reader would read to him/her: "navigation, unordered list, list-item..." which does not make very much sense.
I am using XMetaL 6.0 to display styled XML using a limited subset of CSS. One thing that I have been tasked to do is display a definition list in a tabular format without borders. What I am trying to achieve is something like Example 2 at http://www.the-art-of-web.com/css/format-dl/#section_2. However, I am limited to the subset of CSS described at http://na.justsystems.com/webhelp/en/xmetaldeveloper/cg/6.0/cg.html#View%20support%20for%20properties%20and%20selectors. Does anyone have any suggestions on how I might best pull this off?
Just for sake of example, and in case someone asks, let's say that my xml for this snippet is something like:
<dl>
<di>
<dt>first item</dt>
<dd>
<p>definition for first item in list</p>
</dd>
</di>
<di>
<dt>second item</dt>
<dd>
<p>definition for second item in list</p>
<p>extending across more than one line</p>
</dd>
</di>
<di>
<dt>third item</dt>
<dd>
<p>definition for third item in list</p>
</dd>
</di>
</dl>
Any suggestions would be greatly appreciated. Please let me know if I can provide any additional details.
According to the XMetal specs, you can style elements to look like tables using display:table;, etc. Read more here.
So you could do this
dl {
display: table;
}
di{
display:table-row;
}
dt{
display:table-cell;
font-weight:bold;
padding-right:15px;
}
dd{
display:table-cell;
padding-bottom:10px;
}
Example: http://jsfiddle.net/jasongennaro/E5yG8/
What is the preferred methon to create something like
Apples Apples can be
green or red or
more text more text
Bananas Most of the time
bananas are yellow
(or green, if they're
not ripe)
Item X Each item should be aligned
with the previous item, and
each text (such as this
sentence) should be alligned
with the previous text.
I have tried
.desc {
margin-left: 140px;
text-indent: -100px;
}
.item {
width:100px;
}
...
<div class='desc'>
<span class='item'>Apples</span> Apples can be green ....
</div>
But it didn't really give the result I expected (at least in Firefox).
Can someone help me here?
Thanks
René
Semantically, this looks like a case for the little-known <dd> and <dt> elements.
The W3C reference has a nice example:
<DL>
<DT>Dweeb
<DD>young excitable person who may mature
into a <EM>Nerd</EM> or <EM>Geek</EM>
<DT>Hacker
<DD>a clever programmer
<DT>Nerd
<DD>technically bright but socially inept person
</DL>
However, its default styling is not exactly what you want. Check out this article:
Definition lists – misused or misunderstood?
it has a number of styling examples:
Definition list with background images
Definition list as boxes
Styling a definition list to look like a table
It depends on data you want to use, but semantically speaking it seems like term and it's description, so dl hops in mind ^^
dt { display: block; float: left; width: 140px; }
<dl>
<dt>Apples</dt>
<dd>Description to it more lines of text to show it.</dd>
<dt>Bananas</dt>
<dd>Description to it more lines of text to show it.</dd>
<dt>Lemon</dt>
<dd>Description to it more lines of text to show it.</dd>
</dl>
A real table wouldn't seem to be out of line here since you seem to have tabular data. In that case you would just use the normal table syntax.
Using a two-column <table> would be a good solution here, assuming it isn't a very very long table as this loads differently from a bunch of divs or other elements.
Using a table will also leave you with the flexibility of formatting individual elements inside cells as you want, such as a bulleted list inside a <td>.