How do I create a header that is flush to the margins of the page? 2

nikky0000 · Jul 3, 2009

Hi, using CS4 DW on win xp.

Say I create a new page: 1 column elastic, centered, by default, its 46em.

If I make a header in photoshop to be 46 em so it will be flush to the top, it doesn't work and sits to the sides.

So how do I do this so that header is flush to the top but the text below has say 10 pixel margins?

Thanks

Nikky

johnwm · Jul 5, 2009

See my reply to you in thread248-1527878, which you haven't yet had time to respond to. To be much help we would need to see the page you're talking about. I'm sure that you have checked that the page in question has a complete and valid doctype, and that the page validates. Use

http://validator.w3.org

for that.

I notice that you have asked a dozen questions, but have not yet marked any answers as helpful. If you aren't getting good answers, try reading faq222-2244 to see how to do your basic research and how to ask better questions. If you have found some answers to be helpful, please mark them as such (the FAQ explains how) so that others browsing the forums can be helped as well.

If you want the best response to a question, please check out FAQ222-2244 first.
'If we're supposed to work in Hex, why have we only got A fingers?'
Drive a Steam Roller

nikky0000 · Jul 5, 2009

John.

I am getting great answers, reason why I come back.

Sorry but I did not know the 'tight control' over marking post as valuable.......but will do that. It's a great idea of course and I apologize if I did not understand.

Nikky.

nikky0000 · Jul 5, 2009

John

here's link to image of page.

http://img33.yfrog.com/i/junkpage.png/

see, how the head is flush on right and left sides. What setting in DW do I need to set?

and if you notice, the text in the letter below has padding around it.

Thanks
Nikky

johnwm · Jul 6, 2009

Thanks for the star - much appreciated. We actually need to see the page, rather than a picture of the page in order help you sort the code. It's probably a problem in your CSS, such as not resetting browser defaults, but without seeing the actual page it's hard to tell.

If you want the best response to a question, please check out FAQ222-2244 first.
'If we're supposed to work in Hex, why have we only got A fingers?'
Drive a Steam Roller

nikky0000 · Jul 11, 2009

Ok, I created a page with link

http://bracesbydrtahir.com/tektips.html

would like to know put the yellow header to the very top and flush right and left sides.

thank.

Nikky

vacunita · Jul 11, 2009

Try this, changes are in red:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
body {
	font: 100% Verdana, Arial, Helvetica, sans-serif;
	background: #666666;
	margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
	padding: 0;
	text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
	color: #000000;
}
.oneColElsCtr #container {
	width:750px;
	background: #FFFFFF;
	margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
	border: 1px solid #000000;
	text-align: left; /* this overrides the text-align: center on the body element. */

}
.oneColElsCtr #mainContent {
	padding: 0 [red]0px;[/red] /* remember that padding is the space inside the div box and margin is the space outside the div box */
}
-->
[red]
h1{
padding:0px;
margin:0px;
padding-left:20px;
padding-bottom:20px;
}
.h1img{
padding:0px;
margin:0px;
}

#txtcont{
padding-left:20px;


}

[/red]
</style></head>

<body class="oneColElsCtr">

<div id="container">
  <div id="mainContent">
    <h1 class="h1img"><img src="\images\header.jpg" width="750" height="252" /></h1>
[red]<div id="txtcont">    [/red]
<h1>and want the text below exactly as it look now with some padding.</h1>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam,  justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam  ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo  porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis  ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean  sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at,  odio. Donec et ipsum et sapien vehicula nonummy. Suspendisse potenti. Fusce  varius urna id quam. Sed neque mi, varius eget, tincidunt nec, suscipit id,  libero. In eget purus. Vestibulum ut nisl. Donec eu mi sed turpis feugiat  feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut,  sapien. Fusce metus mi, eleifend sollicitudin, molestie id, varius et, nibh.  Donec nec libero.</p>
    <h2>H2 level heading </h2>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam,  justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam  ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo  porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis  ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean  sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio.</p>
[red]</div>[/red]
  <!-- end #mainContent --></div>
<!-- end #container --></div>
</body>
</html>

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

johnwm · Jul 11, 2009

You will always suffer from this kind of problem if you rely on the WYSIWYG layout provided in any of these over-simplified tools. They provide a useful editing and page management system, but very few pros would expect to get a satisfactory professional layout from them. You will need to learn HTML and CSS if you want decent results for your websites. Currently what you call a header is an image with it's width set to 750px inside a container with its width set to 750px. If you really want to keep the header as an image and stretch it to fit the view-port (probably a poor idea as it will stretch and distort as the view-port dimension is changed) you will need to take it out of the container into a separate div and set it's width to 100%.

You will probably get a better result (if I read your definition correctly) if you give that separate div it's own CSS and use an <h1> element for the text, setting it's font properties as required. That way the style will stay consistent with changing view-port width and the text will just wrap to suit width. That way you will not only get a controllable layout, but the page will also make semantic sense (for search engines).

I have just hacked your existing to give you an idea of one way to do it - still needs tidying up of course!

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
body {
	font: 100% Verdana, Arial, Helvetica, sans-serif;
	background: #666666;
	margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
	padding: 0;
	text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
	color: #000000;
}
h1 {padding 0;margin:0;}
.header {
font-family:"Courier New",monospace;
width: 100%;
background-color:#ffff00;
padding:0;margin:0;
}
.oneColElsCtr {
	width:750px;
	background: #FFFFFF;
	margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
	border: 1px solid #000000;
	text-align: left; /* this overrides the text-align: center on the body element. */
}
.oneColElsCtr #mainContent {
	padding: 20px  /* remember that padding is the space inside the div box and margin is the space outside the div box */
}
-->
</style></head>
<body>
<div class="header">
<h1>i want this header to be flush to page on the left and right sides and to the top</h1>
</div>
<div  class="oneColElsCtr">
  <div id="mainContent">
    
    <h1>and want the text below exactly as it look now with some padding.</h1>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam,  justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam  ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo  porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis  ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean  sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at,  odio. Donec et ipsum et sapien vehicula nonummy. Suspendisse potenti. Fusce  varius urna id quam. Sed neque mi, varius eget, tincidunt nec, suscipit id,  libero. In eget purus. Vestibulum ut nisl. Donec eu mi sed turpis feugiat  feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut,  sapien. Fusce metus mi, eleifend sollicitudin, molestie id, varius et, nibh.  Donec nec libero.</p>
    <h2>H2 level heading </h2>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam,  justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam  ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo  porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis  ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean  sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio.</p>
  <!-- end #mainContent --></div>
<!-- end #container --></div>
</body>
</html>

If you want the best response to a question, please check out FAQ222-2244 first.
'If we're supposed to work in Hex, why have we only got A fingers?'
Drive a Steam Roller

nikky0000 · Jul 12, 2009

Thank you Vacunita and John for you help. I have already tried you copy/paste of changes and it works.

Since I am a newbie at html, now's the time to print out and study.......thank you for your help.

Nikky

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

How do I create a header that is flush to the margins of the page? 2

nikky0000

Technical User

johnwm

Programmer

nikky0000

Technical User

nikky0000

Technical User

johnwm

Programmer

nikky0000

Technical User

vacunita

Programmer

johnwm

Programmer

nikky0000

Technical User

Similar threads

Part and Inventory Search

Sponsor