I'm trying to place icon next to text using span but the images are not flush with the text that is beside them. They are moved up. I'm wondering if anyone knows why it is displayed this way and how to fix it. Thanks you.
<div class="search" id="search">
<input type="search" placeholder="What can we help you find today?"><span>
<img src="search.png" width="20" height="20"></span>
</div>
<div class="customer" id="customer">
<div class="My Account">
<p>My Account<span><img src="user.png" width="23" height="23"></span>
</p>
</div>
<div class="cart">
<span>Cart |</span><span>0</span><span>items</span><span>
<img src="cart.png" width="23" height="auto"></span>
</div>
</div>
Because the default vertical alignment for inline elements is baseline. Set the alignment on your images to middle> Also be sure to remove any white space in your code that would be between those elements as browsers are sensitive to it:
img {
vertical-align: middle;
}
img {
vertical-align: middle;
}
<div class="search" id="search">
<input type="search" placeholder="What can we help you find today?"><span><img src="search.png" width="20" height="20"></span>
</div>
<div class="customer" id="customer">
<div class="My Account">
<p>My Account<span><img src="user.png" width="23" height="23"></span>
</p>
</div>
<div class="cart">
<span>Cart |</span><span>0</span><span>items</span><span><img src="cart.png" width="23" height="auto"></span>
</div>
</div>
Related
<div style="float: left;">
<img src="image.png"/>
<div style="font-size: 100px;">Health And Wellbeing</div>
</div>
When I run this code, the words appear underneath the picture, is there any way to make the words appear to the right of the text?
I am not sure why your container div has float: left; in its styles, but you can use Flexbox to arrange the contents with more flexibility.
Here's a simple example:
<div style="float: left; display: flex;">
<img src="https://picsum.photos/seed/picsum/200/300" />
<div style="font-size: 100px;">Health And Wellbeing</div>
</div>
Isn't it simple? Just put <img> after the words...
<div style="float: left;">
<div style="font-size: 100px;">
Health And Wellbeing
</div>
<img src="image.png" />
</div>
So, I am new to responsive design and placed Form code on top of one image and it will not display in mobile view. It appears to happen around 990px wide that the form will go out of vision. I can't identify where the #media or what CSS class would hide the form after it goes to a certain width.
URL: subscribe.ign.com/social
<div class="site-slider">
<div class="slider">
<div class="flexslider">
<ul class="slides">
<li>
<div class="overlay"></div>
<img src="http://static.ziffdavis.com.s3.amazonaws.com/cimages/blackfriday/Black-Friday-Email-Landing-Pages/black-friday-chaos-store-1600x750.png" alt="">
<div class="slider-caption visible-md visible-lg">
<div id="bouncex" align="center" style="width:558px; margin: 0 auto; ">
<!--LYRIS-->
<div class="heading-section col-md-12 text-center">
<div class="contact-form" style="background-color:#000 !important; padding: 25px">
<h2 style="text-transform:capitalize; font-size:34px">BLACK FRIDAY IS COMING</h2>
<br/>
<p style="text-transform:capitalize; font-size:28px">UP TO 50% OFF</p>
<h2 style="text-transform:capitalize; font-size:24px">ON HOTTEST GAMES AND TECH DEALS DELIVERED TO YOUR INBOX</h2>
<form name="contactform" id="contactform">
<p><input name="txtEmail" id="txtEmail" type="text" placeholder="Your Email">
</p>
<input type="button" class="mainBtn" name="btnSubscribe" id="btnSubscribe" value="Subscribe">
<input type="hidden" name="txtList" id="txtList" size="70" value="ign-deals" />
<p style="color:#FFF;font-size:14px">Subscribing to a newsletter indicates your consent <br/>to our <a style="color:#d3222a; text-decoration:underline" href="http://www.ziffdavis.com/terms-of-use" title="Terms of Use" rel="nofollow">User Agreement</a> and <a style="color:#d3222a; text-decoration:underline" href="http://www.ziffdavis.com/privacy-policy" title="Privacy Policy" rel="nofollow">Privacy Policy</a><span id="article-punctuation" class="article-punctuation">
</span></p>
</form>
</div> <!-- /.contact-form -->
</div> <!-- END LYRIS -->
</div>
</div>
</li>
</ul>
</div> <!-- /.flexslider -->
</div> <!-- /.slider -->
</div> <!-- /.site-slider -->
just set :
<ul class="slides" style="list-style:none; padding-left: 0;">
<img style="width: 100%; " src="your url" alt="">
Try it now : http://codepen.io/anon/pen/qOJEaw
Your div with slider-captionclass also has visible-md visible-lg, you should remove this 2 classes. Basically, it makes that div visible only on screens with 992px width or bigger.
You can learn more about it on bootstrap documentation
The reason it is 'disappearing' is because of the parent element: <div class="slider-caption visible-md visible-lg">.
It is getting display: none !important; at 992px which is a bootstrap breakpoint. Specifically though it is the visible-* class that is doing it. Read about that in the Bootstrap docs.
I want to align both image tag and p span tag next to each other. And I do not want to put them in two different div's to follow the grid system as then it doesn't give me the correct final output that I desire.
Here is my small piece of code that I want to correct: FIDDLE
<div class="row">
<div>
<div class="col-md-9 col-md-offset-3" style="padding-right:0px">
<img src="Images/signin_logo.jpg" width="150" height="110" />
<p> <span style="color:#989898; font-size:36px">Template Fire Sign In</span>
<br /> <span style="color:#A8A8A8; font-size:18px">Please sign in with your credentials now to get access.</span>
</p>
</div>
</div>
</div>
FIDDLE
I want the <p> tag next to the image tag.
Two options
.row p {
display: inline-block;
}
<div class="row">
<div>
<div class="col-md-9 col-md-offset-3" style="padding-right:0px">
<img src="Images/signin_logo.jpg" width="150" height="110" />
<p> <span style="color:#989898; font-size:36px">Template Fire Sign In</span>
<br /> <span style="color:#A8A8A8; font-size:18px">Please sign in with your credentials now to get access.</span>
</p>
</div>
</div>
</div>
or
.row img {
float: left;
}
<div class="row">
<div>
<div class="col-md-9 col-md-offset-3" style="padding-right:0px">
<img src="Images/signin_logo.jpg" width="150" height="110" />
<p> <span style="color:#989898; font-size:36px">Template Fire Sign In</span>
<br /> <span style="color:#A8A8A8; font-size:18px">Please sign in with your credentials now to get access.</span>
</p>
</div>
</div>
</div>
Apply this css --
img, p {
display:inline-block;
}
This will make the img and p tag to be next to each other, as long as both element's width doesn't cross the container's width.
Can anyone please help me in aligning this divs vertically i want secondDiv to come below firstDiv. i saw many posts but not able to resolve it can anyone change my code to work it.
<div>
<div style="position:relative;width:800px;margin:0;padding:0">
<div id="firstDiv" style="text-align:center;position:absolute;margin-top:0">
<div>
<span>
<input type="submit" title="" value="Select Photos From Your Computer"
name="sendBtn">
</span>
</div>
<div style="width:492px;height:20px;position:absolute;top:8px;overflow:hidden;z-index:100">
<form target="msa_frame" name="picForm" id="picForm" method="post" enctype="multipart/form-data">
<input type="file" style="opacity:0;font-size:20px;" accept="image/*"
name="d" id="d">
</form>
</div>
</div>
<div id="secondDiv" style="text-align:center;margin:3px 0 12px;">
<span>You can add upto</span>
<span style="font-weight:bold">3 Photos</span>
</div>
</div>
</div>
Remove the "position:absolute" from firstDiv's style attribute, and it seems to answer your question.
This also results in things moving around. So you need to describe exactly what you want.
You should avoid using position:absolute and position:fixed unless you are doing something fancy (eg. a menu bar, or a window popup within a window). So remove all "position:..." stuff as well as "top:...".
And why do you have that opacity 0 file input in the middle? If you want it to hide and also remove the empty space, change that to "display: none" (and to unhide: "display: block" (like a div) or "display: inline" (like a span))
Here it is with the opacity changed to display, and all positioning stuff (top:, position:, etc.) removed.
<html>
<head>
<style>
</style>
</head>
<body>
<div>
<div style="width: 800px; margin: 0px; padding: 0px">
<div id="firstDiv" style="text-align: center; margin-top: 0">
<div>
<span>
<input type="submit" title="" value="Select Photos From Your Computer" name="sendBtn" />
</span>
</div>
<div style="width:492px; height:20px; overflow:hidden; z-index:100">
<form target="msa_frame" name="picForm" id="picForm" method="post" enctype="multipart/form-data">
<input type="file" style="display: none; font-size:20px;" accept="image/*" name="d" id="d" />
</form>
</div>
</div>
<div id="secondDiv" style="text-align: center; margin: 3px 0 12px;">
You can add up to
<span style="font-weight:bold">3 Photos</span>
</div>
</div>
</div>
</body>
</html>
After reading your comments on other's answers, try this: http://www.quirksmode.org/dom/inputfile.html http://stackoverflow.com/questions/1944267/how-to-change-the-button-text-of-input-type-file
If you remove position: absolute; from the firstDiv it will work ... see here for an example
remove position:absolute; for firstdiv
changed in div like
> <div id="firstDiv" style="text-align:center;margin-top:0;">
and you will get like this output
attached is an image.
I am trying to get the text format as shown at the right-most end. i.e. within the height of the thumbnail (36px) name, time, date have to be shown vertically aligned. I am having problem showing the text vertically aligned. Here's my code -
<div id="sresults" style="position:absolute;top:120px; left:36%;">
<div id="0" style="width:500px;padding:5px;cursor:pointer;clear:both;">
<div id="content0" style="float:left; font-size:13px;">"Hey dude how are you doing?"</div>
<div id="meta0" style="float:right;">
<img src="http://www.mnducksvolunteer.org/_/rsrc/1262377955090/services/Google-Contacts-32.png" width="36px" title='Google Contacts'></img>
<img src="http://profile.ak.fbcdn.net/hprofile-ak-snc4/hs455.snc4/49881_1146922913_477096_q.jpg" width="36" title="peter"></img>
<div id='name' style="float:right; font-size:11px">Peter</div>
<div id='time' style="float:right;font-size:11px;">19:23</div>
<div id='date' style="float:right;font-size:11px;">23 Dec'10</div>
</div>
</div>
To be accurate, I want the div ids 'name', 'time', 'date' to be aligned like in the image. how?
Also note that the div with id="0" is one of the results, there'll be 10 such in a page all under <div id="sresults">
Here's what you want: http://www.bravegnuworld.com/rjune/test.html
Notice encapsulating the name, etc in a div that is floated right? You have three divs(block elements, they'll automatically stack). Put those inside another div, and you now have a block element with three stacked blocks inside it. You can either use "float:right" or "display:inline-block" to make the div display on the same level. as the rest of the line.
<div id="sresults" style="position:absolute;top:120px; left:36%; background:yellow">
<div id="0" style="width:500px;padding:5px;cursor:pointer;clear:both; background:red">
<div id="content0" style="float:left; font-size:13px; background:blue">"Hey dude how are you doing?"</div>
<div id="meta0" style="float:right; background:green">
<img src="http://www.mnducksvolunteer.org/_/rsrc/1262377955090/services/Google-Contacts-32.png" width="36px" title='Google Contacts'></img>
<img src="http://profile.ak.fbcdn.net/hprofile-ak-snc4/hs455.snc4/49881_1146922913_477096_q.jpg" width="36" title="peter"></img>
<div style="float:right">
<div id='name' style="font-size:11px">Peter</div>
<div id='time' style="font-size:11px;">19:23</div>
<div id='date' style="font-size:11px;">23 Dec'10</div>
</div>
</div>
</div>
You can use table instead of div it's seems more logical to me:
<div id="sresults" style="position:absolute;top:120px; left:36%;">
<div id="0" style="width:500px;padding:5px;cursor:pointer;clear:both;">
<div id="content0" style="float:left; font-size:13px;">"Hey dude how are you doing?"</div>
<table id="meta0" style="float:right;">
<tr>
<td>
<img src="http://www.mnducksvolunteer.org/_/rsrc/1262377955090/services/Google-Contacts-32.png" width="36px" title='Google Contacts'/>
<img src="http://profile.ak.fbcdn.net/hprofile-ak-snc4/hs455.snc4/49881_1146922913_477096_q.jpg" width="36" title="peter"/>
</td>
<td style="text-align:right;">
<div id='name' style="font-size:11px">Peter</div>
<div id='time' style="font-size:11px;">19:23</div>
<div id='date' style="font-size:11px;">23 Dec'10</div>
</td>
</tr>
</table>
</div>
</div>
UPD
Here is code with divs:
<div id="sresults" style="position:absolute;top:120px; left:36%;">
<div id="id0" style="width:500px;padding:5px;cursor:pointer;clear:both;">
<div id="content0" style="float:left; font-size:13px;">"Hey dude how are you doing?"</div>
<div id="meta0" style="float:right;">
<img src="http://www.mnducksvolunteer.org/_/rsrc/1262377955090/services/Google-Contacts-32.png" width="36px" title='Google Contacts' style="float: left;"/>
<img src="http://profile.ak.fbcdn.net/hprofile-ak-snc4/hs455.snc4/49881_1146922913_477096_q.jpg" width="36" title="peter" style="float: left;"/>
<div style="text-align:right; float:right">
<div id='name' style="font-size:11px">Peter</div>
<div id='time' style="font-size:11px;">19:23</div>
<div id='date' style="font-size:11px;">23 Dec'10</div>
</div>
</div>
</div>
</div>