Divs im footer wollen nicht nebeneinander u.a.

[binushka]

Hallo,
wenn jemand Lust und zeit hätte sich meine Seite (bitte nicht erschrecken, es ist eine Übung) anzuschauen und folgende Fragen antworten bitte, wäre sehr dankbar ;0)

http://cbmprojekt.grn.cc/

Fragen:
1)warum gibt es über dem Header Platz?
1.1) In der mobile version (siehe media Queries unten), auch wenn ich margin auf Null setzte gib es Platzt umherum, warum?
2)warum gib es zwischen header und section einem leeren Platz?
3)Im footer:
Ich möchte das die <asides> nebeneinander stehen OHNE dass das div "capa1_footer" (schwarz) position:absolut hat.
Doch wenn ich die position ändern "fliessen " sie nicht richtig mit dem float:left

Danke viele mals im voraus

 

[Nitamud]

Magst du uns nicht den betreffenden Css-Quelltext zur Verfügung stellen? ich habe wie einige andre leider keine Lust mich durch Dutzende Css-Datein zu klicken bis ich fündig werde :)

Zu den ersten zwei Problemen würde ich spontan sage, dass du das mit einem Reset der browserspezifischen Stylsheets via * {margin: 0; padding: 0;} erreichen kannst.

Beim dritten bräuchten wir vermutlich den Quellcode :)

 

[binushka]

Magst du uns nicht den betreffenden Css-Quelltext zur Verfügung stellen? ich habe wie einige andre leider keine Lust mich durch Dutzende Css-Datein zu klicken bis ich fündig werde :)

Zu den ersten zwei Problemen würde ich spontan sage, dass du das mit einem Reset der browserspezifischen Stylsheets via * {margin: 0; padding: 0;} erreichen kannst.

Beim dritten bräuchten wir vermutlich den Quellcode :)

Danke Nitamud, hier :

body {
background-color:#ccc;
}
#wrapper{
width:80%;
margin: 0 auto;
background-color:#fff;

}


.menu1 div ul{
background-color: red;
padding-bottom: 1%;
padding-top: 1%;

}

.menu1 div ul li {
border-right: 1px solid black;
display: inline;
padding-left: 1%;
padding-right: 1.5%;

}
header {
width:100%;
center top / 1600px auto rgba(0, 0, 0, 0);

}



.home-link {
color: #141412;
display: block;

padding: 5% 5% 0;
text-decoration: none;

}
.section {
width:70%;
float:left;
background-color:yellow;
padding:5%;
box-sizing: border-box;
}


#columna_derecha{
width:30%;
float:right;
background-color:gray;
padding:5%;
box-sizing: border-box;
}

footer{
width:100%;
background-color:green;
clear: both;


}
.capa1_footer{
position:absolute;
background-color:black;
width:79%;
}

.footer {
box-sizing: border-box;
background-color:blue;

float: left;
width: 30%;
}


.menu2 ul li{
display:inline;
padding-right: 1.5%;
}

@media screen and (max-width: 500px) {
#wrapper{
width:100%;
margin:0;


}
.section {
width:100%;
float:none;
padding:0;
}
#columna_derecha {
width:100%;
float:none;
}
}

 

[scbawik]

Danke Nitamud, hier :

body {
background-color:#ccc;
}
#wrapper{
width:80%;
margin: 0 auto;
background-color:#fff;

}


.menu1 div ul{
background-color: red;
padding-bottom: 1%;
padding-top: 1%;

}

.menu1 div ul li {
border-right: 1px solid black;
display: inline;
padding-left: 1%;
padding-right: 1.5%;

}
header {
width:100%;
center top / 1600px auto rgba(0, 0, 0, 0);

}



.home-link {
color: #141412;
display: block;

padding: 5% 5% 0;
text-decoration: none;

}
.section {
width:70%;
float:left;
background-color:yellow;
padding:5%;
box-sizing: border-box;
}


#columna_derecha{
width:30%;
float:right;
background-color:gray;
padding:5%;
box-sizing: border-box;
}

footer{
width:100%;
background-color:green;
clear: both;


}
.capa1_footer{
position:absolute;
background-color:black;
width:79%;
}

.footer {
box-sizing: border-box;
background-color:blue;

float: left;
width: 30%;
}


.menu2 ul li{
display:inline;
padding-right: 1.5%;
}

@media screen and (max-width: 500px) {
#wrapper{
width:100%;
margin:0;


}
.section {
width:100%;
float:none;
padding:0;
}
#columna_derecha {
width:100%;
float:none;
}
}

@Nitamud hat zwar nach CSS Code verlangt, aber ich finde es gut dass du gleich einen Link zur Website gepostet hast, das ist mir und den meisten anderen lieber.
Wie er bereits richtig geschrieben hat:

Für 1-2:

* {margin:0;padding:0;}

Bei 3 bin ich mir nicht sicher was du überhaupt meinst.

footer {overflow:hidden;}

vielleicht?

 

[SchneiderS]

und hier noch nen kleiner tipp: http://www.responsivegridsystem.com

da sparst du dir ne menge zeit und ich nutzt das immer in meinen projekten. und es läuft ;-)

 

[Nitamud]

@Nitamud hat zwar nach CSS Code verlangt, aber ich finde es gut dass du gleich einen Link zur Website gepostet hast, das ist mir und den meisten anderen lieber.

Auch ich bevorzuge normalerweise Internetlinks, da aber auch ich bei der letzten Fragestellung nicht wusste was gemeint war und wegen der Menge an Css-Links die betroffene Stelle nicht gleich gefunden habe, habe ich nach dem Code gefragt :)

 

[binushka]

Bei 3 bin ich mir nicht sicher was du überhaupt meinst.

Vielen Dank Nitamud und SchneiderS, das hat gut geklappt mit der Fragen 1 und 2.

Bzgl. 3 was ich meine ist:
das element <footer> beinhaltet ein div class"capa1_footer" und dieses beinhaltet 2 divs class "footer"

Sowohl das element footer als auch das div "capa1_footer" werden nicht angezeigt. Da ist ein Fehler.

Sobald ich die beide "kleine" divs class= "footer" anspreche und das float:left entferne, sind alle beide "Eltern-elemente" wieder da.

Ich möchte aber dass die beide "kleine" divs class ="footer" (kalender und "texto de pagina") nebeneiander stehen.