Left-justifying text under image with max-width:100% - html

I'd like the text under this image to be left justified under the image ('my title' to be aligned with the left side of the image), no matter what it's height, without Javascript.
HTML
<div class="container">
<div class="img-container">
<img src="http://img.thesun.co.uk/multimedia/archive/01572/empire-state-build_1572000a.jpg"/>
<div class="info">
<h1>my title</h1>
<p> my description</p>
</div>
</div>
</div>
CSS
.container{
width:900px;
position:relative;
}
.img-container{
text-align:center;
}
img{
max-width:100%;
}
.info{
text-align:left;
}
http://jsfiddle.net/NGwdc/
If you adjust .container width, it should always be aligned to the left side of that image.
Is this possible with only CSS?

The answer is to make the image container display:inline-block, and the outer-most container text-align:center
http://jsfiddle.net/NGwdc/1/

Related

Empty div and clickable url

I have a background with two urls, one showing the regular state and the hover state. The div is empty and the width and height are set to 50px. I added padding to see if that would help, it did not.
<div class="container_12 clearfix">
<div class="grid_12">
<p id="footer-center">
<div class="hover-btn"></div><!--<img src="images/back-to-top-a.png" class="a">-->
</p>
</div> <!-- end grid_4-->
</div> <!-- end container_12 -->
.hover-btn{
display:block;
width:50px;
height:50px;
margin-left:50%;
}
.hover-btn{
background:url(../images/back-to-top-a.png) no-repeat center
center;
}
.hover-btn:hover{
background:url(../images/back-to-top-b.png) no-repeat center center, url(../images/back-to-top-a.png) no-repeat center center;
Simply replacing the hover-btn div with an img tag will show your first image and then the second on hover.
<img src="" class="hover-btn">

selecting position with respect to parent div

I'm new to HTML did some research in w3school but not clear about how put image on this three different position on this background image in one div. I marked the position I need to put the image. The div will cover entire page in webkit and moz based browser. Consider any width and height of div. How you fixed position with respect to your considered width and height. I can't put background image to entire html or body or etc. It have to in one div or section only.
<div id="page1" style={"background:url('http://s27.postimg.org/r5v9ymd77/pg3bgl.png');background-size:cover;}">
<span class="">Page 1</span>
<div class="">
<!-- Content Goes Here -->
</div>
</div>
This is a very simple way to achieve that using relative CSS positioning.
You can use a background div, and inside of it place the divs you need.
*{
margin:0;
padding:0;
}
.background{
background:url('http://lorempixel.com/1000/1600/nature');
background-size:cover;
height:100vh;
width:100%;
}
.img1,
.img2,
.img3{
position:relative;
width:300px;
height:150px;
background:url('http://placehold.it/300x150');
}
.img1{
top:20px;
left:350px;
}
.img2{
top:150px;
left: 20px;
}
.img3{
top:350px;
left:150px;
}
<div class="background">
<div class="img1"></div>
<div class="img2"></div>
<div class="img3"></div>
</div>
If you wish you can have a look at multiple images backgrounds, here: http://www.w3schools.com/css/css3_backgrounds.asp
i would set up the html like this:
<div id="navbar">
<div id="image1" style=""></div>
<div id="image2" style=""></div>
<div id="image3" style=""></div>
<div>
<p>Text in navbar</p>
</div>
</div>
For each id "imageX" you could set a background-image then. And with display: inline-block, width and position you can put them where you want.
There are multiple ways to achieve that.
You can set the position of your div to absolute and adjust it to the position you'd like it to be
#div1 {
position : absolute;
left : 100px;
top : 200px;
}
You can also set the position to relativeand have your div placed relatively to its normal position.
You can check this for more information on the position property;
You could insert DIV within DIV. And you could position DIV using the top and left style attributes.
<div id="page1" style="{background:url('http://s27.postimg.org/r5v9ymd77/pg3bgl.png');background-size:cover;}">
<span class="">Page 1</span>
<div id="subpanel_1" style="top:20px; left:102px;>
<!-- Content Goes Here -->
</div>
<div id="subpanel_2" style="top:200px; left:50px;>
<!-- Content Goes Here -->
</div>
</div>
Of course, instead of writing the style definitions inline, better put them in a separate <style>…</style> block.

Placing images in a twitter bootstrap's grid

Need to place images kinda like here (for example): http://imgur.com/QpRjvpW
Original pictures of different sizes.
Hover effect - blur and fogging effects and text on the middle of the picture.
Here is what I got for now: JSFiddle
So the question, how correctly position them, so that they occupy the entire width of the screen by 3 in a row, gonna be same size, closely adhering to the upper and lower div and to each other, don't expand within its borders? And the effect of the blur doesn't touch neighboring elements?
Remove class row and col-lg-12,use col-sm-12 like
<div class="col-sm-12">
<div id="work1" class="col-sm-4">
<img class="image" src="http://i.telegraph.co.uk/multimedia/archive/03257/POTD-SKY-SQUIRREL_3257854k.jpg">
<p class="text">ONE</p>
</div>
<div id="work2" class="col-sm-4">
<img class="image" src="http://i.telegraph.co.uk/multimedia/archive/03235/potd-husky_3235255k.jpg">
<p class="text">TWO</p>
</div>
<div id="work3" class="col-sm-4">
<img class="image" src="http://s.hswstatic.com/gif/dolphin-pictures-1.jpg">
<p class="text">THREE</p>
</div>
</div>
CSS:
works img {
height: 600px;
width: 100%;}
Apply this css, you'll get the look like the example --
.works img{
display:block;
max-width:100%;
}
.works [class^="col-"] {
padding-left:0;
padding-right:0;
}
.works .text{
position:absolute !important;
left: 0;
right: 0;
}

Align text to right of Image

I'd like to align all 3 lines of text to the right of my image. Currently it wraps on the 2nd line.
How do I do this?
http://jsfiddle.net/bhu4p04r/
CSS:
img {
min-width:75px;
height:90px;
vertical-align:middle;
margin-right:30px
}
HTML:
<div class="medium-12 columns"><img src="http://placekitten.com/g/75/90" />1<br />2<br />3</div>
Wrap your text in a div, and make image float:left.
<div class="medium-12 columns">
<img src="http://placekitten.com/g/75/90" class="left" />
<div class="right">1
<br />2
<br />3</div>
</div>
DEMO here.
Vertically middle text:
Give display:inline-block; to image and the text container.
img, .text {
display:inline-block;
vertical-align:middle
}
See DEMO here.
float: left on your image is the way to go.
http://jsfiddle.net/bhu4p04r/2/
Or another alternative (to keep the text centered)
http://jsfiddle.net/Lbbt1uy8/
What is important to know is that vertical-align uses line-height not height to center something vertically.
Try to use <p> elements instead of </br> on your text and add align attribute to your image like this:
<div class="medium-12 columns"><img src="http://placekitten.com/g/75/90" align="left"/><p>1</p><p>2</p><p>3</p></div>
Here fiddle
you had lots errors on the syntax
and you should wrap each element and assign them with separate CSS codes
HTML:
<div class="medium-12 columns">
<img src="http://placekitten.com/g/75/90"></img>
</div>
<div id="txt">
1<br>2<br>3<br>
</div>
and CSS
.medium-12 {
min-width:75px;
height:90px;
margin-right:30px;
float: left;
display: block;
}
#txt {
float: left;
display: block;
margin-top: 0;
}

