Menu
I've tried several different examples found online but now I'm out of ideas... I'm trying to get two image links centered on the page, side by side.
My current code looks like this:
HTML
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<div class="home">
<a href="http://www.xxx.net/blog/" id="h1"></a>
<a href="http://www.xxx.net/gallery/" id="h2"></a>
</div>
CSS
div.home a {
float: left;
}
div.home {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
div.home #h1 {
width: 500px;
height: 350px;
display: block;
background-image: url('header1.jpg');
}
div.home #h1:hover {
background-image: url('header1hover.jpg');
}
div.home #h2 {
width: 500px;
height: 350px;
display: block;
background-image: url('header2.jpg');
}
div.home #h2:hover {
background-image: url('header2hover.jpg');
}
579
asked Jan 26 '26 21:01
you should add display : inline to a tags and set the correct width
Update:
see this Demo
127
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
