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;
Related
This following inline block li elements are not perfectly centered, I can send the full code if you need it. Do you know a way to have them perfectly centered keeping their position at default?
<div id="abovenavigation">
<ul id="container">
<li><h1 class="Home">HOME</h1></li><!--
--><li><h1 class="About">ABOUT</h1></li><!--
--><li><h1 class="Blog">BLOG</h1></li><!--
-->
</ul><!--ends container-->
</div><!--ends upper navigation-->
<div id="undernavigation">
<ul id="container">
<li><img class="facebook" src="Facebook.png" width="53px" height="50px" onclick="this.src='Facebookhov.png'" onmouseover="this.src='Facebookhov.png'" onmouseout="this.src='Facebook.png'"/></li>
<li><img class="twitter" src="Twitter.png" width="53px" height="50px" onclick="this.src='Twitterhov.png'" onmouseover="this.src='Twitterhov.png'" onmouseout="this.src='Twitter.png'" /></li>
<li><a href:"mailto:gaaren03#gmail.com"><img class="mailto" src="Mailto.png" width="53px" height="50px" title="gaaren03#gmail.com" onclick="this.src='Mailtohov.png'" onmouseover="this.src='Mailtohov.png'" onmouseout="this.src='Mailto.png'" /></a></li>
</ul>
</div><!--ends undernavigation-->
li {
margin:0 20px;
font-size:18px;
display:inline-block;
text-align:center;
}
Just add text-align: center to the ul. :)
codepen: http://codepen.io/anon/pen/xGgpLK
li {
margin:0 20px;
font-size:18px;
display:inline-block;
}
ul {
text-align: center;
}
You could either give the list items a fixed width seeing as you have them set to display: inline-block. Or if you are supporting IE8 and above you could set the ul to display:table with a 100% width and the li to display: table-cell.
Fiddle
ul {
display:table;
width: 100%;
}
li {
padding: 10px;
font-size:18px;
display:table-cell;
text-align:center;
}
Hope this helps.
I am trying to design a web-page where I have a list of bands, and every image will be a small set picture of the band logo(or something). I am setting the style inline and I have tried vertical-align and line-height etc and nothing seems to work.
I am pretty sure I could accomplish this with tables but I have been told many times that is not the proper use of the table.
<div id ="Content">
<ul>
<li><img src="IMG_3117.jpg"width="100" height="100"/>band name</li>
<li><img src="IMG_3117.jpg"width="100" height="100"/>band name</li>
<li><img src="IMG_3117.jpg"width="100" height="100"/>band name</li>
<li><img src="IMG_3117.jpg"width="100" height="100"/>band name</li>
<li><img src="IMG_3117.jpg"width="100" height="100"/>band name</li>
</ul>
</div>
Here is the small amount of CSS I have
#content li{display:inline;}
img {
max-height:100px;
max-width: 100px;
}
#content ul{list-style-type: none;
clear:left;
}
Any help or tips would be greatly appreciated
If I understood what you're trying to do, try this:
#content li {
display: inline-block;
background-color: #eaeaea;
border: 1px solid red;
text-align: center;
max-width: 100px;
white-space: nowrap;
overflow: hidden;
margin: 5px;
}
img {
max-height:100px;
max-width: 100px;
display: block;
}
#content ul{
list-style-type: none;
clear:left;
}
Have a look at it here: http://jsfiddle.net/zDhKQ/
My best guess is that you are looking for this:
#content ul li {
float:left;
}
otherwise you'd have to be a bit more specific on what you are trying to accomplish.
I believe you want the align tag. Something like this:
<li><img src="IMG_3117.jpg" alt="Smiley face" width="42" height="42" align="left">This is some text.
</li>
Will result in something that looks nice.
Hope someone can help me, I am trying to center my gallery (list items) and I feel I have tried everything and nothing is working, if someone could point me in the right direction it would much appreciated.
http://www.jamessuske.com/thornwood/gallery.php
HTML CODE
<div class="gallery">
<ul>
<li><img src="pics/icon1.jpg" border="0" /></li>
<li><img src="pics/icon2.jpg" border="0" /></li>
<li><img src="pics/icon3.jpg" border="0" /></li>
<li><img src="pics/icon4.jpg" border="0" /></li>
<li><img src="pics/icon5.jpg" border="0" /></li>
<li><img src="pics/icon6.jpg" border="0" /></li>
<li><img src="pics/icon7.jpg" border="0" /></li>
<li><img src="pics/icon8.jpg" border="0" /></li>
CSS CODE
.gallery{
width:965px;
float:right;
}
.gallery ul{
list-style-type:none;.gallery li{
float:left;
text-align:center;
}
.gallery ul a {
display:block;
text-decoration: none;
color:#FFF;
padding:5px 0 0 5px;
}
Centering child elements can be done like this:
Apply text-align:center to the parent element
Remove any floats from children and apply or ensure that the display is inline or inline-block
So something like this:
.gallery ul {
text-align:center;
}
.gallery li {
float:none; /* or just make sure you don't float them */
display:inline-block;
}
Should work for you, if your goal is to center the images but have them in rows.
Can't do it with float left:
Example http://jsfiddle.net/HerrSerker/KvPPe/
.gallery{
width:965px;
}
.gallery ul{
list-style-type:none;
text-align:center
}
.gallery li{
display: inline-block;
}
* html .gallery li { /* IE6 */
display: inline;
}
*:first-child + html .gallery li { /* IE7 */
display: inline;
}
.gallery ul a {
display:block;
text-decoration: none;
color:#FFF;
padding:5px 0 0 5px;
}
You are going to continue to have significant problems with all this because you don't have a doctype and you are in 'quirks mode'. Add this to your very first line: <!DOCTYPE html>.
However, by adding the doctype, this may change the whole layout. But that's the cost of not starting off properly.
I have a list of images that need to darken on rollover. I would REALLY love to do this without a bloated css rollover technique as anytime spent out of photoshop makes me very happy. I got part of the way there but something is going wrong. Here it is live:
http://daveywhitney.com/dark/
CODE:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Darken</title>
<style type="text/css">
#topnav {
float:left;
margin:22px 0 0 50px;
list-style:none;
}
.kitchy {
background-color:#000000;
width:112px;
height:203px;
}
#topnav a:hover{
opacity:.6;
}
#topnav li {
display:inline;
}
</style>
</head>
<body>
<ul id="topnav">
<li class="kitchy"><img src="img/kitch.jpg" /></li>
<li><img src="img/deck_small.jpg" /></li>
<li><img src="img/door_small.jpg" /></li>
<li><img src="img/lumber_small.jpg" /></li>
<li><img src="img/tools_small.jpg" /></li>
<li><img src="img/paint_small.jpg" /></li>
</ul>
</body>
</html>
How is this:
JSFiddle
What I changed:
<ul> and <li> to <div>. Added kitchy class to all menu items,
Changed this CSS:
#topnav {
float:left;
margin:22px 0 0 50px;
list-style:none;
}
.kitchy {
background: #000;
width:112px;
height:103px;
float:left;
margin:5px; /*Optional*/
}
#topnav a:hover{
opacity:.5;
}
This might be what you're looking for :
How to darken an image on mouseover?
Dont set the width, height, for the li, and don't set it to inline, instead use float: left.
See: http://jsfiddle.net/x9M2N/1/
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.