Forum Moderators: not2easy
HTML:
<div id="main">
<div id="content">
<div class="date"><span class="update">December 1, 2007</span></div><h2 id="post-7"><a class="title" href="http://www.example.com/2007/12/01/first-word-press-theme/" rel="bookmark" title="Permanent Link: First Word Press Theme">First Word Press Theme</a></h2>
<div class="storycontent">
<p>Lots of your favourite foo text.</p>
</div><div class="center">« <a href="#">Photography - Philadelph...etc</a> </div>
<h4 id="comments" style="display: none;">No Comments</h4>
<p style="display: none;">No comments yet.</p>
<p style="display: none;"><a href='#'><abbr title="Really Simple Syndication">RSS</abbr> feed for comments on this post.</a>
¦ <a href="#" rel="trackback">TrackBack <abbr title="Uniform Resource Identifier">URI</abbr></a>
</p><p style="display: none;">Sorry, the comment form is closed at this time.</p>
<div style="background: url(imgs/filler.gif) repeat;"></div>
<!-- Begin links and sidebar nav here -->
<div id="links">
<!-- <div id="navi-innen"> -->
<h2>Main</h2>
<ul>
<li><a href="#">Home</a></li>
<li class="page_item page-item-2"><a href="#" title="About">About</a></li>
<li class="page_item page-item-8"><a href="#" title="Resume">Resume</a></li>
<li><a href="#" title="The latest comments to all posts in RSS">RSS</a></li>
<li><a href="#">Contact</a></li>
</ul><h2>Categories</h2>
<ul>
<li class="cat-item cat-item-3"><a href="#" title="View all posts filed under Events">Events</a></li>
<li class="cat-item cat-item-4"><a href="#" title="View all posts filed under Photography">Photography</a></li>
<li class="cat-item cat-item-5"><a href="#" title="View all posts filed under Speaking">Speaking</a></li>
<li class="cat-item cat-item-6"><a href="#" title="View all posts filed under Updates">Updates</a></li>
<li class="cat-item cat-item-1"><a href="#" title="View all posts filed under Writing">Writing</a></li>
</ul><h2>Archives</h2>
<ul>
<li><a href='#' title='December 2007'>December 2007</a></li>
<li><a href='#' title='November 2007'>November 2007</a></li>
<li><a href='#' title='October 2007'>October 2007</a></li>
<li><a href='#' title='June 2006'>June 2006</a></li>
</ul><h2 style="padding-top: .5em;">Links</h2>
<ul>
<li><a href="#" rel="me">Con Frequencia</a></li>
<li><a href="#" rel="me">Philadelphian: The Low-Fi Shots Series</a></li>
<li><a href="#" rel="me">Retrospective</a></li>
<li><a href="#" rel="me">The Blog</a></li>
<li><a href="#" rel="me">Web Publishing...etc</a></li>
<li><a href="#" rel="me">What I Saw January 2005</a></li>
</ul><p style="padding-top: 1em;"><a href="http://validator.w3.org/check?uri=referer"><img src="http://www.w3.org/Icons/valid-xhtml10-blue" alt="Valid XHTML 1.0 Transitional" height="31" width="88" /></a></p>
</div>
</div>
</div>
<div id="footer"><p><img style="padding-right: .5em;" src="imgs/logo_small.gif" alt="Copyright © 2007 ..." title="Copyright © 2007 " /> copyright © 2007 . Wordpress theme designed by X [beta].</p></div>
</body>
</html>CSS:
* {
margin: 0;
padding: 0;
}body {
font-size:100%;
line-height:1.25em;
background: url(imgs/id042br-3.gif) repeat;
color: #333;
font-family:Georgia, "Times New Roman", Times, serif;
border-left: 1px solid #000;
border-right: 1px solid #000;
}a, a:visited {
color: #fff;
text-decoration: none;
}a:hover {
color: #fff;
text-decoration: underline;
}hr {
display: none;
}img {
border: none;
}ins {
text-decoration: none;
border-bottom: 1px dashed #eee;
}acronym, abbr, dfn {
border-bottom: 1px dashed #eee;
font-style: normal;
}blockquote {
background: #fff;
width: 70%;
font-size: 95%;
padding-left: 1em;
padding-top: 1.5em;
padding-bottom: 1.5em;
padding-right: 1em;
border-left: 8px solid #856343;
font-family:Georgia, "Times New Roman", Times, serif;
font-weight:600;
margin-bottom: .5em;
color: #778fc1;
}code, pre {
color: #f93;
font-family: verdana, sans-serif;
}.bild-links {
float: left;
margin: 0 15px 3px 0;
}.bild-rechts {
float: right;
margin: 0 0 3px 15px;
}.center {display: none;}
.search-button {
font-size: 1em;
font-weight: bold;
border: 1px solid #300000;
background: #856343;
color: #fff;
padding: 1px 2px;
margin-top: 7px;
}.storycontent {
padding-top: .5em;
padding-bottom: 1em;
}.storycontent h4 {
color: #fff;
padding-left: .5em;
font-size: 1.2em;
}.storycontent p {
font-family: Verdana, sans-serif;
line-height: 1.3em;
padding-bottom: 1em;
margin-bottom: .5em;
/* border-bottom: 1px solid #e8e8e8; */
}.storycontent a, a:visited {
color: #fff;
font-weight: bold;
text-decoration: none;
}.storycontent a:hover {
color: #f8f8f8;
border-bottom: dashed 1px;
}.storycontent img {
float: left;
padding-right: 8px;
padding-bottom: 1em;
margin-top: 5px;
}.update {
color: #e0e6f1;
clear: left;
text-transform: lowercase;
font-variant: small-caps;
font-size: 130%;
letter-spacing: 0.1em;
text-decoration: underline;
}.title a { text-decoration: none; }
#top_bar {
background: url(imgs/brown.gif) repeat-x bottom;
height: 10px;
}#mast {
padding: .5em;
background-color: #fff;
}#brownbluewhite {
background: url(imgs/brown_blue_white.gif) repeat-x bottom;
height: 18px;
border-bottom: 1px solid #999;
}#main {
margin-top: 0em;
padding: 0em;
background: url(imgs/id042br-3.gif) repeat;
}#content {
float: left;
padding-top: 2em;
padding-left: 2em;
padding-right: 2em;
padding-bottom: 1.25em;
width: 58%;
margin-right: 6.5em;
border-right: 1px solid #333;
background: #adbddb;
}#content h2 {
margin-bottom: .25em;
color: #fff;
font-size: 130%;
font-family: Georgia, "Times New Roman", Times, serif;
padding-top: 1.5em;
text-align: left;
}#content h2 {
text-decoration: none;
}#content a {
text-decoration: none;
}#content a:hover {
color: #fff;
}#content p {
padding-bottom: .5em;
}#content h3 {
font-size: 130%;
padding: 0;
margin: 1em 0;
color: #fff;
}#content h4 {
font-size: 110%;
padding: 0;
margin: 1em 0;
color: #f2f2f2;
}#content h5 {
font-size: 1.1em;
padding: 0;
margin: 1em 0;
}#content .date {
font-size: 1em;
font-weight: bold;
color: #fff;
clear: left;
}#content .meta {
font-size: .9em;
padding-bottom: .75em;
}#content .feedback {
margin: 15px 0 15px 0;
text-align: right;
padding-bottom: 10px;
}#commentlist li {
margin-bottom: 1.5em;
padding-bottom: 1em;
}#links {
margin: 0;
padding-top: 2em;
padding-right: 2em;
background-color: transparent;
overflow: hidden;
clear: both;
}#links ul {
list-style-type: none;
/* background: url(../imgs/flower.gif) no-repeat right; */
padding-bottom: .5em;
}#links li {
padding-top: .5em;
padding-bottom: .5em;
font-size: 90%;
line-height: .5;
}#links h2 {
color: #adbddb;
font-size: 110%;
}#links a {
color: #856343;
text-decoration: none;
line-height: .9em;
font-weight: 600;
text-transform: capitalize;
}#commentform {
margin: 1em 0;
padding: 1em;
border: 1px solid #000;
background: #778fc1;
color: #fff;
}#footer {
clear: both;
margin-top: 0px;
padding: .5em;
padding-bottom: .5em;
background: #778fc1;
color: #edf0f7;
text-transform: capitalize;
font-size: 75%;
padding-left: 3em;
border-top: 1px solid #333;
}#footer p {
margin-bottom: .25em;
}#footer a, a:hover {
color: #adbddb;
text-decoration: none;
}.light_blue {color: #adbddb;}
.u {text-decoration: underline; }
[edited by: SuzyUK at 1:05 am (utc) on Dec. 14, 2007]
[edit reason] examplified code but read later post [/edit]
Sorry for any bloat
Everyone will definitely appreciate the effort. Unfortunately the example remains all but impossible to interpret due to the sheer volume of code, and likely this is why you didn't receive a quick reply. Any chance of an even more stripped down version?
[edited by: Receptional_Andy at 9:25 pm (utc) on Dec. 11, 2007]
.bild-links {
float: left;
margin: 0 15px 3px 0;
}
.bild-rechts {
float: right;
margin: 0 0 3px 15px;
}
When you float something you need to give it a width. A float won't work without you placing the width size within the styles.
You might have some other floats that don't have a width, but I only skimmed your code as there was a good amount of it there.
Manrilla, as already mentioned, you gave too much code which isn't relevant. If ever you have a problem, instead of isolating relevant code, you can also try doing a test scenario. This means you will make a new web page with only your problem coded on to the page, as well as anything else which is necessary for the problem to occur.
Back to when it comes to removing unnecessary code, things such as removing unused CSS, and keeping used CSS is very important. If you have a certain class being used in your HTML, keep it in your CSS. If you have an item in your CSS which is not being used by your HTML, remove it! 4CSS was looking at CSS code which wasn't even included in your HTML because of that. Not only is that one example, but you also have CSS called by your HTML which is NOT in your CSS, such as all the cat-item classes. Now considering that cat-item is directly used in your list-items, you ought to include those in your CSS!
You also didn't seem to specify your problem too well. You say you have a list of links you which to line up to the right, but only fall under the previous div. The problem with that sentence is you did not say or distinguish, what was the intended behaviour and what was the current behaviour. Not only that, but you did not specify what you meant by "lined up to the right"... you could mean a horizontal list with the last entry on the right, or you could mean a vertical list which have the end of each item aligned to the same position to the right. You also did not specify what this "previous div" is. I do not see any divs around where your list is, so it's quite confusing.
All these problems make my brain feel like it's about to explode.
[edited by: Xapti at 6:10 pm (utc) on Dec. 13, 2007]
I hate to disagree with you, however, in all my readings of Suzy UK's, Big John and Charles Wyke Smith's writtings, floats do need a width to work.
manrilla,
Do as Xapti has suggested and go over your html code and your css code very carefully. Make sure you have everything coded correctly. Validate your work. Then see what happens when you validate.
Also, validation isn't always going to show that something is happening to your code. You could validate and still have problems.
Also, make sure you have the correct doctype [w3.org]
as well on your page.
I have been in both positions, validation successful, but something not working on the page, such as a typo, or, forgetting to put a width on a float. Or sometimes I forget to close a div, or I forget to add a clearing for a float.
These are just some of my experiences, I hope they help you out somehow. ;)
Many thanks again.
Don't worry about the bloat, just try to figure out what in the bloat is causing the problem. (if that makes sense) You could have your css created for things you intend on adding, however, haven't yet added them. IF so, not a good way to go. (Or by chance... do you have a master style sheet created by someone else?)
Sometimes it helps to create a duplicate page and add in things just one at a time with the html and css, and when the problem appears it could indicate something above it, or that you need to add something else to what you have.
Off Topic/
Yeah, have to agree with the philly area weather. Tons of rain lately. Be nice to see some snow! I'm across the river from philly in NJ. So, I can relate to your pain right now! ;)
Hope your cold gets better. Try some honey and lemon in tea.
All of you don't know how hard you made my job tonite - I should have (so shhh.. don't tell the boss) simply cut the whole thread, it breaks just about every guideline in the CSS Charter see: Posting CSS & HTML Code [webmasterworld.com] :o
Everyone will definitely appreciate the effort. Unfortunately the example remains all but impossible to interpret due to the sheer volume of code, and likely this is why you didn't receive a quick reply. Any chance of an even more stripped down version?
manrilla, unfortunately we haven't got hours to spend debugging someone elses code (let alone a wordpress template)! but I hope we all also appreciate that everyone has to, or likes to, learn and that's why we're here so..
Here's what I saw while skimming, both to moderate and help solve ;)
We are debugging someone else's entire page of code, or because this is a Wordpress Template (Red Train) it's possible that we are doing someone's homework, both of which are a no-no per WebmasterWorld Charters and TOS.
If you would genuinely like to learn how to debug/strip HTML/CSS templates then you might like to try reading this post [webmasterworld.com] It's a guideline for all about how to strip your own code..
Sorry if this sounds unwelcoming in any way, manrilla, it's not meant to be and I'm not having a go I'm trying to help (both of us ;))
One of the reasons I left the code (virtually) intact is to help explain to others (and I haven't time to strip it all) Your answer could already be here. I think it's very possibly a combination of both 4CSS's and Xapti's observations. (That's the other reason I didn't want to delete the thread)
Hint #1: Well spotted 4CSS, wading through all that CSS and hitting the CSS spot!
Hint #2: Xapti, well spotted on the HTML/CSS disparity
Floats do not really need widths assigned. While the standards do say that, the browsers can generally render floats correctly regardless. Also, you are mentioning CSS which isn't even used in the HTML code that was given.my bold
It's not really anything to do with widths on floats, though see my OT comments below, it might make a good side topic if clarification is needed
All these problems make my brain feel like it's about to explode.
Perhaps it's just my different interpretation? if so I apologize, but I do not see multiple problems here. As far as I can tell the OP is lucky not only to have been guided as how to get a quicker response, they have also got a reply from someone who has done what we do, they read/interpreted the CSS, (and honed in on the issue!) but they also have another reply from someone who pointed out the HTML error, an added bonus and a great example of many set of eyes sometimes help, and why the CSS Forum is not just a 'fix my code' forum. Learning CSS and HTML often go hand in hand these days, and the terminology or 'geek speak' used was imo bound to change sooner or later
I think that the question itself is all about interpretation too? i.e. IMO (and it is just an opinion) there is only one problem which we've been asked about, I copied>pasted, and looked at the result compared to the question - I let the code talk?
I have a set of links that I wish to line up to the right but only fall underneath the previous div.
To me it seems quite simple.. the bottom 'set' or division of links (vertical list) doesn't sit ('float' - see thread title) to the right..
more simply put - The columns don't sit side by side? Do CMIIW as not everyone talks the same, fluent 'code speak' language..
IMHO you/we can't spend years teaching CSS and educating people out of using tables for design and then expect that they should still talk table/columns talk - there could be a whole new Pure CSS bred (:)) language here?
Anyway it doesn't matter as this is all theory until the story becomes clearer, but at any rate I would not be chastising anyone because they didn't talk 'my' language in its perfect grammar especially in a worldwide forum where the spoken language barrier can be difficult enough.. let the universal code speak ;)
----
<OT>
Hiya 4CSS hows it going? long time no see.. and thanks for the mention.. let me try to update, or perhaps we should take this to a separate topic. As Xapti hints at..
Floats do not really need widths assigned. While the standards do say that, the browsers can generally render floats correctly regardless.
It's not that they generally render them correctly regardless, the recommendation (not standard) changed and they (floats without widths) were given a purpose! It used to be that Floats always required a width, CSS2: 9.5 Floats [w3.org]
A floated box must have an explicit width (assigned via the 'width' property, or its intrinsic width in the case of replaced elements).
The short story is that you can now, or should be able to, float without widths for MODERN browsers. It is the up to date recommendation (recommendation not standard!) for not only 'shrink-wrapping' elements but also for containing child floats.
However I would advise caution.. IE7 only aspires/promises to achieve CSS2 compliance and their "float without a width" worked for them them mostly because float is a hasLayout=true triggering property which means, in IE's language, that it's the same difference as if there is a width on it.. and then with floated 'columns' layouts - well one of them should really have a width or the design isn't going to be very stable.
And then slightly more obviously if you still require to support older browsers, e.g. IE5.x/6, then you may very well need it at times, it's that stuck in the middle bit again :)
hth and no-one is offended
Suzy
[edited by: SuzyUK at 10:44 am (utc) on Dec. 14, 2007]
No offense taken on this end. And I would like to know how you knew that this was a forum script? Or maybe even a homework thing?
And, are there any books out there now on css3? Has that been implemented at all yet?
Thanks for your reply. It was an interesting read, which is always a case for your replies. ;)
I would like to know how you knew that this was a forum script? Or maybe even a homework thing?
Not a forum script, but a Wordpress Template - 'wordpress-theme' is alluded to in the HTML (originally there was also a lot of HTML comments, Wordpress Footprints, if you like) in the original version which identified it as such, then I simply searched on "bild-rechts wordpress" and discovered the above code in an existing Wordpress Community submitted theme - If the problem is/had been with the original theme then, the theme's author should be the initial point of call for support.
- However if this is a case of taking a theme and tweaking it to suit in order to learn, which is always a worthwhile exercise and a good way to start with themes, then the code should or could have been stripped further which would indicate that someone had at least tried to re-build their own template. That's what I meant about 'homework' - I wasn't necessarily meaning a school project, just a home learning or hobby project ;)
--------
manrilla, if you can let us know how it's going then that'd be great if something is not clear then do feel free to ask more :)
[edited by: SuzyUK at 5:08 pm (utc) on Dec. 14, 2007]
Manrilla, Suzy is one of the best in here as far as css goes. She has guided me on more than one occasion with things.
Stick with it, you learn by figuring things out and with people helping you when you can't seem to get it yourself.
------
Off topic:
Suzy,
Being eternally 29, well that keeps me young, grandson just helps ;) LOL!
