Go Back   Computer Forums > Web Design | Website Development > Web Programming
Click Here to Login
Join Computer forums Today


Reply
 
Thread Tools Search this Thread Display Modes
 
Old 07-10-2010, 07:35 PM   #1
Baseband Member
 
Join Date: Feb 2010
Posts: 45
Default Lining up title text

I want to line up the title in the header to the navigation bar like this site has, http://blogofthenet.com/. Can anyone help me?

EDIT: I managed to line up the title. But I can't figure out a way to line up the navigation buttons.

Heres current look. http://blogofthenet.com/test/.


Code:
* { padding: 0; margin: 0; }

body {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	}
	
#wrapper { 
	margin: 0 auto;
	width: 922px;
	}
	
#header {
	color: #333;
	width: 100%;
	float: left;
	padding: 10px;
	height: 100px;
	margin: 0px 0px 0px 0px;
	background-color:#F3F2ED;
	background:#282923;
	font-style:italic;
	}
	
#header h1 {
	font-size: 2.0em;
	}
	
#header h1, #header h2 {
	display: block;
	width: 922px;
	margin: 0em auto;
	padding: 20px 0em 20px 0px;
	}
	
#header h1 a {
	color: #fff;
	text-decoration: none;
}
	
#navigation {
	float: left;
	width: 100%;
	color: #333;
	padding: 10px;
	margin: 0px 0px 0px 0px;
	background-color:#000;
	display: block;
	}
	
#leftcolumn { 
	color: #333;
	margin: 0px 0px 0px 0px;
	padding: 10px;
	height: 350px;
	width: 678px;
	float: left;
	background:#232323;
	}
	
#rightcolumn { 
	float: right;
	color: #333;
	margin: 0px 0px 0px 0px;
	padding: 10px;
	height: 350px;
	width: 200px;
	display: inline;
	background:#232323;
	}
	
#footer { 
 	width: 100%;
 	clear: both;
	color: #333;
	border: 1px solid #ccc;
	background-color:#F3F2ED;
 	margin: 0px 0px 10px 0px;
 	padding: 10px;
	}

#navigation {
	float:left;
	width:100%;
	background:#000;
	font-size:93%;
	line-height:normal;
	}

#navigation ul {
	margin: 0;
	padding: 0px 5px 0 124px;
	list-style: none;
	display: block;
	}
#navigation span {
	display: block;
	margin: 0em auto;
	padding: 20px 0em 20px 0px;
	}
#navigation li {
	display:inline;
	margin:0;
	}

#navigation a {
	float:left;
	background:url("images/tableft.gif") no-repeat left top;
	margin:0;
	padding:0 0 0 4px;
	text-decoration:none;
	}

#navigation a span {
	float:left;
	display:block;
	background:url("images/tabright.gif") no-repeat right top;
	padding:5px 15px 4px 6px;
	color:#FFF;
	}

/* Commented Backslash Hack hides rule from IE5-Mac \*/
#navigation a span {float:none;}

/* End IE5-Mac hack */
#navigation a:hover span {
	color:#FFF;
	}

#navigation a:hover {
	background-position:0% -42px;
	}

#navigation a:hover span {
	background-position:100% -42px;
	}
__________________

clawbog is offline   Reply With Quote
Old 07-11-2010, 02:09 AM   #2
Fully Optimized
 
tom-knox's Avatar
 
Join Date: Jun 2007
Posts: 2,451
Send a message via MSN to tom-knox
Default Re: Lining up title text

Can you give us a context and a link to what you've got in action atm?
__________________

__________________
New laptop:
2.1 Ghz Core 2 Duo processor :: nVidia GT150m :: 15.6" HD LCD :: 4gb RAM :: 320gb HDD

New player: iPhone 4 32gb
tom-knox is offline   Reply With Quote
Old 07-11-2010, 02:56 AM   #3
Baseband Member
 
Join Date: Feb 2010
Posts: 45
Default Re: Lining up title text

Heres what I have so far.
http://blogofthenet.com/test/

Can't figure out how to line up navigation buttons.

Code:
* { padding: 0; margin: 0; }

body {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	}
	
#wrapper { 
	margin: 0 auto;
	width: 922px;
	}
	
#header {
	color: #333;
	width: 100%;
	float: left;
	padding: 10px;
	height: 100px;
	margin: 0px 0px 0px 0px;
	background-color:#F3F2ED;
	background:#282923;
	font-style:italic;
	}
	
#header h1 {
	font-size: 2.0em;
	}
	
#header h1, #header h2 {
	display: block;
	width: 922px;
	margin: 0em auto;
	padding: 20px 0em 20px 0px;
	}
	
#header h1 a {
	color: #fff;
	text-decoration: none;
}
	
#navigation {
	float: left;
	width: 100%;
	color: #333;
	padding: 10px;
	margin: 0px 0px 0px 0px;
	background-color:#000;
	display: block;
	}
	
#leftcolumn { 
	color: #333;
	margin: 0px 0px 0px 0px;
	padding: 10px;
	height: 350px;
	width: 678px;
	float: left;
	background:#232323;
	}
	
#rightcolumn { 
	float: right;
	color: #333;
	margin: 0px 0px 0px 0px;
	padding: 10px;
	height: 350px;
	width: 200px;
	display: inline;
	background:#232323;
	}
	
#footer { 
 	width: 100%;
 	clear: both;
	color: #333;
	border: 1px solid #ccc;
	background-color:#F3F2ED;
 	margin: 0px 0px 10px 0px;
 	padding: 10px;
	}

#navigation {
	float:left;
	width:100%;
	background:#000;
	font-size:93%;
	line-height:normal;
	}

#navigation ul {
	margin: 0;
	padding: 0px 5px 0 124px;
	list-style: none;
	display: block;
	}
#navigation span {
	display: block;
	margin: 0em auto;
	padding: 20px 0em 20px 0px;
	}
#navigation li {
	display:inline;
	margin:0;
	}

#navigation a {
	float:left;
	background:url("images/tableft.gif") no-repeat left top;
	margin:0;
	padding:0 0 0 4px;
	text-decoration:none;
	}

#navigation a span {
	float:left;
	display:block;
	background:url("images/tabright.gif") no-repeat right top;
	padding:5px 15px 4px 6px;
	color:#FFF;
	}

/* Commented Backslash Hack hides rule from IE5-Mac \*/
#navigation a span {float:none;}

/* End IE5-Mac hack */
#navigation a:hover span {
	color:#FFF;
	}

#navigation a:hover {
	background-position:0% -42px;
	}

#navigation a:hover span {
	background-position:100% -42px;
	}
clawbog is offline   Reply With Quote
Old 07-11-2010, 10:55 AM   #4
Site Team
 
berry120's Avatar
 
Join Date: Jul 2009
Location: England, UK
Posts: 3,425
Default Re: Lining up title text

Have a look at:

http://www.dynamicdrive.com/style/la...d-fixed-fixed/

(view the source, css is there in plain sight.)

Should give you an idea of how to do a layout with headings / columns which is what you're after
__________________
Save the whales, feed the hungry, free the mallocs.
berry120 is offline   Reply With Quote
Old 07-12-2010, 01:31 AM   #5
Baseband Member
 
Join Date: Feb 2010
Posts: 45
Default Re: Lining up title text

Thanks, i got it how i need it.
clawbog is offline   Reply With Quote
Reply

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

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 Off



All times are GMT -5. The time now is 04:03 PM.


Powered by vBulletin® Version 3.8.8 Beta 4
Copyright ©2000 - 2017, vBulletin Solutions, Inc.
Search Engine Friendly URLs by vBSEO 3.6.0