Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10
  1. #1
    New to the CF scene
    Join Date
    Feb 2011
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Creating Banner from Mockup

    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

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

    Thanks!

  • #2
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,801
    Thanks
    8
    Thanked 131 Times in 129 Posts
    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.
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

  • #3
    New to the CF scene
    Join Date
    Feb 2011
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #4
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,801
    Thanks
    8
    Thanked 131 Times in 129 Posts
    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?
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

  • #5
    New to the CF scene
    Join Date
    Feb 2011
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #6
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,739
    Thanks
    22
    Thanked 1,837 Times in 1,821 Posts
    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.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #7
    New to the CF scene
    Join Date
    Feb 2011
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Awesome, i'll give that a go and post back when i've got something

  • #8
    New to the CF scene
    Join Date
    Feb 2011
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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:
    Code:
    <!-- 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:
    Code:
    #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.

  • #9
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,801
    Thanks
    8
    Thanked 131 Times in 129 Posts
    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:

    Code:
    #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.
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

  • #10
    New to the CF scene
    Join Date
    Feb 2011
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.
    Last edited by 01230322; 04-28-2011 at 06:44 PM.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •