Support Contact:
Phone: +40 (21) 310.63.42; Forums: extendstudio.com/support

Creating a round corner css website layout

How to build a round corner CSS website with dynamic flash content with Dreamweaver CS5

We all want to build clean CSS web pages, right? But what we could do more than just that and make it have rounded corners, flashy unlimited levels menu and a flash dynamic news feed on the right panel? Something like this web 2.0 template with nice round CSS corners and a right panel with a flash dynamic news feed. Here is my layout:

In order to start building a round corner css site we need to have in mind some things. First of all is the layout of the website,  so let me explain all the elements from my layout.

Step 1. Website layout

  • The first thing when creating a new website layout is the background image or color. You can choose a standard color or a gradient between two or more colors, the option is yours.
  • The second step is to create or choose a logo. There are many programs that can help you create easily a logo, or if you are a more of a designer you can create your own logo. Just remember to use some colors that fit with your design.
  • The next thing is to set up the main layout of the page. You can use a template from the web or you can create one from scratch, the choice is yours.
  • The navigation menu. It doesn’t matter if you choose vertical or a horizontal menu, just find the right menu that you like. And if you want to create fast and easy a drop-down menu, or a vertical menu you should take a look at Creative DW Menus Pack.
  • A header, it could be a slideshow – if you want a cool header that can be built fast you can try the Image Show Pro Dreamweaver extension. Here is how to easily build a nice slideshow.
  • If want to use round corners CSS panels and you’re not that great with the coding part you should take a look at a Dreamweaver extension: Flexi Panels CSS. You can start using your new CSS round corner panels in minutes. And you don’t have to stay hours on building them. Flexi Panels provides fast and reliable high end CSS boxes with rounded corners.

Ok, we have our blueprint for the layout and the right programs to start building it, so let’s begin.

Step 2. Building a webpage fast

Once you have the background for the page, go to Dreamweaver and start creating a CSS rule like this :

<style>

body{    background:url(your image goes here) repeat-x top;}

</style>

Let’s explain the coding. We have set the body background, meaning the webpage will use the background image that we have created. The repeat-x means that we only want the image to be duplicated on the horizontal axis and the top means that we set the image to be align to the top.

The next thing is to create the CSS rules that we will be using within this webpage.  We need a div container for all the elements and we’ll call it wrapper. Next we need a div for the logo. Also if you want to implement those media icons (twitter, facebook) then we need another div for those media icons.

Next, the logo part. Once we have the logo image “Export it for the Web” to have a png image with transparency so the edges will blend into the design. And finally we need a div container for those round corner CSS boxes that we will be using. It should look like :

<body>

<div id=”wrapper”> <!— this is the container for all the divs –>

<div id=”logo”> your logo goes here </div>

<div id=”media”>your media icons go here</div>

<div id=”main”>

The CSS Panels go here

</div>

</div> <!—end wrapper –></body>

Now we’ll focus on the logo CSS rule. We need to place the logo at the top, so the position will become absolute with 0 pixels for the top. We don’t want the logo to stick with the top left corner so we will add 50 pixels for left. We want the logo to stay on top of the other elements so we will add a higher z-index. We also need to define a width dimension for the logo container in order to use the float rule.  I’ve added a border to the sample code below to show the surrounding edges for the logo container.

#logo {

color: #FFF;

text-decoration: none;

margin:0px;

padding:0px;

width:400px;

float:left;

position:absolute;

top:0px;

left:50px;

z-index:3;

}

Inside the logo container we need to define two containers, one for the image and one for the text. The text container is quite important for the search engines. This is an search engine optimization tip. I’ve done an article about website optimization tips. So here are the rules for these two containers:

#logo-image{float:left; width:97px; height:98px; }

#logo-text{

float:left;

width:300px;

font-family:”Century Gothic”, Century;

font-size:24px;

position:absolute;

top:35px;

left:110px;

}

I’ve also created some rules for the links inside the logo container so that we don’t get blue underline text for the links. But we want to have another color for the links when we hover over them.

