Create a Template [HELP]

Ok, How can i make it to FIT the screen?


I just made an extremely basic looking theme in photoshop and then saved for web and it gave me the HTML images and CSS (sliced in PS CS4)

in the CSS how can i make it stretch to fit the screen?


ps. the thing in PS is soooooooooo cool does everything for you lol..


Heres the link im just testing things out on:

Untitled-1

 

If youre not well versed in HTML and CSS I suggest you learn fixed layouts before moving onto fluid layouts. If you want the header of that to be full width you would slice a 1px width image from it and use something like:

Code:

#header {background:url('headerbg.gif') repeat-x #FFFFFF;width:100%;height:120px;}

and in your HTML

Code:

<div id="header"></div>

Of course that would need editing accordingly

With fixed layouts you will use pixel values for the horizontal sizes mostly and for fluid layouts which stretch with the browser window horizontally you will be using percentages.

Hope that helped.

Edit: It appears that wasnt an image you linked to there lol just noticed

Yeah you will need to start using percentages if you want the whole layout to be fluid instead of pixel set widths. 100% is of course the whole browser window.

 

Ok ive done it, is it look good for you?


How would i go about centering the Text Box (the box where the text is)

 

For the box try margin:0 auto; that should centre it. I suggest using a solid colour for the top box if theres no gradient/imagery needed there, just try something like this instead for it:

Code:

background:#000000;width:100%;height:120px;

And make your navbar image only 1 or 2 pixels wide, that image is not needed to be so large with it repeating, remember to flatten layers if the nav has a drop shadow etc Do the same with the main background image too, you only need that 1px wide

 

Ill probably do that tomorrow, but for some reason the text on the navbar is non selectable and when i tried it as a link it unclickable too..

Anyone know why?

The CSS for the navbar is:

Code:

#navbar {
position:absolute;
left:0px;
top:87px;
text-align:center;
width:100%;
height:43px;
background-image:url('/images/navbar.gif')

and in html is:

Code:

<div id="navbar">
test

</div>

 

Try this out, hope it helps:

Code:

<div id="navbar">
<ul>
<li><a href="">Link</a></li>
<li><a href="">Link</a></li>
<li><a href="">Link</a></li>
<li><a href="">Link</a></li>
<li><a href="">Link</a></li>

</ul>

</div>

and add this to your CSS:

Code:

#navbar {
position:absolute;
left:0px;
top:87px;
text-align:center;
width:100%;
height:43px;
background-image:url('/images/navbar.gif');
}

navbar ul {list-style:none;}

#navbar li {float:left;}

I think that may work although I aint tried it myself

 

Works perfect, 1 problem though..Its all together..how do i get spaces?

ive tried

 

No no remove Add padding-left:20px; after float:left; and adjust accordingly, add and padding top, bottom, right if needed too. Make sure to check in IE aswell.

 

Is there a way to make links a diff colour? i tried adding color:white; after float:left; but it didnt work, and also center?

Thanks again.

 

Try this out...

Code:

#navbar li a:link {color:#000000;}
#navbar li a:visited {color:#000000;}
#navbar li a:hover {color:#FFFFFF;}
#navbar li a:active {color:#FFFFFF;}

Change the colours accordingly

 

I kept those colours because it looks better...

Would you know how to center it?

Ive tried like 10 different ways of centering and it just wont work..

 

I have always struggled with centering listed navigation, try removing the padding from the navbar div with padding:0; check how it looks and add padding-top:Xpx; till you get there

Im not sure if that will work in all browsers though. If it doesnt try adding padding-top:Xpx to the others but make sure to remove the default padding, you can do this for the whole template with:

body {margin:0;padding:0;}

Allowing you to define all paddings and margins yourself.

 

Thats making it go up and down in the nav bar, i would like it to be in the middle...

 

Try this guide:

CSS horizontal navigation list

 

That makes nothing go into the middile, thats just a horizontal menu..

I need it to be in the MIDDLE of the NAVBAR..

middle...​

 

I think I am quite aware that you want it in the

"middle..."

Search CSS horizontal navigation menu, there will be something you can use.
​

 

Actually...
Wrong CSS'

Edit:

This is the right CSS;

Code:

#navbar ul {
list-style:none;
list-style-position: outside; 
margin: auto;
padding: 10px;
}

#navbar li {

display:inline;
padding-left:20px;
text-decoration:none;
}

 

Sorry about before ^^;; I forgot to actually make the changes.