I need some advice on this issue i'm having. In the jsfiddle below, I'm trying to create a responsive grid layout. The issue with what i have is, i would like the text to be in the middle of each individual grid. I've tried bumping it using margin-top but instead of the images stacking onto each other while resizing, the images are overlapping each other. The end result desired will be to have the text aligned center onto the image and have no gaps on all sides of the grid when resizing according to various screen resolution.
Link: http://jsfiddle.net/kelvinchow/VaDS9/
<style type="text/css">
#wrapper {
display: block;
width: 100%;
height: auto;
background: green;
}
.box {
display: inline-block;
float: left;
width: 50%;
height: auto;
vertical-align: baseline;
background: red;
}
.box-img img {
width: 100% !important;
height: auto;
}
.box-title {
display: block;
background: grey;
height: 25px;
font-size: 20px;
font-family: helvetica, san serif;
color: blue;
text-align: center;
margin-top: -100px;
}
</style>
<div id="wrapper">
<div class="box">
<div class="box-img">
<img src="http://airinlee.com/wp-content/uploads/2013/06/thumbnail6.png">
</div>
<p class="box-title">howdy</p>
</div>
<div class="box">
<div class="box-img">
<img src="http://airinlee.com/wp-content/uploads/2013/06/thumbnail6.png">
</div>
<p class="box-title">howdy</p>
</div>
<div class="box">
<div class="box-img">
<img src="http://airinlee.com/wp-content/uploads/2013/06/thumbnail6.png">
</div>
<p class="box-title">howdy</p>
</div>
<div class="box">
<div class="box-img">
<img src="http://airinlee.com/wp-content/uploads/2013/06/thumbnail6.png">
</div>
<p class="box-title">howdy</p>
</div>
</div>
You'll get this:
Fiddle here: http://jsbin.com/osazav/1.
With this markup:
<body>
<div id="tl" class="box">
<p class="box-title">howdy</p>
</div>
<div id="tr" class="box">
<p class="box-title">howdy</p>
</div>
<div id="bl" class="box">
<p class="box-title">howdy</p>
</div>
<div id="br" class="box">
<p class="box-title">howdy</p>
</div>
</body>
And this css:
div.box {
background: url('http://airinlee.com/wp-content/uploads/2013/06/thumbnail6.png');
position: absolute;
height: 50%;
width: 50%;
background-size: cover;
background-position: center;
}
div.box p.box-title {
color: red;
background-color: black;
padding: 5px;
position: absolute;
margin: -10px -20px;
top: 50%;
left: 50%;
}
div.box#tl { top: 0%; left: 0%; }
div.box#tr { top: 0%; left: 50%; }
div.box#bl { top: 50%; left: 0%; }
div.box#br { top: 50%; left: 50%; }
Related
So I am trying to make a loop of images that has description overlaying each of it. The overlay would be visible when the picture is hovered. Here is an example of the code.
.container {
height: 100px;
width:100px;
display: inline-block;
}
.picture {
height: 100%;
width:100%
}
.contAlign {
text-align: center;
}
.desc {
position:flex;
bottom: 0;
left: 0;
right: 0;
background-color: black;
width: 100%;
height: 0%;
opacity: 0.5;
transition: .5s ease;
}
.container:hover .desc {
height: 40%;
}
<div class="contAlign">
<div class="container">
<img class="picture" src="https://kbob.github.io/images/sample-3.jpg">
<div class="desc"></div>
</div>
<div class="container">
<img class="picture" src="https://imagej.nih.gov/ij/images/baboon.jpg">
<div class="desc"></div>
</div>
<div class="container">
<img class="picture" src="https://www.visioncritical.com/wp-content/uploads/2014/12/BLG_Andrew-G.-River-Sample_09.13.12.png">
<div class="desc"></div>
</div>
</div>
In this case, the description box goes downwards since I wasnt using position: absolute;. However if I do so, the box wont inherit the pictures size and takes the size of the page. How do I solve this?
FIDDLE
Set the position of container to relative so the description would be absolute in relation to it:
.container {
height: 100px;
width:100px;
display: inline-block;
position:relative;
}
.picture {
height: 100%;
width:100%
}
.contAlign {
text-align: center;
}
.desc {
position:absolute;
bottom: 0;
left: 0;
right: 0;
background-color: black;
width: 100%;
height: 0%;
opacity: 0.5;
transition: .5s ease;
}
.container:hover .desc {
height: 40%;
}
<div class="contAlign">
<div class="container">
<img class="picture" src="https://kbob.github.io/images/sample-3.jpg">
<div class="desc"></div>
</div>
<div class="container">
<img class="picture" src="https://imagej.nih.gov/ij/images/baboon.jpg">
<div class="desc"></div>
</div>
<div class="container">
<img class="picture" src="https://www.visioncritical.com/wp-content/uploads/2014/12/BLG_Andrew-G.-River-Sample_09.13.12.png">
<div class="desc"></div>
</div>
</div>
I hope this helps you out. once you make an element absolute, just make sure to make its parent relative. so that it doesn't float anywhere. Now you can set positions accordingly where you want to make it appear on hover.
.container {
height: 100px;
width:100px;
display: inline-block;
position: relative;
}
.picture {
height: 100%;
width:100%
}
.contAlign {
text-align: center;
}
.desc {
position:absolute;
bottom: 0;
left: 0;
right: 0;
background-color: black;
width: 100%;
height: 0%;
opacity: 0.5;
transition: .5s ease;
}
.container:hover .desc {
height: 40%;
}
<div class="contAlign">
<div class="container">
<img class="picture" src="https://kbob.github.io/images/sample-3.jpg">
<div class="desc"></div>
</div>
<div class="container">
<img class="picture" src="https://imagej.nih.gov/ij/images/baboon.jpg">
<div class="desc"></div>
</div>
<div class="container">
<img class="picture" src="https://www.visioncritical.com/wp-content/uploads/2014/12/BLG_Andrew-G.-River-Sample_09.13.12.png">
<div class="desc"></div>
</div>
</div>
I would like 3 responsive columns in a section where the ".service-icon" are centered in each column. I have an image for the background of the column (dirtcolumn.png but this can be replaced by a full height div... all i want is it to be centered inside the div/column). You can see where the problem occurs on my first website in the first section under the cover ----> MOST RECENT SCREENSHOT - http://aleven.netne.net/CDH/
HTML: (after arranging every markup i could possibly think of which included giving all divs classes col-md-4 col-xs-4 ETC. ETC.)
<section id="services">
<div class="container-fluid">
<div class="row">
<div class="columndirt col-md-4 text-center">
<div class="service-icon">
<div class="icon-daycare">
</div>
</div>
</div>
<div class="columndirt col-md-4 text-center">
<div class="service-icon">
<div class="icon-daycare">
</div>
</div>
</div>
<div class="columndirt col-md-4 text-center">
<div class="service-icon">
<div class="icon-daycare">
</div>
</div>
</div>
</div>
</div>
</section>
CSS:
#services {
background-color: #291501;
/*background-image: url(../images/cdh/newheader/ps/dirtcolumns.png);*/
padding: 0px 0;
padding-bottom: 0px;
background-size: 100% 100%;
background-repeat: no-repeat;
text-align: center center;
position: relative;
min-height: 590px;
display: block;
vertical-align: middle;
position: relative;
}
.columndirt {
float: none;
margin: 0 auto;
background-image: url(../images/cdh/newheader/ps/dirtcolumn.png);
background-size: cover;
background-repeat: no-repeat;
background-size: 70% 100%;
top:0;
bottom:0;
max-height: auto;
max-width: 37%;
min-width: 37%;
background-position: center center;
text-align: center center;
vertical-align: middle;
position: absolute;
}
.service-icon {
float: none;
margin: 0 auto;
margin: 158px;
margin-top: 180px;
border-radius: 100%;
background-color: #6d4827;
background-image: url(../images/cdh/newheader/ps/dots.png);
background-size: 1500px;
display: inline-block;
font-size: 36px;
height: 170px;
line-height: 170px;
width: 170px;
-webkit-transition: background-color 0.2s ease;
transition: background-color 0.2s ease;
vertical-align: middle;
}
.icon-daycare {
vertical-align: middle;
color: #9f6c43;
display: inline-block;
max-width: 100%;
min-height: 50%;
min-width: 100%;
background-image: url(../images/cdh/newheader/ps/daycareicon.png);
background-position: center center;
background-size: contain;
background-repeat: no-repeat;
}
}
Div or section's height always depends on the contents height. But if you want to give it a height, you can use min-height or you can use contents padding. Change the padding and give the height you want.
Here is the HTML
<!DOCTYPE html>
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/custom.css">
</head>
<body>
<section id="services">
<div class="container-fluid">
<div class="row">
<div class="col-md-4">
<div class="columndirt">
<div class="service-icon">
<div class="icon-daycare">
<div class="box text-center"></div>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="columndirt">
<div class="service-icon">
<div class="icon-daycare">
<div class="box text-center"></div>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="columndirt">
<div class="service-icon">
<div class="icon-daycare">
<div class="box text-center"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- BEGIN LINK --><img src="http://files.namecheap.com/graphics/linkus/200x200-4.gif" width="200" height="200" border="0" alt="Namecheap.com"><!-- END LINK -->
<script src="js/jquery-1.12.3.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
CSS
#services {
background-color: #291501;
/*background-image: url(../images/cdh/newheader/ps/dirtcolumns.png);*/
padding: 0px 0;
padding-bottom: 0px;
background-size: 100% 100%;
background-repeat: no-repeat;
text-align: center;
position: relative;
min-height: 590px;
display: block;
vertical-align: middle;
position: relative;
padding-top: 100px;
//height: 500px;
}
.columndirt {
border: 1px solid #fff;
background: #fff;
}
.service-icon {
float: none;
/* margin: 0 auto;
margin: 158px;
margin-top: 180px;*/
border-radius: 100%;
background-color: #6d4827;
background-image: url(../images/cdh/newheader/ps/dots.png);
background-size: 1500px;
display: inline-block;
font-size: 36px;
height: 170px;
line-height: 170px;
width: 170px;
-webkit-transition: background-color 0.2s ease;
transition: background-color 0.2s ease;
vertical-align: middle;
margin: 100px 0;
}
.icon-daycare {
vertical-align: middle;
color: #9f6c43;
display: inline-block;
max-width: 100%;
min-height: 50%;
min-width: 100%;
background-image: url(../images/cdh/newheader/ps/daycareicon.png);
background-position: center center;
background-size: contain;
background-repeat: no-repeat;
}
.box{
height: 30px;
width: 30px;
background: green;
margin: 25px 0 0 70px;
}
I have created a website and i am unable to make the tiled layout responsive. I am a beginner and i have no idea how to make my website responsive. Any help will be appreciated. The css and html is given below. Plus the background is repeating itself 3 times while i have added no repeat property in css.
HTML
<div class="grid">
<div class="tile hvr-reveal " id="tile1">
<div style="text-align: center;">
<div class="img-with-text ">
<p>
<strong>
Contact Us
</strong>
<img src="homepage images/file242.png" alt="sometext" width="64" height="64" id="img0"/>
</p>
</div>
</div>
</div>
<div class="tile hvr-reveal" id="tile2">
<div style="text-align: center;">
<div class="img-with-text">
<p>
<strong>
Products
</strong>
<img src="homepage images/shopping145.png" alt="sometext" width="64" height="64" id="img"/>
</p>
</div>
</div>
</div>
<div class="tile hvr-reveal " id="tile3">
<div style="text-align: center;">
<div class="img-with-text">
<p>
<strong>
Partners
</strong>
<img src="homepage images/celebration19.png" alt="sometext" width="64" height="64" id="img2"/>
</p>
</div>
</div>
</div>
<div class="tile hvr-reveal" id="tile4">
<div style="text-align: center;">
<div class="img-with-text">
<p>
<strong>
About Us
</strong>
<img src="homepage images/men16.png" alt="sometext" width="64" height="64" id="img1"/>
</p>
</div>
</div>
</div>
</div>
CSS
body {
font-family: chewy;
color: #ffffff;
background-image: url(pictures%20for%20web/bg3.jpg) ;
background-position: center center;
background-attachment: fixed;
background-size: cover;
**strong text**background-repeat: no-repeat;
webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
}
.grid {
width: 1140px;
height: 650px;
margin: auto;
}
.tile {
position: absolute;
width: 200px;
left: 451px;
top: 152px;
height: 152px;
box-sizing: border-box;
}
#tile1 {
top: 407px;
left: 754px;
width: 338px;
height: 196px;
margin-left: 2px;
margin-right: 2px;
background-color: #ff3300;
}
#tile2 {
margin-left: 2px;
margin-right: 2px;
top: 100px;
left: 980px;
width: 148px;
height: 154px;
background-color: #008000;
}
#tile3 {
top: 255px;
left: 523px;
width: 200px;
height: 150px;
background-color: #660066 ;
margin-left: 2px;
margin-right: 2px;
}
#tile4 {
top: 255px;
left: 118px;
width: 200px;
height: 150px;
background-color: #990000;
margin-left: 2px;
margin-right: 2px;
}
I'm guessing you want something like this:
<div class="container">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
.container {
position: relative;
top: 0;
left: 0;
width: 90%;
height: auto;
margin-left: 5%;
background-color: #444;
display: block;
text-align: center;
}
.box {
border: solid 1px #000;
height: 200px;
width: 200px;
display: inline-block;
margin: 25px auto;
}
.box:nth-of-type(1){
background: yellow;
}
.box:nth-of-type(2){
background: red;
}
.box:nth-of-type(3){
background: blue;
}
.box:nth-of-type(4){
background: green;
}
Which will keep the boxes aligned and depending on the width of the browser, shifts them.
http://codepen.io/DB1500/pen/JGqaBZ
I'm facing with a strange problem I can't pinpoint. I have a 3 column layout where the first 2 columns have position-fixed, so that only the third column scrolls.
The first element of each column have a margin-top of 20px (for the first and third column it's the H1 element, for the second column it's the div). For some reason, the third column does not line up with the first 2.
<body>
<div class="wrapper">
<div class="container2">
<div class="sidebar">
<h1>Sidebar</h1>
</div>
<div class="menu">
<div class="mediablock">
Media here</div>
</div>
<div class="content">
<h1>Content goes here</h1>
</div>
</div>
</div>
</body>
I have a simple version of it at jsfiddle, demonstrating the problem.
http://jsfiddle.net/59ez7zmy/
I can only assume that the position-fixed has got something to do with it, but I can't seem to figure it out.
When I use the Chrome developer toolbar, there is a (approx) 20px gap (although not defined by any margin) between the top of the page and the divs, and the elements inside the position: fixed columns have a 20px margin relative to the container2 div (as expected). The third column however, has a 20px margin to the top of the screen rather than the .container2 div.
Anyone knows what I'm missing here?
Specify top: 0 for .sidebar and .menu (fiddle).
.sidebar {
position: fixed;
width: 100px;
height: 100%;
color: rgb(97, 68, 50);
text-align: right;
top: 0;
}
.menu {
position: fixed;
width: 250px;
margin-left: 110px;
height: 100%;
color: rgb(97, 68, 50);
top: 0;
}
See the documentation for top
One solution is to add position: fixed on .content class:
h1 {
font-size: 1em;
margin-top: 20px;
}
.sidebar {
position: fixed;
width: 100px;
height: 100%;
color: rgb(97, 68, 50);
text-align: right;
}
.menu {
position: fixed;
width: 250px;
margin-left: 110px;
height: 100%;
color: rgb(97, 68, 50);
}
.content {
margin-left: 370px;
width: 150px;
position: fixed;
}
.mediablock {
margin-top: 20px;
}
.wrapper {
position: relative;
text-align: center;
}
.container2 {
width: 550;
margin-left: auto;
margin-right: auto;
}
<body>
<div class="wrapper">
<div class="container2">
<div class="sidebar">
<h1>Sidebar</h1>
</div>
<div class="menu">
<div class="mediablock">
Media here</div>
</div>
<div class="content">
<h1>Content goes here</h1>
</div>
</div>
</div>
</body>
Also if you don't want to use position: fixed you can use display: inline-block also in .content class:
h1 {
font-size: 1em;
margin-top: 20px;
}
.sidebar {
position: fixed;
width: 100px;
height: 100%;
color: rgb(97, 68, 50);
text-align: right;
}
.menu {
position: fixed;
width: 250px;
margin-left: 110px;
height: 100%;
color: rgb(97, 68, 50);
}
.content {
width: 150px;
position: relative;
display: inline-block;
}
.mediablock {
margin-top: 20px;
}
.wrapper {
position: relative;
text-align: center;
}
.container2 {
width: 550;
margin-left: auto;
margin-right: auto;
}
<body>
<div class="wrapper">
<div class="container2">
<div class="sidebar">
<h1>Sidebar</h1>
</div>
<div class="menu">
<div class="mediablock">Media here</div>
</div>
<div class="content">
<h1>Content goes here</h1>
</div>
</div>
</div>
</body>
Also you have some errors in your css i fix them.
I have this HTML:
<div style="position: relative;">
<img width="100%" src="images/some.jpg">
<div class="header">
<h1>my header</h1>
Some more<br>text
</div>
</div>
This is the CSS:
.header {
color: #000000;
font-size: 52px;
left: 70%;
position: absolute;
text-align: right;
top: 0;
}
h1 {
font-size: 52px;
margin-bottom: 0;
}
Now, when I resize the page, there is 1 problem:
At some point, the text is not above the image to 100% any longer, but why?
Sooo you want it like this?
HTML
<div style="position: relative;">
<div class="header">
<h1>my header</h1>
Some more<br>text
<img width="100%" src="/image/some-image.jpg">
</div>
</div>
CSS
.header {
color: #000000;
font-size: 52px;
left: 70%;
width: 100%;
position: absolute;
text-align: right;
top: 0;
}
h1 {
font-size: 52px;
margin-bottom: 0;
}
DEMO: http://jsfiddle.net/cT7Sy/