[Party]

Hi leute ich arbeite seit gestern das erste mal mit CSS an einer Homepage da ich diese XHTML und CSS 'Valid' haben möchte und endlich mal versuchen will das design ohne tabellen zugestallten

also ich bin bis jetzt eigendlich recht gut klar gekommen dafür das es wirklich das erste mal mit CSS war aber jetzt hab ich ein problem und zwar wenn ich in die NAVIbox was eingebe,das größer ist als di box schiebt es mir di box in die andere rein. kann mann das irgendwie so machen dass der zwischenabstand bei den boxen immer gleich bleibt wenn sich di größe von den boxen verändert?

im anhang sind die dateien.
und unter diesem Link kann man sich bis jetzt das ergebnis anschauen: hier


edit:
Ansonsten könnte mir bitte jemand sage ob das so in ordnung wäre wie ich das gemacht habe bin ja ein css anfänger

Danke Pati

Angehängte Miniaturbilder

• 

Angehängte Datei(en)

•  index.htm (759bytes)
  Anzahl der Downloads: 129
•  style.css (838bytes)
  Anzahl der Downloads: 50

Dieser Beitrag wurde von Party bearbeitet: 01. August 2006 - 07:53

[axx]

Herzlichen Glückwunsch zu diesem Entschluss. Du wirst es in Zukunft einfacher haben.

Du erliegst hier aber einem Denkfehler. Du versuchst mit css ein design zu entwerfen wie du es evtl. vorher mit Tabellen gemacht hast. CSS ist zum Formatieren von z.B. HTML-Elementen gedacht.

Mit anderen Worten: Schreibe deinen Inhalt, packe dies Inhalte in geeignete HTML-Elemente, formatiere die Elemente mit CSS.
Einem Element <div> eine feste Größe zu geben hat in den seltensten Fällen Sinn. Auf deiner Seite gibt es keinen Inhalt.

Bevor du dir etwas angewöhnst, was dich nicht weiterbringen kann, lies auch bitte diesen Artikel: http://css.fractatul.../div_suppe1.htm

Was die Ausdehnung von Boxen betrifft: Abhängig von Dokumententyp und von verwendeten Browser kann die Darstellung variieren. Wenn nichts Außergewöhnliches dagegen spricht, schreibe HTML 4.01 oder XHTML 1.0 in der strict Variante. Es ist nach meiner Erfahrung der einfachste Weg, Fehler einzugrenzen.

Lerne, was das Boxmodell ist und wie Browser mit verschiedenen Dokumententypen umgehen.

[Party]

ok danke werde ich mir gleich mal durchlesen

[Party]

@axx
also dann wäre meine überlegung jetzt ich mache ein 2 spalten design

div für die navi und den content

und das was in der navi ist mach ich dann doch noch mit tabellen oder wie soll ich das am besten lösen?
navi 1ste box logo, 2te menü, 3te neueste news und 4te aktuelle events

[flo]

Zitat

und das was in der navi ist mach ich dann doch noch mit tabellen oder wie soll ich das am besten lösen?

Die nav machst du am besten mit Listen

<ul>
<li><a href="#">item1</a></li>
<li><a href="#">item2</a></li>
<li><a href="#">item3</a></li>
</ul>

[axx]

Zitat (Party: 01.08.2006, 10:23)

@axx
also dann wäre meine überlegung jetzt ich mache ein 2 spalten design

div für die navi und den content

und das was in der navi ist mach ich dann doch noch mit tabellen oder wie soll ich das am besten lösen?
navi 1ste box logo, 2te menü, 3te neueste news und 4te aktuelle events

Kommt drauf an, solange es gar keinen Inhalt gibt, gibt's dafür keine Antwort.
Eine Überschrift ist eine Überschrift, ein Absatz ein Absatz, eine Liste eine Liste usw.

Wenn es einen Spruch zur Wiedererkennung gibt (à la RitterSport: Quadratisch, Praktisch, Gut) kann der inklusive logo als Überschrift erster Kategorie durchgehen.
Eine Liste von Links, wie sie für eine Navigation typisch ist, ist natürlich eine Liste, das gehört nicht in eine Tabelle.
Auf diese Weise wählst du für jeden Teil des Inhalts ein geeignetes Element. Danach kommt die Formatierung.

