So I'm trying to keep an unordered list centered once the website hits a certain media query. I can't get it to stay in the center of it's container if the page is moved around. Here is the corresponding code.
HTML
<div id="centerNav">
<ul id="home-nav">
<li>DUI/DWI Defense</li>
<li>Criminal Defense</li>
<li>Estate Planning</li>
<li style="border: none;"> Agricultural Law</li>
</ul>
</div>
CSS
#media only screen and (max-width: 839px)
{
#centerNav {
margin: 0 auto;
max-width: 840px;
padding: 0;
height:60px;
}
#home-nav li {
float: left;
position: relative;
display: block;
text-align: center;
background: none;
font-size: 20px;
width: 158px;
border-right: 1px solid #fff;
margin-top: 8px;
line-height: 1em;
padding-left: 10px;
}
#home-nav {
list-style:none;
position:relative;
height: 60px;
vertical-align: middle;
z-index: 5;
border-top: 4px double #fff;
border-bottom: 4px double #fff;
border: none;
margin: 0;
background: #7a0426;
}
}
Remove float from li and make it display: inline-block
I think this will solve your issue.
css
#centerNav {
margin: 0 auto;
max-width: 840px;
padding: 0;
height:60px;
text-align:center;
}
#home-nav li {
position: relative;
display: inline-block;
text-align: center;
background: none;
font-size: 20px;
border-right: 1px solid #fff;
line-height: 60px;
padding:0 10px;
}
jsFiddle Code
In your media query you need to make sure float is none because you have float set from previous css
#home-nav li {
float: none;
display: inline-block;
}
The unordered list that contains the li, add text-align: center
#home-nav {
text-align: center;
}
Also your html structure is currently invalid because you have a div as the immediate child of a ul. You can wrap the ul with the div if you need to but it definitely should not be the way it is now
That should solve the issue
Related
I'm new to HTML and CSS.
I'm trying to do a website, and I'm starting by the navbar, but this navbar is not "scalable" for every screen side, when it is on full screen fine but when I minimize it it does not load the part on the right side wich is "About". All of the menus are pointing to the same page and for now that's the objective.
Here's the Code:
body {}
.navbardiv {}
.navbar_ul {
list-style-type: none;
margin: 0;
padding: 0;
/*overflow:hidden;*/
background-color: #333;
border: 5px solid gray;
margin: -8px;
width: auto;
min-width: 600px;
height: 70px;
}
li {
float: left;
padding: 10px 150px;
}
li a {
display: block;
color: white;
text-align: center;
padding: 16px 16px;
text-decoration: none;
}
li a:hover {
background-color: #111;
}
<!--NAVBAR-->
<div class="navbardiv">
<ul class="navbar_ul">
<li class="navbar_li_Contact">Contact</li>
<li class="navbar_li_WebHosting">Webhosting</li>
<li class="navbar_li_About">About</li>
</ul>
</div>
You are setting the padding for li to 150px which is very high, you need to reduce.
But if you want the links to take the whole width and to be evenlly spaced, then you can use flex box and justify-content: space-between;
see code snippet:
body {}
.navbardiv {}
.navbar_ul {
list-style-type: none;
margin: 0;
padding: 0;
/*overflow:hidden;*/
background-color: #333;
border: 5px solid gray;
margin: -8px;
width: auto;
min-width: 600px;
height: 70px;
display: flex;
justify-content: space-between;
}
li {
float: left;
padding: 10px 20px;
}
li a {
display: block;
color: white;
text-align: center;
padding: 16px 16px;
text-decoration: none;
}
li a:hover {
background-color: #111;
}
<!--NAVBAR-->
<div class="navbardiv">
<ul class="navbar_ul">
<li class="navbar_li_Contact">Contact</li>
<li class="navbar_li_WebHosting">Webhosting</li>
<li class="navbar_li_About">About</li>
</ul>
</div>
Your navbar is not responsive because of min-width: 600px; part. What this one will do is that when screen resolution is below 600px in width it will keep your navbar at 600 px. Thus it will align it to leftmost part of the screen which will leave you a cropped right edge.min-width:100%; wont work either since it will start to crop when inner elements of the navbar will not fit.
It is easy to fix this. Just change it to width:100%;.
So, I have a navigation bar and then an <ul> which has some <li>inside. I want it to be vertically aligned with the navigation bar .navbar but it seems it's not working. Do anyone have andy idea what am I doing wrong?
Here is the fiddle and code: http://jsfiddle.net/x7EAg/2/
<style>
.navbar {
width: 100%;
height: 90px;
background: black;
border-radius: 0px !important;
}
.navbar .logo-holder {
background-image: url(../img/logo.png);
width: 75px;
height: 57px;
margin-top: 15px;
}
.navbar .sections {
list-style: none;
margin-left: 70px;
margin-bottom: 50px;
}
.navbar .sections li {
display: inline-block;
padding: 0 25px 0 0;
vertical-align: middle;
}
</style>
<nav class="navbar" role="navigation">
<div class="container">
<div class="logo-holder"></div>
<ul class="sections">
<li>Shop</li>
<li>Team</li>
<li>Events</li>
<li>Experience</li>
<li>Company</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
Thank you!
If I understand what you are trying to achieve. Then you should make the logo absolutely positioned and then aligning the ul can be done with line-height. Full css:
.navbar {
width: 100%;
height: 90px;
line-height:90px;
background: black;
border-radius: 0px !important;
}
.navbar .logo-holder {
position: absolute;
top:0;
left:0;
background-repeat: no-repeat;
background-image: url(../img/logo.png);
width: 75px;
height: 57px;
margin-top: 15px;
}
.navbar .sections {
list-style: none;
margin-left: 70px;
margin-bottom: 50px;
}
.navbar .sections li {
display: inline-block;
padding: 0 25px 0 0;
}
And updated fiddle
i changed the display of your logo-holder to inline-block and then set vertical-align:middle
now it appears next to the logo, and vertically centered.
see here for a fiddle http://jsfiddle.net/gaurav5430/x7EAg/3/
this is the complete css:
.navbar {
width: 100%;
height: 90px;
background: black;
border-radius: 0px !important;
}
.navbar .logo-holder {
background-image: url(../img/logo.png);
width: 75px;
height: 57px;
margin-top: 15px;
display:inline-block;
vertical-align:middle;
}
.navbar .sections {
display:inline-block;
vertical-align:middle;
list-style: none;
margin:0px;
padding:0px;
background:#aaa;
}
.navbar .sections li {
display: inline-block;
padding: 0 25px 0 0;
vertical-align: middle;
}
What I believe is going on is your logo is pushing your ul down. like was mentioned above. You may want to float your logo-holder class left. That would allow you to position your li as you needed. Line-height is a way to do this, you could also use margin, padding, or absolute position for your li as needed. Good luck.
Not sure why there is a space to the right of each li, as you can see here when you mouse over it. Obviously don't want it there and can't figure out how to get rid of it. Any help would be greatly appreciated!
Here is the code:
HTML:
<header>
<div class="nav-container">
<nav class="nav-items" role="navigation">
<ul>
<li>list1</li>
<li>list2</li>
<li>list3</li>
</ul>
</nav>
</div>
</header>
CSS:
header {
position: fixed;
top:0;
background-color:#2C5463;
height:2.3em;
width: 100%;
border-bottom-color: black;
border-bottom-style: solid;
}
header .nav-container {
margin: 0 30px;
height: 100%;
display: block;
padding: 0;
}
.nav-items {
float: left;
margin: 0;
height: 100%;
}
.nav-items ul {
display: inline-block;
margin: 0;
height: 100%;
}
.nav-items ul li {
display: inherit;
border-left: 1px solid #c8c8c8;
height: 100%;
margin: 0;
}
.nav-items ul li a {
display: inherit;
text-decoration: none;
color: #ffffff;
margin: 0 auto;
padding-top: 8px;
white-space: nowrap;
height: 100%; /* Width and height of top-level nav items */
width: 90px;
text-align:center;
vertical-align: middle;
}
.nav-items ul li:hover {
background: #617F8A
}
http://jsfiddle.net/eF83x/
Inline elements are sensitive to white space. Remove the white space and the problem goes away.
Ex:
<ul>
<li>list1</li><li>list2</li><li>list3</li>
</ul>
jsFiddle example
You can remove the spaces between the list items literally, occupy the space with HTML comments (<!-- -->), or float them left.
Just needs to changes on css class here for your solution,
.nav-items ul
{
display: **inline-table**;
margin: 0;
height: 100%;
}
Demostration
What you could also do is make the lis float left and display them as block. This will fix it without messing with the html code.
.nav-items ul li {
float: left;
display: block;
border-left: 1px solid #c8c8c8;
height: 100%;
margin: 0;
}
jsFiddle example
I am a little stuck. I am trying to build a horizontal navigation bar, 1024px across, which will allow for a submenu to display below it. But i want the submenu to also be 1024px in width and to display directly below the navigation bar, vertically aligned.
At the moment the submenu appears but fixes its left side to the left side of the current li that you are hovering over. How can I fix this?
Thanks!
EDIT: So on mouse over it would look something like this: http://eventav.biz/site/example.jpg
Link to what I've done so far -
http://www.eventav.biz/site/
ul.top_menu {
position: relative;
margin: 0;
margin-bottom: -1px;
list-style: none;
display: table;
width: 1024px;
border: 1px solid #111111;
border-bottom: 1px solid #000000;
border-radius: 10px 10px 0px 0px;
}
.top_menu li {
display: block;
position: relative;
border-right: 1px solid #111111;
float: left;
margin: 0px;
display: table-cell;
vertical-align: middle;
}
.top_menu li:first-child {
border-left: 1px solid #111111;
}
.top_menu li a {
display: block;
text-decoration: none;
color: #000000;
text-shadow: 3px 3px 8px #3A3A3A;
padding: 15px;
height: 30px;
display: table-cell;
vertical-align: middle;
margin: 0px;
}
#top_menu_item ul {
display: none;
margin: 0px;
}
#top_menu_item:hover ul {
display: block;
position: fixed;
margin: 0;
}
#top_menu_item:hover li {
width: 1024px;
background-color: #666;
text-align: left;
color: #FFF;
font-size: 12px;
margin: 0px;
}
<ul class="top_menu">
<li id="top_menu_item">HOME</li>
<li id="top_menu_item">OUR SERVICES
<ul><li id="top_menu_item">test</li></ul>
</li>
<li id="top_menu_item">EXAMPLES OF OUR WORK
<ul><li id="top_menu_item">test</li></ul>
</li>
<li id="top_menu_item">CONTACT US</li>
</ul>
Remove the fixed positioning from the child ul, and replace it with position:absolute. Add in left:0px, and then remove position:relative from the parent li.
Working jsFiddle example
#top_menu_item:hover ul {
display: block;
position: fixed; /* Change this to position:absolute; */
left:0px; /* Add this */
}
.top_menu li {
display: block;
position: relative; /* Remove this */
}
1) Remove position: relative; from #top_menu_item
2) Set #top_menu_item ul to position: absolute; left: 0; instead
3) Remove left padding on #top_menu with padding-left: 0;
4) Add:
#top_menu_item:first-child {
margin-left: 40px;
}
Essentially, the problem was that you've been positioning your inner ul tag relative to it's parent li. Instead, the solution above positions the secondary navigation absolutely in relation to the primary navigation, and we use left: 0; to make sure it's completely left-aligned.
It's also against the standard to use an id multiple times on a page. Therefore I'd recommend changing #top_menu_item into .top_menu_item and changing the HTML accordingly.
Let me know if you have any problems!
I have this code:
<div class="container" id="container">
<div class="content" id="content">
<div class='nav'>
<ul>
<li><a href='#'>One</a></li>
<li><a href='#'>Two</a></li>
<li><a href='#'>Three</a></li>
<li><a href='#'>Four</a></li>
<li><a href='#'>Five</a></li>
</ul>
</div>
<div class='innercontent'>
test
</div>
</div>
</div>
With the following CSS:
.content {
background-color: blue;
height: 190px;
padding: 30px;
}
.nav {
background-color: blue;
display: inline-block;
height: 140px;
width: 200px;
margin: 10px;
}
.nav a {
display: block;
text-decoration: none;
color: white;
font-weight: bold;
}
.nav li {
list-style: none;
padding: 0px;
background-color: #369;
padding: 4px 5px;
margin: 8px; 0px;
border-radius: 15px;
text-align: center;
}
.nav ul {
background-color: yellow;
padding: 0px;
margin: 0px;
}
.innercontent {
top: 0px;
background-color: red;
display: inline-block;
height: 20px;
width: 150px;
margin: 10px;
}
Problem: The second div (innercontent)'s top should exactly line up with the first ul's top. What have I done wrong?
Two things and you're done:
add float:left; to .nav
change margin:20px; in .innercontent
so in the end it should look like
.nav {
background-color: blue;
display: inline-block;
height: 140px;
width: 200px;
margin: 10px;
float:left;
}
.innercontent {
top: 0px;
background-color: red;
display: inline-block;
height: 20px;
width: 150px;
margin: 10px;
}
The float is necessary so .innercontent can float around .nav
Try setting the vertical-align:top; for the content. By default the vertical-align is set to baseline.
add float:left for both .nav and .innercontent
I see that you use top property for .innercontent but keep in mind that this properties are used only with positioned elements (relative,absolute,fixed)
I suggest you to read the following two articles to understand how position and float works:
CSS Floats 101 & CSS Positioning 101.
Demo: http://jsfiddle.net/GYPJH/