• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Frage CSS Responsiv

D

davedave

Neues Mitglied
Hallo zusammen.

Ich habe ein kleines Problem. Ich bin dabei eine website für den Schulunterricht zu erstellen und diese ist soweit auch fertig aber sie ist noch nicht responsiv. Ich habe mein bestes gegeben überall nachzuschauen und es auch selber ausprobiert aber entweder ist es der Footer der nicht funktioniert, die Bilder verändern die Größe nicht oder anderes. Wenn jemand mir da helfen könnte wäre ich echt sehr froh.^^

Meine CSS Seite und HTML Seiten passen hier nicht rein
 
davedave schrieb:
Hier die Seiten und wie gesagt ich habe auf sämtlichen Seiten nachgeschaut aber ich kriege es irgendwie nicht hin
Zum Vergrößern anklicken....
Dein Layoutprinzip ist schon grundsätzlich falsch: vergiss float und verwende grid (oder flex) für das Layout. Lies dir mal die Seite Webseiten responsive umbauen bei Selfhtml durch, dort wird dein Problem behandelt. Genaueres lässt sich jetzt nicht wirklich sagen da nicht so wirklich klar ist wie die Seite aussehen soll - und zudem ist ein Forum kein Hausaufgabenlieferservice.
Aber noch ein paar Hinweise:
  • keine Pixel als Einheit verwenden (da gibt es auf der genannten Seite auch ein Kapitel dazu)
  • du leidest unter akuter Divitis: wofür die x verschachtelten div? Da gibt es wesentlich passendere Elemente: die beiden obersten Div z.B. möchten gerne ein <nav> bzw. <main> sein und das letzte Div mit der ID footer möchte gerne ein <footer> sein - und der Großteil der restlichen div wird ersatzlos entsorgt
  • box-shadow können alle Browser auch so, die Varianten mit -moz- bzw. -webkit- am Anfang braucht es seit 2011(!) nicht mehr - gleiches gilt für transition; generell brauchst du die Präfixe nicht mehr
  • die border- und padding-Angaben bei den .content_*-Klassen sind sehr umständlich - warum nicht einfach je ein Wert wenn alle vier Werte ohnehin gleich sind?
  • du solltest Fonts nie von irgendwo her einbinden (auch nicht für eine Schulseite), lade die Fonts runter und binde sie lokal ein - sofern das erlaubt ist, wenn nicht, verwende eine andere Schrift bei der das erlaubt ist.
  • lass die Finger von marquee - das war vor 25 Jahren vielleicht mal cool, heute nervt es aber nur noch
 
Danke für die Tipps.

Es sollte hier kein Hausaufgabenservice sein. responsiv gehört nicht zu der Aufgabe und ich wollte ich es nur hinzufügen weil ich denke das es so schöner aussieht.

Bei mir klappt jetzt fast alles also die Bilder sind responsiv und die texte usw weiter auch. Nur eine Sache klappt noch nicht ganz undzwar zwischen den Bildern sind riesige Lücken die größer werde je kleiner der Bildschirm.

Gibt es dafür eine Lösung?
 
@media screen and (max-width: 1899px) {
.content_home, .content_movie, .content_merch, .content_contact,
.content_legal_notice, .content_data_privacy, .content_disclaimer {
margin-left: 21%;
margin-right: 21%;
}

.content_left, .content_right {
font-size: 18px;
gap: 20px;
}

.movie_pic, .merch_pic_1, .merch_pic_2 {
max-width: 100%;
height: auto;
}
}

@media screen and (max-width: 1600px) {
.content_home, .content_movie, .content_merch, .content_contact,
.content_legal_notice, .content_data_privacy, .content_disclaimer {
margin-left: 20%;
margin-right: 20%;
}

.content_left, .content_right {
font-size: 18px;
}

.movie_pic, .merch_pic_1, .merch_pic_2 {
max-width: 100%;
height: auto;
}
}

