homepage Welcome to WebmasterWorld Guest from 54.237.78.165
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
Will try to ONLY post relevant CSS
Gemini23

5+ Year Member



 
Msg#: 4347353 posted 7:34 pm on Aug 3, 2011 (gmt 0)

I use Expression Web 2 and after a few years am still learning....
I am working on re-designing a 3 column website with header and footer.

In the Header/Masthead I have image1 that floats left and image2 (far right) and image3 and image4 that sit quite tight to image 2 and they display 'okay' in preview on IE9.

I want to add some Text to the centre part of my header/masterhead
TITLE in large font (sitting above the subtitle) and a
Sub Title in smaller font

I have played around with DIVS but cannto seem to resolve it.

I also have a porblem in that the footer has now 'disappeared'.

Any help gratefully received.

body {
margin: 0px auto 0 auto;
background: #5e6d96;
font-family: Tahoma, Verdana;
font-size: 10pt;
}

#masthead {
margin-top: 0px;
margin-bottom: 0px;
padding-top: 0px;
background-color: #5e6d96;
font-family: Arial, Helvetica, sans-serif;
color:white;
text-align: left;
font-size:xx-large;
font-weight: bold;
line-height: 50px;
height: 100px;
width: 960px;
}

#masthead h1 {
padding: .25em 0 0 0;
margin-bottom: 0;
text-align:right;
}
#masthead p {
padding-top: 0px;
margin-top: 0px;
}

#mastheadleft {
float: left;
width: 100px; /*change to whatever is desired */
font-size: .7em; /*based on what the font size setting in masthead - not body element */
text-align: left;
height: 100px;
}

#mastheadright {
float: right;
width: 108px;
height: 80px
}

#mastheadfacebook {
float: right;
width: 70px;
padding-top: 25px;
vertical-align:middle;
text-align:center;
line-height:50px;
}
#mastheadtwitter {
float: right;
width: 60px;
padding-top: 25px;
vertical-align:middle;
text-align:center;
line-height:50px;
}

#body_wrapper {
width: 960px;
}

#left_nav {
background-color: #eaeff5;
font-family:Arial, Helvetica, sans-serif;
font-size:small;
height: 1350px;
padding-top: 0px;
width: 200px;
float: left;
margin: 0 auto;
text-align: left;
list-style-type:none;
}
ul {
margin-left:-15px;
margin-right:0px;
list-style:round;
}

#right_nav {
background-color: #eaeff5;
height: 1350px;
padding-top: 0px;
width: 200px;
float: right;
margin: 0 auto;
text-align: left;
}

#content {
padding-top: 0px;
width: 560px;
float: left;
margin: 0 auto;
background: #FFFFFF;
height: 1350px;

}

#footer {
width: 960px;
background: #5e6d96;
height: 200px;
}

 

PublicSphere

5+ Year Member



 
Msg#: 4347353 posted 8:33 am on Aug 4, 2011 (gmt 0)

You will need the clear the footer if you want it to display below the floated columns. Add "clear: both" to the footer.

To display text in the header you could float it to the left with a width that is less than the left and right images. Or you could use position:absolute on the text and position:relative on the header div if you wanted to be lazy.

Gemini23

5+ Year Member



 
Msg#: 4347353 posted 11:31 am on Aug 4, 2011 (gmt 0)

Thanks PublicSphere

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved