zurück zur Startseite
  


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

Antwort
 
LinkBack Themen-Optionen Ansicht
  #11 (permalink)  
Alt 29.06.2006, 10:37
ventuklotz
Gast
 
Beiträge: n/a
Standard

Zitat:
Zitat von jenny79
Danke für die netten Antworten!

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.

Vielleicht sollltest Du Dir in der Tat erstmal ein paar Tutorials dazu durchlesen Sollte mit google nicht schwer zu finden sein.
Hab leider keine Zeit Dir das jetzt hier näher zu erklären.
Du kannst ja dann spezielle Fragen stellen ...

@Lloyd Larkin)

Ja, vielleicht hast Du Recht. Online Tut. sind vielleicht erstmal die bessere Wahl hier an der Stelle...

Geändert von ventuklotz (29.06.2006 um 10:41 Uhr)
Mit Zitat antworten
Sponsored Links
  #12 (permalink)  
Alt 29.06.2006, 11:43
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

Hallo, danke für eure Hilfe.
Ich habe jetzt mal das Layout mit der Float Eigenschaft gemacht, und auch die css erstmal in den Headbereich geschrieben.
Es funktioniert eigentlich sehr gut, aber ist dieser Code jetzt valide, und wirklich optimal, wäre toll wenn jemand mal kurz drüber schaut..
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">

<style>
.outer_site{
background:darkgray;
width:1000px;
background-color:#003226;
float:left;
}
.header_box{
background:darkgray;
width:1000px;
height:109px;
background-image:url(header.jpg);
background-color:#003226;
float:left;
}

.box1, .box2, .box3, .box4, .box5, .menu_box, .content_box, .right_box, .banner_box, .footer_box{
padding:0px;
border:0px solid black;
float:left;
}

.box1{background:gainsboro;
width:550px;
height:20px;
}

.box2{background:silver;
width:450px;
}

.box3{background:darkgray;
width:1000px;
height:69px;
}

.box4{background:gainsboro;
width:450px;
height:20px;
}

.box5{background:silver;
width:550px;
}

.menu_box{background:red;
width:150px;
height:450px;
}
.content_box{
background:blue;
width:470px;
height:450px;
}
.right_box{
background:red;
width:186px;
height:450px;
}
.banner_box{
background:yellow;
width:194px;
height:450px;
}
.footer_box{
background:blue;
width:1000px;
}
</style>

</head>

<body leftmargin="0" topmargin="0" marginheight="0" marginwidth="0">
<div class="outer_site">
<div class="header_box">
	
	<div class="box1">
	    &nbsp;	  </div>
	<div class="box2">
	menu2</div>
	<div class="box3">
	header</div>
	<div class="box4">
	&nbsp;	</div>
	<div class="box5">
	 <div align="left"><img src="ver_b.gif">&nbsp;	<img src="pro_b.gif"> </div>
	 </div>
	
</div>
	
	<div class="menu_box">
	    menu  </div>
		<div class="content_box">
	     content </div>
		<div class="right_box">
	    module  </div>
		<div class="banner_box">
	    banner  </div>
		<div id="footer_box">  &nbsp;	footer</div>
		
		
		
		</div>
		

</body>
</html>
Lg
Jenny
PS:
wenn ich die Höhenangaben in der content,menu, banner und module spalte weglasse, wird dann die Höhe nach Inhalt generiert, das wäre nähmlich tollo.

Geändert von jenny79 (29.06.2006 um 11:45 Uhr)
Mit Zitat antworten
Sponsored Links
  #13 (permalink)  
Alt 29.06.2006, 12:07
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

Code:
<body leftmargin="0" topmargin="0" marginheight="0" marginwidth="0">
Das solltest Du sofort rauswerfen und nur <body> stehenlassen. Die eleganteste Methode, diese (und alle übrigen) Abstände auf Null zu setzen, ist folgende:

Code:
* {
margin: 0;
padding: 0; }
Das kommt an den Anfang der CSS und setzt wirklich alles auf Null, und falls irgendwo Abstände gewünscht sind, werden diese später individuell definiert.

Außerdem sieht es so aus, als könntest Du ein paar mehr IDs vergeben (statt Klassen).
Mit Zitat antworten
  #14 (permalink)  
Alt 29.06.2006, 12:24
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

Super Danke!
Warum eigentlich id anstatt Klassen?
Wenn ich die Höhenangaben in der content,menu, banner und module spalte weglasse, wird dann die Höhe nach Inhalt generiert?

Lg
Jenny

Geändert von jenny79 (29.06.2006 um 12:29 Uhr)
Mit Zitat antworten
  #15 (permalink)  
Alt 29.06.2006, 12:38
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

IDs sollte man immer verwenden, wenn ein Element nur einmal auf einer Seite vorkommt, d.h. Header, Footer, Navigation und die einzelnen Spalten etc., oder z.B. auch ein spezielles Formular.

Sie sind auch praktisch, da sie u.a. als Ziel für Sprunglinks dienen können; z.B. kann man das ganz oben stehende <div> für einen Link "zum Seitenanfang" nutzen (per <a href="#header">).

Geändert von heiko_rs (29.06.2006 um 12:41 Uhr)
Mit Zitat antworten
  #16 (permalink)  
Alt 29.06.2006, 12:45
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

Ah ok...
und wie ist das mit den Höhenangaben...
Zitat:
Wenn ich die Höhenangaben in der content,menu, banner und module spalte weglasse, wird dann die Höhe nach Inhalt generiert?
Lg
jenny
Mit Zitat antworten
  #17 (permalink)  
Alt 29.06.2006, 12:54
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

Genau. Und wenn sie eine Mindesthöhe haben sollen, geht dies per min-height. Diese kennt der IE bis inkl. 6 zwar nicht, aber da er height genauso behandelt wie min-height, bekommt er erstere zugewiesen, und zwar am Einfachsten auf folgende Weise:

Code:
* html #element {
height: 300px; }
Dann lesen es nur die IEs bis inkl. 6.
Mit Zitat antworten
  #18 (permalink)  
Alt 29.06.2006, 13:13
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

rewtw43we4rtw34t
wer
t
wer
twe

Geändert von jenny79 (16.10.2006 um 20:11 Uhr)
Mit Zitat antworten
  #19 (permalink)  
Alt 06.07.2006, 16:08
Benutzer
neuer user
 
Registriert seit: 23.02.2005
Beiträge: 36
Klaus Styler befindet sich auf einem aufstrebenden Ast
Standard

Der Umstieg auf tabellenloses Layout fordert Umdenken. Am Anfang habe ich auch versucht die Div's wie Tabellenzellen zu verwenden. Das ist Quatsch, aber aller Anfang ist schwer. Such mal nach Seiten, die ähnlich aufgebaut sind wie deine und auf ein Tabellen-Layout verzichten. Studier den Quelltext. So habe ich das Thema erst begriffen.
Mit Zitat antworten
Sponsored Links
  #20 (permalink)  
Alt 06.07.2006, 16:25
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

Aber in einer gewissen weise kommt man von dem Denken nicht weg wenn der Aufbau der Seite nun mal so aussehen soll!
Von daher vielleicht schon ein wenig umdenken aber es bleibt doch alles in einem nahem Rahmen.
Lg
Jenny
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 00:01 Uhr.