dummmel
Themenersteller
Beginner (20 Beiträge)

Problem mit meinem Layout

am 15.12.2013, 20:32 Uhr eröffnete dummmel folgenden Thread
HTML5 & CSS    1557 mal gelesen    4 Antwort(en).

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]


matthes
Avatar matthes
Foren Moderator
Evil Genius
Content Halbgott (973 Beiträge)
am 15.12.2013, 22:02 Uhr schrieb matthes

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


Make Seitenreport great again!

dummmel
Beginner (20 Beiträge)
am 15.12.2013, 22:33 Uhr schrieb dummmel

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!


matthes
Avatar matthes
Foren Moderator
Evil Genius
Content Halbgott (973 Beiträge)
am 15.12.2013, 22:37 Uhr schrieb matthes

Für .fechten hast Du eine border definiert.


Make Seitenreport great again!

Sumerlove
Neuling (1 Beiträge)
am 31.03.2015, 18:58 Uhr schrieb Sumerlove

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


Sumer

  • 1


« zurück zu: HTML5 & CSS

Das Seitenreport Forum hat aktuell 5275 Themen und 36110 Beiträge.
Insgesamt sind 48360 Mitglieder registriert.