Create thee divs in one line and 4th div in bottom. CSS/HTML

I want to create html page the next vision. Location of divs 1,2 and 3 in one line was done, but with 4th div I have some troubles and can't make it.
You really should post your code to see whats wrong with it.. But i made the example for you.
Here you go, you could use float.
Html Code:
<div id="wrapper">
<div id="first">
</div>
<div id="second">
</div>
<div id="third">
</div>
<div id="fourth">
</div>
</div>
Css Code:
#wrapper{width:300px; margin:0;}
#first { height:300px; width:100px; background:black; float:left;}
#second{ height:250px; width:100px; background:red;float:left;}
#third{ height:250px; width:100px; background:green;float:left;}
#fourth{ height:50px; width:200px; background:blue;float:left;}
Working DEMO
Here's an example that uses non-fixed heights and widths. The key is wrapping the subsections in divs as well and styling accordingly. div is short for division after all.
<div class="left">
1
</div>
<div class="right">
<div class="second-third-wrapper">
<div class="second">
2
</div>
<div class="third">
3
</div>
</div>
<div class="fourth">
4
</div>
</div>
http://jsfiddle.net/Pb5NX/2/
The divs then use percentage height and widths to size them properly. These percentages take up a percentage of the parent element (the <body>, which then inherits from the <html>), so the parents height needs to be set as well.
body, html {
width: 100%;
height: 100%;
}
.left {
background-color: blue;
width: 50%;
height: 100%;
float: left;
}
If you want them a fixed size, you can just set a specific height and width style on the specific elements and the percentages will do the rest.