Forum Moderators: not2easy
My title was created as a background graphic with Fireworks. Since the title is the H1 and it is part of the graphic, the page below goes into the content of the title. I can repeat the title as an H1 and reformat the size with CSS, but I cannot get text to directly follow the H1. It automatically skips to the next line. Is there a way to do this? Thanks.
Hi baillie and Welcome to WebmasterWorld!
I think there's a basic misunderstanding here, an H1 element had default margins, if you're trying to make your H1 (or any Hx tag for that matter) match the height of a background graphic you absolutely have to remove those default margins before setting the height/width to match your graphic
so if e.g. your graphic is wide enough to cover an 800 to 1300px resolution, but needs to be exactly 80px high before the following content needs to appear immediately below it then in the CSS
h1 {
margin: 0; padding: 0; /* remove those defaults! */
width: 100%; /* not really necessary as this is the default anyway */
height: 80px; /* match your graphic height */
background: #fff url(your-image.jpg) no-repeat 0 0; /* where your image goes */
}hth, and if you still have a "gap" after that heading that you don't want it's likely down to the default margin on whatever is following it (e.g. another heading or a <p>)
<h1>Service-Learning:</h1>is a teaching and learning strategy...
but I want the definition to follow right after the term. Because it is an H1 heading it drops the definition to the next line. I have adjusted the font size through the CSS sheet, but I do not know how to adjust the spacing so that there is not an automatic line break. The only reason I am putting the term Service-Learning as an H1 is because I need an H1 for the search engines; otherwise I would just format it in larger font and then add the definition. The coding for the background image is
#header {
position : fixed;
width : 100%;
height : 160px;
top : 0;
right : 0;
bottom : auto;
left : 0;
border-bottom : 2px solid #cccccc;
background-image: url('images/collage3.jpg');
}
technically speaking floating any element actually makes it a block
if you want the heading text to appear below an actual image (rather than hold a background image) then it's still margins remove the default margin from the heading in question and then apply the amount of pixels needed to "clear" the image as your new top margin
Still display:inline might give what you seek to do:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>untitled</title>
<style type="text/css">
* {
margin:0;
padding:0;
}
h1+p, h1 {
display:inline;
}
</style>
</head>
<body>
<h1>title</h1>
<p>is explained here</p>
<p>next paragraph</p>
</body>
</html>
Note as is above, it'll fail in IE6 as IE6 doesn't support the sibling selector. A solution would be to give the first paragraph a class (polluting your html) or to use something like IE7.js to teach IE6 some more respect for standards. This way you can keep the text line constant (which is harder to do with floats).
