This has possibly been answered a couple of times before but I just can't find this answer to my specific problem.
I've been working on this: http://jsfiddle.net/LPGGh/
<div class="wrapper">
<div class="project">
<div class="media"></div>
<div class="text">Text</div>
</div>
<div class="project">
<div class="media"></div>
<div class="text">Text</div>
</div>
<div class="project">
<div class="media"></div>
<div class="text">Text</div>
</div>
.media{
width: 300px;
height:200px;
background-color:red;
margin-bottom:1em;
}
.text{
margin-bottom:2em;
}
.project{
display: inline-block;
margin-left: 1em;
margin-right: 1em;
}
.wrapper{
margin-top: 1.65em;
width: 100%;
}
My question is how I get the .media to auto fit in width so the red boxes always uses all of the space available and still keep the margins of course?
Thanks!
I used your fiddle, so the names are a little different in my answer.
Here is a solution by creating a wrapper for the media element:
<div class="project_container_parent">
<div class="project_container_child">
<div class="media_parent"><div class="media"></div></div>
<div class="text">Text</div>
</div>
<div class="project_container_child">
<div class="media_parent"><div class="media"></div></div>
<div class="text">Text</div>
</div>
<div class="project_container_child">
<div class="media_parent"><div class="media"></div></div>
<div class="text">Text</div>
</div>
</div>
And setting the css like this:
.media{
width:100%;
height:200px;
background-color:red;
margin-bottom:1em;
}
.media_parent{
margin-left:1em;
margin-right:1em;
}
.text{
margin-bottom:2em;
}
.project_container_child{
display: inline-block;
width:100%;
}
.project_container_parent{
margin-top: 1.65em;
}
Here is your modified fiddle: http://jsfiddle.net/LPGGh/13/
Related
I want to make a group of buttons or spans that always fit in 6 places of screen (sorry I draw it not really straight). Thanks for your helping first.
.row__main{
max-width:280px;
margin:0 auto;
content:"";
display: block;
clear:both;
height:110px;
padding:0 15px 0 15px;
border: 1px solid black;
}
[class^="col-"]{
float:left;
}
[class^="col-"]:not(:last-child){
margin-right: 60px;
}
.col-1-of-3{
margin-top:23px;
width:calc((100% - 2*#{60px})/3);
}
<div class="row__main">
<div class="row-1">
<div class="col-1-of-3"><button>button</button></div>
<div class="col-1-of-3"><button>button</button></div>
<div class="col-1-of-3"><button>button</button></div>
</div>
<div class="row-1">
<div class="col-1-of-3"><button>button</button></div>
<div class="col-1-of-3"><button>button</button></div>
<div class="col-1-of-3"><button>button</button></div>
</div>
</div>
i have 6 divs I want to zoom the div I am currently active on
My code is:
#section1,#section2,#section3 ,#section4,#section5,#section6{
width:200px;
height:200px;
background:#41aacc;
margin:20px;
cursor:pointer;
}
#wrapper{
width:60%;
margin:0 auto;
display:flex;
align-items:center;
justify-content:center;
flex-wrap:wrap;
}
<div id="wrapper">
<div id="section1">
</div>
<div id="section2">
</div>
<div id="section3">
</div>
<div id="section4">
</div>
<div id="section5">
</div>
<div id="section6">
</div>
</div>
i do not want to use multiple selector like #selector1:hover{transform:scale(1.1)}and so on .How can I achieve it without iterating it for all the divs.
Thanks in advance.
You need to write
div[id^="section"] {...}
this selector will get all of divs with id value starting with "section"
or more specific
#wrapper > div[id^="section"] {...}
Look at snippet
#wrapper > div[id^="section"] {
width: 200px;
height: 200px;
background: #41aacc;
margin: 20px;
cursor: pointer;
transition: all .5s ease;
}
#wrapper{
width: 60%;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
}
#wrapper > div[id^="section"]:hover
{
transform: scale(1.1);
}
<div id="wrapper">
<div id="section1">
</div>
<div id="section2">
</div>
<div id="section3">
</div>
<div id="section4">
</div>
<div id="section5">
</div>
<div id="section6">
</div>
</div>
Use a CSS class. The following applies the transformation to all block elements directly under the "wrapper" div.
CSS:
#wrapper div {
// applies to all divs under wrapper.
width:200px;
height:200px;
background:#41aacc;
margin:20px;
cursor:pointer;
}
#wrapper .hoverable:hover {
// applies only to "hoverable" class items when hovered.
transform:scale(1.1)
}
HTML:
<div id="wrapper">
<div id="section1" class="hoverable"></div>
<div id="section2" class="hoverable"></div>
<div id="section3" class="hoverable"></div>
<div id="section4" class="hoverable"></div>
<div id="section5" class="hoverable"></div>
<div id="section6" class="hoverable"></div>
</div>
I am tired for create responsive grid in css & html,the following image may be easy to figure out. many thanks for help.
Here is my example image:
You might use an excellent framework for it : bootstrap !
They have an excellent grid system :)
You might find everything you need here :
http://getbootstrap.com/css/#grid
Hope that should help :)
Here is my css & Html but I can't write prefect css I am so beginner with css & html.
<div class="wrapper">
<div class="Box1">
Box1
</div>
<div class="container_right">
<div class="Box2">Box2</div>
<div class="Box3">Box 3</div>
<div class="Box4"> Box4</div>
</div>
</div>
CSS:
.wrapper {
overflow:hidden;
width: 1060px;
margin:0 auto;
padding:5px;
}
.wrapper Box1 {
float:left;
margin-right:10px;
width:520px;
padding:5px;
background-color:#808080;
}
.wrapper .container_right {
width:520px;
float:right;
}
.container_right .box2 {
width:100%;
height:200px;
margin:5px;
padding:5px;
background-color:#808080;
}
.container_right .box3 {
width:50%;
height:200px;
padding:5px;
background-color:#808080;
}
.container_right .box4 {
width:50%;
height:200px;
padding:5px;
background-color:#808080;
}
1) Here's how Stack Overflow works: learn, try, fail, then come ask for help here. So you need to show some effort yourself.
2) Anyway, there must be a million ways to build such a layout. Here is a sample with Bootstrap, using images as content. Includes some unfortunate stabbing of the framework, to get rid of the gutter between things.
Fiddle:
https://jsfiddle.net/csy1wypc/1/
HTML:
<div class="container-fluid">
<div class="row">
<div class="col-md-6 col-sm-6 col-xs-6">
<div class="single">
<div class="img-holder">
<img src="http://lorempixel.com/g/900/400/">
</div>
</div>
</div>
<div class="col-md-6 col-sm-6 col-xs-6">
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="double">
<div class="img-holder">
<img src="http://lorempixel.com/g/800/400/">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 col-sm-6 col-xs-6">
<div class="single">
<div class="img-holder">
<img src="http://lorempixel.com/g/600/400/">
</div>
</div>
</div>
<div class="col-md-6 col-sm-6 col-xs-6">
<div class="single">
<div class="img-holder">
<img src="http://lorempixel.com/g/700/400/">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
CSS:
.col-md-6,
.col-md-12,
.col-sm-6,
.col-sm-12,
.col-xs-6,
.col-xs-12 {
padding: 0;
}
.row {
margin: 0;
}
.single,
.double {
position: relative;
width: 100%;
overflow: hidden;
}
.single {
padding-bottom: 100%;
}
.double {
padding-bottom: 50%;
}
.single .img-holder,
.double .img-holder {
position: absolute;
width: 100%;
text-align: center;
}
.single img,
.double img {
position: relative;
max-height: 100%;
left: 100%;
margin-left: -200%;
}
This is my first time trying an overlay. It is somewhat working however, hovering the first image would overlay below.. I tried making the position absolute, but that means that overlay would stay at top.
<div class="galleryContainer">
<div class="row">
<div class="galleryItem">
<img src="http://upload.wikimedia.org/wikipedia/commons/d/da/Gold-jewellery-jewel-henry-designs-terabass.jpg"/>
<div class="imgCaption">
<p>lulz</p>
</div>
</div>
<div class="galleryItem">
<img src="http://3.bp.blogspot.com/_HEjoNp_qRz8/TSsQZNyVFUI/AAAAAAAAJhI/xc7MCnnNYZY/s1600/World%2527s+Most+Funniest+Animals+Photos+%25288%2529.jpg"/>
<div class="imgCaption">
<p>lulz</p>
</div>
</div>
</div>
<div class="row">
<div class="galleryItem">
<img src="http://funny-pics-fun.com/wp-content/uploads/Very-Funny-And-Creative-Ads-Using-Animals-19.jpg"/>
<div class="imgCaption">
<p>lulz</p>
</div>
</div>
<div class="galleryItem">
<img src="http://funny-pics-fun.com/wp-content/uploads/Very-Funny-And-Creative-Ads-Using-Animals-18.jpg"/>
<div class="imgCaption">
<p>yaw</p>
</div>
</div>
</div>
</div>
css:
.row {
margin:2%;
}
.row .galleryItem {
float: left;
padding-right: 5%;
width:300px;
height:350px;
}
.row .galleryItem img {
width:280px;
height:330px;
padding:0;
margin:0;
}
.row .galleryItem .imgCaption {
top: 0px;
width:300px;
height:350px;
background:#FF2400;
opacity:0;
}
.row .galleryItem .imgCaption p {
color:white;
font-weight: 400;
font-size:16px;
text-align: center;
}
.row .galleryItem:hover .imgCaption {
opacity: 0.7;
}
.galleryContainer {
margin: auto;
max-width: 900px;
}
Here is a jsfiddle I made that demonstrates the issue. Any help would be appreciated.
Your problem is that your caption is positioned wrongly. It can be finished by adding float:left; to your img.
Here's a fiddle.
EDIT:
Other changes:
The caption div didn't fade properly so I switched the show up method from, opacity:0 -> opacity: 0.7;, to display:none -> display: block.
I removed the margins and paddings from the <p> element since it appeared displaced.
I am having difficulties in understanding the nature of table and table-cell when used in css.
Consider the following: http://jsfiddle.net/dd7h7/3/.
HTML
<div class="widget">
<div class="button">
<div class="content">
<div class="icon">A</div>
<div class="label">ABC</div>
</div>
</div>
<div class="button">
<div class="content">
<div class="icon">B</div>
<div class="label">ABCDEF</div>
</div>
</div>
<div class="button">
<div class="content">
<div class="icon">C</div>
<div class="label">ABCDEFGHI</div>
</div>
</div>
</div>
CSS
.widget {
display:block;
margin:0px;
padding:0px;
}
.button {
display:inline-block;
border:1px solid red;
margin:0px;
padding:0px;
}
.content {
display:table;
width:100%;
height:100%;
margin:0px;
padding:0px;
border-spacing:0;
border-collapse:collapse;
}
.icon {
display:table-cell;
width:15px;
height:15px;
margin:0px;
padding:0px;
vertical-align:middle;
text-align:center;
}
.label {
display:table-cell;
margin:0px;
padding:0px;
padding-left:3px;
vertical-align:middle;
}
Im trying to make a widget containing some buttons, that are positioned alongside each other. But I don't understand where the space between the red boxes comes from. How do I get rid of it?
Thanks
Inline elements (in your case the .button divs) are sensitive to white space, you can get rid of that space in a variety of ways, including:
Removing the space between the elements
Using HTML comments (<!-- -->) to occupy the gap
Floating the elements left
Example of removing the white space between elements:
<div class="widget">
<div class="button">
<div class="content">
<div class="icon">A</div>
<div class="label">ABC</div>
</div>
</div><div class="button">
<div class="content">
<div class="icon">B</div>
<div class="label">ABCDEF</div>
</div>
</div><div class="button">
<div class="content">
<div class="icon">C</div>
<div class="label">ABCDEFGHI</div>
</div>
</div>
</div>
jsFiddle example
Example of using HTML comments:
<div class="widget">
<div class="button">
<div class="content">
<div class="icon">A</div>
<div class="label">ABC</div>
</div>
</div><!--
--><div class="button">
<div class="content">
<div class="icon">B</div>
<div class="label">ABCDEF</div>
</div>
</div><!--
--><div class="button">
<div class="content">
<div class="icon">C</div>
<div class="label">ABCDEFGHI</div>
</div>
</div>
</div>
jsFiddle example
Example of using float:
.button {
display:inline-block;
border:1px solid red;
margin:0px;
padding:0px;
float:left;
}
jsFiddle example
So in short this really doesn't have to do with display:table-cell but everything to do with display:inline and inline-block.
in this fiddle i removed the space simply using
float:left;
http://jsfiddle.net/dd7h7/5/
inline-block is adding that unnecessary space.
You can do a little trick with font size:
.widget {
display:block;
margin:0px;
padding:0px;
font-size: 0;
}
.button {
display:inline-block;
border:1px solid red;
margin:0px;
padding:0px;
font-size: initial;
}
I think you should add
float:left
to
.button
so CSS should be like this
.button {
display:inline-block;
border:1px solid red;
margin:0px;
padding:0px;
float: left;
}
Hope, that will help. :)