Hall. Ich möchhte ein, wie der Titel schon verrät, ein mapbares Submenu in mein Template integrieren. Allerdings bin ich nicht grade der 'CSS Guru. Somit suche ich ein wenig Hilfe bei euch.
Hier mal ein bisschen Quelltext (muss ich bei zeiten noch ein wenig aufräumen:sad:
CSS-File
Code:
{
margin: 0 0 0 0;
padding: 0;
}
body {
margin: 0;
background: #FFFFFF url(images/img01.gif) repeat-x 0 17px;
font: normal small Verdana, Arial, Helvetica, sans-serif;
color: #959595;
}
h1, h2, h3 {
font-family: Georgia, "Arial", Times, serif;
color: #385B88;
}
h2 {
margin-bottom: .8em;
font-size: 2em;
font-weight: normal;
}
h3 {
margin-bottom: 1em;
text-transform: uppercase;
letter-spacing: 2px;
font: bold x-small Verdana, Arial, Helvetica, sans-serif;
}
ul {
margin-left: 3em;
}
ul li {
}
ol {
margin-left: 3em;
}
ol li {
}
a {
text-decoration: none;
color: #E08934;
}
a:hover {
text-decoration: underline;
}
img {
}
/* Logo */
#logo {
width: 770px;
height: 100px;
margin: 0 0 0 25%;
background: url(images/Banner.jpg) no-repeat 0 10px;
}
#logo h1 {
padding: 106px 0 0 40px;
}
#logo h1 a {
text-transform: uppercase;
font-size: 30px;
color: #FFFFFF;
}
#logo h1 i {
text-transform: lowercase;
letter-spacing: -3px;
font: italic normal 48px Georgia, "Arial", Times, serif;
color: #385B88;
}
#logo h2 {
padding: 0 0 0 42px;
text-transform: lowercase;
font-size: 1em;
}
#logo a {
}
/*Slogan */
#slogan {
padding: 40px 0 0 10px;
font-size: x-small;
}
/* Content */
#content {
width: 770px;
margin: 0 0 0 25%;
height: 300px;
}
/* Content > Main */
#main {
float: right;
width: 500px;
margin-top: 0 auto;
}
/* Content > Main > Welcome */
#welcome {
}
/* Content > Sidebar */
#sidebar {
float: left;
width: 240px;
}
/* Content > Sidebar > Menu */
#menu {
margin-bottom: 100px;
border-bottom: 4px solid #EBEBEB;
position: inherit;
}
#menu ul {
margin: 0;
list-style: none;
line-height: normal;
}
#menu li {
display: inline;
}
#menu a {
display: inline-block;
display: block;
padding: 10px 0 10px 24px;
background: url(images/img05.gif) no-repeat 10px 17px;
border-top: 1px solid #EBEBEB;
color: #E08934;
}
#menu a:hover, #menu .active a {
background: #EBEEF3;
text-decoration: none;
font-weight: bold;
color: #385B88;
}
/* Footer */
#footer {
padding: 15px 0 15px 0;
border-top: 4px solid #D6D5D5;
background: #172983;
}
#footer p {
width: 770px;
margin: 0 auto;
font-size: x-small;
}
/* Footer > Legal */
#legal {
padding-left: 25%;
}
/* Footer > Links */
#links {
} Und hier das passende HTML-File
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Firma</title>
<meta name="Keywords" content="" />
<meta name="Description" content="" />
<link href="default.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="logo">
<p id="slogan">slogan</p>
</div>
<div id="banner"></div>
<div id="content">
<div id="sidebar">
<div id="menu">
<ul>
<li class="active"><a href="/home.htm" title="">Home</a></li>
<li><a href="#" title="Home">Firmengeschichte</a></li>
<li><a href="#" title="">Produkte</a></li>
<li><a href="#" title="">Ansprechpartner</a></li>
<li><a href="#" title="">Impressum</a></li>
</ul>
</div>
</div>
<div id="main">
<div id="welcome" class="post">
<p><img src="http://www.typo3forum.net/forum/images/img03.jpg" alt="" width="500" height="300" /></p>
</div>
</div>
<div id="content-item"></div>
</div>
<div id="footer">
<p id="legal">Copyright © 2008<a href="#"></a></p>
</div>
</body>
</html>
Ich hoffe, es möchte sich da jemand durchkämpfen und mir ein wenig unter die Arme greifen.