Problem mit meinem Layout
Redaktionelle Einordnung
Diese archivierte Diskussion behandelt Problem mit meinem Layout aus Sicht der Rubrik HTML5 & CSS.
Die Diskussion bleibt als Archiv nutzbar. Für die aktuelle Bewertung empfehlen sich ergänzend neuere Artikel, Tools oder eine konkrete Analyse.
Sinnvoll nutzbar bleibt der Thread vor allem als historischer Kontext, für typische Fragestellungen und zur Einordnung älterer Empfehlungen.
Startbeitrag
Archivierter Thread aus dem Seitenreport-Forum.
servus,
habe gerade, meine seite 2 Sprachig gemacht. jetzt hat es mir aber mein layout zerschossen. Ich finde den Fehler einfach nicht. Im meinem Programm zeigt er das Layout normal an, also ohne diesen Balken zwischen Header und Navigation.
Ich füge mal die CSS mit rein da ich nur da den Fehler vermute. Nicht erschrecken ist ein ziemliches Chaos !
Achso hier zur seite www.actionartist.de
[css]
/**
/***************** ALLGEMEINE FORMATIERUNGEN *********************
******************************************************************/
*{
margin: 0px;
padding: 0px;
}
html, body{
background: black;
}
/***************** TYPO ******************************************
******************************************************************/
body {
text-align: center;
background-attachment: fixed;
font-family: Arial, sans-serif;
}
header, nav, footer, aside, section {
display: block;
}
/***************** Layout ****************************************
******************************************************************/
header {
/*background-image: url(bilder/header-4.png);*/
height: 270px;
width: 900px;
margin: auto;
}
.header.ausbildungartist {
background-image: url(bilder/header.png);
height: 270px;
width: 900px;
margin: auto;
}
.header.stunts {
background-image: url(bilder/header-1.png);
height: 270px;
width: 900px;
margin: auto;
}
.header.biographie {
background-image: url(bilder/header-2.png);
height: 270px;
width: 900px;
margin: auto;
}
.header.index {
background-image: url(bilder/header-4.png);
height: 270px;
width: 900px;
margin: auto;
}
.header.ausbildungstunt {
background-image: url(bilder/header-7.png);
height: 270px;
width: 900px;
margin: auto;
}
.header.skill {
background-image: url(bilder/header-8.png);
height: 270px;
width: 900px;
margin: auto;
}
.header.galerie {
background-image: url(bilder/header-9.png);
height: 270px;
width: 900px;
margin: auto;
}
.header.video {
background-image: url(bilder/header-10.png);
height: 270px;
width: 900px;
margin: auto;
}
.header.impressum {
background-image: url(bilder/header-11.png);
height: 270px;
width: 900px;
margin: auto;
}
.header.sitemap {
background-image: url(bilder/header-12.png);
height: 270px;
width: 900px;
margin: auto;
}
.header.fechten {
background-image: url(bilder/header-13.png);
height: 270px;
width: 900px;
margin: auto;
}
.header.kontakt {
background-image: url(bilder/header-14.png);
height: 270px;
width: 900px;
margin: auto;
}
.header.credit {
background-image: url(bilder/header-15.png);
height: 270px;
width: 900px;
margin: auto;
}
.header.stunt {
background-image: url(bilder/header-16.png);
height: 270px;
width: 900px;
margin: auto;
}
.header.friend {
background-image: url(bilder/header-17.png);
height: 270px;
width: 900px;
margin: auto;
}
.header.artist {
background-image: url(bilder/header-18.png);
height: 270px;
width: 900px;
margin: auto;
}
.header.artistik {
background-image: url(bilder/header-19.png);
height: 270px;
width: 900px;
margin: auto;
}
header h1 {
padding-right: 10px;
padding-bottom: 10px;
color: white;
text-align: right;
font-size: 17pt;
margin-right: 10px;
}
header p {
text-align: right;
padding-right: 10px;
}
header a {
color: white;
font-size: 11pt;
padding-right: 10px;
text-align: right;
margin-top: 20px;
}
.copy p {
padding-top: 30px;
padding-right: 10px;
font-size: 6pt;
text-align: right;
color: white;
}
#logotext {
padding-top: 160px;
font-size: 16pt;
color: white;
padding-bottom: 0.36em;
}
#wrapper {
background-image: url(bilder/hintergrund-2.png);
width: 900px;
margin: 0 auto;
text-align: left;
}
#cc-m-video-container-7181417984 {
margin-left: 30px;
}
#cc-m-video-container-6260189284 {
margin-left: 30px;
}
#fomular {
width: 600px;
margin-left: 30px;
}
.grau_12 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #595c61;
}
.grau_14 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
color: #595c61;
}
nav a img {
border: 0;
}
aside {
width: 249px;
float: right;
margin-top: 25px;
margin-bottom: 25px;
}
aside a {
color: #959698;
}
aside hr {
width: 189px;
margin-left: 30px;
margin-right: 30px;
background-color:#424547;
border:#424547;
height:1px;
}
aside img {
border: 1px solid silver;
margin-left: 40px;
margin-top: 20px;
}
aside p {
color: #637276;
margin-left: 30px;
margin-right: 30px;
font-size: 15px;
margin-top: 10px;
}
aside h2 {
margin-left: 30px;
padding-bottom: 0.4em;
color: #959698;
font-size: 15pt;
}
aside h3 {
margin-left: 30px;
color: #959698;
padding-top: 1em;
padding-bottom: 0.6em;
font-size: 12pt;
font-family: Arial, sans-serif;
}
.fechten {
border: 1px solid #595c61;
height: 200px;
margin-left: 30px;
margin-right: 32px;
}
section a .name #akro {
color: white;
}
section {
width: 650px;
border-right: 1px solid #5f5c16;
margin-top: 25px;
margin-bottom: 25px;
}
section a {
color: #959698;
}
section h2 {
margin-left: 30px;
padding-bottom: 0.4em;
color: #959698;
font-size: 15pt;
}
section h3 {
margin-left: 30px;
color: #959698;
padding-top: 1em;
padding-bottom: 0.6em;
font-size: 12pt;
font-family: Arial, sans-serif;
}
section h4 {
margin-left: 30px;
color: #959698;
padding-top: 1em;
padding-bottom: 0.6em;
font-size: 10pt;
font-family: Arial, sans-serif;
}
section hr {
width: 590px;
margin-left: 30px;
margin-right: 30px;
background-color:#424547;
border:#424547;
height:1px;
}
section p {
margin-left: 30px;
padding-bottom: 0.6em;
margin-right: 30px;
color: #637276;
font-size: 15px;
}
section ul {
margin-left: 30px;
margin-right: 30px;
padding-left: 3em;
color: #637276;
font-size: 15px;
}
section li {
margin-left: 30px;
margin-right: 30px;
padding-bottom: 0.2em;
color: #637276;
}
footer {
height: 30px;
/*background-image: url(bilder/footer.png);*/
color: white;
text-align: center;
clear: both;
}
footer p {
text-align: center;
padding-top: 4px;
padding-right: 30px;
font-size: 7pt;
color: white;
}
/***************** Navigation ************************************
******************************************************************/
#steuerungoben {
background-image: url(bilder/botton-oben.jpg);
height: 32px;
border-bottom: 1px solid #5f5c16;
border-top : 1px solid #424547;
width: 650px;
float: left;
clear: both;
}
#steuer3 {
background-image: url(bilder/botton-oben.jpg);
float: right;
clear: both;
height: 32px;
border-bottom: 1px solid #5f5c16;
border-top : 1px solid #424547;
width: 250px;
}
#steuer3 p {
float: left;
}
#steuer3 a {
width: 60px;
float: left;
text-align: center;
line-height: 32px;
}
#steuer3 a img {
padding-top: 0.2em;
text-decoration: none;
}
#steuerungoben ul {
list-style-type: none;
}
#steuerungoben li {
display: inline;
}
#steuerungoben a {
font-size: 11pt;
display: block;
width: 90px;
float: left;
text-align: center;
line-height: 32px;
color: #FFF;
text-decoration: none;
/*text-shadow: 0px 0px 0px #e6e6a8;
-webkit-transition: all 800ms ease-in;
-moz-transition: all 800ms ease-in;
-ms-transition: all 800ms ease-in;
-o-transition: all 800ms ease-in;
transition: all 800ms ease-in; */
}
#steuerungoben a:hover {
color: #5f5c16;
/*background-color: rgba(255, 233, 0, 0.2);
-webkit-transition: all 400ms ease-in;
-moz-transition: all 400ms ease-in;
-ms-transition: all 400ms ease-in;
-o-transition: all 400ms ease-in;
transition: all 400ms ease-in;; */
}
/***************** SUP-Navigation *********************************
******************************************************************/
#steuerungunten {
background-image: url(bilder/botton-unten.jpg);
height: 32px;
border-top: 1px solid #5f5c16;
border-bottom: 1px solid #424547;
width: 500px;
float: left;
clear: both;
}
#steuer2 {
background-image: url(bilder/botton-unten.jpg);
float: right;
height: 32px;
border-top: 1px solid #5f5c16;
border-bottom: 1px solid #424547;
width: 400px;
}
#steuer2 p {
float: left;
}
#steuer2 a {
width: 90px;
float: left;
text-align: center;
line-height: 32px;
}
#steuer2 a img {
padding-top: 0.2em;
text-decoration: none;
}
#steuerungunten ul {
list-style-type: none;
}
#steuerungunten li {
display: inline;
}
#steuerungunten a {
font-size: 11pt;
display: block;
width: 90px;
float: left;
text-align: center;
line-height: 32px;
color: #FFF;
text-decoration: none;
/*text-shadow: 0px 0px 0px #e6e6a8;
-webkit-transition: all 800ms ease-in;
-moz-transition: all 800ms ease-in;
-ms-transition: all 800ms ease-in;
-o-transition: all 800ms ease-in;
transition: all 800ms ease-in; */
}
#steuerungunten a:hover {
color: #5f5c16;
/*background-color: rgba(255, 233, 0, 0.2);
-webkit-transition: all 400ms ease-in;
-moz-transition: all 400ms ease-in;
-ms-transition: all 400ms ease-in;
-o-transition: all 400ms ease-in;
transition: all 400ms ease-in;; */
}
[/css]
Antworten
4 Beiträgedummmel schrieb:
habe gerade, meine seite 2 Sprachig gemacht. jetzt hat es mir aber mein layout zerschossen.
Hallo dummmel,
"zerschossen" finde ich jetzt etwas hart. Ein etwas größerer Abstand zwischen zwei Elementen ist ein doch eher harmloses Problem.
Soweit ich das sehe, kommt das vom margin-top:25px für section.
Gruß
Matthes
Make Seitenreport great again!
Matthes schrieb:
dummmel schrieb:
habe gerade, meine seite 2 Sprachig gemacht. jetzt hat es mir aber mein layout zerschossen.
Hallo dummmel,
"zerschossen" finde ich jetzt etwas hart. Ein etwas größerer Abstand zwischen zwei Elementen ist ein doch eher harmloses Problem.
Soweit ich das sehe, kommt das vom margin-top:25px für section.
Gruß
Matthes
Ja für mich war es zerschosse. Habe den Fehler mittlerweile selber gefunden. Jetzt habe ich aber ein neues Problem. Wenn man auf den Workshop Fechten geht. Stimmt was mit dem Bild im Header nicht. es ist um 1 oder 2 px nach rechts verschoben.
Man man ... ich liebe es !!!
Aber danke für die Antwort!
Für .fechten hast Du eine border definiert.
Make Seitenreport great again!
Ich hatte mit float:none und clear ohne Erfolg im untergeordneten Container rumprobiert, statt an die übergeordnete ID zu gehen. Hätte ich eigentlich selber draufkommen müssen, aber manchmal sieht man ja den Wald vor lauter Bäumen nichtsmiley-pillepalle.gif