I was attempting to vertical align some text in a li element, but the only way I could do it was applying display:table-cell; and vertical-align:middle; to the li element.
When I do this, it causes the entire navbar to lose its horizontal center. I have done very much Googling and have not found a solution.
HTML:
<div class="h_logo"><img src="http://dummyimage.com/800x200/000/fff.jpg"></div>
<div class="h_nav">
<nav>
<ul>
<li>Home</li>
<li>Blog</li>
<li>Web Hosting</li>
<li>Web Design</li>
<li>Consulting</li>
<li>Contact</li>
</ul>
</nav>
</div>
CSS:
/** All code is written in chronological form as with the HTML code.
* h. = header.element
* b. = body.element
* sl./sr. = sidebarleft or right.element
**/
.h_logo{
background-repeat:no-repeat;
width:800px;
height:200px;
margin:auto;
position:static;
}
.h_nav{
position:inherit;
margin-top:10px;
}
.h_nav li{
list-style-type:none;
display:table-cell;
vertical-align:middle;
width:150px;
height:35px;
background-color:black;
}
.h_nav a{
text-decoration:none;
color:#FFFFFF;
font-size:20px;
font-family:Arial, Helvetica, sans-serif;
}
JSFiddle
You could add this to your CSS:
nav ul {
display: table;
margin: 0 auto;
padding: 0;
}
Related
I can't seem to figure out how to get my list of links to be fully centered. It seems shifted to the right to me. Sorry for the very simple question, I'm new to this.
http://jsfiddle.net/mzm7szqn/
ul{
text-align:center;
width:450px;
margin:0 auto;
font-family:arial;
list-style-type:none;
}
li{
font-family:osr;
display:inline;
padding: 5px;
}
<ul>
<li>Web Page</li>
<li>After Effects</li>
<li>Premiere</li>
<li>Ableton Live</li>
<li>Blender</li>
<li>Auto CAD</li>
</ul>
your <ul> has a padding of 20px; that it inherited. Try adding this
ul{padding: 0 !important;}
add padding: 0; to the ul style. so it would be:
ul{
text-align:center;
width:450px;
margin:0 auto;
font-family:arial;
padding: 0;
list-style-type:none;
}
I am trying to create a navigation bar on my website for a project. I get the bar just fine, but I can't get it to center on the page. I have tried a variety of different methods. Can someone help me out? I'm using an external style sheet. Here is the code for my main page:
<html>
<head>
<link rel="stylesheet" type="text/css" href="tylerschevy.css">
</head>
<body>
<h1>Tyler Chevrolet</h1>
<ul>
<li>Home</li>
<li>Show Room</li>
<li>Contact Us</li>
<li>About Us</li>
<li>Official Site</li>
</ul>
</body>
</html>
Here is my style sheet:
h1 {text-align:center}
ul{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}
li{
display: inline-block;
float:left;
}
a:link,a:visited{
display:block;
width:120px;
font-weight:bold;
color:black;
background-color:#FFFF33;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
a:hover,a:active{
background-color:#0033FF;
color:white;
}
jsfiddle
Add class="nav" to your <ul>, and then in your stylesheet create a new class:
.nav {
display: table; margin: 0 auto;
}
jsFiddle
Center ul
body {
text-align:center;
}
ul {
margin:0 auto;
display: inline-block;
}
I recommend to put your ul in one wrapper (so you don't touch the body) like this
<div class="wrapper">
<ul>...</ul>
</div>
css
.wrapper{
text-align:center;
}
ul {
margin:0 auto;
display: inline-block;
}
So, I have a navigation bar. I want each link text to grow and bold when on hover. I have achieved this using css, but now whenever teh mouse hovers over the link the text size grows,b ut so does the div to accomodate that text. Any ideas on how to fix this. Here is the jsfiddle link:
jsfiddle
CODE:
<!DOCTYPE html>
<body>
<div id = "navigation">
<ul id = "nav">
<li>Home</li>
<li>Our Team</li>
<li>Gallery</li>
<li>Community</li>
<li>FIRST</li>
</ul>
</div>
</body>
#navigation{
background-color:black;
width:98%;
font-family:calibri;
padding:1%;
margin-left:0px;
position:absolute;
top:0;
left:0;
display:block;
}
#nav{
list-style-type:none;
}
ul#nav li{
float:left;
padding:0 6%;
}
.navlink{
display:block;
background-color:black;
text-decoration:none;
color:white;
}
.navlink:hover{
font-weight:bold;
font-size:14pt;
}
To fix the horizontal pushing:
Instead of using padding to space the items apart, one solution is to use width and text-align: center; so that the items don't push the other items after them.
To fix the vertical pushing:
One solution is to specify a line-height equal to the largest font-size (which would be your :hover size)
#navigation{
background-color:black;
width:98%;
font-family:calibri;
padding:1%;
margin-left:0px;
position:absolute;
top:0;
left:0;
display:block;
}
#nav{
list-style-type:none;
}
ul#nav li{
float:left;
width: 15%;
text-align: center;
}
.navlink{
display:block;
background-color:black;
text-decoration:none;
color:white;
line-height:14pt;
}
.navlink:hover{
font-weight:bold;
font-size:14pt;
}
<!DOCTYPE html>
<html>
<body>
<div id = "navigation">
<ul id = "nav">
<li>Home</li>
<li>Our Team</li>
<li>Gallery</li>
<li>Community</li>
<li>FIRST</li>
</ul>
</div>
</body>
</html>
Add a max-height: 30px; to #navigation.
In general, if you are looking for something that transform shape/size aesthetically, it's easier to work with min/max width in pixels, rather then %.
I'm a bit frustrated. I made a menu inline and blocked and centered it, but it's still a little to the right. I could adjust it with margin, but I think there's a better way to do it. Thank you for your help, I really appreciate it.
Here's the HTML:
<body>
<div id="home">
<div id="header">
<h1>Josh Lamstein</h1>
</div>
<div id="book">
<div id="topbar">
<ul id="menu">
<li>About</li>
|
<li>Stories</li>
|
<li>Blog</li>
|
<li>Resume</li>
</ul>
</div>
And here's the CSS:
#home{
width:900px;
height:480px;
margin:0 auto;
}
#book{
width:100%;
height:50%;
margin:0 auto;
background-color:;
text-align:center;
}
#topbar{
width:100%;
height:20%;
background-color:blue;
display:inline-block;
list-style:none;
list-style-type:none;
text-align:center;
margin:auto;
}
#menu{
list-style-type:none;
background-color:;
display:block;
display:inline;
font-family:"helvetica neue", helvetica, sans-sarif;
font-variant:small-caps;
font-size:1em;
letter-spacing:.5em;
margin:auto;
}
#menu li {
display:inline;
}
That's because browsers apply a default padding-left property to HTML list elements such as <ul> (Google Chrome set -webkit-padding-start: 40px;).
You could reset the padding property by:
#menu {
/* other CSS declaration here ... */
padding: 0; /* <-- Reset the default padding of user agent stylesheet */
}
Here is the JSBin Demo.
Im working on responsive code just now and for some reason i cant get 2 lists to display in the center of the div that's 100% width for mobile view. Is there something that im missing out in the css code below that might be causing this to not to display centered?
both lists have classes of .social-media and .top-nav
*** HTML ******
<div id="gezzamondo">
<div class="header">
<img class="logo" src="images/gezzamondo-logo.jpg" alt="Web designer Glasgow | Gezzamondo" title="Web designer Glasgow | Gezzamondo" />
<ul class="top-nav">
<li>About</li>
<li>Work</li>
<li>Contact</li>
</ul>
<ul class="social-media">
<li><img src="images/twitter-social.jpg" alt="Gezzamondo on Twitter" title-"Gezzamondo on Twitter"/></li>
<li><img src="images/behance-social.jpg" alt="Gezzamondo on Behance" title="Gezzamondo on Behance"/></li>
<li class="last"><img src="images/dribbble-social.jpg" alt="Gezzamondo on Dribbble" title="Gezzamondo on Dribbble"/></li>
</ul>
</div><!-- close header -->
</div><!-- close gezzamondo -->
** CSS ****
body {
background-color:#C09;
font-family: 'Ubuntu', sans-serif;
margin:0;
padding:0;
}
img{
max-width:100%:
}
#gezzamondo{
width:100%;
margin:0 auto;
}
.header{
background-color:#FFF;
height:215px;
width:100%;
text-align:center;
}
#gezzamondo .logo{
width:183px;
height:83px;
margin:0 auto;
margin-top:20px;
}
#gezzamondo .top-nav{
list-style: none;
font-size:20px;
font-weight:300;
margin:0 auto;
}
#gezzamondo ul.top-nav li{
float:left;
margin-right:30px;
}
#gezzamondo ul.top-nav li a{
text-decoration:none;
color:#333333;
}
#gezzamondo .social-media{
position: absolute;
list-style: none;
width:162px;
margin:0 auto;
background-color:#06F;
}
#gezzamondo .social-media li img{
height:44px;
width:44px;
}
#gezzamondo .social-media li{
float:left;
margin-right:15px;
}
#gezzamondo .social-media li.last{
float:left;
margin-right:0px;
}
#gezzamondo ul.top-nav li a:hover{
border-bottom:7px #FF0099 solid;
color:#333333;
}
you are setting the position to absolute in #gezzamondo .social-media, just remove the position and it should center.
I've used the code you supplied, it looks a mess to in jsfiddle (example code is not complete etc). I think this should do it for you, or at least get you closer. What I did was basically wrap the social ul in two divs. center-social spans the full width and center-s trys to provide an idea of a width so the uls can be centered. Try it out on your actual page and it should display correctly. It's only applied on the social ul in the example.
<div id="center-social">
<div id="center-s">
<ul class="social-media">
<li><img src="images/twitter-social.jpg" alt="Gezzamondo on Twitter" title-"Gezzamondo on Twitter"/></li>
<li><img src="images/behance-social.jpg" alt="Gezzamondo on Behance" title="Gezzamondo on Behance"/></li>
<li class="last"><img src="images/dribbble-social.jpg" alt="Gezzamondo on Dribbble" title="Gezzamondo on Dribbble"/></li>
</ul>
</div>
</div>