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.
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.
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;
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
I'm building a website for a friend and it's quite image heavy, I've sliced up the image into relevant bits but I've deciding to use divs and not make use of tables. So this is what I've got:
The Html
<body>
<div id="container">
<div id="header">
<img src="images/header1280.jpg" />
</div><!--end header-->
<div id="nav">
<ul>
<li><img src="images/mixes.jpg" /></li>
<li><img src="images/events.jpg" /></li>
<li><img src="images/artists.jpg" /></li>
<li><img src="images/christ.jpg" /></li>
<li><img src="images/links.jpg" /></li>
<li><img src="images/contact.jpg" /></li>
<li><img src="images/hos.jpg" /></li>
<li><img src="images/forum.jpg" /></li>
<li><img src="images/news.jpg" /></li>
<li><img src="images/fun.jpg" /></li>
<li><img src="images/shop.jpg" /></li>
<li><img src="images/join.jpg" /></li>
</ul>
</div><!--end nav-->
</div><!--end container-->
</body>
The CSS
html, body, div, img, ul, li, a {
margin: 0;
padding: 0;
border: 0px none;
vertical-align: baseline;
font-size: 100%;
font: inherit;
}
body {
line-height: 1;
background: #000;
}
#container {
margin: 0 auto;
width: 1280px;
}
#header {
width: 100%;
}
#nav ul li a img {
width: 100%
height: auto;
}
#nav ul {
list-style: none;
width: 100%;
}
#nav ul li {
float: left;
}
Now there are 12 image links in all and they span over 2 lines. So imagine You have this:
HEADER
NAV LINE 1
NAV LINE 2
on Chrome a 2px gap is created between the header & the NavLine1 & between Navline1 & Navline2. This can be eliminated by:
li {margin-top: -2px;}
On firefox 3.6 there is instead a 3px gap between the Header & Navline1 & just a 2px gap between NavLine1 % Navline 2.
On IE8 there is instead a 2px gap between the Header and Navline1 but a 3px gap between Navline1 and Navline2.
I'm a little confused as to whats causing this, is it a float bug? But can anyone shed some light on the issue?
Use:
#header img, #nav img {
vertical-align: top
}
img elements are inline with a default vertical-align of baseline. The problematic gap is the space reserved for descenders in letters like g or p. Changing vertical-align from baseline removes the gap.
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/