div Container – Ich bin zu blöd

Beitrag von **CubeMaster** » 13.07.2011, 17:23

Hallo Freunde,

ich bin gerade dabei ein Layout komplett mit divs statt Tabellen aufzuziehen. Anfänglich liefs gut, doch jetzt häng ich und hab auch keine Lösung bei diversen Tutorial-Seiten gefunden

Es geht um 2 einfache Dinge:
1. Wenn ich in der Navi (.navi_left) und im Contenbereich (.content_main) etwas schreibe und umbreche, dann soll sich die Größe des umliegenden DIV-Containers (#content) vertikal mit vergrößern. Das tut er aber bis jetzt nicht, sonder hängt drüber.

2. Die vertikale Größe der Layer soll immer 100% betragen, sodass der Footer DIV (#footer) am unteren Rand des Browsers hängt.

Es wäre echt super, wenn mir einer von euch auf die Sprünge helfen könnte, denn ich verzweifle hier noch

Code: Alles auswählen

<body>
  <div id="root">
    <div id="head">
    </div>
    <div id="content">
      <div class="navi_left">
        Navigation<br>
        test<br>
        test<br>
        
        test<br>
      </div>
      <div class="content_main">
        Inhalt
      </div>
    </div>
    <div id="footer">
    </div>
  </div>
</body>

Code: Alles auswählen

body &#123;
	font-family&#58; Verdana, Arial, Helvetica, sans-serif;
	font-size&#58;11px;
	text-align&#58;left;
	color&#58; #555555;
	height&#58;100%;
	margin&#58; 0px auto;
	padding&#58;0px;
	&#125;

#root &#123;
    width&#58;900px;
    min-height&#58; 100%;
    height&#58; 100%;
    margin&#58; 0px auto;
    text-align&#58; left;
    color&#58; #666666;
    background-color&#58; #ffffff;
    &#125;
	
#head &#123;
    height&#58; 100px;
    border&#58; 1px solid #cccccc; border-top&#58; 0px;
    margin&#58; 0px 0px 20px 0px;
    &#125;

#content &#123;
    min-height&#58; 100%;
    height&#58;100%;   
    border&#58; 1px solid #cccccc;
    margin&#58; 0px;
    &#125;
	
.navi_left &#123;
    width&#58; 170px;
    min-height&#58; 100%;
    height&#58;100%;
    float&#58; left;
    border&#58; 0px solid #ffffff;
    background-color&#58; #f8f8f8;
    padding&#58; 30px 0px 0px 20px;
    &#125;

.content_main &#123;
    width&#58; 688px;
    min-height&#58; 100%;
    height&#58; 100%;
    float&#58; right;
    border&#58; 0px;
    padding&#58; 30px 0px 0px 20px;
    &#125;
	
#footer &#123;
    border&#58; 0px solid #cccccc; border-bottom&#58; 0px;
    background-color&#58; #333333;
    height&#58; 100px;
    margin&#58; 0px;
    &#125;

[/code]

von **Anzeige von ABAKUS** »

Content Erstellung von ABAKUS Internet Marketing
Ihre Vorteile:

einzigartige Texte
suchmaschinenoptimierte Inhalte
eine sinnvolle Content-Strategie
Beratung und Umsetzung

Jetzt anfragen: 0511 / 300325-0

Beitrag von **profo** » 13.07.2011, 18:02

CubeMaster hat geschrieben:1. Wenn ich in der Navi (.navi_left) und im Contenbereich (.content_main) etwas schreibe und umbreche, dann soll sich die Größe des umliegenden DIV-Containers (#content) vertikal mit vergrößern. Das tut er aber bis jetzt nicht, sonder hängt drüber.

Das ist am Ende nicht der #content, der drüber hängt, sondern der #footer. Füg in Deinen #footer ein "clear:both" ein, dann stimmt das erstmal.

CubeMaster hat geschrieben:2. Die vertikale Größe der Layer soll immer 100% betragen, sodass der Footer DIV (#footer) am unteren Rand des Browsers hängt.

Ich glaube, das geht nicht per CSS, da brauchst Du wohl JavaScript - bin da aber kein Experte.

Beitrag von **mano_negra** » 13.07.2011, 18:14

mit footer clear:both gibts aber noch immer einen fehler.
ich schliesse immer mit einem div ab das clear:both, height:0px, etc. hat - siehe code. dann passt das auch mit #content

probier das:

Code: Alles auswählen

body &#123;
   font-family&#58; Verdana, Arial, Helvetica, sans-serif;
   font-size&#58;11px;
   text-align&#58;left;
   color&#58; #555555;
   margin&#58; 0px;
   padding&#58;0px;
   &#125;

#root &#123;
    width&#58;900px;
    margin&#58; 0px auto;
    text-align&#58; left;
    color&#58; #666666;
    background-color&#58; #ffffff;
    &#125;
   
#head &#123;
    height&#58; 100px;
    border&#58; 1px solid #cccccc; border-top&#58; 0px;
    margin&#58; 0px 0px 20px 0px;
    &#125;

#content &#123;
    border&#58; 1px solid #cccccc;
    margin&#58; 0px;
    &#125;
   
.navi_left &#123;
    width&#58; 170px;
    float&#58; left;
    background-color&#58; #f8f8f8;
    padding&#58; 30px 0px 0px 20px;
    &#125;

.content_main &#123;
    width&#58; 688px;
    float&#58; right;
    padding&#58; 30px 0px 0px 20px;
    &#125;
.clear0px&#123;
clear&#58;both; height&#58;0px; font-size&#58;0px; line-height&#58;0px
&#125;
#footer &#123;
width&#58;900px;
position&#58;fixed;
bottom&#58;0px;
background-color&#58; #333333;
height&#58; 100px;
&#125;

und füge das vor dem abschliessenden /div - tag für content ein:

Code: Alles auswählen

<div class="clear0px"></div>

in dem beispiel hängt der footer immer am unteren rand, auch wenndie seite länger ist und du scrollen musst. weiss nicht ob du das wolltest.
ansonsten müsstest dudas mit javascript berechnen.

von **Anzeige von ABAKUS** »

SEO Consulting bei ABAKUS Internet Marketing
Erfahrung seit 2002

persönliche Betreuung
individuelle Beratung
kompetente Umsetzung

Jetzt anfragen: 0511 / 300325-0.

Beitrag von **CubeMaster** » 13.07.2011, 18:36

mano_negra hat geschrieben:mit footer clear:both gibts aber noch immer einen fehler.
ich schliesse immer mit einem div ab das clear:both, height:0px, etc. hat - siehe code. dann passt das auch mit #content

Jep, hat geklappt. VIELEN DANK!
NUR versteh ich nicht ganz, warum es nicht auch ohne den "unsichtbaren" DIV-Container funktioniert?
Denn wenn ich

Code: Alles auswählen

<div class="clear0px"></div>

wieder rausnehme, dann hab ich wieder das Problem, dass meine Navi über den unteren Rand des Content-Containers ragt. *verwirrt*

Mit dem Footer hab ich jetzt dann doch anders gemacht. Deine Idee hat mich aber inspiriert

Beitrag von **mano_negra** » 13.07.2011, 18:51

das mit dem div ist eigentlich die alte methode, mittlerweile gibts auch andere methoden. mir scheint das aber irgendwie die sicherste methode zu sein, die in allen browsern funktioniert.

das div kann mit nur floatenden elementen die höhe nicht bestimmen oder so ähnlich

wenn du eine höhe (in px) angeben würdest geht es glaub ich auch, was aber praktisch meistens nicht möglich ist.

such einmal in google nach clearing floats oder so ähnlich, da erfährst du mehr.

Beitrag von **CubeMaster** » 14.07.2011, 09:12

mano_negra hat geschrieben:such einmal in google nach clearing floats oder so ähnlich, da erfährst du mehr.

…hab ich gemacht

Jetzt weiß ich wenigstens was für ein Namen mein Problem hat.
Hab gesucht und folgende Lösungsansetze gefunden UND diese in Adobe BrowserLab durchprobiert:

1. Möglichkeit
DEINE mit der DummyBox
Resultat: funktioniert überall, nur beim IE7 zeigt er mir Fehler: "Navigation to the webpage was canceled"

2. Möglichkeit
#content den Befehl "overflow: hidden" hinzufügen
Resultat: funktioniert überall, nur im IE6 garnicht. Denn dieser will immer eine fixe Höhe zugwiesen haben, wie bereits erwähnt. Sonst ist der #content div im Layout 0 px hoch.

3. Möglichkeit
Zu finden auf der Seite "jassesnee.de/easyclear" Mit folgendem Lösungsvorschlag: man "benutzt .clearfix in jeder Box, die ein veränderbares Float enthält."

Code: Alles auswählen

.clearfix&#58;after &#123;
    content&#58; "."; 
    display&#58; block; 
    height&#58; 0; 
    clear&#58; both; 
    visibility&#58; hidden;
&#125;

.clearfix &#123;display&#58; inline-block;&#125;

/* Hides from IE-mac \*/
* html .clearfix &#123;height&#58; 1%;&#125;
.clearfix &#123;display&#58; block;&#125;
/* End hide from IE-mac */

Resultat: hab ich ausprobiert und bin kläglich gescheitert, ich habe einfach keine Ahnung, wo ich .clearfix:after und wo nur .clearfix als class benutzen soll.

Sicherlich ist Möglichkeit 1, die der unsichtbaren DummyBox, bis jetzt die sicherste und daher für mich im Moment auch der Favourit. ABER Möglichkeit 3 muss doch auch irgendwie fkt. und laut dieser Website ist diese sogar noch eleganter.

Beitrag von **CubeMaster** » 15.07.2011, 09:33

…ich bekomm noch die Kriese.

Ich hab schon wieder ein Problem. Alle Browser zeigen es vernünftig an, nur der blöde IE6 nicht.

Es geht um folgendes. Ich habe einen Rahmen DIV, darin 2 DIVs. der linke floatet left, der rechte floatet right. Beide stehen nebeneinander und fkt. ABER wenn ich jetzt dem linken einen Abstand von 185px vom linken Rand gebe, dann ist der Abstand im IE6 nicht 185px sondern viel höher und beide DIVs liegen übereinander. Bei allen anderen Browsern passt es. Wenn ich die Pixelangabe überigens auf 0 setze, dann sieht es in allen Browsern gleiche aus. Kann mir bitte jemand helfen? Ich werd noch irre hier

Code: Alles auswählen

#content_bottom &#123;
	width&#58;840px;
	background-color&#58; #333333;
	margin&#58;0px;
	padding&#58; 0px 30px 0 30px;
	&#125;

#content_bottom_left &#123;
	width&#58;230px;
	float&#58; left;
	margin&#58; 0px 0px 0px 185px;
	padding&#58;30px 0 35px 0;
	&#125;
	
#content_bottom_right &#123;
	width&#58;425px;
	color&#58;#cccccc;
	float&#58; right;
	padding&#58;30px 0 35px 0;
	margin&#58;0px;
	&#125;

Code: Alles auswählen

<div id="content_bottom">
        <div id="content_bottom_left"></div>
        <div id="content_bottom_right"></div>
        <div class="clearbox"></div>
        </div>

Beitrag von **profo** » 15.07.2011, 10:10

Das ist wahrscheinlich der berühmte bug, bei dem der IE6 (ich glaube bei floatenden Elementen innerhalb floatender Elemente) die Abstände mal einfach verdoppelt. Workaround: Du musst an der richtigen Stelle ein "display: inline;" sagen.

PS: wenn Du einfach nur einen linken Abstand brauchst, reicht vielleicht ein "left: 123px" aus. Das macht auch der IE6, schätze ich.

Beitrag von **top** » 15.07.2011, 10:23

Ich tippe eher auf den Boxmodell-Fehler des IE:

https://de.selfhtml.org/css/formate/box_modell.htm

Beitrag von **CubeMaster** » 15.07.2011, 11:57

profo hat geschrieben:PS: wenn Du einfach nur einen linken Abstand brauchst, reicht vielleicht ein "left: 123px" aus. Das macht auch der IE6, schätze ich.

das hatte ich auch schon probiert, aber leider erfolglos.

top hat geschrieben:Ich tippe eher auf den Boxmodell-Fehler des IE:
https://de.selfhtml.org/css/formate/box_modell.htm

SUPER! Danke für den Tipp. Habs mal durchgelesen. Also eine veränderterte Doctype brachte keinen Erfolg. Hab dann einfach die Umgehungsstrategie relativ weit unten beherzigt. Dort heißt es: "…gleichzeitige Angabe von width bzw. height und border/padding bei ein und demselben Element zu verzichten."

Habs ausprobiert und es fkt. Hab dem RahmenDIV einen padding-left:215px verpasst und den zwei darinliegenden DIVs lediglich ein margin: 0 und padding wie gehabt.

Schon nicht so einfach das ganze. Mit ner Tabelle wäre ich bestimmt schon fertig

…aber gut, man muss ja mit der Zeit gehen und bei Tabellen kann man auch schön viel versauen.

Bin ja noch jung und lernfähig

Beitrag von **mano_negra** » 15.07.2011, 12:11

CubeMaster hat geschrieben:Schon nicht so einfach das ganze. Mit ner Tabelle wäre ich bestimmt schon fertig

das ist genau der grund warum ich auch so lang mit tabellen gearbeitet habe. erst jetzt stell ich langsam alles um.

eine frage: wie testet du die verschiedenen browser versionen?

Beitrag von **CubeMaster** » 15.07.2011, 12:24

mano_negra hat geschrieben:eine frage: wie testet du die verschiedenen browser versionen?

Ich arbeite mit der Adobe Creative Suite Design Premium CS5.5 Student Edition und da ist Dreamweaver mit drin.
Ja, Dreamweaver…auch wenns ein BaukastenProg ist für Newbs, aber ich finds super. Ich arbeite aber wirklich nur im Quellcode und lass es nicht von DW selbst zusammenschustern, bin ja nicht verrückt

Auf jeden Fall gibt es da die Funktion einer Vorschau via "Adobe Browser Lab", hierbei meldet man sich mit seinen Login Daten an und das ganze wird im Browser (bei mir FF) geöffnet. Hier kann man dann in der Benutzeroberfläche von Adobe (welche sich im FF öffnet) den einzelnen Browser wählen. Also für die alten versionen vom IE und Safari ganz praktisch. Fkt im großen und Ganzen sehr gut und ist kostenlos.
https://browserlab.adobe.com/de-de/index.html

Beitrag von **mano_negra** » 15.07.2011, 12:39

ich arbeite auch mit dreamweaver und find es genial. so wie du aber nur im quellcode. baukasten prog und zusammenschustern gilt nur für leute die keine ahnung von html und css haben und in der entwurfsansicht arbeiten.
adobe browser lab kannte ich aber gar nicht, da ich mit einer uralt version von dreamweaver arbeite. klingt interessant.

Beitrag von **CubeMaster** » 15.07.2011, 12:53

mano_negra hat geschrieben:adobe browser lab kannte ich aber gar nicht, da ich mit einer uralt version von dreamweaver arbeite. klingt interessant.

erwarte aber nicht zu viel

Ist eine praktische Sache, wenn man nicht alle Browser, besonders die alten, installieren will aber optisch ist die Vorschau bei Schriften, noch ein bisschen fehlerhaft. ABER alles andere funktioniert. 4,5 von 5 Sternen also

Beitrag von **CubeMaster** » 18.07.2011, 08:48

…ich schon wieder.

Ich stolper irgendwie immer mehr über kleine grundlegende Dinge, auf die ich früher nie so geachtet habe. Bei manchen Sachen hilft mir Google schnell weiter, aber bei anderen muss ich dann doch wieder dieses Forum zu Rate ziehen

Also, ich habe folgenden Code erstellt.

Code: Alles auswählen

<div id="head">
<a href="http&#58;//www&#91;.&#93;website&#91;.&#93;de/"><img src="images/logo.gif" class="logo"></a>
</div>

css dazu:

Code: Alles auswählen

.logo&#123;
	position&#58; relative;
	margin&#58; 30px 0 0 30px;
	border&#58;none;
	&#125;

Hier meine 2 Fragen.
1. Kann man das ganze noch kürzer gestalten und die src- sowie die href-Adresse in der CSS-Datei unterbringen?
Hab dazu immer nur die Methode gefunden, dass man das ganze als background einfügt.

2. Ist ein ALT-Text beim Logo aus SEO-sicht sinnvoll? oder kann man den da auch weglassen.
Ich würde ihn ja setzen. Denn wenn das Logo nicht angezeigt werden kann, dann wenigstens der Alt-Text a lá "Websitename.de" UND kan man diesen ALT-Text auch irgendwie in der CSS-Datei vermerken?