I have a portfolio, which I built myself with the help of lots of people and tutorials. I noticed that the actual gallery (currently featuring 8 thumbs) will not center. Especially when scaled to mobile size it looks a bit crook.
I wrapped the gallery in a div called 'imagewrapper' and gave it these properties;
.imagewrapper{
width: 80%;
margin: 0 auto;
height:100%;
}
Does the width mess with the aligning of my div? The full code is here; http://kellyvuijst.nl. Would be great if you could send me in the right direction.
I would just make a few changes to your css:
.imagewrapper{
width: 80%;
margin: 0 auto;
height:100%;
text-align: center; /* add this */
}
.mask {
position:relative;
height:180px;
width:240px;
box-shadow:0 0 1px #000;
border:5px solid #f6f6f6;
overflow:hidden;
float:left; /* delete this */
margin:15px;
display: inline-block; /* add this */
}
Related
I'm trying to develop my first responsive website but I'm having some trouble (of course).
I need an element (sort of a menu) to contain 4 row of elements and each element has an image to the left and some text to the right. Now, the issue I'm having is that I can't seem to be able to make the elements center vertically correctly. I've tried several methods that seem to work for a lot of people so I thought I'ld ask if anybody knows why nothing seems to work for me.
This is what the image CSS looks like:
.tablaBuscadorElementos > img {
position: relative;
width: 20px;
height:20px;
left:0;
right:0;
top:0;
bottom:0;
margin:0 auto;
float:left;}
Here is the fiddle: http://jsfiddle.net/mampy3000/9JZdZ/1/
Appreciate any help!
since your elements are inline-block , you can inject an inline-block pseudo-element 100% height and vertical-align:middle it to img and span : DEMO
basicly (+ below update of your CSS):
.tablaBuscadorElementos:before {
content:'';
height:100%;
display:inline-block;
vertical-align:middle;
}
.tablaBuscadorElementos {
height:22%;/* instead min-height so value can be used for pseudo or direct child */
border: 1px solid black;
padding:0px;
width:100%;
}
.tablaBuscadorElementos > span {
font-size:20px;
width:80%;
vertical-align:middle; /* align to next inline-block element or baseline*/
border:1px solid black;
display:inline-block;/* layout*/
}
.tablaBuscadorElementos > img {
vertical-align:middle; /* align to next inline-block element or baseline*/
width: 20px;
height:20px;
}
.tablaBuscador, .tablaBuscadorElementos{
display:block;
}
.tablaBuscadorElementos:before {
content:'';
height:100%;/* calculated from 22% parent's height */
display:inline-block;/* layout*/
vertical-align:middle;/* align to next inline-block element or baseline*/
}
You can do this by adding this css to .tablaBuscador
position: fixed;
top: 50%;
margin-top:-100px; /* half of height */
More info here: How to center a table of the screen (vertically and horizontally)
The newer option would be to use calc() but you might run into browser support issues.
position: fixed;
top:calc(50% - 100px).
Here are which browsers support calc(): http://caniuse.com/#feat=calc
Your code needs a major tune-up. You are floating elements, using vertical-align on them, positioning them relatively with left, right, top, and bottom set to 0. None of these make any sense. Here's a cleaned up fiddle: http://jsfiddle.net/jL2Gz/.
And here's a tuned up code:
* {
padding: 0;
margin: 0;
}
body {
height:100%;
}
.tablaBuscador {
font-family: "Maven Pro", sans-serif;
height:200px;
width:40%;
}
.tablaBuscador > div {
border: 1px solid black;
padding: 10px 0;
}
.tablaBuscador > div > span {
font-size:20px;
width:80%;
border:1px solid black;
}
.tablaBuscador > div > img {
width: 20px;
height: 20px;
}
.tablaBuscador > div > * {
display: inline-block;
vertical-align: middle;
}
I have couple of rectangle boxes aligning in 1 column straight and each boxes has a content in it. Previously I have this below:
.frmPhases
{
width:800px;
border:solid 2px #CCC;
background: #EEE;
height:auto;
padding:14px;
position:relative;
margin-bottom:50px;
margin-top: 50px;
margin-left: auto;
margin-right: auto;
}
It displays just fine but with 1 flaw, its width isn't consistent. So every new boxes come in, I have to set its width manually base on its content's maximum width. (This requires id, which would make my CSS code REALLY long)
Now I improved the code to this:
.frmPhases
{
width:auto;
display:inline-block;
border:solid 2px #CCC;
background: #EEE;
height:auto;
padding:14px;
position:relative;
margin-bottom:50px;
margin-top: 50p
margin-left: auto;
margin-right: auto;
}
Now it has consistent width, but the rectangle boxes isn't centralized. The only way to centralize it if I would to manually key in the margin-left, which looks fine but on different resolution it does not. Any idea how to centralize it?
I have a white container on top of the bg but it stops even though min-height is set as 100%, heres the CSS for this container and in bottom I have included image of what happens when I scroll to the bottom:
Container where post is:
Yellow Bg:
.home-body {
background-color:#EAC117;
height: 100%;
.home-main-content {
width:800px;
min-height: 100%;
position:absolute;
overflow:hidden;
margin-left:56.5%;
left:-500px;
top:51px;
border-left:1px solid black;
border-right:1px solid black;
background-color:#fff;
background-repeat:repeat-y;
.home-post-echoed-container {
width:400px;
position:absolute;
margin-left:50%;
left:-200px;
top:200px;
overflow:hidden;
}
.home-echoed-posts {
width:600px;
overflow:hidden;
left:-98px;
position:relative;
background-color:#fff;
margin-bottom:-5px;
border-top:1px solid;color:#0a527e;
border-left:1px solid;color:#0a527e;
border-right:1px solid;color:#0a527e;
}
.home-echoed-posts-post {
margin:10px;
color:black;
}
.home-echoed-posts-email {
margin:10px;
color:black;
}
.home-echoed-posts-date {
margin:10px;
color:black;
}
You are doing it wrong.
To center something you should use (instead of absolute positioning):
.foobar{
margin: 0 auto;
width: 800px;
}
As for "why comments are not expanding the container", it is hard to guess without code, but there are two reasonable possibilities: positioning or floats. There nothing i can do about it. But if they are floated, then easies is to have container with following css:
.container{
overflow: hidden;
}
It is a bit counter-intuitive, but works like charm. You can read more about it here.
Update: and read this article too.
Update 2:
Looks like it is the worts case scenario. You are using positioning .. for everything. YOu really need to learn how to use floats.
.home-post-echoed-container {
width: 600px;
margin: 0 auto;
padding-top: 200px; // im guessing what top:200px was doing
overflow:hidden;
}
.home-echoed-posts {
width:600px;
float: left;
background: #fff;
margin-bottom: -5px;
border: 1px solid #0a527e;
border-bottom: 0;
}
Something like this. But I'm really just guessing.
html, body
{
height:100%;
}
Make sure you include that in the top of your CSS script, else setting .home-main-content to min-height:100%; won't work, because to CSS, if undefined elsewhere, 100% is simply the height of the current div.
Also ensure that you have that same property set if your .home-main-content is surrounded by another div.
I know that this has been addressed in many places, but the template I modified was a bit quirky and I believe that I know what is causing the problem. I just don't know what to do to fix it.
The template sets the left and right borders to 200px. I think what it needed to do was make 2 more columns instead of a border that size. I want the partial grey lines on the sides of the page to go all the way down but they don't. I know it's because the content doesn't go all the way down, but for the life of me I can't figure out what to do with this. Should I just start this all over from scratch?
I apologize ahead of time for the page quality it just has random information in it to hold places.
link to page
Site
#container {
width: 950px;
padding:0px;
margin: 0px;
margin-left: auto;
margin-right: auto;
height:100%;
}
#banner {
text-align: right;
background-color: #E39A2D;
padding: 0px;
margin: 0px;
color: #ffffff;
}
/ here is where it goes a little wrong*/
#outer{
border-left: solid 200px #E39A2D;
border-right: solid 200px #E39A2D;
background-color: #ffffff;
height:100%;
}
#inner{margin:0; width:100%; height:100%; }
#left {
width:200px;
float:left;
position:relative;
margin-left:-200px;
margin-right:1px;
border-left:2px solid #564b47;
height:inherit;
}
#right {
width:200px;
float:right;
position:relative;
margin-right:-200px;
margin-left:1px;
border-right:2px solid #564b47;
height:inherit;
}
#content{
position: relative;
margin: 0px;
height:150%;
}
I'm not looking to make it full page length that I know how to do. I'm just looking to extend the lines all the way down the left and right sides.
Thanks ahead of time.
The borders you want to edit are the ones from the #outer div:
#outer{
border-left: solid 200px #564B47;
border-right: solid 200px #564B47;
}
Anyway your code seems a bit weird, using borders for layout is not the right way to go and it will give you problems. Check this out: http://www.barelyfitz.com/screencast/html-training/css/positioning/
Same issue as before (see Sticky Footer, but only sometimes and Sticky Footer, but only sometimes...continued)...
I have a footer that I want to stick to the bottom of the page unless content fills the page, then I want it to get pushed down. I've done this a dozen times with other sites, but I can't get this one to work. Working in Wordpress. I've checked the order of my divs and I've gone over the css...any help is appreciated.
The main css components:
* {
margin: 0;
padding: 0;
}
html, body {
height:100%;
min-height:100%;
}
#wrapper {
background:url("images/shadowborder.png") repeat-y center;
width:100%;
max-width:100%;
min-width:980px;
min-height:100%!important;
margin:0 auto;
margin-bottom:-20px;
position:relative;
overflow:auto;
}
#content {
clear:both;
float:left;
padding:20px 20px 60px 20px;
font-size: 1.6em
}
#spacer {
height: 40px;
clear: both;
}
#footer {
position: relative;
border-top: 1px solid #e5a5fc;
padding:3px!important;
height:20px;
}
The site:
http://www.hcfmissoula.com
The recipe I use is:
height: 100% on html
min-height: 100% and position: relative on body (with height:100% for ie6)
position: absolute and bottom: 0 on the footer div
Maybe be tricky preventing footer from obscuring some text near the bottom though.