I'm having trouble figure out about this Facebook Like button when I press like it suppose to popup overlay the article but mine it just goes behind the text and the user can't press or do anything at all
Unlike the other website which I found to give an example from Theverge
their popup overlay the article and there won't be any problem to continue to send to facebook wall
This is the CSS for the share button that I have right now
/* Share */
.share-post {
clear: both;
margin: 10px -20px -20px;
padding: 10px 0 10px 10px;
background: #F7F7F7;
border-top: 1px solid #EAEAEA;
height: 20px;
}
.mini-share-post {
clear: both;
margin: 10px -20px -20px;
padding: 10px 10px 10px 25px;
height: 20px;
}
.recent-box .mini-share-post {
margin-bottom: -5px;
}
.share-post li, .mini-share-post li {
float: left;
width: 120px;
}
.share-post span.share-text {
background: #FF8500;
margin: -10px 10px -10px -10px;
display: block;
float: left;
color: #FFF;
padding: 9px;
font-family: BebasNeueRegular, arial, Georgia, serif;
font-size: 14pt;
}
Check z-index of the div (or something else, depends on what you use) that your posts are wrapped in and set a higher one for the Facebook widget.
Usually setting z-index: 1001; works for me in such situations, but such a high value is considered as rather dirty fix.
EDIT
Okay, I know what is wrong now (I assume it's the site from your profile).
There is a span inside a div with class fb-like fb_edge_widget_with_comment fb_iframe_widget. Change the span width to about 500px.
So you don't have to change the z-index, but next time, please provide some code. Not everthing can be guessed from images.
Related
I want to modify my html/css to obtain something like these modification in red, adding two stylized quote, and adapt image to the size of my <blockquote></blockquote> element.
My html is
<img src="presentation-images/bernardlee.jpg" style="width:300px";
class = "author"/>
<blockquote> [...] <mark>The project started with the philosophy that
much academic information should be freely available to anyone.</mark>
It aims to allow information sharing within internationally dispersed
teams, and the dissemination of information by support groups. -- Tim
Berners-Lee (1991)</blockquote>
My css :
mark {
background-color: #EBEBE4;
color: black;
}
.author
{
float:left;
clear:both;
margin:8px 8px 8px 8px;
}
blockquote {
display: block;
margin: 1.5em 0 1.5em -1.5em;
padding: .75em .5em .75em 1em;
background: #fff;
font-family: 'Crimson Text';
border-left: 0.5em solid green;
font-size: 0.8em;
font-style: italic;
line-height: 1.5;
-webkit-box-shadow: 0 0 5px rgba(20,20,20,0.5);
-moz-box-shadow: 0 0 5px rgba(20,20,20,0.5);
box-shadow: 0 0 5px rgba(20,20,20,0.5);
}
You can see fiddle here : http://jsfiddle.net/h6m80gqb/
As you tagged this HTML5 and even awarded a bounty on it I decided to have a play with this myself, despite my solution ending up with the same weakness as Clint Brown's answer has, but at least I am not using tables in my css and my quotes are a bit more stylized :P .
The DOM structure
<div class="quote">
<blockquote> [...] <mark>The project started with the philosophy that
much academic information should be freely available to anyone.</mark>
It aims to allow information sharing within internationally dispersed
teams, and the dissemination of information by support groups. -- Tim
Berners-Lee (1991)</blockquote>
</div>
Is what I ended up with, if you need to include the image url in the generated HTML (as you likely will), you will need to put a separate tag for that as well.
Getting the image to adapt to the size of the box
Although flexible box model is a bit overkill here, it works splendidly none the less. A simple display:flex; on the container and flex: 0 0 20%; on the image element will cause it to get the height of the container and as the height of the container is defined by the amount of text in the <blockquote> this means the image element is adapting to the <blockquote>. Next all you need is setting the image as a background and either background-size:cover; or background-size:contain; for the image (if you choose contain you would want to add background-repeat:no-repeat; background-position:right; as well).
.quote{
display:flex;
box-shadow: 0 0 5px rgba(20,20,20,0.5);
border-left: 0.5em solid green;
margin:10px;
}
div:before{
content:'';
display:block;
flex: 0 0 30%;
padding-left:0.5em;
background:url('http://www.enlactualidad.com/wp-content/uploads/2013/03/Tim-Berners-Lee.jpg');
background-size:cover;
background-position:center;
}
The quotes
As you were talking about stylized quotes I believe you wanted more than just inserting the relevant character, so instead you can float the first quote with a big font size and inline the second to give the following final look
Playing around with fonts and stuff could still greatly enhance the look of everything, but this does bring the point across.
blockquote:before,blockquote:after{
display:block;
font-size:60px;
height:0.5em;
overflow:hidden;
position:relative;
top:-0.15em;
color:red;
margin-bottom:-0.15em;
}
blockquote:before{
float:left;
padding-right:10px;
content:'“';
}
blockquote:after{
content:'”';
display:inline-block;
padding-left:10px;
vertical-align:top;
}
The 'flaw' in this answer
Just like Brown's answer the height adapts to the text as required, however the width is fixed which is somehow 'solved' by the image being partially covered. A solution that would adapt both the width and the height would quite definitely require Javascript as it is sort of circular dependency (by changing the width, the height of the blockquote changes, thus the width of the height of the image changes, thus the width changes, which can be resolved, but not in HTML/CSS).
Trickier than I first thought using only CSS. This is the approach I tried but it's not quite there yet -
blockquote {
display: table;
margin: 1.5em 0 1.5em -1.5em;
padding: .75em .5em;
font-family: 'Crimson Text';
border-left: 0.5em solid green;
font-size: 0.8em;
font-style: italic;
line-height: 1.5;
-webkit-box-shadow: 0 0 5px rgba(20,20,20,0.5);
-moz-box-shadow: 0 0 5px rgba(20,20,20,0.5);
box-shadow: 0 0 5px rgba(20,20,20,0.5);
}
blockquote .image {
display: table-cell;
width: 20%;
}
blockquote .quote {
margin-left: 10px;
}
blockquote .quote:before,
blockquote .quote:after {
content: '"';
color: red;
font-size: 1.6em;
line-height: 0;
vertical-align: middle;
}
blockquote .quote:after {
display: inline;
}
mark {
background-color: #EBEBE4;
color: black;
}
<blockquote>
<div class="image" style="background: url('http://www.enlactualidad.com/wp-content/uploads/2013/03/Tim-Berners-Lee.jpg') no-repeat center right; background-size: auto 100%;"></div>
<div class="quote">[...] <mark>The project started with the philosophy that
much academic information should be freely available to anyone.</mark>
It aims to allow information sharing within internationally dispersed
teams, and the dissemination of information by support groups. -- Tim Berners-Lee (1991)</div>
</blockquote>
I would move the <img> tag into the <blockquote> tag and remove the style='' attribute.
I modified the CSS like this:
mark {
background-color: #EBEBE4;
color: black;
}
.author {
float:left;
clear:both;
margin:8px 8px 8px 8px;
}
blockquote {
position:absolute;
display: block;
margin: 1.5em 0 1.5em -1.5em;
padding: .75em .5em .75em 1em;
background: #fff;
font-family:'Crimson Text';
border-left: 0.5em solid green;
font-size: 0.8em;
font-style: italic;
line-height: 1.5;
-webkit-box-shadow: 0 0 5px rgba(20, 20, 20, 0.5);
-moz-box-shadow: 0 0 5px rgba(20, 20, 20, 0.5);
box-shadow: 0 0 5px rgba(20, 20, 20, 0.5);
width:100%;
height:100px;
padding-bottom:15px;
}
blockquote img {
height:100%;
width:auto;
}
To get special " marks, you could have the quotes in a <span> tag and style them appropriately.
I'm working on a personal project, but I'm having some difficulty with a div, which has some styling that I can't seem to get around. It's a thin strip at the top of my user interface, where users have a few controls over what's shown on the screen. Pretty important to keep around (so deleting it isn't an option). In case it helps at all, I am using Eric Meyer's CSS Reset as a normalizer.
My problem is that the div element seems to have some intrinsic margin or padding that I can't seem to work around in my css. I've included a photo here for reference; the div is in green.
I need to make that green div element thinner. It would help the layout a lot if I could move it closer to the top of the page. If you have any ideas or see something that I've missed, I would appreciate the help.
I'm also including the html code for that content as follows:
<div class="new_entry_control_container">
<p>You have <span class="credits">33 Credits</span> remaining.
<span class="button">Add More Credits</span>
<span class="button">Add More Items to Study List</span>
<span class="pagination">< 1 | 2 | 3 ></span>
</p>
</div>
As well as the CSS that applies here:
div.new_entry_control_container {
background-color: green;
max-width: 900px;
margin-left: auto;
margin-right: auto;}
div.new_entry_control_container p {
text-align: center;}
.credits {
color: #ffd400;}
.button {
background-color: #ffd400;
color: #3a0091;
border: none;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
padding: 1px 8px 4px 8px;
margin: 10px 0px 0px 3px;}
.pagination {
margin-left: 25px;
font-size: 17px;}
Not sure if it's caused by the padding of parent element of that green bar. A workaround would be using negative "margin-top". And to make it thinner (assuming there would only be one line in that bar), use "height" combined with "line-height".
So the css might look like this
div.new_entry_control_container {
background-color: green;
max-width: 900px;
margin-left: auto;
margin-right: auto;
margin-top: -10px;
height: 18px; line-height: 18px;
}
Hope that helps.
Try:
div.new_entry_control_container{
padding:0;
/* more CSS here */
}
.credits{
padding:0; margin:0;
/* other CSS here */
}
I'm trying to move the "likes" gray bar right above the signature, to the left of the "like" link found on top right w/ tiny icon.
Example:
http://www.talkjesus.com/bible-study-hall/44722-antimonianism.html#post220422
The css code now
.vbseo_buttons .vbseo_liked {
background: rgba(46, 53, 57, .8);
color: #fff;
border: 0;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
clear: both;
display: block;
padding: 12px;
margin: 5px 30px;
<vb:if condition="$stylevar['textdirection'] == 'rtl'">
background-position: right;
</vb:if>
}
If I change display: block to display: inline, it'll move it to the same row, like this:
http://i49.tinypic.com/348lonc.png
However, it loses the margin property and width property. I tried fixing the width by adding width: 50%; but that changed nothing. How can I keep it inline while fixing margin and width?
Do you mean your want the gray bar at the far top right where it shows the quantity of likes the thread has with the heart? To keep the margin you should just float the gray box
Floated left
.vbseo_buttons .vbseo_liked {
background: rgba(46,53,57,.8);
color: #fff;
border: 0;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
clear: both;
padding: 12px;
margin: 5px 30px;
float: left;
}
To move this all the way to the top right you would need to modify the template and it would end up looking something like this but you need to move the entire after_content div or restyle it as needed if only moving the vbseo_liked container. And also remove the clear:both style.
I am using a custom select/dropdown menu per the solution here: https://stackoverflow.com/a/10190884/1318135
This functions great, except that the options only display if you click on the box. Clicking on the 'arrow' on the right does not bring up the dropdown options. What's a workaround?
http://jsfiddle.net/XxkSC/553/
HTML:
<label class="custom-select">
<select>
<option>Sushi</option>
<option>Blue cheese with crackers</option>
<option>Steak</option>
<option>Other</option>
</select>
CSS:
label.custom-select {
position: relative;
display: inline-block;
}
.custom-select select {
display: inline-block;
padding: 4px 3px 3px 5px;
margin: 0;
font: inherit;
outline:none; /* remove focus ring from Webkit */
line-height: 1.2;
background: #000;
color:white;
border:0;
}
/* Select arrow styling */
.custom-select:after {
content: "▼";
position: absolute;
top: 0;
right: 0;
bottom: 0;
font-size: 60%;
line-height: 30px;
padding: 0 7px;
background: #000;
color: white;
}
.no-pointer-events .custom-select:after {
content: none;
}
Depending on your client base,
One very simple bit of code:
pointer-events:none;
See the browser support here: http://caniuse.com/pointer-events
Edit: just in bed and possibly thought of another solution but can't test on my phone, but maybe the jQuery mousedown trigger could be an option, to momentarily hide the arrow a split second before the click, maybe?
Or this, not sure how it'd be used, but saw it in another thread:
$('#select-id').show().focus().click();
If I was at my pc I'd test it...
That's nice. Thanks for the info. Like the use of content. Don't have an Android but from what I'm seeing in Mac on FF, Saf, and Chrome it works pretty good. May try adding:
-moz-border-radius: 0px 20px 20px 0px;
-webkit-border-radius: 0px 20px 20px 0px;
border-radius: 0px 20px 20px 0px;`=
to it to .custom-select:after to align the borders.
I am using some css styling for my submit buttons, and they look fine except in Firefox there is a space between the left and main image. Here is what I'm using:
button.buttons {
background: none;
background-image: url(images/button_left_sprite.png);
display: block;
border: none;
margin: 0 10px 10px 0;
padding: 0 0 0 17px;
cursor: pointer;
font-weight:normal!important;
color: #111111;
}
button:hover.buttons {border: none; }
button.buttons span {
background-image: url(images/button_sprite.png);
padding: 9px 20px 10px 5px;
font: 12px 'Droid Sans',arial,sans-serif;
}
/* Green Button */
button.btn_green {background-position: 0 569px;color: #435425;}
button.btn_green:hover {color: #435425!important;}
button.btn_green span { background-position: 100% 569px;}
button:hover.btn_green { background-position: 0 528px;background-color:transparent!important; }
button:hover.btn_green span { background-position: 100% 528px;background-color:transparent!important; }
And to put it on the page:
<button type="submit" class="buttons btn_green left"><span class="left">Update</span></button>
If it helps, the images are here:
Im going bonkers trying to get this ugly space to go away in Firefox! Can anyone help me figure out why it's doing this?
Firefox has some abnormalities when it comes to button/input padding. I'm not sure why it is the case, and why the issue remains despite being publicly documented. Anyway, check out something like normalize.css and check out the section on forms - for instance, this is one fix they apply for firefox:
button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0;
}
Being that your left sprite depends on 17px of left padding on .buttons, if FF adds a couple pixels by default, that could mess with your images aligning. Another thing you could try is reducing the amount of left padding and see if the images line up.
Does that help?
Is it only for me that the button looks totally messed up in firefox? not just a space between the images.
Looks better for me like that:
http://jsfiddle.net/78eSc/1/
button.buttons {
background: none;
background-image: url('http://i41.tinypic.com/dv1b6.png');
display: block;
border: none;
margin: 0 10px 10px 0;
padding: 0 0 0 14px;
cursor: pointer;
font-weight:normal!important;
color: #111111;
}
button.buttons span {
display:block;
background-image: url('http://i41.tinypic.com/2mcds8j.png');
padding: 9px 20px 10px 5px;
margin:-1px 0 0 0;
font: 12px 'Droid Sans',arial,sans-serif;
}
1st thing.. why are you using so big images?
http://i41.tinypic.com/2mcds8j.png
simplified...
http://www.w3schools.com/cssref/playit.asp?filename=playcss_background-repeat&preval=repeat-x
or better try to do it all, with out images,
http://www.w3schools.com/cssref/playit.asp?filename=playcss_border-radius
example how to do it ;)
http://www.css3.info/preview/rounded-border/