My AIM: is to make a navigation bar go across the whole screen, with a greyish colour (#839496). And have each link/button to have a border to the left and the right of it. Just like the navigation bar on:
http://www.theberrics.com/dailyops
However,
My Problem is: the link/button is only going across as far as is goes. I want each button to go across with the width of 150px (which works fine). BUT also have the grey bar continue through the whole screen horizontally (which isnt working and just displays nothing).
Here is my css:
nav {
background-color: #839496;
padding: 0.02px 0;
margin-bottom: 10px;
}
nav ul {
width: 100%; /*RIGHT HERE: i would like the whole unordered list to go across the screen. But it doesnt work*/
position: relative;
left:10%;
margin: 0;
padding-left: 100px;
}
nav li {
float: left;
}
nav li a{
display: block;
width: 150px;
background-color: #839496;
color: #fff;
text-align: center;
font-weight: bold;
text-transform: uppercase;
padding: 5px;
border-right: 1px solid;
border-left: 1px solid;
}
nav a:hover {
background-color: white;
color: #000;
text-decoration: underline;
}
And here is my html:
<nav>
<ul>
<li>Home<li>
<li>Top 10</li>
<li>Skaters</li>
<li>Submit</li>
</ul>
</nav>
Also: i dont want each button to be 25% of the page. Just 150px wide.
Sorry if my code or anything i said is confusing. Thank you for reading!
update your css like the below (i.e. include overflow: hidden; to nav
CSS
nav {
background-color: #839496;
margin-bottom: 10px;
overflow: hidden;
padding: 0.02px 0;
}
Related
I want the navigation links: "about", "resume", "projects", and "contact" to line up horizontally in the navigation bar.
Why does this only work with display: inline-block?
It is my understanding that inline-block boxes allows these elements to be side by side. I need it to be inline-block instead of just inline because I want to size it to the nav bar's exact height.
What am I doing wrong?
Here is the HTML and CSS for my nav:
/* ----------------------------NAVIGATION SECTION-------------------------------- */
.headerContainer {
background-color: #000;
text-align: center;
height:60px;
margin-left: 600px;
margin-right: 600px;
font-family: 'Monda', sans-serif;
text-transform: uppercase;
position: fixed;
}
nav {
padding-left: 1000px;
padding-right: 1000px;
}
nav li {
list-style: none;
display: inline-block;
background-color: #000;
height: 40px;
padding-top: 20px;
width: 120px;
}
nav li:hover {
background-color: #e1e1e1;
-webkit-text-stroke: 2px #000;
}
a:link {
color: #fff;
text-decoration: none;
margin-left:25px;
margin-right:25px;
}
a:visited {
color: #fff;
}
a:focus {
color: #fff;
}
a:hover {
}
a:active {
color: #fff;
}
<!------------------------------NAVIGATION SECTION---------------------------------->
<header class="headerContainer">
<nav>
<ul>
<!-- you put the end tag ">" at the beginning of next line to get rid of whitespace between the links -->
<li>About</li
><li>Resume</li
><li>Projects</li
><li>Contact</li>
</ul>
</nav>
</header>
You have a massive amount of padding inside the nav element.
nav {
padding-left: 1000px;
padding-right: 1000px;
}
This doesn't leave very much space for the content to render in.
The li elements are laid out side by side until they run out of space, at which point they word wrap.
If you zoom out, you'll see the fit in one line.
If you look at the live demo in your question, with the very narrow frame, you will see everything squashed to the side.
Don't set a huge padding on the nav element.
My navbar gets chopped off from both sides whenever I resize the window, like in this picture.
Chop chop
I want the navbar to fit the entire screen, even when the window is resized, so that all the links and logo are visible.
I tried making the width 100vw but it has no visible effect.
Here is my HTML and CSS:
<header>
<nav>
<ul>
<li><div class="container"><img src="https://i.ibb.co/SP0TLzQ/broozeb.png" alt="logo" class="logo" border="0"><div class="overlay"><div class="text-test">米</div></div></div></li>
<li>ホーム</li>
<li>米さんについて</li>
<li>日本の文化</li>
<li>学習の情報</li>
<li>English Stuff</li>
</ul>
</nav>
</header>
nav {
background-color: blue;
border-bottom: solid #09316b;
white-space: nowrap;
}
nav ul {
margin: 0;
padding: 0;
display: flex;
justify-content: center;
}
nav ul li {
list-style-type: none;
margin-left: 5px;
}
nav ul li a {
color: white;
background-color: blue;
display: block;
line-height: 3em;
padding: 2em 4em;
text-decoration: none;
font-weight: bold;
}
nav ul li .logo {
background-color: white;
border-radius: 50%;
margin-left: 10px;
}
nav a:hover {
color: red;
background-color: white;
transition: all 0.3s ease 0s;
}
I'm really sorry to ask such basic questions, but this has been troubling me for a few weeks. I very very much appreciate your help!! My webpage can be found here: https://komesannonihongotabi.neocities.org/culture.html
This is being caused by the following CSS line:
nav ul li a {
padding: 2em 4em;
}
Your a tags have a padding on left and right of 4em. Since em is an absolute unit and not a relative one, it will stay the same on any screen size. That is, unless you change the font-size to be smaller but I don't think that would be a good solution here. Just try adding a relative unit like %, or use a breakpoint as follows:
nav ul li a {
padding: 2em 1em;
}
#media screen and (min-width: 900px) {
nav ul li a {
padding: 2em 4em;
}
}
Another, and maybe better solution to your problem would be to use a sidenav with hamburger icon. This may however be a bit complex for beginners.
What if you remove this line white-space: nowrap; from nav {}
Before
nav {
background-color: blue;
border-bottom: solid #09316b;
white-space: nowrap;
}
After:
nav {
background-color: blue;
border-bottom: solid #09316b; }
It starts to resize now. If you want more info about white space -> Click here -<
I don't know how to explain what's happening, but I have a logo image on my site and when you hover over some of it, it works right, but if you hover over some of the other parts it doesn't act like a link. It acts on it randomly so it's not like half of the image is just not a link or something it's like hover over the letter "P" it works hover over "in" it doesn't work hover over "kT" it works again (the logo says "Pink Tangerine").
It's a png with a transparent background so I'm wondering if that has something to so with it, but that doesn't make any sense. I've never ran into a problem like this before, can you guys tell me what's wrong?
HTML5
<div id="main-banner">
<header>
<a id="image" href="index.html">
<img alt="Logo" src="Images/PT-logo.png">
</a>
<nav>
<ul>
<li>Home</li>
<li>About Us</li>
<li>Contact Us</li>
</ul>
</nav>
</header>
</div>
CSS3
I don't imagine most of my CSS should be relevant, but I included all the link description and main header/banner stuff just in case. The one class that deals with the image is at the bottom of the CSS and it only makes it so I don't get a weird border when I hover over the image.
/*Link Info */
a {
text-decoration: none;
color: #DB7093;
}
a:link, a:visited {
text-decoration: none;
color: #FFC0CB;
}
a:hover, a:active {
text-decoration: none;
background-color: #DB7093;
color: #F0F8FF;
}
/*Banner Navigation*/
#main-banner {
width: 100%;
height: 110px;
padding: 25px 0 0;
background-color: #FFC0CB;
}
#main-banner header {
width: 70%;
margin: auto;
}
#main-banner header img {
width: 300px;
height: 100px;
float: left;
margin-left: 10%;
}
#main-banner header nav {
position: relative;
height: 20px;
left: 105px;
top: 50px;
}
#main-banner header nav ul {
list-style: none;
margin: auto;
}
#main-banner header nav ul li {
float: left;
display: inline;
}
#main-banner header nav li a:hover {
background-color: #DB7093;
color: #F0F8FF;
text-shadow: none;
}
#main-banner header nav ul li a {
color: #DB7093;
display: block;
padding: 3px 15px;
height: 12px;
}
/*Image Links*/
a#image {
background-color: transparent;
}
So the issue is the nav tag and the left/top/height css style, because it's container is the same as the image link so there is overlap.
removing the left/top/height fixes it as seen here. It depends on what your ultimate goal is as far as looks go in order to fix it and still have the appearance you want.
#main-banner header nav {
position: relative;
}
EDIT:
I would think using some margin to move the element would get you what you want, just not sure where the placement is supposed to go.
Figured it out thanks to something Charles380 pointed out. I made the image absolute and just the nav relative so I could move it like I wanted. Thanks for your help guys.
So I'm making a site for a school project and I want to know how I can remove the whitespace on the sides of the menu when hovering over the first and last links. Here's the fiddle.
Sorry if my code is not that great, I'm a beginner...
Also I notice that my menu is staying still but everything else is going crazy with positioning when in different resolutions. How do I get it so everything stays in relatively the same position in different resolutions?
Thanks.
Oh and here's the html:
<body>
<h1 class='titles'>Phosphorus 4 Dummies</h1>
<nav>
<ul class='menu'>
<li id='home'><a href='#'>Home</li></a>
<li id='phys'><a href='#'>Phys. Prop.</li></a>
<li id='chem'><a href='#'>Chem. Prop.</li></a>
<li id='facts'><a href='#'>Fun Facts</li></a>
</ul>
</nav>
<p class='info'>Phosphorus is a very reactive element in the Nitrogen Group. It has 15 protons, 16 neutrons, and 5 valence electrons. It is a non-metal so it can be found on the right side of the zig-zag along with other non-metals. Its symbol is a simple P.</p>
<img src='http://images-of-elements.com/red-phosphorus.jpg' id='redPhosphorus' height=300px />
And the css:
body {
margin: 300px;
padding: 0px;
}
.titles {
font-size: 72px;
font-family: Helvetica, sans-serif;
text-align: center;
position: relative;
bottom: 100px;
}
.menu {
position: relative;
width: 760px;
bottom: 330px;
margin: auto;
margin-bottom: 0px;
text-align: center;
border: 2px solid black;
border-radius: 5px;
padding: 0;
font-size: 0;
}
.menu li {
font-size: 36px;
font-family: Helvetica, sans-serif;
display: inline-block;
position: relative;
top: 0;
float: none;
}
.menu li a {
text-decoration: none;
color: black;
padding-right: 11px;
padding-left: 11px;
padding-top: 0px;
padding-bottom: 1px;
border-right: 2px solid black;
margin: 0;
}
.menu li:nth-child(4) a {
border: none;
}
.menu li a:hover {
background-color: orange;
}
There is whitespace because your menu is set at a width: 760px, but your menu list does not fit all the way across, so there is white space.
Also, to make it responsive, you need to use media queries.
UPDATE:
If you know the expected results [height, width, etc] you have to give your <nav> the set width, and the <ul> to a larger width, but add overflow: hidden and height: 41px
Here is a fiddle to experiment with. You did not have an ideal layout, but I've worked with what you gave. If anyone finds a better solution I would be more than happy to observe.
i took a look at your code, you nested the elements wrongly, make sure to close the a tag first
<li><a></li></a>
should be:
<li><a></a></li>
I'm a brand new css programmer. I am trying to create a text search box that fits inside my Navigation bar on the top of every page on my site.
My nav bar has 5 tabs that align to the left of the page. then immediately after the FAQ tab a few pixel space then the text box should fit right in the purple nav bar. The text box, SUBMIT button and ADVANCED link. how to I get this top happen.
When I resize the Firefox 23.01 browser window, the text box moves out of the navigation bar, and drops under the nav bar into the yellow body content area. .
I know this may be a real obvious rookie move but I am very new. Any help would be great. I've been working on this for hours.!
here is the css code.
<style>
html {background: yellow;
width: 100%;}
nav { background: blue;
height: 2.3em;
width: 100%;
}
ul, li {
margin: 0;
padding: 0;
list-style: none;
float: left;
font-size: 1.040em;}
ul {
background: purple;
height: 2em;
width: 100%;}
li a {
display: block;
line-height: 2em;
padding: 0 1.2em;
color: white;
text-decoration: none; }
li a:hover {
background:blue;
height: 2em;
padding-top: .3em;
position: relative;
text-decoration: underline;
top: -.3em;
border-radius: .3em .3em 0 0 }
.current, a:hover.current{
background: blue;
color: #eee;
padding-top: .3em;
position: relative;
top: -.3em;
border-radius: .3em .3em 0 0;
border-bottom: .3em solid blue;
cursor: default;}
.button {
background: blue;
color: white;
padding: 0 1em;
height: 2.4em;
display: table;
border: 1px solid rgb(32, 124, 202);
font-family: Helvetica, Times New Roman;
font-weight: 100;
font-size: .85em;
letter-spacing: .045em;
line-height: 2.4em;
text-align: center;
text-decoration: none;
white-space: nowrap;
cursor: pointer;
border-radius: .325em;
-webkit-box-shadow: inset 0px 1px 3px rgb(162,200,229);
box-shadow: inset 0px 1px 3px rgb(162,200,229);
background: rgb(30,87,153); } </style>
here is the html
<nav >
<ul class="nav">
<li> Home</li>
<li> Sell it</li>
<li> About Us</li>
<li> A List</li>
<li> FAQ</li>
<form>
<li><div id="searchbox">
<input type="text" value="search word here.." style="font-size: 14pt" name="searchbox" size ="36em" onfocus="setValue(this)" onblur="setValue(this)"/></div></li>
<li> <div id="button">
<input type="submit" value="Find!">
<li><div id="signin">
Advanced</li>
</form></div></li>
First, your html is not valid, you shouldn't have form or div declaration between li's.
So I fixed that first.
Then the easiest way to have it work is to drop the float:left and use display:inline-block instead.
if you want to always see everything even when you resize, keep the ul{width:100%}. Otherwise, if you want your nav bar to always be on one line, use ul {width:100%, min-width:1000px} (here, 1000px should be a fixed length determined by how much place you want).
I made demos too.
100% width nav bar
1000px min-width nav bar
I recommend using .css files instead of adding to HTML.
and for real answers. Look Up. what the guy said.