I am thinking of designing a WordPress theme for my blog from scratch. I want to create a full-CSS non-table design.
Here is the basic sketch of the layout:
The basic CSS file:
Also available at: http://lord.vyoma.googlepages.com/splattheme00.css
The basic HTML file:
Splat Theme test page
Also available at: http://lord.vyoma.googlepages.com/splat00.html
As you can see, I am not able to properly get the SideBar part to the right of the Content within the Center DIV. I am attempting an fixed width layout.
Could some one please help with getting Content and SideBar in proper positions.
You can't have the float
You can't have the float after the content div, simplest method is take your center div and use it as a wrap for the content, give it width 100% float it and a negative right margin the width of sidebar then with the content div a right margin sufficient to push it away from the sidebar. Move the sidebar after the center div has closed and it should float to the top of the empty side space.
I attempted it, but..
...it did not seem to work. Please bear with me, because I may not have understood your corrections properly.
Here is what I did.
The new versions of the source can be found at:
Hugo, please let me know, if I have erred in understanding your solution.
Let's get that doctype fixed
Let's get that doctype fixed up first.
<!DOCTYPE HTML PUBLIC
Is that not correct? Should I be using something else?
Some help please.
You has erred #center
You has erred
#center needs float:left or right doesn't matter really and the negative margin the width of the sidebar then the nested content div has a plain margin-right to a width required to clear the sidebar plus what ever looks good? and sidebar does need to be floated right.
The doctype you have is a quirks one it needs the url identifier to act as a standards switching one, there are sticky posts at the top of each forum that can help or check the link in my sig line.
"#center needs float:left or
"#center needs float:left or right doesn't matter really and the negative margin the width of the sidebar then the nested content div has a plain margin-right to a width required to clear the sidebar plus what ever looks good? and sidebar does need to be floated right."
Hugo. Sorry if I am being a bug here, but I am not yet clear with it.
#center -> needs float:left and negative margin (left or right?)
#content -> needs margin-right (?)
#sidebar -> floated right?
The #backyard was not coming properly, and hence I added a 'clear: both' to it, and it comes fine.
I did the changes, and have uploaded it at:
Further, I have changed the DTD to:
As has been mentioned at this post. But is it necessary to go for a Strict DTD?
Can I not go for a Transitional DTD?
Could some one please help me out with it. Only when I can get the basic layout proper, can I think of styling it.
#center is float:left (or
#center is float:left (or right) width:100%; margin-right:-200px;
#content is margin-right:210px;
#sidebar is floated right
You haven't as yet centered the layout the text-align is a hack for IE5 and is not the prime centering method even if it does work for IE6 .
margin auto centres containers in standards compliant modern browsers
You use a strict DTD as trans are for pages already written but being transitioned from old bad code to somewhat better code but may contain elements that cannot be changed and that will not validate to strict.
So how do I center the
Doh! I missed the align: center in the #rap id.
Thanks a lot Hugo. You have been a great help.
I think now I finally understand some basics of CSS layouts. Earlier, I did create some layouts, but that had heavy influence from CSS tutorials lying around.
This is one of the first I created from scratch.
And I think I will use the strict DTD as far as I can.
It looks the same in FireFox and IE. I hope that covers most of the browsers (well, at least according to the AwStats of my site).
Again, thanks a lot!
Edit: I almost forgot.
Here are the new versions of the working set of HTML and CSS for record:
getting there, few things to
getting there, few things to sort out , there is no such thing as align:center to center an element you use auto margins where a width is less than it's parent object that's all that's needed text-align is used due to IE incorrectly centering any object nested under that rule which in this case means a block level one; it shouldn't do this but it does and is useful in that IE5 has no standards mode rendering it is always in quirks mode, and in that mode it does not understand margin auto so will not center elements.
Coding to XHTML requires that all tags are written as lower case so you must de-uppercase those tags, and always include a meta character set if only to keep the validator happy.
There are a number of variations to the method of achieving css column style layouts this one works well and allows you to easily reverse those rules to have the positions swapped visually it's worth googling though on css layouts and seeing what other methods can be employed.
Always set out a new page using strict, this is a because you do not write a new document to include deprecated elements, using strict does not impose hardships as such, just means that you must be precise and is good for coding discipline.
Hey, Hugo. Sorry to not
Hey, Hugo. Sorry to not answer earlier. I was engrossed in other stuff.
Yes, indeed. There is nothing called 'align'. Corrected it.
And all the uppercase XHTML tags have been 'de-capitialized'.
The code to this point is at:
Note: The 'b01' denotes branching from the versions. (I had made a 04 version with attempt at styling).
Hugo, I have one question here. Seeing that we are trying to achieve a semantic markup of the content in our HTML, do you not think that the #rap and #center ids in the HTML markup (which is required to properly center the layout) are extra and meaningless ids? I mean, they do not really contribute to the meaning of the block of content. #header, #pagelinks, #content, #sidebar, #backyard, and #footer do have meaning in the blog, but #rap and #center do not. Is it not possible to achieve the layout and presentation that is required, with out adding any more ids?
I attempted removing them both. I could remove the #center id easily, and still achieve the required result, but I was not able to remove the #rap and still achieve the centering as required. I even tried putting the #sidebar div into the #content div (as I want the sidebar to appear within the content but floated on to the right) - it still is not semantic. But I did not get the result I wanted. It gives different result in IE and Firefox. (To my surprise, IE gives something that is very near to what I want).
So, my question is, can we not get the layout we want, without going for extra ids(#rap and #center) - because putting them in the HTML would make it 'un-semantic'?
No don't remove ID's the
No don't remove ID's the names are irrelevant to some extent , they need to make some sort of sense but that is more for our benefit they do not have any direct bearing on Semantics semantics is concerned with the elements used to describe content and as such divs carry no semantic weight they are just grouping elements not that we despise them for it.
You might be able to loose divs and keep a working layout transferring any required rules to another element, but I wouldn't A few divs extra doesn't hurt matters, people tend to get too carried away with reducing markup. The phrase 'Divitis' referes more to wrapping everything in sight with a div so every p tag has one every link does and no sight of a ul.
The outer wrapper, container, rap - call it what you may - is a convention that allows easy centering and control of your layout elements and is one div you should not loose, the center div could be lost and iirc is there to sort certain browser problems but can also be handy for other purposes. If you feel you can loose it do so but check carefully across browser that the layout holds you can of course just float all main elements then problem solved. each method generally has it pros and cons you just have to decide which suits a particular layout at the time.
edit/ re-reading your last post why do want the sidebar in content? that makes no sense! sidebar and content are seperate or have to be at some point either sidebar is before content or after. if its in side content you will still need to deal with whatever text is to it's left and the simplest way of doing that is a div to group it all, back to square one!
Floats heve to come before the unfloated element if you want it after you have problems and have to do what I have shown or one of the other techniques along the lines of margins/padding and negative values somewhere down the line
Hugo, now that you explained
Hugo, now that you explained that 'div' has neutral semantic meaning, all those things seem to fit in place. Thanks for the verbose explanation - it helped a lot in setting my perspective right.
And you are right - sidebar has no meaning within the content div. I was just experimenting around.
So, I will revert my source to:
Now, I seem to be having a problem when I have a longer side bar. I do not want the whitespace of the #content (or the #center) div to extend along with side bar and a little more.
As you can see, it gives different results in FireFox and IE and both are not what is required:
I'm not clear on what you
I'm not clear on what you want here but if you want the effect of equal height on the two elements then you would trick that by placing a white background on #rap.
You can also approach things if you fix widths by moving sidebar into #center (and floating #content, which I notice you have already although not required in this layout mode) placing the background required on #center and a gif the width of the sidebar repeated on the y-axis running down the right edge of the #center div then sidebar will have the illusion of matching the height of #center through the image sitting behind it, #content and sidebar heights are irrelevant and are dictated by the content they hold.
Hugo, thanks a lot for the suggestions.
I think I finally have got what I want.
To be clear, you may refer to the last image I gave in the first post OR alternatively check out this link:
I want the white portion to extend only if the sidebar is longer than the content. If the sidebar is shorter than the content, I would want it to take only the height it requires encompass sidebar-content.
I achieved it by putting the #rap background to white and moving the #sidebar into the #center, and floating it right. I left the #content
Here is the link for long sidebar: http://lord.vyoma.googlepages.com/splat-b01-03.html
Here is the link for shorter sidebar when compared to content: http://lord.vyoma.googlepages.com/splat-b01-04.html
(I put the border just to be clear as to where these divs are).
The final cleaned up source code, that has the desired result is at:
I will baseline these codes, as they are the optimum code for the layout I want. Now I will be proceeding to style it.
Question to moderators: If I have any problems with styling, should I post it here in the same thread or make a new thread in some other appropriate forum section?
In this instance possibly
In this instance possibly better to start a new thread,