Basic HTML Kästchen positionieren?

Hey.

Also ich weiß, dass es bei HTML divs gibt die sozusagen Blöcke sind die man mit Eigenschaften versehen kann via CSS.

nun wollte ich ein einfaches web layout gestalten aber scheitere daran, dass ich divisions einmal rechtsbündig und einmal linksbündig zentriere mit nem abstand dazwischen

wie ihr sehen könnt habe ich es dann zusammen gepfuscht bekommen sodass die abstände halbwegs passen.

gibt es da einen besseren zugang ? Bitte nur Tipps will selbst auf die Lösung kommen :)

bin auch schon am Überlegen den Code komplett neu zu schreiben :)

habe euch ein bild vom layout gemacht. dachte eigentlich ich mache für jedes kästchen eine eigene div umgeben von einer master div welche die komplette breite bestimmen soll.

und darin dann eben die einzelnen divs entweder zentrieren oder rechts / links

nur weil ich eben 2 kästchen in einer reihe habe dachte ich daran es mit einem table zu lösen und in der tr dann eben 2x TD damit die divs nebeneinander sein können

nicht geklappt. hab eigentlich schon so ziemlich alles probiert. divs hinzufügen, entfernen und über css habe ich versucht einzelne elemente zu manipulieren etc.

haut leider nicht hin.

Was meint ihr zu den bilder crop und größen veränderung. ich weiß man könnte es mit photoshop auf die entsprechende größé trimmen aber ich wollte es mit html/css schaffen :)

habe auch versucht den code Schön zu machen als "Lesbar", was hält ihr davon?

HTML

http://pastie.org/p/2vfSJIRfb5QSHBNQciATWO

Header CSS

http://pastie.org/p/6wEHhhZQWKYwwfC2RSxof3

Mainstyle CSS

http://pastie.org/p/5gFxKIEBpI0f5dlimjen9X

Footer CSS

http://pastie.org/p/5oUkLA58gIJ8cgWjw6gGTq

lg

Answer 1

[flumex]

Ich habe mir mal den Code genommen und in Codepen reingepackt.

https://codepen.io/flumex/pen/PoPdLZw

1. Man sieht, dass es komplett aus dem Internet kopiert wurde.
2. Versuch dich am Anfang eher an kleineren Komponenten und nicht an einer kompletten Webseite. Bau das sukzessiv auf und nicht alles auf einmal.
3. Guck Dir mal diese Seite an, die kann ich Dir wirklich ans Herz legen.

Schönes Wochenende und weiterhin viel Glück!

Woher ich das weiß: Studium / Ausbildung – Fachinformatiker für Systemintegration / Freelance als AWE

Comments

[KnowHow1001]

Hey. Danke für die Antwort. Ich habe nichts aus dem Internet kopiert - habe die ganze HTML Struktur selber geschrieben und auch das CSS. weiß nicht ob das jetzt ein kompliment ist für meine Lernerfolge ? aber danke für eine antwort

[KnowHow1001]

@KnowHow1001

sitze schon 8 stunden dran wollte nur hören ob jemand nen tipp hat :)

Answer 2

[regex9]

(...) dass ich divisions einmal rechtsbündig und einmal linksbündig zentriere (...)

Diesen Fall sehe ich in deinem Dokument nirgendwo. Du versuchst lediglich, ein td-Element im Textfluss nach rechts zu drücken, dabei könntest du dir das sparen. Tabellenzellen innerhalb einer Tabellenzeile werden bereits automatisch nebeneinander gerückt.

(...) gibt es da einen besseren zugang ? (...)

Layouts kannst du via CSS mit dem Flexbox-Modell oder einem Grid umsetzen. Weitere Möglichkeiten der Positionierung von Elementen / des Layouting mit CSS werden hier aufgeführt.

Teile deine Seite im Voraus in ein Raster auf. Wie viele Spalten es nun geben soll, kannst du selbst bestimmen. Wenn du den gesamten Inhalt generell zentriert auf der Seite ausgeben lassen möchtest, ist ein Wrapperelement durchaus die richtige Wahl.

HTML (im body-Bereich):

<div class="container">
  <!-- your content ... -->
</div>

CSS:

.container {
  margin: 0 auto;
  width: 960px; /* or any other size ... */
}

Versuche, mit wenigen, aber dafür ausdrucksstarken Elementen deine Inhalte zu strukturieren. So bleibt dein Dokument auch einfacher überschaubar.

(...) dachte eigentlich ich mache für jedes kästchen eine eigene div umgeben von einer master div (...)

Verwende nicht nur div-Elemente für deine Komponenten sondern schau in jedem Fall erst, ob du nicht andere Blockelemente nutzen kannst (article, section, p, main, header, etc. ...), die den vorliegenden Inhalt in seiner Bedeutung besser beschreiben können.

Gerade so etwas:

<header>
  <div class="header">

ist etwas ohne Sinn.

(...) dachte ich daran es mit einem table zu lösen (...)

Verwende Tabellen nur dann, wenn dies das passende Mittel ist, Daten in einem Kontext (vergleichend) gegenüberzustellen. Für die reine Positionierung (Seitenlayout) von Elementen sind Tabellen nicht gedacht. Zudem bereiten sie dir bspw. in der responsiven Ausrichtung eher Probleme.

Im Übrigen ist das invalides Markup:

<tr>
  <h1>This is my first <br>website :D</h1>
</tr>

Die tr-Elemente erlauben als direkte Kindelemente nur td und th.

Das Gleiche gilt hier:

<tr>
  <!-- Articles -->
  <article>

wobei du den article-Tag nicht einmal schließt.

Der obige Fall daher einmal korrigiert:

<tr>
  <td>
    <h1>This is my first <br>website :D</h1>
  </td>
</tr>

Wobei dieser Inhalt (die Seitenüberschrift) überhaupt nicht in die Tabelle passt. Er sollte außerhalb stehen.

Und da ich gerade Markupfehler aufzähle: Der letzte schließende article-Tag und sein folgender, schließender div-Tag müssen raus, denn sie haben keinen passenden Starttag. Der schließende html-Tag sollte ebenso raus (oder andersherum: Du fügst einen passenden Starttag direkt nach dem Doctype ein), um etwas Symmetrie zu wahren.

Was meint ihr zu den bilder crop und größen veränderung.

Ja, das kann man so machen.

Produktiv solltest du hierbei noch zwei Punkte beachten:

• Unterscheide zwischen dekorativen Bildelementen und Bildern, die aktiv Inhalt repräsentieren (Bsp.: Ein Foto von Sitting Bull bei einem Internetartikel über Indianer). Dementsprechend kannst du dich technisch anpassen: Dekorative Elemente mit dem background-Property (CSS) setzen (background-size kann hierbei das Skalierungsverhalten bestimmen) und Inhaltselemente mit img oder picture.
• Behalte das Ladeverhalten im Auge. Es macht durchaus Sinn, Bilder vorskaliert an den Browser zu senden.

Answer 3

[Autoschieber]

Planst du für Desktop oder Mobile? oder ist das der Responsive Ansatz ?

Woher ich das weiß: Berufserfahrung