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>
Related
I have an html with markup,
<a class="home-link" href="index.html" rel="home">
<h1 class="site-title">John Arellano's Personal Website</h1>
</a>
I have a problem in Styling this Site-title. My Cursor allow me to Click to
the link even it is in the blank space.
Can anyone help me fix this using CSS? Because I can't change the HTML Document. So I am hoping to fix it with CSS Only.
I can still click the link.. If the width is 200px; i can still click in the position greater than 200px;
you can do this with css as follows:
<style>
a:link{display:inline-block;}
</style>
block element can not be placed inside the inline element, this is a mistake! it should look like this:
<h1 class="site-title"><a class="home-link" href="index.html" rel="home">John Arellano's Personal Website</a></h1>
You need to change the html code like this:
<h1>Site name</h1>
Instead try this. Probably you have indentation in your css. Try use that:
a.home-link{
text-indent:0;
display:block;
cursor:pointer;
height:80px; /*adjust your height */
width:80px; /*adjust your width */
}
I have uploaded my page here so that you can see clearly what I am referring to:
http://www.emmasteed.co.uk/new/
The menu section works fine it is the larger button icons at the bottom: Portfolio, Get in touch and About me.
I have hyperlinked these images as you will see in the code however nothing happens when I hover over them or try to click. What am I doing wrong? This is driving me crazy!
<div class="largemenubutton"><img src="images/portfolio.png" alt="Portfolio" border="0" /></div>
<div class="largemenubutton"><img src="images/getintouch.png" alt="Contact me!" border="0" /></div>
<div class="largemenubutton"><img src="images/aboutme.png" alt="About" border="0" /></div>
.largemenubutton {
width:283px;
height:259px;
margin-top:20px;
float:left;
display:block;
text-align:center;
}
Remove the z-index -1 there:
.mainimage {
z-index: -1;
}
For keeping the drop shadow do the following:
<div class="header">
<div class="container">
remove the mainhome width and apply to the container in the css:
.container {
width: 850px;
}
Also use that container for wrapping the same way the main content for the site.
and then for the drop shadow (customize as you please):
.header {
box-shadow: 0 0 0 10px black;
}
This is the fiddle that represents more or less this: http://jsfiddle.net/9q7PX/
Two possible solutions come to mind:
1) Wrap the img element in a div, and wrap that div with your a element.
2) Nix the img element from your DOM, and instead make it a background-image of a div (in CSS). Then wrap that div with your a element.
I have finally managed to figure a way round this. I would like to thank everyone for their answers and advice as without this I probably would never have found this solution. The z-index setting on the previous div was the problem I had to get round.
Basically i created another div tag to contain my large menu buttons and placed this outside of the previous div which held my slider image which was set at z-index -1 as i wanted my image to sit behind a drop shadow above. This then allowed the links on the images to work.
Hope this makes sense and helps anyone else who has this problem.
I want to use the above image in a img class to put underneath the photos. That have that class. See the markup example below.
<img class="img-shadow" src="image.jpg">
or may be like this
<div class="img-shadow">
<img src="image.jpg">
</div>
How would the css look?
HTML:
<div class="img-shadow">
<img src="image.jpg">
</div>
CSS:
.img-shadow{
background:url(your image URL) no-repeat center bottom;
padding-bottom:20px;
text-align:center;
}
Adjust the padding on the bottom of the div to increase or decrease the distance between the bottom of the image and the shadow.
Just as another option, instead of using an image for your shadow, you can use CSS3 shadow property to achieve something similar.
In the fiddle, I show the same image using the class and not using the class: JS Fiddle
.img-shadow {
box-shadow: 0px 2px 10px #000;
width: 200px;
}
If what you said in the question is what you really want to do, You can simply put the shadow image below the other image using an <img> tag like
<div>
<img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSyLdxqT0UBb31xeB4yMfUjCqKld2q9FqpUMZEIvq175_4-MgAPUA"/> //Your image
<img src="http://i.stack.imgur.com/ZLAht.png"/> // Your shadow image
</div>
and position them accordingly using css..
check this fiddle
Note:there might be better ways for creating a shadow below an image, just answering the question in a straight forward manner..
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!
I am fairly new to HTML5 so this will maybe seem like a simple question although I haven't found an information about this online. It appears as though most cases where people want to do this they use a table (but I understand that is not a good idea anymore)
In my header area I need to place several images side by side. They should be justified so there is space between the images and each image is in the right place. I have an appropriately sized header block in place but for the life of me can't figure out how to arrange the images inside it correctly.
The images should be layed out like this:
(http://imageshack.us/photo/my-images/339/tmpyg.jpg/)
layout
I have tried this:
<header>
<img src="ICUWB.jpg" alt="ICUWB" height="100" width="250"/>
<img src="Logo.jpg" alt="ICUWB" height="250" width="250"/>
</header>
But I am not sure what needs to go in the css region i guess
header {
background: #3d3837;
margin: 0 auto;
}
Thanks for the help.
I understand that what you want to achieve its something like this "snapshot" (color borders on the images are only to see the "pieces" easier), the header is in light grey.
http://imageshack.us/photo/my-images/200/unled1ik.jpg/
There are several ways to do this, first one:
(I added and ID to the header (optional)).
<header id="arriba">
<img src="1.jpg" alt="1" />
<img src="2.jpg" alt="2" />
<img src="3.jpg" alt="3" />
</header>
The CSS:
header#arriba {
width:960px;
height:350px;
clear:both;
margin:auto;
text-align:center;
background-color:#ccc;
}
header#arriba img {
vertical-align:middle;
margin:0 2px 0 2px; /* YOU CAN ADJUST IMAGES SPACE WITH THIS MARGINS */
}
Hope it's what you need.
Regards.
P:.
With your current markup, add this CSS:
header img{
float:left;
margin-right:5px;
}
Btw, you may end up wanting to give a class to those images and target them with the class at a later time.