Add your company details to our Business Directory, for FREE!


Graphic Design Forums: UK forums for graphic designers » Website Design Forums: » Website Coding & Programming Forum: » CSS - How to centre a H1 tag?

Reply
Old 09-09-2010, 02:40 AM   #1
Junior Member
 
Join Date: Jun 2010
Posts: 17
Thanks: 2
Thanked 0 Times in 0 Posts
Default CSS - How to centre a H1 tag?

hi there
have been trying to centre h1 tag (in drea,weaver)which is next to an image & both in two separate layers
even after i convert them into tables nothing happens- have tried the centre align, vertical align...
any ideas how to fix this problem?

for the time being-the h1 is a fe pixels up and it doesnt look really nice...and it needs to be centred
you can have a look at the image-just an example
thank you
Attached Images
File Type: jpg test.jpg (16.6 KB, 11 views)
peps is offline  
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Share on FacebookStumble this Post!Twit this!
Reply With Quote
Old 09-09-2010, 09:36 AM   #2
Senior Member
 
sweetums's Avatar
 
Join Date: Jun 2008
Location: Bristol (UK)
Posts: 142
Thanks: 15
Thanked 15 Times in 12 Posts
Send a message via MSN to sweetums Send a message via Skype™ to sweetums
Default

Well the left and right margins of the h1 tag need to be set to auto and the h1 tag needs to have a width assigned to it. Once you have set this up, the auto margins will auto centre the h1 tag to the middle of whatever value you set the width to be.
__________________
Twitter: liamjay66

Website: liamjaydesigns.com
sweetums is offline  
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Share on FacebookStumble this Post!Twit this!
Reply With Quote
Old 09-10-2010, 12:40 AM   #3
Junior Member
 
Join Date: Jun 2010
Posts: 17
Thanks: 2
Thanked 0 Times in 0 Posts
Default

Quote:
Originally Posted by sweetums View Post
Well the left and right margins of the h1 tag need to be set to auto and the h1 tag needs to have a width assigned to it. Once you have set this up, the auto margins will auto centre the h1 tag to the middle of whatever value you set the width to be.
have tried below & my css is
h1 {
font-family: arial;
font-size: 13px;
font-weight: bold;
color: #3c659b;
text-transform: capitalize;
font-style: normal;
line-height: normal;
font-variant: normal;
word-spacing: normal;
display:inline;
margin-left: auto;
margin-right: auto;
width: 211px; - these are the size of the layer
height: 45px;
text-indent: 0px;
}

if i change the display to block in stead of inline - then it works (even if i fo margin-top&bottom) - however it changes the layer & after i try to conver then eveyrhting comes weird

if there is no display option at all - the layer's completely out of its way....
i bet it's something quite easy, though as i see the easiest things take most time to figure out...
anyone - any ideas/help how to fix it - would be most welcomed
thank you
peps is offline  
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Share on FacebookStumble this Post!Twit this!
Reply With Quote
Old 09-10-2010, 10:04 AM   #4
djb
Senior Member
 
djb's Avatar
 
Join Date: Apr 2010
Location: Farnham, Surrey
Posts: 347
Thanks: 30
Thanked 51 Times in 49 Posts
Send a message via Skype™ to djb
Default

I’m not 100% certain of what you’re trying to achieve but how about this:

HTML Code:
<html>
<head>
<style type="text/css">
img {
	float: left;
}
h1 {
	background-color:#CCC;
	color: #3c659b;
	float: left;
	font-family: arial;
	font-size: 13px;
	font-weight: bold;
	height: 45px; /* This must match the height of the image */
	line-height: 45px; /* This must match the height of the box */
	margin: 0;
	text-align: center;
	text-transform: uppercase;
	width: 211px;
}
</style>
</head>
<body>
<img src="image.jpg" width="45" height="45" />
<h1>Test</h1>
</body>
</html>
This will give you:
Attached Images
File Type: jpg test.jpg (3.6 KB, 4 views)
__________________
David John Bennett
Graphic and Web Designer, Farnham, Surrey
djb is offline  
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Share on FacebookStumble this Post!Twit this!
Reply With Quote
Old 09-10-2010, 01:14 PM   #5
Senior Member
 
