Sidebar Sidebar
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

CSS Help: Columns and Rounded Edges

D

dingdongbubble

macrumors 6502a
Original poster
Jun 1, 2007
538
0
Hello people! (I might be your KING one day)

As you might know, I am learning the basics of web design and development. I wanted to ask you how to make 'columns' like in some blogs where one column is the blog entry and one is where there is list of the Months and stuff. How do you make 'sections' in the web page like that?

Secondly I have seen in some web pages with those columns that each column has a different background. The backgrounds have rounded edges. So how do I put these rounded edges without putting an image as the background to save bandwidth.

Lastly some websits nowadays are really cool like Macrabbit.com. They have separate sections like a menu and stuff. How do you do that?
 
Alright so that was the TAB thing from Macrabbit.

Can you please visit this website:http://www.stopdesign.com/portfolio/web_interface/blogger_templates.html?fs=2

i want to know how the designer made this design using CSS. I am only talking about the round edges between the different secctions. I understand that this would be very easy if I used an image as a background but I dont want to waste bandwidth and it wouldnt be consistent. It would be great if the round edge thing continued automatically for as long as my page goes.

Another request please. I saw a famous website a few days back (I dont remember the exact one) and its template was basically a Mac OSX windows with the close and minimize buttons on the top but the design continued consistently till the end of the page and the bottom was also like a MAc window. If you remember which site I might be talking about then please tell me how they did it otherwise if you can understand my vague description then can you help me out?
 
Even Apple themselves use graphics as the backgrounds for many of their rounded corner columns. Roughly, you make one graphic for the 'cap', and one graphic for the content and bottom. This second graphic should be way taller than it needs to be.

Make three css styles that you can apply to divs... one for the cap, one for the content/bottom, and one to hold them both. The 'cap' style has a background aligned to the top, and the other has the background aligned to the bottom. As your content grows, the background just grows with it.

I would recommend you look through some css from the site itself.
 
For rounded corners, see:
http://www.456bereastreet.com/archive/200406/css_teaser_box/ and http://www.456bereastreet.com/archive/200406/css_teaser_box_revisited/

For separating sections, I believe you meant something like navigation menu on the left side and contents on the right side of your site (or something to that extend)? If yes, search for 2 column layout somewhere. Don't have the links right now, but should have plenty of results if you search enough.

If you are starting to learn something, visit OSWD, get some ideas, view the source code, and learn from them. Start simple, don't shoot for the best from the get go (assuming you don't have a lot of background in web design. Otherwise, please disregard).


-stndn.
 
dingdongbubble said:
i want to know how the designer made this design using CSS. I am only talking about the round edges between the different secctions. I understand that this would be very easy if I used an image as a background but I dont want to waste bandwidth and it wouldnt be consistent. It would be great if the round edge thing continued automatically for as long as my page goes.
Click to expand...

rounded corners
Actually it's harder with tables and backgrounds, in my opinion. FYI, CSS also uses background images to accomplish that (with neater code). Besides, you're not really going to save much bandwidth. They're just static gifs for the most part.

If you looked at the other thread I linked to, you would have found this website, that I link to in post 9. It describes how to use the Sliding Doors technique to accomplish exactly what you're looking for (rounded + expands w/ text size).

dingdongbubble said:
Another request please. I saw a famous website a few days back (I dont remember the exact one) and its template was basically a Mac OSX windows with the close and minimize buttons on the top but the design continued consistently till the end of the page and the bottom was also like a MAc window. If you remember which site I might be talking about then please tell me how they did it otherwise if you can understand my vague description then can you help me out?
Click to expand...


You mean the itheme?
 
Wirelessly posted (Mozilla/5.0 (SymbianOS/9.1; U; en-us) AppleWebKit/413 (KHTML, like Gecko) Safari/413 es61)

Wel u got it right. I WAS lookin for the two or three column thing but with more flExibility so that i can add more sections.
 
Wirelessly posted (Mozilla/5.0 (SymbianOS/9.1; U; en-us) AppleWebKit/413 (KHTML, like Gecko) Safari/413 es61)

Hey thanks for the links i will check them out. How does Oswd put those round edge rectangles?
 
dingdongbubble said:
Alright so that was the TAB thing from Macrabbit.

Can you please visit this website:http://www.stopdesign.com/portfolio/web_interface/blogger_templates.html?fs=2

i want to know how the designer made this design using CSS. I am only talking about the round edges between the different secctions. I understand that this would be very easy if I used an image as a background but I dont want to waste bandwidth and it wouldnt be consistent. It would be great if the round edge thing continued automatically for as long as my page goes.
Click to expand...

I don't know exactly how Douglas Bowman created that design, as I can't find any live examples of it. If I could, I would start examining it with Firebug, which is a fantastic extension for Firefox that every web developer should be using. My guess, though, is this:

The orange, dark blue, pale green and bright blue sections, along with the very tops of the dark blue content and sidebar sections are a single image. The content and sidebar sections are a repeat-y-tiled (i.e. background:white url(imageurlwouldgohere.png) scroll repeat-y top center) image which wouldn't have to be any more than 1px tall. The footer is probably a single image again. In every case, you're going to use semantically marked up HTML to represent each piece of content (the blog title would be in an h1 tag; the blog description could be in a div with the id description; the sidebar would be in a div with the id sidebar; and the content would...well, you get the idea), and then position and style them appropriately with CSS.

What's great about the method I describe above is that if you browse to the site with CSS disabled (blind users would be an obvious example of this) everything still makes sense.

There's nothing 'inconsistent' about using background images, and the amount of bandwidth you're going to use with them is really next to nothing. I'd estimate the top image could be done as a PNG and be no larger than 10 or 15k. The main background image could be in the hundreds of bytes range, and the footer would only be a few K.

There are ways to achieve rounded corners without images, but they all require extensive use of Javascript, and the size of the necessary routines is probably about the same size as the images you're going to stuff down the pipe.

I highly recommend reading A List Apart. The creator of the template you reference above is a frequent contributor, and the content is all must-read for any aspiring web designer. Feel free to ping me via email if you have any questions. I tend to only log into MacRumors once a week or so, so PMs will usually go unanswered. You can reach me at abreth@microsoft.com.

Best of luck!
Aaron
 
can i ask in what bizare-o world it's favourable to rely on JavaScript for appearance, when CSS/Images would do the job, and don't require the user to have JS on (many don't for security reasons), or rely on JS that may not work in all browsers?

also, as the demo at the bottom shows, high contrast beween the border colour and the background colour will look crap, because it's a "hard" line, not a "soft" or "rounded" line as you could produce in Fireworks/Photoshop/GIMP/etc
 
You must log in or register to reply here.
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.
Top Bottom
Back