15 replies [Last post]
Vyoma
Offline
Regular
Last seen: 14 years 11 weeks ago
Joined: 2006-06-14
Posts: 12
Points: 0

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:
body {
background: #2A2A2A;
text-align: center;
}

#rap {
width: 700px;
text-align: left;
}

#header {
background: #808080;
}

#pagelinks {
background: #C0C0C0;
}

#center {
background: #FFFFFF;
}

#content {
margin-right: 210px;
width: 450px;
}

#sidebar {
background: #808080;
width: 200px;
float: right;
}

#backyard {
background: #C0C0C0;
}

#footer {
background: #808080;
}
Also available at: http://lord.vyoma.googlepages.com/splattheme00.css

The basic HTML file:

Splat Theme test page

Center


Content

Back yard

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.

The concept sketch I made for it:

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 3 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

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.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Vyoma
Offline
Regular
Last seen: 14 years 11 weeks ago
Joined: 2006-06-14
Posts: 12
Points: 0

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.
CSS:

#center {
background: #FFFFFF;
width: 100%;
}

#content {
margin-right: -210px;
}

#sidebar {
background: #808080;
width: 200px;
}

HTML:


Center


Content

The new versions of the source can be found at:
http://lord.vyoma.googlepages.com/splat01.html
http://lord.vyoma.googlepages.com/splattheme01.css

Hugo, please let me know, if I have erred in understanding your solution.

Thank you.

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 45 weeks 19 hours ago
Joined: 2004-06-30
Posts: 9668
Points: 801

Let's get that doctype fixed

Let's get that doctype fixed up first.

Verschwindende wrote:
  • CSS doesn't make pies

Vyoma
Offline
Regular
Last seen: 14 years 11 weeks ago
Joined: 2006-06-14
Posts: 12
Points: 0

<!DOCTYPE HTML PUBLIC

Is that not correct? Should I be using something else?

Some help please.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 3 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

You has erred #center

You has erred Smile

#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.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Vyoma
Offline
Regular
Last seen: 14 years 11 weeks ago
Joined: 2006-06-14
Posts: 12
Points: 0

"#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:
http://lord.vyoma.googlepages.com/splat02.html
http://lord.vyoma.googlepages.com/splattheme02.css

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?

I have now cross browser compatibility problems. It is being centered properly in IE, but in Firefox, it is left aligned.

Could some one please help me out with it. Only when I can get the basic layout proper, can I think of styling it.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 3 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

#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.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Vyoma
Offline
Regular
Last seen: 14 years 11 weeks ago
Joined: 2006-06-14
Posts: 12
Points: 0

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:
http://lord.vyoma.googlepages.com/splattheme03.css
http://lord.vyoma.googlepages.com/splat03.html

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 3 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

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.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Vyoma
Offline
Regular
Last seen: 14 years 11 weeks ago
Joined: 2006-06-14
Posts: 12
Points: 0

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:
CSS: http://lord.vyoma.googlepages.com/splattheme-b01-00.css
HTML: http://lord.vyoma.googlepages.com/splat-b01-00.html

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).

CSS: http://lord.vyoma.googlepages.com/splat-b01-01.html
HTML: http://lord.vyoma.googlepages.com/splattheme-b01-01.css

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'?

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 3 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

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.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Vyoma
Offline
Regular
Last seen: 14 years 11 weeks ago
Joined: 2006-06-14
Posts: 12
Points: 0

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:
CSS: http://lord.vyoma.googlepages.com/splattheme-b01-00.css
HTML: http://lord.vyoma.googlepages.com/splat-b01-00.html

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:
CSS: http://lord.vyoma.googlepages.com/splattheme-b01-02.css
HTML: http://lord.vyoma.googlepages.com/splat-b01-02.html

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 3 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

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.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Vyoma
Offline
Regular
Last seen: 14 years 11 weeks ago
Joined: 2006-06-14
Posts: 12
Points: 0

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:
http://img457.imageshack.us/img457/9872/splatthemeconceptxq8.png

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
un-floated.

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:
HTML: http://lord.vyoma.googlepages.com/splat-b01-05.html
CSS: http://lord.vyoma.googlepages.com/splattheme-b01-05.css

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?

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 3 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

In this instance possibly

In this instance possibly better to start a new thread,

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me