Das Element div wird dazu eingesetzt, um mehrere Elemente zu gruppieren, nicht mehr und nicht weniger. Einfache 2-Spalten-Layouts können durchaus ohne div auskommen.

Wenn du von Box sprichst, meinst du wahrscheinlich die eingerahmten weißen Flächen, die ein grafischer Browser darstellt. So eine Box kann eine Ebene, ein Absatz oder Liste sein. Du kannst auf fast jedes HTML-Element fast alle CSS_Eigenschaften anwenden.

Löse dich von dem Gedanken eines Rasters, in das Inhalte eingeordnet werden. Semantisches, mit CSS formatiertes HTML ist viel flexibler.

[Party]

@axx

danke

aber mein problem ist zurzeit dass ich diese 4 boxen auf der linken seite herbekommen muss und ich zurzeit hänge da ich nicht weis wie ich das genau machen soll das die 4 boxen so dargestellt werden da ich ja besser nicht so viele divs verwenden soll. also wie oben geschrieben hab ich mir gedacht ich mache die 4 boxen aus tabellen da ich dann einfach sagen kann border:1px solid #848484 und background-color:#FAFAFA; und das war zuerst auch meine frage ob ich das mit tabellen machen soll oder mittels einer andern besseren lösung ich weis meine gedanken sind noch tabellenlayoutig vesäucht *gg* aber wenn ich css lerne möchte ich halt wissen wie ihr sowas regeln würdet...


die formatierung vom text und so ist nicht das problem.ich will erstmal das design jetzt so herbekommen...

im anhang ist ein bild das man sich das ganze besser vorstellen kann was ich machen will *g*


aber aufjedenfall VIELEN DANK für eure bemühungen das hilft mir auf jeden fall weiter

Angehängte Miniaturbilder

• 

[axx]

Die oberste box ist eine Gruppierung mehrerer Elemente, wahrscheinlich <img> und mehrere <label> und <input>. Klar, dass du das in diesem Fall mit einem <div> zusammenfasst.
Navigation kann beides, Ebene und ungeordnete Liste sein, am Aussehen ändert das nichts.

#logo, #navigation {
	border:1px solid #848484;
	background-color:#FAFAFA;
}

Absolute Positionierung ist unpraktisch. Stattdessen würde ich die vier Boxen in ein div zusammenfassen und den rechten Teil drumrum fließen lassen.

Ich sehe folgende mögliche Struktur:

<html>
  <head>
  </head>
  <body>
	<div id="mittelblau">
	  <div id="hellblau">
	
		<div id="logo">
		  <h1><span> </span>Überschrift</h1>
		  <form>
			<div>
			  <label>
			  <input>
			  <label>
			  <input>
			  <label>
			  <input>
			</div> 
		</div>

		<ul id="navigation">
		  <li></li>
		</ul>
		
		<h2 class="boxueberschrift">Neuester Artikel</h2>
		<p class="boxinhalt">blah</p>

		<h2 class="boxueberschrift">Aktuelle Neuigkeiten</h2>
		<p class="boxinhalt">blah</p>
	  
	  </div>

	  <div id="content">
		<h2>content</h2>
		<p>blah</p>
	  </div>
	</div>
  </body>
</html>

body hat eine Hintergrundfarbe dunkelblau.
'mittelblau' ist eine Ebene, um eine maximale (keine feste) Breite definieren zu können.
'mittelblau' hat ein mittelblaues Hintergrundbild, das vertikal wiederholt wird.
'hellblau' ist linksanliegend ('content' wird darum fließen.).
'hellblau' hat etwas Abstand zum linken Rand.
'logo' nimmt die ganze Breite von 'hellblau' ein, genau wie alle "Boxen" innerhalb von 'hellblau'.
h2 class="boxueberschrift" und p class="boxinhalt" bilden zusammen eine Box.
Der Überschrift fehlt halt der untere Rand, dem Absatz fehlt der obere.
'content' kann einen festgelegten Abstand zum linken Rand haben.
'content' hat eine Breite von ('mittelblau' - 'hellblau')

Soweit einige Gedanken zur Theorie, keine Tabellen nötig.