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

Div Container Layout

K

Kaan

Neues Mitglied
Ich arbeite seit kurzem mit dem HTML-Editor und bin ziemlich weit. Jetzt möchte ich es stylen mit Farben und Div Tabellen Containeren am besten 4 spalten Layout, nur dass Problem ist ich kann kein CSS ist das auch möglich mit HTML
 
Wie schon gesagt wurde gehört html und css eigentlich zusammen,- wie pinsel und farbkasten.

kleine dinge wie sachen färben oder größen bestimmen, sind eigentlich nicht so kompliziert. kommt eben auch drauf an ob du ein responsive design willst, oder nur statisch.

Hier ein Beispiel:

Code: 
<!DOCTYPE html>
<html>
<head>

<style>

.container
{
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}
.mein-blauer-div {
  background: #2222d3;
  padding: 5px 15px;
}
.mein-roter-div {
  background: #d11111;
  padding: 5px 15px;
}

</style>

</head>
<body>


<div class="container">


<div class="mein-blauer-div">
<h1>Ich bin blau</h1>
Scroll Up and Down this page to see the parallax scrolling effect.
This div is just here to enable scrolling.
Tip: Try to remove the background-attachment property to remove the scrolling effect.
</div>

<div class="mein-roter-div">
<h1>Ich bin rot</h1>
Scroll Up and Down this page to see the parallax scrolling effect.
This div is just here to enable scrolling.
Tip: Try to remove the background-attachment property to remove the scrolling effect.
</div>

<div style="background: #bcbc1a;" class="mein-roter-div">  <!-- direkt im html -->
<h1>Ich bin gelb</h1>
Scroll Up and Down this page to see the parallax scrolling effect.
This div is just here to enable scrolling.
Tip: Try to remove the background-attachment property to remove the scrolling effect.
</div>

</div>

</body>
</html>

du kannst das css entweder wie im beispiel im head einbinden - zwischen

Code: 
<style>

magie hier rein ...

</style>

oder auch direkt in der html zeile

Code: 
<div style="background: #bcbc1a;" class="mein-roter-div">

aber am besten du machst eine name.css datei und machst dort alles rein. (dann direkt der code, aber ohne <style> tag. die verlinkst du dann im header der html so:

Code: 
<link href="name.css" rel="stylesheet" />

agrößen mit css angeben würde z. b. so aussehen (es gibt mehrere möglichkeiten):

Code: 
.container
{
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
}
.mein-blauer-div {
  background: #2222d3;
  width: 50%;
  float: left;
}
.mein-roter-div {
  background: #d11111;
  width: 50%;
  float: left;

}

so kannst du alles ansprechen wie du willst. du gibst eine klasse oder id und dann gibst du dieser anweisungen. natürlich kannst du auch alle div, p, h1 ect stylen ohne denen jedes mal eine klasse geben zu müssen. du kannst auch z.b. so machen:

Code: 
.container h1{
color: pink;      
}

in dem fall wären ALLE h1 schriften innerhalb vom container pink.
 
Zuletzt bearbeitet:
Quellcodes bitte nicht als Grafik dem Beitrag anhängen, sondern im dafür vorgesehenen [code][/code]-Tag posten, da der Screenshot des HTML-Codes unvollständig ist, nur einen Ausschnitt davon zeigt, und zudem der relevante CSS-Teil gänzlich fehlt.

Diverse <div>-Elemente werden nicht ordnungsgemäß mit </div> geschlossen und img src="images/BANNER.png" muß zumindest <img src="images/BANNER.png" /> lauten, damit die Grafik vom Browser überhaupt dargestellt werden kann.

Mehr lässt sich derzeit dazu nicht sagen.
 
Hi,

also es macht weniger Sinn zu Fragen, ob das ganze auch NUR mit HTML geht, als CSS zu lernen.
Ich habe CSS mit folgender Seite gelernt und kann es Dir für den Einstieg ans Herz legen:

https://www.coding-lab.de/tutorials/css/

Das coolste ist nämlich dabei, dass Du pro Lektion ein Video hast und einen Artikel, der dann nochmal schriftlich darauf eingeht. Mit dem Editor kannst Du dann live mittesten.

Natürlich solltest Du dann auch weitere Ressourcen nehmen:

http://de.html.net/tutorials/css/
https://developer.mozilla.org/de/docs/Web/CSS

Grüße

Dirk
 
DirkEinstedt schrieb:
Hi,

also es macht weniger Sinn zu Fragen, ob das ganze auch NUR mit HTML geht, als CSS zu lernen.
Ich habe CSS mit folgender Seite gelernt und kann es Dir für den Einstieg ans Herz legen:

https://www.coding-lab.de/tutorials/css/

Das coolste ist nämlich dabei, dass Du pro Lektion ein Video hast und einen Artikel, der dann nochmal schriftlich darauf eingeht. Mit dem Editor kannst Du dann live mittesten.

Natürlich solltest Du dann auch weitere Ressourcen nehmen:

http://de.html.net/tutorials/css/
https://developer.mozilla.org/de/docs/Web/CSS

Grüße

Dirk
Zum Vergrößern anklicken....

Danke fürs Feedback weißt du wie man von HTML Editor auf CSS einstellen kann?
 
Zuletzt bearbeitet von einem Moderator:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben