problemer med at centrere en div... tror jeg
Først skal jeg lige sige at det er første gang at jeg har skrevet et spørgsmål så tilgiv mig hvis jeg har gjort noget forkert. Jeg er også forfærdelig til at med hjemmeside, og dog har jeg alligevel formået at for bikset en vandret navigations menu sammen (meget af det har jeg ikke selv lavet) i CSS og html. Det gik egentlig meget godt lige indtil at jeg forsøgte at centrere den, som sagt, jeg er elendig til at det her så jeg forsøgte først med <center> som ikke virkede så prøvede <div align="center" som heller ikke virkede, så forsøgte jeg mig på nettet som har rigtig mange gode løsninger... bare ikke nogle der virker.jeg vil gætte på at det ville være meget rart med noget af koden hvis man skal hjælpe mig så jeg håber at det er korrekt hvis jeg poster html koden her:
<!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>
<link href="dropDown2.css" rel="stylesheet" type="text/css" />
<link href="boxes.css" rel="stylesheet" type="text/css" />
<link href="center.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="wrapper">
<div class="navMenu">
<ul>
<li><a href="#">Link1</a>
<ul>
<li><a href="#">dropdownlink</a></li>
<li><a href="#">dropdownlink</a></li>
<li><a href="#">dropdownlink</a></li>
<li><a href="#">dropdownlink</a></li>
<li><a href="#">dropdownlink</a></li>
<li><a href="#">dropdownlink</a></li>
</ul> <!-- end inner UL -->
</li> <!-- end main LI -->
</ul> <!-- end main UL -->
<ul>
<li><a href="#">Link1</a>
<ul>
<li><a href="#">dropdownlink</a></li>
<li><a href="#">dropdownlink</a></li>
<li><a href="#">dropdownlink</a></li>
<li><a href="#">dropdownlink</a></li>
<li><a href="#">dropdownlink</a></li>
<li><a href="#">dropdownlink</a></li>
</ul> <!-- end inner UL -->
</li> <!-- end main LI -->
</ul> <!-- end main UL -->
<ul>
<li><a href="#">Link1</a>
<ul>
<li><a href="#">dropdownlink</a></li>
<li><a href="#">dropdownlink</a></li>
<li><a href="#">dropdownlink</a></li>
<li><a href="#">dropdownlink</a></li>
<li><a href="#">dropdownlink</a></li>
<li><a href="#">dropdownlink</a></li>
</ul> <!-- end inner UL -->
</li> <!-- end main LI -->
</ul> <!-- end main UL -->
<ul>
<li><a href="#">Link1</a>
<ul>
<li><a href="#">dropdownlink</a></li>
<li><a href="#">dropdownlink</a></li>
<li><a href="#">dropdownlink</a></li>
<li><a href="#">dropdownlink</a></li>
<li><a href="#">dropdownlink</a></li>
<li><a href="#">dropdownlink</a></li>
</ul> <!-- end inner UL -->
</li> <!-- end main LI -->
</ul> <!-- end main UL -->
<ul>
<li><a href="#">Link1</a>
<ul>
<li><a href="#">dropdownlink</a></li>
<li><a href="#">dropdownlink</a></li>
<li><a href="#">dropdownlink</a></li>
<li><a href="#">dropdownlink</a></li>
<li><a href="#">dropdownlink</a></li>
<li><a href="#">dropdownlink</a></li>
</ul> <!-- end inner UL -->
</li> <!-- end main LI -->
</ul> <!-- end main UL -->
<ul>
<li><a href="#">Link1</a>
<ul>
<li><a href="#">dropdownlink</a></li>
<li><a href="#">dropdownlink</a></li>
<li><a href="#">dropdownlink</a></li>
<li><a href="#">dropdownlink</a></li>
<li><a href="#">dropdownlink</a></li>
<li><a href="#">dropdownlink</a></li>
</ul> <!-- end inner UL -->
</li> <!-- end main LI -->
</ul> <!-- end main UL -->
<br class="clearFloat" />
</div> <!-- end navMenu -->
</div> <!-- end wrapper -->
</body>
</html>
og så håber jeg at det er ok at jeg sætter css koden her:
@charset "utf-8";
.navMenu {
width: 1350px;
margin:0 auto;
padding:0;
}
.navMenu ul {
margin:0;
padding:0;
line-height:30px;
}
.navMenu li {
margin:0;
padding:0;
list-style:none;
float:left;
position:relative;
background:#999;
}
.navMenu ul li a {
text-align:center;
font-family:Verdana, Geneva, sans-serif;
text-decoration:none;
height:30px;
width:150px;
display:block;
color:#000;
border:1px solid #333;
text-shadow:1px 1px 1px #000
}
.navMenu ul ul {
position:absolute;
visibility:hidden;
top:32px;
}
.navMenu ul li:hover ul {
visibility:visible;
}
/**********************************************************************************/
.navMenu li:hover {
background:#999
}
.navMenu ul li:hover ul li a:hover {
background:#CCC
}
.navMenu a:hover {
color:#000
}
.clearFloat {
clear:both;
margin:0;
padding:0;
}
det er sikkert rigtig forvirret men jeg vil virkelig håbe på at der er nogle der er kloge nok til at hjælpe mig!
