My website has an image on the left which scales based upon browser size. To the right is some text.
The problem I have is the div on the right will drop to underneath the image on the left when the browser is made smaller, and only when the image is now the only item on the screen will it start to shrink
https://jsfiddle.net/0gyhrve2/
What I'm trying to achieve is that when you change the width of the page, the 2 divs will remain side by side, but the image on the left will shrink instead of the text dropping underneath.
My effort
<div class="outer">
<div class="img">Words</div>
<div class="other">More words</div>
</div>
CSS
.img {
float: left;
background-image: url("http://bootstrapbay.com/blog/wp-content/uploads/2014/05/yellow-taxi_vvvjao.png");
background-repeat: no-repeat;
background-size: 100%;
width: 100%;
height: 349px;
font-weight: bold;
text-shadow: 1px 1px 2px #000;
max-width: 300px;
}
.other{}
Is this what are you after: https://jsfiddle.net/0gyhrve2/3/ ?
CSS:
.img {
background-image: url("http://bootstrapbay.com/blog/wp-content/uploads/2014/05/yellow-taxi_vvvjao.png");
background-repeat: no-repeat;
background-size: 100%;
width: 100%;
height: 349px;
font-weight: bold;
text-shadow: 1px 1px 2px #000;
max-width: 300px;
}
.imgContainer {
float: left;
width: 75%;
}
.other {
float: left;
width: 25%;
}
HTML:
<div class="outer">
<div class="imgContainer"><div class="img">Words</div></div>
<div class="other">More words</div>
</div>
Well. I would just add these lines of code:
CSS
.img,
.other { display: inline-block; }
.outer { white-space: nowrap; }
Example at jsfiddle
Related
I have two elements that I want to place next to each other - one is a logo, the other is an "overflow" menu that will display a dropdown when clicked.
I want to have them scale so that the logo is at most 400px wide, and the menu button is always 1.5em wide and tall. The logo should stay vertically center aligned with the menu button, and the button should always be at the far right of the parent.
Tried using flexbox but I'm no CSS genius, I can't make it work. (btw, will we ever see CSS being more like the Android XML layout system? It'd be a breeze to use a LinearLayout with some gravity and weight to do something like this. With CSS it seems you always have to resort to hacks and hard-to-read solutions at some point)
So this is what it would look like when the logo is at it's maximum 400px width:
And here is what it would look like on a phone, where the logo needs to shrink to make room for the menu button:
Here's a solution using flexbox.
.header {
display: flex;
flex-direction: flex-end;
justify-content: space-between;
}
.logo {
background-image: url(http://placehold.it/400x50);
background-position: center;
background-repeat: no-repeat;
background-size: contain;
height: 50px;
max-width: 400px;
width: 100%;
}
.menu-toggle {
background-color: orange;
flex-shrink: 0;
height: 50px;
margin-left: 10px;
width: 50px;
}
<div class="header">
<div class="logo"></div>
<div class="menu-toggle"></div>
</div>
An easy way to do it is here.
.header{
margin:0px !important;
padding: 0px !important;
display: table;
width: 100%;
height: 1.5em;
overflow-y: hidden;
box-shadow: 0 1mm #aaa 5px;
vertical-align: middle !important;
position: relative;
}
#img-holder{
display: table-cell;
vertical-align: middle;
height : 100%;
background-color : blue;
max-width : 400px;
min-width : 250px;
padding: 0px !important;
}
#img {
display: table-cell;
max-width: 350px;
min-width: 150px;
height: 0.75em!important;
vertical-align: middle;
background-color: pink;
}
#menu-btn{
display: block;
margin: auto;
float: right;
height: 1.5em;
width: 1.5em;
background-color: orange;
border:none;
margin: 0px !important;
padding: none;
}
<div class="header">
<div id="img-holder"><span id="img"> Your Img</span></div>
<a id="menu-btn"></a>
</div>
I used line-height and vertical-align with calc.
html:
<div class="row">
<div class="menu-button"></div>
<div class="logo">
<img src="http://placehold.it/400x70">
</div>
</div>
css:
.menu-button {
background-color: #ffa200;
float: right;
height: 70px;
width: 70px;
}
img {
display: inline-block;
max-width: 100%;
vertical-align: middle;
}
.logo {
float: left;
height: 70px;
line-height: 70px;
max-width: calc(100% - 80px);
}
Demo: https://jsfiddle.net/sabeti05/1yg32uqo/
I'm trying to create an simple div that will contain images which can have different sizes and scales.
The image should not be stretched or cropped and must be centered vertically and horizontally.
Currently I'm stuck with this: JSFiddle
.circleImage {
height: 100px; /* equals max image height */
width: 100px;
white-space: nowrap;
text-align: center;
line-height: 100px;
border-radius: 50px;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
overflow: hidden;
border: solid 1px grey;
}
.circleImage img{
vertical-align: middle;
max-height: 100%;
max-width: 100%;
}
There are those tiny spaces at the top of the second and third image. Any ideas how I can get rid of them?
http://jsfiddle.net/k7fpz8be/
<div class="circleImage">
<span class="helper"></span><img src="https://placehold.it/350x150" alt"logo" title="landscape" />
</div>
<br />
<div class="circleImage">
<span class="helper"></span><img src="https://placehold.it/350x350" alt"logo" title="square" />
</div>
<br />
<div class="circleImage">
<span class="helper"></span><img src="https://placehold.it/150x350" alt"logo" title="portrait" />
</div>
.circleImage {
height: 100px; /* equals max image height */
width: 100px;
border: 1px solid grey;
white-space: nowrap;
border-radius:50px;
text-align: center;
overflow:hidden;
}
.helper {
display: inline-block;
height: 100%;
vertical-align: middle;
}
.circleImage img {
vertical-align: middle;
max-height: 100%;
max-width: 100%;
}
This should works
Set the image as div background as below,
<div class="circleImage" style="background: url('https://placehold.it/350x350'); background-size: cover;">
Now the image is perfectly fit within the div.
Increase the width and height on .circleImage img to 105%.
http://jsfiddle.net/qLfxb3nh/2/
I am creating a table and I am having issues with a picture I am trying to add into one of the <td> fields. It's an icon I have and I want it to display for every record that shows up. The picture's actual size is 64px by 64px. I am trying to get it to be at 36x36, so I set my width and height to that, but it is not taking that and it cutting off the sides to it. Another issue with this table is that I have the index_announcements_wrap set to 100%, but when I try to add the <td>'s the width attribute, it messes up the picture even more, and when I add more than 40% to the message the table doesn't expand to the right.
I created a fiddle to show everything and make it easier for everyone to see what I am doing. I want the table's columns to be 100% of the container and for it to stretch the whole width under the red bar.
https://jsfiddle.net/9w5jsd06/
You need to account for the background size, currently it's set to cover so the image covers the space of the containers, instead use contain to display it AS IS and use no-repeat to avoid the image from repeating.
Change:
background-size: cover;
To:
background-size: contain;
background-repeat: no-repeat;
Here is how I would do it so it's also responsive:
.wrapper {
border: solid 1px #C0C0C0;
border-radius: 8px;
padding: 10px;
min-height: 80px;
text-align: center;
box-sizing: content-box;
}
header {
border: solid 1px #800000;
border-radius: 8px;
padding: 10px;
background: #800000;
color: white;
}
.warning_image {
width: 36px;
height: 36px;
}
.col-3 {
display: inline;
float: left;
width: 32%;
}
#media (max-width: 640px) {
.col-3 {
width: 100%;
display: block;
}
.wrapper {
min-height: 170px;
}
}
<div class="wrapper">
<header>
League Announcements:
</header>
<section>
<div class="col-3">
<img class="warning_image" src="http://png-2.findicons.com/files/icons/1609/ose_png/256/warning.png" alt="">
</div>
<div class="col-3">
<p>FROM: <?php echo date('Y-m-d'); ?></p>
</div>
<div class="col-3">
<p>Work for me!</p>
</div>
</section>
</div>
set display: block for your .index_announcement_pic class
fiddle here
.index_announcement_pic {
background: url("http://png-2.findicons.com/files/icons/1609/ose_png/256/warning.png") no-repeat;
width: 36px;
height: 36px;
background-size: contain;
background-position: center;
padding: 8px;
position: absolute;
replace this with your .index_announcement_pic in css it will work fine
if you want to display your picture 36*36 then you have to do like this
http://png-2.findicons.com/files/icons/1609/ose_png/256/warning.png
instead of
.index_announcement_pic {
background-image: url("http://png-2.findicons.com/files/icons/1609/ose_png/256/warning.png");
width: 36px;
height: 36px;
background-size: cover;
background-position: center;
padding: 8px;
/*position: absolute;*/
/*margin-right: 10%;
margin-left: 10%;*/
}
<td class="index_announcement_pic"></td>
do this
.index_announcement_pic {
width: 36px;
height: 36px;
padding: 8px;
}
<td >
<img src="http://png-2.findicons.com/files/icons/1609/ose_png/256/warning.png" class="index_announcement_pic">
</td>
I have a three column layoyut - left, middle and right.
<div id="content-area" class="clearfix">
<div id="content-left"><img src="fileadmin/billeder/logo.jpg" width="180" height="35" alt=""></div>
<div id="content-middle"><f:format.html>{content_middle}</f:format.html></div>
<div id="content-right">
<f:format.raw>{navigator}</f:format.raw>
<f:format.raw>{content_right}</f:format.raw>
</div>
</div>
with this CSS
#all-wrapper {
width: 960px;
margin: 0 auto;
}
#content-area {
padding: 10px 0;
margin: 5px auto;
}
#content-left {
float: left;
width: 180px;
min-height: 400px;
}
#content-middle {
width: 600px;
text-align: left;
padding: 0 10px;
line-height: 20px;
}
#content-right {
float: right;
min-width: 180px;
min-height: 200px;
text-align: left;
}
Left is 180px, middle is 600px and right is 180px, making it a 960px layout, like this.
http://jsfiddle.net/kxuW6/
For the most part, this works as intendend, but I want the middle column to have a somewhat flexible width according to the content in the right column.
It I put a image in the right column that have a width of 360px, the middle column will be 420px wide.
My problem is that an image with a width more than 180px, fx. 360px, will break the floating of the columns, as per this fiddle
http://jsfiddle.net/5hNy5/
I want it to it to be like this fiddle, but without the fixed width in the middle column.
http://jsfiddle.net/Eqwat/
Use display: table-cell instead of floats...
If you are supporting the more mordern browsers, you can try:
#content-area {
width: 960px;
padding: 10px 0;
margin: 5px auto;
display: table;
border: 1px dashed blue;
}
#content-left {
display: table-cell;
border: 1px dotted blue;
vertical-align: top;
width: 180px;
height: 200px;
}
#content-middle {
display: table-cell;
border: 1px dotted blue;
vertical-align: top;
text-align: left;
padding: 0 10px;
line-height: 20px;
}
#content-middle p {
margin-top: 10px;
}
#content-right {
display: table-cell;
border: 1px dotted blue;
vertical-align: top;
width: 180px;
height: 200px;
text-align: left;
}
The width value for a table-cell acts like a mininum value, so the left and right columns will expand if you insert an image into eithe one and the middle column will adjust to take up the remaining width.
See demo at: http://jsfiddle.net/audetwebdesign/V7YNF/
The shortest form that should solve the above:
HTML:
<div class="area">
<div class="side"></div>
<div>Some content here</div>
<div class="side"></div>
</div>
CSS:
<!-- language: CSS -->
.area {
width: 100%;
display: table;
}
.area > *{
display:table-cell;
}
.side {
width: 100px;
background-color:gray;
}
See this fiddle.
If you are fine with shuffling the source order of the columns, you can relegate #content-middle to the bottom and give it display: block and overflow: hidden.
Markup:
<div id='all-wrapper'>
<div id="content-area" class="clearfix">
<div id="content-left"></div>
<div id="content-right"></div>
<div id="content-middle"></div>
</div>
</div>
CSS
#all-wrapper {
width: 960px;
margin: 0 auto;
}
#content-left {
float: left;
width: 180px;
min-height: 400px;
}
#content-middle {
display: block;
overflow: hidden;
}
#content-right {
float: right;
min-width: 180px;
min-height: 200px;
}
Now the middle-column will take up the available space when the right-column's width changes.
Demo: http://dabblet.com/gist/7200659
Required reading: http://www.stubbornella.org/content/2009/07/23/overflow-a-secret-benefit/
The html is like:-
<div class="mainWrapper">
<div id="left"></div>
<div id="right"></div>
</div>
Css:-
.mainWrapper
{
background-color: #FFF;
overflow: auto;
min-height: 500px;
}
#left
{
float: left;
padding: 0;
width: 182px;
}
#right
{
float: left;
padding: 20px;
width: 500px;
}
.twoColumns
{
background-color: #FFF;
overflow: auto;
min-height: 500px;
border: 0px solid black;
overflow: auto;
background-image: url(/image.jpg);
background-repeat: repeat-y;
background-position: top left;
}
The css class "twoColumns" will be added to "mainWrapper" class if div with id=left is present. The background image(of color #363636) will be given to outermost div. If css class(twoColumns) is added in document ready(depending #left presence), it is taking time to bring the image from server. How to add the background image to outermost div depending upon the child div presence? Any idea/suggestion to solve this problem is applauded.
I would suggest placing the image into the wrapper from the start, then removing it under your respective conditions. All this can be easily achieved with a little css change and javascript:
CSS:
.mainWrapper
{
background-color: #FFF;
overflow: auto;
min-height: 500px;
background-image: url(http://www.psdgraphics.com/wp-content/uploads/2009/02/abstract-background.jpg);
}
#left
{
float: left;
padding: 0;
width: 182px;
}
#right
{
float: left;
padding: 20px;
width: 500px;
}
.twoColumns
{
background-color: #FFF;
overflow: auto;
min-height: 500px;
border: 0px solid black;
overflow: auto;
background-repeat: repeat-y;
background-position: top left;
}
JS/jQuery:
$(document).ready(function(){
if($(".mainWrapper #left").length == 0){
$(".mainWrapper").css({'background-image':'none'});
}
});
Here is the Fiddle