Right now I've got a webapp working, which I'm trying to add icons to, along with text to describe those icons. I'm trying to scale the icons down to fit in the div, which works great, but also to scale the image to hold text within the div. The issue I'm having is that although the image will scale to fit in the div, it won't scale enough to also allow text in the div.
My HTML code is
<div class="ui-grid-b" id="dashGrid">
<div class="ui-block-a changerbutton" style="height:60px;border-bottom: 1px solid;border-right: 1px solid;display:table-cell; vertical-align:middle">
<center>
<div>
<img src="http://upload.wikimedia.org/wikipedia/commons/8/85/Smiley.svg" class="windowscale-height">
</div>
<h4 class="gotobutton" goto="#formSelect" data-icon="grid">Forms</h4>
</center>
</div>
<div class="ui-block-b" style="height:22%"></div>
<div class="ui-block-c changerbutton" style="height:90px;border-bottom: 1px solid;border-left: 1px solid;display:table-cell; vertical-align:middle">
<center>
<div>
<img src="http://upload.wikimedia.org/wikipedia/commons/8/85/Smiley.svg" class="windowscale-height">
</div>
<h4 class="gotobutton" goto="#entries" data-icon="info">Entries</h4>
</center>
</div>
<div class="ui-block-a" style="height:22%"></div>
<div class="ui-block-b" style="height:22%"></div>
<div class="ui-block-c" style="height:22%"></div>
<div class="ui-block-a changerbutton" style="height:22%;border-top: 1px solid;border-right: 1px solid;display:table-cell; vertical-align:middle">
<center>
<h4 class="gotobutton" goto="#mapScreen" data-icon="star">Map</h4>
<div>
<img src="http://upload.wikimedia.org/wikipedia/commons/8/85/Smiley.svg" class="windowscale-height">
</div>
</center>
</div>
<div class="ui-block-b" style="height:22%"></div>
<div class="ui-block-c changerbutton" style="height:22%;border-top: 1px solid;border-left: 1px solid;display:table-cell; vertical-align:middle">
<center>
<h4 class="gotobutton" goto="#locSettings" data-icon="gear">Settings</h4>
<div>
<img src="http://upload.wikimedia.org/wikipedia/commons/8/85/Smiley.svg" class="windowscale-height">
</div>
</center>
</div>
</div>
, and the relevant CSS is
.windowscale-height
{
max-height: 100%;
max-width: 100%;
min-height: 1%;
min-height: 1%;
}
I've got a JSFiddle that shows the issue, http://jsfiddle.net/jDDmC/.
Ideally, the text, as well as the image, would both fit into the outlined boxes.
Any help would be appreciated!
A couple of things:
1) Remove the <center> tag since it's been deprecated. Use text-align: center in your css, instead.
2) Your divs have a specific height, and because of that, the text goes out of the box. So in the inline css, remove the height property.
3) Finally, consider using only an external stylesheet (instead of inline css), since it's easier to maintain and reuse.
Please take a look at:
http://jsfiddle.net/jDDmC/1/
Maybe you're looking for something like Fluid Images ?
Related
This question already has answers here:
Float 2 elements side by side inside a container div
(2 answers)
Closed 3 years ago.
I have loop that goes trough all pictures that I have and displays them. I would like to display them in one row, from left to right, but with css that I have is displaying them one under other. I have use flow but not sure if I used it correctly.
Here is my code:
.column.is-narrow {
float: right;
}
.box {
float: right;
}
<div class="column">
<div class="columns" ng-repeat="a in $ctrl.f">
<div class="column is-narrow">
<div class="box" style="width: 200px;">
<p class="title is-5">{{album}}</p>
<figure class="image is-128x128">
<!--<img ng-src="{{src}}"> remove and replaced for demo purpose-->
<img src="http://dummyimage.com/128x128" />
</figure>
<p class="subtitle">{{person}}</p>
</div>
</div>
</div>
I am aware that my css is not correct I have been searching for answer but couldn't find it.
Basically, when you float things, they'll still wrap if there isn't enough space to display both side by side. The easiest solution is to set a width on them to ensure that their container will always be wide enough to fit the content. You can do it with percentages or pixels, depending on your use case.
Note: If you use percentages, percentages adding up to 100% may still cause it to wrap, because they may not take into account padding, margin and/or border depending on other things. I usually do something like 49% for both, then float one right and one left.
You may use display and mind this inline-style <div class="box" style="width: 200px;"> wich is to start with, not wide enough to hold texts and img side by side
display:table/table-cell;
.column.is-narrow {
float: right;
}
.box {display:table;}
.box> p, .box> figure {display:table-cell;vertical-align:middle/* or top or else */
}
<div class="column">
<div class="columns" ng-repeat="a in $ctrl.f">
<div class="column is-narrow">
<div class="box" style="width: 200px;">
<p class="title is-5">{{album}}</p>
<figure class="image is-128x128">
<!--<img ng-src="{{src}}"> remove and replaced for demo purpose-->
<img src="http://dummyimage.com/128x128" />
</figure>
<p class="subtitle">{{person}}</p>
</div>
</div>
</div>
display:flex;
.column.is-narrow {
float: right;
}
.box {
display: flex;
/* removed width:200px from inline-style*/
}
p {
margin: auto;
}
<div class="column">
<div class="columns" ng-repeat="a in $ctrl.f">
<div class="column is-narrow">
<div class="box">
<p class="title is-5">{{album}}</p>
<figure class="image is-128x128">
<!--<img ng-src="{{src}}"> remove and replaced for demo purpose-->
<img src="http://dummyimage.com/128x128" />
</figure>
<p class="subtitle">{{person}}</p>
</div>
</div>
</div>
The easiest way is to declare the parent div as a flex container by setting the property display: flex and flex-direction:row. If you don't want to wrap your pictures, you can set flex-wrap:nowrap.
Here http://the-echoplex.net/flexyboxes/ is nice playground for flex box.
So I found the answer and it was pretty simple :)
I just had to add one more div with class with which I will float it to left. This is what I wanted:
.html
<div class="column">
<div class="columns">
<div class="float" ng-repeat="a in $ctrl.f"> /* added this line of code */
<div class="column is-narrow">
<div class="box" style="width: 200px;">
<p class="title is-5">{{album}}</p>
<figure class="image is-128x128">
<!--<img ng-src="{{src}}"> remove and replaced for demo purpose-->
<img src="http://dummyimage.com/128x128" />
</figure>
</div>
</div>
<p class="subtitle">{{person}}</p>
</div>
</div>
</div>
.css
.float{
float:left;
}
That was it. It's working. :)
I'm having an issue with centering within a Bootstrap column. I had a placeholder page using images (a white box with an image and text inside), that I needed to change to a square white div with the image added inside and the text manually added.
When I implemented it the 2nd way, all of a sudden my columns lost there centering.
Here are the codepens for the centered one and the uncentered one.
Uncentered relevant HTML:
<div class="col-xs-4 column-centered">
<a href="../faq/category_3.html">
<div class="img-with-text">
<img src="img/Blue/VideoCollaboration-Blue.png"></img>
<p><b>Video Collaboration</b></p>
</div></a>
</div>
Centered relevant HTML:
<div class="col-xs-4 column-centered">
<div class="img-with-text">
<img src="img/temp_image.png" alt="VideoCollaboration" />
</div></div>
I'd really like to avoid using offsets as that isn't really centering..
try
.img-with-text{
display: inline-block;
}
or
.img-with-text{
margin: 0 auto;
}
That's because anchor tags are inline-block by nature, you will have to change it to block and do the following.
<div class="col-xs-4 column-centered">
<a href="../faq/category_3.html" class="block text-center">
<div class="img-with-text inline-block">
<img src="img/Blue/VideoCollaboration-Blue.png"></img>
<p><b>Video Collaboration</b></p>
</div>
</a>
</div>
.inline-block{
display: inline-block;
}
.block{
display: block;
}
I have a grid divided into 2. One side holds an image and the other side some text. Currently it looks as follows:
I want to make it look as follows:
I am looking to get rid of the black spot and center the text. There is no issue in centering it horizontally but unable to do it vertically to fit nicely in relation to the image. Please advice if there is any pre built class already available in bootstrap or I need to rewrite additional CSS.
The following are my current html and css.
HTML
<div class="col-md-6 custom-info">
<img src="img/test.jpg" class="img-responsive center-block">
</div>
<div class="col-md-6 custom-info text-center" style="text-align: left;">
<h1>Discover Our Latest Colourful addition</h1>
<h3>Explore our range of text text text text.</h3>
<h3>View the menu.</h3>
</div>
CSS
.custom-info{
background-color: #c0d023;
padding: 30px;
}
After Editing:
You may try this.
HTML
<div class="row xclassrow">
<div class="col-md-6 custom-info">
<img src="http://i.imgur.com/VpelmxT.png?1" class="img-responsive center-block">
</div>
<div class="col-md-6 custom-info text-left">
<div class="content">
<h1>Discover Our Latest Colourful addition</h1>
<h3>Explore our range of text text text text.</h3>
</div>
<h3>View the menu.</h3>
</div>
CSS
.xclassrow{
background-color:#C0D123
}
.content {padding:40px 0px}
.custom-info{
background-color: #c0d023;
padding: 30px;
}
Hope this works. Do comeback if still any issue.!!
EDIT : Removed the xclass and wrap the content in a new class. Check DEMO
TLDR;
Use display:table with display:table-cell to accomplish vertical centering of elements.
For newer browser you can use flexbox. I will demonstrate both approaches here.
Old but secure way (may not work for you here)
What I do most of the time is define 2 helper classes called t and td
*This works if you have a defined height of the containing element
The code then looks something like this:
HTML
<div class="col-md-6 custom-info text-center" style="text-align: left;">
<div class="t">
<div class="td">
<h1>Discover Our Latest Colourful addition</h1>
<h3>Explore our range of text text text text.</h3>
<h3>View the menu.</h3>
</div>
</div>
</div>
CSS
.t {
display: table;
height: 100%;
}
.td {
display: table-cell;
vertical-align: middle;
height: 100%;
}
Jsfiddle
Old and even more secure way
Since you know that your 2 columns are 6+6 and that makes 12 columns total width.
Make 1 long element col-md-12 and make a table inside it (either with regular table elements or the helper classes i used in the above example.
HTML
<div class="col-12 specific-class">
<div class="t">
<div class="td">
<img src="http://static.adzerk.net/Advertisers/d936d243e9de4c989a6c95b031eb11d6.png" alt="">
</div>
<div class="td">
<h1>Discover Our Latest Colourful addition</h1>
<h3>Explore our range of text text text text.</h3>
<h3>View the menu.</h3>
</div>
</div>
</div>
CSS
.specific-class .td {
width: 50%;
background: rgba(0,0,0,.2);
}
.t { display: table; height: 100%; width: 100%; }
.td { display: table-cell; vertical-align: middle; height: 100%; }
Jsfiddle
Note: added vertical align to the image to remove small spacing under it
The mighty flexbox (the future looks bright)
Flexbox is a sight for sore eyes for us fe-devs and will be an integral building block of the future www.
HTML
<div class="col-12 specific-class">
<div class="fl-element">
<img src="http://static.adzerk.net/Advertisers/d936d243e9de4c989a6c95b031eb11d6.png" alt="">
</div>
<div class="fl-element">
<h1>Discover Our Latest Colourful addition</h1>
<h3>Explore our range of text text text text.</h3>
<h3>View the menu.</h3>
</div>
</div>
CSS
.specific-class {
display: flex;
align-items: center;
}
.specific-class .fl-element {
width: 50%;
}
Jsfiddle
I am using older Skeleton css version, it is a 16 column grid system. I am trying to setup similar layout as in this picture.
http://imgur.com/sIV2aYo
I am pretty new to CSS, is using two containers (one inside another) a proper method?
Here is a sample code of what I been trying, but not working out too well =(
<div class="container">
<div class="eight columns alpha">
<div class="image">
<img alt="" src="images/coffee.jpg">
</div>
</div>
<div class="eight columns omega">
<div class="container">
<div class="eight columns">
<img alt="" src="images/plate.jpg">
</div>
<div class="eight columns">
<img alt="" src="images/macaro.jpg">
</div>
<div class="text area">
<p class="quote">"One of my favorite parts of using Square Register is being able to talk to customers while I am swiping their cards."</p>
<p class="name">Norm Mui, Coffee Foundry</p>
</div>
</div> <!-- 2nd container -->
</div>
</div> <!-- 1st container -->
Thanks in advance.
I don't know your CSS, but maybe this helps you:
HTML:
// The class "columns" is your "block" (div) that needs the content. I've made a CSS with a background-color, height and width.
// In that div "columns we create new "columns, numbered by 1,2 and 3. I've floated all the text to the left and gived it a margin. The first, second and the third a margin of 15px ( top, right, buttom and left ).
// In the div column "columns" I have made a textarea with also a margin of 15px. The vertical-align is for a top vertical align. with the display we means that it needs to be in the block, with a margin of 40% ( it takes 40% of the block).
<div id="container">
<div class="columns">
<div class="eight-columns-1">
<img alt="" src="http://ww1.prweb.com/prfiles/2014/04/10/11752526/gI_134971_best-image-web-hosting.png">
</div>
<div class="eight-columns-2">
<img alt="" src="http://www.causingeffect.com/images/made/images/example/cow_100_100_c1.jpg">
</div>
<div class="eight-columns-3">
<img alt="" src="http://www.causingeffect.com/images/made/images/example/cow_100_100_c1.jpg">
</div>
<div class="textarea">
<p class="quote">"One of my favorite parts of using Square Register is being able to talk to customers while I am swiping their cards."</p>
<p class="name">Norm Mui, Coffee Foundry</p>
</div>
</div>
</div>
CSS:
.columns {background-color:yellow; width: 530px; height: 285px;}
.eight-columns-1 {float:left; margin: 15px;}
.eight-columns-2 {float: left; margin: 15px;}
.eight-columns-3 {float:left; margin: 15px 15px 15px 0px;}
.textarea {vertical-align:top; margin: 15px; display:inline-block; width: 40%;}
I am creating a small page using html which has a header and a body. The header is within a tag with blue background.
The problem I am facing is an image(android.png) which I want to be displayed in right end of the header seems getting placed below the header. How can I place the image in the right of the header.
I don't want to use CSS to align the image.
Click Run Code Snippet to view the current page layout
<html>
<body>
<div style="width:400px;height:60px;border:1px solid blue;background-color:#2196F3"">
<img align="left" width="80px" height="50px" src="http://icons.iconarchive.com/icons/igh0zt/ios7-style-metro-ui/512/MetroUI-Google-Gmail-icon.png">
<div text-align="left" style="font-size:20px;color:white"><h3>Something</h3></div>
<img align="right" width=150px height=50px src="http://www.sona-systems.com/img/android.png">
</div>
<div style="width:400px;height:400px;border:1px solid blue">
<p>
Hey,<br>
I am on vacation. I will respond after i come back</p>
<i><p>Sent from gmail</p></i>
</div>
</body>
</html>
I think this does what you're after. Your text div inside the header was filling out the rest of the width, pushing the second image to the next row:
<html>
<body>
<div style="width:400px;height:60px;border:1px solid blue;background-color:#2196F3">
<img style="float:left; width:80px;height:50px" src="http://icons.iconarchive.com/icons/igh0zt/ios7-style-metro-ui/512/MetroUI-Google-Gmail-icon.png">
<div style="font-size:20px;color:white; text-align:left; float:left">
<h3>Something</h3>
</div>
<img style="float:right; width:150px; heigh:50px; margin-top:5px; margin-right:5px" src="http://www.sona-systems.com/img/android.png">
</div>
<div style="width:400px;height:400px;border:1px solid blue">
<p>
Hey,
<br>I am on vacation. I will respond after i come back</p>
<i><p>Sent from gmail</p></i>
</div>
</body>
</html>
jsBin demo
Learn to use <style>. Makes life easier and more time to drink coffee with friends.
Float your image to the right
But also since H3 is a block element by default float it left (to remove the width)
<p> should not be enclosed in <i> since Paragraphs are block level elements and i are inline
<style>
.float-left{ float:left;}
.float-right{float:right;}
#header{
width:400px;
height:60px;
border:1px solid blue;
background-color:#2196F3;
}
#header img{
height:50px;
}
#header h3{
font-size:20px;
color:white;
}
#content{
width:400px;
height:400px;
border:1px solid blue;
}
</style>
HTML
<div id="header">
<img class="float-left" src="http://icons.iconarchive.com/icons/igh0zt/ios7-style-metro-ui/512/MetroUI-Google-Gmail-icon.png">
<h3 class="float-left">Something</h3>
<img class="float-right" src="http://www.sona-systems.com/img/android.png">
</div>
<div id="content">
<p>
Hey,<br>
I am on vacation. I will respond after i come back
</p>
<p><i>Sent from gmail</i></p>
</div>
Another solution would be to place your images right inside the H3 element
<h3><img> Some Text <img></h3>
but than you need to play with the H3's line-height and the image's vertical-align etc.
Since you want to avoid CSS, I'll assume this is for output to an HTML-handicapped email client such as Outlook.
You can do this without using CSS on your images by simply moving the second image before the first one within the HTML.
<html>
<body>
<div style="width:400px;height:60px;border:1px solid blue;background-color:#2196F3"">
<img align="right" width=150px height=50px src="http://www.sona-systems.com/img/android.png">
<img align="left" width="80px" height="50px" src="http://icons.iconarchive.com/icons/igh0zt/ios7-style-metro-ui/512/MetroUI-Google-Gmail-icon.png">
<div text-align="left" style="font-size:20px;color:white"><h3>Something</h3></div>
</div>
<div style="width:400px;height:400px;border:1px solid blue">
<p>
Hey,<br>
I am on vacation. I will respond after i come back</p>
<i><p>Sent from gmail</p></i>
</div>
</body>
</html>
I fixed this (it will still need some brushing up, but it works) by switching the position in the code where the <div> with "Something" in it and the messed up image are.
Instead of
<div text-align="left" style="font-size:20px;color:white;"<h3>Something</h3></div>
<img align="right" width=150px height=50px src="http://www.sona-systems.com/img/android.png">
Do
<img align="right" width="150px" height="50px" src="http://www.sona-systems.com/img/android.png"> <!--added in quotes for the width and height-->
<div text-align="left" style="font-size:20px;color:white;"<h3>Something</h3></div>
You also have some a wrong double quote in this line