/    Sign up×
Community /Pin to ProfileBookmark

Positioning images for a vertical navigation bar

Copy linkTweet thisAlerts:
Aug 10.2011

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 ([URL=”http://kovcreation.com/”]can be seen here as a static jpeg[/URL]) 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.

[code=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>[/code]

And then this is the Refferenced style sheet

[code=html]
#nav {
position: absolute;
top: 0px;
left: 0px;
}

div.nav_side {
background-image: url(imageslayoutSide_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(imageslayoutHome.gif);
background-repeat: no-repeat;
background-position: top center;
position: absolute; top: 552; left: 35;
width: 67px;
height: 14px;
}
.nav_Portfolio {
background-image: url(imageslayoutPortfolio.gif);
background-repeat: no-repeat;
background-position: top center;
position: absolute; top: 566; left: 35
width: 67px;
height: 14px;
}
.nav_Contact {
background-image: url(imageslayoutcontact.gif);
background-repeat: no-repeat;
background-position: top center;
style=”position: absolute; top: 580; left: 35;”/>
width: 67px;
height: 14px;
}
[/code]

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.

to post a comment
HTML

3 Comments(s) ↴

Copy linkTweet thisAlerts:
@dangerousprinceAug 10.2011 — Welcome to the scripting world! I'm currently working with my graphic designer creating his website.

From the picture you've uploaded, it looks quite easy to put together. The one thing I will say, is try not to make the website full of images, as everyone tries this (especially graphic designers who don't know how to get the site they want it) which leads to SLOW loading times. And I know, it's always quality over loading times, and as a designer, you're going to choose quality.

The text can actually be easy to put on, even if you're using a different font, which can be embedded using CSS. This has been around quite a while and I've done a few sites like it - example: www.winneravant.co.uk with the beautiful Helvetica Neue.

Send over the picture, exactly how you want it, and I could send you over a full site in a matter of minutes ?
Copy linkTweet thisAlerts:
@dangerousprinceAug 10.2011 — Also notice:

[code=html]
background-image: url(imageslayoutPortfolio.gif);
background-repeat: no-repeat;
background-position: top center;
position: absolute; top: 566; left: 35
width: 67px;
height: 14px;
[/code]

All of that is pretty much wasted on putting an image on a page. You could just use the IMG tag which consists of

[code=html]<img src="dir/img.jpg" alt="" />[/code]

And positioning is easy by wrapping a div around it.

Again, the best thing to start out with is the basic 'wrapper':

[code=html]
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Your page name</title>
<style type="text/css">
/* When you're finished with this, put it in a sperate document and use <link ... / > */
html, body {
margin:0;
}
img {
border:0; /* Annoying blue border on IE */
}
#wrapper {
width:980px;
margin:0 auto;
}
</style>
</head>

<body>
<div id="wrapper">
<h2>Content</h2>
<p>Goes around here</p>
</div>
</body>
</html>
[/code]
Copy linkTweet thisAlerts:
@kalmykovauthorAug 12.2011 — Out of the 7 forums I posted on this is the only one that got a hit :/

lol anyways thank you so much for replying!

The 'wrapper' div was what I was trying to accomplish in the original posted script.

[code=html]<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>
[/code]
Where "buttons" would be the wrapper and in the css each button has its on div and is positioned by

[code=html].nav_home {
background-image: url(imageslayoutHome.gif);
background-repeat: no-repeat;
background-position: top center;
position: absolute; top: 552; left: 35;
width: 67px;
height: 14px;
}
.nav_Portfolio {
background-image: url(imageslayoutPortfolio.gif);
background-repeat: no-repeat;
background-position: top center;
position: absolute; top: 566; left: 35
width: 67px;
height: 14px;
}
.nav_Contact {
background-image: url(imageslayoutcontact.gif);
background-repeat: no-repeat;
background-position: top center;
style="position: absolute; top: 580; left: 35;"/>
width: 67px;
height: 14px;
}
[/code]

Maybe I'm not using [code=html]style="position: absolute; top: 580; left: 35;"/>[/code] right?
×

Success!

Help @kalmykov spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...