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

mehrere Divs nebeneinander / Seitenmitte?

HtmL-CSS-Starter

HtmL-CSS-Starter

Neues Mitglied
Hallo Zusammen,

Ich bin Neueinsteigerin in HtmL und CSS (Grafikdesignerin Print) und komme mit einer "Kleinigkeit" einfach nicht klar.

Wie schaffe ich es, drei oder vier Divs in der Seitenmitte nebeneinander anzuordnen (ohne Tabelle)? (siehe Bild).




Ich schätze mal mit float, aber ich kriege es einfach nicht hin.
Und das Wichtige ist ja, dass die Container in der Mitte der Seite stehen, nicht einer ganz links und der dritte ganz rechts....

Vielleicht könnt ihr mir helfen?

Viele Grüße
Lisa
 

Anhänge

  • ZentrierteDivs.JPG
    ZentrierteDivs.JPG
    123,2 KB · Aufrufe: 16
Danke dir, werde es mir gleich ansehen! :)


edit: mit JavaScript habe ich überhaupt (noch) keine Erfahrung... ohne wirds nicht gehen, oder? :(
 
Zuletzt bearbeitet:
Hallo,

mit JavaScript habe ich überhaupt (noch) keine Erfahrung... ohne wirds nicht gehen, oder?
Zum Vergrößern anklicken....

Bootstrap erfordert für einige Funktionen zwar JavaScript, davon ist dein Problem aber nicht betroffen. Wenn du dich in Bootstrap einarbeitest kannst du dein Problem also auch ohne JavaScript lösen.

Deine Angaben sind leider für eine konkrete Hilfe nicht ausreichend.

Am besten wäre ein Online-Beispiel von deinem aktuellen Stand. Und konkretesiere mal bitte was du mit "in der Seitenmitte" und "komme mit einer "Kleinigkeit" einfach nicht klar" meinst.

Willst du überhaupt eine moderne Seite erstellen oder schwebt dir (Grafikdesignerin Print) eher eine veraltete starre vor? Ich frage deshalb, weil Personen aus dem Print-Bereich mit der Erstellung von aktuellen Seiten (Stichworte: HTML5, CSS3, Responive Design, Semantik, unterschiedlichste Ausgabegeräte und Viewpoints (Monitorgrößen)) meist total überfordert sind.

Im Prinzip brauchst du nur rechts und links jeweils den gleichen Abstand (margin) in Prozent anzugeben und den Platz in der Mitte teilen sich die gefloateten Bilder. Danach ist ein clear erforderlich.

Gruss

MrMurphy
 
Doch nicht gleich mit Kanonen auf Spatzen schießen, wozu Bootstrap?
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>
<style type='text/css'>
<!--
#main
{
  width: 920px;
  margin: 0 auto;
}
.image
{
  width; 220px;
  margin: 5px;
  float: left;
  text-align:center;
}
-->
</style>
</head>
<body>
<div id="main">
  <div class='image'><img src='./images/1.jpg'><br />Bild1</div>
  <div class='image'><img src='./images/2.jpg'><br />Bild2</div>
  <div class='image'><img src='./images/3.jpg'><br />Bild3</div>
  <div class='image'><img src='./images/4.jpg'><br />Bild4</div>
  <div class='image'><img src='./images/5.jpg'><br />Bild5</div>
  <div class='image'><img src='./images/6.jpg'><br />Bild6</div>
  <div class='image'><img src='./images/7.jpg'><br />Bild7</div>
  <div class='image'><img src='./images/8.jpg'><br />Bild8</div>
  <div class='image'><img src='./images/9.jpg'><br />Bild9</div>
  <div class='image'><img src='./images/10.jpg'><br />Bild10</div>
  <div class='image'><img src='./images/11.jpg'><br />Bild11</div>
  <div class='image'><img src='./images/12.jpg'><br />Bild12</div>
</div>
</body>
</html>
 
MrMurphy schrieb:
Hallo,



Bootstrap erfordert für einige Funktionen zwar JavaScript, davon ist dein Problem aber nicht betroffen. Wenn du dich in Bootstrap einarbeitest kannst du dein Problem also auch ohne JavaScript lösen.

Deine Angaben sind leider für eine konkrete Hilfe nicht ausreichend.

Am besten wäre ein Online-Beispiel von deinem aktuellen Stand. <-- Da schäme ich mich noch :(
Und konkretesiere mal bitte was du mit "in der Seitenmitte" und "komme mit einer "Kleinigkeit" einfach nicht klar" meinst. <-- Die Kleinigkeit ist eben, die Boxen zentriert darzustellen, wie im angehängten Bild.

Willst du überhaupt eine moderne Seite erstellen oder schwebt dir (Grafikdesignerin Print) eher eine veraltete starre vor? <-- modern, mit sauberem Quelltext natürlich! Habe mir sagen lassen, Tabellen sind veraltet ;)
Ich frage deshalb, weil Personen aus dem Print-Bereich mit der Erstellung von aktuellen Seiten (Stichworte: HTML5, CSS3, Responive Design, Semantik, unterschiedlichste Ausgabegeräte und Viewpoints (Monitorgrößen)) meist total überfordert sind. <-- oh ja!! Du sagst es!!

Im Prinzip brauchst du nur rechts und links jeweils den gleichen Abstand (margin) in Prozent anzugeben und den Platz in der Mitte teilen sich die gefloateten Bilder. Danach ist ein clear erforderlich. <-- Im Prinzip ist das alles eigentlich ganz einfach, da hast du recht! ;)

