|
CSS - Help With Flowing Definition Lists (<dl></dl>)
Hi guys, i have a page of categorised links which i've wrapped using definition lists:
Code: <dl class="link_category"> <dt class="category_name">Magazines</dt> <dt>XchangeIT</dt> <dd>The company through which newsagents obtain electronic magazine invoices.</dd> </dl> I would like for each list to flow after the proceeding so I've used float: left, however there's the occasional gap (see attached img). And I cant figure out whats causing this! Here's my CSS: Code:
.link_category {
float: left;
width: 200px;
text-align: left;
margin: 0 20px 20px 0;
}
.link_category dt {
font-weight:bold;
}
.link dt.category_name {
font-size: 14px;
line-height: 18px;
margin: 0 0 9px 0;
}
Thanks in advance Similar TutorialsIs there any CSS to make my block of text flow between several table cells? (I know tables are a bit anti-css but I don't really have a choice here). I'm working on an experimental website at http://www.abdn.ac.uk/~u12cb4/new/ I'm trying to get the main text to flow around the divs floating at either side but as you can see it's not happening. Can anyone offer a suggestion? Thanks, Bailz My site can be seen he pioneer.nic.edu/~mdmoffet/index.html The CSS is located at pioneer.nic.edu/~mdmoffet/church.css The problem is pretty apparent if you look at the page - the text flows down and beyond the div it is in, and the background/border of the div just randomly stops. I've put height:100% and min-height:100% in all parent elements for it, but that doesn't seem to be working as I expected it to. I'm honestly not sure what to do at this point - if the text is less than the viewport, the div will cover the full length like it is supposed to, it just seems to break at a certain length. Both my html and my css validate. Any ideas? At http://alphaworks.co.uk/problems/non-flowing/ how can I get the three "Address line x" lines to line up under one another and not flow back to the left under the "Address:" label? Thanks, Geoff The text in the <p> isn't wrapping around the image in IE. Works fine in FF. What am I doing wrong? Code: <div class="floatright"><a href="./images/storyimages/1192298760_15.jpg"><img class="storyimage" border="0" src="./images/storyimages/thumbs/1192298760_15thumb.jpg" alt=""></a><br>This is a caption</div> <p> Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse viverra, orci venenatis consectetuer faucibus, purus nibh feugiat libero, nec pulvinar nulla orci ut lectus. Ut pellentesque pharetra erat. Proin quis lacus ut sapien ullamcorper consectetuer. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse viverra, orci venenatis consectetuer faucibus, purus nibh feugiat libero, nec pulvinar nulla orci ut lectus. Ut pellentesque pharetra erat. Proin quis lacus ut sapien ullamcorper consectetuer. </p> This is all in the main_col_right <DIV>. Here's the CSS: Code:
.floatright {
float: right;
margin: 0 10px 10px;
}
#main_inner_wrap {
margin:0 auto;
width:690px;
}
#main_inner_wrap p {
font-family: Geneva, Verdana, Arial, Helvetica, sans-serif;
font-size: .9em;
line-height: 1.4em;
padding:0 10px;
min-height: 100%;
}
#main_col_left {
float:left;
width:150px;
color: #330;
line-height: 1.5em;
}
#main_col_right {
margin-top: 0;
float:right;
width:540px;
color: #330;
background:url("./images/news_bg.gif");
background-repeat: repeat-y;
}
Does anybody know what the css attributes would look like for the right margin divs like (e.g. #smr-00) found in this tutorial? (see link) css.image.text.wrap.tutorial.htm The following codes gives messed up display. City lines with York. I tried float both dd and dt to left but still same. Never used definition list before. What am I doing wrong here? Code:
ul, menu, dir, dl { display: block; list-style-type: square; margin: 0; padding:0; }
dt { width:30%; }
dd { width:70%; }
<dl>
<dt>Town</dt>
<dd>York</dd>
<dt>City</dt>
<dd>New York</dd>
</dl>
I have the following table definition Quote: <table style="padding:100px; border:solid; border-width:2px; width:100%;" align="center"> but the padding has no effect. I changed the padding from 100px to 500px without any change. I change the border width and it works perfectly. What am I doing wrong? I had a brief overview of CSS2.1 specs (http://www.w3.org/TR/CSS21/) but could not find what am looking for. I am wondering if it's possible to define a class more than once and the definitions get merged together. eg. // File generic.css table.panel, table.tree {font-family: Arial, Verdnana, Geneva, Helvetica, sans-serif;} th.panel, th.tree {font-family: Arial, Verdnana, Geneva, Helvetica, sans-serif;} td.panel, td.tree {font-family: Arial, Verdnana, Geneva, Helvetica, sans-serif;} // File tree.css table.tree {text-transform: capitalize;} th.tree {height: 25px;} td.tree {height: 25px;} Basically I want all panel & tree class to have same font-family, but only the tree class to have additional text-transform & height adjustments. Is there a better way to do this? I'm sure this is obvious to all you CSS folks, but my CSS is messy and one reason is this: .container { text-align:left; border:2px solid #000000; padding:0px 10px 0px 10px; margin:auto; } .menucontainer{ width:640px; } .mainmenucontainer{ background-color:#abcdef; } .adminmenucontainer{ background-color:#ffcc66; } So, I have containers that will differ in size and color. How do I do this definition so in my html I can do: <div class="mainmenucontainer"> <div class="container menucontainer mainmenucontainer"> Hi! Is this definition of a html table valid xhtml? <table> <tr> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> </table> In short, is it legal to have more TDs in one TR than in another? Thanks hi, i wanted to change a look of form submit buttons a bit and i found out i can do it using inline css, example: Code: <input type="submit" name="subbtn" value="Send" style="background-color: #fbbe2c; width: 120px; font-family: tahoma; font-size: 12px; font-weight: bold; color: #66666;"> but can't figure out how to define it using internal or external css. i tried this: Code:
<head>
<style type="text/css">
input.btn { background-color: #fbbe2c; width: 120px; font-family: tahoma; font-size: 12px; font-weight: bold; color: #66666; }
</style>
</head>
...
<input type="submit" name="subbtn" value="send" class="btn">
which seems the most correct to me, but it doesn't work. style defined in this way is ignored. i'm sure there is a way to do it, but it seems i don't know the right way. could you help, please? Hi I'm struggeling with the following: I have some span elements inside a td. If I apply padding to a span then the padding is flowing outside the td (above and below the borders of the td). Why does that happen and is there a way to make the td to autogrow to fit all the span's inside? Se example code below Code: <table border="0" cellpadding="0" cellspacing="0" align="center" style="width:300px; margin-top:50px;"> <tr> <td style="background-color:gray; text-align:center; border:1px solid black;"> <span style="margin-right:20px;">First</span> <span style="margin-right:20px;">1</span> <span style="margin-right:20px;">2</span> <span style="margin-right:20px; background-color:orange; padding:10px;">3</span> <span style="margin-right:20px;">4</span> <span style="margin-right:20px;">5</span> <span style="">Last</span> </td> </tr> </table> ******* UPDATE ******* I found this link today: http://css-discuss.incutio.com/?page=FormattingContexts which says (among other things): ************************* Only one thing impacts the vertical space between inline elements: the line height. Normally, the line height is based upon the line height for the text in that line, or the height/padding/border/margin of any replaced items. The element on a line with the largest line height or replaced height is the one to define the vertical space that line takes up. Height, padding, border or margins on text do not impact the line height or the container height. Instead, borders, padding and margins overlap from line to line. If you want to give an inline text element some padding and border, make sure you give it some extra line height, too, or else it will overlap with whatever else is above or below it. ************************* So does that rule mean that I have no way to make my TD autogrow in relation to the padding applied to the SPAN in the example above? Is there any working workarounds for this...? Unfortunately I am going to have to get more involved in CSS rather than happily concentrating on PHP development. We have realised that getting our designers to CSS stuff is just costing us time as they lack the experience and don't understand the semantics. Anyway, as such I need to find out a few things I know but don't know if you know what I mean. Where can I find out the official definitions of CSS operators... * html for example..what the * does. class1>class2...what the > does...stuff like that. Seems like most people use unordered lists for menus. Code: <ul> <li>menu1</li> <li>menu2</li> <li>menu3</li> </ul> Others use definition lists. They claim it is less buggy with IE. Code: <dl> <dt>menu1</dt> <dt>menu2</dt> <dt>menu3</dt> </dl> Any thoughts on whether unordered lists or definition lists are best? Also, I sometimes see the menu text surrounded by a SPAN tag. I believe this has to do with only being able to assign one attribute to an element, but am uncertain. Can anyone help explain? Also, if I want a single HTML to work with various CSS, is it a good idea to always include the SPAN tag? Code: <ul> <li><span>menu1</span></li> <li><span>menu2</span></li> <li><span>menu3</span></li> </ul> Thanks Here's the code:
Code: <html>
<head>
<title>Sample Font Shorthand</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
body { margin: 0; behavior: url("../htcmime.php?file=csshover2.htc") }
div { }
table { width: 100% }
.sttable { background-color: #000080 }
tr { }
td { vertical-align: top }
.sttd { font: bold 12px Arial #FFFFFF }
</style>
</head>
<body>
<table class="sttable">
<tr>
<td class="sttd">Catalog > Categories</td>
<td class="sttd">Cart Total: $ 0.00</td>
<td class="sttd">Date</td>
</tr>
</table>
</body>
</html>
Would someone please tell me why the color of the text isn't rendering white? Does anyone know how I can fix the gaps on this block level lists? It looks fine on firefox and other browsers but ie6 and ie7 add gaps in between the lists. http://section31.us/study/html/temp...lists_on_ie.php Hi... How do I break a single list into multiple columns? The page I'm talking about is http://jordanmeeter.com/?page=links. I'd like to bring the "Other" category up over to the right, next to the rest of the categories. I tried Code: float: left;
width: 200px;
And that kind of did what I want... Not really, though. http://jordanmeeter.com/?page=resources Okay... WTF is that about? I added another article to the "Articles" list... And it moved the section below it down. My CSS for #noindent : Code: .noindent {
float: left;
width: 200px;
margin-left: 0px;
margin-top: 5px;
padding-left: 0px;
list-style-type: none;
}
I want to have a list that each listed item has a different image, how can i do this. Thanks |
|||||||