I have an html template. It has a left and a right column and a center column. The programming on it is complex because the outer columns are floated to the bottom for SEO. Also the center column has variable width and the outer columns don’t overlap when the center colum is made narrow. I can’t figure out how to put a little 3 pixel divider (that shoes the background tiled image) between the left column and the center columns and between the right column and center column. I think it would take some time to figure it out. Can you guys recommend a programmer? Does Sitepoint have programmers for hire?
However, it sounds like this might be not such a hard CSS issue, so if you want to post a link and an example (screen shot) of how you want the page to look, I’m sure you’ll get some help. I’m moving this to the CSS forum for you.
#header {
margin:left 10px;
width: 1024px;
}
See the error…
The header div is 10 pixels wider than the wrap div. The header division is actuall 1024 + 10 pixels wide.
This will throw off you document. You may have an error like this…
Sorry about the writing on that. I’m really surprised anyone answered.
“Also the center colum have variable with and the out columns don’t overlap”
should be
Also the center column has variable width and the outer columns don’t overlap when …"
Ralph, if you’re going to move this question, could you make this change?
I’m not sure how to make an image of what I want. Between the left column and the center column just need a little 2 or 3 pixel wide divider, hopefully showing the background image (tiled ice). Need the same for the right side.
I’m doing this because laptops have my columns too crunched together and on some laptops it looks like my site isn’t working normally - as if the linked text in the columns are actually chunks of text from the center column, especially since I don’t have the links in the columns underlined until you hover over them. I did have them underlined 24/7 but it just didn’t look good.
I used firebug to try to understand what divs were doing what, but the floating and hiding techniques make it too hard for me to understand what I’m seeing.
Hm, that kind of layout makes it difficult to have the body background showing up between the columns. My only suggestion would be to remove the background color from the Content div and put it on the center content and sidebar divs instead … although the background then will only expand to the height of the content in each div.
#abs1,#abs2{
position:absolute;
width:3px;
top:0;
left:150px;/* tweak to fit */
bottom:0;
background:red;/* your repeating image goes here */
}
#abs2{
left:auto;
right:150px;/* tweak to fit */
}
Note the clearfix at the end of the page is redundant and avoid using breaks just to make space. Text should always be in a suitable container such as a p tag or heading tag. Make space with css and not with html elements.
Paul,
I wished for it, but ot takes away from the calmer, simpler look I have. Sorry about that. I was able to put more space between the columns.
On that clearfix: I had a question on Sitepoint about it and someone said it prevents problems for him. Are you sure that in my coding it’s redundant?
On the <br />s, I just don’t think it’s practical to try to hard wire every page. Are you saying to write some css code that does what 1 <br /> does and use that class in the html wherever I use <br />, or ar you saying write css code for what one <br /> does, write deparate css code for what 2 <br />s does and more separate css code for what 3 <br />s does?
There are no floats afterwards and as it is not inside a container anyway then it will do nothing except take up space in the html and possibly on the page.
You have also called it a “clearfix” which is the name given to a completely different technique for containing floats. Either way, there is no need these days to add extra html to either clear or contain floats. (The css faq on floats has more information on this.)
On the <br />s, I just don’t think it’s practical to try to hard wire every page. Are you saying to write some css code that does what 1 <br /> does and use that class in the html wherever I use <br />, or ar you saying write css code for what one <br /> does, write deparate css code for what 2 <br />s does and more separate css code for what 3 <br />s does?
Lets be clear on this “breaks are never used to make space on a page”.
html should not be used for presentation as that’s the job of CSS. To make space on the page you use margins or padding on your existing structure. You don;t add breaks just to make space or to make paragraphs.
Breaks are used to create line breaks where it makes semantic sense such as in an address or poem or between form elements. The rest of the time you can use margins and padding on existing elements to create the space required. I code 3 or 4 new sites a week and never need to use a single break.
Take this section of your page for example:
<span class="redimg"> </span> <a href="/bone-loss-calcium-vitamin-low-ph.html">What is "a healthy pH"</a>?<br />
<br />
<p>Of course, whether a food (or food product) adversely affects something by physically touching it, for example, soda on your teeth, then you need the pH of the food, not the pH chart.</p>
<br />
You start of with a span (an inline element) when really it looks like it should be a heading of a suitable level (a block level element). Spans are used for inline content and not for creating new blocks and is completely wrong in that position. If you had used the correct element you wouldn’t need the two breaks that follow as you could apply a margin to that heading element. (Also not that some browsers may ignore successive breaks anyway. A break is a line break between certain forms of a content so makes no sense for there to be two breaks in a row.)
Assuming you are going to be consistent then you can apply the various margins you need to the heading elements and then the p elements that follows and no breaks or extra html is needed.
That is also wrong as what you have there is a heading followed by a list. Again no breaks are needed at all if you use the semantic element for the job in hand. Use a heading at the appropriate level and then use an unordered list. You can apply a class to the ul and thus give each list the space you require.
Having done this you can at a later date adjust the page via the stylesheet if you want to tweak things but with your approach your page is hard-wired and cannot be changed - you are stuck with it.
Html is all about using the most semantic element for the job in hand while adhering to the rules of html.
Paul,
I took clearfix out of the css. That was ridiculous to have clearfix as the last line of non closing html code. A programmer in '08 using dreamweaver had that in there. I never knew what it did so I never touched it.
The html for clearfix is on every page so that will take a bit to remove. I did it for the home page and two other pages and they work fine.
I see how a UL would be better for the list you cited.
On
<span class=“redimg”> </span> <a href=“/bone-loss-calcium-vitamin-low-ph.html”>What is “a healthy pH”</a>?<br />
The span is there to put that red square on the same line as an <a href=“”… to indicate the link is to another page on the site, as opposed to a page on the internet.
On the <br>s , I know you said it’s ok for addresses and poems. It would seem to be a bit much to use a <UL> every time I want to list more than one link. Even with one link, are you saying when I describe “a” in the css I should account for the jump down to the next line ? What if I also want two links side by side. Then I have to write extra css code for that situation. It seems to me that I should just write css for what <br /> does and have <span>…</span>where I have <br /> now.
You could have just added it as a background image to the anchor and no need for the span. Html structure must come first and then you build your presentation on that. An inline element cannot be a direct child of the body as that is invalid. It must be contained inside a block element and then semantically even in nested block elements inline elements should be contained in a suitable container and not run straight into opening block elements where you can help it.
If we take this section:
<br>
<br>
<h3>Cancer Via Degenerative Disease</h3>
<p>According to a nobel prize winner, cancer can be caused by deficiencies of four nutrients. Some cells in a nutritionally starved environment avoid death by changing to a type of cell with fewer nutritional needs, a cancer cell. Nutritional deficiencies leading to cancer is a degenerative cause of cancer.</p>
<span class="redimg"> </span>
<a href="/cancer-cells-cause-prevent-cure-nutrients-nobel-prize.html">Nutrition, Nobel Prize, and Cancer</a>
<br>
<span class="redimg"> </span>
<a href="/prevent-cancer-nutrients-phytonutrients-help-cure-cancer.html">Nutrients, Phytonutrients, and Apoptosis Prevent Cancer</a>
The code really should be this:
<h3>Cancer Via Degenerative Disease</h3>
<p>According to a nobel prize winner, cancer can be caused by deficiencies of four nutrients. Some cells in a nutritionally starved environment avoid death by changing to a type of cell with fewer nutritional needs, a cancer cell. Nutritional deficiencies leading to cancer is a degenerative cause of cancer.</p>
<ul class="linkimg">
<li><a href="/cancer-cells-cause-prevent-cure-nutrients-nobel-prize.html">Nutrition, Nobel Prize, and Cancer</a></li>
<li><a href="/prevent-cancer-nutrients-phytonutrients-help-cure-cancer.html">Nutrients, Phytonutrients, and Apoptosis Prevent Cancer</a></li>
</ul>
and the css could be something like this:
h3{margin:20px 0}
.linkimg {
margin:20px 0;/* set top and bottom margin to make space */
padding:0;
list-style:none;
clear:both;/* clear floats */
overflow:hidden;/* contain floats*/
}
.linkimg a{
display:block;
padding:0 0 0 15px;
background:url(/aai.png) no-repeat 0 50%;
margin:.2em 5px 0 0;
}
I changed the class from redimg to linkimg because “red” is presentational and should you decide at a later date that the image would be blue instead that would leave you with masses of html saying redimg but showing as blue which would clearly be nonsense or at the least confusing.
The margin and spacing is controlled by utilising css on existing elements and having a logical structure. No breaks or extra elements are needed.
Even with one link, are you saying when I describe “a” in the css I should account for the jump down to the next line ?
If you want an anchor to start a new line then just change its display to display:block and it will automatically start a new line. There is no need for a break but as I mentioned before the anchor should itself be in a suitable structure such as a p element or list (or whatever is semantically suitable in that position) and these parents automatically provide the line break where needed.
It seems to me that I should just write css for what <br /> does.
You write css to control the spacing in the page but if your page structure is logical that means you need to do very little apart from set the margins correctly in the first place for the elements that you are using.
and have <span>…</span>where I have <br /> now
No you don’t need anything to replace the break That’s the point as the break is redundant because you already have elements that can create the layout you require. There simply is no need to use break apart from the places I have mentioned.
Paragraphs have a logical conclusion with a closing p tag and that closing p tag should have the bottom margin that you require. All content will have a suitable html element in which to fit. If its a heading or subheading then use the heading tags in a structured way. If its normal text then its most likely a paragraph. If your page has logical sections then you can wrap that section in a div so you can target inner elements via the class on the div.
In the end its about creating a logical structure with html that describes the content to the best of its ability. Never use an element for the way it looks.
