Halli Hallo,
ich passe gerade ein Template an und habe einiges versucht, dass folgende Probleme gelöst sind.
Klick Screenshot
Mein Problem ist erst, dass der Container unten, also der ganze Kasten unter dem Header größer ist als er sein soll.
Es sollte genau so breit sein wie der Header.
Das habe ich in der css auch so eingetragen.
Ich habe mit den Paddingwerten gespielt und da scheint es dran zu liegen.
Wenn ich die Breite des Headers auf 1000 statt 1050px setze, ist es fast genau so groß.
Die CSS:
Das nächste ist: Menu (horizontal) ist linksbündig. Ich hätte es gerne zentriert.
Die Schrift von menu2 ist auch linksbündig. Der Text innen drin soll auch zentriert sein. Sieht man ja, wenn es gehovert ist. Schwarzer Hintergrund.
Was habe ich falsch gemacht?
Edit: menu2 hat sich erledigt. text-align: center war ja einfach.
ich passe gerade ein Template an und habe einiges versucht, dass folgende Probleme gelöst sind.
Mein Problem ist erst, dass der Container unten, also der ganze Kasten unter dem Header größer ist als er sein soll.
Es sollte genau so breit sein wie der Header.
Das habe ich in der css auch so eingetragen.
Ich habe mit den Paddingwerten gespielt und da scheint es dran zu liegen.
Wenn ich die Breite des Headers auf 1000 statt 1050px setze, ist es fast genau so groß.
Die CSS:
PHP:
body{
padding:0;
margin:0;
color:#000000;
font-family: verdana, tahoma, sans-serif;
font-size: 76%;
background-color: #6DBFFB;
background-image: none;
background-repeat: no-repeat;
}
a{
text-decoration:none;
background-color:inherit;
font-weight:bold;
color:#286ea0;
}
a:hover{
background-color:inherit;
color:#303030;
}
h1{
margin:0;
font-size:3.6em;
letter-spacing:-3px;
text-align:right;
background-color:inherit;
color:#ffffff;
}
h2{
margin:5px 0 10px 0;
font-size:1.6em;
letter-spacing:-1px;
font-weight:normal;
}
p{
margin:0 0 15px 0;
line-height:1.3em;
}
img{
float:left;
margin:0 10px 8px 0;
}
#title{
width:1050px;
height:140px;
margin-top: 20px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
border:1px solid #000000;
}
#container{
margin:0 auto 15px auto;
width:1050px;
padding:15px;
background:#ffffff url(beispiel.jpg) bottom left no-repeat;
color:#000000;
border:10px solid #000000;
}
#sidebar{
float:left;
width:120px;
padding-left:10px;
}
#main{
width:825px;
float:right;
}
#footer{
clear:both;
}
#menu {
width: 100%;
background: #ffffff;
font-family: Verdana;
font-size: 1em;
line-height: 1.5;
float: left;
}
/*--Setzt alle Abstände auf "Null"--*/
* {
margin: 0;
padding: 0;
}
/*--formatiert die Themenblöcke--*/
#menu ul {
float: left;
width: 125px;
list-style-type: none;
}
/*--definiert die Blocküberschriften--*/
#menu h3 {
font-size: 1em;
text-align: center;
color: #ffffff;
border: 1px solid #ffffff;
background: #000000;
}
/*--definiert die "Drop-Down-Links" im Normalzustand--*/
#menu a {
text-decoration: none;
display: block;
text-align: center;
background: #000000;
border: 1px solid #ffffff;
color: #ffffff;
}
#menu a:hover{
background-color:#6DBFFB;
color:#000000;
border:1px solid #ffffff;
}
/*
*verhindert im Zusammenhang mit position absolute bei ul ul
*eine Höhenvergrößerung von #menu beim Hovern--
*/
#menu li {
position: relative;
}
/*--versteckt die "Drop-Down-Links", solange nicht gehovert wird--*/
#menu ul ul {
position: absolute;
z-index: 2;
display: none;
}
/*--lässt die Dropdown-Links beim Hovern erscheinen--*/
#menu ul li:hover ul {
display: block;
}
/*--nur für IE-Versionen kleiner gleich 6 erkennbar--*/
* html #menu ul li {
float: left;
width: 100%;
}
/*--nur für IE 7 erkennbar--*/
*+ html #menu ul li {
float: left;
width: 100%;
}
/*--bewirkt Hover-Effekt für IE kleiner 7 auch für ul- und li-Elemente--*/
*html body {
behavior: url(csshover3-source.htc);
font-size: 100%;
}
*html #menu ul li a {
height: 1%;
}
/*--definiert einen Einzellink im Normalzustand, wenn kein Drop-Down erforderlich--*/
#menu a.direkt:link {
font-size: 1em;
font-weight: bold;
text-align: center;
color: #ffffff;
border: 1px solid #ffffff;
background: #000000;
}
/*--definiert einen Einzellink im Hoverzustand, wenn kein Drop-Down erforderlich--*/
#menu a.direkt:hover {
color: #000000;
background: #6DBFFB;
border: 1px solid #ffffff;
}
/*-- Menü 2 --*/
.menu2{
display:block;
width:100px;
padding:4px 2px 4px 10px;
font-size:1.1em;
font-weight:bold;
background-color:inherit;
color:#000000;
border:1px solid #ffffff;
}
.menu2:hover{
background-color:#000000;
color:#6DBFFB;
border:1px solid #6DBFFB;
}
.credits{
margin-bottom:0;
font-size:0.8em;
background-color:inherit;
color:#aaaaaa;
}
.credits a{
background-color:inherit;
color:#aaaaaa;
}
.small{
font-size:0.8em;
}
.center{
text-align:center;
}Die Schrift von menu2 ist auch linksbündig. Der Text innen drin soll auch zentriert sein. Sieht man ja, wenn es gehovert ist. Schwarzer Hintergrund.
Was habe ich falsch gemacht?
Edit: menu2 hat sich erledigt. text-align: center war ja einfach.
Zuletzt bearbeitet:
Ich habe gar keine csshover3-source.htc Datei.