DIV-CONTAINER an Bildschirmgröße anpassen?

Liebe Commuity, Ich bin sehr neu in sachen HTML und CSS. Wir haben ein Projekt von der Schule aus, eine Website erstellen. Nun habe ich einen Div-Container mit einem Hintergrund gemacht (Auf den Hintergrund kommt ein Text). Jedoch wenn ich es auf meinem großen Bildschirm anordne und dann auf meinen Laptop gehe, ist klarerweise alles verschoben. Wie kann ich dies verhindern? :)

LG Flagga005

4 Antworten

fluffiknuffi

12.04.2016, 11:27

Eventuell mit media queries. Damit kannst du CSS-Angaben je nach Fensterbreite und -höhe laden.

div { color: red }
@media (max-width: 500px) {
   div { color: blue }
}

Dieser CSS-Code setzt die Schriftfarbe für alle divs zunächst auf rot. Ist das Fenster schmaler als 1000 Pixel, wird die Schriftfarbe zu blau.

Demo: https://jsfiddle.net/90sets1p/

Das geht auch für Höhe (max-height) und es gibt natürlich auch min-width / min-height. Mehr:

https://developer.mozilla.org/de/docs/Web/CSS/Media_Queries/Using_media_queries

Jegor

11.04.2016, 22:17

Nutzt du Pixel oder Prozentangaben ?

Nutzt du Pixelngaben wird es immer solche Schwierigkeiten geben daher sollte man Prozentangaben nutzen.

perhp

Nutzer, der sehr aktiv auf gutefrage ist

im Thema HTML

12.04.2016, 22:12

Das liegt daran, dass du keine feste Breite hast (dort muss man mit Prozent arbeiten und nicht mit Pixel). Setz auf deinen Container 100% width, dann funktioniert es.

triopasi

Nutzer, der sehr aktiv auf gutefrage ist

im Thema HTML

11.04.2016, 22:15

Den Hintergrund nicht hinter's div setzen, wäre das ne Idee? Oder einfach height und width auf 100% setzen.

fluffiknuffi

12.04.2016, 11:22

height eher auf 100vh

perhp

12.04.2016, 22:11

@fluffiknuffi

Wieso 100vh, wenn die Breite bei ihm verschoben ist. Viewportheight beeinflusst die Höhe und nicht die Breite.

Ähnliche Beiträge

html/css text dynamisch anpassen?

hallo,
Weis jemand wie man Texte dynamisch der Bildschirmgröße anpassen kann? So wie bei div-containern oder Grafiken.

...zum Beitrag

HTML CSS - DIV Container wie iframe nutzen

Ich hab mal eine Frage, gibt es in CSS und HTML eine Möglichkeit einen DIV Container wie einen iFrame zu nutzen und in diesen Container Content von einer anderen Webseite hineinzuladen?

...zum Beitrag

CSS div container neben img in der selben Zeile?

Ich wollte ein Bild neben einem Div-container in der obersten Zeile platzieren, habe jedoch keinen Weg gefunden, kann mir jmd helfen? Danke! :^)

...zum Beitrag

Html div anordnen?

Hallo, ich habe mehrere Container, welche nebeneinander, bzw. untereinander platziert

werden sollten. Das problem liegt darin, dass wenn ein Container zu groß ist werden bei den kleineren Container platz gelassen. Wie kann man das vermeiden?

...zum Beitrag

Webdesign: Diagonale Linien oder DIV-Container mit diagonalen Kanten mit CSS?

Hallo Leute!

Was wäre eigentlich die eleganteste Lösung per CSS diagonal verlaufende Linien zu zeichnen oder Container mit diagonal verlaufenden Kanten zu erstellen?

Oder müsste ich mir das alles mit extra-DIV-Containern, margins und degrees so zusammenbasteln, bis es passt?

Danke schon mal.

...zum Beitrag

Größe des Eltern div-Container an die Größe der Kinder div-Container anpassen?

Hey Leute. Ich bin gerade dabei eine Seite zu erstellen und gleichzeitig CSS zu lernen.

Jetzt bin ich dabei eine Seite zu designen, die Einzelheiten eines Benutzers zeigen soll. Nur bekomme ich das mit den div-Containern einfach nicht hin.

Meinem Verständnis nach ist das so, dass wenn ich einen Container habe, in dem zwei weitere Container sind die nebeneinander angeordnet sind und ich dann beiden die Höhe 100% gebe, dann müssten beide doch die maximale Höhe des Eltern Containers annehmen, oder verstehe ich da was falsch? Weil ich bekomme das einfach nicht auf die Reihe. Ich hab mal ein Bild angehängt in dem der Eltern Container (grau) der erste Kind Container (grün) und der zweite Kind Container (gelb) eingefärbt sind. Und da sieht man gut dass der Kind Container einfach über dem Eltern Container hinausschießt..

Ich hänge nochmal den Code aus dem HTML und dem CSS an. Vielleicht habe ich ja auch einen Denkfehler oder kenne mich einfach nur noch nicht genug in CSS aus und jemand kann mir helfen :)

Hier die Container: (Ich hoffe der Code wird richtig eingefügt. Irgendwie ändert sich hier im gutefrage Editor nichts)

