New to CSS/Web design needing help formatting my masterpage

This is a discussion on "New to CSS/Web design needing help formatting my masterpage" within the Starting Out section. This forum, and the thread "New to CSS/Web design needing help formatting my masterpage are both part of the Design Your Website category.


 Subscribe in a reader

Go Back   Webforumz.com > Main Forums > Design Your Website > Starting Out

Notices




Reply
 
LinkBack Thread Tools
  #1  
Old Sep 16th, 2007, 21:12
Junior Member
Join Date: Sep 2007
Location: UK
Age: 37
Posts: 20
Thanks: 0
Thanked 0 Times in 0 Posts
New to CSS/Web design needing help formatting my masterpage

Hi
I am in the very early stages of my first website.....and I've been told CSS is the way to go!!!!
I am trying to create a header that contains the company logo to the left and the address to the right, below this I would like a "sub header" that will eventually contain the navigation section. At the minute I have the header section div looking OK(ish) but the logo staying too close to the left and the address on the right isnt quite how I would like it. The header address div is placing itself in top right corner, ideally it would be centre aligned i am trying to use vertical-align: middle; but this is not working. I've also tried giving the header div a margin of 20 but still no change....is it because I'm using float left/right???
The reason I want a bit of distance between the logo and header address divs to the edge of the header border is I would also like to have two rounded corners on the top of the header border left and right.....I know I'm being quite adventurous here but if your going to learn you might as well learn the hard way
I have gif images for the rounded corners and I've tried looking at tuturials for rounded corners in CSS.....as you can tell from the .tl and .tr classes in my css file just not sure how it will work!!!!!

Heres the html so far:
Code: Select all
<%@MasterLanguage="C#"AutoEventWireup="true"CodeFile="MasterPage.master.cs"Inherits="MasterPage" %>
<%@RegisterAssembly="AjaxControlToolkit"Namespace="AjaxControlToolkit"TagPrefix="cc1" %>
<!DOCTYPEhtmlPUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<headrunat="server">
<title>Untitled Page</title>
<linkhref="StyleSheet.css"type="text/css"rel="stylesheet"/>
 
</head>
<bodybgcolor="white">
<formid="form1"runat="server">
<divid="header">
<divid="logo">
<imgsrc="logo1.gif"class="imgBorder"style="height: 147px"/></div>
<divid="HeaderAddress">
Address<br/>
Address<br/>
Address<br/>
Address<br/>
Address<br/>
Address<br/>
Address 
</div></div><divid="lowerheader"></div>
<br/>
<divid="sidebar"class="Borders">
<asp:TreeViewID="TreeView1"runat="server"DataSourceID="SiteMapDataSource1"Style="position: relative; left: 19px; top: 6px;"Height="298px"Width="150px"BackColor="Red"ForeColor="White">
<HoverNodeStyleForeColor="Black"/>
<SelectedNodeStyleForeColor="Blue"/>
</asp:TreeView>
&nbsp;&nbsp;
</div>
<asp:SiteMapDataSourceID="SiteMapDataSource1"runat="server"/>
</form>
</body>
</html>
and the CSS:
Code: Select all
body{
margin:25px25px025px;
padding:0;
background:white;
}
#header{
background: red;
height: 200px; /*Height of Header section*/
margin:20;
}
#lowerheader
{
background:black;
height:30px; 
}
#logo
{
float:left;
height: 150px; 
width: 150px; 

}
#sidebar
{
background: red;
width: 185px;
 
}
.Borders
{
border-bottom-color:Black;
border-left-color:Black;
border-right-color:Black;
border-top-color:Black;
border-bottom-style:solid;
border-left-style: solid;
border-right-style: solid;
border-top-style: solid;
}
 
#content
{
background:white 

}
.tl {background: url(TL_Red.gif)00no-repeat} 
.tr {background: url(TR_Red.gif)100%0no-repeat; padding:10px} 
#HeaderAddress/*Align Name & Address to the right*/
{

float:right;
text-align:right;
text-transform:uppercase;
vertical-align: middle;
color:white;
font-style:italic;
font-size:12pt;
font-weight:bolder;
margin:10;
}
.imgBorder/*Border for image*/
{
left: 2px; 
border-right: blackthinsolid;
border-top: blackthinsolid; 
border-left: blackthinsolid; 
border-bottom: blackthinsolid; 
position: relative;
top: 2px; 
height: 182px; 
}
any help/guidance would be greatly appreciated

Thank you in advance!!

Graeme

Last edited by karinne; Sep 17th, 2007 at 12:01. Reason: Please use the vBcode [ code ] when inserting code in your post.
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote

  #2  
Old Sep 16th, 2007, 22:54
Elite Veteran
Join Date: Sep 2006
Location: Pink House
Posts: 3,946
Thanks: 0
Thanked 0 Times in 0 Posts
Re: New to CSS/Web design needing help formatting my masterpage

Let's take this one baby step at a time. Why don't you start with the rounded corners. Look here for many excellent examples http://www.smileycat.com/miaow/archives/000044.php

You will need to add padding-left to the logo to get it off the left margin.

Vertical alignment is quite difficult with css so you should add a top margin to your #headeraddress div in the amount that makes it look aligned middle..

Feel free to ask questions if this is totally confusing!
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
  #3  
Old Sep 17th, 2007, 20:32
Junior Member
Join Date: Sep 2007
Location: UK
Age: 37
Posts: 20
Thanks: 0
Thanked 0 Times in 0 Posts
Re: New to CSS/Web design needing help formatting my masterpage

Thanks for the tips on padding left/top, I also used the on the #headeraddress div and it seemed to work...padding the top and right. Now for the tricky rounded corners
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
  #4  
Old Sep 17th, 2007, 23:59
Elite Veteran
Join Date: Sep 2006
Location: Pink House
Posts: 3,946
Thanks: 0
Thanked 0 Times in 0 Posts
Re: New to CSS/Web design needing help formatting my masterpage

Excellent! You are on your way!
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
  #5  
Old Sep 18th, 2007, 06:51
Marc's Avatar
Staff Manager

SuperMember
Join Date: Apr 2007
Location: Scotland, UK
Posts: 1,797
Thanks: 0
Thanked 17 Times in 17 Posts
Re: New to CSS/Web design needing help formatting my masterpage

Just let me say rounded corners are NOT hard to do. Infact they are pretty easy.

Have a look at the code on the Newsletters' rounded corners to give you an idea..

Good luck!
__________________
Marc
Staff Manager - Webforumz.com


Want to be a moderator? PM me.
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
  #6  
Old Sep 18th, 2007, 20:06
Junior Member
Join Date: Sep 2007
Location: UK
Age: 37
Posts: 20
Thanks: 0
Thanked 0 Times in 0 Posts
Re: New to CSS/Web design needing help formatting my masterpage

I thought I had worked it out, unfortunately it didnt work
I thought it seemed a bit two easy!!
I have took out the top padding taken a bit of the height of the header and adder a top header (20px) the same colour as the header. I then created a red circle on a white background in photoshop, 40px x 40px and cropped the left and right corners thinking I could then just float each image left and right in my topheader div, how wrong was I ???

CSS:
body{
margin:35px35px035px;
padding:0;
background:white;
}
#topheader
{
background:red;
height:20px;
}
#header
{
background: red;
height: 190px; /*Height of Header section*/
}
#logo
{
padding-left:20px;
float:left;
height: 170px;
width: 170px;
}

Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
  #7  
Old Sep 18th, 2007, 20:08
Marc's Avatar
Staff Manager

SuperMember
Join Date: Apr 2007
Location: Scotland, UK
Posts: 1,797
Thanks: 0
Thanked 17 Times in 17 Posts
Re: New to CSS/Web design needing help formatting my masterpage

Watch this: http://www.sampsonvideos.com/videos/...oundedCorners/. It is very good.
__________________
Marc
Staff Manager - Webforumz.com


Want to be a moderator? PM me.
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
  #8  
Old Sep 18th, 2007, 20:10
Junior Member
Join Date: Sep 2007
Location: UK
Age: 37
Posts: 20
Thanks: 0
Thanked 0 Times in 0 Posts
Re: New to CSS/Web design needing help formatting my masterpage

oops hadnt finished!!!

CSS:
body{
margin:35px35px035px;
padding:0;
background:white;
}
#topheader
{
background:red;
height:20px;
}
#header
{
background: red;
height: 190px; /*Height of Header section*/
}
#logo
{
padding-left:20px;
float:left;
height: 170px;
width: 170px;
}


#lowerheader
{
background:black;
height:20px;
}
.tl {background: url(TL_Red.gif); float:left;}
.tr {background: url(TR_Red.gif); float:right;}

HTML:
<%@MasterLanguage="C#"AutoEventWireup="true"CodeFile="MasterPage.master.cs"Inherits="MasterPage" %>
<%
@RegisterAssembly="AjaxControlToolkit"Namespace="AjaxControlToolkit"TagPrefix="cc1" %>
<!DOCTYPEhtmlPUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<
htmlxmlns="http://www.w3.org/1999/xhtml">
<
headrunat="server">
<title>Untitled Page</title>
<linkhref="StyleSheet.css"type="text/css"rel="stylesheet"/>

</
head>
<
body>
<formid="form1"runat="server">
<divid="body">
<divid="topheader">
<aclass=tl></a>
<aclass=tr></a>
</div><divid="header">
<divid="logo">
<imgsrc="logo1.gif"class="imgBorder"style="height: 170px; width: 170px;"/></div><divid="HeaderAddress">
***************<br/>
***********<br/>
************<br/>
************<br/>
***********<br/>
************<br/>
****************
</div></div><divid="lowerheader"></div>
<br/>
</div></form>
</
body>
</
html>

Thanks again!!!
Graeme
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
  #9  
Old Sep 18th, 2007, 20:11
Marc's Avatar
Staff Manager

SuperMember
Join Date: Apr 2007
Location: Scotland, UK
Posts: 1,797
Thanks: 0
Thanked 17 Times in 17 Posts
Re: New to CSS/Web design needing help formatting my masterpage

You can edit posts

Have a look at the link i posted above it will show you how to do it. If i remember correctly it is like top:0 left:0 and things like that.

Good luck!
__________________
Marc
Staff Manager - Webforumz.com


Want to be a moderator? PM me.
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
  #10  
Old Sep 18th, 2007, 21:46
Junior Member
Join Date: Sep 2007
Location: UK
Age: 37
Posts: 20
Thanks: 0
Thanked 0 Times in 0 Posts
Re: New to CSS/Web design needing help formatting my masterpage

Hi Marc

Do you have any other links, it wouldnt load on my laptop, buffering froze at 5%......Im not sure if it my wireless connection its always freezing on downloads.
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are On

Similar Threads
Thread Thread Starter Forum Replies Last Post
desperatly needing help with css OMorchoe Web Page Design 4 May 10th, 2008 08:52
Needing Some Help 4WardMotion Starting Out 5 Dec 22nd, 2006 03:37
Needing Help DJ JimmyD Web Page Design 2 Jul 30th, 2006 23:38
Needing function help stealthy1 JavaScript Forum 19 Jul 6th, 2004 15:13


All times are GMT. The time now is 18:39.


Powered by vBulletin®
Copyright ©2000 - 2008, Jelsoft Enterprises Ltd.
Search Engine Optimization by vBSEO 3.2.0 RC8
© 2003-2008 Webforumz.com : All Rights Reserved