@media screen and (max-width: 1300px) {
.content_home, .content_movie, .content_merch, .content_contact,
.content_legal_notice, .content_data_privacy, .content_disclaimer {
margin-left: 19%;
margin-right: 19%;
}

.content_left, .content_right {
font-size: 18px;
}

.movie_pic, .merch_pic_1, .merch_pic_2 {
max-width: 100%;
height: auto;
}
}

@media screen and (max-width: 1000px) {
.content_home, .content_movie, .content_merch, .content_contact,
.content_legal_notice, .content_data_privacy, .content_disclaimer {
margin-left: 18%;
margin-right: 18%;
}

.content_left, .content_right {
font-size: 16px;
}

.movie_pic, .merch_pic_1, .merch_pic_2 {
max-width: 100%;
height: auto;
}
}

@media screen and (max-width: 774px) {
.content_home, .content_movie, .content_merch, .content_contact,
.content_legal_notice, .content_data_privacy, .content_disclaimer {
margin-left: 17%;
margin-right: 17%;
}

.content_left, .content_right {
font-size: 15px;
}

.movie_pic, .merch_pic_1, .merch_pic_2 {
max-width: 100%;
height: auto;
}
}
 
davedave schrieb:
Es sollte hier kein Hausaufgabenservice sein. responsiv gehört nicht zu der Aufgabe und ich wollte ich es nur hinzufügen weil ich denke das es so schöner aussieht.
Zum Vergrößern anklicken....
Ich weiß ja nicht wieviel euer Lehrer von dem Thema versteht, aber ich würde auf die Seite 0 Punkte geben … Dass eine Seite responsive ist gehört heutzutage dazu, ohne diese Eigenschaft bleibt nur sie nach /dev/null zu verschieben.
davedave schrieb:
Bei mir klappt jetzt fast alles also die Bilder sind responsiv und die texte usw weiter auch. Nur eine Sache klappt noch nicht ganz undzwar zwischen den Bildern sind riesige Lücken die größer werde je kleiner der Bildschirm.
Zum Vergrößern anklicken....
Welche Bilder? In dem von dir geposteten HTML sind keine Bilder drin, nur im CSS werden zwei Bilder eingebunden. Aber das Problem ist dass du versuchst irgendwie mit margin die Breite hinzupfuschen - das funktioniert eben nicht.
davedave schrieb:
@media screen and (max-width: 1899px) {
Zum Vergrößern anklicken....
*meep* schon falsch: Pixel haben an der Stelle exakt garnichts zu suchen. Lies die von mir verlinkten Seiten und bau die Seite richtig, sonst wird das nichts.
 
/* Body Style */
@import url('https://fonts.cdnfonts.com/css/joker');

body {
background: #010206;
}

h1, h2, h3, h5 {
text-align: center;
}

/* Top Navigation */
nav {
width: 100%;
margin: 0px;
padding: 0px;
background-color: #66378e;
border-bottom: 1px solid #22122f;
margin-top: -52px;
margin-left: -8px;
position: fixed;
box-shadow: 0px 6px 13px 3px rgba(0,0,0,0.75);
z-index: 9999;
}

nav ul {
list-style: none;
max-width: 415px;
margin: auto;
}

nav li {
float: left;
}

nav li a {
display: block;
padding: 15px;
text-decoration: none;
font-family: 'Joker', sans-serif;
color: #ffffff;
font-size: 18px;
border-right: 1px solid #22122f;
transition: all 0.5s ease-out;
}

nav li:first-child a {
border-left: 1px solid #22122f;
}

nav li a:hover {
color: #1ddd33;
background-color: #7741a6;
transition: all 0.5s ease-out;
text-shadow: 1px 1px 2px black;
}

/* Header */
.head_bg {
background-image: url("../images/bg_001.jpg");
background-repeat: no-repeat;
background-size: contain;
max-width: 100%;
width: 100%;
height: 550px;
margin-top: 38px;
}

/* Navbar Logo */
.joker_logo {
background-image: url("../images/joker_logo.png");
background-repeat: no-repeat;
height: 100%;
width: 100%;
position: fixed;
z-index: 9999;
margin-top: 6px;
margin-left: 4px;
}

/* Main Content */
main {
width: 100%;
margin-top: 51px;
}

/* Content Frames */
.content_frame {
padding-bottom: 100px;
margin-top: -30px;
}

.content_sub_frame {
max-width: 100%;
}

/* Contents */
.content_home {
border: 4px solid #22122f;
margin-left: 21%;
margin-right: 21%;
color: white;
box-shadow: 0px 6px 13px 3px rgba(25,150,25,0.5);
padding: 15px;
background-color: #010206;
height: 100%;
}

.content_movie {
border: 4px solid #22122f;
margin-left: 21%;
margin-right: 21%;
color: white;
box-shadow: 0px 6px 13px 3px rgba(25,150,25,0.5);
padding: 15px;
background-color: #010206;
height: 100%;
}

.content_merch {
border: 4px solid #22122f;
margin-left: 21%;
margin-right: 21%;
color: white;
box-shadow: 0px 6px 13px 3px rgba(25,150,25,0.5);
padding: 15px;
background-color: #010206;
height: 100%;
}

.content_contact {
border: 4px solid #22122f;
margin-left: 21%;
margin-right: 21%;
color: white;
box-shadow: 0px 6px 13px 3px rgba(25,150,25,0.5);
padding: 15px;
background-color: #010206;
height: 100%;
}

.content_legal_notice {
border: 4px solid #22122f;
margin-left: 21%;
margin-right: 21%;
color: white;
box-shadow: 0px 6px 13px 3px rgba(25,150,25,0.5);
padding: 15px;
background-color: #010206;
height: 100%;
}

.content_data_privacy {
border: 4px solid #22122f;;
margin-left: 21%;
margin-right: 21%;
color: white;
box-shadow: 0px 6px 13px 3px rgba(25,150,25,0.5);
padding: 15px;
background-color: #010206;
height: 100%;
}

.content_disclaimer {
border: 4px solid #22122f;
margin-left: 21%;
margin-right: 21%;
color: white;
box-shadow: 0px 6px 13px 3px rgba(25,150,25,0.5);
padding: 15px;
background-color: #010206;
height: 100%;
}

/* Content Header Frames */
.content_header_frame_home, .content_header_frame_movie {
padding-bottom: 15px;
}

.content_header_frame_merch {
padding-bottom: 35px;
}

.content_header_frame_contact, .content_header_frame_legal_notice, .content_header_frame_data_privacy, .content_header_frame_disclaimer {
padding-bottom: 25px;
}

/* Content Headers */
.content_header_home {
background-image: url("../images/content_header_01.jpg");
background-repeat: no-repeat;
background-size: contain;
max-width: 100%;
width: 100%;
height: 120px;
}

.content_header_movie {
background-image: url("../images/content_header_02.jpg");
background-repeat: no-repeat;
background-size: contain;
max-width: 100%;
width: 100%;
height: 120px;
}

.content_header_merch {
background-image: url("../images/content_header_03.jpg");
background-repeat: no-repeat;
background-size: contain;
max-width: 100%;
width: 100%;
height: 120px;
}

.content_header_contact {
background-image: url("../images/content_header_04.jpg");
background-repeat: no-repeat;
background-size: contain;
max-width: 100%;
width: 100%;
height: 120px;
}

.content_header_legal_notice {
background-image: url("../images/content_header_05.jpg");
background-repeat: no-repeat;
background-size: contain;
max-width: 100%;
width: 100%;
height: 120px;
}

.content_header_data_privacy {
background-image: url("../images/content_header_06.jpg");
background-repeat: no-repeat;
background-size: contain;
max-width: 100%;
width: 100%;
height: 120px;
}

.content_header_disclaimer {
background-image: url("../images/content_header_07.jpg");
background-repeat: no-repeat;
background-size: contain;
max-width: 100%;
width: 100%;
height: 120px;
}

/* Content Parts */
.content_left {
width: 70%;
float: left;
text-align: center;
}

.content_left_header_frame, .content_right_header_frame {
padding-bottom: 15px;
}

.content_left_header {
background-image: url("../images/content_left_header.jpg");
background-repeat: no-repeat;
background-size: contain;
max-width: 100%;
width: 100%;
height: 250px;
}

.content_left_pic_frame, .content_right_pic_frame {
padding-top: 15px;
padding-bottom: 15px;
}

.content_left_pic {
background-image: url("../images/content_left_header.jpg");
background-repeat: no-repeat;
background-size: contain;
max-width: 100%;
width: 100%;
height: 250px;
}

.content_right {
width: 30%;
margin-left: 70%;
text-align: center;
height: 100%;
}

.content_right_header {
background-image: url("../images/content_right_header.jpg");
background-repeat: no-repeat;
background-size: contain;
max-width: 100%;
width: 100%;
height: 60px;
}

.content_right_pic {
background-image: url("../images/content_right_header.jpg");
background-repeat: no-repeat;
background-size: contain;
max-width: 100%;
width: 100%;
height: 60px;
}

/* Movie Site */
.movie_pic_frame {
display: flex;
justify-content: center;
text-align: center;
align-items: center;
padding-bottom: 80px;
}

.movie_pic {
max-width: 650px;
height: 365px;
}

.movie_content {
padding-bottom: 40px;
}

.moviepilot {
max-width: 250px;
height: 50px;
}

.ref_links a:visited {
color: #fff;
}

/* Merchandise */
.merch_pic_frame_1 {
display: flex;
justify-content: center;
text-align: center;
align-items: center;
padding-bottom: 80px;
}

.merch_pic_frame_2 {
display: flex;
justify-content: center;
text-align: center;
align-items: center;
}

.merch_pic_frame_1, .merch_pic_frame_2 a:visited {
color: #fff;
}

.merch_pic_1, .merch_pic_3 {
max-width: 450px;
height: 562px;
float: left;
padding-right: 15px;
}

.merch_pic_2, .merch_pic_4 {
max-width: 450px;
height: 562px;
float: left;
}

/* Source Links */
.source_links a:visited {
color: #fff;
}

/* Footer */
footer {
color: #fff;
width: 100%;
height: 200px;
margin-left: auto;
margin-right: auto;
margin-top: -4px;
text-align: center;
background-color: #66378e;
}

footer a:link, a:visited {
text-decoration: none;
color: #fff;
}

footer a:hover {
color: #1ddd33;
text-shadow: 1px 1px 2px black;
}

.footer_box {
max-width: 950px;
margin-left: auto;
margin-right: auto;
padding-top: 60px;
}
 
Das ist der Rest der CSS dort sind mehr bilder eingebunden.

Und wie sollen sonst media queries geschrieben werden? Online steht das mit px

ein weiteres Problem was ich gerade gesehen habe ist das oben in der Navbar nur ganz oben ein ganz kleiner Bereich anklickbar ist. Woran liegt das?
 
davedave schrieb:
Das ist der Rest der CSS dort sind mehr bilder eingebunden.
Zum Vergrößern anklicken....
Ohne die Seite mit Bildern selbst zu sehen lässt sich da nur raten was wenig sinnvoll/zielführend ist.
davedave schrieb:
Und wie sollen sonst media queries geschrieben werden? Online steht das mit px
Zum Vergrößern anklicken....
Ich weiß nicht was du mit "online" meinst - ich würde aber mal auf w3fools tippen … Die Seite taugt nichts, lies die von mir verlinkte Seite bei Selfhtml doch endlich mal!
davedave schrieb:
ein weiteres Problem was ich gerade gesehen habe ist das oben in der Navbar nur ganz oben ein ganz kleiner Bereich anklickbar ist. Woran liegt das?
Zum Vergrößern anklicken....
Daran dass <bofh>die Platte falsch gepolt angeschlossen wurde und jetzt falsch herum dreht</bofh>. Im Ernst: du kennst die Seite, wenn du sie nicht verraten willst, muss du das schon selbst herausbekommen, wir können das leider nicht, die blöden Glaskugeln sind halt ständig in der Reinigung.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben