Registrierter Nutzer
 
Benutzerbild von flash
 
Registriert seit: 26.06.2006
Beiträge: 338
flash: Offline

Ort: Leipzig

flash will become famous soon enough

Beitrag
Datum: 22.11.2006
Uhrzeit: 19:22
ID: 19930



div container und float befehl

#1 (Permalink)
Social Bookmarks:

Hallo liebes Forum,

ich bin gerade dabei ein kleine Homepage mit html und css zu erstellen und bis jetzt konnte ich meine Probleme ganz gut über Selfhtml lösen. Allerdings tuen sich gerade einige Probleme auf bezüglich der div-container und dem float befehl. Ich habe mehrere div elemente verschachtelt um damit link-ebene sowie inhalt-ebene zu strukturieren und sehe gerade nicht mehr durch welches sich nach welchem richtet. Könnt ihr mir vielleicht noch mal erklären wie prinzipiell die verschachtelung funktioniert und was genau ein floaten eines div elementes innerhalb eines anderen bewirkt (wirkung auf inline und block elemente??). Vielen Dank für eure Hilfe.

Ciao Gordon

Mit Zitat antworten
Anzeige

Diese Anzeige wird registrierten Mitgliedern nicht angezeigt.
Du kannst Dich hier kostenlos bei tektorum.de registrieren!

Informationen zur Anzeigenschaltung bei tektorum.de finden Sie hier.




tektorumAdmin
 
Benutzerbild von Florian
 
Registriert seit: 06.06.2002
Beiträge: 4.425
Florian: Offline

Ort: Berlin
Hochschule/AG: Illenberger & Lilja GbR / Anderhalten Architekten

Florian is a glorious beacon of light Florian is a glorious beacon of light Florian is a glorious beacon of light Florian is a glorious beacon of light Florian is a glorious beacon of light

Beitrag
Datum: 22.11.2006
Uhrzeit: 20:03
ID: 19932



Social Bookmarks:

ein float bedeutet, wie die Übersetzung aus dem Englischen schon vermuten lässt, ein schweben des Objektes über den anderen.
floats müssen aber in div-containern zuerst genannt werden:

[PHP]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Titel</title>


<style type="text/css" media="screen">

.mitte{
text-align: center;
}

.links{
float: left;
text-align:left;
}

.rechts{
float:right;
text-align:right;
}
</style>
</head>


<body>

<div class="mitte">

<span class="links">linker text</span>
<span class="rechts">rechter text</span>

Text in der Mitte

</div>
</body></html>[/PHP]

Vielleicht würde Dir dieses Buch helfen:Cascading Stylesheets
__________________
Florian Illenberger

tektorum.de - Architektur-Diskussionsforum

archinoah.de Architektur Portal - Forum für Architektur:

Mit Zitat antworten
Registrierter Nutzer
 
Benutzerbild von flash
 
Registriert seit: 26.06.2006
Beiträge: 338
flash: Offline

Ort: Leipzig

flash will become famous soon enough

Beitrag
Datum: 22.11.2006
Uhrzeit: 23:54
ID: 19948



Social Bookmarks:

@ Florian

danke für deine schnelle antwort.

dein beispiel kann ich gut nachvollziehen. du hast quasi in das block element "div" zwei inline elemente "span" eingefügt und über die klassen gesagt was sie tun sollen. prinzipiell habe ich meinen aufbau so gemacht (is echt nur schema um dir den ganzen source code zuersparen)




... die ganzen divs haben natürlich alle "id" tags die ihre eigenschaften definieren mir ist nur nich so ganz klar wie genau die sich jetzt überlagern oder nicht weshalb ich gern nur prinzipiell wissen würde wie dass mit padding und margin beim floaten innerhalb der verschachtelung ist

vielen dank für alle antworten

ciao gordon

Mit Zitat antworten
tektorumAdmin
 
Benutzerbild von Florian
 
Registriert seit: 06.06.2002
Beiträge: 4.425
Florian: Offline

Ort: Berlin
Hochschule/AG: Illenberger & Lilja GbR / Anderhalten Architekten

Florian is a glorious beacon of light Florian is a glorious beacon of light Florian is a glorious beacon of light Florian is a glorious beacon of light Florian is a glorious beacon of light

Beitrag
Datum: 23.11.2006
Uhrzeit: 09:55
ID: 19953



Social Bookmarks:

Anhand dessen, was Du hier als Bild abdruckst, kann dir niemand helfen, denn Du mußt schon die div-Eigenschaften (also class und id...) mitliefern und vorallem die zugehörigen Definitionen (also die Styles) mitliefern

Nutze die PHP und Tag schliessen Buttons um Quelltext hier zu veröffentlichen, dann müssen wir nicht alles abtippen.
__________________
Florian Illenberger

tektorum.de - Architektur-Diskussionsforum

archinoah.de Architektur Portal - Forum für Architektur:

Mit Zitat antworten
tektorumAdmin
 
Benutzerbild von Florian
 
Registriert seit: 06.06.2002
Beiträge: 4.425
Florian: Offline

Ort: Berlin
Hochschule/AG: Illenberger & Lilja GbR / Anderhalten Architekten

Florian is a glorious beacon of light Florian is a glorious beacon of light Florian is a glorious beacon of light Florian is a glorious beacon of light Florian is a glorious beacon of light

Beitrag
Datum: 23.11.2006
Uhrzeit: 09:57
ID: 19954



Social Bookmarks:

P.S. Und poste ne Skizze dessen, was am Ende rauskommen sollte
__________________
Florian Illenberger

tektorum.de - Architektur-Diskussionsforum

archinoah.de Architektur Portal - Forum für Architektur:

Mit Zitat antworten
Registrierter Nutzer
 
Benutzerbild von flash
 
Registriert seit: 26.06.2006
Beiträge: 338
flash: Offline

Ort: Leipzig

flash will become famous soon enough

Beitrag
Datum: 23.11.2006
Uhrzeit: 10:12
ID: 19956



Social Bookmarks:

@Florian

naja du hast natürlich recht ich werde den Quelltext mal posten. allerdings is mir gestern nacht nochmal klar geworden, dass ich mich noch mal intensiver mit dem box modell beschäftigen muß. gestern bin ich auf eine seite gestoßen auf der es sehr ausführliche informationen dazu gibt, die ich jetzt aber noch nicht lesen konnte (http://www.thestyleworks.de/index.shtml).
Übrigens das Buch, welches du mir empfohlen hast, hat jetzt schon eine zweite Auflage (2006).

hier jetzt erma der quelltext (.. bitte denkt daran .. ich bin kein profi)

css-Datei:

[PHP]
body {
color: black; background-color: white;
font-size: 100.01%;
font-family: Arial;
}

div#Seite {
text-align: left;
margin: 1em auto;
width: 900px;
height: auto;
padding: 0;
background-color: white;
border: 1px solid;
}



div#Rahmen {

width: auto;
padding: 0em 2em 1em 2em;
margin: 1em 0 0 0;
border: none;
background-color: white;
}


ul#Navigation {
width: 900px;
float: left;
position: relative; top: -1em;
font-size: 0.9em;
font-weigth: bold;
text-align: center;
margin: 0 0 2em 0;
padding: 0 0 0 0;

}

ul#Navigation li {
list-style: none;
float: left;
width: auto;
position: relative;
margin: 0; padding: 0 1em 0 0;
background-color: silver;
}

div#clear {
clear: left;
}

ul#NavigationZwei {
text-align: center;
margin: 2em 0 0 0em; padding: 0;
font-size: 0.8em;
font-style: italic;
float: none;
}

ul#NavigationZwei li {

list-style: none;
float: left;
width: auto;
position: relative;
margin: 0em; padding: 0 1em 0 0;
background-color: grey;
}








div#Inhalt {

font-size: 0.9em;
float: none;
margin: 2em 2em 2em 2em;
min-height: 150px;
background-color: white;
}


div#Kontakt {

float: none;
margin: 0;
padding: 0.5em 3em 0.5em 0.5em;
width: auto;
font-size: 0.8em;
background-color: white;
border-top: 1px solid;
}


A {
font-weight: normal;
}
A:link {
color: #000000;
text-decoration: none;
}
A:visited {
color: #000000;
text-decoration: none;
}
A:hover {
color: #ff0000;
text-decoration: none;
}
[/PHP]



und hier von von fsr.html (sieht genauso aus wie alle anderen seiten der page bis auf das sie eine zweite navigationsebene hat)


[PHP]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>

<link rel="stylesheet" type="text/css" href="styles.css">

<title> Fachschaft Architektur</title>

<meta name="description" content="">
<meta name="author" content="Gordon Tannhäuser">
<meta name="keywords" content="">
<meta name="generator" content="(X)HTML-Format">
</head>

<body>
<div id="Seite">

<img src="./Bilder/Header03.gif" alt="Header" border="0" width="900px" height="300px"/>

<div id="Rahmen">

<ul id="Navigation">
<li><a href="default.htm">Aktuelles </a></li>
<li><a href="fsr.htm">FSR </a></li>
<li><a href="arbeitsraeume.htm">Arbeitsräume </a></li>
<li><a href="materialverkauf.htm">Materialverkauf </a></li>
<li><a href="literatur.htm">Literatur </a></li>
<li><a href="programme.htm">Programme </a></li>
<li><a href="fotogalerie.htm">Fotogalerie </a></li>
<li><a href="archiv.htm">Archiv </a></li>
<li><a href="links.htm">Links </a></li>
<li><a href="impressum.htm">Impressum </a></li>
</ul>


<ul id="NavigationZwei">
<li><a href="team.htm">Team</a></li>
<li><a href="gremien.htm">Gremien</a></li>
<li><a href="wahlen.htm">Wahlen</a></li>
</ul>




</div>




<div id="Inhalt">
Hier kommt Inhalt .................................................. .................................................. ....
.................................................. .................................................. ....
</div>


<div id="Kontakt">

dieses div ist als Footer gedacht

</div>




</div>

</body>
</html>
[/PHP]

Mit Zitat antworten
Registrierter Nutzer
 
Benutzerbild von flash
 
Registriert seit: 26.06.2006
Beiträge: 338
flash: Offline

Ort: Leipzig

flash will become famous soon enough

Beitrag
Datum: 23.11.2006
Uhrzeit: 10:23
ID: 19957



Social Bookmarks:

...hier noch die Skizze .. oder besser gesagt wie es zur zeit auf meinem Rechner aussieht
man kann deutlich sehen das die horitontalen navigations-divs nicht so floaten wie ich gern möchte (sie sind noch farblich hinterlegt) ... die zweite ebene springt auch manchmal direkt hinter die erste ..bei anderen seiten ... und der inhalt-div floatet direkt an den nav-divs

naja schaut mal ob ihr was damit anfangen könnt

.. ich freu mich auf antworten .. danke .. ciao Gordon


Mit Zitat antworten
tektorumAdmin
 
Benutzerbild von Florian
 
Registriert seit: 06.06.2002
Beiträge: 4.425
Florian: Offline

Ort: Berlin
Hochschule/AG: Illenberger & Lilja GbR / Anderhalten Architekten

Florian is a glorious beacon of light Florian is a glorious beacon of light Florian is a glorious beacon of light Florian is a glorious beacon of light Florian is a glorious beacon of light

Beitrag
Datum: 23.11.2006
Uhrzeit: 11:43
ID: 19962



Social Bookmarks:

Also wenn ich das richtig verstehe, willst Du eine übergeordnete Navigationsleiste, aus der sich dann beim herüberfahren mit der Maus Subkategorien öffnen?
Da weiß ich garnicht, ob man das sauber ohne JS hinbekommt...


Also ich sehe schon einige Fehler oder mögliche Fehler und überflüssiges.

1) Wenn Du #NavigationZwei für alle Submenüs nutzt hast du ein Problem, da IDs nur einmalig vergeben werden können. Es macht auch gar keinen Sinn diesen Teil als ID zu definieren.

2) div#Rahmen - ich möchte nicht aussließen, dass es sowas gibt. Ich kenne das nicht. Schreib doch bei den Definitionen nur
#Rahmen (für IDs)
oder
.Irgendwas (für DIVs und SPANS allgemein)

3) ul#NavigationZwei - Was ist das? Sind damit die Listen im NavigationZwei Bereich gemeint? Dann schreib das:
#NavigationZwei ul {}

4) ul#NavigationZwei li - Ich glaube das geht garnicht, da li nurnoch die Auflistung ist und damit alle Infos schon in z.B. ul enthalten sind.

5) [PHP]<ul id="NavigationZwei">

<li><a href="team.htm">Team</a></li>

<li><a href="gremien.htm">Gremien</a></li>

<li><a href="wahlen.htm">Wahlen</a></li>

</ul>[/PHP]

Würde ich so nicht machen, auch wenn man das kann. Mit CSS versucht man Content und Gestaltung voneinander zu trennen, daher wäre es Sinnvoller einen Bereich zu definieren und darin unabhängig den Inhalt:

[PHP]
<div id="NavigationZwei">
<ul>

<li><a href="team.htm">Team</a></li>

<li><a href="gremien.htm">Gremien</a></li>

<li><a href="wahlen.htm">Wahlen</a></li>

</ul>
</div>
[/PHP]

6) font-size: 100.01%; - Gibts das? Fonts mit Prozenten?

7) min-height: 150px; - funktioniert meines wissen nicht unter IE

8) Du schreibst width: 900px; und padding: 0em 2em 1em 2em;. Ich würde versuchen bei einer Einheit zu bleiben. Mischen macht immer irgendwann Probleme!

9) height: auto; - Spar dir Definitionen die unnötig sind, am Ende widersprechen die anderen, die Du gemacht hast...



Zitat:
bitte denkt daran .. ich bin kein profi
Ich leider auch nicht. In solche Dinge arbeitet man sich wenn's nötig ist rein, aber nach 6 Monaten hat man auch viel wieder vergessen...

Korrigiere mal die Dinge die ich hier schonmal erwähnt habe und dann guckt man mal... Die Wege des CSS sind manchmnal unergründlich
__________________
Florian Illenberger

tektorum.de - Architektur-Diskussionsforum

archinoah.de Architektur Portal - Forum für Architektur:

Mit Zitat antworten
Registrierter Nutzer
 
Benutzerbild von flash
 
Registriert seit: 26.06.2006
Beiträge: 338
flash: Offline

Ort: Leipzig

flash will become famous soon enough

Beitrag
Datum: 23.11.2006
Uhrzeit: 11:54
ID: 19963



Social Bookmarks:

@Florian

viele ratschläge die ich erstmal verarbeiten muß! Danke!
mein problem ist es das es unheimlich schwer ist als anfänger alle kategorisch durchzugehen weil man ja die struktur nochnicht so richtig verstanden hat und da schleichen sich dan so einige ungereimtheiten ein

wegen dem submenü: das ist nicht als sich-herausfahrendes menü geplant sondern es steht dann eben auf den entsprechenden seiten immer da, soll heißen:
wenn man auf "fsr" geht gibt es "Team", "Gremien" und "Wahlen" zur Auswahl und diese drei Unterpunkte bleiben dann auf den Seiten "Team", "Gremien" und "Wahlen" ebenfalls erhalten ... also kein dynamisches menü sondern ganz einfach .. das submenü soll einfach unter dem hauptmenü stehenbleiben

Mit Zitat antworten
tektorumAdmin
 
Benutzerbild von Florian
 
Registriert seit: 06.06.2002
Beiträge: 4.425
Florian: Offline

Ort: Berlin
Hochschule/AG: Illenberger & Lilja GbR / Anderhalten Architekten

Florian is a glorious beacon of light Florian is a glorious beacon of light Florian is a glorious beacon of light Florian is a glorious beacon of light Florian is a glorious beacon of light

Beitrag
Datum: 23.11.2006
Uhrzeit: 12:10
ID: 19964



Social Bookmarks:

Wozu überhaupt das "float"en?

Ich würde hier eigentlich gänzlich auf IDs verzichten oder nur drei-vier nutzen:

1a. Kopf (Das Bild)
1b. Navigation
2. Content (Inhalt der Seite)
3. Foot
__________________
Florian Illenberger

tektorum.de - Architektur-Diskussionsforum

archinoah.de Architektur Portal - Forum für Architektur:

Mit Zitat antworten
Registrierter Nutzer
 
Benutzerbild von flash
 
Registriert seit: 26.06.2006
Beiträge: 338
flash: Offline

Ort: Leipzig

flash will become famous soon enough

Beitrag
Datum: 23.11.2006
Uhrzeit: 14:04
ID: 19968



Social Bookmarks:

@Florian ... ich habe noch mal ein wenig entrümpelt in der struktur und jetzt klappt alles einigermaßen so wie es soll, deine tipps sind noch nicht berücksichtigt aber wenn du möchtest kannst du dir ja mal die jetztige css datei und die seite anschauen ... wahr scheinlich habe ich es echt zu umständlich gemacht und man kann auf einfacheren weg zum ziel kommen
die seite ist:

http://www.arch.tu-dresden.de/Fachsc...st/default.htm

die css datei unter:

