Ergebnis 1 bis 5 von 5

Thema: div Container bleiben bei kleinerem Browserfenster nicht nebeneinander

  1. #1
    HTML Newbie
    Registriert seit
    09.04.2016
    Beiträge
    3
    Danke
    1
    Bekam 0 mal "Danke" in 0 Postings

    Standard div Container bleiben bei kleinerem Browserfenster nicht nebeneinander

    Hallo,
    ich habe ein Problem mit einer Webseite. Ich habe die div Container erstellt und auch die prozentuale Größe angegeben.
    Trotzdem rutschen die Container untereinander, wenn ich den Bildschirm verkleinere z.B auf dem Netbook.
    Auch das Logo ganz oben wird rechts abgeschnitten.
    Würde mich freuen, wenn jemand die Lösung weiss.

    Hier der Quellcode:

    <!DOCTYPE html>
    <html lang="de">

    <head>
    <title>Gaming PC Intel Core i7-6700K-overclocked 4x4,4 GHz, Wasserkühlung, Nvidia GeForce GTX 980 und optisches Tuning</title>
    <style type="text/css">

    * {
    margin: 0px;
    padding: 0px;
    border: none;
    }

    html {
    background-image: url(http://tatura.biz/img/bg.jpg);
    color: #000;
    font-family: Verdana, Helvetica, Arial, sans-serif;
    }

    #kopfbereich {
    background: rgb(0,0,0) url(http://tatura.biz/img/auralogo.png) no-repeat top left;
    height: 270px; /* 270px + 10px (padding) gibt die 280px des Bildes */
    padding: 0px 15px 0px 0px;
    font-weight: normal;
    border-top: 5px solid #3f4346;
    border-right: 5px solid #3f4346;
    border-bottom: 0px;
    border-left: 5px solid #3f4346;

    }

    #title {
    background-color: white;
    border-bottom: 5px solid #3f4346;
    border-right: 5px solid #3f4346;
    border-top: 0px;
    border-left: 5px solid #3f4346;
    border-radius: 0px 0px 10px 10px;
    }

    p {
    padding: 10px;
    margin: 15px 0px 0px 25px;
    line-height: 1.5;
    color: #000;
    font-size: 1.2em;
    }

    h1 {
    padding: 30px;
    margin: 5px 0px 0px 5px;
    color: #3f4346;
    }

    h2 {
    padding: 30px;
    margin: 5px 0px 0px 5px;
    color: #3f4346;
    }



    #inhalt {
    float: left;
    background: transparent;
    width: 70%;
    margin: 0px 0px 2em 2em;
    }

    #service {
    float: right;
    background: transparent;
    width: 25%;
    margin: 2em 2em 0px 0px;
    }

    #teile {
    background-color:#858d93;
    margin-top: 0px;
    margin-right: 40px;
    margin-left: 80px;
    border-radius: 0px 10px 0px 0px;
    }

    #teile-unten {
    background-color:white;
    margin-right: 40px;
    margin-left: 80px;
    border: 2px solid #858d93;
    border-radius: 0px 0px 10px 10px;
    }

    #img {
    position:absolute;
    width: 80px;
    height: auto;
    background-color:#858d93;
    margin-top: 15px;
    margin-left: 0px;
    border-radius: 10px 0px 0px 10px;
    }

    img {
    max-width:100%;
    height: auto;
    }

    #service-oben {
    float: right;
    width: 100%;
    background-color: #858d93;
    margin-top: 20px;
    margin-right: 10px;
    border: 2px solid #858d93;
    border-radius: 10px 10px 0px 0px;
    }

    #service-unten {
    float: right;
    width: 100%;
    background-color: white;
    margin-top: 0px;
    margin-right: 10px;
    border: 2px solid #858d93;
    border-radius: 0px 0px 10px 10px;
    }

    </style>
    </head>
    <body>

    <div id="kopfbereich">



    </div>

    <div id="title">
    <h1>Gaming PC &#x2713 Intel Core i7-6700K-overclocked 4x4,4 GHz, <br>
    &#x2713 Wasserkühlung &#x2713 Nvidia GeForce GTX 980 &#x2713 optisches Tuning</h1>
    <h2>Wir verbauen ausschließlich hochwertige Marken-Qualität für <u>alle</u> Komponenten!</h2>
    </div>

    <div id="service">
    <img src="http://tatura.biz/img/pc2.png" alt="">
    <div id="service-oben">
    <p>Unsere Leistungen</p>
    </div>

    <div id="service-unten">
    <p>&bull; nur Top Qualität<br>
    &bull; täglicher Versand<br>
    &bull; versicherter Versand<br>
    &bull; täglicher Emailsupport<br>
    &bull; Versand aus Deutschland </p>
    </div>

    <div id="service-oben">
    <p>Bezahlung</p>
    </div>
    <div id="service-unten">
    <p><img src="http://tatura.biz/img/zahlung.jpg" alt=""></p>
    </div>

    <div id="service-oben">
    <p>Lieferung</p>
    </div>
    <div id="service-unten">
    <p><img src="http://tatura.biz/img/lieferung.jpg" alt=""></p>
    </div>

    <div id="service-oben">
    <p>Impressum</p>
    </div>
    <div id="service-unten">
    <p>auragaming<br>
    P. Tatura<br>
    Helmholtzstr. 22 <br>
    12459 Berlin <br>
    Tel: 0176 9676 1215 </p>
    </div>
    <p>&nbsp;</p>
    </div>

    <div id="inhalt">
    <p>&nbsp;</p>
    <div id="img">
    <a href="http://tatura.biz/img/i7.png" ><img src="http://tatura.biz/img/i7.png" alt="Intel I7"></a>
    </div>

    <div id="teile">
    <p>Intel Core i7-6700K, overclocked</p>
    </div>

    <div id="teile-unten">
    <p>&#x2713 neueste Intel "Skylake" Generation<br>

    &#x2713 freier Multiplikator (optimal für OC) <br>
    &#x2713 massiver Leistungsboost durch Übertaktung auf mind. 4,4GHz<br>
    &#x2713 4 Kerne + SMT (Hyper-Threading: virtuelle Kernverdopplung)<br>
    &#x2713 8 Megabyte L3-Cache <br>
    &#x2713 Dual-Channel-Interface <br>
    &#x2713 Unterstützung für DDR4-2.133<br>
    &#x2713 Turbo Boost 2.0

    </p>
    </div>


    <div id="img">
    <a href="http://tatura.biz/img/zotac.png" ><img src="http://tatura.biz/img/zotac.png" alt=""></a>
    </div>
    <div id="teile">
    <p>Zotac GeForce GTX 980 AMP! Omega Core</p>
    </div>
    <div id="teile-unten">
    <p>&#x2713 werksübertaktete Nvidia Grafikkarte mit 3-Fan-Kühler<br>
    &#x2713 4 GB GDDR5, 1.216/1.317 MHz Base/Boost & 7 GHz RAM-Takt <br>
    &#x2713 überwältigende Gaming-Performance! <br>
    &#x2713 zaubert via DisplayPort 1.2 und HDMI 2.0 sogar 4K-(Surround-)Auflösungen ruckelfrei

    </p>
    </div>


    <div id="img">
    <a href="http://tatura.biz/img/asus.png"><img src="http://tatura.biz/img/asus.png" alt=""></a>
    </div>
    <div id="teile">
    <p>ASUS Z170-A</p>
    </div>
    <div id="teile-unten">
    <p>&#x2713 High-End Z170 Chipsatz<br>
    &#x2713 weitere Oberklasse-Features: BIOS-Flashbackport, <br>&nbsp;&nbsp;&nbsp;TPU-Switch, EZ XMP-Switch, MemOK!-Knopf<br>
    </p>
    </div>


    <div id="img">
    <a href="http://tatura.biz/img/superflower.png"><img src="http://tatura.biz/img/superflower.png" alt=""></a>
    </div>
    <div id="teile">
    <p>Super Flower Golden Green HX 550W</p>
    </div>
    <div id="teile-unten">
    <p>&#x2713 80+ Gold Zertifizierung d.h. bei hoher Last maximale Effizienz (92,82%)<br>
    &#x2713 Starke 45,5 Ampere 12V-Singlerail<br>
    &#x2713 Extrem leiser 120mm Lüfter<br>
    &#x2713 Überspannungs- und Kurzschlussschutz


    </p>
    </div>

    <div id="img">
    <a href="http://tatura.biz/img/ram.png"><img src="http://tatura.biz/img/ram.png" alt=""></a>
    </div>
    <div id="teile">
    <p>TeamGroup Dark weiß DIMM Kit 16GB, DDR4-3000</p>
    </div>
    <div id="teile-unten">
    <p>&#x2713 hochwertiger Overclocking-Arbeitsspeicher aus der Dark-Serie<br>
    &#x2713 auffällig geformte Wärmeverteilerplatten aus weiß eloxiertem Aluminium<br>
    &#x2713 besonders viel Kühlreserve beim Overclocking <br>
    &#x2713 optisch und technisch für höchste Ansprüche! <br>
    &#x2713 lebenslange Herstellergarantie!


    </p>
    </div>

    <div id="img">
    <a href="http://tatura.biz/img/kuehlung.png"><img src="http://tatura.biz/img/kuehlung.png" alt=""></a>
    </div>
    <div id="teile">
    <p>Arctic Liquid Freezer 240</p>
    </div>
    <div id="teile-unten">
    <p>&#x2713 leistungsstarkes All-in-One Wasserkühlungssystem<br>
    &#x2713 mit 240er-Radiator und vier geräuscharmen 120-mm-Lüfter<br>
    &#x2713 wartungsfrei und leistungsstark!

    </p>
    </div>

    <div id="img">
    <a href="http://tatura.biz/img/corsair.png"><img src="http://tatura.biz/img/corsair.png" alt=""></a>
    </div>
    <div id="teile">
    <p>Corsair Carbide Series Air 540</p>
    </div>
    <div id="teile-unten">
    <p>&#x2713 einzigartiger, eleganter Cube von Corsair in weiß und schwarz mit großem Sichtfenster<br>
    &#x2713 optimaler Airflow durch die Dual-Chamber-Technik <br>
    &#x2713 Maße: 332 x 458 x 415 mm (B x H x T)

    </p>
    </div>

    <div id="img">
    <a href="http://tatura.biz/img/samsung.png"><img src="http://tatura.biz/img/samsung.png" alt=""></a>
    </div>
    <div id="teile">
    <p>Samsung SSD 850 Evo 250GB</p>
    </div>
    <div id="teile-unten">
    <p>&#x2713 guter Preis, höchstmögliche Systemstabilität, Zuverlässigkeit<br>
    &#x2713 maximale Schreib-, Lese- und Zugriffsleistung <br>
    &#x2713 hohe Qualität - 5 Jahre Garantie ! <br>
    &#x2713 Magician-Software, ein ausgezeichnetes Wartungs- und Clone-Tool incl.

    </p>
    </div>

    <div id="img">
    <a href="http://tatura.biz/img/western.png"><img src="http://tatura.biz/img/western.png" alt=""></a>
    </div>
    <div id="teile">
    <p>Western Digital WD Blue 1TB, 64MB Cache, SATA 6Gb/s</p>
    </div>
    <div id="teile-unten">
    <p>&#x2713 guter Preis, höchstmögliche Systemstabilität, Zuverlässigkeit<br>
    &#x2713 64MB Cache-Speicher <br>
    &#x2713 schnelle SATA 6G-Schnittstelle


    </p>
    </div>

    <div id="img">
    <a href="http://tatura.biz/img/modding.jpg"><img src="http://tatura.biz/img/modding.jpg" alt=""></a>
    </div>
    <div id="teile">
    <p>Optisches Tuning</p>
    </div>
    <div id="teile-unten">
    <p>&#x2713 Lamptron FlexLight 24cm, 24 LED blau<br>
    &#x2713 Nanoxia Rigid LED 30cm 27 LED weiss <br>
    &#x2713 Kabel BitFenix Alchemy sleeved weiß/schwarz + Kabelkämme


    </p>
    </div>

    <div id="img">
    <a href="http://tatura.biz/img/windows10.jpg"><img src="http://tatura.biz/img/windows10.jpg" alt=""></a>
    </div>
    <div id="teile">
    <p>Software</p>
    </div>
    <div id="teile-unten">
    <p>&#x2713 Windows 10 vorinstalliert, auf Wunsch (Aufpreis + 25 Euro) erhalten Sie eine Lizenz (ohne CD-Rom)<br>
    &#x2713 alle Treiber - Mainboard/Grafikkarte sind installiert und werden auf CD-Rom mitgeliefert<br>


    </p>
    </div>

    <div id="img">
    <a href="http://tatura.biz/img/asus-anschluss.png"><img src="http://tatura.biz/img/asus-anschluss.png" alt=""></a>
    </div>
    <div id="teile">
    <p>Kabel, Anschlüsse, Sonstiges</p>
    </div>
    <div id="teile-unten">
    <p>&#x2713 Gerätekabel für PC<br>
    &#x2713 Front: &bull; 2x USB 3.0 &bull; Startbutton &bull; Resetbutton 2x &bull; 3,5mm Audio-Klinken (Mikrofon+Kopfhörer) <br>
    &#x2713 Rückseite: &bull; 2x USB 2.0 &bull; 2x USB 3.0 &bull; 1x USB 3.1 Typ-A &bull; 1x USB 3.1 Typ-C <br>
    &bull; 1x DVI-I &bull; 1x VGA &bull; 1x DisplayPort &bull; 1x HDMI 1.2
    &bull; 1x PS/2 &bull; 1x SPDIF &bull; 5x 3,5mm Realtek Surround <br>
    &#x2713 Intel I219-V Gigabit-LAN<br>
    &#x2713 8-Channel Realtek ALC 892 Audio Codec + ASUS Crystal Sound 3<br>


    </p>
    </div>

    <p>&nbsp;</p>
    </div>



    </body>
    </html>
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    Großmeister(in)
    Registriert seit
    04.08.2009
    Beiträge
    574
    Danke
    0
    Bekam 67 mal "Danke" in 65 Postings

    Standard AW: div Container bleiben bei kleinerem Browserfenster nicht nebeneinander

    Hallo

    und auch die prozentuale Größe angegeben.
    Nein. Zur Größe gehören auch die Außenabstände (margin). Und die hast du in em angegeben.

    Trotzdem rutschen die Container untereinander, wenn ich den Bildschirm verkleinere z.B auf dem Netbook.
    In dem Quelltext floaten 2 Container nebeneinander: div#service und div#inhalt

    div#service hat eine Breite von 25% + 2em

    div#inhalt hat eine Breite von 70% + 2em

    Für 4em stehen also 5% der Breite zur Verfügung. Folge: Wenn die 4em breiter als 5% werden passen die beiden Container nicht mehr nebeneinander und rutschen untereinander.

    Kurze Berechnung:

    Wenn 5% = 4em dann 95% = 76em

    4em + 76em = 80em

    Sobald der Platz für die beiden Container auf unter 80em (=etwa 1280px) sinkt passen sie nicht mehr nebeneinander.

    Mögliche Abhilfen:

    a) Du gibst wirklich alle Breiten in % an, also auch margin (und je nach Boxmodell auch padding und border)

    b) Du verwendest die Berechnungsmöglichkeit calc

    c) In Hinblick auf die Zukunft am sinnvollsten: Du verwendest statt float das Flexbox-Modell

    Auch das Logo ganz oben wird rechts abgeschnitten.
    Das ist das normale Verhalten von Hintergrundbildern. Sie skalieren nicht mit.

    Abhilfe schafft die CSS-Anweisung: background-size, in deinem Fall wohl mit dem Wert "contain".

    Siehe zum Beispiel

    https://wiki.selfhtml.org/wiki/CSS/E...ackground-size

    Falls noch mehr Probleme auftauchen solltest du zunächst die Fehler im Quellcode beseitigen. So fehlen einige wichtige Angaben wie die charset-Angabe oder id sind unzulässigerweise mehrfach vergeben.

    Gruss

    MrMurphy
    Geändert von MrMurphy (09.04.2016 um 15:29 Uhr)

  3. #3
    HTML Newbie
    Themenstarter

    Registriert seit
    09.04.2016
    Beiträge
    3
    Danke
    1
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: div Container bleiben bei kleinerem Browserfenster nicht nebeneinander

    MrMurphy, erstmal vielen Dank für Deine schnelle Antwort!!! Du hast natürlich recht, ich habe jetzt die margin-Werte auch in Prozent angegeben und den Prozentwert für die div-Container angepasst.
    Der Tip für die Grafik hat auch wunderbar geklappt.

    Habe jetzt auch charset definiert und aus den id ---> class gemacht. Ja, so geht es Anfängern, die Definition mit class hatte ich total vergessen....

    Habe die Seite mal hier getestet: https://www.tu-chemnitz.de/urz/www/html-test.html
    und bekomme jetzt nur noch wegen der Häkchen "✓" eine Fehlermeldung. Welchen Code muss ich dafür benutzen, wenn "&#x2713" falsch ist?

    Und noch eine letzte Frage, was müsste ich im style ändern, damit die div Container von der rechten Seite ganz nach unten rutschen, wenn mann die Seite z.B. auf dem Netbook oder Handy anschaut?

    Hier nochmal der korrigierte Quellcode:

    <!DOCTYPE html>
    <html lang="de">

    <head>
    <meta charset="utf-8"/>
    <title>Gaming PC Intel Core i7-6700K-overclocked 4x4,4 GHz, Wasserk&uuml;hlung, Nvidia GeForce GTX 980 und optisches Tuning</title>
    <style type="text/css">

    * {
    margin: 0px;
    padding: 0px;
    border: none;
    }

    html {
    background-image: url(http://tatura.biz/img/bg.jpg);
    color: #000;
    font-family: Verdana, Helvetica, Arial, sans-serif;
    }

    #kopfbereich {
    background: rgb(0,0,0) url(http://tatura.biz/img/auralogo.png) no-repeat top left;
    background-size: contain;
    height: 270px; /* 270px + 10px (padding) gibt die 280px des Bildes */
    padding: 0px 15px 0px 0px;
    font-weight: normal;
    border-top: 5px solid #3f4346;
    border-right: 5px solid #3f4346;
    border-bottom: 0px;
    border-left: 5px solid #3f4346;

    }

    #title {
    background-color: white;
    border-bottom: 5px solid #3f4346;
    border-right: 5px solid #3f4346;
    border-top: 0px;
    border-left: 5px solid #3f4346;
    border-radius: 0px 0px 25px 25px;
    }

    p {
    padding: 10px;
    margin: 15px 0px 0px 25px;
    line-height: 1.5;
    color: #000;
    font-size: 1.2em;
    }

    h1 {
    padding: 30px;
    margin: 5px 0px 0px 5px;
    color: #3f4346;
    }

    h2 {
    padding: 30px;
    margin: 5px 0px 0px 5px;
    color: #3f4346;
    }



    #inhalt {
    float: left;
    background: transparent;
    width: 68%;
    margin: 0px 0px 1% 1%;
    }

    #service {
    float: right;
    background: transparent;
    width: 25%;
    margin: 1% 1% 0px 0px;
    }

    .teile {
    background-color:#858d93;
    margin-top: 0px;
    margin-right: 40px;
    margin-left: 80px;
    border-radius: 0px 10px 0px 0px;
    }

    .teile-unten {
    background-color:white;
    margin-right: 40px;
    margin-left: 80px;
    border: 2px solid #858d93;
    border-radius: 0px 0px 10px 10px;
    }

    .img {
    position:absolute;
    width: 80px;
    height: auto;
    background-color:#858d93;
    margin-top: 15px;
    margin-left: 0px;
    border-radius: 10px 0px 0px 10px;
    }

    img {
    max-width:100%;
    height: auto;
    }

    .service-oben {
    float: right;
    width: 100%;
    background-color: #858d93;
    margin-top: 20px;
    margin-right: 10px;
    border: 2px solid #858d93;
    border-radius: 10px 10px 0px 0px;
    }

    .service-unten {
    float: right;
    width: 100%;
    background-color: white;
    margin-top: 0px;
    margin-right: 10px;
    border: 2px solid #858d93;
    border-radius: 0px 0px 10px 10px;
    }

    </style>
    </head>
    <body>

    <div id="kopfbereich">



    </div>

    <div id="title">
    <h1>Gaming PC &#x2713 Intel Core i7-6700K-overclocked 4x4,4 GHz, <br>
    &#x2713 Wasserk&uuml;hlung &#x2713 Nvidia GeForce GTX 980 &#x2713 optisches Tuning</h1>
    <h2>Wir verbauen ausschliesslich hochwertige Marken-Qualit&auml;t f&uuml;r <u>alle</u> Komponenten!</h2>
    </div>

    <div id="service">
    <img src="http://tatura.biz/img/pc2.png" alt="">
    <div class="service-oben">
    <p>Unsere Leistungen</p>
    </div>

    <div class="service-unten">
    <p>&bull; nur Top Qualit&auml;t<br>
    &bull; t&auml;glicher Versand<br>
    &bull; versicherter Versand<br>
    &bull; t&auml;glicher Emailsupport<br>
    &bull; Versand aus Deutschland </p>
    </div>

    <div class="service-oben">
    <p>Bezahlung</p>
    </div>
    <div class="service-unten">
    <p><img src="http://tatura.biz/img/zahlung.jpg" alt=""></p>
    </div>

    <div class="service-oben">
    <p>Lieferung</p>
    </div>
    <div class="service-unten">
    <p><img src="http://tatura.biz/img/lieferung.jpg" alt=""></p>
    </div>

    <div class="service-oben">
    <p>Impressum</p>
    </div>
    <div class="service-unten">
    <p>auragaming<br>
    P. Tatura<br>
    Helmholtzstr. 22 <br>
    12459 Berlin <br>
    Tel: 0176 9676 1215 </p>
    </div>
    <p>&nbsp;</p>
    </div>

    <div id="inhalt">
    <p>&nbsp;</p>
    <div class="img">
    <a href="http://tatura.biz/img/i7.png" ><img src="http://tatura.biz/img/i7.png" alt="Intel I7"></a>
    </div>

    <div class="teile">
    <p>Intel Core i7-6700K, overclocked</p>
    </div>

    <div class="teile-unten">
    <p>&#x2713 neueste Intel "Skylake" Generation<br>

    &#x2713 freier Multiplikator (optimal f&uuml;r OC) <br>
    &#x2713 massiver Leistungsboost durch &uuml;bertaktung auf mind. 4,4GHz<br>
    &#x2713 4 Kerne + SMT (Hyper-Threading: virtuelle Kernverdopplung)<br>
    &#x2713 8 Megabyte L3-Cache <br>
    &#x2713 Dual-Channel-Interface <br>
    &#x2713 Unterst&uuml;tzung f&uuml;r DDR4-2.133<br>
    &#x2713 Turbo Boost 2.0

    </p>
    </div>


    <div class="img">
    <a href="http://tatura.biz/img/zotac.png" ><img src="http://tatura.biz/img/zotac.png" alt=""></a>
    </div>
    <div class="teile">
    <p>Zotac GeForce GTX 980 AMP! Omega Core</p>
    </div>
    <div class="teile-unten">
    <p>&#x2713 werks&uuml;bertaktete Nvidia Grafikkarte mit 3-Fan-K&uuml;hler<br>
    &#x2713 4 GB GDDR5, 1.216/1.317 MHz Base/Boost & 7 GHz RAM-Takt <br>
    &#x2713 &uuml;berw&auml;ltigende Gaming-Performance! <br>
    &#x2713 zaubert via DisplayPort 1.2 und HDMI 2.0 sogar 4K-(Surround-)Aufl&ouml;sungen ruckelfrei

    </p>
    </div>


    <div class="img">
    <a href="http://tatura.biz/img/asus.png"><img src="http://tatura.biz/img/asus.png" alt=""></a>
    </div>
    <div class="teile">
    <p>ASUS Z170-A</p>
    </div>
    <div class="teile-unten">
    <p>&#x2713 High-End Z170 Chipsatz<br>
    &#x2713 weitere Oberklasse-Features: BIOS-Flashbackport, <br>&nbsp;&nbsp;&nbsp;TPU-Switch, EZ XMP-Switch, MemOK!-Knopf<br>
    </p>
    </div>


    <div class="img">
    <a href="http://tatura.biz/img/superflower.png"><img src="http://tatura.biz/img/superflower.png" alt=""></a>
    </div>
    <div class="teile">
    <p>Super Flower Golden Green HX 550W</p>
    </div>
    <div class="teile-unten">
    <p>&#x2713 80+ Gold Zertifizierung d.h. bei hoher Last maximale Effizienz (92,82%)<br>
    &#x2713 Starke 45,5 Ampere 12V-Singlerail<br>
    &#x2713 Extrem leiser 120mm L&uuml;fter<br>
    &#x2713 &uuml;berspannungs- und Kurzschlussschutz


    </p>
    </div>

    <div class="img">
    <a href="http://tatura.biz/img/ram.png"><img src="http://tatura.biz/img/ram.png" alt=""></a>
    </div>
    <div class="teile">
    <p>TeamGroup Dark weiss DIMM Kit 16GB, DDR4-3000</p>
    </div>
    <div class="teile-unten">
    <p>&#x2713 hochwertiger Overclocking-Arbeitsspeicher aus der Dark-Serie<br>
    &#x2713 auff&auml;llig geformte W&auml;rmeverteilerplatten aus weiss eloxiertem Aluminium<br>
    &#x2713 besonders viel K&uuml;hlreserve beim Overclocking <br>
    &#x2713 optisch und technisch f&uuml;r h&ouml;chste Anspr&uuml;che! <br>
    &#x2713 lebenslange Herstellergarantie!


    </p>
    </div>

    <div class="img">
    <a href="http://tatura.biz/img/kuehlung.png"><img src="http://tatura.biz/img/kuehlung.png" alt=""></a>
    </div>
    <div class="teile">
    <p>Arctic Liquid Freezer 240</p>
    </div>
    <div class="teile-unten">
    <p>&#x2713 leistungsstarkes All-in-One Wasserk&uuml;hlungssystem<br>
    &#x2713 mit 240er-Radiator und vier ger&auml;uscharmen 120-mm-L&uuml;fter<br>
    &#x2713 wartungsfrei und leistungsstark!

    </p>
    </div>

    <div class="img">
    <a href="http://tatura.biz/img/corsair.png"><img src="http://tatura.biz/img/corsair.png" alt=""></a>
    </div>
    <div class="teile">
    <p>Corsair Carbide Series Air 540</p>
    </div>
    <div class="teile-unten">
    <p>&#x2713 einzigartiger, eleganter Cube von Corsair in weiss und schwarz mit grossem Sichtfenster<br>
    &#x2713 optimaler Airflow durch die Dual-Chamber-Technik <br>
    &#x2713 Masse: 332 x 458 x 415 mm (B x H x T)

    </p>
    </div>

    <div class="img">
    <a href="http://tatura.biz/img/samsung.png"><img src="http://tatura.biz/img/samsung.png" alt=""></a>
    </div>
    <div class="teile">
    <p>Samsung ssD 850 Evo 250GB</p>
    </div>
    <div class="teile-unten">
    <p>&#x2713 guter Preis, h&ouml;chstm&ouml;gliche Systemstabilit&auml;t, Zuverl&auml;ssigkeit<br>
    &#x2713 maximale Schreib-, Lese- und Zugriffsleistung <br>
    &#x2713 hohe Qualit&auml;t - 5 Jahre Garantie ! <br>
    &#x2713 Magician-Software, ein ausgezeichnetes Wartungs- und Clone-Tool incl.

    </p>
    </div>

    <div class="img">
    <a href="http://tatura.biz/img/western.png"><img src="http://tatura.biz/img/western.png" alt=""></a>
    </div>
    <div class="teile">
    <p>Western Digital WD Blue 1TB, 64MB Cache, SATA 6Gb/s</p>
    </div>
    <div class="teile-unten">
    <p>&#x2713 guter Preis, h&ouml;chstm&ouml;gliche Systemstabilit&auml;t, Zuverl&auml;ssigkeit<br>
    &#x2713 64MB Cache-Speicher <br>
    &#x2713 schnelle SATA 6G-Schnittstelle


    </p>
    </div>

    <div class="img">
    <a href="http://tatura.biz/img/modding.jpg"><img src="http://tatura.biz/img/modding.jpg" alt=""></a>
    </div>
    <div class="teile">
    <p>Optisches Tuning</p>
    </div>
    <div class="teile-unten">
    <p>&#x2713 Lamptron FlexLight 24cm, 24 LED blau<br>
    &#x2713 Nanoxia Rigid LED 30cm 27 LED weiss <br>
    &#x2713 Kabel BitFenix Alchemy sleeved weiss/schwarz + Kabelk&auml;mme


    </p>
    </div>

    <div class="img">
    <a href="http://tatura.biz/img/windows10.jpg"><img src="http://tatura.biz/img/windows10.jpg" alt=""></a>
    </div>
    <div class="teile">
    <p>Software</p>
    </div>
    <div class="teile-unten">
    <p>&#x2713 Windows 10 vorinstalliert, auf Wunsch (Aufpreis + 25 Euro) erhalten Sie eine Lizenz (ohne CD-Rom)<br>
    &#x2713 alle Treiber - Mainboard/Grafikkarte sind installiert und werden auf CD-Rom mitgeliefert<br>


    </p>
    </div>

    <div class="img">
    <a href="http://tatura.biz/img/asus-anschluss.png"><img src="http://tatura.biz/img/asus-anschluss.png" alt=""></a>
    </div>
    <div class="teile">
    <p>Kabel, Anschl&uuml;sse, Sonstiges</p>
    </div>
    <div class="teile-unten">
    <p>&#x2713 Ger&auml;tekabel f&uuml;r PC<br>
    &#x2713 Front: &bull; 2x USB 3.0 &bull; Startbutton &bull; Resetbutton 2x &bull; 3,5mm Audio-Klinken (Mikrofon+Kopfh&ouml;rer) <br>
    &#x2713 R&uuml;ckseite: &bull; 2x USB 2.0 &bull; 2x USB 3.0 &bull; 1x USB 3.1 Typ-A &bull; 1x USB 3.1 Typ-C <br>
    &bull; 1x DVI-I &bull; 1x VGA &bull; 1x DisplayPort &bull; 1x HDMI 1.2
    &bull; 1x PS/2 &bull; 1x SPDIF &bull; 5x 3,5mm Realtek Surround <br>
    &#x2713 Intel I219-V Gigabit-LAN<br>
    &#x2713 8-Channel Realtek ALC 892 Audio Codec + ASUS Crystal Sound 3<br>


    </p>
    </div>

    <p>&nbsp;</p>
    </div>



    </body>
    </html>

  4. #4
    Großmeister(in)
    Registriert seit
    04.08.2009
    Beiträge
    574
    Danke
    0
    Bekam 67 mal "Danke" in 65 Postings

    Standard AW: div Container bleiben bei kleinerem Browserfenster nicht nebeneinander

    Hallo

    Welchen Code muss ich dafür benutzen, wenn "&#x2713" falsch ist?
    Das Semikolon am Ende fehlt, also "&#x2713;". Die meisten Browser zeigen den Haken ohne Semikolon zwar auf Grund der eingebauten Fehlerkorrektur trotzdem an - müssen sie aber nicht.

    Und noch eine letzte Frage, was müsste ich im style ändern, damit die div Container von der rechten Seite ganz nach unten rutschen, wenn mann die Seite z.B. auf dem Netbook oder Handy anschaut?
    Wenn du bei float bleiben willst:

    a) Im Quelltext den Text für den rechten Container unter den Quelltext für den linken Container verschieben.

    b) Eine sogenannte "Media Query" einbauen und in der Media Query den beiden Containern eine Breite von 100% geben.


    Dazu könntest du direkt vor dem schließenden style-Tag im head-Bereich, also nach

    Code:
    .service-unten {
    float: right;
    width: 100%;
    background-color: white;
    margin-top: 0px;
    margin-right: 10px;
    border: 2px solid #858d93;
    border-radius: 0px 0px 10px 10px;
    }
    folgendes eintragen:

    Code:
       @media only screen and (max-width: 800px) {
          #service,
          #inhalt {
             width: 100%;
             padding: 0;
             border: 0;
             margin: 0;
          }
       }
    Falls du seitliches padding, border oder margin benötigst musst du die dann von der width abziehen. Wenn du über 100% kommst müssen die Besucher ansonsten seitlich scrollen.

    Die 800px bestimmten die Fensterbreite, bei denen die MediaQueries aktiv werden. Die kannst du also entsprechend deinen Wünschen anpassen. Wenn du dort 1000px einträgst erfolgt der Umbruch in eine Spalte bereits früher, halt bei 1000px Fensterbreite.

    Gruss

    MrMurphy
    Geändert von MrMurphy (09.04.2016 um 19:22 Uhr)

  5. Folgende User finden die Antwort von MrMurphy gut:


  6. #5
    HTML Newbie
    Themenstarter

    Registriert seit
    09.04.2016
    Beiträge
    3
    Danke
    1
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: div Container bleiben bei kleinerem Browserfenster nicht nebeneinander

    Heureka! Ich habs hingekriegt...

    Habe mich nochmal kurz einlesen müssen.


    Im Script muss folgendes stehen: @media (width) { /* Das Ausgabemedium besitzt das Merkmal „Breite“ */ }
    Darunter habe ich dann Deinen Code eingegeben:
    @media only screen and (max-width: 800px) {
    #service,
    #inhalt {
    width: 100%;
    padding: 0;
    border: 0;
    margin: 0;
    }
    }

    Und siehe da, es funktioniert....

    Vielen lieben Dank!!!!

Ähnliche Themen

  1. 3 Div Container nebeneinander
    Von Maurice EL im Forum HTML & CSS Forum
    Antworten: 5
    Letzter Beitrag: 25.12.2013, 23:12
  2. anpassung des bildes beim kleinerem bildschirm ??? need help
    Von tollpan im Forum HTML & CSS Forum
    Antworten: 10
    Letzter Beitrag: 04.08.2007, 22:30
  3. skyscraper fixieren und zwar nicht am browserfenster ....
    Von fmagic im Forum HTML & CSS Forum
    Antworten: 0
    Letzter Beitrag: 08.09.2006, 18:23
  4. Tabelle passt sich Browserfenster an, das will ich nicht !
    Von :.:UltraVa Flyin:.: im Forum HTML & CSS Forum
    Antworten: 13
    Letzter Beitrag: 23.01.2006, 22:46
  5. Adressleiste soll nicht immer gleich bleiben
    Von dende im Forum HTML & CSS Forum
    Antworten: 2
    Letzter Beitrag: 31.01.2005, 22:48

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •