div Container bleiben bei kleinerem Browserfenster nicht nebeneinander

Petra Tatura

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>

<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>• nur Top Qualität<br>
• täglicher Versand<br>
• versicherter Versand<br>
• täglicher Emailsupport<br>
• 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> </p>
</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>   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: • 2x USB 3.0 • Startbutton • Resetbutton 2x • 3,5mm Audio-Klinken (Mikrofon+Kopfhörer) <br>
&#x2713 Rückseite: • 2x USB 2.0 • 2x USB 3.0 • 1x USB 3.1 Typ-A • 1x USB 3.1 Typ-C <br>
• 1x DVI-I • 1x VGA • 1x DisplayPort • 1x HDMI 1.2
• 1x PS/2 • 1x SPDIF • 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>

</body>
</html>

MrMurphy

Hallo

Zitat

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.

Zitat

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

Zitat

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/Eigen…background-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

Petra Tatura

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ü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>

<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 ausschliesslich 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 class="service-oben">
<p>Unsere Leistungen</p>
</div>

<div class="service-unten">
<p>• nur Top Qualität<br>
• täglicher Versand<br>
• versicherter Versand<br>
• täglicher Emailsupport<br>
• 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> </p>
</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ü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 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ü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 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>   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üfter<br>
&#x2713 ü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ällig geformte Wärmeverteilerplatten aus weiss 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 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ühlungssystem<br>
&#x2713 mit 240er-Radiator und vier geräuscharmen 120-mm-Lü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ö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 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öchstmögliche Systemstabilität, Zuverlä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ä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üsse, Sonstiges</p>
</div>
<div class="teile-unten">
<p>&#x2713 Gerätekabel für PC<br>
&#x2713 Front: • 2x USB 3.0 • Startbutton • Resetbutton 2x • 3,5mm Audio-Klinken (Mikrofon+Kopfhörer) <br>
&#x2713 Rückseite: • 2x USB 2.0 • 2x USB 3.0 • 1x USB 3.1 Typ-A • 1x USB 3.1 Typ-C <br>
• 1x DVI-I • 1x VGA • 1x DisplayPort • 1x HDMI 1.2
• 1x PS/2 • 1x SPDIF • 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>

</body>
</html>

MrMurphy

Hallo

Zitat

Welchen Code muss ich dafür benutzen, wenn "&#x2713" falsch ist?

Das Semikolon am Ende fehlt, also "✓". Die meisten Browser zeigen den Haken ohne Semikolon zwar auf Grund der eingebauten Fehlerkorrektur trotzdem an - müssen sie aber nicht.

Zitat

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

Petra Tatura

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!!!!

div Container bleiben bei kleinerem Browserfenster nicht nebeneinander

Tags

Benutzer online in diesem Thema