I would like to put an element of my nav bar on two lines.
But when I just add a <br /> inside, it breaks everything.
Here is what I want :
Here is what I have :
Here is my html code:
div class="nav-top-home-page">
<nav>
<div>
<div>
<a><img class="logo" src="./assets/img/logo.png" height="200px"></a></div>
<ul>
<li><a>BLOG</a></li>
<li><a>CONTACT</a></li>
<li><a (click)="openLoginModal()"><img src="./assets/img/LOCK.png"/>ME CONNECTER</a></li>
<li><a id="subscribe" routerLink='./register'>M'INSCRIRE</a></li>
<li id="nav-gestionnaire"><a>Vous êtes <br/> GESTIONNAIRE ?</a></li>
</ul>
</div>
</nav>
</div>
Here is my css code :
.nav-top-home-page{
height:600px;
position: relative;
z-index: 5;
background-color: #6f8ab1;
text-align: center;
}
.nav-top-home-page::before {
content: "";
position: absolute;
z-index: -1;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: url(assets/img/home/slide1.png) white center top no-repeat;
background-size: cover;
}
.nav-top-home-page nav div{
padding-top: 10px;
margin-left: 20px;
margin-right: 20px;
}
.nav-top-home-page nav .logo{
float:left;
}
.nav-top-home-page nav ul{
padding: 0px;
margin: 0px;
float: right;
}
.nav-top-home-page nav li{
display: inline;
}
.nav-top-home-page nav li a{
color: white;
font-size: 1em;
line-height: 70px;
padding: 5px 15px;
cursor: pointer;
font-family: Raleway, arial;
}
.nav-top-home-page nav li {
cursor: pointer;
}
#nav-gestionnaire{
display: inline;
}
I tried changing the width, or adding whitespace: nowrap and many other things, but nothing worked.
Can someone help me pls ? :/
Remove line-height property and add display:inline-block on anchor tags
.nav-top-home-page nav li a{
font-size: 1em;
padding: 5px 15px;
cursor: pointer;
font-family: Raleway, arial;
display:inline-block;
}
Try with this, Use display:table-cell
Here is code
Wrap them inside divs as such
<div>Vous êtes</div> <div>GESTIONNAIRE</div>
Try using max-width property and display:inline-block; and remove line-height on anchor tag
CSS
.nav-top-home-page nav li {
cursor: pointer;
display: inline-block;
}
.nav-top-home-page nav li a {
color: white;
font-size: 1em;
padding: 5px 15px;
cursor: pointer;
font-family: Raleway, arial;
color: #212121;
max-width: 180px;
display: inline-block;
}
Related
I am working on a horizontal navigation bar with a dropdown menu. I'm quite new to making codes so this is maybe a stupid question. My navigation is sticking to the left of my website, but I need it to stay in line with the text and I can't get the navigation bar threw my whole webpage how do I fix this?
photo of my website with the 2 problems:
enter image description here
nav {
position: absolute;
}
.horizontal {
list-style-type: none;
margin: 40 auto;
width: 640px;
padding: 0;
overflow: hidden;
}
.horizontal>li {
float: left;
}
.horizontal li ul {
display: none;
margin: 0;
padding: 0;
list-style: none;
position: relative;
width: 100%;
}
.horizontal li:hover ul {
display: inline-block;
}
.horizontal li a {
display: block;
text-decoration: none;
text-align: center;
padding: 22px 10px;
font-family: arial;
font-size: 8pt;
font-weight: bold;
color: #FFFFFF;
text-transform: uppercase;
border-right: 1px solid #607987;
background-color: #006600;
letter-spacing: .08em;
width: 70px;
}
.horizontal li a:hover {
background-color: darkorange;
color: #a2becf
}
.horizontal li:first-child a {
border-left: 0;
}
.horizontal li:last-child a {
border-right: 0;
}
h1 {
margin-top: 80px;
}
<nav id="mainnav">
<ul class="horizontal">
<li>Home</li>
<li>Planning</li>
<li>Takken
<ul>
<li>Kapoenen</li>
<li>Kawellen</li>
<li>Kajoo's</li>
<li>Jojoo's</li>
<li>Givers</li>
<li>Jin</li>
<li>Akabe</li>
</ul>
</li>
<li>Kleding</li>
<li>Contact
<ul>
<li>Leiding</li>
<li>Verhuur</li>
</ul>
</li>
<li>Inschrijven</li>
</ul>
</nav>
Two things in your css are giving you trouble.
nav{ position: absolute; } means this div will not fill the width.
horizontal{ margin: 40 auto;} 40 is not valid.
You MUST specify a measurement unit in CSS, so it should be 40px if I'm guessing your intention, but other units are available.
Here is amended css you can try.
nav {
width: 100%;
background-color: #006600;
}
.horizontal {
list-style-type: none;
margin: 40px auto;
width: 640px;
padding: 0;
overflow: hidden;
}
Step 1) Add HTML:
Example
<!-- The navigation menu -->
<div class="navbar">
<a class="active" href="#">Home</a>
Planning
Takken
Kleding
Contact
Inschrijven
</div>
And CSS:
.navbar {
width: 100%;
background-color: #555;
overflow: auto;
}
.navbar a {
float: left;
padding: 12px;
color: white;
text-decoration: none;
font-size: 17px;
width: 15%;; /* Four links of equal widths */
text-align: center;
}
I was just continuing with making this website and all of a sudden some of my navbar padding goes 'missing' and I can't seem to pinpoint the mistake. I've already played the detective game and commented out some of the stuff I thought was interfering. Luckily I have an original picture before the screw-up and one after. Some of the 'paragraph text' will be 'placeheld' for personal reasons and I think it's irrelevant, unless it's needed in order to fix the problem.
-Thanks.
Before and after picture: http://imgur.com/a/ts1FS
Code:
CSS:
body {
background-color: #1a1a1a;
color: #ccad00;
line-height: 1.9;
font-size: 19px;
}
p.desc{
text-indent: 50px;
}
h1 {
font-family: courier;
color: #ccad00;
}
h2 {
font-family: courier;
color: #ccad00;
text-align: center;
}
#divtitle {
width: 50%;
margin:auto;
padding-top: 50px;
text-align: center;
}
h2
{
font-family:courier;
color: #99cc00;
}
p {
line-height: 1.9
text-size: 19px;
}
#nav {
list-style: none;
font-weight: bold;
margin-bottom: 10px;
width: 100%;
text-align: center;
background-color: #ccad00;
height:40px;
}
#nav ul {
list-style-type: none;
margin: 0px;
padding: 0;
}
#nav li {
margin: 0px;
}
#nav li a {
padding: 10px;
text-decoration: none;
font-weight: bold;
color: #f2f2f2;
background-color: #ccad00;
float: left
}
#nav li a:hover {
color: #0d0d0d;
background-color: #35af3b;
}
.button {
background-color: #ffa600;
border: none;
color: #998200;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 40px;
font-family: courier;
margin: 4px 2px;
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
cursor: pointer;
}
.button:hover {
background-color: white;
color: #998200;
}
div#containerbttn {
width: 800px;
height: 100px;
margin: auto;
background-color: green;
}
ul.square{
list-style-type: square;
}
.center {
text-align: center;
}
html:
<div id="nav">
<ul>
<li>Home
</li>
<li>Center
</li>
<li>Rules
</li>
<li>References
</li>
<li>Rankings
</ul>
</div>
<div>
<div id="divtitle" >
<h1> text </h1>
</div> -->
<div id="containerbttn">
<button class="button">GET STARTED!</button>
<button class="button">FAQ</button>
<button class="button">RANKINGS</button>
</div>
<h2> Synopsis: </h2>
<div class="center">
<p class="desc"> Welcome to ***!. This is a free...
<ul class="square">
<li> some text </li>
<li> some text </li>
</ul>
<p class="desc" > text </p>
</div>
</html>
Your problem exists because you have set the height of the #nav element to 40 px. When you add the padding to your a element, you make it larger than the ul element. This can be solved easily by updating two lines of code.
First, remove from css:
#nav{ height:40px; }
Then, add to html after ul but before closing the nav div:
<div style="clear:both;"></div>
Here is a jsfiddle of your working page: https://jsfiddle.net/8o279n5r/
And here is a great answer on what the clear property does: What does the CSS rule clear: both do?
I am trying to center the navigation bar in the middle of the div body. I want the navigation bar to go from one side of the div to the other but have the list in the ul to be center in the middle of the div if that makes sense. I can't seem to figure it out even after trying online examples. Thanks
body {
margin: 0px;
padding: 0px;
background-color: #505050 ;
}
#body {
width: 75%;
margin: 0 auto;
position: center;
background-color: #C0C0C0;
height: 100%;
}
.nav {
}
.nav ul {
background-color: #CCCCCC;
width: 100%;
padding: 0;
text-align: center;
}
.nav li {
list-style: none;
font-family: Arial Black;
padding: 0px;
height:40px;
width: 120px;
line-height: 40px;
border: none;
float: left;
font-size: 1.3em;
background-color: #CCCCCC;
display:inline;
}
.nav a {
display: block;
color: black;
text-decoration: none;
width: 60px;
}
<div id="body">
<h2>Hello World!</h2>
<div class="nav">
<ul>
<li><a href="#">Home<a></li>
<li><a href="#">About<a></li>
<li><a href="#">News<a></li>
<li><a href="#">Contact<a></li>
</ul>
</div>
</div>
i attach fix here http://jsfiddle.net/o4716uo9/
use inline-block for li
background property should be setted in ul element, not li, in your case. Delete the float in nav li. Also, the a element it isn't closed correctly. Main changes:
.nav ul {
background-color: #cccccc;
text-align: center;
}
.nav ul li {
display: inline-block;
min-width: 120px;
[...]
}
I'll recommend you to take a look at the bootstrap framework. It could be interesting for you.
There are a couple things you can change to correct the issue:
1) Your <a> elements have a width of 60px. You can remove this.
2) You .nav li has a width of 120px. I would change this to 25% (If there are only going to be four navigational items).
http://jsfiddle.net/xLnz90ek/
Is that any closer to the desired effect.
Is this what you’re trying to do?
* { margin:0; padding:0 }
html {
background-color: #505050;
font-size: 4vw;
}
header {
width: 75%;
margin: 0 auto;
background-color: #C0C0C0;
}
nav {
background-color: #CCCCCC;
display: flex;
padding: 0.2rem 0;
}
nav a {
flex: 1 0 auto;
font-family: Arial Black;
font-size: 1rem;
background-color: #CCCCCC;
color: black;
text-decoration: none;
text-align: center;
margin: 0 0.3rem;
}
<header>
<h2>Hello World!</h2>
<nav>
Home
About
News
Contact
</nav>
</header>
I can't get my navigation links to work, and I have no idea why. They used to work before, but after I added in a little bit more of coding.. they seem to have stopped.
Anyone have any idea why?
HTML
<body>
<div id="page-wrap">
<div id="header">
<img src="images/header.png" />
</div>
<img src="images/navbar.png" />
<ul id="nav">
<li>Home</li>
<li>Forums</li>
<li>Members</li>
<li>Streams</li>
<li>Contact Us</li>
</ul>
<div id="mainbody">
<img src="images/mainbody.png" />
<div class="news1">
<img src="images/news1.png" /></div>
<div class="teamspeak"> <!--Teamspeak IMG-->
<img src="images/teamspeak.png" /></div>
<div id="ts3viewer_1037062" /></div> <!-- Teamspeak Widget -->
<script type="text/javascript" src="http://static.tsviewer.com/short_expire/js/ts3viewer_loader.js"></script>
<script type="text/javascript">
<!--
var ts3v_url_1 = "http://www.tsviewer.com/ts3viewer.php?ID=1037062&text=000000&text_size=12&text_family=2&js=1&text_s_color=ffffff&text_s_weight=bold&text_s_style=normal&text_s_variant=normal&text_s_decoration=none&text_s_color_h=ffffff&text_s_weight_h=bold&text_s_style_h=normal&text_s_variant_h=normal&text_s_decoration_h=underline&text_i_color=ffffff&text_i_weight=normal&text_i_style=normal&text_i_variant=normal&text_i_decoration=none&text_i_color_h=ffffff&text_i_weight_h=normal&text_i_style_h=normal&text_i_variant_h=normal&text_i_decoration_h=underline&text_c_color=ffffff&text_c_weight=normal&text_c_style=normal&text_c_variant=normal&text_c_decoration=none&text_c_color_h=ffffff&text_c_weight_h=normal&text_c_style_h=normal&text_c_variant_h=normal&text_c_decoration_h=underline&text_u_color=ffffff&text_u_weight=bold&text_u_style=normal&text_u_variant=normal&text_u_decoration=none&text_u_color_h=ffffff&text_u_weight_h=bold&text_u_style_h=normal&text_u_variant_h=normal&text_u_decoration_h=none";
ts3v_display.init(ts3v_url_1, 1037062, 100);
-->
</script>
</div>
<div id="footer">
<p>©2014 Rythmn Designs<p></div>
</div>
</body>
CSS
body
{
margin: 0px;
padding: 0px;
background: url("http://puu.sh/6RlKi.png")
}
.clear
{
clear:both;
}
#page-wrap
{
width: 1019px;
margin: 0 auto;
}
#header
{
width:100%;
text-align: center;
display: block;
}
#nav
{
height: 1px;
list-style: none;
padding-left: 14px;
text-align: center;
padding-bottom: 0px;
margin: -14px;
margin-top: -15px;
}
#nav li a
{
position:relative;
top: -12px;
display: block;
width: 100px;
float: left;
color: white;
font-size: 14.09px;
text-decoration: none;
font-family:"BankGothic Md BT"
}
#nav li a:hover, #nav li a:active
{
color: red;
}
#mainbody
{
vertical-align:top;
position:relative
}
.news1
{
margin: 0 auto;
position: absolute;
top: 155px;
right: 375px
}
.teamspeak
{
position: absolute;
top: 155px;
right: 30px
}
#ts3viewer_1037062
{
position:absolute;
top: 185px;
right: 30px;
width: 290px;
height:190px;
overflow:auto;
}
#footer
{
background: #181818;
color: white;
padding: 20px 0 20px 0;
text-transform: uppercase;
border-top: 15px solid #828080;
text-align: center;
font-family:"BankGothic Md BT";
font-size: 12px;
position: relative;
}
There are few CSS fixes that can be done
So nav elements (<a> tags) are floated, which means you must clear your floats. A quick way to do it would be to use overflow:hidden on parent element ( in this case, i'd go with ul which is #nav )
Also noticed some negative margins being applied on #nav element. Im not sure if it was a design decision -anyway, commenting them out will get the nav not to go out of screen.
And wherever possible - try to avoid giving fix height to elements.
below is ammended css for #nav
#nav {
/*height: 1px;*/
list-style: none;
padding-left: 14px;
text-align: center;
padding-bottom: 0px;
/*
margin: -14px;
margin-top: -15px;
*/
overflow:hidden;
}
Moving onto nav links #nav li a. Again, not sure if it is a design decision but position:relative; and top:-12px seems to break it.
#nav li a {
/*position:relative;
top: -12px;*/
display: block;
width: 100px;
float: left;
color: white;
font-size: 14.09px;
text-decoration: none;
font-family:"BankGothic Md BT"
}
fiddle: http://jsfiddle.net/Varinder/8A9sW/1/
In your following css code, height of 1px is creating the problem. Make it 20-25px and check or just simply remove height:1px; if it doesn't affect your design.
#nav
{
height: 1px;
list-style: none;
padding-left: 14px;
text-align: center;
padding-bottom: 0px;
margin: -14px;
margin-top: -15px;
}
I tried something with divs in html, and normally it isn't a problem. However I encountered a problem and I don't find my mistake.
The menu div is supposed to be in the center of the header div and there should be no margin at the top.
here is the example with the error: http://jsfiddle.net/j83eb/
here is the html:
<div id="header">
<div id="menu">
<ul>
<li><a class="nav-element" href="#">News</a></li>
<li><a class="nav-element" href="#">Turnier</a></li>
<li><a class="nav-element" href="#">Ergebnisse</a></li>
<li><a class="nav-element" href="#">Impressionen</a></li>
<li><a class="nav-element" href="#">Anmeldung</a></li>
<li><a class="nav-element" href="#">Impressum</a></li>
</ul>
</div>
</div>
and the css:
#header {
padding: 0;
margin:0;
background: #003399;
width: 100%;
height: 50px;
display: block;
position: fixed;
top: 0;
left: 0;
}
#menu a {
display: block;
width: 150px;
height: 50px;
}
#menu {
padding:0;
margin-right:auto;
margin-left:auto;
line-height:50px;
width: 950px;
height: 50px;
}
#menu ul li {
display: block;
width: 150px;
height: 50px;
float: left;
text-align: center;
text-transform: uppercase;
font-family: Arial;
font-size: 16px;
font-weight: normal;
list-style: none;
margin:0;
paddin:0;
line-height:50px;
}
.nav-element:link {
color: #FFF;
text-decoration: none;
}
.nav-element:visited {
color: #FFF;
text-decoration: none;
background: #81b4e3;
}
.nav-element:hover {
text-decoration: none;
color: #FFF;
text-decoration: none;
background: #1a589d;
}
.nav-element:active {
color: #FFF;
text-decoration: none;
background: #C00;
}
Thanks!
Below will fix it (remove margin/padding from ul)
#menu ul {
margin:0;
padding:0;
}
And the Fiddle
As said above, you'll want to clear the default margins on the <ul> element. (No need to clear the padding, there is none). I also removed the height and line-height from everything since that isn't necessary and will likely just cause problems in the future.
Also, make sure to look through your CSS before sending it out for help. There were a number of properties with typos as well as duplicate properties.
http://jsfiddle.net/j83eb/3/