Jump to content



Welcome to KnowledgeSutra - Dear Guest , Please Register here to get Your own website. - Ask a Question / Express Opinion / Reply w/o Sign-Up!
- - - - -

More Css3

Started by mrdee, Jun 16 2011 11:58 AM

19 replies to this topic

#1 mrdee

    Privileged Member

  • Kontributors
  • PipPipPipPipPipPipPipPipPip
  • 810 posts
  • Gender:Male
  • Location:Slough (UK)
  • myCENT:90.63

Posted 16 June 2011 - 11:58 AM

Hello,

If you look at my news page on http://www.vlaandere...org.uk/news.htm you will se that it is divided in 2 columns.
The left one where the menu resides, and then the right one where I put all the articles ina separate box.

As things are now, I have achieved this with two tables, but I would like to achieve the same layout using CSS3 rather than tables.

Can someone show me how that is to be done, and also, if I am using CSS3, will all browsers see the page correctly?

Or is there an alternative in an earlier CSS version to achieve the same layout?

Still trying to get the grasp of the ins and outs of CSS3 ( and earlier).

Thank you in advance for any advice.

Edited by mrdee, 16 June 2011 - 05:19 PM.

#2 darko100

    Advanced Member

  • Kontributors
  • PipPipPipPipPipPipPip
  • 117 posts
  • Gender:Male
  • myCENT:31.51

Posted 17 June 2011 - 02:33 PM

Tables are not flexible at all. Here is a simple layout with 2 sides , using HTML5 and CSS3 (the newest technologies).
<!DOCTYPE html>
<html>
<head>
<title>mrdee</title>
<style type="text/css">
body{
margin:0;
background:#fff;
}
#container{
width:810px;
margin:100px auto 0;
}
aside{
width:300px;
min-height:500px;
background:#eee;
border:2px dashed #ddd;
border-radius:5px;
float:left;
padding:5px;
}
#therest{
float:right;
width:460px;
min-height:500px;
background:#eee;
border:2px dashed #ddd;
border-radius:5px;
margin-left:20px;
padding:5px;
}
</style>
</head>
<body>
<div id="container">
<aside>Here is my sidebar</aside>
<div id="therest">My content</div>
</div>
</body>
</html>

Edited by moderator, 23 April 2012 - 08:57 AM.

#3 mrdee

    Privileged Member

  • Kontributors
  • PipPipPipPipPipPipPipPipPip
  • 810 posts
  • Gender:Male
  • Location:Slough (UK)
  • myCENT:90.63

Posted 17 June 2011 - 07:53 PM

Darko100,
YOU ARE A STAR!!!!

Thank you so much for this, it works great and I think my layout looks better than before.
I also like hat grey-blueish colour yo picked for the background and the slightly rounded corners.
Of course I had to tweak the measures a little bit to make it take up the whole width of the page, but that was a good bit of practice.

The only thing I am not sure about yet (all parameters in style sheets are not clear to me yet) is how I can decrease the gap between the sections a little bit, I fiddled a bit with the margin settings, but that did not make a lot of difference.

I also like how you set a "relative" height, so that the frame etends as content is added.

The content is not uploaded yet (I tested it in my browser through my HTML Editor) as I have to adjust all my pages first, but you can go and have a look at http://www.vlaanderen-flanders.org.uk and, if you wish, add a bit of feedback when it is done (should be later on tonight, I estimate in about 1 hout from now).

Nevertheless, I think it is a great improvement and I am really grateful.

At the risk of becoming a pain in the proverbial: could you also explain to me in what respect this system is more flexible than tables, ie. what the advantage of this system over tables are?

Thank you again for your expert advice.

#4 Baniboy

    Advocatus Diaboli

  • Kontributors
  • PipPipPipPipPipPipPipPipPip
  • 878 posts
  • Gender:Male
  • Location:/root
  • Interests:Everything...
  • myCENT:37.47

Posted 17 June 2011 - 08:29 PM

Quote

