I have 1 div wrapping h2 and image wrapped in div with class img. h2 is float:left and img float:right.
img div has image inside. What I want is
if image is height and width 100px than its not vertical-align:middle. Help please.
Tested with vertical-align:middle
CSS
.ver-mainbox{float:left; width:898px; border:1px solid #c3c3c3; padding:0px; height:122px; margin-bottom:15px; background-color:#ffffff;}
.ver-mainbox h2{font-size:18px;color:#000; padding-left:10px; margin:0px; vertical-align:middle; width:500px; float:left; padding-top:42px;}
.ver-mainbox .img{float:right; padding:0px; width:186px; height:122px;}
HTML
<div class="mainbox-area">
<!-- Box start v1 -->
<div class="ver-mainbox">
<h2>Immunizations</h2>
<div class="img"><img src="../../Content/images/v1.gif" alt="" title="" /></div>
</div>
<!-- Box start v1 -->
</div>
vertical-align is only applicable to table cells. You'll need to rethink how you go about this or use the display:table-* properties.
<div style="display:table">
<h2 style="display:table-cell;vertical-align:middle">Immunizations</h2>
<div style="display:table-cell;vertical-align:middle">
<img src="../../Content/images/v1.gif" alt="" title="" />
</div>
</div>
Related
HTML/CSS newbie question for you.
I've been stuck on this for awhile. I'm looking to center my image gallery AND also make the padding between the images tighter. I'm thinking I need a container but, I've just been screwing it all up when I try. Any help would be great!
<div id="container" align="center">
<div class="img">
<a href="#">
<img src="#" alt="PIcture1" width="210" height="180">
</a>
<div class="desc">BLAH</div>
</div>
<div class="img">
<a href="#">
<img src="Images/9700_1915630577543_1314909545_n.jpg" alt="oldman" width="210" height="180">
</a>
<div class="desc">BLAH</div>
</div>
<div class="img">
<a href="#">
<img src="#" alt="Picture3" width="210" height="180">
</a>
<div class="desc">BLAH</div>
</div>
<div class="img">
<a href="#">
<img src="#" alt="Picture4" width="210" height="180">
</a>
<div class="desc">BLAH</div>
</div>
</div>
CSS:
#container{
}
div.img
{
margin:5px;
padding: 5px;
border:none;
height:auto;
width:auto;
float:left;
text-align:center;
}
div.img img
{
display:inline;
margin:5px;
border:none;
}
div.img a:hover img
{
border:none;
}
div.desc
{
text-align:center;
font-weight:normal;
width:120px;
margin:5px;
}
It depends on how you want to centre your gallery.
There's a few things that you need to bear in mind. In order to centralise some HTML you need to have a set width of the centralising element.
Here's some code for you to work with:
Create a "centre" class in CSS as follows:
div.centre{
margin:0px auto;
width:800px;
}
Then add it to your container as follows:
<div id="container" class="centre">
The secret to centralisation is in the margin:0px auto;, this is convention of modern web development to centralise content.
Have a look at this code
p.s. don't use align="center" it is depreciated in later versions of HTML. Better to not get into the habit of using it and stick to using CSS classes to centralising things for you.
You should not use align. It is a deprecated property. To center something with a container you need to specify a fixed width and add margin auto.
Ex:
#container {
width:970px;
margin: 0 auto;
}
You can remove the padding on div.img
How would I go about placing my text at the center of an image, this is what it looks right now: http://gyazo.com/442aa9f927c1c1ee505435c2422f7322.png
and this is how I want it to be: http://gyazo.com/bc3bb2d0472a1c963d4ac00081065461.png
This is my current code:
<p><img src="http://findicons.com/files/icons/941/web_design/32/page_text.png" /> Some random text</p>
I would really appreciate if someone could help me out with this.
try to insert the image inside a div and put the text on it like this:
<div class="img">
<p>your text</p>
</div>
css:
.img{
background: url('http://findicons.com/files/icons/941/web_design/32/page_text.png') no-repeat;
height:100%;
}
DEMO
After you can mode your text where you want
If you don't want to use the image like a background and you want only to put text at the center of your element try this:
<div class="container">
<img src="http://findicons.com/files/icons/941/web_design/32/page_text.png" />
<span>your text</span>
<br style="clear:both;" />
</div>
css
.container{
width:100%;
height:100px;
}
.container span{
line-height:30px;
float:left;
}
.container img{
float:left;
}
DEMO2
Demo:
http://jsfiddle.net/5ser6/1/
<div class="thingy">
<img src="http://findicons.com/files/icons/941/web_design/32/page_text.png" alt="" />
<p>Text</p>
<br style="clear:both;">
</div>
* {font-family:arial}
.thingy img {float:left;}
.thingy {height:32px;float:left;}
.thingy p {float:left;margin:0 0 0 10px;padding:0;line-height:32px;}
If your framework has a clearfix, you don't need the clear:both, just put a clearfix on the outer div.
Below is my code :
<div id="footer">
<div id="left_footer">
<div id="img_left" align="center">
<img src="separator_bar.jpg" align="middle"/>
</div>
</div>
<div id="right_footer">
<div id="img_right" align="center">
<img src="separator_bar.jpg" align="middle"/>
</div>
</div>
</div
CSS:
#footer {
width:500px;
position:relative
}
#left_footer{
float:left;
}
#right_footer{
float:right;
}
I am trying this code but my image is not aligned to center its always aligned to left in left footer and to right in right footer. Please suggest !
I would approach the layout like this:
http://jsfiddle.net/yWmZ5/1/
HTML
<div id="footer">
<div id="left_footer">
<img src="http://placekitten.com/100/100" />
</div>
<div id="right_footer">
<img src="http://placekitten.com/100/100" />
</div>
</div>
CSS
#footer { width:500px; position:relative; overflow:hidden; }
#left_footer{ width:250px; float:left; text-align:center; background:orange; }
#right_footer{ width:250px; float:right; text-align:center; background:yellow; }
Make sure you strip all styling (eg - align, etc) out of your HTML and put it in your CSS.
Try this style:
#footer > div{width:50%}
your div#left_footer and div#right_footer need to have some width, in order to display the content in the middle
change your corresponding css to this:
#left_footer{
text-align:center;
float:left;
width:50%;
}
#right_footer{
float:right;
width:50%;
}
see this fiddle
I'm trying to achieve an effect when one div with png img inside (this img has hole in it) is over another div with img inside that will appear in hole of image over it, but for now it still is over instead of being under img with "window". And I still want to keep div that has to be under img ("iphone-screen") inside div with image with window ("iphone") because of responsive issues (percentage width of inner div is related to width of outer div). How to achieve that? Here's link to my website (go to page "Kontakt"):
CLICK
And here's my HTML markup:
<div id="slide6" class="slide">
<h1 class="big">Kontakt</h1>
<h2 class="call">Zadzwoń: <span class="thick">514 944 555</span></h2>
<h2 class="mail">
Napisz: <span class="thick">biuro#dentmedica.pl</span>
</h2>
<div id="iphone">
<img src="img/iphone.png" alt="" />
<div id="iphone-screen">
<img src="img/iphone-screen.png" alt="" />
</div>
</div>
</div>
And CSS:
#slide6 #iphone{
position:absolute;
bottom:0;
right:0;
width:40%;
z-index:600;
}
#slide6 #iphone > img{
width:100%;
height:auto;
z-index:600;
}
#slide6 #iphone #iphone-screen{
position:absolute;
width:44.1%;
overflow:hidden;
bottom:24%;
left:15%;
z-index:100;
}
#slide6 #iphone #iphone-screen > img{
width:100%;
height:auto;
z-index:100;
}
Thanks for any help!
I guess it's the issue with the div tag iphone-screen..remove it
What's the best way to add a caption below an image? The image and its caption will be floated right, and the text on the caption needs to wrap -- a 200x200px image shouldn't have a caption of width 800px.
I would strongly prefer a solution that allows me to update images (with different widths) without changing the CSS or markup.
For reasons beyond my control the image itself will also be floated right, but this should not be too problematic.
The image code is
<div class="floatright">
<img alt="foo" src="bar.png" height="490" border="0" width="800">
</div>
and I can wrap this with HTML/CSS as needed. No JS on this page.
figure {
display: table;
}
figcaption {
display: table-caption;
caption-side: bottom;
}
<figure>
<img src="https://picsum.photos/200/50" />
<figcaption>This is a caption of slightly longer length. It should wrap, regardless of the size of the image.</figcaption>
</figure>
You can substitute figure and figcaption for div and p, or whatever other containers float your semantic boat.
Shameless plug: I blogged about this problem and my solution here, if you're interested.
Something like this: http://jsfiddle.net/QLcRC/ ?
You may use also use the HTML5 figure and figcaption elements and style those as #Wasim suggested.
<figure>
<img src="/test.jpg" alt="a test-image">
<figcaption>Description</figcaption>
</figure>
Another (not-so-cross-browser-savvy) approach is to use the img title-attribute and insert it as a pseudo-element via CSS:
#content img[title]:after {
content: "[" counter(image) "] " attr(title);
counter-increment: image;
display: block;
text-align: center; }
The basic idea is to make one <div> with an <img> tag and <p> tag.
<div class="photo">
<img src="someimage.jpg">
<p>my caption
</div>
Now you simply set two styles. One for the img tag and the other for the p tag for the photo class.
Create a class name it photo:
.photo {float: right;width: 210px;margin: 0 10px 10px 10px;}
img.photo {float: right;margin-left: 10px;margin-bottom: 10px;border: 1px solid #666;
padding: 10px;}
Conclusion:
1. A div with an <img> tag and a <p> tag.
2. Div should have one class with different styles for <p> and <img> tag.
Pure HTML/CSS inline styled.
<div style="width:40%;
margin-right:6%;
float: left;">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/26/Papilio_machaon_Mitterbach_01.jpg/500px-Papilio_machaon_Mitterbach_01.jpg" width="100%">
<p style="color:gray;
background-color:#eee;
margin-top:-4px;
width:100%;
height:auto;
padding-top:10px;
padding-bottom:10px;
text-align:center;">
<span style="padding-right:10px;
padding-left:10px;"> Butterfly </span></p>
</div>
<!-- NEXT ONE -->
<div style="width:40%;
float: left;">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/26/Papilio_machaon_Mitterbach_01.jpg/500px-Papilio_machaon_Mitterbach_01.jpg" width="100%">
<p style="color:gray;
background-color:#eee;
margin-top:-4px;
width:100%;
height:auto;
padding-top:10px;
padding-bottom:10px;
text-align:center;">
<span style="padding-right:10px;
padding-left:10px;"> Butterfly </span></p>
</div>
<div style="clear:all;"></div>
<!-- NEXT ROW -->
<div style="width:40%;
margin-right:6%;
float: left;">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/26/Papilio_machaon_Mitterbach_01.jpg/500px-Papilio_machaon_Mitterbach_01.jpg" width="100%">
<p style="color:gray;
background-color:#eee;
margin-top:-4px;
width:100%;
height:auto;
padding-top:10px;
padding-bottom:10px;
text-align:center;">
<span style="margin-top:0px;
padding-right:10px;
padding-left:10px;"> Butterfly </span></p>
</div>
<!-- NEXT ONE -->
<div style="width:40%;
float: left;">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/26/Papilio_machaon_Mitterbach_01.jpg/500px-Papilio_machaon_Mitterbach_01.jpg" width="100%">
<p style="color:gray;
background-color:#eee;
margin-top:-4px;
width:100%;
height:auto;
padding-top:10px;
padding-bottom:10px;
text-align:center;">
<span style="padding-right:10px;
padding-left:10px;"> Butterfly </span></p>
</div>
<div style="clear:all; height:100px;"> </div>
This is a known problem with current browsers. atlavis solution is the most simple. Until all browsers implement figure tag, then Feeela's way would work. But even then it would not be backwards compatible. I searched this issue for 3 days straight and I really hate the guys that made CSS decided to strip tables which were backwards compatible.
You could use the display: table-cell property on the class. But that is not supported by IE 6 or 7.