div container und float befehl

flash · Registriert seit: 26.06.2006

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

Florian · Registriert seit: 07.06.2002

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

flash · Registriert seit: 26.06.2006

@ 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

Florian · Registriert seit: 07.06.2002

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 · Registriert seit: 07.06.2002

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

flash · Registriert seit: 26.06.2006

@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]

flash · Registriert seit: 26.06.2006

...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

Florian · Registriert seit: 07.06.2002

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

flash · Registriert seit: 26.06.2006

@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

Florian · Registriert seit: 07.06.2002

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

flash · Registriert seit: 26.06.2006

@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

flash · Registriert seit: 26.06.2006

... 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?

Florian · Registriert seit: 07.06.2002

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

flash · Registriert seit: 26.06.2006

@ 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

Florian · Registriert seit: 07.06.2002

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

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

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.