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 7 of 7
  1. #1
    New to the CF scene
    Join Date
    Aug 2011
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Post Positioning images for a vertical navigation bar

    Hi all,

    Graphic designer here hell bent on learning web design with a question probably asinine for all those viewing but vexing to me for the last week.

    I have a site beautifully designed ( and seemingly straight forward and basic but making it functional on the web as I designed is proving to be quite the arduous task.

    I have many questions concerning this project but I'll keep this thread focused on the code for positioning images on the navbar. I have the buttons (67px by 14px) and sidebar (36px by 594px) all measured out and have tried a few different semantics to accomplish this but all for not. The images always end up stacking in the top left corner.


    [HTML]<body>

    <div id="butttons">
    </div>


    <div id="nav">
    <img src="images/layout/images/Side_nav.png"/>

    </div>
    <div id="butttons">
    <div id="nav_Home">
    <img src="images/layout/images/Home.png"/>
    <div id="nav_Portfolio">
    <img src="images/layout/images/Portfolio.png"/>
    <div id="nav_Contact">
    <img src="images/layout/images/Contact.png"/>
    </div>

    </body>[/HTML]

    And then this is the Refferenced style sheet

    [HTML]
    #nav {
    position: absolute;
    top: 0px;
    left: 0px;
    }

    div.nav_side {
    background-image: url(images\layout\Side_nav.gif);
    background-repeat: no-repeat;
    background-position: top center;
    width: 36px;
    height: 594px;
    }

    #buttons {
    position: absolute;
    background-repeat: no-repeat;
    background-position: top center;

    top: 500px;
    left: 36px;
    }
    .nav_home {
    background-image: url(images\layout\Home.gif);
    background-repeat: no-repeat;
    background-position: top center;
    position: absolute; top: 552; left: 35;
    width: 67px;
    height: 14px;
    }
    .nav_Portfolio {
    background-image: url(images\layout\Portfolio.gif);
    background-repeat: no-repeat;
    background-position: top center;
    position: absolute; top: 566; left: 35
    width: 67px;
    height: 14px;
    }
    .nav_Contact {
    background-image: url(images\layout\contact.gif);
    background-repeat: no-repeat;
    background-position: top center;
    style="position: absolute; top: 580; left: 35;"/>
    width: 67px;
    height: 14px;
    }
    [/HTML]

    I literally just started learning Html /CSS / Java a month ago; spare no details!

    ANY help with ANY (text formatting, background gradient that adjusts relative to a screen size, rollovers on the nav etc...) part of putting this site together will be more appreciated then most can fathom. I'd be willing to exchange some graphic work if any of you stuck this out to the end with me.

  • #2
    New to the CF scene
    Join Date
    Aug 2011
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    A static Jpeg can be seen here

    www.kovcreation.com

  • #3
    Regular Coder
    Join Date
    Nov 2005
    Posts
    329
    Thanks
    3
    Thanked 19 Times in 19 Posts
    Hi! Your design intrigued me, and I set about trying to re-create it. Here is a basic layout. You would have to use one image gradient (I called it "backgroundstrip.jpg") of about 750px width and 5px height for the background of both the body and container. The simplest way of setting the links at the bottom was to put them in a separate div underneath the "texts". I've also put borders around everything so that you can see where they go. The final design will have to take these into consideration. It works on Safari, and Opera. I haven't tried it with Chrome or IE (that's a whole bag of trouble!)

    Have fun with it!

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 TRANSITIONAL//EN">
    <html>
    
    	<head>
    		<title>Testpage</title>
    
    <style type="text/css">
    		
    body { margin: 0px; border: 0px; 
    }
    
    #backgrounddiv {position: absolute; float: right; margin-top: 0px; margin-right: 0px; height: 950px;  max-height: 950px; width: 100%; background-repeat: repeat-y; z-index: 0;
    }
    
    
    #mycontainer {position: relative; float: left; margin-left: 100px; width: 700px; height: 750px; margin-top: 50px; background-image: url('images/backgroundstrip.jpg'); background-repeat: repeat-y; border: 1px solid #000;  z-index: 1;
    }
    
    #header {width: 700px; height: 80px; border: 1px solid #000; 
    }
    
    #leftcolumn1 {float: left; clear: right; width: 30px; height: 666px;  border: 1px solid red; background-color: #3b3b3b;
    } 
    
    #texts {float: left; width: 498px; height: 560px; padding-left: 160px; padding-top: 10px; padding-right: 10px; padding-bottom: 10px;
    }
    
    #navbar {float: left; clear: right; width: 150px; height: 80px; 
    }
    
    #link1, #link2, #link3, #link4 {width: 150px; height: 20px; background-image: url(images\layout\Home.gif); background-repeat: no-repeat; border: 1px solid #000; display: block; 
    }
    
    #rightbottom {float: left; width: 516px; height: 86px; border: 1px solid #000; text-align: right;
    }
    
    </style>
    
    	</head>
    	<body>
    
    <div id="backgrounddiv"><img src="images/backgroundstrip.jpg" width="100%" height="100%"></div>
    <div id="mycontainer">
    
    <div id="header">The header comes here
    </div>
    
    <div id="leftcolumn1">
    </div>
    
    <div id="texts">
    The text comes here. Padding: 10px.  The text comes here.The text comes here.The text comes here.The text comes here.The text comes here.The text comes here.The text comes here.The text comes here.The text comes here.The text comes here.The text comes here.The text comes here.The text comes here.
    </div>
    
    <div id="navbar">
    <div id="link1"> Link 1 </div>
    <div id="link2"> Link 2 </div>
    <div id="link3"> Link 3 </div>
    <div id="link4"> Link 4 </div>
    </div> 
    
    <div id="rightbottom">
    More stuff here
    </div>
    
    </div>
    
    </body>
    </html>

  • #4
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    I see. your using a radial gradient as your background image.

    @avril, you used clear: right; twice, but you aren't clearing any floats. clear: right; is used to push preceding content down after a float: right; just food for thought, not trying to pick at your code

    There's four ways to obtain an image size to fit the screen:

    - use a very large image around width: 1600px;, it will in end just be cut off if the user's screen is too small
    - use javascript to determine the user's screen size and display an image just large enough for the user's screen
    - use a standard image with some distortion http://css-tricks.com/766-how-to-res...kground-image/
    - use css -webkit-radial-gradient, google all the other specs needed for ff, ie, etc., which is probably one of the best upcoming solutions
    http://robertnyman.com/2010/02/15/cs...-using-images/
    Last edited by Sammy12; 08-12-2011 at 06:32 PM.

  • Users who have thanked Sammy12 for this post:

    Kalmykov (08-22-2011)

  • #5
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    OP. your code is also not correct. You have more than one element named with the same id. Id's must be unique and cannot be reused. Classes, however can be duplicated as needed.

    Also, why not use an unordered list for those nav links? Thats basically what a nav menu is, a list of buttons, links, items, etc. Much more semantic that way.

    I literally just started learning Html /CSS / Java a month ago; spare no details!
    Also, not sure if you meant Java or javascript. I would assume javascript. In any case, the two are in noway related, and are two different entities. Just though you should know.
    Last edited by teedoff; 08-12-2011 at 06:50 PM.
    Teed

  • #6
    New to the CF scene
    Join Date
    Aug 2011
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Update

    Thought I'd post an update on where I am

    CSS

    #wrapper {
    width:700px;
    margin:0 auto;
    border-left:36px #584842 solid;
    }
    #logo {
    text-align:center;
    padding:75px 0 20px 0;
    }
    #main {
    width:400px;
    margin:0 auto;
    }
    #main h2, #main h3 {
    margin:0;
    text-align:center;
    }
    #main h2 {
    font-size:22px;
    }
    #main h3 {
    }
    #main h4 {
    color:#bb2826;
    font-size:16px;
    font-weight:none;
    }
    #nav ul {
    margin:0;
    padding:0;
    width:300px;
    }
    #nav li {
    list-style:none;
    padding:3px 7px;
    }
    #nav li:hover {
    color:#fff;
    cursorointer;
    background:#584842;
    }

    Code

    <body>

    <Div id="wrapper">
    <div id="logo"><img src= "images/logo.png" alt="Michael Kalmykov Graphic designer logo"</div>
    <div id="main">
    <h2>Freelance Graphic Designer</h2>

    <h3>Michael Kalmykov</h3>

    <h4>Clearly Communicative Graphics</h4>

    <p>I've a knack for efficiently making products and services relatable to target demographics via art.&nbsp; With an excellent education courtesy the Art Institute of Pittsburgh, I'm well equipped with the knowledge required to conceptualize effective marketing concepts and the technical aptitude to professionally execute those concepts.&nbsp; I'm more then capable in a multitude of various art mediums, but corporate art is where the blunt of my passion lies.</p>

    <p>There is no greater feeling then the sense of fulfillment achieved from helping another achieve their dreams and ambitions.&nbsp; This is why the client is kept at the forefront of every project I take on.&nbsp; I won't stop until your vision is manifested in a way that is unique to your goals.</p>
    </div>
    <Div id="nav">
    <ul>
    <li onclick="window location='index.php'">Home</li>
    <li onclick="window location='portfolio.php'">Portfolio</li>
    <li onclick="window location='contact.php'">Contact</li>
    </Div>
    </body>

  • #7
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Quote Originally Posted by Kalmykov View Post
    Thought I'd post an update on where I am

    CSS

    #wrapper {
    width:700px;
    margin:0 auto;
    border-left:36px #584842 solid;
    }
    #logo {
    text-align:center;
    padding:75px 0 20px 0;
    }
    #main {
    width:400px;
    margin:0 auto;
    }
    #main h2, #main h3 {
    margin:0;
    text-align:center;
    }
    #main h2 {
    font-size:22px;
    }
    #main h3 {
    }
    #main h4 {
    color:#bb2826;
    font-size:16px;
    font-weight:none;
    }
    #nav ul {
    margin:0;
    padding:0;
    width:300px;
    }
    #nav li {
    list-style:none;
    padding:3px 7px;
    }
    #nav li:hover {
    color:#fff;
    cursorointer;
    background:#584842;
    }

    Code

    <body>

    <Div id="wrapper">
    <div id="logo"><img src= "images/logo.png" alt="Michael Kalmykov Graphic designer logo"</div>
    <div id="main">
    <h2>Freelance Graphic Designer</h2>

    <h3>Michael Kalmykov</h3>

    <h4>Clearly Communicative Graphics</h4>

    <p>I've a knack for efficiently making products and services relatable to target demographics via art.&nbsp; With an excellent education courtesy the Art Institute of Pittsburgh, I'm well equipped with the knowledge required to conceptualize effective marketing concepts and the technical aptitude to professionally execute those concepts.&nbsp; I'm more then capable in a multitude of various art mediums, but corporate art is where the blunt of my passion lies.</p>

    <p>There is no greater feeling then the sense of fulfillment achieved from helping another achieve their dreams and ambitions.&nbsp; This is why the client is kept at the forefront of every project I take on.&nbsp; I won't stop until your vision is manifested in a way that is unique to your goals.</p>
    </div>
    <Div id="nav">
    <ul>
    <li onclick="window location='index.php'">Home</li>
    <li onclick="window location='portfolio.php'">Portfolio</li>
    <li onclick="window location='contact.php'">Contact</li>
    </Div>
    </body>
    Ok so does this mean your problem is resolved?

    Also, just a little tip. When posting code here, use the code tag button(#) to wrap your code in tags so that it's easier for everyone to read.
    Teed


  •  

    Tags for this Thread

    Posting Permissions

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