...

View Full Version : Help formating a header



jumpink
05-10-2007, 11:55 AM
This has been driving me nuts. If you make the browser window small (less than half of the screen) the header text will format like a paragraph pushing the header down until all the text fits on the screen. If there are no spaces between charachters then the text stays put. I have add "_" and change the color to match the background color. Is there any other way to make the text just stay put, short of making the header an image.

Here is a link to an example.
http://www.precisemessenger.com/private/header.html

Thanks,
Kevin

kosstr12
05-10-2007, 12:01 PM
Hey, I dont quite understand your problem, is it that your sub title is wordwrapping, if its anything else please post your code that I can further help you.

Thanks,
kosstr12 :thumbsup:

jumpink
05-10-2007, 12:10 PM
Yes wordwrapping. I posted a link above but here is the code also

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Layout</title>
<style type="text/css">
html, body {
height: 100%;
}
body {
margin: 0;
font-family: Verdana, sans-serif;
font-size: 15px;
font-weight: normal;
}

#header {
letter-spacing: normal;
background-color: #708090;
}
#header h1 {
font-size: 350%;
color: #fff;
margin: 0;
background: #708090;
padding-top: 0;
padding-right: 0;
padding-bottom: 0;
padding-left: 10px;
letter-spacing: normal;
}

.subtitle {
font-size: 165%;
color: #c6ccd3;
padding: 4px 0 0 10px;
margin: 0;
background: #708090;
color: #c6ccd3;
font-weight: bold;
font-style: italic;
letter-spacing: normal;
border-bottom-color: #666666;
border-bottom-style: solid;
}
.style1 {color: #FF0000}
.style2 {color: #708090}
</style>
</head>
<body>
<div id="header">
<h1 class="style1">MySite.com</h1>
</div>
<div class="subtitle">THIS SUBTITLE FORMATS LIKE A PARAGRAPH</div>
<div class="subtitle">THIS<span class="style2">_</span>SUBTITLE<span class="style2">_</span>DOES<span class="style2">_</span>NOT</div>

jumpink
05-10-2007, 12:57 PM
Add...

.subtitle {white-space: nowrap;}

...and it won't break.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum