kristalljunge
Mitglied
Hallo liebe Leute,
ich versuch mich derweil in CSS so richtig reinzuarbeiten, und meine Webseite perfekt Mobile responsive zu machen.
Ich habe eine zentrierte 1050px Breite, in der sich alles abspielen soll. Die hab ich im CSS gelöst mit:
#navigation {
width: 1050px;
max-width: 100%;
height: 220px;
max-height: 220px;
margin: 0 auto;
}
In dem Bereich #navigation befinden sich die Klassen LOGO und NAVIGATIONSTEXT. Also befinden sich oben ingesamt sechs DIV's - also ein Logo und fünf Menüpunkte. Mit "float: left;" habe ich alle in einer Reihe positioniert, und mit mit "display: flex;" sage ich den sechs Bereichen, sie sollen unbedingt in einer Linie bleiben.
Das klappt auch soweit ganz gut. Schaue ich mir die Seite nur jetzt auf einem Handy an wird ein kleiner Teil rechts "abgeschnitten", und auch wenn ich sie auf meinem Browser verkleinere, cuttet er die "Übergröße" einfach. Also die "max-width: 100%;" aus dem #navigation greift nicht. Aber wieso?
Ich habe so vieles ausprobiert, und diverse Möglichkeiten gecheckt. Aber ich komm nicht weiter.
Zum Verständis noch alle Bereiche die ich im CSS bearbeitet habe und möglicherweise relevant für mein Problem sein könnten....
#header {
width: 100%;
height: 220px;
background-color: black;
}
.logo {
margin-top: 150px;
margin-right: 20px;
float: left;
}
#navigation {
width: 1050px;
max-width: 100%;
height: 220px;
max-height: 220px;
margin: 0 auto;
display: flex;
}
.navigationstext {
font-family: 'Baloo', cursive;
color: aqua;
font-size: 36px;
line-height: 30px;
float: left;
margin-top: 183px;
margin-left: 15px;
}
ich versuch mich derweil in CSS so richtig reinzuarbeiten, und meine Webseite perfekt Mobile responsive zu machen.
Ich habe eine zentrierte 1050px Breite, in der sich alles abspielen soll. Die hab ich im CSS gelöst mit:
#navigation {
width: 1050px;
max-width: 100%;
height: 220px;
max-height: 220px;
margin: 0 auto;
}
In dem Bereich #navigation befinden sich die Klassen LOGO und NAVIGATIONSTEXT. Also befinden sich oben ingesamt sechs DIV's - also ein Logo und fünf Menüpunkte. Mit "float: left;" habe ich alle in einer Reihe positioniert, und mit mit "display: flex;" sage ich den sechs Bereichen, sie sollen unbedingt in einer Linie bleiben.
Das klappt auch soweit ganz gut. Schaue ich mir die Seite nur jetzt auf einem Handy an wird ein kleiner Teil rechts "abgeschnitten", und auch wenn ich sie auf meinem Browser verkleinere, cuttet er die "Übergröße" einfach. Also die "max-width: 100%;" aus dem #navigation greift nicht. Aber wieso?
Ich habe so vieles ausprobiert, und diverse Möglichkeiten gecheckt. Aber ich komm nicht weiter.
Zum Verständis noch alle Bereiche die ich im CSS bearbeitet habe und möglicherweise relevant für mein Problem sein könnten....
#header {
width: 100%;
height: 220px;
background-color: black;
}
.logo {
margin-top: 150px;
margin-right: 20px;
float: left;
}
#navigation {
width: 1050px;
max-width: 100%;
height: 220px;
max-height: 220px;
margin: 0 auto;
display: flex;
}
.navigationstext {
font-family: 'Baloo', cursive;
color: aqua;
font-size: 36px;
line-height: 30px;
float: left;
margin-top: 183px;
margin-left: 15px;
}