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 */
}
Related
I created an icon at the side of my page that can be clicked to go back to the top of the page.
I thought this would be fairly simple, like so:
#back_to_top{
position:fixed;
right:0px;
bottom:80px;
padding:10px;
background-color:#fff;
opacity:0.5;
border-radius:10px 0px 0px 10px;
cursor:pointer;
}
#back_to_top img{
width:50px;
height:50px;
}
#content{
height:9999px;
}
<a id="top_of_page"></a>
<div id="content">loads of content</div>
<div id="back_to_top">
<a href="#top_of_page">
<img src="media/top.png">
</a>
</div>
However, when I click the icon it actually moves down the page by the same amount of pixels each time.
I have no other anchors or anything else with a similar ID.
My anchor tag is the first tag in my body.
my 'loads of content' is all generated dynamically from php.
I know its working in the snippet but I can't share a full example, however, any ideas why this might act this way, would be really appreciated.
Adding an a element with href="#" should do the trick.
Here you have an example of it working:
<h1>MOON</h1>
<div style="height: 700px;"><small>scroll down</small></div>
To the moon!
I prefer to use the Javascript window.scrollTo method. Passing in 0,0 will scroll the page to the top left corner instantly.
Syntax: window.scrollTo(x-coord, y-coord)
x-coord - Pixels along horizontal axis
y-coord - Pixels along vertical axis
This method allows you to scroll to any point on the page.
Depending on whether you want to use a link tag <a> or a <button> tag you have two simple approaches.
For a link tag:
<a href='#'>To Top</a>
is all you need.
For a button tag:
<button onclick="window.scrollTo(0,0)>To Top</button>
Both of these work well.
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>
I am building new website and I've run into a little problem.
When I added next to my div and after the div end, but the hover does not work on the div. When I delete <a href"about.php"> and </a> the hover works.
Here is HTML code:
<div id="centerbox">
<div class="profile"></div>
<a style="display:block" href="about.php"><div class="about"></div></a>
</div>
</div>
And here is CSS Code
#centerbox {
width:988px;
height:462px;
margin-top:8.7%;
margin-right:auto;
margin-left:auto;
}
.about {
width: 150px;
height: 150px;
display: block;
margin-left:15.8%;
margin-top:-150px;
background:url(/images/about1.png);
background-repeat:no-repeat;
}
This problem is that the div is a block element and the a tag is an inline element. A block element cannot go inside of an inline. You'll need to change your <div> to a <span> or something that is inline.
When an block element is inside the inline the browser will usually try to fix it by moving it out of the inline element.
If you need the effect of the block element on say the <span> mentioned above you could add display:block to the span.
See this post for further clarification
Make the .hover on your (a) tag rather then the class you are applying it to that should probably work :)
I solved it. I changed the <a style="display:block" href="about.php"><div class="about"></div></a> to <div class="about" onclick="window.location = 'about.php';">
You don't want to store a div inside of an ref tag. You can give that ref tag a class though which will give it styling for that class
I don't know if this is possible or not, but any help would be very appreciated.
I have this code in my HTML:
<img src="mountains.jpeg" class="green inline-image" data-caption="A picture of mountains!">
where data-caption is a custom attribute.
I want to do something like this.
As you can see, the data-caption has to be in a small box right under the image, with the exact width as the image. I don't know if this is possible or not, so can you recommend an alternative way if not?
I tried doing something like this:
<img src="mountains.jpeg" class="green inline-image">
<div class="photo-caption">
A picture of mountains!
</div>
CSS:
.inline-image {
width:30%;
}
.photo-caption {
width:30%;
background-color:blue;
}
This works, but I'd prefer to not have to make a new <div> for every caption. I'd rather have it in the <img> tag.
Thank you very much!
Yeah it's possible using css content but problem in your case is you are using it on an img element which won't work on some browsers.
A different approach I would suggest is to insert your img element inside a div and have that custom attribute in there.
html:
<div class="img-block" data-caption="A picture of mountains!">
<img src="mountains.jpeg" class="green inline-image" >
</div>
css
.img-block:after {
content: attr(data-caption);
}
Reference
My Code:
<a id="entire" href="/check-appointment.php">
<div id="check_box">
<div id="check_content">
<a id="boxis" href="/check-appointment.php">I am a sales rep</a>
<br> making a request on behalf of the client.
</div>
</div>
</a>
CSS:
#check_box {
width:423px;
height:250px;
margin-left:100px;
margin-top:10px;
}
#check_content {
font-weight:bold;
font-size:37px;
}
Problem:
I am unable to make the work with the I am trying to get that entire div to be part of the
How can i make it work?
If you have an HTML5 DocType it should work, anything before that won't allow inline elements a to wrap block level elements div.
Even if you use an anchor unless you do some z-indexing then your inner link likely won't be seen how you are expecting...since it's the same link it shouldn't be a problem, but that then becomes repetitive.