How do I remove the duplicate for rounded corder
This code is
-moz-border-radius-topleft: 3px;
-moz-border-radius-topright: 3px;
-webkit-border-radius: 3px 3px 0px 0px;
border-radius: 3px 3px 0px 0px;
is making rounded corner.
I have a class roundcorder with the above 4 rows. This class roundcorder
is used in the two selectors section and footer.
As it is now I have added the four rows that make the rounded corner to
this selector
nav li a:link,
nav li a:visited
This will cause duplicate of code which I don't want. So my question is
how can I just use the class roundcorder from selector
nav li a:link,
nav li a:visited
Here is the complete markup and css
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title>Inlämningsuppgift 1</title>
<style type = "text/css">
body
{
font-size:small;
width:72em;
text-align:center;
background : #87a5be url(bg.jpg) no-repeat right bottom fixed;
background-repeat:no-repeat;
margin:0;
padding:0;
margin:0.2em auto;
}
.roundcorder
{
-moz-border-radius-topleft: 3px;
-moz-border-radius-topright: 3px;
-webkit-border-radius: 3px 3px 0px 0px;
border-radius: 3px 3px 0px 0px;
}
header img
{
float:left;
}
header time
{
font-size:120%;
float:right;
font-weight:bold;
}
header div:after,
nav:after
{
content :".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
nav
{
margin-top:1em;
font-weight:bold;
color:#fff;
}
nav ul
{
list-style:none;
margin:0;
padding:0;
}
nav li
{
float: left;
min-width : 8em;
text-align : center;
margin-right:0.5em;
}
nav li a:link,
nav li a:visited
{
background-color: rgba(255,255,255,0.4);
color: rgb(0,0,0);
text-decoration: none;
display: block;
padding: 0.75em;
-moz-border-radius-topleft: 3px;
-moz-border-radius-topright: 3px;
-webkit-border-radius: 3px 3px 0px 0px;
border-radius: 3px 3px 0px 0px;
}
#info nav li.info a:link,
#info nav li.info a:visited
{
background-color: #fff;
}
nav li a:hover
{
background-color:grey;
}
.content
{
background-color: #fff;
color: #000;
padding: 0.2em;
}
.content h1
{
font-size:200%;
}
.content p
{
text-align:left;
font-size:110;
padding:0.5em;
}
footer
{
background:#e3e3e3;
}
footer p
{
text-align:left;
}
</style>
</head>
<body id="info">
<header>
<div>
<img src="logo.jpg" alt="Euro travel logo" />
<time>2013-09-05 16:00</time>
</div>
<nav>
<ul>
<li class="info"><a href="#">Information</a></li>
<li class="tidtabell"><a href="#">Tidtabell</a></li>
<li class="bokning"><a href="#">Bokning</a></li>
<li class="kontakt"><a href="#">Kontakt</a></li>
</ul>
</nav>
</header>
<section class="content roundcorder">
<h1>Välkommen till flygbolagets Euro Travel hemsida</h1>
<p> Här kommer jag senare att fylla på med mer information.</p>
</section>
<footer class="roundcorder">
<h4>© copyright</h4>
<p>Flygbolaget Euro Travel är ganska nytt med sitt huvudkontor i
Stockolm.
Euro Travel har som målsättning att bli värdsledande inom 3
år.</p>
<p> De har nyligen infört ett poängsystem
som innebär att ju mer du flyger dessto fler poäng får du som
du kan använda
vid nästa flygbiljett.
Dessutom ehålls alltid 20% rabatt om du köper en biljett
3månader före avresan.
</p>
<address>Adress: Euro Travel
<br />Kundservice Kungsgatan 123 45 Stockhom
Email:EuroTravel@travel.se <br />
Tel:08-57 27 489<br />
www.eurotravel.se
</address>
</footer>
</body>
</html>
No comments:
Post a Comment