I can't seem to make my images align side by side, they just keep stacking on top of each other. I have only enough knowledge to fumble my way through with instructions and I'm stuck here.
HTML:
<div class='sticky-bar'>
<div class='sticky-bar-inner'>
<div>
<a href='https://www.facebook.com/salvageinteriors' target='_blank'>
<img src='img.png' />
</a>
</div>
</div>
</div>
I cant seem to get the rest of the code in here, but it just keeps repeating the above.
CSS:
.sticky-bar {
background: none repeat scroll 0 0 #FFFFFF;
bottom: 0;
color: #000000;
font-weight: 700;
left: 10px;
margin: 9px;
opacity: 0.6;
position: fixed;
width: 45px;
z-index: 62;
}
.sticky-bar-inner {
display: inline-block;
margin-left:auto;
padding: 20px 0;
text-align: left;
width:90%;
}
Try this:
Use float:left property. It will use to align div's side by side and when the parent width is reached then , the images will align in next line.
HTML:
<div class='sticky-bar'>
<div class='sticky-bar-inner'>
<div class="inner-divs">
<a href='https://www.facebook.com/salvageinteriors' target='_blank'>
<img src='img.png' />
</a>
</div>
</div>
</div>
CSS:
Set width for .sticky-bar-inner class
.sticky-bar-inner {
padding: 20px 0;
width:500px;
}
and set float:left property to inner image divs.
.inner-divs{
float:left;
}
Related
I need to center images inside of multiple divs. Everything I try breaks.
These are four boxes, alternating red & blue - horizontal. Looking to have them centered in the page and pushed to the top under another div block. Within each block is an image, which is centered to the same % margin on all sides to the relative red or blue box. You can see below I tried both placing the image directly in a redbox/bluebox div or even going one layer deeper with a box just for the image.
4 Box Example - HTML:
<div id="box-container">
<!-- Trying natively within a box -->
<div class="bluebox">
<img src="images/1.jpg">
</div>
<div class="redbox">
<!-- Trying one-layer deeper with its own div -->
<div class="thumbnail">
<img src="images/2.png">
</div>
</div>
<div class="bluebox">
<div class="thumbnail">
<img src="images/3.jpg">
</div>
</div>
<div class="redbox">
<div class="thumbnail">
<img src="images/4.png">
</div>
</div>
CSS:
box-container {
height: 900px;
width: 950px;
padding: 12px;
display: inline-block;
vertical-align: top;
margin-left: auto;
}
.bluebox {
height: 150px;
width: 170px;
background-color: cornflowerblue;
display: inline-block;
border: 3px solid black;
}
.redbox {
height: 150px;
width: 170px;
background-color: lightcoral;
display: inline-block;
border: 3px solid black;
}
.thumbnail img {
display: block;
margin: auto;
height: 130px;
width: 150px;
}
<!-- begin snippet: js hide: false console: true babel: false -->
<div id="box-container">
<!-- Trying natively within a box -->
<div class="bluebox">
<div class="thumbnail">
<img src="http://placehold.it/400x400.jpg">
</div>
</div>
<div class="redbox">
<!-- Trying one-layer deeper with its own div -->
<div class="thumbnail">
<img src="http://placehold.it/400x400.jpg">
</div>
</div>
<div class="bluebox">
<div class="thumbnail">
<img src="http://placehold.it/400x400.jpg">
</div>
</div>
<div class="redbox">
<div class="thumbnail">
<img src="http://placehold.it/400x400.jpg">
</div>
</div>
You need to add padding to the image based on the height of your thumbnail div.
.thumbnail img {
display: block;
height: 130px;
width: 150px;
padding: 10px;
}
.bluebox img, .redbox .thumbnail img, .bluebox .thumbnail img {
display: block;
margin: 0 auto;
}
or
.bluebox, .redbox .thumbnail, .bluebox .thumbnail {
text-align: center;
}
using flexbox
.bluebox, .redbox .thumbnail, .bluebox .thumbnail {
display: flex;
align-items: center;
justify-content: center;
}
I believe I have what you are looking for in this here JSFiddle I just wipped up: https://jsfiddle.net/9yLspwr6/5/
A few key points before the code...
In order to have all the div elements 'float' left you ahve to apply div.className{float:left;} This will ensure divs float left to right and wrap around if they run out of space (much like a paragraph of text). More on CSS float property here: https://www.w3schools.com/css/css_float.asp
Vertical margin does not support 'margin:auto;' like it does for horizontal. Margin can be defined by div.ClassName{margin: 0px 0px 0px 0px;} OR div.className{margin:0px auto;}. The first element this way is for top/bottom margin. The second is for left/right margin. I had to use a little math to vertically center your images, but it gets you what you need. Here is some good documentation on margin: https://www.w3schools.com/cssref/pr_margin.asp
Cleaned up the HTML and removed some CSS no longer needed. I did this to simplify the code while maintaining the solution. If you drop this code into a site you'll want to ensure you only target only the appropriate tags. For example - my code is targeting ALL img tags. You would want to put a class or ID on the IMG tags you want and then ensure that is reflected in the CSS.
I modified the HTML quite a bit. Removed much of the unnecessary elements that were in place for troubleshooting.
<div class="bluebox">
<img src="images/1.jpg">
</div>
<div class="redbox">
<img src="images/2.png">
</div>
<div class="bluebox">
<img src="images/3.jpg">
</div>
<div class="redbox">
<img src="images/4.png">
</div>
Modified CSS below:
.bluebox {
height: 150px;
width: 170px;
background-color: cornflowerblue;
display: inline-block;
border: 3px solid black;
float:left; // new. essentially left justifies the divs.
}
.redbox {
height: 150px;
width: 170px;
background-color: lightcoral;
display: inline-block;
border: 3px solid black;
float:left; // new
}
img { // simplified the target. wrap entire contents of the HTML with a different DIV id to target only images within that div
display: block;
margin: 10px auto; // added 10px. it will then apply 10px margin to top and bottom, auto on left/right
height: 130px;
width: 150px;
}
That should do it. Hope it helps!
I have several chat boxes and other div elements that need to be positioned at the bottom of the screen, aligned to the right.
Problem #1: Elements do not have the same height, and the smaller ones are vertically aligned with the top of the highest element. Fiddle: http://jsfiddle.net/sd69jdxp/
#container { position: fixed; bottom:0; left:0; right:0; }
.chat { border: 1px solid #999; float: right; position: relative; margin: 0 5px; }
Problem #2: Using the approach of
display: inline-block; vertical-align: bottom;
to align divs to the bottom of the page, the links (anchors) over the first (smallest) chat box are not clickable, as the parent container overlaps the links. And it's not possible to set a lower z-index to the chat container than to the content behind, since the chat boxes are children of the chat container and they MUST have a higher z-index than the page content. How can this issue be solved?
Fiddle showing this issue: http://jsfiddle.net/xw689yv8/
Summary
How can I force all divs to be aligned with the bottom right of the screen, without having the chat container (parent div of chat boxes) overlap the content in the page behind the chat boxes, thus making it unclickable?
Use pointer-events: none on the container; elements underneath it will now be clickable.
Arrange the chat boxes inside the fixed container with display: inline-block and vertical-align: bottom.
The chat boxes get pointer-events: auto so they and their children can be clicked.
For IE10 and below, check out this answer to an older question to transfer click events.
Example
See it full screen and select the text input sitting underneath the invisible container.
.under {
position: absolute;
bottom: 200px;
right: 200px;
}
#container {
position: fixed;
bottom: 0;
right: 0;
pointer-events: none;
}
.chat {
border: 1px solid #999;
display: inline-block;
vertical-align: bottom;
position: relative;
margin: 0 5px;
pointer-events: auto;
}
.title {
padding: 0.5em;
background-color: blue;
color: white;
}
.text {
padding: 10px;
}
<div class="under">
<input type="text" value="select me!" />
</div>
<div id="container">
<div class="chat">
<div class="title">This is the chat title</div>
<div class="text">
<p>Text 1</p>
<p>Text 2</p>
<p>Text 3</p>
</div>
<div class="chatbox">
<input type="text" />
</div>
</div>
<div class="chat">
<div class="title">This is the chat title</div>
<div class="text" style="height:250px">
<p>Text 1</p>
<p>Text 2</p>
<p>Text 3</p>
</div>
<div class="chatbox">
<input type="text" />
</div>
</div>
</div>
I am not sure how you want to align them so I put them over each other.
http://jsfiddle.net/ouu94tfv/
#container { position: fixed; bottom:0; left:0; right:0; }
.chat { border: 1px solid #999; right:0; position: absolute; bottom: 0; margin: 0 5px; display:inline-block; float:right;}
.title { padding: 0.5em; background-color: blue; color: white; }
.text { padding: 10px; }
I've set up three divs as containers for my menu buttons. One will align buttons to the left side of the page, the other to the right, and the final one in the middle between both divs. This is what it looks like in CSS.
.actions {
#include clearfix();
.left {
float: left;
margin-left: $outside_margin;
height: $actions_height;
line-height: $actions_height;
}
.middle {
text-align: center;
margin-left: 0px auto;
margin-right: 0px auto;
height: $actions_height;
line-height: $actions_height;
}
.right {
float: right;
margin-right: $outside_margin;
height: $actions_height;
line-height: $actions_height;
}
}
This works quite well. Now I'm trying to write a .button class that will make a simple boxed button with a word of text in it and sometimes also an image. This is what my HTML looks like.
<div class="actions">
<div class="left">
<a class="button" href="#"><span class="text">Left</span><span class="image"></span></a>
</div>
<div class="right">
<a class="button" href="#"><span class="text">Left</span><span class="image"></span></a>
</div>
<div class="middle">
<a class="button" href="#"><span class="text">Left</span><span class="image"></span></a>
</div>
</div>
I have tried a bunch of things. I never got them to work properly with table-cells, display:block will require me to use floats again and I have no idea how to get a proper alignment on the middle one, and inline-blocks - aside from having that pesky space in between them when writing easily readable HTML - required a lot of tweaking to get right and that was only for one button size then.
I guess that I'm at the point where I am just lost because I've tried so many things but nothing worked right. So I thought I'd post my problem here.
What would be the best way to proceed with this project? Thanks in advance.
I created a prototype based on the following HTML:
<div class="actions">
<div class="left">
<a class="button" href="#">
<span class="text">Left</span><span class="image"><img src="http://placehold.it/30x30"></span></a>
</div>
<div class="right">
<a class="button" href="#">
<span class="text">Right</span><span class="image"><img src="http://placehold.it/30x30"></span></a>
</div>
<div class="middle">
<a class="button" href="#">
<span class="text">Middle</span><span class="image"><img src="http://placehold.it/30x30"></span>
</a>
</div>
</div>
and using the following CSS:
.actions {
outline: 1px dotted blue;
height: 30px;
line-height: 30px;
}
.actions a {
}
span.image img {
vertical-align: bottom;
}
span.text {
vertical-align: baseline;
}
.left {
float: left;
margin: 0 20px;
outline: inherit;
}
.middle {
display: block;
text-align: center;
margin-left: 0px auto;
margin-right: 0px auto;
outline: 1px dashed blue;;
overflow: hidden;
}
.right {
float: right;
margin: 0 20px;
outline: inherit;
}
I added some outline's so that we can visualize how far the blocks extend and how margins work and so on.
The left and right <div>'s are floated, nothing unusual and the the middle section is an inflow block with text-align: center and overflow: hidden, which is perhaps optional depending on other design considerations.
I put in some simple 30px by 30px images, but I am not sure what else you might need.
Hopefully this can get you started.
Fiddle Demo
It seems likely that the reason you couldn't get table-cell to "work" is because you didn't realize you needed to vertically align the contents of your cells as well as the cells themselves:
http://tinker.io/619bf/2
.actions {
display: table;
width: 100%;
}
.actions div {
display: table-cell;
border: 1px solid;
vertical-align: middle;
width: 33%
}
.actions div * {
vertical-align: middle;
}
HTML:
<div class="epBtn">
<span class="thumbnail">
<img src="episodes/1.jpg" />
</span>
<span class="play">Episode 1</span>
</div>
What can I do, CSS-wise, to make .thumbnail and .play appear next to each other without using float?
I have modeled what I believe you are trying to accomplish at the address below. It is accomplished by setting the area for the thumbnail (the left in this case) as margin space in the container, then absolutely positioning the thumb to center within the that container. Since the height of the container is generally known (via the thumb) you can then center the relative content vertically using the top css property. Since the container is also position relative the absolutely positioned contents will be absolute to it.
JSFiddle
.epBtn {
/* These are cosmetic except for height, which you should know. */
max-width: 170px;
margin: 10px;
height: 60px;
background-color: #eee;
border: 1px solid #ccc;
position: relative;
font-family: arial;
}
.play {
top: 20px;
margin-left: 65px;
position:relative;
}
.thumbnail {
position: absolute;
top: 5px;
left: 5px;
}
Please let me know if this what you had in mind.
Use inline-block:
<div class="epBtn">
<span class="thumbnail">
<img src="episodes/1.jpg" />
</span>
<span class="play">Episode 1</span>
</div>
CSS:
.thumbnail, .play { display: inline-block; vertical-align: middle; }
I have the following HTML with the div.logo centered in the middle.
What would be the easiest cross browser solution to allow me to put another box contactDetails onto the left or right but retain the centered image?
HTML:
<div id="page-wrap">
<header>
<div id="logo">
<img src="_assets/images/logo.png" width="500" height="518"/>
<h3>New Website Soon</h3>
</div><!--END logo-->
<div id="contactDetails">
<p>Content</p>
</div>
</header>
</div><!--END page-wrap-->
CSS:
*{
padding: 0;
margin: 0;
}
body{
background:url('../images/background.png') repeat;
margin: 0 auto;
}
div.page-wrap,header,div.logo,h1{
font-family: arial;
text-align: center;
margin:0;
}
div.page-wrap,header,div.logo,img{
border-radius: 5px;
}
div.contactDetails{
float: left;
margin: 0;
}
Position the contact box absolutely.
For what it's worth, none of your CSS above will work because you're using a dot to signify the class of the div, rather than a # pound sign to signify ID of the div (div.logo corresponds to <div class="logo">, div#logo corresponds to <div id="logo">)
#page-wrap {
/* parents of absolutely positioned elements must have a position */
position: relative;
}
#contactDetails {
position: absolute;
top: 0;
right: 0;
/* you could use 'left: 0;' instead, to move to the left edge */
width: 300px;
}