DougBarned's Avatar
 
Join Date: Jun 2009
Location: London / U.K.
Posts: 181
Thanks: 6
Thanked 12 Times in 12 Posts
Default

Can you give us a link to your page/uplaod it so we can see what you've got and then tell us or show us what you want? That's the best way to get a fitting answer if the ones above don't quite nail it.
__________________
design-is.co.uk - freelance projects
dougbarned.co.uk - personal site & blog - twitter
feralinteractive.com - designer day job - twitter - facebook
DougBarned is offline  
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Share on FacebookStumble this Post!Twit this!
Reply With Quote
Old 09-11-2010, 10:34 PM   #6
Junior Member
 
Join Date: Jun 2010
Posts: 17
Thanks: 2
Thanked 0 Times in 0 Posts
Default

Quote:
Originally Posted by djb View Post
I’m not 100% certain of what you’re trying to achieve but how about this:

HTML Code:
<html>
<head>
<style type="text/css">
img {
	float: left;
}
h1 {
	background-color:#CCC;
	color: #3c659b;
	float: left;
	font-family: arial;
	font-size: 13px;
	font-weight: bold;
	height: 45px; /* This must match the height of the image */
	line-height: 45px; /* This must match the height of the box */
	margin: 0;
	text-align: center;
	text-transform: uppercase;
	width: 211px;
}
</style>
</head>
<body>
<img src="http://www.graphicdesignforums.co.uk/website-coding-programming-forum/image.jpg" width="45" height="45" />
<h1>Test</h1>
</body>
</html>
This will give you:
The above did work on all the pages - however, there is one problem page with javascript and the click to activate menu ( so the fixit file apparently does interfere with the javascript file and the informaiton form the table-just disappeared...
& the h1 tag has moved the table down...what a mess....(btw have used the old style sheet...coz when i apply the new rule you advised me to - all go mad)
Red Sea Diving Holiday Deals - Olympic Holidays

& if you click on the Speclla offers link - you will see actually the way the poage's supposed to be...
thank you anyway

Last edited by peps; 09-11-2010 at 10:37 PM.
peps is offline  
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Share on FacebookStumble this Post!Twit this!
Reply With Quote
Old 09-11-2010, 10:35 PM   #7
Junior Member
 
Join Date: Jun 2010
Posts: 17
Thanks: 2
Thanked 0 Times in 0 Posts
Default

Quote:
Originally Posted by DougBarned View Post
Can you give us a link to your page/uplaod it so we can see what you've got and then tell us or show us what you want? That's the best way to get a fitting answer if the ones above don't quite nail it.
link below posted....just this one pages left as a huge problem
any ideas would be of great help
thank you all in advance
peps is offline  
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Share on FacebookStumble this Post!Twit this!
Reply With Quote
Reply

Thread Tools
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 On



Flyer Printing | Print Reseller Scheme | Graphic Design | Logo Designer | Web Design UK | Graphic Design UK | Letterhead Printing
Business Card Printing | UK Business Forum | Logo Designer | NCR Pads | NCR Books | Receipt Books | Drinks Coasters | A6 Flyers | A5 Leaflets
Web Design & Development | vBulletin Skins | Small Business Websites | Leaflets | Leaflet Printing | Web Design Liverpool | Invoice Books


DISCLAIMER: All posts on this forum express the views and opinions of the author only, not the owners, staff or advertisers, hence we will not be held liable.


Powered by vBulletin®
© Copyright Jelsoft Enterprises Ltd
SEO by vBSEO 3.2.0 RC5 ©2008, Crawlability, Inc.