tektorum.de - div container und float befehl

tektorum.de (https://www.tektorum.de/)

- Präsentation & Darstellung (https://www.tektorum.de/praesentation-darstellung/)

- - div container und float befehl (https://www.tektorum.de/praesentation-darstellung/3194-div-container-float-befehl.html)

div container und float befehl

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

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

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)

http://www.arch.tu-dresden.de/Fachschaft/prob.jpg

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

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.

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

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

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

http://www.arch.tu-dresden.de/Fachschaft/skizze.jpg

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 :p

@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

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

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

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

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

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

@ Florian

so nun endlich kann ich was präsentieren. Die Struktur der Seite steht und ich glaube ich bin die letzten Tage was css betrifft ein wenig schlauer geworden und deine Buchempfehlung war daran nicht ganz unbeteiligt. (Danke) Jedenfalls muß die Seite noch mit mehr Inhalt gefüllt werden, aber vielleicht kannst du ja trotzdem mal drüber schauen damit ich ein feedback habe. Danke! Hier der Link (läuft immer noch als "test"): http://www.arch.tu-dresden.de/Fachsc...st/default.htm

gleich im Anschluß noch die Frage: Kann ich das tektorum verlinken?

Ciao und schönen Abend noch.
Gordon

ps.: weißt du wie ich den häßlichen Rahmen bei dem "link"-Bild auf der ersten Seite wegbekomme?
pss.: die stylesheetdatei kannst du unter http://www.arch.tu-dresden.de/Fachsc...age/styles.css finden

Zitat:

Originally posted by flash
gleich im Anschluß noch die Frage: Kann ich das tektorum verlinken?

Ja, klar.
Unter http://www.tektorum.de/info/service/ gibt's auch noch mehr Infos, falls mehr als ein Link gesetzt werden soll.

Zitat:

ps.: weißt du wie ich den häßlichen Rahmen bei dem "link"-Bild auf der ersten Seite wegbekomme?

Welchen Rahmen?

... der Rahmen ist bei dem Firefox und dem IExporer um das Bild auf der allerersten Seite (default.htm) von der man auf die eigentlich Homepage kommt. Er ist um das ganze Bild und scheint die Farben der Links anzunehmen, denn das Bild selber ist ja auch ein link. Ich habe versucht über die Eigenschaften für a:link {border:none} das zuverhindern, aber es hat nicht geklappt. Was meinst du sonst so .. kann man die Sache so angehen wie ich es gemacht habe (absolut positionierte div-container mit relativ positioniertem Inhalt ...)

Im CSS solltest Du einfach noch eine allgemeine Formatierung für Bilder vornehmen:

[PHP]img {
border: 0px;
}[/PHP]