I have been having a difficult time positioning a Facebook Like & Send button combination. I finally was able to control the vertical positioning using a table and CSS. The code and CSS are below. Now, I cannot control the horizontal positioning. No matter what I do, the Like button is about 7 pixels from the left side of the browser. Even if I put a handful of  s in the column before the Facebook code, the Like button is just 7 pixels from the left side of the screen. The code and CSS I am using is below, and they don't change the horizontal positioning of the Facebook Like and Send buttons.
Any idea how I could move the Facebook Like & Send buttons 100 pixels from the left side of the screen?
Thanks in advance,
John
The code:
<table class="like">
<tr>
<td>
</td>
<td>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({appId: 'your app id', status: true, cookie: true,
xfbml: true});
};
(function() {
var e = document.createElement('script'); e.async = true;
e.src = document.location.protocol +
'//connect.facebook.net/en_US/all.js';
document.getElementById('fb-root').appendChild(e);
}());
</script>
</td>
</tr>
</table>
The CSS:
table.like {
margin-top: 140px;
margin-left: 50px;
text-align: left;
font-family: Arial, Helvetica, sans-serif;
font-weight: normal;
font-size: 14px;
color: #000000;
width: 450px;
table-layout:fixed;
background-color: #FFFFFF;
border: 2px #FFFFFF;
border-collapse: collapse;
border-spacing: 0px;
padding: 0px;
text-decoration: none;
vertical-align: text-bottom;
}
table.like td {
border: 0px solid #fff;
text-align: left;
height: 10px;
width:100px;
}
The FB script is inserting code as a child of the element fb-root. Any CSS you want to use to position the elements should be applied to fb-root. That would eliminate the need for the table.
Take the empty #fb-root div tag and closing tag and place them directly after your opening body tag.
Then wrap the script in the div and class of your choice and style however you'd like.
<body>
<div id="fb-root">
</div>
<div id="wrapper">
<div id="socialMedia">
<-- fb button script -->
</div>
</div>
</body>
Related
So what I thought was going to be simple has turned out to be quite challenging for some reason. Basically my challenge here is that I have text that needs to be the same format when expanded as it is while in a smaller window. While it is in the smaller window it is perfectly centered but when expanded it has way too much space to the right.
I have followed the directions on a different post saying to set it to a fixed position and then set the margins to auto but I now am seeing that there isn't a "min-margin-right.
<div style = 'position: fixed; z-index:4; left: 0; right: 0; top:80%; margin-left: auto; margin-right: auto; width: 50%; font-style: Courier; font-weight: bold; font-size: 25px;'>
<html>
<head>
<title>Conquerer's Quest</title>
</head>
<body>
<div style='position:absolute;z-index:-3;left:0;top:0;width:100%;height:100%'>
<img src='space.jpg' style='width:100%;height:100%' alt='[]' />
</div>
<!-- main game box -->
<div style='position:absolute;z-index:0;left:2%;top:3%;width:80%;height:75%; background-color: #900; border: 5px double black'>
<canvas id = gameCanvas>
</canvas>
</div>
<!-- descriptions box -->
<div style='position:absolute;z-index:1;left:2%;top:78.5%;width:80%;height:20%; background-color: #656060; border: 5px double black'>
<canvas id = instructionsCanvas>
</canvas>
</div>
<!-- description header -->
<div style = 'position: fixed; z-index:4; left: 0; right: 0; top:80%; margin-left: auto; margin-right: auto; width: 50%; font-style: Courier; font-weight: bold; font-size: 25px;'>
<u align = "center">
Conquerer's Quest Summary
</u>
</div>
<!-- description text -->
<div style = 'position:absolute; z-index:4;top:82%;left:5%;right: 20%; font-style: Courier;font-weight: small; font-size: 21px;'>
<p align="center">
<p1>Conquerer's Quests is an RPG following the adventures of you the player. You can choose between several classes including the swordsman, the assassain, the knight, the wizard, and the ranger. The main objective of the game is to locate and get into the Conquerer's Sanctuary but along the way the player can level up their character, sell and buy armor and weapons, and complete side quests.</p1>
</div>
</body>
</html>
Your code seems to be working for me—at least as far as horizontal centering is concerned. What browser are you using? Perhaps that is the root cause of the problem?
I've got multiple div elements nested in a div. What I want is for the #title-text div to be next to the image - in this case using a float.
The problem is that the text in the div spaces out the div when it has no more room in width as you can see in this jsFiddle.
I want to use floats because there will be multiple tiles using the same classes, and those tiles have different sizes and images etc. Also I don't want to have the #title-text to have a fixed width because of multiple tiles using it and thus having different widths.
Here's the HTML:
<div id="tile-wrapper">
<div id="category-text">
<p class="category-content">Smartphones / software</p>
</div>
<div id="tile-image">
<img src="images/wp10.jpg" class="tile-image" name="title" />
</div>
<div id="title-text">
Placeholder Text placeholder text placeholder text placeholder text
</div>
<div id="date-time-text">
<p class="date-time">3 minutes ago.</p>
</div>
</div>
Okay, so first I added display inline to your classes like this
.tile-image {
margin: 0 auto;
display:inline;
}
.title-text {
margin: 0 5px 5px 0px;
font-weight: 300;
text-shadow: 1px 1px 3px rgba(0,0,0,.3);
text-decoration: none;
font-size: 22px;
color: black;
display:inline;
}
then I put a width and alignment on #title-text
#title-text {
float: left;
margin-left: 5px;
margin-bottom:10px;
text-align:left;
width:50%;
}
I found the answer to my question with Jquery. Here's the solution if anyone wonders.
$(document).ready(function () {
var imageWidth = $('#tile-image').width();
var titleTextWidth = $('#title-text').width();
$('#title-text').width(imageWidth);
$('#tile-wrapper').width(imageWidth * 2 + 30); // +30 for margins.
});
I'm applying a css class for the following asp.net custom control which renders in browser something like this:
<div class="box search_mlo">
<div class="gray_box">
<div class="blue_box">
<div>
<input id="Search_srcText" class="btn" type="text" onblur="return objSearchWidgetLibrary.searchLostFocus(ECMSSearchTextBox2_srcText)" onfocus="return objSearchWidgetLibrary.clearText2(ECMSSearchTextBox2_srcText)" onkeypress="return objSearchWidgetLibrary.fnTrapKD2('ECMSSearchTextBox2_srchAnchor1',event)" name="ECMSSearchTextBox2$srcText">
</input>
<a id="Search_srchAnchor1" class="btn" onclick="return objSearchWidgetLibrary.onsearchclick1('ECMSSearchTextBox2_srcText','ECMSSearchTextBox2_srchAnchor1')" href="../System/SearchResults.aspx?k=">
<span>Search</span>
</a>
</div>
</div>
</div>
</div>
The CSS class is:
.blue_box div a.btn
{
background: url("/publish/images/btn_search.jpg") no-repeat;
height: 36px;
width: 86px;
}
.blue_box div input.btn
{
background: url("/publish/images/bg_search.jpg") no-repeat scroll 9px 6px #FFFFFF;
border: 1px solid #0064AD;
color: #BFBFBF;
float: left;
font-size: 1.3em;
font-style: italic;
font-weight: bold;
height: 21px;
margin-right: 4px;
margin-top: 2px;
padding: 5px;
width: 328px;
}
so it looks something like search box and button to submit. This control is used by other sites so, for some sites we require only hyperlink search button and in some we replace image. But in this case I'm trying to replace image but I'm getting only half of the image something like below..
http://i.stack.imgur.com/Dfaqn.jpg
You can see a search text coming inside that image.
The prototype is something like this and the first button should match with this:
http://i.stack.imgur.com/QpRmg.jpg
I cannot remove that span tag present inside anchor tag since in other sites its working fine and removing that would create problem in them.
can any one help with feasible solution where I can get the entire image.?
Thanks in advance.
#Sayed; a tag is an inline element & inline elements didn't take height, width, vertical margin & padding. So; give display:block in your css for a tag like this:
.blue_box div a.btn
{
background: url("/publish/images/btn_search.jpg") no-repeat;
height: 36px;
width: 86px;
display:block
}
In a way this is simple but I have been trying to figure out this for hours now so I decided to write the problem down and maybe with your help I could find a solution.
On layout heading (h1, h2, h3) have a line next to them. Basically somehting like this:
Example Heading--------------------------------------------
Another Example Heading---------------------------------
One more------------------------------------------------------
So that is end result (----- is gfx as background-image). How would you do it? The background color could change and/or have opacity.
One thing what I was thinking would be this:
<h1><span>Example Heading</span></h1>
when the CSS would look lke this:
h1 {
background-image: url(line.png);
}
h1 span {
background: #fff;
}
But since the background color can be something else than white (#fff) that doesn't work.
Hopefully you did understand my problem :D
Hacky but, maybe something like this:
HTML:
<h1>
<span>Test</span>
<hr>
<div class="end"></div>
</h1>
And the css:
h1 span{ float :left; margin-right: 1ex; }
h1 hr {
border: none;
height: 1px;
background-color: red;
position: relative;
top:0.5em;
}
h1 div.end { clear:both; }
Fiddle here
This worked for me.
HTML
<div class="title">
<div class="title1">TITLE</div>
</div>
CSS
.title {
height: 1px;
margin-bottom: 20px;
margin-top: 10px;
border-bottom: 1px solid #bfbfbf;
}
.title .title1 {
width: 125px;
margin: 0 auto;
font-family: Arial, sans-serif;
font-size: 22px;
color: #4c4c4c;
background: #fff;
text-align: center;
position: relative;
top: -12px
}
I don't think you can achieve this with pure css because the heading text could be any length. Here is a dynamic javascript solution which sets the width of the line image based on the width of the heading text.
Click here for jsfiddle demo
html (can be h1, h2 or h3)
<div class="heading-wrapper">
<h1>Example Heading</h1>
<img src="line.png" width="193" height="6" alt="" />
</div>
css
h1{font-size:16px}
h2{font-size:14px}
h3{font-size:12px}
h1,h2,h3{margin:0;padding:0;float:left}
.heading-wrapper{width:300px;overflow-x:hidden}
.heading-wrapper img{
float:right;padding-top:9px;
/*ie9: position:relative;top:-9px */
}
jquery
setHeadingLineWidth('h1');
setHeadingLineWidth('h2');
setHeadingLineWidth('h3');
function setHeadingLineWidth(selector){
var hWidth;
var lineWidth;
var wrWidth = $('.heading-wrapper').width();
hWidth = $(selector,'.heading-wrapper').width();
lineWidth = wrWidth - hWidth;
$(selector).siblings('img').width(lineWidth);
}
heading width = width of the heading text inside the wrapper
line image width = wrapper width - heading text width
Hope that helps :)
Please answer the following questions:
How to merge search box and search button as shown in below example1 and example2? The box and button are joined together.
How to put 'magnifier' icon on the left side of the search box?
How to put a default text into the box like 'Search for items' and fade it when user clicks on the box.
Example1
Example2
Example3 (I don't want a separate button as shown below)
Please help! Thanks!!
Easiest way is to make the entire text field wrapper, from the icon on the left to the button on the right, one div, one image.
Then put a textfield inside that wrapper with a margin-left of like 30px;
Then put a div inside the wrapper positioned to the right and add a click listener to it.
HTML:
<div id="search_wrapper">
<input type="text" id="search_field" name="search" value="Search items..." />
<div id="search_button"></div>
</div>
CSS:
#search_wrapper{
background-image:url('/path/to/your/sprite.gif');
width:400px;
height:40px;
position:relative;
}
#search_field {
margin-left:40px;
background-transparent;
height:40px;
width:250px;
}
#search_button {
position:absolute;
top:0;
right:0;
width:80px;
height:40px;
}
JQuery:
$(function(){
// Click to submit search form
$('#search_button').click(function(){
//submit form here
});
// Fade out default text
$('#search_field').focus(function(){
if($(this).val() == 'Search items...')
{
$(this).animate({
opacity:0
},200,function(){
$(this).val('').css('opacity',1);
});
}
});
});
For your first question, there are many ways to accomplish the joining of the button to the search box.
The easiest is to simply float both elements to the left:
HTML:
<div class="wrapper">
<input placeholder="Search items..."/>
<button>Search</button>
</div>
CSS:
input,
button {
float: left;
}
Fiddle
This method has some limitations, however, such as if you want the search box to have a percentage-based width.
In those cases, we can overlay the button onto the search box using absolute positioning.
.wrapper {
position: relative;
width: 75%;
}
input {
float: left;
box-sizing: border-box;
padding-right: 80px;
width: 100%;
}
button {
position: absolute;
top: 0;
right: 0;
width: 80px;
}
Fiddle
The limitation here is that the button has to be a specific width.
Probably the best solution is to use the new flexbox model. But you may have some browser support issues.
.wrapper {
display: flex;
width: 75%;
}
input {
flex-grow: 2;
}
Fiddle
For your second question (adding the magnifier icon), I would just add it as a background image on the search box.
input {
padding-left: 30px;
background: url(magnifier.png) 5px 50% no-repeat;
}
You could also play around with icon fonts and ::before pseudo-content, but you'll likely have to deal with browser inconsistencies.
For your third question (adding placeholder text), just use the placeholder attribute. If you need to support older browsers, you'll need to use a JavaScript polyfill for it.
It's all in the CSS... You want something like this:
http://www.red-team-design.com/how-to-create-a-cool-and-usable-css3-search-box
Also, for the search icon:
http://zenverse.net/create-a-fancy-search-box-using-css/
Src: Quick Google.
You don't merge them, rather you give the illusion that you have. This is just CSS. Kill the search box borders, throw it all into a span with a white background and then put the fancy little dot barrier between the two things. Then toss in some border radius and you are in business.
The above tut might look too lengthy. The basic idea is this:
Arrange the input box just like you do. The input text box should be followed by the button. add the following css to do that.
position:relative;
top:-{height of your text box}px;
or you can use absolute positioning.
<div id="search_wrapper">
<input type="text" id="search_field" name="search" placeholder="Search items..." />
<div id="search_button">search</div>
</div>
#search_wrapper{
background-color:white;
position:relative;
border: 1px solid black;
width:400px;
}
#search_field {
background-transparent;
border-style: none;
width: 350px;
}
#search_button {
position:absolute;
display: inline;
border: 1px solid black;
text-align: center;
top:0;
right:0;
width:50px;
}
http://jsfiddle.net/zxcrmyyt/
This is pretty much easy if You use bootstrap with custom css
My output is diffrent but the logic works as it is..
I have used Bootstrap 5 here you can also achieve this by using Pure CSS,
<div class="container my-5">
<div class="row justify-content-center">
<div class="col-10 p-0 inputField text-center">
<input type="text" id="cityName"placeholder="Enter your City name..">
<input type="submit" value="search" id="submitBtn">
</div>
</div>
</div>
For Styling
#import url('https://fonts.googleapis.com/css2?family=Ubuntu&display=swap');
* {
font-family: 'Ubuntu', sans-serif;
}
.inputField {
position: relative;
width: 80%;
}
#cityName {
width: 100%;
background: #212529;
padding: 15px 20px;
color: white;
border-radius: 25px;
outline: none;
border: none;
}
#submitBtn {
position: absolute;
right: 6px;
top: 5px;
padding: 10px 20px;
background: rgb(0, 162, 255);
color: white;
border-radius: 40px;
border: none;
}
Hear is an Example !
https://i.stack.imgur.com/ieBEF.jpg