Gruss

MrMurphy
Zum Vergrößern anklicken....

Jedenfalls tausend Dank schonmal an euch!!
Von Responsive Design habe ich natürlich schon einmal gehört, bin mir aber sicher, dass meine Portfolioseite damit" kagge" aussehen würde (also auf einem Tablet, etc.).
Ich würde sagen, die meissten meiner "Rezipienten" (also potentiellen Arbeitgeber) sehen sich die Seite später an einem großen Bildschirm an. Da aber "groß" ein weiter Begriff ist und es ja kaum Standards gibt (ich habe zB zuhause zum Arbeiten einen 22"Widescreen, aber auf der Arbeit hatte ich einen 19" Wide) ergibt sich für mich genau hier mein Problem:

Wenn ich eine "Starre Seite" baue, wird sie auf größeren Monitoren anders aussehen, als auf etwas kleineren.

Deswegen habe ich ja den Rat gesucht, wie ich mehrere Divs in der Mitte, also zentriert floaten lassen kann, damit sie wirklich von sagen wir mal 19" bis 24" Bildschirmen immer in der Mitte angezeigt werden...

Da ich aus dem Printbereich komme, also immer mit wysiwyg (what you see is what you get) gearbeitet habe könnt ihr euch hoffentlich meinen Gehirnknoten vorstellen, wenn ich jetzt mit HTML und CSS ganz anders arbeiten muss...

Es dauert lange und bringt selten die gewünschtenb Resultate :cool::oops::confused:

Doch nicht gleich mit Kanonen auf Spatzen schießen, wozu Bootstrap?
HTML:
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5. <style type='text/css'>
  6. <!--
  7. #main
  8. {
  9. width: 920px;
  10. margin: 0 auto;
  11. }
  12. .image
  13. {
  14. width; 220px;
  15. margin: 5px;
  16. float: left;
  17. text-align:center;
  18. }
  19. -->
  20. </style>
  21. </head>
  22. <body>
  23. <div id="main">
  24. <div class='image'><img src='./images/1.jpg'><br />Bild1</div>
  25. <div class='image'><img src='./images/2.jpg'><br />Bild2</div>
  26. <div class='image'><img src='./images/3.jpg'><br />Bild3</div>
  27. <div class='image'><img src='./images/4.jpg'><br />Bild4</div>
  28. <div class='image'><img src='./images/5.jpg'><br />Bild5</div>
  29. <div class='image'><img src='./images/6.jpg'><br />Bild6</div>
  30. <div class='image'><img src='./images/7.jpg'><br />Bild7</div>
  31. <div class='image'><img src='./images/8.jpg'><br />Bild8</div>
  32. <div class='image'><img src='./images/9.jpg'><br />Bild9</div>
  33. <div class='image'><img src='./images/10.jpg'><br />Bild10</div>
  34. <div class='image'><img src='./images/11.jpg'><br />Bild11</div>
  35. <div class='image'><img src='./images/12.jpg'><br />Bild12</div>
  36. </div>
  37. </body>
  38. </html>
Zum Vergrößern anklicken....

Danke auch für diesen Tip!
Ich werde ihn testen!
Ansonsten heisst es für mich jetzt: Bootstrap kennenlernen und HTML-Checker werden...:confused:
das wird dauern......

Eure Lisa
 
HtmL-CSS-Starter schrieb:
Von Responsive Design habe ich natürlich schon einmal gehört, bin mir aber sicher, dass meine Portfolioseite damit" kagge" aussehen würde (also auf einem Tablet, etc.).
Zum Vergrößern anklicken....

Genau das ist eben nicht der Fall. Responsive Design dient dazu, dass eine Webseite vom Smartphone bis zum 27" Monitor ordentlich aussieht, und Bootstrap erspart einem dabei sehr viel Zeit, welche man ansonsten mit dem manuellen Erstellen von Media Queries verbringen müsste. Für den Einstieg reicht es, das 12-er Grid zu verstehen, mit seinen Klassen .row, .row-fluid, .spanX und .offsetX. Die ganzen anderen Funktionen kannst du erst einmal ignorieren, und das JavaScript von dort benötigst du vielleicht nie.

Ich würde sagen, die meissten meiner "Rezipienten" (also potentiellen Arbeitgeber) sehen sich die Seite später an einem großen Bildschirm an.
Zum Vergrößern anklicken....

Solltest du etwas im Websektor suchen, sind der Umgang mit aktuellen Technologien und die Qualität deines Codes mindestens ebenso wichtig wie das visuelle Erscheinungsbild der Seite.
 
Hallo Tronjer, danke dir für die Tips! :)
Für den Einstieg reicht es, das 12-er Grid zu verstehen, mit seinen Klassen .row, .row-fluid, .spanX und .offsetX. Die ganzen anderen Funktionen kannst du erst einmal ignorieren, und das JavaScript von dort benötigst du vielleicht nie.
Zum Vergrößern anklicken....

Natürlich hast du recht
Responsive Design dient dazu, dass eine Webseite vom Smartphone bis zum 27" Monitor ordentlich aussieht
Zum Vergrößern anklicken....
Ich habe mich auch total unklar ausgedrückt und meinte:
Also ersteinmal sollte die Portfolioseite fertig sein und für große Bildschirme geeignet sein.
Daraufhin würde bei mir dann die anpassung auf Portable Medien erfolgen... Und ich glaube das wird lange genug dauern o_O
Ich habe einfach die Befürchtung, wenn ich parallel gleich alles in Angriff nehme, ohne wirkliches Wissen und Können, wird das ganz schön in die Hose gehen, bzw im schlimmsten Falle nie fertig werden...
Wenn ich dich vors InDesign setze, würdest du auch erstmal den Katalog bauen wollen und nicht parallel dazu die POS Medien (Broschüren, Flyer, Plakate, Folder, etc) schätze ich mal ;)

Solltest du etwas im Websektor suchen, sind der Umgang mit aktuellen Technologien und die Qualität deines Codes mindestens ebenso wichtig wie das visuelle Erscheinungsbild der Seite.
Zum Vergrößern anklicken....

Schuster bleib bei deinen Leisten! Nein, in der Richtung würde ich wohl nie Geld verdienen können, jedenfalls nicht in den nächsten Jahren...
Ich bleibe natürlich bei den Offlinemedien, also Print, bzw Screendesign, das kann ich schließlich ganz gut würd ich sagen :)
Die Portfolioseite soll mir einfach nur mehr Türen öffnen und für sich alleine stehen.
Und natürlich ist es ein Pluspunkt, wenn ich Grundkenntnisse in HTML und CSS angeben kann.
Soviel eben, dass ich gegebenenfalls Inhalte auf einer Seite abändern könnte... Du weißt schon ;)

Wenn ihr wollt kann ich euch gerne auf dem Laufenden halten, bzw. ich schätze mal stark, dass ich hier noch öfter die eine oder andere Frage stellen werde...
Und ich hoffe auch dann unterstützt ihr mich mit Rat und Tat?

Ich versuche natürlich beim nächsten mal definitiv klarer und deutlicher auszudrücken!
 
HtmL-CSS-Starter schrieb:
Ich habe mich auch total unklar ausgedrückt und meinte:
Also ersteinmal sollte die Portfolioseite fertig sein und für große Bildschirme geeignet sein.
Daraufhin würde bei mir dann die anpassung auf Portable Medien erfolgen... Und ich glaube das wird lange genug dauern o_O
Ich habe einfach die Befürchtung, wenn ich parallel gleich alles in Angriff nehme, ohne wirkliches Wissen und Können, wird das ganz schön in die Hose gehen, bzw im schlimmsten Falle nie fertig werden...
Wenn ich dich vors InDesign setze, würdest du auch erstmal den Katalog bauen wollen und nicht parallel dazu die POS Medien (Broschüren, Flyer, Plakate, Folder, etc) schätze ich mal ;)
Zum Vergrößern anklicken....

Mit InDesign kenne ich mich zwar nicht aus, aber dafür mit Illustrator und Photoshop. Ich komme ursprünglich aus einer ähnlichen Ecke wie du.

Sofern es dir lediglich um dieses Portfolio geht, musst du nicht so tief in die Materie einsteigen, aber das Grid-Layout unterbindet Fehler, die jeder Anfänger begeht: Die 1:1-Übertragung eines Photoshop-Mockups, bei der Elemente pixelgenau vom linken oberen Rand des Monitors platziert werden sollen - und anschließend mit Darstellungsproblemen in unterschiedlichen Auflösungen und Browsern zu kämpfen.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben