Printable View
Hi,
I'd like some help please on how I could position my header 1 in the light blue colour to fit in line with the banner (the black thing you see) for my CSS. I have tried googling but to no avail.
Attachment 61658
Thank you very much!
So far, I have got:
HTML Code:margin-left: auto;
margin-right: auto;
display: block;
float: top;
Hi, ParfaitMacaron, Welcome to the forums,
The image is still pending. Without seeing your HTML and CSS, which the image wouldn't show anyway, let me offer a possibility.
PS: there is no such property as {float:top}Code:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<!--
http://www.sitepoint.com/forums/showthread.php?990327-How-to-centre-position-CSS-div
Thread: How to centre position CSS/div
2013.03.02 21:56
ParfaitMacaron
-->
<head>
<title>template</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta http-equiv="content-language" content="en-us">
<style type="text/css">
h1 {
background-color:black;
color:lightblue;
text-align:center;
padding:12px;
}
</style>
</head>
<body>
<h1>Header Text</h1>
</body>
</html>
Also, auto right and left margins don't do anything unless the elements also has a set width (such as 800px or 80%, for example. Any units will do.)
also:
there is no such thing as float:top; (only left | right | none) . If you were to float this element then margins-right/left:auto would not be applicable.
here ONE an example of what I think you are trying to accomplish.
Code:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>template</title>
<style type="text/css">
h1 {
color:#000;
text-align:center;
padding:12px;
}
.header { background-color:lightblue; overflow: hidden}
.wrap{margin:0 auto; width:960px;}
.header img {float:right;}
.header h1 {float:left; margin:0;}
</style>
</head>
<body>
<div class="header">
<div class="wrap">
<h1>Header Text</h1>
<img src="image.jpg">
</div>
</div>
</body>
</html>
to be honest , you ahve to take your whole code into consideration, as you should start to style only after you have structured your HTML around your content. ( for example... is the image content or deco rational, if it's content can it be considered part of the H1? ..etc etc..)
hope that helps
Then there's the display:table technique that works in IE8+
Code:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<!--
http://www.sitepoint.com/forums/showthread.php?990327-How-to-centre-position-CSS-div
Thread: How to centre position CSS/div
2013.03.02 21:56
ParfaitMacaron
-->
<head>
<title>ParfaitMacaron</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta http-equiv="content-language" content="en-us">
<style type="text/css">
body {
padding:0;
margin:0;
}
div.header {
display:table;
table-layout:fixed;
width:100%;
}
.header div {
display:table-cell;
background-color:#ffa; /* for demo purposes */
vertical-align:middle;
text-align:center;
}
div + div,
img {
width:250px;
}
img {
height:150px;
display:block;
background-color:#ddd; /* for demo purposes */
}
h1 {
border:5px solid #000;
background-color:#ade;
color:#000;
padding:8px;
margin:0;
}
</style>
</head>
<body>
<div class="header">
<div><h1>Header Text</h1></div>
<div><img src="image.jpg" alt="image"></div>
</div>
</body>
</html>
UPDATE: Just figured it out! I think you're all right in some ways!! It's because I didn't specify the width of my h1 that it stopped working when I was using the auto margin-left and margin-right!
Thank you for the welcome. :) Can you see the image now by any chance? Thanks for telling me there's no float:top property! That's embarrassing I thought it existed. I tried to pad it out by 12px but it doesn't shrink to fit the 1000px width I've set (header banner image). The h1 I'm trying to set is supposed to be in line with the 1000px width of the header.Quote:
Originally Posted by ronpat
Thank you for your reply. I googled how to centre a div and found this website: http://www.thesitewizard.com/css/center-div-block.shtml It worked and I think that is because my wrapper is set to 1000px width.Quote:
Originally Posted by ralph.m
Thank you for your help. I appreciate the code example. I have coded up my index page with the div classes but for some reason I still can't get it right. I've tried your suggestions. My wrap is like yours, the header img is at the top of the page (how I want it) but I need the Home Page bar to fit in line with the header img.Quote:
Originally Posted by dresden_phoenix
Thank you for your help. I've tried to comment out some of my CSS and use a bit of your demo code but for some reason, I still can't get it to work. :(Quote:
Originally Posted by ronpat
ParfaitMacaron,
The thing about HTML and CSS is that they work together. dresden_phoenix summed it up very nicely...
CSS and HTML not only depend on one another, they also depend on their own relatives, too. It takes a bit of experience before one learns how to copy bits and pieces from other code and use them in one's own.Quote:
Originally Posted by dresden_phoenix
For example, if you copy the full page examples presented above by dresden_phoenix or me, and paste them on a stand-alone page, they will all work. Each example is a stand-alone unit.
As your knowledge grows, you will learn how to selects features from one page and apply them to your own. In the beginning, before dismissing our examples as unworkable, be sure to give them a look on their own pages to see what we are demonstrating.
Everything exists in the context of its surroundings.
If you can post a link to your page, we will be happy to offer some guidance. Or, if you can post your HTML and CSS in a message, we can work with that, too. In your message, type
[code]
then paste your code here
[/code]
That will put it in a box with scroll bars (like ours above) and preserve formatting.
Without being able to see your code, everything we can offer at this stage is a "guess".
Best of luck!