search

net-art-and-cultures / data-bodies

GNU General Public License v3.0
1 stars 6 forks source link

Someone take a look of my code? #24

Closed SlShannon closed 4 years ago

SlShannon commented 4 years ago

I need help on aligning the "about" and "contact" with the Logo, I used display: flex; justify-content: space-between; align-items: flex-end;

but I am having issues @net-art-and-cultures/data-bodies

JohnTendik commented 4 years ago

Hey ^^ I took a look at your code and I noticed that you're adding the logo inside of the <head> tag. The <head> tag should only be used for meta data information, if you try to add any element tags in there it will break the <head>, you can see it in your code if you right click on the page and inspect, the <head> tag is empty because it tried to render an image.

The tag you're after is <header>, this is an element tag similar to <div> but a bit more semantic. Your header code should usually reside in there

As for your alignment issue, for flex to work it needs to have children directly as decendants. I noticed your "Digital Gallery" title is inside of the <nav> tag, you should move this div outside of the nav tag because it is not part of a navigation, its just a page title / logo :)

So to fix your flex issue, add a

tag inside of the . Inside of your <header> tag, add your image for your logo, your page title "Digital Gallery" and your <nav> element. These three should all be inside of
and be siblings to each other

<header>
   <img>
   <div><h4>...</h4></div>
   <nav>...</nav>
</header>

Try this layout and give your <header> tag a display:flex and justifiy-content: space-between and it will work :)

Good luck!