<div class="benutzerprofil">
<div class="anschrift">
    <div class="uberschrift">
        <a class="uberschrift">Anschrift</a>
    </div>
    <div class="inhalt">
        <a class="anschrift">
        <?= $user->vorname . " " . $user->nachname ?><br>
        <?= $user->strasse . ", " . $user->hausnummer ?><br>
        <?= $user->postleitzahl . " " . $user->wohnort ?><br>
        <?= $user->bundesland ?>
        </a>
    </div>
</div>

<div class="erreichbar">
    <div class="uberschrift">
        Partner erreichbar unter
    </div>
    <div class="inhalt">
        <span class="erreichbar">
        E-Mail Adresse: <a href="mailto:<?= $user->email ?>"><?= $user->email ?></a><br>
        Handynummer: <?= (($user->handynummer==null)?"Nicht angegeben":$user->handynummer) ?><br>
        Telefonnummer: <?= (($user->telefonnummer==null)?"Nicht angegeben":$user->telefonnummer) ?>
        </span>
    </div>  
</div>
</div>

Und hier der CSS Code dafür:

div.anschrift {
    height: 25%;
    background-color: gray;
}

div.anschrift > div.uberschrift {}
    float: left;
    background-color: green;
    height: 100%;
}

div.anschrift > div.inhalt {
    height: 100%;
    background-color: yellow;
}

...zum Beitrag

DropDown-Kästchen bei CSS nach Bildschirm anpassen?

Schönen guten Abend,

ich würde gerne mein DropDown-Menü so ändern, dass er auf die Bildschirmgröße angepasst ist. Kann mir da wer einer helfen?.

Mein bisheriger code für die Boxen des Menüs:

...zum Beitrag

CSS Klassen hinzufügen?

Hallo,

wie kann ich durch den Klick auf einen Knopf eine Klasse einem div Container hinzufügen?

...zum Beitrag

CSS float left und right?

Ich habe drei Div-Container welche nebeneinander sein sollen. wie mache ich das? gibt ja float right und float left aber kein float center oder so ähnlich.

...zum Beitrag

Wie kann man ein festes Bild über einem div oder header in css anzeigen lassen ohne, dass es sich in diesem Container befindet?

Hallo,

ich bin aktuell dabei meine eigene kleine Website mit HTML und CSS zu gestalten und bin auf ein Problem gestoßen. Ich möchte mein Logo über einem Header oder Div anzeigen wie es unten auf dem Bild auch gezeigt ist. Ich habe versucht das Bild in den Container zu verschieben und dann versucht es mit den Display Typen flex und grid zu positionieren. Leider wird entweder das Bild an eine falsche stelle verschoben oder meine Links werden falsch positioniert (Siehe Bild 2). Hat jemand eventuell eine Lösung wie ich das mache ohne das Bild in den Container zu verschieben oder das Bild obwohl es in dem Container ist statisch zu positionieren, ohne dass es von den Positionen der Links beeinflusst wird.

...zum Beitrag

Wie kann ich das Rutschen des DIV-Containers verhindern?

Hallo, wie auf dem Foto (schlecht, rechts unten) zu erkennen möchte ich 3 DIV-Container nebeneinander platzieren.Dazu habe ich alle drei in ein großen Container gesteckt. Jedoch "rutscht" das rechte DIV immer nach unten ohne dass ich es möchte oder weiß wieso es das tut...Ich hoffe es kann mir hier geholfen werden!

CSS:

#body {
    background-color: aqua;
    width: 100%;
    height: 100%;
}


#mitte {
    height: inherit;
    max-width: 60%;
    background-color: aliceblue;
}


#links {
    width: 15%;
    height: inherit;
    float: left;
    background-color: brown;
}


#rechts {
    width: 15%;
    height: inherit;
    float: right;
    background-color: blueviolet;
}

Da HTML hier Probleme mit den < und > hat, davon ein Bild im Anhang...

Danke im voraus, Thomas

...zum Beitrag

Html / Css Text auf Header bzw. Div-Container Text über Hintergrund?

CSS formatiert die Schrift so, dass immer der ganze Querbalken über dem Hintergrund nicht transparent ist. Wie mache ich das? ** Siehe Grafiken **

h1 { font-family: arial, verdana, helvetica; font-size: 40px; font-weight: 200; }

header { position: relative; height: 200px; display: block; background-color: black;

} nav { width: 500px; height: 200px; background-color: aqua; }

...zum Beitrag

Abstand zwischen zwei Div-Containern verhindern HTML?

Ich habe zwei Div-Container mit display: inline-block; padding: 0; margin: 0; aber es befindet sich trotzdem ein Abstand zwischen ihnen. Woran liegt das?

hoffe auf Hilfe,

Bohne47

...zum Beitrag

CSS hover Effekte sollen nach aktivien bleiben?

Ich habe z.B. einen div-Container und mache einen hover-Effekt, dass er breiter wird. Jetzt will ich, dass dies so bleibt, bis man die Seite halt neu lädt. Geht das nur mir CSS oder braucht man JS? Danke im Voraus :)

...zum Beitrag

Was möchtest Du wissen?

Deinen Beitrag erstellen