After posting before I'm running into more problems with making my header responsive. I want to make my header image (logo) re-size down correctly with the browser and look correct on mobile devices.
like this web page does when re-sized down: http://timeandspace.org/
here is the fiddle link: www.jsfiddle.net/0m4z6u25/
Any tips on how to get the nav bar to do the same as the website linked up above will be a huge help!
Thanks
Firstly update the version of the bootstrap.css, use the latest stable to date(v3.3.6).
CDN link
https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css
Next, You need to make lot of changes to your navbar code. I have made the changes to resemble your requirements. Here
<!--HEADER-->
<div class="header">
<div id="header-container" class="container">
<div class="headerdiv">
<a href="" class="headerleft">
<img src="http://i.imgur.com/DotvQDw.jpg" class="img-fluid" alt="header SU">
</a>
</div>
</div>
</div>
<nav class="navbar navbar-default" id="nav-main">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">
<img alt="Brand" width="20" height="20" src="img/nav_logo.jpg">
</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Help</li>
<li>Events</li>
<li>Forums</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Search</button>
</form>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
and the CSS is
/* Stylesheet */
html,
body {
height:100%;
}
img {
max-width: 100%;
}
/* Salford SU Header */
.headerbox {
height: 200px;
width: 100%;
background-color:white;
}
#header-container{
padding-left: 140px;
padding-right: 140px;
}
.headerdiv {
height: 200px;
width:100%;
padding-top: 0px;
padding-bottom: 17px;
padding-left: 65px;
padding-right: 65px;
}
.headerleft {
height: 146px;
min-width:400px;
width: 50%;
float: left;
padding-right: 15px;
background-position: center left;
background-size: contain;
background-repeat: no-repeat;
display: block;
}
.header-right {
width: 40%;
height: 146px;
float: right;
border-left: 2px solid #c5c6c8;
padding-left: 15px;
}
.headerright1
{
height: 40px;
width: 100%;
text-align: justify;
vertical-align: bottom;
padding-top: 7px;
}
.headerright1 > a {
width: 34px;
display: inline-block;
vertical-align: bottom;
zoom: 1;
}
/*
#cover {
background:#222 url('img/header.jpg') center center no-repeat;
background-size:cover;
color:white;
height: 24.5%;
text-align:center;
display:flex;
align-items:bottom;
}
*/
/*NAVIGATION CSS*/
#nav-main {
background: #ed1e24;
}
#nav-main li {
font-family: 'Work Sans', sans-serif;
font-size: 18px;
color:white;
}
.section-content {
padding: 5rem 0;
}
#about {
background: url('img/working.jpg') center center no-repeat;
}
.about-text{
background: rgba(0,0,0,0.8);
color: white;
padding: 1.875rem;
}
#footer-main {
background: #f1163e;
color:white;
font-size: 0.8rem;
padding: 2.5rem 0;
}
#media (min-width: 158px) and (max-width: 600px) {
#header-container {
padding-left: 0%;
padding-right: 0%;
}
.headerleft {
background-position: center left;
background-size: contain;
background-repeat: no-repeat;
display: block;
min-width: 100%;
min-height: 100%;
}
.headerleft > a {
max-width: 100%;
max-height: 100%;
background-position: center left;
background-size: contain;
background-repeat: no-repeat;
display: block;
min-width: 100%;
min-height: 100%;
}
}
The Fiddle
Using media queries, you will need to resize the header image based on the screen width. You can then control the size, keeping it in proportion, and then you can show a different layout logo when on mobile - for example putting 'student's union' under the circle. This will not make it too small, and look good on a mobile.
An example of a media query:
#media (min-width: 900px) {}
Bootstrap also has some responsive classes such as visible-xs hidden-xs which could help here.
Related
I am trying to achieve this blend mode effect on hero image and transparent navbar with that disolve into the hero image. I tried to make transparent navbar by giving a background color and some opacity, but it doesnt look same as what I want.
What I have so far is this:
and here's the code for that:
Any help would be greatly appreciated. Thank you.
.navbar {
background: #000000 0% 0% no-repeat padding-box;
opacity: 0.56;
padding-bottom: 1.5rem;
padding-top: 1.5rem;
#media screen and (max-width: 425px) {
padding-bottom: 0.5rem;
padding-top: 0.5rem;
}
}
&-collapse {
justify-content: flex-end;
#media screen and (max-width: 768px) {
background: #402808 0% 0% no-repeat padding-box;
.nav-item:last-child {
display: none;
}
}
}
&-nav {
align-items: center;
}
.nav-item {
margin-right: 4rem;
transition: all 0.2s;
&:hover {
.nav-link {
color: #f1cd9d !important;
}
}
#media screen and (max-width: 1366px) {
margin-right: 3rem;
}
#media screen and (max-width: 1200px) { margin-right: 1rem; }
#media screen and (max-width: 1024px) {
margin-right: 1rem;
}
}
}
.hero {
background: url("/assets/src/images/hero.png");
background-repeat: no-repeat;
background-size: cover;
background-position: center;
width: 100%;
height: 100vh;
overflow: hidden;
position: relative;
margin-bottom: 10rem;
.herowoman {
left: 79.4rem;
position: absolute;
top: 35.3rem;
}
.row1 {
margin-top: 18rem;
justify-content: center;
img {
width: 251px;
height: 192px;
}
#media screen and (max-width: 425px) {
img {
width: 155px;
height: 118px;
}
}
}
.row2 {
position: relative;
h1 {
&::after {
content: "";
display: block;
width: 0;
height: 2px;
background: #efefef;
width: 5.5%;
#media screen and (max-width: 425px) {
width: 10.5%;
}
}
}
p {
font-size: clamp(10rem, 24vw, 44rem);
text-align: center;
line-height: clamp(16rem, 22vw, 35rem);
font-weight: bold;
letter-spacing: 6.16px;
color: #ffffff;
opacity: 0.26;
}
.herowoman {
width: 371px;
height: 543px;
position: absolute;
top: -2.5rem;
left: 49.5rem;
}
button {
z-index: 99;
position: fixed;
right: 0rem;
top: 56rem;
width: 214px;
}
#media screen and (max-width: 425px) {
h1 {
font-size: 1.8rem;
line-height: 6.5rem;
}
p {
font-size: 11.3rem;
line-height: 11.5rem;
}
}
}
.row3 {
justify-content: center;
position: relative;
img {
width: 371px;
height: 543px;
position: absolute;
top: -12rem;
left: 49.5rem;
}
p {
font: normal normal bold 440px/457px Poppins;
letter-spacing: 6.16px;
color: #ffffff;
opacity: 0.26;
}
}
}
<nav class="navbar navbar-expand-lg fixed-top">
<div class="container">
<a class="navbar-brand" href="/html/index.php"><img src="/assets/src/images/logo.png" alt=""
class="img-fluid"></a>
<button class="navbar-toggler x" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
aria-label="Toggle navigation">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ms-auto me-auto">
<li class="nav-item">
<a class="nav-link navmenu-text" aria-current="page" href="/html/index.php">Home</a>
</li>
<li class="nav-item">
<a class="nav-link navmenu-text" href="/html/about.php">About</a>
</li>
<li class="nav-item ">
<a class="nav-link navmenu-text" href="/html/services.php">services</a>
</li>
<li class="nav-item">
<a class="nav-link navmenu-text" href="/html/rooms.php">rooms</a>
</li>
<li class="nav-item">
<a class="nav-link navmenu-text" href="/html/gallery.php">gallery</a>
</li>
<li class="nav-item">
<a class="nav-link navmenu-text" href="/html/contact.php">Contact</a>
</li>
</ul>
<li class="nav-item-last">
<a href="#" class=" d-flex">
<img src="../assets/src/images/location.svg" alt="" class="img-responsive">
<p class="nav-text">BHAIRAHAWA, RUPANDEHI</p>
</a>
<a href="#" class=" d-flex">
<img src="../assets/src/images/phone.svg" alt="" class="img-responsive">
<p class="nav-text">(718)432-6687</p>
</a>
</li>
</div>
</div>
</nav>
<section class="hero">
<div class="container">
<div class="row row1">
<img src="/assets/src/images/logo.svg" alt="" class="img-responsive">
</div>
<div class="row row2">
<h1>A Superior Budget</h1>
<p class="">HOTEL</p>
<button class="btn btn-primary btn-text" onclick="window.location.href='/html/booknow.php'">BOOK
NOW</button>
</div>
</div>
<img src="/assets/src/images/herowoman.png" alt="" class="img-responsive herowoman">
</section>
You'll have to add alpha value to the background color.
Example:
.navbar {
background: rgba(0, 0, 0, 0.8);
padding-bottom: 1.5rem;
padding-top: 1.5rem;
backdrop-filter: blur(13px);
}
But backdrop filter is not supported in IE and Firefox.
To get around you can use #support and add a fallback property
.navbar {
background: rgba(0, 0, 0, 0.8);
padding-bottom: 1.5rem;
padding-top: 1.5rem;
backdrop-filter: blur(13px);
#supports (
(-webkit-backdrop-filter: blur(13px)) or (backdrop-filter: blur(13px))
) {
background: rgba(0, 0, 0, 0.0);
backdrop-filter: blur(13px);
-webkit-backdrop-filter: blur(13px);
}
}
I'm relatively new to CSS and I'm trying to build a prototype where I have a big Div with several divs inside in an specific position. I want these div's to always occupy that spot but I want it to be responsive.
My code is kinda all over the place after trying several diferent things but the yellow div is what I'm trying to make. I want to place all the other divs in a circular way but want them to always use % of the parent div's space and shrink but keep the same "relative" position to the parent.
var openSide = false;
function side() {
if (!openSide) {
document.getElementById("main").style.marginLeft = "15%";
document.getElementById("main").style.paddingLeft = "10px";
document.getElementById("mySidebar").style.width = "15%";
document.getElementById("mySidebar").style.display = "block";
// document.getElementById("openNav").style.display = 'none
openSide = true;
} else {
document.getElementById("main").style.marginLeft = "0%";
document.getElementById("mySidebar").style.display = "none";
document.getElementById("openNav").style.display = "inline-block";
openSide = false;
}
console.log(openSide);
}
/* The sidebar menu */
.sidenav {
/*/height: 100%; /* Full-height: remove this if you want "auto" height */
width: 15%;
/* Set the width of the sidebar */
position: fixed;
/* Fixed Sidebar (stay in place on scroll) */
z-index: 1;
/* Stay on top */
top: 70;
/* Stay at the top */
left: 0;
background-color: #111;
/* Black */
overflow-x: hidden;
/* Disable horizontal scroll */
padding-top: 20px;
display: none;
margin-left: 10px;
}
/* The navigation menu links */
.sidenav a {
padding: 6px 8px 6px 16px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
}
/* When you mouse over the navigation links, change their color */
.sidenav a:hover {
color: #f1f1f1;
}
/* Style page content */
#main {
margin-left: 0%;
/* Same as the width of the sidebar */
margin-right: 15%;
padding-left: 10px;
padding-right: 20px;
}
body {
margin-left: 10px;
}
.flex-container {
display: flex;
background-color: DodgerBlue;
}
.flex-container>div {
background-color: red;
margin: 10px;
padding: 20px;
font-size: 30px;
}
#map {
/*padding: 100px 100px 100px 100px;*/
position: relative;
width: 100%;
height: 600px;
top: 100px;
background: yellow;
}
.media {
position: absolute;
width: 11.07%;
height: 16.66%;
background-color: red;
}
.media:first-child {
margin-top: 15;
}
#m1 {
background: blue;
left: 400px;
top: 400px;
}
.media:hover {
background-color: pink;
z-index: 1000;
width: 200px;
height: 200px;
}
/* On smaller screens, where height is less than 450px, change the style of the sidebar (less padding and a smaller font size) */
#media screen and (max-height: 450px) {
.sidenav {
padding-top: 15px;
}
.sidenav a {
font-size: 18px;
}
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="assets/css/css.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<button id="openNav" class="w3-button w3-teal w3-xlarge" onclick="side()">☰</button>
<div id="header">
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
</div>
</div>
</nav>
</div>
<!-- Side navigation -->
<div class="sidenav" id="mySidebar">
About
Services
Clients
Contact
</div>
<div id="main">
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
<div id="map">
<div class="container">
<div class="media" style="left:465px;top:340px; background:red;">h</div>
<div class="media" style="left:530px;top:250px; background:blue;">g</div>
<div class="media" style="left:465px;top:175px;background:green ">f</div>
<div class="media" style="left:400px;top:100px;background:red">e</div>
<div class="media" style="left:335px;top:175px; background:blue">d</div>
<div class="media" style="left:270px;top:250px; background:green;">c</div>
<div class="media" style="left:335px;top:325px;">b</div>
<div class="media" id="m1">a</div>
</div>
</div>
<div class='circle-container'>
<a href='#' class='center'><img src='image.jpg'></a>
<a href='#' class='deg0'><img src='image.jpg'></a>
<a href='#' class='deg45'><img src='image.jpg'></a>
<a href='#' class='deg135'><img src='image.jpg'></a>
<a href='#' class='deg180'><img src='image.jpg'></a>
<a href='#' class='deg225'><img src='image.jpg'></a>
<a href='#' class='deg315'><img src='image.jpg'></a>
</div>
<div class="jumbotron text-center" style="margin-bottom:0">
<p>Footer</p>
</div>
</div>
As other commenters have noted, using % for both the positioning and the dimensions of the contained elements is a good approach here.
You can also use vmin to establish the width and height of the .container, to ensure that whether the viewport is decreased horizontally or vertically, it remains visible in its entirety.
Working Example:
.container {
position: relative;
width: 100vmin;
height: 100vmin;
background-color: yellow;
}
.container div {
position: absolute;
width: 6%;
height: 9%;
transform: translateX(-50%);
}
.a {
top: 60%;
left: 50%;
background-color: blue;
}
.b {
top: 52%;
left: 40%;
background-color: red;
}
.c {
top: 44%;
left: 30%;
background-color: green;
}
.d {
top: 36%;
left: 40%;
background-color: blue;
}
.e {
top: 28%;
left: 50%;
background-color: red;
}
.f {
top: 36%;
left: 60%;
background-color: green;
}
.g {
top: 44%;
left: 70%;
background-color: blue;
}
.h {
top: 52%;
left: 60%;
background-color: red;
}
<div class="container">
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
<div class="d"></div>
<div class="e"></div>
<div class="f"></div>
<div class="g"></div>
<div class="h"></div>
</div>
I want to stretch the sidebar vertically when the dropdown is clicked. The height of the sidebar is 100%, so if I click the link or the a tag, the sidebar should stretch.
However, if I click the sidebar the container and the sidebar stays at 100% height and the dropdown goes past the end of the menu.
In the picture there are 4 links as an example, but in the code below I've only added 1 link.
The first image: This is when the links or the a tag is not been click
The second image: This is when the links are already clicked and the sidebar and container does not stretch.
<body>
<!-- SIDERBAR -->
<div class="container">
<div class="sidebar">
<img src="images/1232.png" class="logo">
<h1 class="h1-1">Pacific Sky</h1>
<h1 class="hr-1">___________________________</h1>
<img src="images/sampleimg.png" class="dp">
<p class="welcomemessage">Welcome, <p class="adminname">Dave Spencer</p>
<div class="links">
<br>
<h5 style="color: white; font-size: 2vh;"> GENERAL</h5><br>
<!-- Links -->
<script type="text/javascript" src="js/showhide.js"></script>
<!-- links palatandaan -->
<div class="dashboard" id="dashboard">
<p class="dashboard-color">
<i class="fa fa-podcast" aria-hidden="true" id="dashboardlogo"></i>
DASHBOARD
<i class="fa fa-caret-down okay" aria-hidden="true" id="downlogo"></i></p>
<i class="fa fa-dot-circle-o" aria-hidden="true" id="bullet"></i> Messages
<i class="fa fa-dot-circle-o" aria-hidden="true" id="bullet"></i> Pending Reservation
<i class="fa fa-dot-circle-o" aria-hidden="true" id="bullet"></i> Approved Reservation
</div><br>
</div>
</div>
// showhide
$(document).ready(function(){
$(".dashboard").click(function(){
$("a").slideToggle(400);
});
});
*
{
padding: 0;
margin: 0;
}
body
{
width: 100%;
width: 100%;
font-family: 'Alegreya Sans';
}
a
{
color: white;
text-decoration: none;
display: none;
font-family: RobotoT;
}
.container
{
background: linear-gradient(to left bottom, #ccccff 0%, #ffffff 100%);
position: relative;
width: 100%;
height: 100%;
}
.sidebar
{
width: 50vh;
height: 100vh;
position: relative;
background-color: #2A3F54;
}
//and this is the links
.links
{
position: relative;
top: 33%;
color: #e5e6e8;
}
.dashboardlinks
{
font-size: 2.5vh;
line-height: 250%;
text-align: left;
color: #e8eaef;
position: relative;
top: 1vh;
padding-left: 14%;
}
#downlogo
{
position: absolute;
right: 8%;
}
Probably just need to change width to height: (and I'd add html)
body
{
width: 100%;
width: 100%;
font-family: 'Alegreya Sans';
}
to
html, body
{
width: 100%;
height: 100%;
font-family: 'Alegreya Sans';
}
Update .sidebar to this
.sidebar
{
width: 50vh;
min-height: 100vh;
position: relative;
background-color: #2A3F54;
}
https://jsfiddle.net/pmuhnhfo/
I just copy pasted more items in fiddle to make it show the issue
The height 100vh before is restricting it and since you want it to stretch the whole way, just set minimum height
On a side note, you should change
<p class="welcomemessage">Welcome, <p class="adminname">Dave Spencer</p>
to
<p class="welcomemessage">Welcome, <span class="adminname">Dave Spencer</span></p>
I think you originally you had a p tag inside of another p tag
enter image description here
So I wanted the image and the navbar text to fill the entire screen horizontally, but can't find a way to do it. I have used CSS properties border padding and width to try and expand the background the navbar elements, but nothing seems to change it; the elements always remain centered with borders.
This only happens after I transition my code from HTML/CSS to Angular; this is how my code looks when I don't put it in components:
Does anyone know how to fix this? thanks in advance
Components
content_component.html <!-- Intro Header -->
<div class="all">
<header class="masthead">
<div class="intro-body">
<div class="container">
<div class="row">
<div class="col-lg-8 mx-auto">
<a href="#about" class="btn btn-circle js-scroll-trigger">
<i class="fa fa-angle-double-down animated"></i>
</a>
</div>
</div>
</div>
</div>
</header>
<!-- About Section -->
<section id="about" class="content-section text-center">
<div class="container">
<div class="row">
<div class="col-lg-8 mx-auto">
<h2>About Me</h2>
<p>
hello
</p>
</div>
</div>
</div>
</section>
</div>
content_component.css
.all{
height:100%;
background: black;
color: white;
margin: 0;
}
.masthead{
display: table;
overflow:auto;
padding-left: 0px;
padding-right: 0px;
padding-top: 100px;
padding-bottom: 600px;
text-align: center;
color: white;
background: url('../../img/intro-bg.jpg') no-repeat bottom center scroll;
background-size: 100%;
background-color: black;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
.intro-body {
display: table-cell;
vertical-align: middle;
.brand-heading {
font-size: 50px;
}
.intro-text {
font-size: 18px;
}
}
#media(min-width:768px) {
height: 100%;
padding: 0;
.intro-body {
.brand-heading {
font-size: 100px;
}
.intro-text {
font-size: 22px;
}
}
}
}
app_component.css
.container{
}
html{
margin:auto;
overflow: hidden;
}
You can set the body margin to auto
https://jsfiddle.net/wxmsud1d/
body {
margin:auto;
}
header {
background-color:red;
}
<header>Text goes here</header>
I have this navigation bar which I have done in CSS, I would like it so when I hover over one of the 3 navigation icons it will change the main image background position.
I've tried a few ways but not managed to get them to work properly.
CSS
/* Nav Button 1 */
.nav1 {
float:left;
padding-top:20px;
border:none;
outline:none;
}
#nav1
{
display: block;
width: 92px;
height: 107px;
background: url("images/triangle.png") no-repeat 0 0;
}
#nav1:hover
{
background-position: 0 -107px;
}
/* Nav Button 2 */
.nav2 {
float:left;
padding-top:20px;
border:none;
outline:none;
padding-right: 0px;
}
#nav2
{
display: block;
width: 92px;
height: 107px;
background: url("images/triangle.png") no-repeat 0 0;
}
#nav2:hover
{
background-position: 0 -107px;
}
/* Nav Button 3 */
.nav3 {
float:left;
padding-top:20px;
border:none;
outline:none;
padding-right: 0px;
}
#nav3
{
display: block;
width: 92px;
height: 107px;
background: url("images/triangle.png") no-repeat 0 0;
}
#nav3:hover
{
background-position: 0 -107px;
}
/* Nav Name */
.navname {
float:left;
padding-top:20px;
border:none;
outline:none;
padding-right: 0px;
}
#navname
{
display: block;
width: 228px;
height: 81px;
background: url("images/blank.png") no-repeat 0 0;
}
HTML
<div id="navigation">
<div class="nav1">
<a id="nav1" href="#"></a>
</div>
<div class="nav2">
<a id="nav2" href="#"></a>
</div>
<div class="nav3">
<a id="nav3" href="#"></a>
</div>
<div class="navname"><a id="navname" href="#"></a>
</div>
</div>
Any ideas how this can be done? The 'navname' element is background position I want to change when hovering over either nav1, nav2, nav3.
Thanks :D
This is quite simple using jQuery:
$('element-to-initiate-change').hover(function(){
//this will happen when your mouse moves over the object
$('element-to-change').css({
"property":"value",
"property":"value",
});
},function(){
//this is what will happen when you take your mouse off the object
$('element-to-change').css({
"property":"value",
"property":"value",
});
});
Here is an example: http://jsfiddle.net/dLbDF/258/
If you made a jsfiddle using your code, I would've done this to your code so you could see clearer. Always use jsfiddle or some other kind of example when asking a question.
Old question but here's a possible CSS-only solution for others who come across it.
https://jsfiddle.net/Hastig/ancwqda3/
html
<div id="navigation">
<a class="nav n1" href="#"></a>
<a class="nav n2" href="#"></a>
<a class="nav n3" href="#"></a>
<a class="title t0" href="#"></a>
<a class="title t1" href="#">one</a>
<a class="title t2" href="#">two</a>
<a class="title t3" href="#">three</a>
</div>
css
.nav {
display: inline-block;
float: left;
padding-top: 0px;
width: 92px;
height: 107px;
background: url("http://dl.dropbox.com/u/693779/triangle.png") no-repeat 0 0;
}
.nav:hover {
background-position: 0 -107px;
}
.title {
width: 228px;
height: 107px;
background: url("http://dl.dropbox.com/u/693779/blank.png") no-repeat 0 0;
color: red; font-weight: bold;
text-decoration: none;
font-size: 40px; line-height: 107px;
text-align: center;
}
.t0 {
display: inline-block;
}
.t1, .t2, .t3 {
display: none;
}
.nav:hover ~ .t0 {
display: none;
}
.n1:hover ~ .t1, .n2:hover ~ .t2, .n3:hover ~ .t3 {
display: inline-block;
}