2 Replies - 1300 Views - Last Post: 11 October 2012 - 05:22 PM

#1 The_Programmer-  Icon User is offline

  • Death Scythe
  • member icon

Reputation: 24
  • View blog
  • Posts: 593
  • Joined: 24-October 11

Centering Header and Text

Posted 11 October 2012 - 10:55 AM

Using CSS, how would I center my header? And is there a way to check the users screen width so if they have a small screen the header gets switched with a navbar on the side? Also if their screen is too smal the text will not center and will be to the right of the navbar?

Posted Image


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<base target="_blank">
<meta name="description" content="Kenneth Clark's personal webpage.">
<meta name="keywords" content="HTML, PHP, Javascript, Java, Programming, Kenneth, Clark, Personal">
<link rel="stylesheet" type="text/css" href="http://kensclark.com/layout/default.css"/>
<title>kensclark.com - Under Construction</title>
</head>
<body>
<map name="headermap">
<area shape=rect coords=6,6,82,67 href="http://kensclark.com/" target="_self">
</map>
<div id="header">
<img src="/images/header.gif" alt="Header" style="padding:0px;" hspace="0" vspace="0" usemap="#headermap"/>
</div>
<p>Under Construction!
Send e-mail to admin@kensclark.com if you need to contact the owner.</p>
<br/>
<br/>
</body>
</html>


body {
    margin: 0px;
    background: url(http://kensclark.com/images/background.jpg) no-repeat;
}

#header {
    margin: auto auto;
    border: none
    padding: 0
}


Is This A Good Question/Topic? 0
  • +

Replies To: Centering Header and Text

#2 BenignDesign  Icon User is offline

  • holy shitin shishkebobs
  • member icon




Reputation: 6018
  • View blog
  • Posts: 10,444
  • Joined: 28-September 07

Re: Centering Header and Text

Posted 11 October 2012 - 05:04 PM

<center><img src="/images/header.gif" alt="Header" style="padding:0px;" hspace="0" vspace="0" usemap="#headermap"/></center>



Alternatively, you could try
#header {
margin: 0 auto;
border: none
padding: 0
}



Or
img {margin: 0 auto;}


Was This Post Helpful? 0
  • +
  • -

#3 The_Programmer-  Icon User is offline

  • Death Scythe
  • member icon

Reputation: 24
  • View blog
  • Posts: 593
  • Joined: 24-October 11

Re: Centering Header and Text

Posted 11 October 2012 - 05:22 PM

I fixed it. I put the image inside of div tags with the id "header" then I used this in CSS:

#header {margin: 0 auto; width: 650px;}

Was This Post Helpful? 0
  • +
  • -

Page 1 of 1