zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > (X)HTML
Seite neu laden Div basiertes Layout...?

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 28.06.2006, 18:31
Benutzerbild von jenny79
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 14.06.2006
Beiträge: 137
jenny79 befindet sich auf einem aufstrebenden Ast
Standard Div basiertes Layout...?

Hallo Leute wollte eine Seite machen die ohne tabellen auskommt, und nur mit div tags....
Aber irgendwie komme ich nicht mit divs zurecht, ich finde ja toll das man auf den ganzen cellspacing mist verzichten kann, aber div elemente zu positionieren...ist das echt so eine Qual..?
Will sie nicht absolut positionieren, sondern verschachteln.
Aber man kann dort gar nicht einstellen, zumindest bin ich noch zu blöd dazu, das die div tags nebeneinander stehen...so wie tabellen td-tags

Ich wäre über eure Hilfe echt mega erfreut...
Ahso das ist mal mein Laiencode:
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Unbenanntes Dokument</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body leftmargin="0" topmargin="0" marginheight="0" marginwidth="0">

<div style="width:1000px;height:109px;background-image:url(header.jpg);background-color:#003226">
	<div style="width:1000px;height:21px;background-color:#003366;">
	</div>
	<div style="width:1000px;height:71px;; ">
	</div>
	<div style="width:1000px;height:17px;background-color:#066777;">
	  <div align="right"><img src="ver_b.gif">&nbsp;	<img src="pro_b.gif"> </div>
	</div>
</div>
<div style="width:1000px;height:500px;background-color:#FFCC00;">
	<div style="width:200px;height:500px;background-color:#F44400;"> </div>


</div>

</body>
</html>
Und so solls mal aussehen...:


Lg
Jenny

Geändert von jenny79 (28.06.2006 um 18:36 Uhr)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 28.06.2006, 19:17
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.775
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Zitat:
Zitat von jenny79
das die div tags nebeneinander stehen
Dafür brauchst du die float-Eigenschaft.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 28.06.2006, 22:29
Neuer Benutzer
neuer user
 
Registriert seit: 23.06.2006
Beiträge: 10
Phaeilo befindet sich auf einem aufstrebenden Ast
Standard

Am Anfang ist das ne ziemliche Mühe, aber das ist es auf Lange Frist gesehen wert.
Mit Zitat antworten
  #4 (permalink)  
Alt 28.06.2006, 23:56
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 07.02.2006
Beiträge: 359
ONeill befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von Phaeilo
Am Anfang ist das ne ziemliche Mühe, aber das ist es auf Lange Frist gesehen wert.
Ich weiß nicht, ich finde Tabellengefrickel viel mühseeliger.
Mit Zitat antworten
  #5 (permalink)  
Alt 29.06.2006, 00:03
ventuklotz
Gast
 
Beiträge: n/a
Standard

floating heißt das Zauberwort - einmal eingearbeitet kann man damit im Handumdrehen ein Gerüst für eine Website erstellen.

Wenn Du absolut keine Erfahrung damit hast empfehle ich Dir zunächst ein Buch .. z.b. Bulletproof Webdesign erschienen im Addison Wesley Verlag.
Mit Zitat antworten
  #6 (permalink)  
Alt 29.06.2006, 01:54
Benutzerbild von Lloyd Larkin
Don Quijote
XHTMLforum-Mitglied
 
Registriert seit: 19.11.2005
Ort: Wien
Beiträge: 733
Lloyd Larkin befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von ventuklotz
Wenn Du absolut keine Erfahrung damit hast empfehle ich Dir zunächst ein Buch .. z.b. Bulletproof Webdesign erschienen im Addison Wesley Verlag.
Also falls wir das gleiche Bulletproof WebDesign meinen, dann sehe ich für einen Anfänger keine Vorteile in diesem Buch
Beschäftigt sich doch fast ausschliesslich mit speziellen Problemfällen.

Und Jenny, um die Übersicht in deinem Grundgerüst nicht zu verlieren, würde ich dir empfehlen, die CSS Eigenschaften in einer separaten Datei (oder zumindest im Head) auszulagern.
__________________
The only thing to do with good advice is pass it on. It is never any use to oneself. - Oscar Wilde -
#me { position: absolute; }

Geändert von Lloyd Larkin (29.06.2006 um 01:58 Uhr)
Mit Zitat antworten
  #7 (permalink)  
Alt 29.06.2006, 02:58
ventuklotz
Gast
 
Beiträge: n/a
Standard

Zitat:
Zitat von Lloyd Larkin
Also falls wir das gleiche Bulletproof WebDesign meinen, dann sehe ich für einen Anfänger keine Vorteile in diesem Buch
Beschäftigt sich doch fast ausschliesslich mit speziellen Problemfällen.

