/    Sign up×
Community /Pin to ProfileBookmark

How to move right nav bar down

Copy linkTweet thisAlerts:
Jun 26.2009

Hi,

Am editing a template within dreamweaver as it saves a lot of time for me but I can figure ot how to move the right nav bar down.

Enclosed is a screen shot of my current page with nonsense typed, that’s not important am just laying out my space etc..

Anyway do you see the outline of the image, I need the grey right nav bar below this and expand and center the image making it’s presence known on the page. I have tried with design view, won’t let me. Had a look at the code but nothing really there that I picked up on (considering am only a beginner)..

any thoughts?

Thanks

[upl-file uuid=ceb68b17-e0af-4fbe-a615-72e193ab3bdb size=109kB]Picture 2.gif[/upl-file]

to post a comment
CSS

9 Comments(s) ↴

Copy linkTweet thisAlerts:
@aj_nscJun 29.2009 — Code? (HTML and CSS)
Copy linkTweet thisAlerts:
@leehughesauthorJun 29.2009 — oops sorry..

you can also look at www.leehughes.co.uk

thanks

[upl-file uuid=2769f88c-6454-4548-b712-50d2d344f63d size=5kB]css.txt[/upl-file]

[upl-file uuid=bfad65e4-96b1-4750-bae7-95a90f566a42 size=7kB]html.txt[/upl-file]
Copy linkTweet thisAlerts:
@aj_nscJun 29.2009 — You've got some HTML problems in there as well, like wrapping an <img> inside an H2 for absolutely no apparent reason....but these aren't necessarily functional issues, so I didn't change them.

I can't remember exactly what I changed to get it to work, but I'll try and go through it below. The CSS and HTML are attached.

What I did was expanded the header image by using #pageName img { width: 100%; }

I then moved your navbar from where it was in the HTML to right after h2#pageName and floated it to the right (removing the left margin of 79% and adding a left padding of 10px for readability). I then removed the clear: both on .story so that they would wrap around the right floated navbar. I think that is all that I did.

[upl-file uuid=87487d38-2bb2-4358-9547-028619ac6ec4 size=6kB]css.txt[/upl-file]

[upl-file uuid=c09b5ba0-9f63-47c3-ba81-03a85db1443f size=6kB]html.txt[/upl-file]
Copy linkTweet thisAlerts:
@leehughesauthorJun 29.2009 — Hi,

First i would like to thank you for taking the time out to help me and help me learn more about css and html ?

I copied your code into dreamweaver both css and your html.

unfortunately this was the result.. (see picutre 3)

It looks fine in dreamweaver, the picture is centered across the screen and the navbar has been moved down. My aim is to tuck the navbar just under the picture and reduce the length of the text so it's a two column web page with content on left and navbar on right. Attached is what is looks like in dreamweaver (pic 4 and 5). Am not sure why it is turning into picture 3 when previewed in browser.

Thanks for explaining what you did though and thanks for doing it, I will have a play with the code (now I know what I need to target) and try and get the above result ?

[upl-file uuid=5a2e97e8-cff8-48ae-b5f6-f6adb40299fe size=100kB]Picture 3.gif[/upl-file]

[upl-file uuid=daf976ee-cb47-4d39-ac96-3f3d0dd43f04 size=96kB]Picture 4.gif[/upl-file]

[upl-file uuid=545f82f5-8bde-4f4b-8cee-8c3f81ccc6de size=100kB]Picture 5.gif[/upl-file]
Copy linkTweet thisAlerts:
@aj_nscJun 29.2009 — Weird, when I copied and pasted my own code (from above) when I was editing your HTML and CSS online I got a weird result too...don't get it.

Forget about copying and pasting the code then, just follow the steps I said I took above. Check the screenshot to see what you're aiming for.

[upl-file uuid=e3fa0743-3ff9-4a63-9ddd-334d13b190e8 size=80kB]screenshot.jpg[/upl-file]
Copy linkTweet thisAlerts:
@leehughesauthorJun 29.2009 — Yeah that's exactly what I want..

i will follow the steps and let you know ?

thanks again
Copy linkTweet thisAlerts:
@leehughesauthorJun 29.2009 — Hi mate,

just wanted to let you know that av finally done it now ?

http://www.leehughes.co.uk/

Yay.. now time for some editing ?

cheers
Copy linkTweet thisAlerts:
@leehughesauthorJun 29.2009 — ohh.. haven't uploaded the right file...
Copy linkTweet thisAlerts:
@leehughesauthorJun 29.2009 — Well, I don't know why it goes back to the old one when I upload it to my server, even though I have saved it under the same file name (replaced it) and uploaded it the same way..

Anyway..

Thanks, you have REALLY helped me out ?

[upl-file uuid=b0e4d33a-b759-410c-9eef-15dbeee622e9 size=102kB]Picture 2.gif[/upl-file]
×

Success!

Help @leehughes 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 6.2,
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: @meenaratha,
tipped: article
amount: 1000 SATS,

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

tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,
)...