html - Menu baggrund. - Udvikleren.dk - Programmering, webdesign og grafik

Tags: html css

Bruger #15047 @ 08.08.09 17:27

Hejsa alle sammen.

Jeg har nogle menuer og jeg vil gerne have en farve bagved dem når man er på den side.

Min .css fil ser sådan her ud:

CSS kode

 <style type="text/css">
 
 .body 
 {
     background: grey;
 }
 
 h1 {
     border-top-width: 1px;    
     border-top-style: solid;    
     border-top-color: black;
     margin-top: 10px;
 
     border-bottom-width: 1px;    
     border-bottom-style: solid;    
     border-bottom-color: black;    
     margin-bottom: 25px;
 
     border-right-width: 1px;    
     border-right-style: solid;    
     border-right-color: black;    
     margin-right: 280px;
 
     border-left-width: 1px;    
     border-left-style: solid;    
     border-left-color: black;
     margin-left: 278px;
 }
 
 .underlinemenu{
 font-weight: bold;
 width: 100%;
 }
 
 .underlinemenu ul{
 padding: 6px 0 7px 0;
 margin: 0;
 text-align: center;
 }
 
 .underlinemenu ul li{
 display: inline;
 }
 
 .underlinemenu ul li a{
 color: #494949;
 padding: 6px 3px 4px 3px; 
 margin-right: 20px;
 text-decoration: none;
 border-bottom: 3px solid grey;
 }
 
 .underlinemenu ul li a:hover, .underlinemenu ul li a.selected{
 border-bottom-color: black;
 }
 </style>

Og html filen:

HTML kode

 <html>
 <body>
 <center>
 <img src="images/header.jpg">
 </center>
 <link rel="stylesheet" href="background.css" type="text/css" />
 <link rel="stylesheet" href="install.css" type="text/css" />
 <div class="underlinemenu">
 <ul>
 <li><a href="index.html">Start</a></li>
 <li><a href="licens.php">Licens of Use</a></li>
 <li><a href="files.php">Files and Directories</a></li>
 <li><a href="mysql.php">MySQL</a></li>
 <li><a href="aacc.php">Admin Account</a></li>
 <li><a href="lastpage.php">Finish</a></li>
 </ul>
 </div>
 <h1>
 <br>
 <br>
 <br>
 <br>
 <br>
 <br>
 <br>
 <br>
 <br>
 <br>
 <br>
 <br>
 </h1>
 <center>
 <font size="1">Build 1 - Version 0.0Beta RC1</font>
 <br>
 <img src="images/footer.jpg">
 </center>
 </body>
 </html>

Background.css er bare filen der gør min baggrund grå.

<li><a href="lastpage.php">Finish</a></li>

Hvordan kan jeg gøre en lille firkant rundt om den tekst en mørkere grå farve?

- Hilsen Magnus.

5 svar postet i denne tråd vises herunder
1 indlæg har modtaget i alt 1 karma

Sorter efter stemmer Sorter efter dato

Bruger #11506 @ 09.08.09 20:56

190

du kan fx lave dit a tag til et inline element, så har du noget at hover på.
Jeg har taget din Margin og brugt inde i underlineMenuContent til centering.

Så skal du bare være klar over jeg har lavet fast width på din menu.

Kode

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.body {
	background: grey;
}
h1 {
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: black;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: black;
	border-right-width: 1px;
	border-right-style: solid;
	border-right-color: black;
	border-left-width: 1px;
	border-left-style: solid;
	border-left-color: black;
	margin: 10px 280px 25px 278px;
}
.underlinemenu {
	font-weight: bold;
	width: 100%;
	height: 40px;
}
#underlineMenuContent {
	height:40px;
	margin-right: auto;
	margin-left: auto;
	width: 800px;
}

.underlinemenu ul {
	padding: 6px 0 7px 0;
	margin: 0;
	text-align: center;
}
.underlinemenu ul li {
	display: inline;
}
.underlinemenu ul li a {
	color: #494949;
	padding: 6px 3px 4px;
	text-decoration: none;
	border-bottom: 3px solid grey;
	display: inline;
	background: #D9E0FF;
	margin: 0px auto;
}
.underlinemenu ul li a:hover, .underlinemenu ul li a.selected {
	border-bottom-color: black;
	background: #F00;
}
</style>
</head>
<body>

 <center>
   <img src="images/header.jpg">
</center>
  <link rel="stylesheet" href="background.css" type="text/css" />
   <link rel="stylesheet" href="install.css" type="text/css" />
   <div class="underlinemenu">
   <div id="underlineMenuContent">
   <ul>
   <li><a href="index.html">Start</a></li>
   <li><a href="licens.php">Licens of Use</a></li>
  <li><a href="files.php">Files and Directories</a></li>
 <li><a href="mysql.php">MySQL</a></li>
 <li><a href="aacc.php">Admin Account</a></li>
 <li><a href="lastpage.php">Finish</a></li>
 </ul>
 </div>
 </div>
  <h1>
 <br>
 <br>
 <br>
  <br>
   <br>
  <br>
  <br>
  <br>
   <br>
 <br>
  <br>
  <br>
</h1>
 <center>
 <font size="1">Build 1 - Version 0.0Beta RC1</font>
  <br>
 <img src="images/footer.jpg">
</center>

</body>
</html>

Bruger #11506 @ 08.08.09 19:20

190

uden at have prøvet din kode, så bliver jeg lidt i tvivl om din

.underlinemenu ul li a.selected

mener du

.underlinemenu ul li a:active

Bruger #15047 @ 08.08.09 19:38

Nej ikke på den måde.

Men altså, sådan at der er en firkant rundt om dem. Eller har faktisk lige fået en anden idé. Jeg vil hellere have den.

Hvordan kan jeg lave en farve boks vandret med de der menuer?(Skal identificeres med px i heigh and width, da den skal rykke sig hver gang en bruger går hen på den anden). Har du nogen idé om hvordan man gør det?

Og tak for svaret, har rettet det i min kode nu.

Indlæg senest redigeret d. 08.08.2009 19:46 af Bruger #15047

Bruger #15047 @ 14.08.09 18:15

Der sker intet uden <br> tagget.

Det bliver bare to paralle linjer.

Bruger #15047 @ 14.08.09 18:21

Det er lige meget nu.
Jeg har fundet en tilpassende løsning med...

CSS kode

 min-height: 500px;

Ellers tak for alt jeres hjælp!

Menu baggrund.

Karma barometer (30 dage)

Modtaget

Givet

Favorit hos
Forum tråde
Artikler