+ 3

Need help with nav section

Anyone have a basic code setup for a nav section that keeps it horizontal? Everything I put keeps setting up vertically.

html css nav

20th Feb 2018, 4:45 PM

Felix Viruet

8 ответов

+ 17

take a look here 👇 https://code.sololearn.com/Wkk0kx9eUux7/?ref=app

20th Feb 2018, 4:55 PM

Mazin Ayash

+ 2

Do you mind posting your code so I can take a look at it? I can tell you why it's not displaying as you intend. It's better to know what's going on and how to resolve than simply posting code for you to copy/paste.

20th Feb 2018, 4:54 PM

Fata1 Err0r

+ 2

Please, give us link to your code! Typically we put an unordered lists (<ul>) in the nav. To list the elements (<li>) horizontally, you need to make them as inline-block elements. CSS: li { display: inline-block; } Something like that: https://code.sololearn.com/WQAgAnRymYHR/?ref=app

20th Feb 2018, 5:14 PM

Boris Batinkov

+ 1

<!DOCTYPE html> <html lang="en">  <head> <meta charset="utf-8" /> <meta content="width=device-width" name="viewport" /> <meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> <meta content="We Work Wonders" name="description" /> <meta content="We Work Wonders, hair salon, beauty parlor, kids, haircut" name="keywords" /> <meta content="Felix Viruet" name="author" /> <meta content="noindex, no follow" name="robots" /> <meta content="width=device-width, initial-scale=1.0" name="viewport" /> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" /> <link href="www.css" rel="stylesheet" type="text/css" /> <title>We Work Wonders</title>  </head>   <body data-gr-c-s-loaded="true"> <div class="wrapper"> <header class="header"> <p class="logo"><a href="https://cooltext.com"><img src="https://images.cooltext.com/5101407.png" width="700" height="100" alt="We Work Wonders" /></a> <br />Image by <a href="https://cooltext.com">Cool Text: Logo and Button Generator</a> - <a href="https://cooltext.com/Edit-Logo?LogoID=2765186864">Create Your Own Logo</a> </header> <nav class="nav"> <ul> <li><a href="home.html">Home</a></li> <li><a href="services.html">Services/Prices</a></li> <li><a href="contact.html">Contact Us</a></li> <li class="more"><a class="morebtn" href="javascript:void(0)">More</a> <div class="more-content" style="left: 546px; top: 408px"> <a href="book.html">Book Online</a> <a href="portfolio.html">Portfolio</a> <a href="about.html">About</a> </div> </li> </ul> </nav>

20th Feb 2018, 6:02 PM

Felix Viruet

+ 1

@Felix, do you have the code in the playground? If yes, then open it, click on the 3 dots in the top right corner, click on copy to clipboard, then paste it in a comment here. And then we'll see a link to your code. Pasting code here is ugly and no readable.

20th Feb 2018, 6:16 PM

Boris Batinkov

<article class="container"> <section class="content"> <h2>Mission</h2> <p><em>T</em>his website design is for my girls. I have 7 daughters and a wonderful wife.</p> <p><em>N</em>ow they are at the age where a regular wash is just not enough so as a joke my wife came up with the name "We Work Wonders."</p> <p><em>E</em>ach one of my daughters has a different hair style, feel and texture and likes their hair in a different hair style.</p> <p><em>S</em>o my wife turned our bathroom into her office where she transforms sometimes a mess to something that looks decent.</p> <p><em>T</em>rust me after 11 years now she is pretty good at what she does.</p> <p><em>S</em>o gives us a call if you every need a little help when you are having a bad hair day.</p> <br /> <p class="motto">If Your Hairs a Mess, We Do Our Best to Make It Look Decent!!!</p> <h2>Mission Statement</h2> <p class="mission">Our mission is to provide your hair with makeover. Aren't you tired of waking up with bed-hair or just after along day running around town taking care of business and your hair just looks a mess. Well we here at <i><b>"<em>W</em>e <em>W</em>ork <em>W</em>onders"</b></i> will take on any bad hair style and make it and you look decent.</p>  </section> </article>  <footer class="footer" > <a href=""> <img src="images/valid_html5-yellow.gif" alt="Valid HTML 5" width: 85px; height: 30px; /></a> Copyright (c) 2018 All Rights Reserved. Designed by Felix Viruet.<a class="copyright" href="mailto:fviruet0@email.cpcc.edu">Email Me</a><a href="http://jigsaw.w3.org/css-validator/check/referer"> <img src="http://jigsaw.w3.org/css-validator/images/vcss" alt="Valid CSS!" width: 85px; height: 30px /></a> </footer>  </div> </body> </html>

20th Feb 2018, 6:02 PM

Felix Viruet

I had to post it in 2 different posts, another thing my footer is so big I will like it to be very simple and smaller at the bottom of the page. But as for the NAV, it is showing horizontal now but the words are stacked on top of each other and need to be spread out. Will you also need to see the CSS file?

20th Feb 2018, 6:05 PM

Felix Viruet

Yes I just added and made it public name (nav).

22nd Feb 2018, 4:50 PM

Felix Viruet