css on share button - html

I'm having trouble isolating the problem I'm having, some stray CSS. Here's my website: http://www.derekbeck.com/1775/info/july2012mag/
Can anyone tell me what CSS is causing the Share button, when you mouseover it, to pop up off on the right side instead of directly next to the share button?
Thanks,
Derek

You need to remove position:relative under #addthis in your CSS file:
#addthis
{
position:relative;
top:-2px;
left:2px;
}
Should be:
#addthis
{
top:-2px;
left:2px;
}
Edit:
BTW, I'd suggest you put all your CSS code into a single, separate file.

Related

Select text except empty white space using CSS

I'm having a bit of trouble with text selection on my website. I want to be able to select the text-only & not the excess white space between paragraphs on any sides of the text.
At the moment, I can, with using the ::selection & having it's own background colour. However I believe my code is all screwy & I just can't find out how to do it.
This website below is exactly what I want it to do, when selecting the text, the white space between paragraphs is never selected.
Demo site - Formula one
Any & all help is greatly appreciated, thank you!
If you just use <p> element to wrap each paragraph (that's what the <p> element exists for, that's its destiny. Do you want to deny it from doing what its meant for???), the browser will do the magic himself :-)
Check out the simplest JsFiddle i've ever created :-)
If you are interested in how they achieved the effect in the formula website, here are all relevant parts - jsfiddle. (I altered fiddle by #Ronen Cypis).
As you can see, thay use an hidden overlay layer
.fom-modal-shim {
position:absolute;
left:0;
top:0;
right:0;
bottom:0;
width:100%;
height:100%;
z-index:1000;
-moz-opacity:0;
-khtml-opacity:0;
-webkit-opacity:0;
opacity:0;
-ms-filter:alpha(opacity=0);
filter:alpha(opacity=0);
visibility:hidden
}
The final effect is achieved by setting position of the page container to relative.
.site-wrapper {
position:relative
}

Keep showing div when not hovering on trigger link anymore

I'm having a problem with the menu I just coded: https://jsfiddle.net/nL124rLq/1/
I am using a general selector (~) on my css and I think this might be a mistake, because it might be the origin of my problem:
#nav #link1:hover ~ #flydown {
left:0;
display:block;
}
#nav #link2:hover ~ #flydown {
left:-100%;
display:block;
}
... and so on.
As you can see, everything works fine but when I stop hovering on the anchors, the sliding menu under the links disappears. I understand my code is not made for this to work correctly, but I can't figure out a way of making it work.
I am going to add content (sub-menus) to the coloured areas that form the slider, so they must be clickable and must remain visible when the user hovers over them.
If it's any help, I got the idea from this site: http://www.tiffany.es/
Thank you guys very much in advance and excuse the relatively vague question!
Okay, so I found the solution, more or less. #Michael_B 's help was awesome! The resulting code looks horrible though. Oh well, it works!
Basically I added this to every single link that I have on the nav (link1, link2... etc.):
$("#link1").on("mouseover", function () {
$(".flydown").addClass('permahover1');
});
$(".flydown").mouseleave(function () {
$(".flydown").removeClass('permahover1');
});
...and added the following CSS once for every element in my menu (permahover1, permahover2 etc.) to specify their different positions with left:0%, left:-100%, etc:
.flydown.permahover1 {
left:0%;
display:block;
}
It got really dirty in no time. But I don't know a better solution. Here's a working JSFiddle:
https://jsfiddle.net/nL124rLq/4/
As always, thank you guys very much for your help!

Using CSS coding to display print & email icon (and setting them to right float inline)

I have a question about my default print and email icons not displaying in my Joomla powered site.
I enabled them in the Joomla UI, but nothing than a list with both links is displayed.
As I was checking the web I found one reason that this could happen if your using a custom template, and the images are missing.
Now my question is how to get around that with CSS coding?
Thanks for any kind of hint or help.
Assuming you also want to remove the list formatting and your icon files are 16x16 pixel just add the following to your CSS file:
ul.actions {
list-style:none;
float:right
}
.print-icon, .email-icon {
display:inline-block;
width:16px;
height:16px;
text-indent:-3000px;
overflow:hidden;
}
.print-icon {
background-image:url(path/to/yourprintimage.png);
}
.email-icon {
background-image:url(path/to/youremailimage.png);
}
Obviously replace the file names with actual icons ;)

White line appearing on all sides of web page

I'm sorry I cannot show you the code, it is currently on my localhost.
I am pretty sure I have correctly typed the code because Netbeans doesn't show any errors. I am making my parents website for their charity, Enough to Spare. When I load the webpage though, there is a white line on all sides (although you can't see the top line because that div is white)
Here is a screenshot.
Anyone have any suggestions?
I would recommend you use a reset.css file before your own.css, so you start with a blank slate.
You could always add -
html { width:100%; height:100%; margin:0 padding:0; }
body { width:100%; height:100%; margin:0; padding:0; }
http://www.cssreset.com/ - This is where I look to get my reset.css file
Thank you to Dan Ovidiu Boncut for reminding me to put in margin:0; and padding:0;!
Ninja edit: Have you tried using the Chrome Developer Tools? You can play with the css using that. Right click on an element and click on inspect, there you can add new css styles and edit your current ones. It is a brilliant way to find solutions to your css issues... it also shows you what line in your css file you're at, so when you come to make the changes in file you know where to look straight away! :)
In the CSS, try changing the padding of the container <div> to 0, because anything inside a <div> is also inside whatever padding it has, resulting in space between the padding and the border. Also try changing the margin to 0, because having a margin will result in space between the border and its container.
If you don't have a container <div>, or this didn't fix it, try setting the padding of the <body> tag to 0, because it's the outer-most container and might have default padding.
I also think there might be alternative ways to set background contents to ignore padding. Unfortunately, it's been a little while since I've worked in HTML and CSS, and I don't currently have time to experiment with that. But see what you can do with the above suggestions.
The fact that NetBeans doesn't show errors doesn't mean your presentation is the way you want it to be.
Check your containing divs. Check for any margins and/or paddings that could cause spacing. Borders as well.
If all fails use a CSS reset and check again.
You need to copy and paste the html and css involving your page elements, otherwise no one will be able to help you. Having your code on localhost has nothing to do with that.
The only thing that solved this problem for me was adding
body {overflow-x: hidden;}
to my CSS file. Once this works, I guess you can remove:
html { width:100%; height:100%; margin:0px padding:0; }
body { width:100%; height:100%; margin:0; padding:0; }
And also: quick tip for beginners: always use Command + Shift + R for a hard reload instead of a normal Command + R while testing solutions.

Giving a text link a background image?

everyone. I'm trying to give a text link a background image but I'm not having any luck, I've got no image appearing. I was wondering if someone one could tell me if my code is wrong and what I can do to correct it. Thanks for any help in advance.
Here's my css code, hlink and home are ids, and home is my positioning of my link text
#hlink:link{
background-image: url("../media/taboff.gif");
color:#000000;
text-decoration:none;
}
#hlink:visited{
color:#000000;
text-decoration:none;
}
#hlink:hover{
/*background-image:url("../media/tab2.gif");*/
text-decoration:underline;
color:#EF504B;
}
#hlink:active{
text-decoration:underline;
color:#EF504B;
}
#home{
position:absolute;
font-size:2em;
top:270px;
left:300px;
text-align:center;
and here is my html code
<div id="home">
<a id="hlink" href="midterm.html">Home</a>
</div>
Edit: I just want to say thank you all so much for helping me, every single one of you have saved my life, I don't know if edits notify everyone who has answered, but again, thanks so much. Aside from some missing code, my biggest problem was with the image itself that I was using so that's my next issue to correct. I tested out a different image and it worked 100% so thanks for that everyone. I'm also relatively new to this, I'm a freshman in college and have only been doing this for a few weeks(I also have a terrible professor but that's another story for another time) but I'm glad to have found such a helpful community, hopefully one day I'll be able to contribute myself.
Works for me: http://jsfiddle.net/GTHyU/
My guess is that perhaps you have made your url() relative to your HTML page instead of your CSS file? Try it with an absolute URL first and see if it starts working, then figure out the appropriate relative path you need based on the location of the CSS file.
Try it like this
#hlink{
background:transparent url(../media/taboff.gif) repeat-x 0 0;
color:#000000;
text-decoration:none;
}
Check working example at http://jsfiddle.net/nh7nY/
Add these styles to each link:
display: block;
width:100px;
height:100px;
That should make the background-image appear. You can change the height and width to fit your requirements.
Try this:
#hlink:link {background:url(images/media_library.png) no-repeat top left}