[FONT=“Verdana”]I’m trying to figure out how to align text to the right of a header. The width is set to 100% in the stylesheet. This is how it would look:
<h1>WalkingTrails.com</h1> — Now way to the right of the header I’d want to put my Contact number and name. How do I do that?[/FONT]
That’s more of a CSS question.
If you make your h1 to be 100% of the page’s width, then you have no room for your address.
You can use floats to have your h1 on one side and your address on the other.
[FONT=“Verdana”]Thanks, kohoutek. I’ll play around with that later. If I decreased the width to 50%, how then do you put it to the right? I understand now how to align with a float if text is by itself. But I’m still not understanding what to do for the xhtml code. Just to be sure, this is what I’d want:
<h1>WalkingTrails</h1> ---------------------------------------> Contact me at 000-000-0000[/FONT]
<h1>Walking Trails</h1>
<p id="contact">Contact me at 000-000-0000</p>
h1 {
float:left;
width:50%;
}
#contact {
text-align:right;
}
Hi, I’d use a paragraph for your phone number, so something like this:
h1 {width:60%; float:left;}
.phone {text-align:right;}
The HTML
<h1>Walking Trails</h1>
<p class="phone">Contact me at 000</p>
Edit: sorry, did not see your post, Tommy.
[FONT=“Verdana”]Thank you both of you guys. However, that did not produce really what I was after. What that did was produce two different lines. I wanted contact info to be on same horizontal line as header. Viewing that in the browser puts the contact on top of the header to the right.
Also, how would you put a horizontal line (with padding) across the width of the page without text? You can’t simply go <p/>.[/FONT]
That code they gave you is the right solution. Sounds like you have default margins still on those two elements.
Add this to your style sheet to prove it to yourself:
h1, #contact {margin:0;}
For a horizontal line, you could either use <hr>, or do something like this:
<p class="line"></p>
.line {border-top: 2px solid #aaa;}
Add top/bottom margin to suit.
Thanks, ralph.
That did work. But now I have other problems. Take a look at this if you will please:
CSS:
body {
background-color: #4169E1;
font-family: Verdana, Helvetica, Arial, sans-serif;
font-size: 1em;
line-height: 125%;
margin: 20px;
padding: 0;
}
h1 {
font-size: x-large;
background-color: white;
float: left;
width: 50%;
}
#contact {
text-align: center right;
background-color: white;
margin-right: 2px;
}
#h1, #contact {
margin: 0;
padding-top: 1em;
padding-bottom: 1em;
}
XHTML:
<body>
<div id=“header”>
<h1>WalkingTrails.com</h1>
<div id=“contact”>
<p class=“contact”>Phone: 444-1000<br>
Email: elephant@sitepoint.com</p>
</div>
</div>
</body>
</html>
I can’t get the contact info to shift more towards the right. If I leave it as just “right” each one won’t be centered together. But if you center it, it’s way out in the middle. Also, putting that padding in there really messes things up.
Try this CSS and see if it does what you want:
body {
background-color: #4169E1;
font-family: Verdana, Helvetica, Arial, sans-serif;
font-size: 1em;
line-height: 125%;
margin: 20px;
padding: 0;
}
h1 {
font-size: x-large;
background-color: white;
float: left;
width: 50%;
}
[COLOR="Red"]#header {
overflow: hidden;
background: white;
}[/COLOR]
#contact {
text-align: center;
background-color: white;
margin-right: 2px;
[COLOR="Red"] float: right;
width: 300px;[/COLOR]
}
#h1, #contact {
margin: 0;
padding-top: 1em;
padding-bottom: 1em;
}
Thanks, ralph. I really do appreciate you taking the time to help me. It looks like this is going to be a long and slow process. I have read almost two Sitepoint books already: Build Your Own Web Site The Right Way and HTML Utopia (two more chapters before to go before appendixes). Even after reading those two books I have trouble getting what I want. The problem is, you design a site “their way.” So it when it comes to doing what you want to do exactly, I have trouble.
Now, the problem I’m having now with how this header looks. What you coded fixed that problem… but now the header won’t align properly with the contact. The header floats towards the top. I want it aligned with the second line with email. Also, I can’t seem to lower the padding no matter what I do. The padding is too much. Here is the updated code now:
CSS:
body {
background-color: #4169E1;
font-family: Verdana, Helvetica, Arial, sans-serif;
font-size: 1em;
line-height: 125%;
margin: 30px;
padding: 0;
}
h1 {
font-size: large;
background-color: white;
float: left;
width: 50%;
}
#header {
overflow: hidden;
background: white;
}
#contact {
text-align: center right;
background-color: white;
float: right;
width: 300px;
font-size: large;
}
#h1, #contact {
margin: 0;
padding-bottom: .1em;
font-family: Arial;
}
XHTML:
<body>
<div id=“header”>
<h1>WalkingTrails.com</h1>
<div id=“contact”>
<p class=“contact”>Phone: 444-1000<br>
Email: elephant@sitepoint.com</p>
</div>
</div>
</body>
</html>
Sorry, I didn’t notice that you had a critical error in your CSS:
[COLOR="Red"]#[/COLOR]h1, #contact {
...
}
You need to remove that red #, to produce this:
h1, #contact {
...
}
Now those styles will apply to the H1. (It is an element, not an ID.)
However, I would separate the two rules, so that you can aply styles to the H1 on its own:
h1 {
...
}
#contact {
...
}
Then just apply top margin or padding to the H1 to bring it down to thedesired level.
Thanks for the quick reply, ralph! That did the trick. Although, I’m a little confused over the “overflow” code. I’ll have to google that.
Phew! Man… Now the next step is to get the navigation in place. Here I go… I’ll get back here if I have trouble.
overflow is used here to “contain floats” (you can Google that phrase). A container won’t wrap around floated contents by default. (By default the floated items “hang out” of the container.) So if you want it to do so, you have to apply some sort of artifice. The easiest is overflow: hidden; though it is not appropriate in all circumstances.
Just Google “containing floats” to read more, (or check out my little attempt to explain it).
Thanks for the explanation on overflow, ralph. I like your blog, too. I bookmarked it.
I already have another question regarding the “Header.” I can’t seem to decrease the overall width. I tried to change it from 50% to 30% but it does nothing. I also changed the “Contact” to 200px from 300px. That part will mess it up completely. What should I do?
That should be easy enough. Could you just post the code you are using now, as I’ve lost track of where we are up to. 
Hey, ralph. Went out to get groceries earlier. Here it is:
CSS:
body {
background-color: #4169E1;
font-family: Verdana, Helvetica, Arial, sans-serif;
font-size: 1em;
line-height: 125%;
margin: 30px;
padding: 0;
}
h1 {
font-size: large;
background-color: white;
float: left;
width: 50%;
padding-bottom: .1em;
padding-top: 1.3em;
padding-left: .5em;
}
#header {
overflow: hidden;
background: white;
}
#contact {
text-align: center right;
background-color: white;
float: right;
width: 300px;
font-size: large;
padding-bottom: .1em;
padding-right: .5em;
}
#navigation li{
display: inline;
}
XHTML:
<body>
<div id=“header”>
<h1>WalkingTrails.com</h1>
<div id=“contact”>
<p class=“contact”>Phone: 451-5672<br>
Email: elephant@sitepoint.com</p>
</div> <!-- end of contact div –>
</div> <!-- end of header div –>
<div id=“navigation”>
<ul>
<li><a href=“index.html”>Home</a></li>
<li><a href=“index.html”>About</a></li>
<li><a href=“index.html”>Rates</a></li>
<li><a href=“index.html”>Contact</a></li>
</ul>
</div> <!-- end of navigation div –>
</body>
</html>
Not quite sure what you are asking for here. If you change the header width to 30% it reduces to that, but you don’t see a change as there isn’t much text in it anyway (the text uses up about 15% of that 50%).
If you want the contact div to be narrower, of course the text will squash up, and the email address will overflow as it is one line. The only way around this would be to make the font smaller.
What do you want to happen visually?
Hi ralph. I hope your Wednesday, or Thursday rather, is going well for you.
Well, I want the entire header divider to decrease in width. So it would look like how it is on HostGator.com.
I tried adding in margins and that just pushes the text further to the right. I like where text is, I just want the overall width to decrease. I’m not positive I will make the change, but I at least want to be able to do it if I decide to do that in the end. I have a lot of white space as you can see. I’m going to have this site up soon. I have a lot of updated code now. Here it is:
CSS:
body {
background-color: #4169E1;
font-family: Verdana, Helvetica, Arial, sans-serif;
font-size: 1em;
line-height: 125%;
margin: 30px;
padding: 0;
}
h1 {
font-size: x-large;
background-color: white;
float: left;
width: 50%;
padding-bottom: .1em;
padding-top: .5em;
padding-left: .5em;
}
#contact {
text-align: center right;
background-color: white;
float: right;
width: 300px;
font-size: large;
padding-bottom: .1em;
padding-right: .5em;
}
#header {
overflow: hidden;
background: white;
border: 1px solid black;
}
#navigation {
width: 100%
}
#navigation ul {
font-size: large;
border: 1px solid black;
background-color: white;
text-align: center;
padding-top: .6em;
padding-bottom: .6em;
list-style: none;
margin-top: .2em;
}
#navigation li {
display: inline;
}
#navigation li a:link, #navigation li a:visited {
padding: 0.4em 1em 0.4em 1em;
color: #FFFFFF;
background-color: #030303;
text-decoration: none;
border: 1px solid white;
margin-left: .8em;
margin-right: .8em;
}
#navigation li a:hover {
background-color: #595959;
color: #FFFFFF;
}
.mainpicture {
float: left;
border: 1px solid black;
}
Content {
margin-left: 13em;
margin-top: 0;
background-color: white;
padding-top: .1em;
padding-left: .5em;
padding-right: .5em;
border: 1px solid black;
}
XHTML:
<body>
<div id=“header”>
<h1>WalkingTrails.com</h1>
<div id=“contact”>
<p class=“contact”>Phone: 451-5672<br>
Email: elephant@sitepoint.com</p>
</div> <!-- end of contact div –>
</div> <!-- end of header div –>
<div id=“navigation”>
<ul>
<li><a href=“index.html”>Home</a></li>
<li><a href=“index.html”>About</a></li>
<li><a href=“index.html”>Rates & Services</a></li>
<li><a href=“index.html”>Contact</a></li>
</ul>
<p><img src=“dog-leash-1.jpg” class=“mainpicture” width=“186” height=“374” /></p>
</div> <!-- end of navigation div –>
<div id=“content”>
<h2>Welcome to Walking Trails</h2>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero
eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur
sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</div> <!-- end of welcome div –>
</div> <!–end of content div –>
</body>
What do you think of the layout and look I’ve got so far? Do you think it would be better if navigation was attached to the header? (No blue space in between.) Also, this would be considered a “one-column layout” right? I think what I’ll work on tonight is rounding the corners on each divider (did I describe that right?). I will need a logo. Any advice on creating a logo? I would put that right next to the h1.
At this point, I would suggest wrapping all those divs in an overall wrapper, and set dimensions on that. Otherwise, if you reduce the width of the header div, it will be narrower than the rest of the site.
E.g.
[COLOR="Red"]<div id="wrapper">[/COLOR]
<div id="header">
</div> <!-- end of header div -->
<div id="navigation">
</div> <!-- end of navigation div -->
<div id="content">
</div> <!-- end of welcome div -->
</div> <!--end of content div -->
[COLOR="Red"]</div> <!--end of wrapper div -->[/COLOR]
Then set a max-width on that wrapper (and maybe a min-width too).
#wrapper {
max-width: 960px;
min-width: 600px;
margin: 30px auto;
}
So then you’d remove the margins on the <body> element.
What do you think of the layout and look I’ve got so far?
Looks fine. There is a forum for site critiques, though, which you mihgt like to visit for more suggestions:
this would be considered a “one-column layout” right?
I’d say 2 column, as you have a sidebar in there.
Any advice on creating a logo? I would put that right next to the h1.
I’m not an expert there. Perhaps try out some designs and then run them past the reviews forum above, or the graphics forum:
And yes, it’s a nice, warm and sunny Thursday down here, just after midday.
Thanks, ralph!
Could you just tell me why we put the width as “50%” for the header, and “300px” for the #contact? What is the theory behind that? I’ve been reading about rounded corners tonight and it looks like I’ll be creating an image in an photo editor like Photoshop and setting the width in pixels. So I’m unsure on how to best do this if I don’t know total width in pixels. Hope you can help with that.