...

View Full Version : Creating Banner from Mockup



01230322
02-22-2011, 06:05 PM
I'm pretty new to all of this, but I've got a few questions about how I'd go about coding this.

I'm working on my high school's website (sigh.. nobody else wants to) and I did a mockup of the banner in fireworks. Here is what it looks like:

Banner (http://postimage.org/image/gu3bqd7o/)

It's really simple, I know, but I'm just wanting to know what the best way to code the navigation bar is.

Thanks!

harbingerOTV
02-22-2011, 06:24 PM
http://css.maxdesign.com.au/listamatic/horizontal01.htm

and of course, some of the more advanced examples might be better.


That would be my approach.

01230322
02-22-2011, 06:27 PM
Alright, I'll check that out. My main gripe is having the Lumberjack logo hanging below the list, I'm not completely sure how I'll go about it.

harbingerOTV
02-22-2011, 06:35 PM
You could remove the links part off the image leaving the lumberjack and the school name and stripes. USe that image as the background of the UL and then position the LIs with in it. Make sense?

01230322
02-22-2011, 06:40 PM
Yeah, it'll take me some time as i'm a bit rusty in my coding but i'll get there. I'll post back here If I have any questions.

Excavator
02-22-2011, 07:27 PM
Hello 01230322,
If you grab the LuberJack graphic only, the stripes could easily be done with a 168px high by 1px wide slice that you repeat on the x axis.

Then you could use real text for the Council High School title in heading tags for extra points with the search engines.

01230322
02-24-2011, 06:01 PM
Awesome, i'll give that a go and post back when i've got something :)

01230322
04-26-2011, 06:46 PM
Hey again. I've been working on this site a little here and there, but I've been running into a lot of problems with IE and firefox not agreeing :(

My footer won't align to the center, and i've no idea why.

Well, it'll align to the center in firefox, but not IE. When i fix it in IE it won't align in firefox. It's incredibly frustrating.

I'm not sure if i should post the whole document, but i'll put up the part thats giving me grief.

HTML:
<!-- Begin Footer -->

<div id="footer">

<div id="navcontainer">
<ul class="footer_ul">
<li><a href="#">Contact</a></li>
<li><a href="#">About</a></li>
</ul>

</div>

</div>


<!-- End Footer -->

</div>

CSS:
#footer {
position: absolute;
bottom: 0;
right: 0;
left: 0;
width: 780px;
height: 55px;
color: #ccc;
background: black;
background-image: url('images/footerbg.png');
background-repeat: repeat-x;
clear: both;
margin: auto;
text-align: center;

If you need more of the code..i can paste it in no problem. Thanks. :)

harbingerOTV
04-27-2011, 05:57 PM
More code or better yet a link to alive test page would be better. I'm curious as to why you are even using absolute positioning at all. But, to center it using absolute positioning, try:



#footer {
position: absolute;
bottom: 0;
width: 780px;
margin-left: 50%;
left: -390px;
height: 55px;
color: #ccc;
background: black;
background-image: url('images/footerbg.png');
background-repeat: repeat-x;
text-align: center;
}

clear: both; has no effect on an absolutely positioned element.

01230322
04-28-2011, 06:36 PM
I don't know to be honest, I was zooming in and out of the page and everything was moving off of where I wanted it. Anyways, I've included a link to the images, html, and css file below. I'm not a very efficient coder, so I'm sorry if its hard to sort through.

http://www.filedropper.com/web_1

In case you wonder, there is a lot of extra code in the css file for a gallery page I'm working on to, lol.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum