20 replies [Last post]
deanmarine
Offline
Regular
Last seen: 12 years 50 weeks ago
Joined: 2006-05-04
Posts: 50
Points: 2

Hi guys, i was wondering if any one can help me design this layout in css,
Basically i have added a picture and you should be able to tell what i want to do, all i need help with is can you tell me in order for me to design my layout like my drawing is this what i have to do.

1. for the container for whole site.
2. for the logo and set properties in the css file.
3. then i am abit confused would i then do a div for the left hand side image
or would i then create another container to hold all of the elements e.g the left
image the nav links and main content and then move on to step 4.
4.float the left image on the left.
5. float the links on the right
6 then im not sure how i get the content on the right underneath the nav links, would i just put the div tag underneath the link divs or would i need to float it on the right as well.

im so sorry that my explanation might not be that good, but i am hoping coupled with my image youll get what i mean.

many thanks

AttachmentSize
css-layout.gif21.54 KB
Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 47 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Show us what you have come

Show us what you have come up with so far , it's nice to see that someone has made a start otherwise it feels as though the forum and it's members are being used as a service!

You should be able to make a basic start on this, just describing basic html markup to represent the content that is going to be displayed. You have there essentially a two column layout with header so decide on a layout for that then we can help you place the other elements.

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

deanmarine
Offline
Regular
Last seen: 12 years 50 weeks ago
Joined: 2006-05-04
Posts: 50
Points: 2

thank you hugo, off course i

thank you hugo, off course i understamd completly what you have said,i have already made a start i just didnt know wether to post it yet.
here goes.

basically i have got as far as the container and the logo. and the left hand side where the image goes i am now trying to get the right hand side top nav in the right place but for some reaosn its not scrolling all the way across.

any way here is the code.

html.

Untitled Document

@import "style.css";

css

/* CSS Document */ /* --- Begin Body ---------- */ body { margin: 0; padding: 0; font-family:Verdana, Tahoma, Arial, Serif; text-align: center; line-height: 1.5em; font-size: 10px; /* This is for IE 5 version */ voice-family: "\"}\""; voice-family: inherit; font-size: 10px; /* This is for easy scaling */ font-size: 0.76em; background-color:#ffccff; color:#333; } /* --- End Body ----------- */

/* --- Begin Body wrapper ---------- */
#bodywrap {
top: 10px;
position: relative;
margin: 0 auto ;
padding:0;
text-align: left;
background-color:#F7B3DA ;
/* box model hack - dont edit this part*/
width: 776px;
voice-family: "\"}\"";
voice-family: inherit;
width: 776px;
}
/* --- End Body wrapper ----------- */

/* --- Header Logo Section ----------------------- */
#header {
height: 50px;
margin:0 0 0 0;
border-bottom-width:0px;
width: 775px;
padding:0;
position:relative;
left: 0px;
top: 0px;
background-color:#000000;
background: #fff url(images/logo.gif) no-repeat left top;

}
/* --- End Header section ----------- */

/* --- start left side nav ----------- */
#leftside {
float: left;
height: 400px;
margin:0 0 0 0;
border-right:#AAA 1px solid;
width: 200px;
background-color:#000000;

}
/* --- end left side nav ----------- */

/* --- start right side nav ----------- */
#rightsidenav {
float: right;
width: 375px;
height: 20px;
margin:0 0 0 0;
width: 200px;
background-color:#AAAAAA;
}
/* --- end right side nav ----------- */

also here is a screen print of what is happening as you can se the grey box should be all the way across, well upto where the black box is as this is going to be naviagation.

AttachmentSize
css-help.jpg 264.6 KB
Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 47 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Going back to your original

Going back to your original layout gif describe the two main container left col and rightside but in rightside your going to place the elements such as #rightsidenav and if that is a ul list then it should take all the width of the right side div.

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

deanmarine
Offline
Regular
Last seen: 12 years 50 weeks ago
Joined: 2006-05-04
Posts: 50
Points: 2

thanks for your help, i

thanks for your help, i thought i did that by specifying that the rightsidenav is 375px the main container for the site is 776px the left column if you will i set to 400px. so 400 and 375 is 775 i have one left pixel of the container free.

i may have got the wrong idea as to how this works. but i thought that with
the rightside nave set to this it would pretty much go all the way across the screen from the outside of the left column to the far right side. is this the wrong way of doing it?

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 4 years 4 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Other dimensions?

Hi

What you have specified is do-able, of course. The top horizontal strip, and the nav bar under it, are they fixed heights? If so, what height?

Do you want a bit at the bottom for copyright etc? Will this be the same width as the nav bar (ie with that left sidebar beside it?

Trevor

deanmarine
Offline
Regular
Last seen: 12 years 50 weeks ago
Joined: 2006-05-04
Posts: 50
Points: 2

hi ya, the rightnavside is

hi ya, the rightnavside is 20px does that mean its fixed?
the footer where i will put the copyright part is easy as i will just put that at the end as the last div within the page.

#rightsidenav {
float: right;
width: 375px;
height: 20px;
margin:0 0 0 0;
width: 200px;
background-color:#AAAAAA;
}

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 4 years 4 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Ok, but

OK but, what height is the logo bar, and would 20 pix be ok for the footer. By at the end I assume you would put it under all of the other content, yes?

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

Here's a quick rough and

Here's a quick rough and ready reworking of your code Dean
not that well tested!

Deans layout

@import "style.css";

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

deanmarine
Offline
Regular
Last seen: 12 years 50 weeks ago
Joined: 2006-05-04
Posts: 50
Points: 2

ahhh sorry mate

sorry for my stupididty.

The logo is set to 50px, and im sure 20 px would be fine for the footer.

here is the code for my header if that helps #header {
height: 50px;
margin:0 0 0 0;
border-bottom-width:0px;
width: 775px;
padding:0;
position:relative;
left: 0px;
top: 0px;
background-color:#000000;
background: #fff url(images/logo.gif) no-repeat left top;

Centauri
Offline
Regular
Newcastle NSW Australia
Last seen: 15 years 35 weeks ago
Newcastle NSW Australia
Timezone: GMT+11
Joined: 2006-12-07
Posts: 35
Points: 0

If your wrapper div is 776px

If your wrapper div is 776px wide, and your left div is 201px wide (incl border), then remaining width available is 575px. However, in your css, you have set a width for #rightsidenav of 375px, and then overidden that with a value of 200px 3 lines further on - try one setting of 575px.

Cheers
Graeme

deanmarine
Offline
Regular
Last seen: 12 years 50 weeks ago
Joined: 2006-05-04
Posts: 50
Points: 2

wow

i am stupider than i thought, have repeating widths, i must of accidently put them in, its sorted now, i just set the left column to 200px and the right nav to 575px.

thanks alot. thanks everyone. and thanks hugo for your code i will keep that for if i get stuck.

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

deanmarine wrote:i am

deanmarine wrote:
i am stupider than i thought, have repeating widths, i must of accidently put them in, its sorted now, i just set the left column to 200px and the right nav to 575px.

thanks alot. thanks everyone. and thanks hugo for your code i will keep that for if i get stuck.

Well it aproximates what you were after (going by gif) and provides for a framework you can adjust, so it's up to you, this version has your footer in.

Deans layout

@import "style.css";

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

deanmarine
Offline
Regular
Last seen: 12 years 50 weeks ago
Joined: 2006-05-04
Posts: 50
Points: 2

thanks so much hugo

thanks for taking the time to do that for me hugo its very nice of you, would you mind if i asked a couple of questions with regards to the css parts that i dont understand as i want to use yours.

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 4 years 4 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Or, an alternative

Hi, as I had done this by the time I read the other posts, I though I would post it.

I left the overall width to 775, but if you want borders in, just ask how:

html:

Your Page Title Here
@import url("style.css");

This is the
Main Content

This is the Left Sidebar

css:

/*** Style for LSB 2 Column Template ***/ html,body,p,div,img,h1,h2,h3,h4,li,ul,ol,dl,dd,dt,form,table,td,tr{ margin:0px; padding:0px; border:0px; border-collapse:separate; border-spacing:0px; } html,body{height:100%} body{ font-family: verdana, arial, helvetica, sans-serif; font-size:100.1%; /*** Don't change this setting. Make all other font-sizes in % (preferred) or ems ***/ color:#000000; background:#F2F6F9; /*** Background colour of page ***/ min-width:775px; /*** Content Width ***/ text-align:center; } input,select{ margin:0px; padding:0px; } strong,b{ font-weight:bold; } p{ font-size:90%; line-height:1.1em; } .floatcontainer:after{content:".";display:block;height:0px;clear:both;visibility:hidden;font-size:0p

x}
.floatcontainer{display: inline-table;}
/* Hides from IE Mac \*/
* html .floatcontainer {height:1%}
.floatcontainer{display:block}
/* End Hack */
#fullheightcontainer{
margin-left:auto;
margin-right:auto;
text-align:left;
position:relative;
width:775px; /*** Content Width ***/
display:table;
height:100%;
margin-bottom:-20px; /*** NEGATIVE TOTAL Height of Footer Rows ***/
background:#FFCCCC; /*** Background colour of left column. Also has the left hand side shady

border image ***/
}
#wrapper{
display:table-cell;
position:relative;
}
* html #wrapper{ /*** for IE to reveal the content over to reveal the shady border (same width as

that). ***/
border:none;
}
#outer{
position:relative;
margin-left:200px; /*** Left Column Width ***/
width:575px; /*** Center Column Width (takes into account left shady border width) ***/
background:#ADD8E6; /*** Background colour of center column. ***/
height:100%;
}
#float-wrap{
width:575px; /*** Center Column Width (takes into account left and right shady border widths) ***/
float:left;
display:inline;
}
#center{
position:relative; /* fix for IE */
width:575px; /*** Center Column Width (takes into account left and right shady border widths) ***/
float:right;
height:100%;
display:table;
}
#left{
float:left;
display:inline;
width:200px; /*** Left Column Width ***/
margin-left:-200px; /*** NEGATIVE Left Column Width ***/
position:relative;
}
#clearheadercenter{
height:70px; /*** TOTAL Height of Header Rows ***/
overflow:hidden;
}
#clearheaderleft{
height:50px; /*** TOTAL Height of Header Rows ***/
overflow:hidden;
}
#clearfootercenter{
height:20px; /*** TOTAL Height of Footer Rows ***/
overflow:hidden;
}
#clearfooterleft{
height:20px; /*** TOTAL Height of Footer Rows ***/
overflow:hidden;
}
#footer{
z-index:1;
position:relative;
width:100%;
height:0px;
}
#footer-inner{
width:775px; /*** Content Width ***/
margin-left:auto;
margin-right:auto;
height:0px;
}
#subfooter1{
margin:0px;
background:#FFFFCC;
text-align:center;
height:20px;
overflow:hidden;
}
#header{
z-index:1;
position:absolute;
top:0px;
left:0px;
width:100%;
height:0px;
}
#header-inner{
width:775px; /*** Content Width ***/
margin-left:auto;
margin-right:auto;
height:0px;
}
#subheader1{
margin:0px;
background:#FFFFCC;
text-align:center;
height:50px;
overflow:hidden;
}
#subheader2{
margin:0px 0px 0px 200px;
background:#FFE7AA;
text-align:center;
height:20px;
overflow:hidden;
}
#container-left{}
#container-center{}

Note how the page fills without content.

Trevor

deanmarine
Offline
Regular
Last seen: 12 years 50 weeks ago
Joined: 2006-05-04
Posts: 50
Points: 2

thanks mate

thanks cleva treva, i think i will stick with hugos, as i think i get the point now, cheers though.

just one question

/* --- start right side nav ----------- */
#rightsidenav {
height: 20px;
margin:0 0 0 0;
background-color:#AAAAAA;
overflow:hidden;
}
#rightsidenav li {
float:left;
width:4em;
}

how come when i add this to the css it doesnt work

#rightsidenav ul li a:hover {
background-color: #FF3399;
color: #FFFFFF;
}

oh and also my links seem to be bunched up any ideas?

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

deanmarine wrote:thanks for

deanmarine wrote:
thanks for taking the time to do that for me hugo its very nice of you, would you mind if i asked a couple of questions with regards to the css parts that I don't understand as I want to use yours.

Sure, it's quite a simple layout and attempts to keep to your original layout and provide ease of adjusting. The outer container uses border to create the illusion of the inner elements being padded in from the edge and the inner elements themselves use margins to create the spacing, your nav element site in the right side and requires little in rules other than the margins same goes for the content div. Ask about anything that isn't clear though.

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

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

deanmarine wrote:thanks

deanmarine wrote:
thanks cleva treva, i think i will stick with hugos, as i think i get the point now, cheers though.

just one question

/* --- start right side nav ----------- */
#rightsidenav {
height: 20px;
margin:0 0 0 0;
background-color:#AAAAAA;
overflow:hidden;
}
#rightsidenav li {
float:left;
width:4em;
}

how come when i add this to the css it doesnt work

#rightsidenav ul li a:hover {
background-color: #FF3399;
color: #FFFFFF;
}

oh and also my links seem to be bunched up any ideas?

The hover link code works for me ,bear in mind though that I didn't put any links/anchors in the code it was just plain text, but the best thin is to posst your layout link again with revisions, it may help to pop over to listamatic for ideas on list link coding/layouts

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

deanmarine
Offline
Regular
Last seen: 12 years 50 weeks ago
Joined: 2006-05-04
Posts: 50
Points: 2

hugo, when i use this

hugo, when i use this code

#rightsidenav ul li a:hover {
background-color: #FF3399;
color: #FFFFFF;
}

the hover over doesnt work but when i take the ul out of it and use this code

#rightsidenav li a:hover {
background-color: #FF3399;
color: #FFFFFF;
}

it seems to work do i not need the ul part?

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

Sorry no it doesn't work as

Sorry no it doesn't work as you have added in a ul selector the #rightsidenav is the ul; remove the ul in the selector list

x posted with your reply above no you dont want the ul

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

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

#rightsidenav li {

#rightsidenav li { float:left; width:4em; margin-left:.3em; } #rightsidenav li a { display:block; height:100%; text-align:center; } #rightsidenav li a:hover { background: #FF3399; color: #FFF; }

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