Can you explain how can I make both facebook icons on same line?
This is simple code but I'm not good at css
<i><h1 align="center">Lorem Ipsum</h1></i>
<p>
<img src='https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRcJVzb8HeSBBgdqKTmAhtBwG0EeMuO660TwErH9HaXPf76JFp5fw' width="95px" heigh="85px">
</p>
<i><h3 align="center">Lorem</h3></i>
<p style="text-align: right;margin-right: 25px; font-size: 21px;margin-top:-15px;">
<img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRcJVzb8HeSBBgdqKTmAhtBwG0EeMuO660TwErH9HaXPf76JFp5fw" width="95px" heigh="85px">
</p>
And this is the demo
Correct demo - https://jsfiddle.net/vjt4vxmL/2/
Your structure is rather odd, but you can just decrease the height of the iframe to horizontally line up the buttons with the image:
<iframe height="36"...
https://jsfiddle.net/vjt4vxmL/3/
Add a class to your first image. This code should put the buttons right next to each other just replace the word class in the code with whatever class you assign.
.class {
position: relative;
top: 60px;
left: -100px;
}
To align both next to each other you can use:
img{float:left;}
Related
When we insert a image to blogger post it automatically inserts a separator with 'text-align:center;'. I want to remove it(and set it to left instead of center). But it's hard to remove it manually for every image in every post. Is there a easy way to do this automatically?
I tried .post-body img{float:left;} template CSS. This gets the image to left, but then texts flow to right side of the image instead of under the image. Please help me to do this.
Edit: Below is the normal div that an image would be automatically surrounded when a image is added to a blogger post. Below that is the texts of post.
<div class="separator" style="clear: both; text-align: center;">
<a href="-----.html"; imageanchor="1" style="margin-left: 0em; margin-right: 1em;">
<img alt="" border="0" src="1.bp.blogspot.com/1.JPG"; title="" />
</a></div>
<br/>
<span style="font-size: large;">text paragraph texts texts</span><br />
Within the <b:skin> or in a separate <style> within the <head> of your template include the following CSS code:
.post-body .separator {
text-align:left !important
}
I can't see the rest of your code, if you uploaded something like a js.fiddle that would help! The code below should fix the text alignment with your images, if it doesn't let me know!
.post-body img {
float: left;
text-align: left;
}
.post-body .separator a {
margin: 0!important;
}
Following is my fiddle in which I am trying to vertically align the text with Icon Font. Kindly let me know what's an appropriate way to do such alignment:
How can I vertically align the font icon with the text on this fiddle
Wrong output:
[ICON]Text
Text Text
Expected Output:
Text
[ICON] Text
Text
You can simply make the icon float (bootply #1):
.panel-title .glyphicon {
float: left;
margin-right: 10px;
}
but I prefer using Block Formatting Context (BFC) properties when it comes after a floating element (needs an extra element to enclose your text). It basically creates a column along your float instead of letting your text wrap around it as usual (bootply #2):
HTML:
<a href="#collapseFour">
<span class="left mr1 glyphicon glyphicon-file"></span>
<span class="bfc">Reports Reports Reports Reports Reports Reports Reports</span>
</a>
CSS:
.left {
float: left;
}
.bfc {
overflow: hidden;
}
div it.
put the icon in a separated div, like this:
<div>
{icon}
</div>
<div>
{text}
</div>
and put them inline. display:inline-block... this should work.
you can make a little table like this
<table>
<tr>
<td valign="middle">[ICON]</td><td>Text<br>Text<br>Text</td>
</tr>
</table>
I have a block of html that I want to act as a clickable link. In the block of code below, I would like to make the whole div into a link.
<div id="clickableLink">
<h3>Link Heading</h3>
<img src="linkPic.jpg" alt="Link alt text" width="65" height="65" />
</div>
HTML5 permits surrounding the html in an anchor tag (I think). See below
<a href="goThere.html">
<div id="clickableLink">
<h3>Link Heading</h3>
<img src="linkPic.jpg" alt="Link alt text" width="65" height="65" />
</div>
</a>
However, this seems wrong to me. How will software such as screen readers describe the link.
I also considered the following CSS trick. I altered the HTML to be
<div id="clickableLink">
<h3>Link Heading</h3>
<img src="linkPic.jpg" alt="Link alt text" width="65" height="65" />
</div>
and then used CSS to style the link to cover the whole of the div. See below:
#clickableLink {
position: relative;
width: 100px;
height: 200px;
z-index: 0;
}
h3 {
z-index: 0;
}
img {
z-index: 0;
}
a {
display: block;
position: absolute;
top: 0;
left: 0;
width: 100px;
height: 200px;
z-index: 1;
}
This works perfectly in all browsers apart from IE. Does anyone else have any suggestions?
Your first approach is actually the best. To describe your link, you should use the a element's attributes such as title, alt and possibly any WAI-ARIA markup you wanted to employ. This is good industry practice anyway and allows you to wrap content in an a tag without worrying about accessibility.
The thing that will allow older browsers to render it properly (and to make sure it validates) is to use inherently inline elements inside an inline element. In other words, block level elements can not be placed inside inline ones (according to the HTML, not the values that CSS may give the element). You can then use CSS to make a span act like it is block level. So the markup could easily be:
<a href="goThere.html">
<span id="clickableLink">
<span class="headerthree">Link Heading</span>
<img src="linkPic.jpg" alt="Link alt text" width="65" height="65" />
</span>
</a>
If you declare that the A is block level, then you wouldn't even need the span. Problem here is that you lose the SEO of using Header elements. So...
The best thing is probably to leave it specced for HTML5 as you have it above, even though it seems wrong. To help SEO and screen readers, use a title tag to "describe" the anchor. The code will validate just fine. Then, make sure your A is display: block, and I think older browsers will render it ok, too.
i have this page:
login: maria#mail.com
password: m
I want to have the string "Editar mi perfil" aligned on the right, so i have added:
text-align: right
but it doesn't work,
I have tried also:
float:right
It works but goes a bit upper than I want.
Any idea?
Regards
Javi
The problem is the display:inline. Remove it (and perhaps the top margin, if you don't want it), and it should work.
use <div> instead of <p>
<div style="float: left;">
<h2 id="nombre_apellidos">Maria Galindo Alvarado</h2>
</div>
<div style="float:right;padding-top:0px;" id="editar_o_mensaje">
<a id="enlace_editar_perfil" href="/rs2/web/miembros/edit/id/2">Editar mi perfil</a>
</div>
Change proper padding-top:0px; to align
Adding float: right; padding-top: 5px; in enlace_editar_perfil seems to fix it in Firefox. The padding-top will push it down to the position you want it.
I have a login form on my website that displays when a user clicks a button. It is a div that floats over other content. It only takes up a small portion of the page (directly below the sign in link).
It all works fine apart from one small thing. It displays aligned to the left of the sign in link (i attempted a diagram below).
|sign in|
|sign in stuff here|
I actually want it to look like this (align to the right of the sign in link):
|sign
in|
|sign in stuff here|
This is my HTML:
<div class="clear">
<a class="button" id="SignInBtn" href="#" onclick="toggleSignInBox(); return false;"><span id="spanSignIn">Sign In / Register <img src="../../Content/shared/arrow_down.png" border="0" /></span></a>
</div>
<div id="signinbox" style="display:none;">
<p>Who would you like to sign in with?</p>
<p>Google</p>
<p>Yahoo</p>
<p>Other</p>
</div>
And the CSS for the sign in box:
signinbox {background-color:#C1DEEE;
padding:10px; z-index:1; position:
absolute; top:66px; }
Is it possible to do this in just CSS?
Thanks
Wrap the signin info inside another div and call it inner-signin then position that relative to the absolute positioned outter div. You may also have to set the width on the absolute positioned outter div.
div.inner-signinbox {
position: relative;
right: 20px;
}
signinbox {
width: 250px; //ADD A WIDTH
background-color:#C1DEEE;
padding:10px;
z-index:1;
position: absolute;
top:66px;
}
If that does not work, why not just add a "left" property to the signingbox to set the horizontal position as well as the vertical. Is there a reason you don't can't absolute position the element with x and y?
I think you may want to try
float: right
or
text-align: right
Put the sign-in stuff inside the div containing the sign-in button.
Make the container position: relative.
Then give the sign-in stuff position: absolute; and right: 0;.
Incidentally, take care here; requiring Javascript merely to log in is pretty rude. A lot of people run NoScript for a variety of reasons.
I have created new div with class "main-pane". You can adjust the position of "signinbox". from the css by changing the value of "right" and "top".
<div class="main-pane">
<div class="clear">
<a class="button" id="SignInBtn" href="#" onclick="toggleSignInBox(); return false;">
<span id="spanSignIn">Sign In / Register <img src="../../Content/shared/arrow_down.png" border="0" /></span>
</a>
</div>
<div id="signinbox" style="display:none;">
<p>Who would you like to sign in with?</p>
<p>Google</p>
<p>Yahoo</p>
<p>Other</p>
</div>
</div>
.main-pane{
position:relative;
}
#signinbox{
width: 250px;
background-color:#C1DEEE;
padding:10px;
z-index:5;
position: absolute;
top:66px;
right:0px;
}
Thanks,
Arun Krishnan