Und Jenny, um die Übersicht in deinem Grundgerüst nicht zu verlieren, würde ich dir empfehlen, die CSS Eigenschaften in einer separaten Datei (oder zumindest im Head) auszulagern.
Naja, mit Anfänger mein ich jetzt auch keinen kompletten Neuling in dem Bereich

Im Buch sind mind. 4 Kapitel zu floats, eins davon umfangreich mit einer bebilderten Anleitung für 2 bzw. 3-spaltige, variable Layouts etc.

Das Ganze gibts natürlich auch im Internet kostenlos... aber trotzem
Mit Zitat antworten
  #8 (permalink)  
Alt 29.06.2006, 03:28
Benutzerbild von Lloyd Larkin
Don Quijote
XHTMLforum-Mitglied
 
Registriert seit: 19.11.2005
Ort: Wien
Beiträge: 733
Lloyd Larkin befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von ventuklotz
Naja, mit Anfänger mein ich jetzt auch keinen kompletten Neuling in dem Bereich

Im Buch sind mind. 4 Kapitel zu floats, eins davon umfangreich mit einer bebilderten Anleitung für 2 bzw. 3-spaltige, variable Layouts etc.

Das Ganze gibts natürlich auch im Internet kostenlos... aber trotzem
... heute habe ich das Buch sicher schon drei mal erwähnt
Keine Frage, das Buch ist top, aber die Grundlagen eignet man sich leichter, billiger (und schneller) mit einem der unzähligen Tutorials zum floaten an
Und wenn ich nicht so müde wäre würde ich jetzt ein zwei Links heraussuchen.

Freundliche Grüsse,
Lloyd
__________________
The only thing to do with good advice is pass it on. It is never any use to oneself. - Oscar Wilde -
#me { position: absolute; }
Mit Zitat antworten
  #9 (permalink)  
Alt 29.06.2006, 10:06
Benutzerbild von jenny79
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 14.06.2006
Beiträge: 137
jenny79 befindet sich auf einem aufstrebenden Ast
Standard

Danke für die netten Antworten!
Also verstehe ich das richtig, mit float kann ich die div tags nebeneinander positionieren um sie wie oben im Bild nebeneinander stehen zu haben ohne das ich die tags verschachteln muss....
Und wie füge ich einen Absatz ein..

funktioniert iregendwie nicht so dolle...*grins*
Ich will ja eigentlich nicht das die div tags sich umfliessen, sondern nebeneinander stehen.

Lg
Jenny

Geändert von jenny79 (29.06.2006 um 10:25 Uhr)
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 29.06.2006, 10:37
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.848
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Zitat:
Zitat von jenny79

Also verstehe ich das richtig, mit float kann ich die div tags nebeneinander positionieren um sie wie oben im Bild nebeneinander stehen zu haben ohne das ich die tags verschachteln muss....
Genau. Sie können alle für sich stehen (d.h. im Quelltext untereinander und nicht verschachtelt), und wenn sie z.B. alle ein float: left; bekommen, stehen sie nebeneinander. Vorausgesetzt, die Bildschirmbreite ist ausreichend für die Summe der Breiten. Wichtig beim Floaten: Ausnahmslos immer mit width, d.h. Angabe der Breite.

Zitat:
Zitat von jenny79

Und wie füge ich einen Absatz ein..
Nimm am Besten 'n <p> Natürlich nur innerhalb des Textbereiches, bei Abständen zwischen <div>s dagegen per margin.

Zitat:
Zitat von jenny79

Ich will ja eigentlich nicht das die div tags sich umfliessen, sondern nebeneinander stehen.
Deine oben gezeigte Layout-Vorstellung ist nicht ohne. Fang erstmal etwas simpler an, und probiere etwas herum. Sollen die Spalten in Deiner Grafik denn feste Breiten haben, oder ist zumindest eine davon variabel?

Geändert von heiko_rs (29.06.2006 um 10:39 Uhr)
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Brauche Hilfe: Schwarzes Nichts Zwox CSS 10 19.11.2010 17:53
3 spalten Layout mit div und einem scroll Balken? svezi CSS 1 10.11.2010 12:02
Layout: beim Zusammschieben oberer Div fest carla99 CSS 8 28.02.2008 14:21
Div Layout Problem Haniball01 CSS 1 23.05.2006 13:36
Probleme mit Div Layout Laiwan CSS 4 29.08.2005 18:10


Alle Zeitangaben in WEZ +2. Es ist jetzt 16:01 Uhr.