html and css help

Docpepper · May 5, 2006

ok i'm working on site using html and css with just a little of photoshop included . I have most of the stuff ironed out except my main header isn't lined up right. I'm wanting it to line up so the entire thing is snug against the top border of my main content area as it is now it just looks lopsided .

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd'>http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">


<html>


<head>

<link rel="stylesheet" type="text/css" href="corestyle.css">

<title>Dochappy Designs</title>


<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />


</head>


<body>


<div id="header">


<p> <align="center"> <img src="images/Header.jpg" width="779" height="242"></align></p>


</div>






<div id="content">


<div id="navbar">


<ul><li><a href="http://www.com'>http://www.com/'>http://www.com'>http://www.com/" >About Me</a></li><li><a href="http://www.com'>http://www.com">Portfolio</a></li><li><a href="http://www.com'>http://www.com">Resources</a></li><li><a href="http://com">Friends</a></ul>


</div>


<div id="main-text">


<h1>NEWS</h1>


So this is  abase layout I'm workign on looks shitting now but  hopefully i'll get it better.

<h2>headline2</h2>


<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>


<p>Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>


<h2>Headline 3</h2>


<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis.</p>


<p>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, At accusam aliquyam diam diam dolore dolores duo eirmod eos erat, et nonumy sed tempor et et invidunt justo labore Stet clita ea et gubergren, kasd magna no rebum. sanctus sea sed takimata ut vero voluptua. 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.</p>


<p>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>



<p class="footer"><a href="http://www">site1</a> :: <a href="http://www.">site2</a> :: <a href="http://www">site3</a></p>


</div>


</div>


</body>


</html>

and here is the css i'm using

/*This is the core style sheet of the site.*/

a:link {

color: #9c968f;


background-color: #55514C;


text-decoration: none;

}


a:visited {

color: #666666;


background-color: #55514C;


text-decoration: line-through;

}


a:hover {

background-color: #f8ebdc;

}


a:active {

background-color: #d5c9bc;

}





body {background-color: #55514C;


color: #FFFFFF;


font-family:Verdana, Helvetica, Arial, sans-serif;


font-size:1em; 


margin: 0;


background-image: url(images/background.gif);

}


#header { background-color: #ffffff;

border-bottom: solid #000000 2px;

background-image: url(images/background.gif);

}


#header p {

font-size: .6em;



}


#content {

position: relative;


width: 779px;

}


#navbar {

position: absolute;


top: 0px;


left: 0px;


width: 198px;


}


#navbar ul li {

list-style-type: none;

list-style-type: none;

background-image: url(images/background.gif);

margin: 0;


padding: 0;

}


#navbar ul {


margin: 0;


padding: 0;


}


#navbar ul li a:link, #navbar ul li a:visited {

display: block;

text-decoration: none;


font-weight: bold;


border-bottom: solid #000000 1px;


padding-top: 3px;


padding-bottom: 3px;


padding-left: 20px;

}


#navbar ul li a:hover {

background-image: url(images/background.gif);

color: white;

}



h1, h2, h3, h4, h5, h6 {


color: #9c968f;


}



#main-text { background-color: #55514c;


border-left: 1px  #000000 solid;


border-right: 1px #000000 solid;


border-bottom: 1px #000000 solid;


margin-left: 198px;


padding: 10px;

}


h1 {font-size:1.2em;


text-align: center;


font-style: italic;


letter-spacing: 5px;

}

h2{font-size:1.1em;


text-decoration: underline;

}

p{font-size:.8em;


text-align: justify;


line-height: 1.7em;

}

p.footer {


font-size: .7em;


text-align: center;


font-weight: bold;

}

A screenshot of my problem

anyone have any ideas how to fix it ?

thanks in advance

EddieG · May 5, 2006

it's


<p align="center"> <img code> </p>

Edited May 5, 2006 by EddieG

May 5, 2006

EddieG is right, Align="center" should be in the same braket as the p

Docpepper · May 5, 2006

i just tried that but no change . thinking i might have to remove the div tags not sure though

May 5, 2006

hey man. your image width is wrong. check the img width in the img tag.

Docpepper · May 5, 2006

i fixed it with some trial and error . I just changed my width to 100%

AJ · May 5, 2006

If you want the content to bleed from the very top of the browser remove the top margin by adding this into the body tag.

<body topmargin="0">

Also, I wouldn't try and make your page xhtml 1.0 strict. It's nigh on impossible without it looking extremely dull and un-entertaining. Go with transitional.

Docpepper · May 7, 2006

thanks for the help guys. It's slowly coming along I've added some content . now all i have to do is figure a good way to do my portfolio page . now it looks too cluttered . link is in my sig . any ideas are appreciated

Sign In

html and css help

Recommended Posts

Docpepper

Link to comment

Share on other sites

EddieG

Link to comment

Share on other sites

Guest clintcasey

Link to comment

Share on other sites

Docpepper

Link to comment

Share on other sites

Guest wickywickyWOWOW

Link to comment

Share on other sites

Docpepper

Link to comment

Share on other sites

AJ

Link to comment

Share on other sites

Docpepper

Link to comment

Share on other sites

Join the conversation

Recently Browsing 0 members

Browse

Activity

Store

My Details

Support

Important Information