I'm currently learning HTML. I'm trying to add 3 images inside a div, the images need to have the same amount of space between them. How to do this?
Example: https://docs.google.com/drawings/d/1WZdL0WVz-VndX2qP0Ig0S8fZnCGW2k37RHvWXLdgWz0/edit?usp=sharing
The code I currently have:
<style type="text/css">
.maindiv{
position: relative;
width:90%;
height:50%;
border-style:solid;
border-color:Red;
border-width:2px;
}
.imgbott{
height:auto;
width:auto;
max-width:200px;
max-height:200px;
float:left;
text-align: center;
}
</style>
<body>
<div class="maindiv">
<div class="imgbott">
<img src="https://sites.google.com/a/itcld.com.br/portal-de-treinadores/_/rsrc/1377018552616/imagens/images.jpg" alt="">
<a>TESTE</a>
</div>
<div class="imgbott">
<img src="https://sites.google.com/a/itcld.com.br/portal-de-treinadores/_/rsrc/1377018552616/imagens/images.jpg" alt="">
<a>TESTE</a>
</div>
<div class="imgbott">
<img src="https://sites.google.com/a/itcld.com.br/portal-de-treinadores/_/rsrc/1377018552616/imagens/images.jpg" alt="">
<a>TESTE</a>
</div>
</div>
</body>
Code runing: https://script.google.com/a/macros/itcld.com.br/s/AKfycbyjeAIFhKnAXzvXd8lS3S-ND4H0n63i-FBxr-i9Z1omeFmBYtA/exec
Thank you.
Change your css to:
.imgbott{
margin: 0px 10px;
height:auto;
width:auto;
max-width:200px;
max-height:200px;
float:left;
text-align: center;
}
The margin: 0px 10px means 0px margin to the top and bottom, and 10px margin to the left and right. Maybe one would expect 20px margin between the divs then, but there is a effect called "margin collapsing" which prevents that.
is this what you looking for
http://jsfiddle.net/Gfnjz/
.box {
display:table;
table-layout:fixed;
min-width:900px; /* some minimum width is a good idea. */
border-spacing:20px 0; /* note that spacing is also applied to right and left ends */
background-color:#666;
margin:0 auto;
}
.box div {
display:table-cell;
width:33%;
vertical-align:middle;
border:1px solid #bbb;
background-color:#eee;
padding:30px;
}
You can do something like this:
.divName{
width:300px;
display: inline-block;
margin: 0 20px 0 0;
float: left;
}
Then for the last box, apply a .lastBox class as well to force no margin, that way they are perfectly centered, assuming your parent container is centered that is:
.lastBox{
margin-right: 0;
}
The HTML:
<div class="divName">
<p>stuff</p>
</div>
<div class="divName">
<p>stuff</p>
</div>
<div class="divName lastBox">
<p>stuff</p>
</div>
if you only want the same space between the "imgbott" divs, set their margin instead of width attribute.
Your class will looks like
.imgbott{
margin: 0px 10px;
float: left;
text-align: center;
}
.imgbott a
{
display:block;
}
Then doesn't matter what is the width of the images inside, the space will always be 20px between the images.
In additional you can remove the margin-left of the first image using the first-child selector
.imgbott:first-child {
margin-left:0px;
}
You can achieve this result by using inline-blocks and text-align: justify, with adding some fake content before and after the divs to be aligned via pseudo-elements:
.maindiv{
width:90%;
border: 2px solid red;
text-align: justify; /* turns on justification 'magic' */
line-height: 0; /* removes extra space below divs because of extra line */
}
.maindiv:before {
font-size: .1px;
content: 'i'; /* adds nearly invisible fake content in the beginning of the line */
}
.maindiv:after {
font-size: .1px;
content: 'i i'; /* adds nearly invisible fake content in the of the line */
word-spacing: 99in; /* huge word-spacing assures that the 2nd 'i' wraps to the next line making 'justify' work */
background: #ccc;
}
.imgbott{
display: inline-block;
line-height: 1; /* restore the normal line height inside divs */
}
JSFiddle
Optionally, you can prohibit the wrapping of the divs if the container is narrower than the sum of their widths by adding white-space: nowrap to the container and normal to its :after: see edited JSFiddle
This solution may look a bit tricky, but it works for arbitrary number of blocks of arbitrary (possibly different) widths.
Related
I am trying to implement a view in HTML/CSS/Bootstrap where There is an image and some text immediately below the image BUT STRICTLY THE TEXT MUST START AT THE LEFT-SIDE BORDER OF THE IMAGE REGARDLESS OF THE LENGTH OF THE TEXT!
here is the required view:
Problem is If I apply text-alignment:center; to the divs of the bootstrap columns (I am using bootstrap grids here) the picture goes to the center of the div but the alignment of the texts below the pic also come centrally below the picture but as I stated earlier I wanted to align the text to the bottom left no-matter what parent css is!
Here is what I tried(I am including only one column of the bootstrap grid used as others also contain similar information):
<div class="container main-div">
<div class="row">
<div class="col-auto col-md-3 col-xs-6 col-sm-4">
<div class="card-d">
<img src="pics/tea.jpg" alt="tea">
<div class="desc">
<span><h4>Tea | 1 Kg</h4></span>
<p>The price is : 56.0</p>
<button>View</button>
</div>
</div>
</div>
CSS:
.main-div{
width:90%;
background-color:white;
padding:5% 1%;
text-align:center;
margin-left:auto;
}
.col-auto{
position:relative;
border:1px solid blue;
margin:10px auto;
padding-left:6%;
padding-bottom:4%;
}
.col-auto > .desc{
width:100%;
justify-content:left;
font-family:Arial;
text-align:left;
}
.col-auto img{
width:140px;
height:100px;
padding:5px;
display:inline-block;
margin:0 auto;
border: 1px solid #088837;
}
button{
background-color:green;
color:white;
font-size:1em;
border:0.1px;
border-radius:3px;
padding: 5px 10px;
}
After repeated try its the same I am getting:
Here is my Fiddle:
https://jsfiddle.net/vrw7ph13/
The problem is that in your css you have been targeting the direct children, when you write > it takes the direct children, but your .desc is not direct child of col-auto.
check my modified version of jsfidle https://jsfiddle.net/752bkhj9/3/
You have written
.col-auto > .desc
but you don't have direct child .desc in your .col-auto, check your html
And the text-align rule is inheritable, it inherits the styles from parent, you thought you were overwriting this rule using col-auto > .desc, but using > you were targeting non existing element.
Yes, the problem is that there is no .col-auto > .desc in your html. Looking at your html you have .col-auto > .card-d > .desc
So instead of:
.col-auto > .desc {
width: 100%;
position: relative;
left: 0%;
font-family: Arial;
text-align: left;
}
you could try:
.col-auto .desc {
width: 140px; /* this is the width of your '.col-auto img' selector set earlier */
position: relative;
left: 0%;
font-family: Arial;
text-align: left;
margin: auto; /* use this to auto-center the div, but since it is the same width */
/* as your img, it will auto-align itself with the left edge of the img */
}
or if you want to keep parent > child relationship:
.col-auto > .card-d > .desc {
width: 140px; /* this is the width of your '.col-auto img' selector set earlier */
position: relative;
left: 0%;
font-family: Arial;
text-align: left;
margin: auto; /* use this to auto-center the div, but since it is the same width */
/* as your img, it will auto-align itself with the left edge of the img */
}
Creating a page layout using inline-block elements (vertically aligned to the top). The only issue, is that inline-block elements below another set of inline block elements will not fold into open space like floated elements do. It's almost as if it obeys row-like rules. Are there any fixes for this?
Layout example in JSFiddle
CSS
* {
font-family:helvetica;
font-size:18px;
}
.container {
margin:0 auto;
width:90vp;
}
.main_content {
background:red;
display:inline-block;
vertical-align:top;
box-sizing:border-box;
width:76.04%;
min-height:200px;
}
.content_details {
background:blue;
display:inline-block;
vertical-align:top;
box-sizing:border-box;
width:22.39%;
margin-left:01.56%;
min-height:250px;
}
.comments {
background:green;
display:inline-block;
vertical-align:top;
box-sizing:border-box;
width:76.04%;
min-height:150px;
}
HTML
<div class="container">
<div class="main_content">
<h1>Main Content</h1>
</div
><div class="content_details">
<h2>Details</h2>
</div
><div class="comments">
<h2>Comments</h2>
</div>
</div>
Please note I can change the mark-up to create only two inline-block elements (creating two columns), however I would like to know if there is a fix for 3 separate inline-block elements (like in the JSFiddle example), that way I wouldn't need to add extra mark-up.
No there isn't.. Not like you are talking about. You'd have to use:
<div id="col1">
<div id="maincontent"></div>
<div id="comments"></div>
</div>
<div id="details"></div>
Then you would have #col1 and #details as inline-block elements.
The whole point of an inline-block is that it is inline (i.e. on a line with other elements) it isn't acting like a table as you suggested, it's acting like a line of text (as it should) that is wider than it's container and breaking to the next line down.
See here: http://jsfiddle.net/GXmM6/ for a working example
Neither floats nor inline-block will do what you want there, unless you wrap each column in its own div. Short of that, there are JavaScript solutions for doing this, such as Masonry. (It involves a lot of positioning, though.)
Did I get it right that you wanted the .content_details to be a sidebar? Then I just changed it from display: inline-block to float: right to place .comments seamlessly beneath your .main-content. See http://jsfiddle.net/koivo/7UqqF/ for working example. Think that even works just with display: block ...
* {
font-family: helvetica;
color: white; /* added */
font-size: 18px;
}
.container {
margin: 0 auto;
width: 90vp;
}
.main_content {
background: red;
display: inline-block;
vertical-align: top;
box-sizing: border-box;
width: 76.04%;
min-height: 200px;
}
.content_details {
background: blue;
/* display: inline-block; */
float: right; /* added */
vertical-align: top;
box-sizing: border-box;
width: 22.39%;
margin-left: 01.56%;
min-height: 250px;
}
.comments {
background: green;
display: inline-block;
vertical-align: top;
box-sizing: border-box;
width: 76.04%;
min-height: 150px;
}
So, I had help from before, but my stuff was so unorganized, that it was hard for me to understand what someone was doing. It left me off here, I have my vertical alignment, but now my footer for some reason cuts off half way and my social icons stay right beside my powered by even though they're suppose to be aligned/floating to the right...
http://jsfiddle.net/4KDEM/
HTML
<div id="footer">
<div id="footerContent">
<div id="leftFooter">
$POWERED_BY$
</div>
<div id="rightFooter">
<img src="http://zevoxa.com/images/social/facebook.png" />
<img src="http://zevoxa.com/images/social/twitter.png" />
<img src="http://zevoxa.com/images/social/youtube.png" />
<img src="http://zevoxa.com/images/social/deviantart.png" />
</div>
</div>
</div>
CSS
#footer {
background-image:url('/images/footer_bg.png');
bottom repeat-x;
height: 110px;
display:table-cell;
vertical-align: middle;
}
#footerContent {
display:table;
width:100%;
}
#leftFooter {
float: left;
font-family:maven;
font-size: 15px;
padding-left: 20px;
}
#rightFooter {
float: right;
text-align:right;
}
You can fix the layout by adjusting your CSS as follows:
#footer {
background-image:url('http://zevoxa.com/images/footer_bg.png');
bottom repeat-x;
width:100%;
height: 110px;
}
#footerContent {
display:table;
width: inherit; /* You can adjust this depending on other design factors*/
height: inherit;
}
#leftFooter {
display:table-cell;
vertical-align: middle;
font-family:maven;
font-size: 15px;
padding-left: 20px;
border: 2px dotted yellow; /* just to show where the edges are*/
}
#rightFooter {
display:table-cell;
vertical-align: middle;
text-align:right;
border: 2px dotted yellow;
}
See Fiddle: http://jsfiddle.net/audetwebdesign/Pfrj8/
Set #footerContent to display: table and inherit the height from the parent element (#footer). You can set the width in a variety of ways depending on what you need. In my example, I set it to full width, default behavior.
For the two child elements, set their display type to table-cell and vertical-align: middle, you already have text-align set the right way. By default, the two cells will be of equal size, 50% of the parent's width.
No need for floats.
Aside
You may not need the two wrappers, #footer and #footerContent unless you need the second div for some other purpose (extra background image for example). Depends on other factors in your design. (See second example in fiddle.)
If your site isn't a responsive site, you just need to add a width like so: #footer {width:500px;}
This is how i configured the divs in HTML
<div id="wrapper"><div id="content"><div id="details-middle" class="box">
..........content.........
</div></div></div>
And this the css for the div's
#wrapper {
border-radius: 12px;
font-size:13px;
line-height:140%;
width:1008px;
margin:0 auto;
margin-top: 15px;
margin-bottom:15px;
}
#content {
margin-left:20px;
width:1008px;
}
#details-middle
{
float:left;
width:700px;
}
.box {border: 1px solid #CCC;
border-radius:12px;
margin-bottom:7px;
padding:10px 12px;
background-color: #FFF;
}
Everything is showing out of the div's ..
You are floating details-middle, which means non floated elements will not make room for it, unless they themselves are floated, or you clear the float.
My preferred solution is to give the parent overflow: hidden; which will force the parent to make room for its floated children:
#content
{
margin-left:20px;
width:1008px;
overflow: hidden; /* change here */
}
Not exactly sure what you're wanting, there isn't a lot of description in regards to your question, but you need:
$('#details-middle').text();
to gather just the text from that DIV.
If you're not wanting to display children elements of the DIV, then refer to this answer I gave recently - it might be your scenario too:
jQuery pull out text inside div but not in p tag
I need to align multiple lines of text to the middle. Here is a rough guide of the markup I am working with.
<ul>
<li>
<a href='#'>This should be centered.</a>
<li>
</ul>
So as you can see from my image, the "work" link should be centered vertically. I have the width and height set with vertical-align: middle;. I know you need to set the line height for it to actually work but theres the problem. If I set the line height to 72px (the height of the element) then some of the links will stretch down the page due to them taking up two lines.
Is there a way of aligning multiple lines of text to the middle without using line-height?
Use display:table-cell; in your li element.
li {
width:200px;
height:200px;
vertical-align:middle;
display:table-cell;
}
This will give you this effect:
write like this
a{
display:inline-block;
vertical-align:middle;
}
& you can give display:table-cell; to it like this
li {
vertical-align:middle;
display:table-cell;
}
but it's not work in IE7 & below
I came up with this to handle vertically-aligned 100% height/width anchors inside containers:
http://jsfiddle.net/khaustic/KDfN6/
markup:
<div class="links one">
One
</div>
<div class="links two">
Two Two
</div>
css:
* {
/*ie box model forever!*/
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
}
.links {
height: 5.0em;
text-align:center;
outline: 1px solid #333;
float:left;
margin: 0 1.0em;
overflow:hidden;
}
.links.one { width: 8em; }
.links.two { width: 4em; }
.links a {
width:10em;
text-align: center;
display: table-cell;
vertical-align:middle;
height: inherit;
}
You can try to change display to block for hyperlink and use paddings:
li a {display: block; padding: 30px 10px 30px 10px}