I am working with this demo: http://blog.templatemonster.com/demos/coding-a-responsive-lightbox-image-gallery-for-website-portfolios/demo/index.html
From here: http://blog.templatemonster.com/2014/05/20/coding-responsive-lightbox-gallery-portfolios-tutorial/
Is there a way to center the thumbnails? It looks like the right is off by about 25px.
Remove the float, set to inline-block instead.
Give the margin 10px to the left and 10px to the right instead of a flat 20px to the right.
From:
#portfolio li {
display: block;
float: left;
width: 30%;
max-width: 400px;
margin-right: 20px;
margin-bottom: 20px;
}
To:
#portfolio li {
display: inline-block;
float: none;
width: 30%;
max-width: 400px;
margin-right: 10px;
margin-bottom: 20px;
margin-left: 10px;
}
Related
I am trying to properly center a UL. Even though I used display:table and the correct margin: 0 auto... still it doesn't work properly. It doesn't go the center.
What am I doing wrong?
CSS for the UL and the LI
.container {
position: relative;
display:table;
margin-left:auto;
margin-right:auto;
}
.container li {
margin: 30px 30px;
padding: 0;
display: inline;
clear: none;
float: left;
width: 310px;
height: 370px;
position: relative;
list-style: none;
}
Here is the LIVE version. When adjusting the page you will notice that the UL is docked to the left side of the page.
UPDATED
http://codepen.io/mariomez/pen/doJvJz?editors=010
Notes: the problem is almost resolved. The only issue is that the LI components are also center aligned which is not visually good for me. How can I align them to the left and keep the UL centered?
Position the .container with text-align: center;, disable floating the list elements and use display: inline-block; instead of display: inline; for them:
.container {
margin-left: auto;
margin-right: auto;
padding: 0;
text-align: center;
}
.container li {
margin: 30px 30px;
padding: 0;
display: inline-block;
clear: none;
width: 310px;
height: 370px;
position: relative;
list-style: none;
}
Demo: JSFiddle
I have three images. The need to be aligned so they fit on the same line and are centered. I have managed to align the 1st and 3rd image using float: left; and float: right; but I'm struggling to align the center image.
Here's the involved code:
.postprojects {
margin-top: 60px;
padding-left: 35px;
padding-right: 35px;
padding-top: 35px;
background-image:url('image/bgprojects.png');
width: 889px;
height: 300px;
}
.postproject1 {
float: left;
overflow: hidden;
}
.postproject2 {
float: left;
overflow: hidden;
}
.postproject3 {
float: right;
overflow: hidden;
}
Any suggestions?
(P.S. Disregard the weird clipping on the bottom of the site. It's a padding error)
Try this code, may be:
.postproject2 {
float: left;
overflow: hidden;
margin: 73px 10px 0;
}
Fiddle: http://jsfiddle.net/praveenscience/eFK7F/2/
I have text and image inside a div and I want the text to be aligned at the top of the image, not the middle.
Here's how it looks: http://bitly.com/VSSoul
CSS:
.book1 {
width: 100%;
overflow: auto;
}
.book2 {
width: 100%;
overflow: auto;
}
.book1 img {
float: right;
width: 150px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
How do I make the text go to the top of the div, and not center relative of image?
It actually is aligned to the top. The h4 tag has default margins, so setting:
h4 {
margin-top: 0;
}
would do the trick.
.book img {
float: right;
width: 150px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
.book {
margin-bottom: 2em;
overflow: auto;
}
Demo JSFiddle:
http://jsfiddle.net/e636q/
hear you go. add
h4 { margin-top: 0; }
.book1 {margin-bottom: 1.5em;}
the extra margin on .book1 helps with spacing the individual books apart
I seem to be having a problem stacking 3 divs side by side. I've went through a few different pages that gave me codes and tips for how to do this but for some reason it doesn't come out right. Here is the div code I am using in my page, and the info for the divs from the style sheet. Hoping someone can help me out with a fix to what I am doing wrong.
I decided to make another edit because I really didnt give enough info, I have 3 divs side by side but they seem to stick together and one is different, I want them to evenly space to fit flush with the rest of the layout. I have a link to the site so you can see what I have what I have
Also sorry about the mix up with the # missing from the #t2 on the post I accidentally deleted it when making the post its in the code.
<div id="testwrap">
<div id="t1">left</div>
<div id="t3">right</div>
<div id="t2">middle</div>
</div>
#testwrap {
width: 933px;
margin-right: auto;
margin-left: auto;
}
#t1 {
width: 311px;
margin-right: auto;
margin-left: auto;
background-color: #FFF;
height: 220px;
margin-top: 20px;
margin-bottom: 20px;
float: left; width:311px;
padding: 10px;
}
#t2 {
background-color: #FFF;
height: 220px;
width: auto;
padding: 10px;
margin-top: 20px;
margin-right: auto;
margin-bottom: 20px;
margin-left: auto;
}
#t3 {
background-color: #FFF;
height: 220px;
width: 311px;
margin-right: auto;
margin-left: auto;
margin-top: 20px;
margin-bottom: 20px;
width:311px;
float: right; width:311px;
padding: 10px;
}
Here's a clean working code (Your code is so messy). You can copy paste this to your HTML document. Just change the background color of the divs to your liking.
http://jsfiddle.net/K3FJe/
HTML
<div id="testwrap">
<div id="t1">left</div>
<div id="t2">middle</div>
<div id="t3">right</div>
</div>
CSS
#testwrap {
width: 933px;
height: 280px;
margin: 0 auto;
background: black;
}
#t1, #t2, #t3 {
height: 220px;
padding: 10px;
color: #FFF;
float: left;
}
#t1 {
width: 273px;
margin: 20px 6px 20px 12px;
background-color: red;
}
#t2 {
width: 279px;
margin: 20px 6px 20px 6px;
background-color: blue;
}
#t3 {
width: 273px;
margin: 20px 12px 20px 6px;
background-color: green;
}
I updated it with even spaces between them, I think this should work.
Looks like it's because you're floating t1 and t3, and taking them out of the document flow as a result. If you float #t2 as well, and change its width to match the resulting space (instead of auto), it should work.
#t2 {
background-color: #000;
height: 220px;
width: 250px;
padding: 10px;
margin-top: 20px;
margin-right: auto;
margin-bottom: 20px;
margin-left: auto;
float:left;
}
You could use:
#testwrap {
display: table;
[...]
}
#t1, #t2, #t3 {
display : table-cell;
width: 271px;
}
Then remove all the floats.
This way all the column will always have the same height.
I am having an issue with my divs in Internet Explorer. I have a three column layout and it displays correctly in all browsers (chrome, firefox, safari) except for Internet Explorer. In IE, the middle div displays at the bottom of the page instead of between the sidebars.
I've been trying for days to figure out what the issue is. I'm sure it's something to do with my CSS, but I'm not sure.
Any help would be appreciated!
My website is: http://www.onedirectionconnection.com
And here's the CSS:
div#container {
margin-left: auto;
margin-right: auto;
margin-top: 0px;
width: 1125px;
text-align: left;
}
div#header {
clear: both;
height: 500px;
margin-top: 0px;
padding: 0px;
border: 0px
}
div#navi {
text-align: center;
background: #FFFFFF;
clear: both;
height: 60px
margin-left: 13px;
margin-right: 13px;
margin-bottom: 10px;
padding-left: 39px;
border-bottom: 3px solid #FF0000;
border-top: 3px solid #FF0000;
}
div#left {
float: left;
width: 320px;
}
div#right {
float: right;
width: 320px;
}
div#middle {
padding: 0px 325px 5px 325px;
margin: 0px;
}
I just included the parts I think are relevant to the problem, but anyone can feel free to serf the code on my website if necessary!
Increase width of container or decrease some margins.
#middle
{
padding: 0px 0px 5px 0px;
margin: 0px;
overflow: hidden;
width: 485px;
float: left;
}
You need to work on the positioning of the DIVs. The left div is ok. Add middle div after left div and then right div.
Add float: left; width: 400px; margin: 0; to middle. And adjust the widths of middle DIVs child elements.