Positioning images for a vertical navigation bar

Kalmykov · 08-10-2011, 09:07 PM

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.

Kalmykov · 08-10-2011, 09:07 PM

A static Jpeg can be seen here

www.kovcreation.com

Avril · 08-12-2011, 10:22 AM

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>

Sammy12 · 08-12-2011, 06:27 PM

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/

teedoff · 08-12-2011, 06:48 PM

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.

Quote:

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.

Kalmykov · 08-22-2011, 06:32 PM

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;
cursor

ointer;
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.  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.  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.  This is why the client is kept at the forefront of every project I take on.  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>

teedoff · 08-22-2011, 06:38 PM

Quote:

Originally Posted by Kalmykov

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;
cursor

ointer;
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.  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.  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.  This is why the client is kept at the forefront of every project I take on.  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.