1. Can someone show me how that is to be done, and also, if I am using CSS3, will all browsers see the page correctly?

2. Or is there an alternative in an earlier CSS version to achieve the same layout?

1. No, CSS3 isn't supported very well. And some browsers have come up with an idiotic idea of using specific properties for their browser only, like Firefox's own border radius property (moz-border-radius). It has been a while since I checked that so it might have changed now.

2. Yes. And I already showed you in another thread you made. If you don't want to read that, google for "2-column layout with CSS".

The HTML5 darko posted was more of a semantic web thing with the <aside> tag. If you want to use that, you'll have to change all of your HTML files to say that the code is HTML5. And darko, min-height and max-height properties don't work with IE. Yeah that sucks. One stupid browser has to come and ruin everything.

CSS3 is more of a visual than structural update. At least from what I have seen. Rounded corners, gradients, text shadows and other stuff like that. I don't think CSS3 helps with column design. Anyway, all you have to do to get 2 columns side by side is to have the sidebar first in the HTML code, then apply float: left; ... Or right, if you want to have it on the right.

On another note, mrdee. Your background music scared the crap out of me when I visited your site :lol: It took some time to load and I had the volume pretty high. :D

#5 mrdee

    Privileged Member

  • Kontributors
  • PipPipPipPipPipPipPipPipPip
  • 810 posts
  • Gender:Male
  • Location:Slough (UK)
  • myCENT:90.63

Posted 17 June 2011 - 09:40 PM

There you go,

in the mean time, the whole Dutch section has been uploaded with the "facelift".

In the English section, the new News page has been uploaded so far, you can find this at http://www.vlaandere...org.uk/news.htm

I think it looks quite cute.

Thank you, Darko100.

baniboy, I did read your tutorial again, and, I will work through the best possible solution, dont think I am not grateful for all the help everyone keeps givig me.

I have tested the site in both Firefox and IE9 and they both seem to work, although, surprisingly, in IE9, my coloured scrollbars do no seem to work, although the CSS code is still thee, and I did change the DOCYPE to HTML5 for every file, at least i remembered that.

Edited by mrdee, 17 June 2011 - 09:49 PM.

#6 darko100

    Advanced Member

  • Kontributors
  • PipPipPipPipPipPipPip
  • 117 posts
  • Gender:Male
  • myCENT:31.51

Posted 17 June 2011 - 11:23 PM

View Postmrdee, on 17 June 2011 - 09:40 PM, said:

There you go,

in the mean time, the whole Dutch section has been uploaded with the "facelift".

In the English section, the new News page has been uploaded so far, you can find this at http://www.vlaandere...org.uk/news.htm

I think it looks quite cute.

Thank you, Darko100.

baniboy, I did read your tutorial again, and, I will work through the best possible solution, dont think I am not grateful for all the help everyone keeps givig me.

I have tested the site in both Firefox and IE9 and they both seem to work, although, surprisingly, in IE9, my coloured scrollbars do no seem to work, although the CSS code is still thee, and I did change the DOCYPE to HTML5 for every file, at least i remembered that.
No problem , glad you did it. BTW , you could also use percents to define width. For example , aside width: 30% , content width:70%;

It looks nice. But the table borders look a little oldish , i can design something cooler for you for free. The use of tables is totally not needed in your case , just makes the markup a mess. You can use <article> tags to post each article , and add a solid border on bottom for every post.

#7 Baniboy

    Advocatus Diaboli

  • Kontributors
  • PipPipPipPipPipPipPipPipPip
  • 878 posts
  • Gender:Male
  • Location:/root
  • Interests:Everything...
  • myCENT:37.47

Posted 18 June 2011 - 12:14 AM

Umm.. I'm viewing this on opera, so not sure if this is what you see, but the text on your content section comes in contact with the borders. You might want to add a padding of 10/15px to have some space there. Darko had some good ideas, too. You can use all of the HTML5 tags now, if you want to. Although I wouldn't go with the percentage thing. I would give the navigation an absolute size (say, 300px). The other div that contains your content will automatically fill in all available space. Because you might not want your navigation to expand more than necessary,

And don't read that tutorial on my site, it's horrible. I have nested divs and stuff but the nested elements aren't padded so that you could see the structure, which makes it confusing. Read another one on the web instead. The only important thing that you have to remember when using the CSS float property is that when you float things, and then add something, like a footer beneath them, it won't work well. For this, you have to add clear: both; for the footer, which means it comes AFTER all floating elements.

#8 mrdee

    Privileged Member

  • Kontributors
  • PipPipPipPipPipPipPipPipPip
  • 810 posts
  • Gender:Male
  • Location:Slough (UK)
  • myCENT:90.63

Posted 18 June 2011 - 11:20 AM

Thank you both for all the interesting help.

Yes, I wanted to have a bit of a margin between the text and the edge of the box in my content window, but was not sure how to set that.

And, Darko100, feel free to help me with a cooler border, I can do with all the help I can get, and I really appreciate all the support I am getting.

One other thing I noticed was: both windows are a bit far away from the page title, although there are no extra </br> tags, is there any way I can get my windows a little bit higher up so I do not have that whole empty space between the title and my content?

That would be a great improvement too (IMHO anyway).

So, Baniboy, it looks like it sort of works in Opera too? I'll have a look too in a minute, I believe i have a copy of Opera on my laptop, so I will be checking it out.

Once again, thanks for all the interesting tutorials.

#9 mrdee

    Privileged Member

  • Kontributors
  • PipPipPipPipPipPipPipPipPip
  • 810 posts
  • Gender:Male
  • Location:Slough (UK)
  • myCENT:90.63

Posted 18 June 2011 - 11:34 AM

This is how I have adjusted the CSS code for now:

<style type="text/css">
body{
margin:0;
background:#fff;
}
#container{
width:1250px;
margin:100px auto 0;
}
aside{
width:300px;
min-height:500px;
background:#eee;
border:2px dashed #ddd;
border-radius:5px;
float:left;
padding:5px;
}
#therest{
float:right;
width:900px;
min-height:500px;
background:#eee;
border:2px dashed #ddd;
border-radius:5px;
margin-left:20px;
padding:5px;
}
</style>

I have tried adjusting the padding in #therest, but that does not create any space between the window edge and the tex, all it does is push my content window downwards, so it starts about half a page underneath the left one.

By the way, I just noticed: should "aside" not be preceded by a # sign?

Edited by mrdee, 18 June 2011 - 11:36 AM.

#10 Baniboy

    Advocatus Diaboli

  • Kontributors
  • PipPipPipPipPipPipPipPipPip
  • 878 posts
  • Gender:Male
  • Location:/root
  • Interests:Everything...
  • myCENT:37.47

Posted 18 June 2011 - 12:51 PM

Oh yeah, that sometimes happens. What you have to do is create a new <div> container inside the "therest". Then you add padding to that. Before doing that, remove all padding from therest.

The HTML5 aside tag is in itself a box element. Like a div tag, but with a more semantic meaning so that when computers are searching for relevant information, they can tell where the main content is, where the navigation is, etc making the search easier. So no, you don't need to have a # next to aside in CSS, it itself points to the <aside> HTML tag within the code.

I found an error while scrolling your website down, it's where the article "02/05/2011
Not worth mentioning in the national press, of course." is. There is some kind of spooky error with that in opera. I then visited your site with firefox 3.6 and that was even more weird. The two columns had piled up on each other instead of being next to each other. I don't know if you're doing maintenance at moment or something. I can't show you a screenshot, because the forum returns an error while I try to attach a file.
Back to Web Design · Next Unread Topic →

Reply to this topic


This post will need approval from a moderator before this post is shown.

  


1 user(s) are reading this topic

0 members, 1 guests, 0 anonymous users

  1. Discuss Anything
  2. → Main
  3. → The Internet
  4. → Web Design
  5. Welcome - Start here! - Free Web Hosting