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

Flexible Website: Elemente ohne Lücken automatisch anordnen

T

tofix

Neues Mitglied
Hallo, ich bin Anfänger, kenne mich aber mit HTML und CSS einigermaßen aus. Jetzt möchte ich eine Website mit flexibler Breite erstellen. Die Elemente sollen sich je nach Browserbreite neu anordnen. Wie bekomme ich die riesigen Lücken weg, wenn die Elemente der darüberliegenden Reihe verschiedene Höhen haben. Die Elemente sollen also den Platz möglichst gut ausfüllen. Ich habe folgende Beispielseiten gefunden, auf denen das funktioniert: Wolff Olins oder HORT . Funktioniert das evtl. nur mit Java? Ich würde mich riesig über Hilfe freuen. Danke!
 
Werbung:
Hi tofix,

die beste Lösung in diesem Fall wäre auf CSS zurückzugreifen, Stichwort floating.

Einfach mal nach CSS und float googlen und du wirst recht schnell fündig.
Viel Erfolg
 
Hallo,un

und willkommen im Forum.

tofix schrieb:
Jetzt möchte ich eine Website mit flexibler Breite erstellen. Die Elemente sollen sich je nach Browserbreite neu anordnen. Wie bekomme ich die riesigen Lücken weg, wenn die Elemente der darüberliegenden Reihe verschiedene Höhen haben. Die Elemente sollen also den Platz möglichst gut ausfüllen. Ich habe folgende Beispielseiten gefunden, auf denen das funktioniert: Wolff Olins oder HORT . Funktioniert das evtl. nur mit Java? Ich würde mich riesig über Hilfe freuen. Danke!
Zum Vergrößern anklicken....

Was hast du denn bis jetzt an Code(Html und CSS). Kann man sich das mal ansehen. Stell es mal hier rein.
Die Beispielseiten die als Referenzen angegeben hast, sind übrigens keine guten Beispiele, da man daraus nicht ersehen kann, was du vor hast.

Und was du wahrscheinlich meinst ist Javascript, Java ist eine Programmiersprache.
 
Werbung:
Danke für die schnelle Antwort. Vielleicht habe ich mich etwas unverständlich ausgedrückt. Das floaten schiebt die Elemente nach links, aber füllt nicht die Löcher beim Verändern des Browserfensters so wie auf den Beispielseiten. Dort finden alle Elemente die Lücken, die durch unterschiedliche Höhen der darüberliegenden Elemente entstehen. Hast du da eine Idee?
 
Ohne Code ist keine Hilfe möglich.

Man kann ja nicht erahnen wie du es umgesetzt hast.
 
Ich habe noch keinen Code, da ich nicht weiß, wie ich die Seite hinkriege. Um mein Problem zu veranschaulichen, habe ich mal schnell eine Seite aufgebaut. Wenn man das Browserfenster schmäler zieht, rutschen die Bilder in die nächte Reihe, lassen aber links große Lücken. Sie sollen aber immer ganz hoch rücken, damit keine Lücken entstehen, so wie auf Wolff Olins . Der Quelltext dort hilft mir nicht weiter. Vielen Dank!!!
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
.header {
    background: #6F7D94;
}
.footer {
    background: #6F7D94;
    clear: both;
    padding-top: 10px;
    padding-right: 0;
    padding-bottom: 10px;
    padding-left: 0;
}
img {
    background-color: #999;
    float: left;
    width: 200px;
    margin: 5px;
}
</style>
</head>
<body>
<div class="container">
  <div class="header"><a href="#"><img src="" alt="Hier Logo einfügen" name="
  logo" width="100
 " height="90" id="Insert_logo" style="background: #8090AB; display:block;" /></a> 
    <!-- end .header --></div>
  <div class="content">
    
    <img name="" src="" width="200" height="150" alt="" />
     <img name="" src="" width="200" height="350" alt="" />
    <img name="" src="" width="200" height="200" alt="" />
    <img name="" src="" width="200" height="150" alt="" />
    <img name="" src="" width="200" height="200" alt="" />
    <img name="" src="" width="200" height="150" alt="" />
    
  </div>
<div class="footer">
    <p>Fußzeile</p>
   </div>
  </div>
</body>
</html>
 
Zuletzt bearbeitet:
Werbung:
Benutze bitte html- oder code-Tags vom Forum.

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
.header {
background: #6F7D94;
}
.footer {
background: #6F7D94;
clear: both;
padding-top: 10px;
padding-right: 0;
padding-bottom: 10px;
padding-left: 0;
}
img {
background-color: #999;
float: left;
width: 200px;
margin: 5px;
}
</style>
</head>
<body>
<div class="container">
<div class="header"><a href="#"><img src="" alt="Hier Logo einfügen" name="
logo" width="100
" height="90" id="Insert_logo" style="background: #8090AB; display:block;" /></a>
<!-- end .header --></div>
<div class="content">

<img name="" src="" width="200" height="150" alt="" />
<img name="" src="" width="200" height="350" alt="" />
<img name="" src="" width="200" height="200" alt="" />
<img name="" src="" width="200" height="150" alt="" />
<img name="" src="" width="200" height="200" alt="" />
<img name="" src="" width="200" height="150" alt="" />

</div>
<div class="footer">
<p>Fußzeile</p>
</div>
</div>
</body>
</html>
 
Auf der Seite Wolff Olins wurde viel mit Position absolute gearbeitet und der Rest ist Javascript soweit ich das beurteilen kann ist das script run.js massgeblich für die Aufteilung der Boxen verantwortlich. Ohne Javascript ist alles sauber untereinander angeordnet.
Zudem ist die Seite in Html5 erstellt.

Wenn du es auch so haben willst. solltest du dir die das Script ansehen.
 
Werbung:
Schau dir doch einfach mal responsive Media an. Da gibt es einen Haufen guter Frameworks, wie z. B. Bootstrap oder Amazium. Die machen dass von alleine.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben