I want to align image in front of text and in the middle .
<div id="info">
<ul>
<h3>
<li>NAME: Mohit Kumar Singh</li>
<li>CONTACT:1234567890</li>
<li>ADDERESS:police line</li>
</h3>
</ul>
</div>
<div id="over" style="width:100%; height:100%" align="center">
<img src="mks.jpg" height="150" width=120" >
</div>
If you mean you want the image and the text to be displayed on the same link, then this should work:
I added a container div around both divs and then displayed them inline-block (inline to be on the same line, block so that the image can have a width).
However, for this to work, your style for id="over" was removed.
#container {
text-align: center;
}
#container div {
display: inline-block;
}
<div id="container">
<div id="info">
<h3>
<ul>
<li>NAME: Mohit Kumar Singh</li>
<li>CONTACT:1234567890</li>
<li>ADDERESS:police line</li>
</ul>
</h3>
</div>
<div id="over">
<img src="mks.jpg" height="150" width="120">
</div>
</div>
Related
When I was building a 2 columns layout and having the first items of each row floated to left, I was faced with an issue. If the element's text was much bigger than intended, the rows would break, items being pushed down, so instead of it looking like this:
it looks like this:
The code being:
<ul class="layout">
<li>
<article>
<div class="thumb">
<img class="img" alt="" src="">
</div>
<div class="post-info">
<h3>Hey there! You should make me bigger to break the layout.</h3>
<p>Some text here...</p>
</div>
</article>
</li>
<li>
<article>
<div class="thumb">
<img class="img" alt="" src="">
</div>
<div class="post-info">
<h3>Hey there! You should make me bigger to break the layout.</h3>
<p>Some text here...</p>
</div>
</article>
</li>
<li>
<article>
<div class="thumb">
<img class="img" alt="" src="">
</div>
<div class="post-info">
<h3>Hey there! You should make me bigger to break the layout.</h3>
<p>Some text here...</p>
</div>
</article>
</li>
<li>
<article>
<div class="thumb">
<img class="img" alt="" src="">
</div>
<div class="post-info">
<h3>Hey there! You should make me bigger to break the layout.</h3>
<p>Some text here...</p>
</div>
</article>
</li>
CSS:
.layout {
list-style: none;
}
.layout > li {
vertical-align: top;
width: 49%;
}
.layout > li:nth-child(odd) {
margin-right: 1%;
float: left;
}
.layout > li:nth-child(even) {
margin-left: 1%;
float: right;
}
Which works, but if we are to make the longer, it'd break.
If we add this line:
.layout > li:nth-child(even) + li {
clear: both;
}
It works just perfectly, no matter what I throw at it.
How come?
Just use only float: left for ALL elements in your case.
.layout {
list-style: none;
}
.layout>li {
vertical-align: top;
width: 49%;
float: left;
}
.layout>li:nth-child(odd) {
margin-right: 1%;
}
.layout>li:nth-child(even) {
margin-left: 1%;
}
<ul class="layout">
<li>
<article>
<div class="thumb">
<img class="img" alt="" src="">
</div>
<div class="post-info">
<h3>Hey there! You should make me bigger to break the layout.</h3>
<p>Some text here...</p>
</div>
</article>
</li>
<li>
<article>
<div class="thumb">
<img class="img" alt="" src="">
</div>
<div class="post-info">
<h3>Hey there! You should make me bigger to break the layout.</h3>
<p>Some text here...</p>
</div>
</article>
</li>
<li>
<article>
<div class="thumb">
<img class="img" alt="" src="">
</div>
<div class="post-info">
<h3>Hey there! You should make me bigger to break the layout.</h3>
<p>Some text here...</p>
</div>
</article>
</li>
<li>
<article>
<div class="thumb">
<img class="img" alt="" src="">
</div>
<div class="post-info">
<h3>Hey there! You should make me bigger to break the layout.</h3>
<p>Some text here...</p>
</div>
</article>
</li>
Application of clear clears out the floats for current container which would have otherwise got applied due to preceding or inherited styles.
The only layout that is now applied to these elements are their own. That's why, it works as desired.
https://developer.mozilla.org/en/docs/Web/CSS/clear
For your layout, you float box 1 to left, then box2 to left. Then, you apply clear:both because you want to stop applying floats. Then, for the next row boxes, you apply floats again because you want to place them left.
"When you apply clear:both to an element, it basically says "stop floating here" — this element and those after it in the source will not float, unless you apply a new float declaration to another element later on."
I want the text to be next to the dog, but when I use < br>... it goes under the dog
(dog is display: inline-block)
https://codepen.io/TylerL-uxai/pen/pweOWN
<div class="text-center">
<h1>
<img src="https://image.ibb.co/dCx2Ck/logo.png" style="display: inline-block" />
Pet Stay<br>
&<br>
Vacay
</div>
The problem is that display: inline-block is only applied to the image, and not to the accompanying text. What I would recommend is to separate out the image from the text, and give both display: inline-block:
<div class="text-center">
<img src="https://image.ibb.co/dCx2Ck/logo.png" alt="logo" border="0" style="display: inline-block" />
<h1 style="display: inline-block">
Pet Stay<br> &
<br> Vacay
</h1>
</div>
Alternatively, you can make use of floats, which allow your content to be displayed right next to each other, and flex to ensure that text is vertically centralised:
.text-center .left-column, .text-center .right-column {
float: left;
height: 175px;
display: flex;
align-items: center;
justify-content: center;
}
<div class="text-center">
<div class="left-column">
<img src="https://image.ibb.co/dCx2Ck/logo.png" alt="logo" border="0" />
</div>
<div class="right-column">
<h1>
Pet Stay<br> &
<br> Vacay
</h1>
</div>
</div>
Note that you have your paragraph and image inside an (un-closed) <h1> tag, which I've removed for the purpose of my examples. <h1> is reserved for header text. I'm assuming you want the text to have the header styles, so I've replaced the <p> tags with <h1> tags in the examples.
Hope this helps! :)
You just need to wrap your text and use inline-block for the wrapper:
<div class="text-center">
<h1>
<img src="https://image.ibb.co/dCx2Ck/logo.png" alt="logo" border="0" style="display: inline-block" />
<div style="display: inline-block">
Pet Stay
<br>
&
<br>
Vacay
</div>
</h1>
</div>
I'm having a problem with css.
When my image becomes smaller than the list next to it, the grey bar at the bottom of the picture (.meter) won't stick anymore to the picture. I don't know how to solve this. I think it's the opposite of clear that I need, But I couldn't find it on the internet
here is the jsFiddle:
http://jsfiddle.net/RnSq7/
<img src="http://images7.alphacoders.com/407/407975.jpg" />
<section>
<p>
<ul>
<li>long list</li>
<ul>
</p>
</section>
<div class="meter"><span style="width: 50%"> </span></div>
I hope sombeody can help me, thanks in advance.
Just change the order in your markup :
FIDDLE
<img src="http://images7.alphacoders.com/407/407975.jpg" />
<div class="meter"><span style="width: 50%"> </span>
</div>
<section>
<p>
<ul>
<li>shalalalala</li>
<li>shalalalala</li>
<li>shalalalala</li>
<li>shalalalala</li>
...
</ul>
</p>
</section>
I didn't mention but you are missing the / sign on your closing ul tag in your fiddle. I corrected that typo in the demo too.
Simplest way is to take the div and put it just after the img. But if your div will not house any other element, I would suggest to take it off and use 'border-bottom' property.
Option 1:
<img src="" />
<div class="meter"><span style="width: 50%"> </span>
</div>
<section>
<p>
<ul>
<li>shalalalala</li>
<li>shalalalala</li>
<li>shalalalala</li>
<li>shalalalala</li>
</ul>
<p>
</section>
Options 2:
<img src="" class="test"/>
and then in stylesheet
.test {
border-bottom: 20px solid black;
}
I have a container which has three divs. Each div contains a hidden div which has a 'hide' class (display:none;) inside which is supposed to show when hovering on its parent div.
I use toggleClass('show') to which makes the secretDiv display has a block. I need the secretDiv to be shown when hovering on the parent div.
The parent div should show on top of the div below, and not push the other divs
http://jsfiddle.net/2xLMQ/4/
--- HTML ---
<div class="row">
<div class="element">
<img src="http://placehold.it/200x100" alt="" title="" />
<div class="secretDiv hide">
<p>Some secret text and stuff</p>
</div>
</div>
<div class="element">
<img src="http://placehold.it/200x100" alt="my image" title="image title" />
<div class="secretDiv hide">
<p>Some secret text and stuff</p>
</div>
</div>
</div>
<div class="row">
<div class="element">
<img src="http://placehold.it/200x100" alt="" title="" />
<div class="secretDiv hide">
<p>Some secret text and stuff</p>
</div>
</div>
<div class="element">
<img src="http://placehold.it/200x100" alt="my image" title="image title" />
<div class="secretDiv hide">
<p>Some secret text and stuff</p>
</div>
</div>
</div>
--- CSS ---
.hide {display:none;}
.show {display:block;}
.row {height:160px;background:#dedede;float:left;width:480px;position:relative:z-index:1;}
.row .element {position:relative;z-index:9;text-align:center; float:left; background:#666;width:200px;padding:12px;margin:6px;}
.row .image {}
.row .secretDiv {background:#ff0000;padding:8px;}
--- JS ---
$('.element').hover(function(){
$('.element .secretDiv').toggleClass('show');
});
First at all change your selector to only match the respective hidden div:
$('.secretDiv',this).toggleClass('show');
Then add another class on that item to display ontop of the others :
$(this).toggleClass('ontop');
And the class:
.row .ontop {z-index:10;background:orange;}
Check this Demo
Simply add absolute positioning to your 'secret' div:
.row .secretDiv {background:#ff0000;padding:8px; position: absolute; top: 5px; left: 5px;}
Fiddle here: http://jsfiddle.net/moonspace/2xLMQ/12/
As a bonus, I've edited your jQuery to show only the 'secret' div associated with each element:
$('.secretDiv', this).toggleClass('show');
I cant get these two pieces of content to display next to each other. I never had any problems with displaying content this way before so would appreciate any help available
HTML
<div class="block-one">
<h3>Block 1</h3>
<ol>
<li>One</li>
</ol>
</div>
<div class="clear-div"></div>
<div class="block-two">
<div class="block-two-title">Block 2</div>
<div class="thumb-title">
<img src="images/example.jpg" width=155 height=130 />
<h4>Title</h4>
<p>Description</p>
</div>
<div class="thumb-title">
<img src="images/example.jpg"width=155 height=130 />
<h4>Title</h4>
<p>Description</p>
</div>
<div class="thumb-title">
<img src="images/example.jpg"width=155 height=130 />
<h4>Title</h4>
<p>Description</p>
</div>
CSS
.popular-games { float:left }
.latest-screenshots img{ display:inline-block}
.thumb-title{display: inline-block}`
Here is your fiddle. You cannot get those two blocks to display next to each other because you have a clearing div between them. If you remove it and float both blocks, you will get the desired result, like here
<div class="block-one">
<h3>Block 1</h3>
<ol>
<li>One</li>
</ol>
</div>
<!-- remove this one <div class="clear-div"></div> -->
<div class="block-two">
[…]
Just add these CSS rules:
html, body { height: 100%; }
body > div {
float: left;
}
Here is the Jsfiddle: DEMO