divs und css

buk

buk

Aktives Mitglied
Thread Starter
Dabei seit
27.10.2003
Beiträge
1.039
Reaktionspunkte
57
guude,

ich beschaeftige mich "notgedrungen" mit html und css. nach laengerem stoebern der google hitlist weiss ich nun das "tables" tot sind. und der standard die <div> tags sind. leuchtet mir auch ein.

nun hab ich allerdinsg drupal als, sagen wir mal, fundament auserkoren. mein problem ist nun das anpassen des themes. die website sollte so [1] aussehen.

mir ist aber nicht ganz klar wie ich das mit divs mache, bzw. ist das ueberhaupt moeglich das so zugestalten? alles andere wuerde mich allerdinsg ueberraschen.

code hab ich noch keinen geschrieben, da ich erstmal das konzept wie es aussehen soll gemacht habe und mich in das <div> thema eingelesen habe. ich will auch keinen fertigen code.

ich denke mal ich fange oben an und arbeite mich nach unten durch?! bzw ich schreibe fuer jeden "block" ein <div> tag. also <div id="block1"> und positioniere und formatiere diesen dann in der style.css.

bin auch auf dem richtigen (holz) weg?! danke im vorraus fuer eure antworten!

---
[1] http://img248.imageshack.us/img248/3289/websitemb2.png
 
Und du willst dir wirklich die Mühe machen, alles von Grund auf selbst zu machen? Warum nimmst du als Basis nicht ein vorgefertigtes Theme? Und passt es dann deinen Vorstellungen an? Oder hast du kein passendes gefunden?
 
Zuletzt bearbeitet:
Aufbau muss so sein:

Kopf - Linke Spalte - Rechte Spalte - Content - Fuß

Schaut komisch aus, funzt aber nur so! Linke hat flot:left rechte hat float: right Margin für beide setzten, den Margin dann auch für den Content + etwas Abstand
 
ThaHammer schrieb:
Aufbau muss so sein:

Kopf - Linke Spalte - Rechte Spalte - Content - Fuß

Schaut komisch aus, funzt aber nur so! Linke hat flot:left rechte hat float: right Margin für beide setzten, den Margin dann auch für den Content + etwas Abstand
Zum Vergrößern anklicken....

Das stimmt nicht, dass es nur so funktioniert. Gerade durch CSS und das floating gibt es 1000+1 Wege zum Ziel. Ausserdem ist die Linearisierung nicht optimal (schlecht für die Suchmaschinen-Spider und die Benutzer ohne CSS-fähige Endgeräte).

Ich würde es so machen:

header - links (float:left) - content (float:left) - rechts (float:left) - fuss (clear:left)

Fasst man links - content - rechts in einem eigenen DIV zusammen, fällt das Layout auch nicht auseinander, wenn der Viewport zusammengeschoben wird. Ferner umgeht man mit dem 3fach Float den 3-px-Gap Bug beim IE6 ( http://www.positioniseverything.net/explorer/threepxtest.html ).

2nd
 
  • Gefällt mir
Reaktionen: ThaHammer
guude,

ThaHammer schrieb:
Aufbau muss so sein:
Kopf - Linke Spalte - Rechte Spalte - Content - Fuß
Zum Vergrößern anklicken....
danke schonmal!

kann ich in den kopfbereich 3 teilig machen?
so etwa:
+kopf
- block1
- logo
- block2

|block1 | logo | block2|

mit divs? also ein div fuer header und dann darunter div id block1 div id logo div id block2
 
Es müssen nicht zwangsläufig extras DIVisions sein. Absätze oder Überschriften (<p>-Tags) sind auch Block-Level-Elemente und bei Bildern kann man das Verhalten von Block-Level-Elementen per CSS (display: block) erzwingen - von daher macht es nicht immer Sinn, alles extra in ein DIV einzupacken.

2nd
 
Zum Einstieg kann ich Dir ein Buch empfehlen: CSS-Praxis von Laborenz. Gut aufgebaut und v.a. sehr praktisch: die Browser-Kompatibilitäts-Tabelle!

Zum Aufbau des Codes: Der Code sollte so gestaltet sein, dass sich die Struktur des Codes auch am Inhalt orientiert. Es sollte nicht so sein, dass das gewünschte Layout den Code diktiert. Sicher wird man hier oder da mal einen Kompromiss machen müssen, aber meist weniger wegen CSS als mehr wegen falscher oder unterschiedlicher Interpretation der CSS-Anweisungen der diversen Browser.

Wenn man im Firefox unter Ansicht->Webseiten-Stil->Kein Stil wählt, sieht man schnell, ob eine Seite gut strukturiert ist oder nicht.
 
Manjo schrieb:
Wenn man im Firefox unter Ansicht->Webseiten-Stil->Kein Stil wählt, sieht man schnell, ob eine Seite gut strukturiert ist oder nicht.
Zum Vergrößern anklicken....

Aufm PC ist das mit der Tastenkombi Strg+Shift+S möglich, und aufm Mac?
 
guude,

also ich habs mittlerweile hinbekommen das ich links ne sprachenauswahl habe und mittig das logo. nur das rechts neben dem logo noch was steht bekomm ich nicht hin.

Code: 
<div id="page">
      <div id="header">hallo</div>
        <div id="header1">
          <p>Please select your Language</p>
          <div style="text-align:center;"><img src="/pfad/zum/image.png" alt="<?php print t('Home');?>" id="logo" /></div>
          <div style="text-align:right;"><p>hallo ich sollte rechts stehen</p></div>
        </div>

kann mir mal einer helfen, bitte
 
Mit ein paar text-align wirst du da nicht auskommen. float ist das Stichwort.
Hier drei Ansätze. Der erste entspricht dem von ThaHammer (links, rechts, content), der zweite dem von 2nd (alles mit float: left) und der dritte nimmt den Content vom Quelltext her ganz nach oben.

Ansatz 1
Code: 
<style type="text/css">
	* {
		margin: 0;
		padding: 0;
	}
	#language {
		background: #0F0;
		float: left;
		height: 150px;
		text-align: left;
		width: 25%;
	}
	#right {
		background: #F00;
		float: right;
		height: 150px;
		text-align: right;
		width: 25%;
	}
	h1 {
		background: #FF0;
		height: 150px;
		text-align: center;
	}
</style>

<div id="header">
	<div id="language">Sprachwahl</div>
	<div id="right">Rechts vom Logo</div>
	<h1>Logo oder was auch immer</h1>
</div>

Ansatz 2
Code: 
<style type="text/css">
	* {
		margin: 0;
		padding: 0;
	}
	#language {
		background: #0F0;
		float: left;
		height: 150px;
		text-align: left;
		width: 25%;
	}
	#right {
		background: #F00;
		float: left;
		height: 150px;
		text-align: right;
		width: 25%;
	}
	h1 {
		background: #FF0;
		float: left;
		height: 150px;
		text-align: center;
		width: 50%;
	}
</style>

<div id="header">
	<div id="language">Sprachwahl</div>
	<h1>Logo oder was auch immer</h1>
	<div id="right">Rechts vom Logo</div>
</div>

Ansatz 3
Code: 
<style type="text/css">
	* {
		margin: 0;
		padding: 0;
	}
	#header-container {
		float: left;
	}
	#language {
		background: #0F0;
		float: left;
		height: 150px;
		text-align: left;
	}
	#right {
		background: #F00;
		float: left;
		height: 150px;
		text-align: right;
	}
	h1 {
		background: #FF0;
		float: right;
		height: 150px;
		text-align: center;
	}
</style>

<div id="header">
	<div id="header-container">
		<h1>Logo oder was auch immer</h1>
		<div id="language">Sprachwahl</div>
	</div>
	<div id="right">Rechts vom Logo</div>
</div>

Alternativ solltest du vielleicht mal einen Blick auf YAML werfen. Möglicherweise gibt es da schon ein Grundtemplate für Drupal.
 
  • Gefällt mir
Reaktionen: buk
guude,

@msslovi0

vielen dank!
 
Es gibt Yaml für Drupal .
Das alles ist aber nicht einfach zu erstellen, wenn man keine Ahnung davon hat.
Das erfordert Mühe und Wissen um CSS.

Aber aller Anfang ist leicht und ich kann Dir dieses Buch wärmstes Empfehlen.
Das ist vom Yaml "Erfinder" und ist für den Einstieg in YAML als auch in CSS das Beste was ich kenne.

Wenn Dich die Thematik interessiert, dann kauf es Dir und du kannst spielend leicht mit CSS umgehen.
Grüße Mondmann
 
guude,

dank dir mondmann fuer den buchtipp! yaml fuer drupal war meine erste anlaufstelle, allerdings muss ich ne lizenz kaufen, wenn ich die hinweise auf yaml etc im footer entfernen will. und ich weiss noch nicht ob ich das moechte...
 
guude,

ich hab das theme nun so gebastelt wie es sein sollte, aber der $content wird nicht ordentlich dargestellt . ich hefte an den anhang mal meine page.tlp.php und meine style.css evtl. kann mir ja einer helfen.

danke im voraus

[1] http://rafb.net/p/11uoVF72.html <-- page.tpl.php
[2] http://rafb.net/p/b2f7yW18.html <-- style.css
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben Unten