+ 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.
8 Answers
+ 17
take a look here 👇
https://code.sololearn.com/Wkk0kx9eUux7/?ref=app
+ 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.
+ 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
+ 1
<!DOCTYPE html>
<html lang="en">
<!--Start of Head-->
<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>
<!--[if 1t IE 9]>
<script src="http://html5shimgooglecode.com/svn/trunk/html5.js">
</script>
<![endif]-->
</head>
<!--End of Head-->
<!--Start of Body-->
<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>
+ 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.
0
<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>
<!--End of Body-->
</section>
</article>
<!--Start of Footer-->
<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>
<!--End of Footer-->
</div>
</body>
</html>
0
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?
0
Yes I just added and made it public name (nav).
Often have questions like this?
Learn more efficiently, for free:
Hot today
Как решить?
0 Votes
Help me please 🥺🥺
0 Votes
Suggestions
2 Votes
Just new here
1 Votes
Задача цикла While C# Сумма
2 Votes
PHP
1 Votes