http://www.arch.tu-dresden.de/Fachsc...est/styles.css

Mit Zitat antworten
Registrierter Nutzer
 
Benutzerbild von flash
 
Registriert seit: 26.06.2006
Beiträge: 338
flash: Offline

Ort: Leipzig

flash will become famous soon enough

Beitrag
Datum: 23.11.2006
Uhrzeit: 17:08
ID: 19984



Social Bookmarks:

... problematisch ist die ganze sache noch im IE. dort ist der "über" div container größer als er soll ... ist das der pixel bug des IE beim box modell?

...meinst du das ich die ganze sache generell falsch angegangen bin den css oder kann man es so machen?

Mit Zitat antworten
tektorumAdmin
 
Benutzerbild von Florian
 
Registriert seit: 06.06.2002
Beiträge: 4.425
Florian: Offline

Ort: Berlin
Hochschule/AG: Illenberger & Lilja GbR / Anderhalten Architekten

Florian is a glorious beacon of light Florian is a glorious beacon of light Florian is a glorious beacon of light Florian is a glorious beacon of light Florian is a glorious beacon of light

Beitrag
Datum: 23.11.2006
Uhrzeit: 17:17
ID: 19987



Social Bookmarks:

Zitat:
Originally posted by flash
... problematisch ist die ganze sache noch im IE. dort ist der "über" div container größer als er soll ... ist das der pixel bug des IE beim box modell?
Jupp, das dürfte er sein. Ich glaube beim IE 7 ist das korrigiert - oder doch nicht? :P
__________________
Florian Illenberger

tektorum.de - Architektur-Diskussionsforum

archinoah.de Architektur Portal - Forum für Architektur:

Mit Zitat antworten
Registrierter Nutzer
 
Benutzerbild von flash
 
Registriert seit: 26.06.2006
Beiträge: 338
flash: Offline

Ort: Leipzig

flash will become famous soon enough

Beitrag
Datum: 27.11.2006
Uhrzeit: 23:13
ID: 20054



Social Bookmarks:

@ Florian

Ich habe mir vor zwei Tagen das Buch gekauft, welches du mir empfohlen hast und jetzt fange ich die ganze Sache noch mal ganz strukturiert von neuem an. Wenn es dich interessiert melde ich mich wenn ich fertig bin und vielleicht kannst du ja dann noch mal einen Blick drauf werfen.

Ciao Gordon

Mit Zitat antworten
tektorumAdmin
 
Benutzerbild von Florian
 
Registriert seit: 06.06.2002
Beiträge: 4.425
Florian: Offline

Ort: Berlin
Hochschule/AG: Illenberger & Lilja GbR / Anderhalten Architekten

Florian is a glorious beacon of light Florian is a glorious beacon of light Florian is a glorious beacon of light Florian is a glorious beacon of light Florian is a glorious beacon of light

Beitrag
Datum: 28.11.2006
Uhrzeit: 10:32
ID: 20062



Social Bookmarks:

Das hört sich nach einem sinnvollen Entschluss an.
Du kannst hier ja nochmal posten, wenn die Seite fertig ist.
__________________
Florian Illenberger

tektorum.de - Architektur-Diskussionsforum

archinoah.de Architektur Portal - Forum für Architektur:

Mit Zitat antworten
Anzeige

Diese Anzeige wird registrierten Mitgliedern nicht angezeigt.
Du kannst Dich hier kostenlos bei tektorum.de registrieren!

Informationen zur Anzeigenschaltung bei tektorum.de finden Sie hier.




Antwort
Ähnliche Themen
Thema Autor Architektur-Themenbereiche Antworten Letzter Beitrag
AutoCAD Befehl für Abwicklungen Florian Präsentation & Darstellung 7 01.07.2008 09:45
Befehl für mehrfach Drehkopie in AutoCAD (ADT2007) Florian Präsentation & Darstellung 8 25.06.2007 17:00
Holzbau - "Container" noone Konstruktion & Technik 4 24.07.2006 21:15
Container-architektur club_of_rome Entwurf & Theorie 8 07.02.2005 09:31
 

tektorum.de ist ein Projekt von archinoah.de - Architekturportal und Forum für Architektur



Alle Zeitangaben in WEZ +2. Es ist jetzt 07:43 Uhr.
Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2020, Jelsoft Enterprises Ltd. (Deutsch)
SEO by vBSEO
Copyright ©2002 - 2018 tektorum.de®