So I was designing some stuff for a Tumblr theme, and I came across a very annoying problem. I was coding the Reblog and Like buttons, and the Reblog button works fine, but for some reason the Like button gives itself like an extra 5px of padding on the bottom. It is not really a serious problem, but it's really annoying to me because I cannot find a way to get rid of it. I tried changing height, max height, positioning and all, and nothing got rid of the extra space at the bottom. It may be some stupid mistake on my part, or maybe It's just supposed to be like that, and I'm not realizing it because it's too late, but any help would be nice.
Here is my test blog too in which I have the theme set up. If you look at the source, or mouseover the Like button you can see.
http://mchickenposts.tumblr.com/
Edit: I could just extend the length of thee li, and add the cursor property so the bottom 5px isn't left out. But I wanted to know How i can get rid of it totally.
Here is my Html Code for the Posts, and the Css too.
.post_reblog_like{
list-style-type:none;
padding:0px;
margin:0px;
display:inline-block;
float:right;
}
.post_reblog_like li{
display:inline-block;
opacity:.7;
}
.post_reblog_like li:hover{
opacity:1;
}
{block:Text}
<div class="post_wrapper">
<div class="post_text">
<div class="post_text_body">
{block:Title}
<a class="PostTitle" href="{Permalink}">{Title}</a>
{/block:Title}
{block:NoteCount}
<a class="post_notes" href="{Permalink}">{NoteCountWithLabel}</a>
{/block:NoteCount}
<div class="PostBody">{Body}</div>
</div>
<div class="post_date">
{block:Date}
<a title="{DayOfWeek}, {Month} {DayOfMonth}, {Year} # {12Hour}:{Minutes} {AmPm}" class="post_date_text" href="{Permalink}">{TimeAgo}</a>
{/block:Date}
<ul onmouseover="changeClass();" class="post_reblog_like">
<li title="Reblog">{ReblogButton color="white" size="20"}</li>
<li title="Like">{LikeButton color="white" size="20"}</li>
</ul>
</div>
</div>
</div>
{/block:Text}
I believe the issue is related to line-height (currently there is none defined).
.like_button {
line-height: 0px;
}
Change the .like_button to a display: block and then float: left. Elements with display: inline and inline-block always add some space at the bottom for letters like 'y' or 'g'. Hope it helps someone!
Related
I would like to learn how to do 'nice buttons' where the picture is added with css. For instance suppose that I want something like the following
(that is, the picture and the text are together and the whole picture is the link. You may see http://www.geogebra.org/team for something with the same spirit). The question is to do so as follows
HTML
<a class="modern_art" href="...">Modern Art</a>
CSS
.modern_art{
background-image: url(/pictures/modern_art.jpg)
/* or something similar */
/* more instructions */
}
By now, the best I have done is to place the picture and afterwards the name with ::before, but this is not enough to get a nice button. What would you recommend me?
try this one.
In this fiddle you can find something similar to what you ask. Just make an anchor tag as a thumbnail and then put your content inside it. Something like this one:
<a href="#" class="thumbnail">
<figure>
<img src="http://i.stack.imgur.com/g1Ce8.png" alt="bg" />
<figcaption>
<div>
Caption here
</div>
</figcaption>
</figure>
</a>
Then I'm using positioning and CSS3 transitions to hide and show the caption.
UPDATE
I have updated the code to transition back to the normal state, rather than instantly getting back to it. Fiddle here
Found this, might help you out.
https://css-tricks.com/design-considerations-text-images/
Well, you're very close with your CSS. All it needs is an explicit width and height, and some padding.
.modern_art{
display:inline-block;
width: 252px; height:20px;
background: #a9a9a9 url(http://i.stack.imgur.com/s2ZG0.png) no-repeat center 40px;
padding: 318px 60px 30px;
text-align:center; /* oh well, and some styling to make the text look similar to the example */
color:black;
text-decoration:none;
font-size:20px;
letter-spacing:.1em;
}
<a class="modern_art" href="...">Modern Art</a>
sorry if my title is a bit misleading but didn't know how to word/phrase it.
Currently, I have href'd images that go to various social networks. For example, by clicking on the facebook icon, it goes to my facebook. It is layed out like this:
<div class="row">
<center>
<div class="span2">
<img src="assets/img/icons/fbwhitebig.png" width="64" height="64"></img>
</div>
Is there a way to make this a "class" if that makes sense? So I can get the same effect by doing something like
<div class="span2">
</div>
and then in the CSS have this:
.facebookbutton {
width:64px;
height64px;
background: url(assets/img/snicons/fbwhitebig.png) no-repeat;
}
Sorry if this is a ridiculous post, I'm still learning haha!
Thanks :)
If you fix the typos (the missing opening quote after href= and missing colon after height), and add display: block the code you wrote works fine.
http://jsfiddle.net/oudL3ovz/1/
.facebookbutton {
width:64px;
height:64px;
background: url("http://s10.postimg.org/l40wid7mt/facebook_logo_64px.png") no-repeat;
display:block;
}
HTML
<div class="span2">
</div>
You may want to use display: inline-block;.
I am having a little issue with a few headers being misplaced on the site I am working on and also an image that's supposed to show below each one of them is not showing.
You can see what I am talking about here:
Here's my HTML:
<!-- main-content -->
<div id="main-content">
<h1> Check out all our DEADicated sites: </h1>
<div class="sites">
<a href="http://www.thedeadicated.tumblr.com" target="_blank">
<img src="images/sites/tumblr.jpg" width="215" height="150" alt="Tumblr"/></a>
<p> Tumblr </p>
</div>
<div class="sites">
<a href="http://www.twitter.com/thedeadicated" target="_blank">
<img src="images/sites/twitter.jpg" width="215" height="150" alt="Twitter"/></a>
<p> Twitter </p>
</div>
<div class="sites">
<a href="http://www.youtube.com/user/DeadicatedRepository" target="_blank">
<img src="images/sites/youtube.jpg" width="215" height="150" alt="YouTube"/></a>
<p> YouTube </p>
</div>
<h2> To join TheDEADicated, click HERE! </h2>
<h2> To get your own DEADicated wristband, click HERE! </h2>
<h2> Can't get enough of Dead Sara?! Dead Sara Addiction Treatment Facility </h2>
<h2> Email us at: TheDEADicated#TheDEADicated.org </h2>
</div> <!-- close main-content -->
And this is the CSS code for the main-content & headers:
#main-content{
padding: 50px 50px 30px 50px;
background: #fff url('images/shadow.png') repeat-x;
min-height: 800px;
}
#main-content h2{
margin-top: 30px;
padding-bottom: 8px;
background: url('images/ink-line.png') no-repeat left bottom;
clear: both;
}
Any kind of help would be greatly appreciated. Thanks!
I can't tell exactly what is happening here, but taking a guess at how the elements above the headers look, I'd say you have a float issue. Try removing the "clear: both" from the h2 and add "float: left; width: 100%;" in its place.
The comments are correct that you're not really clear about what you should see but don't, but if I interpret you correctly you mean that "my headings aren't showing the margin and padding or background images that I expect".
I'm going to take another leap of faith to offer up a possible solution. I see
</div> <!-- close main-content -->
at the end of your html but I don't see a <div id="main-content> anywhere. It should either be at the top of the page, or before the block of h2s, depending on what you desire the outcome to be. Try adding <div id="main-content> before the first h2 tag and see if that solves it for you.
Edit: I see your problem more clearly now, but this is tricky to resolve without the live url to inspect. It could be a float issue, but the clear should resolve that, unless it's being overridden, so you could change to:
clear: both !important;
It could be a display problem, so try adding:
h2 { display: block !important; }
If there's a live url that would certainly help. Final thought is to make sure every tag in the entire page html is properly opened and closed. Redundant or unclosed divs can cause issues like this in my experience.
I always thought that replacing the <center> tag with <div style="text-align:center;"> will get me the same results. Apparently I was wrong.
This is a portion of my HTML:
(you can also see it in action in the page I created for this question :
http://www.catmoviez.com/ErrorPageSO.aspx
<div style="margin: 0 auto; background-color:red;border:5px solid black;margin-top:5px;width:750px;text-align:center;">
<span style="width:560px;padding-right:10px;text-align:left;float:left;">
<h1>Oops... We're sorry.</h1>
<h3>You've just encountered an unknown error. <br /></h3>
This site is a work-in-progress, we have already been informed of the error and will do our best to fix it. <br />
We would be thankful if you could contact us through the appropriate button and elaborate on what caused this error to appear.<br />
<br />
<h3>
You can go back to the <a style="text-decoration:underline;" href="Default.aspx">Home page</a> and continue using Moviez.NET.
</h3>
</span><span style="width:180px;float:left;"><img src="Resources/Images/404.jpg" /></span>
</div>
I want to do 2 things:
Get Rid of the <center> tag while keeping the div in the center of the page.
Make sure the outer DIVs background color and border affect the inner spans.
UPDATE:
Objective 1 is completed.
Time for objective #2.
Use margin: 0 auto; on your enclosing <div>
<div style="margin: 0 auto; background-color:red;border:5px solid black;margin-top:5px;width:750px;text-align:center;">
<span style="width:560px;padding-right:10px;text-align:left;">
<h1>Oops... We're sorry.</h1>
<h3>You've just encountered an unknown error. <br /></h3>
This site is a work-in-progress, we have already been informed of the error and will do our best to fix it. <br />
We would be thankful if you could contact us through the appropriate button and elaborate on what caused this error to appear.<br />
<br />
<h3>
You can go back to the <a style="text-decoration:underline;" href="Default.aspx">Home page</a> and continue using Moviez.NET.
</h3>
</span><span style="width:180px;"><img src="Resources/Images/404.jpg" /></span>
</div>
See it in action.
Reference: CSS: centering things
If you want to simply center the text, you this css style:
text-align:center;
However, if you are looking to center the element or div itself, there are quite
some solutions for that, one being below:
.mydiv
{
margin:0 auto;
}
Or even with something like this:
.mydiv
{
width:300px; // the width can sometimes be ignored based on inherent size of element.
margin-left:auto;
margin-right:auto;
}
Or even with something like this:
.mydiv
{
margin-left:50%;
margin-right:50%;
}
So you see, there can be more possibilities.
Inline content is aligned with text-align, block content is aligned with margins (set to auto for the case of centring). See Centring Using CSS.
if you are trying to center the div on the page, I usually use this method for my main wrapping div to center the page.
making the left positioning at 50% and then margining back left half of the width of the div.
example below.
#mainspace {
position:absolute;
left:50%;
margin-left:-450px;
height:auto;
width:900px;
border:none;
}
Try this, it has worked for me when I wish I still had that
<center>
tag
< p style="text:align-center" > example image or text < / p >
I've spent too much time trying to get this to work on IE 7. It's working on ff and the only errors coming up on validator are missing alt tags for images (9 errors).
The entire site works except for this one part, and so I'm wondering if there's a weird float bug that I'm unaware of.
I have a div with an image inside of it. Under the image I have 3 divs that contain images. There is a slight gap between the image at the top of the div and the divs under it
Here's my code:
<div class="header_banner">
<img src="html_images/banner.jpg" />
<div class="header_left"></div>
<div class="header_main" id="header_menu">
<ul>
<li>Home</li>
<li>Studio</li>
<li>School</li>
<li>Events</li>
<li>Shop</li>
</ul>
</div>
<div class="header_right"></div>
</div>
Here's the CSS:
.header_banner
{
float:left;
width:531px;
}
.header_left
{
float:left;
background-color:#003399;
background-image:url('../html_images/header_left.jpg');
background-repeat:no-repeat;
background-position:48px;
width:55px;
height:33px;
}
.header_right
{
float:left;
background-image:url('../html_images/header_right.jpg');
width:7px;
height:33px;
}
.header_main
{
float:left;
background-image:url('../html_images/header_main.jpg');
background-repeat:repeat-x;
width:426px;
height:33px;
}
I wouldn't be surprised if I'm just missing something, but I've read through it 3 times now.
Any ideas? (I've setup a background-color to see exactly where the gap is)
Thanks
I would recommend using a reset stylesheet (or insert reset styles into the top of your stylesheet). It can help you avoid all sorts of issues like the one you are seeing.
You're right; it's probably an Explorer bug. Here's some more info: http://www.positioniseverything.net/explorer/floatIndent.html
It seems to be an issue with how IE handles margins. See if defining a margin (0px in this case) helps.
Have you tried adding style="display:block;" to your img element?
I also remember reading that whitespace after an tag can cause problems. Try adjusting your markup by removing the whitespace:
<div class="header_banner"><img src="html_images/banner.jpg" /><div class="header_left"></div> etc..