How do you get my Header (logo) and Navigation lined up together

Hi all, I need some help with my header (logo) and navigation on my portfolio. I want it to be inline with each other.
like this site - https://www.siteforum.com/

this is my testing site - http://testing.aimee-tacchi.co.uk/index.html

I’ve tired having the divs floating left 50% width each, but it doesn’t seem to want to go up there…


Responsive Design -

I’m happy with how it is in the responsive design, I just need to sort out the logo.

Thanks!

Hi there darkxangel84,

try changing this…

[code]

logo
Menu
[/code]

…to this…

[code]

logo [/code]

Then add this CSS…

header img,header nav {
    display:inline-block;
    vertical-align:middle;
 }

coothead

Hi there,

Thank for you that, that has lined it up, how do I get the navigation to the right hand side?
Do I need to float something right?

Thanks

Try changing this…

header img,header nav {
    display:inline-block;
    vertical-align:middle;
 }

…to this…

header img {
    float:left;
 }
header nav {
    float:right;
    margin-top:66px;
 }

coothead

But it’s now hidden in the mobile responsive version? How do I get it showing for that please?

Hi there darkxangel84,

I have made a few minor amendments to your “styles.css” file. :sunglasses:

Download this attachment…

styles.css (4.6 KB)

…and replace your existing file with it. :ok:

coothead

Thank you very much! ;D

No problem, you’re very welcome. :sunglasses:

coothead

I’m just trying to sort out the handle now, so the nav is hidden and you click menu and it all dropped down. Like I have on my other site - http://meproct.atspace.co.uk/

Have a look when you resize the browser down.
Thanks

I have all the code, but it’s not hiding the nav and the drop down isn’t working? have I missed something?

Hi there darkxangel84,

I have now modified and validated both your “style.css” and “index.html” files. :sunglasses:

Everything now appears to be working as you desired. :ok: :cool:

Check out the attachment and try them yourself. :arrow_heading_down:

amended-CSS-and-HTML-files.zip (4.4 KB)

coothead

Wow you are very kind, thank you ever so much for all your help! it’s really appreciated

No problem, you’re very welcome. :sunglasses:

coothead

Could you tell me what was wrong with the menu drop down? Why wasn’t it working? I want to learn from this ;D thanks

Hi there darkxangel84,

bearing in mind that I find it harder to explain my methodology
than to actually code, I hope that this may help…

Setting “nav ul {height:0;}” could not be overridden by this…

[code]

[/code]

…where “.showing” was set, I believe to “height:20em”.

I got around this hurdle by adding class=“hiding” to the
“nav ul” element., where “.hiding” was set to “height:0”.

I also changed “.showing” to “height:auto” as it is, obviously,
less specific and more flexible.

Now if you understand all that waffle, then…

“By the livin’ Gawd that made you,
You’re a better man than I am, Gunga Din!”

coothead

haha ohhh ok, well thank you. I added a new page on the site now. http://testing.aimee-tacchi.co.uk/webdesign.html it says there is some errors in the code when I go to the validator…

Do you know what the problem is? something to do with my sections.

Hi there darkxangel84,

here is your validated page…

webdesign.html (6.6 KB)

I have changed the images’ name attributes to id attributes,which fixes all the errors. :sunglasses:

The rest of the problems were warnings regarding your use of the section element
within the footer element. :ng:

Normally a section element has a descriptive heading - ( h1 - h6 ) but yours lack one. :cold_sweat:

Dividing your footer element would be better done with the neutral div element instead. :ok_hand:

coothead

Thank you, u are very kind… what do you think to my site ? What’s your opinion? Is it lacking anything.

It’s all up on the domain now www.aimee-tacchi.co.uk

Well, the page, unfortunately, still does not validate. :mask:

validator.w3.org

But I am, of course, just indulging in a little nit-picking. :ok_hand:

coothead

target="_new" has never been a valid value to open a new page. Use target=“_blank” instead.

You really should take an interest in using the validator. It’s not always right, but it has a better track record than most individuals, and valid code will play more reliably in more devices for a longer stretch of time than invalid code.

And the <section>s at the bottom aren’t really “sections” in the semantic sense, so using <div> would be more appropriate.

But I think you’ve already been told these things before, sooooo…