If this is your first visit, be sure to
check out the FAQ by clicking the
link above. You may have to register
before you can post: click the register link above to proceed. To start viewing messages,
select the forum that you want to visit from the selection below.

Enjoy an ad free experience by logging in. Not a member yet? Register.

Positioning images for a vertical navigation bar

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.

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.

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!)

@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

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

<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.