PDA

View Full Version : header width and position problem



DiMage
Feb 22nd, 2010, 10:11 PM
Hello, i have a problem with a header image for a site; i must say that my programming experience is equal to none, i work on the graphic part of the site.

I attached a picture witch explains my question

http://img641.imageshack.us/img641/1829/problemru.jpg (http://img641.imageshack.us/i/problemru.jpg/)

1. I want to make the header jpeg larger, at 1024x159 and

2. I want it to be centered.

I tried replacing the jpeg with a larger one but it doesn't show more than 498x159.

If anyone could help i'll be grateful :thumbsup:

later edit: code added (i hope i got it right)


header {
width : 100%;
position:relative;
}
#headleft {
height : 159px;
width : 100%;
float : left;
background : url(../images/header_left.jpg) repeat-x;
margin : 0;
padding : 0;
}
.header h1 a:link, .header h1 a:visited {
position:absolute;
top:20px;
left:150px;
width:300px;
height:auto;
line-height:1.1em;
text-align : left;
font-size : 1.4em;
font-weight : bold;
}
.header h1 a:focus, .header h1 a:hover {
font-weight : bold;
}
#slo {
position:absolute;
z-index:103;

Excavator
Feb 22nd, 2010, 10:15 PM
Hello DiMage,
The code for centering your new .jpeg is going to be different than the code that's now positioning the 498px wide .jpeg.
It might be easiest if you posted some code for us. I could also write out a quick mock-up if you'd rather...

When posting code in the forum, please use the code tags, [code][/code] - available with the # button in the post edit window.
This will wrap your code in a scroll box which greatly helps the readability of your post.

Excavator
Feb 22nd, 2010, 10:24 PM
Try something similar to this -
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
body {background: #fc6;}
#header {
height: 159px;
margin: 30px 0 0;
background: url(background.jpg) repeat-x;
}
#hdrImg {
margin: 0 auto;
display: block;
}
</style>
</head>
<body>
<div id="header">
<img src="/new1024x159.jpg" alt="description" width="1024" height="159" id="hdrImg" />
<!--end header--></div>
</body>
</html>

DiMage
Feb 22nd, 2010, 11:21 PM
i searched a little in the files, and in the template.css file i found this


#headright {
position:relative;
height : 159px;
width : 498px;
float : right;
background : url(../images/header_right.jpg) no-repeat top right;


can i modify this to my needs?

Excavator
Feb 23rd, 2010, 12:37 AM
Something like this, renamed because #headright doesn't make much sense when we remove the float -
#new_head_img {
height : 159px;
width : 1024px;
margin: 0 auto;
display:block;
background : url(../images/1024x159.jpg);
}

DiMage
Feb 23rd, 2010, 09:45 AM
Many thanks, it worked like a charm :D:D:D
except i didn't renamed the #headright, for some reason my image didn't appeared when renamed..


Anyway, thanks again :thumbsup:

Excavator
Feb 23rd, 2010, 05:32 PM
Many thanks, it worked like a charm :D:D:D
except i didn't renamed the #headright, for some reason my image didn't appeared when renamed..


Anyway, thanks again :thumbsup:

If you want to rename it in the CSS, you also need to rename the div itself in the markup.