Given the following code:
HTML:
<div id="nav_bar">
<ul>
<li >HOME</li>
<li>GALLERY</li>
<li>TO DRINK</li>
<li>TO EAT</li>
<li>LOCATION</li>
<li>CONTACT</li>
<li><img class="flag"src="images/italy_flag.png" alt="" /></li>
<li><img class="flag"src="images/uk_flag.png" alt="" /></li>
<li><img class="flag"src="images/spain_flag.png" alt="" /></li>
</ul>
</div>
CSS:
#nav_bar{
width:745px;
height:20px;
background-image:url(../images/bkg_nav_bar_02.png);
margin:5px auto;
-moz-border-radius:.3em;
-webkit-border-radius:.3em;
}
#nav_bar ul{
list-style:none;
text-align:center;
}
#nav_bar a{
text-decoration:none;
font-size:.8em;
margin:0 10px;
font-weight:bold;
color:#FFFF33;
}
#nav_bar li{
display:inline;
margin-bottom:3px;
}
.flag{
position:relative;
float:right;
border:none;
margin-top:4px;
margin-right:10px;
}
The text links are correctly vertical aligned in Safari and Chrome and so are the image links, but in Firefox (3.5) the text links are slightly out of position, a bit towards the bottom. Why?
Sounds like the size of the image is slightly larger than the size of the text.
Try forcing the height of the li in CSS.
Related
The problem I am having is I cannot figure out why when I target all the images within each li tag they do not come out the same size. They all shrink or get larger but do not stay the same size. The first item will be small then they all gradually increase in size with the last item being the largest.
Here is a snapshot pay attention to the crosses:
Here is my html:
<nav class="nav2">
<ul>
<li><img src="images/down_arrow.png" alt="cross">MENU</li>
<li><img src="images/down_arrow.png" alt="cross">LOCATIONS</li>
<li><img src="images/down_arrow.png" alt="cross">CATERING</li>
<li><img src="images/down_arrow.png" alt="cross">GIFT CARDS</li>
<li><img src="images/down_arrow.png" alt="cross">ORDER ONLINE</li>
</ul>
</nav>
And here is my css for that section if you notice I target the images and give them the same width.
/*SECOND NAV*/
.nav2{
font-size:15px;
color:grey;
}
.nav2 ul{
padding:0;
margin-left:600px;
}
.nav2 li{
display:inline-block;
}
.nav2 li a{
text-decoration:none;
color:black;
font-weight:bold;
height:100%;
width:100%
padding:0;
}
.nav2 li img{
margin:0;
padding:0;
vertical-align: middle;
width:30%;
margin-right:-10px;
}
The ultimate goal is to make them look like this:
Your help is greatly appreciated and thank you in advance.
so for the HTML I have
<section id="slider">
<div class="rslides_container">
<ul class="rslides" id="slider1">
<li><img src="images/IMG_5858.jpg" alt="The Process"></li>
<li><img src="images/IMG_5642.jpg" alt="Pieces of a Quilt"></li>
<li><img src="images/IMG_5764.jpg" alt="Here's Looking at You"></li>
<li><img src="images/IMG_5847.jpg" alt="Which Way Do I Go"></li>
<li><img src="images/IMG_5851.jpg" alt="Which Way Do I Go"></li>
<li><img src="images/IMG_5659.jpg" alt="Which Way Do I Go"></li>
<li><img src="images/IMG_5664.jpg" alt="Which Way Do I Go"></li>
</ul>
</div>
</section>
and for the css I have
#slider
{
width:585px;
background-color:#e0e0e0;
padding:11px;
display:block;
float:left;
margin-left:27px;
margin-top:-621px;
}
any idea why in Chrome it is looking fine but in FF the margin-top is slightly higher and in IE it is even higher than FF and Chrome. Any idea how to fix this?
you need to wrap aside element in a div and then give a float:left; and remove positoin:absolute and margin:left from #slider and use same margin properties you have used for aside element.
Check the DEMO.
#slider
{
background-color:#e0e0e0;
float:left;
margin:25px 0 0 40px;
padding:0 12px;
width:30%;
/*margin-left:370px;
margin-top:80px;
position:absolute;*/
}
.wrap{float:left;}/*contain all aside element*/
Instead of
display:block;
float:left;
Try replacing the two lines with
display: inline-block;
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>
I have some code that has the property display-inline. Due to this it displays the list horizontally. Now, I placed an image in my code and it appeared after the list. I wanted the image to be displayed below the list so I placed the list into a div but still its getting displayed next to the list. Here is the code,
<ul id="list-nav">
<li>Home</li>
<li>About Book</li>
<li>Contact</li>
</ul>
</div><!--navigation div ends-->
<!--<div>-->
<img src="Book_Cover-465x540.png" />
CSS of list-nav:
ul#list-nav {
margin:40px;
padding:0;
list-style:none;
width:525px;
}
ul#list-nav li {
display:inline
}
ul#list-nav li a {
text-decoration:none;
padding:5px 0;
width:100px;
background:#000000;
color:#eee;
float:left;
}
ul#list-nav li a {
text-align:center;
border-left:15px solid #fff;
}
Please help out. Thanks
Remove the float from a.
Also: what the heck is border-left:15px solid #fff;, didn't you mean left margin?
try this:
<div>
<ul id="list-nav">
<li>Home</li>
<li>About Book</li>
<li>Contact</li>
</ul>
</div><!--navigation div ends-->
<!--<div>-->
<div style="clear:both"></div>
<img src="Book_Cover-465x540.png" />
I currently have the following code. I am trying to get the second, third, and fourth "li" elements to vertically-align in the middle of the nav bar. The first "li" is an image, and the second-fourth are all text.
Here is a screenshot of it currently.
http://i49.tinypic.com/bfesl3.png
I have tried using "vertical-align:middle" and padding. Note that the second, third and fourth "li" elements appear vertically-aligned in the middle if viewed in Firefox but not in other browsers.
Here is the code I have.
<ul class = "nav">
<li><img src="img/randomtitle.png" style="padding-left:8px;padding-top:8px;"/></li>
<li>about me</li>
<li>films</li>
<li>contact me</li>
<span class="navlinkimages">
<li><img src="social/social_vimeo.png" height = "30px" style = "margin-right:-14px;"/></li>
<li><img src="social/social_youtube.png" height = "30px" style = "margin-right:-14px;"/></li>
<li><img src="social/social_facebook.png" height="30px" style = "margin-right:-14px;"/></li>
<li><img src="social/social_twitter.png" height = "30px" style = "margin-right:-14px;" /></li>
</span>
</ul>`
CSS Code:
.nav {
list-style-type:none;
padding-left:0;
margin-left:0;
font-family:DinC;
padding-bottom:5px;
background-color: #000000;
border-radius:5px;
height:35px;
}
.navlinkimages {
float:right;
padding-top:5px;
}
.nav li {
display:inline;
vertical-align:middle;
}
ul.nav a:hover {
color:#FA4B2A;
}
.nav li img {
vertical-align:middle;
}
ul.nav a{
text-decoration:none;
margin-right:27px;
color:#FFFFFF;
}
Is there a way to make it vertically-aligned on all browsers?
Thanks!
Try this:
.nav li {
display:inline;
vertical-align:middle;
line-height:35px;
}
Give each of those li a's a class middle:
<li>
<a class="middle" href="aboutme.html" style="REDACTED">about me</a>
</li>
Define middle like:
.middle {
line-height: 35px; /** or same as ul height */
}
Inline elements are always vertically centered within their line-height.
DEMO