#logo a{text-decoration:none;color:#FFF;}

#logo a:hover{color:#060;}

For the media icons I’ve chosen facebook and twitter for this tutorial. I’ve placed those icons near my top right. Also using absolute positioning with 65 pixels from the top and 0 pixels from right. And defined the width of the container and also the height.

#media{

width:350px;

float:right;

position:absolute;

top:65px;

right:0px;

height:65px;

}

Inside this container we need to have separate containers for each icon. So we need a container for the facebook icon and one container for the twitter icon. Both containers will have a width and a floating CSS rule. Because the facebook icon is smaller it will have a top padding.

#media-facebook{float:left;width:150px; padding-top:15px;}

#media-twitter{float:left;width:130px;}

Now we need to define the CSS rule for the main container that will hold those CSS Panels with round corner. It will have a width with a floating CSS rule. Also an absolute positioning and we need to set it apart from the top, because it will interfere with the logo and the media icons. So we set it 130 pixels away from the top. And we don’t want it to stay on top of the logo, so we will give it a lower z-index.

#main{

width:1000px;

float:left;

position:absolute;

top:130px;

z-index:1;

clear:both;

}

And now lets add the CSS Panels with round corners. If you don’t have the Flexi Panels , follow the link and download it. After you have installed it, you can test it out or buy a license if you like it. Go to Dreamweaver, in the Insert panel there will be “CSS Panels for DW” and press “Insert Panel”. The interface for the CSS Panel will pop up and you can choose one the many themes from there. Or if have made you own design,  press “Create your own design” and the Flexi Slicer AIR application should open.

Here is my layout for the CSS Panels that I will implement with the Flexi Slicer. If you need a tutorial on how to use the Flexi Panels here is how. See the picture below for my layout.

Let me show how the slicing should go for the header. The other parts meaning the main content and the footer should go smoother after the header. I’ve set a width of 1000px for the main CSS Panel.

Make sure you follow the instructions, so that you don’t cut out the corners.

Ok, now we have a nice webpage with round CSS corners that we have to fill it with information. Find the header div for our main CSS Panel, and where it said “Title” we should place our header slideshow. It should be something like this :

<div > Title </div>

If you want to have a nice slideshow, you can create it with a Dreamweaver extension: Image Show Pro . If you don’t have the Image Show Pro installed please do so, so we can proceed with our tutorial. Set the width of the slideshow to 1000px and the height accordingly to your design, mine is 289px.

You’ll need pictures for the slideshow, so browse for the pictures that you want to have into the slideshow.

Ok, once we have our nice slideshow, we can focus on our website navigation menu. To save time we can build very fast a menu with the Creative DW Menus Pack Dreamweaver extension. Once you have download it go to Insert, Creative Menus and choose one of the menu types. For this tutorial I have chosen a drop down menu. Set the height to 40px and set the background color to resemble the color from the header. My background color for the menu is : #73880a. Also choose one of the many themes that you like and customize it in order to fit the layout.

Creative DW Menus

Step 3. Getting dirty with the CSS code

First we need to modify the z-index for the Creative DW Menu so that the header will stay on top of the main content. So in the first standard.css file find the header section, and in this line :

.newskin_standard_h_front {position:absolute; top:0px; left:0px; width:100%; z-index:2; }

Modify the z-index higher than 2 and after that add this code: text-align:center; in order to show the menu on the center of the header.

We have created the layout, the header and the navigation menu so far. Now we need to start to add information to main content of the CSS Panel. In order to do that we need to create some CSS rules for the content.

We need to create a container div for the content “content1”. We need to create a container for the left content and a div container for the right panel. Inside the left container (div news) we need a div container for the title. And also we need a container that will have a div for the image and the div for the text. The code should look something like this:

<div id=”content1”>

<div id=”news” > <!—left container –>

<div id=”titlu”>Your title goes here </div>

<div class=”container”> <!—container for the image and the text –>

<div class=”container-image”> your image goes here </div>

<div class=”container-text”>Text goes here</div>

</div> <!—end div container –>

</div> <!—end div news –>

</div> <!—end div content1 –>

Ok, I have showed you the divs but we need to create CSS rules for the divs. The content1 div will have the same width as the CSS Panel meaning a 1000px width. And a float left rule. The title div will have a width of 600px and also a float left rule. We don’t want it to be pinned to the left margin so we set a 25px for the left margin and a top margin of 5px. We also set the font and the size for the title text. The left container div will have a 650px width and a float left rule. The container for the image and the text will have a width of 630px because we set a left padding of 20px. Just remember when you set a margin or padding to not exceed the width of the upper container. Like in the picture below:

Dimensions for a div container

Here are the CSS rules:

#content1{

width:1000px;

float:left;

clear:both;

}

#titlu{

width:600px;

float:left;

height:50px;

margin-left:25px;

margin-top:5px;

clear:both;

}

#titlu h1{font-family:”Century Gothic”, Century;font-size:18px;color:#FFF;}

#news{width:650px;float:left;}

.container {

width:630px;

float:left;

padding-left:20px;

}

.container-image{

width:70px;

float:left;

text-align:center;

padding-top:5px;

padding-bottom:10px;

}

.container-text{

width:540px;

float:left;

font-family:”Century Gothic”, Century;

font-size:12px;

padding-left:10px;

padding-top:10px;

}

For the right panel we will be using a flash dynamic news nugget. Here is the tutorial on how to create a dynamic news nugget. Once you have the new nugget created you need to copy the swf file into the folder where your design is. After that just drag the Flash media file in the Dreamweaver page. Remember we need a width of 330px with  a height of 502px for the media file.  And here is the CSS rule for the right panel:

#right-panel{

width:330px;

float:left;

margin:30px 5px 0 2px;

background:url(img/right-panel.png) repeat-x top;

height:504px;

padding:5px 0 0 0;

}

Ok, we finished with the main content of the main CSS Panel. Now we want to add those two CSS Panels in the footer. In order to add two CSS Panels into one div we have to create a container div for each CSS Panel. I know you think it’s hard but let me show you it’s quite easy. We already have a footer div from the main CSS Panel. All we need to do is to create a container and a class div container for the CSS Panels. So here is how the divs would look like.

<div id=”footer-main”> <!—main container for those two CSS Panels –>

<div class=”footer-class”> One CSS Panel goes here </div>

<div class=”footer-class”> The second CSS Panel goes here </div>

</div > <!—end footer container  –>

And here are the CSS rules that we are going to be using:

#footer-main{

width:990px;

float:left;

}

.footer-class{

width:420px;

float:left;

padding:10px 5px 5px 50px;

}

I have added a copyright line at the end of the file, just before where the wrapper ends.

<div>Copyright 2010 – All rights reserved to Green Energy Website</div>

And here is the CSS rule:

#footer-copy{

width:990px;

float:left;

font-family:”Century Gothic”, Century;

font-size:12px;

color:#FFF;

text-align:center;

margin-top:30px;

}

Ok, this kinda wrap things up on building this cool site with CSS round corners panels and a dynamic news nugget. I hope you found this tutorial interesting and will help you on your future projects.

If you have any questions please send them to: support@extendstudio.com.

Facebook comments:



5 Responses to “Creating a round corner css website layout”

  1. Creating a round corner css website layout- Extend Studio Blog…

    Thank you for submitting this cool story – Trackback from Servefault.com…

  2. [...] this link: Creating a round corner css website layout- Extend Studio Blog This entry was posted on Monday, July 12th, 2010 at 7:07 am and is filed under Uncategorized. [...]

  3. Appreciate the info – cheers!

  4. Jimmie Kanne says:

    Thanks for the top lists, i create logos and sometimes i just loose my “inspiration” then i always surf around and look at top sites to get new inspiration :-)

Leave a Reply