|
|
CubeMaster
: 15.12.2004
: 462
|
| : 13.07.2011, 18:23 : div Container – Ich bin zu blöd |
|
|
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: |
<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: |
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
text-align:left;
color: #555555;
height:100%;
margin: 0px auto;
padding:0px;
}
#root {
width:900px;
min-height: 100%;
height: 100%;
margin: 0px auto;
text-align: left;
color: #666666;
background-color: #ffffff;
}
#head {
height: 100px;
border: 1px solid #cccccc; border-top: 0px;
margin: 0px 0px 20px 0px;
}
#content {
min-height: 100%;
height:100%;
border: 1px solid #cccccc;
margin: 0px;
}
.navi_left {
width: 170px;
min-height: 100%;
height:100%;
float: left;
border: 0px solid #ffffff;
background-color: #f8f8f8;
padding: 30px 0px 0px 20px;
}
.content_main {
width: 688px;
min-height: 100%;
height: 100%;
float: right;
border: 0px;
padding: 30px 0px 0px 20px;
}
#footer {
border: 0px solid #cccccc; border-bottom: 0px;
background-color: #333333;
height: 100px;
margin: 0px;
} |
[/code]
[S] LT: Energie, Versicherung, Tiere
[B] LT: Energie, Finanzen, Versicherung, Promis & TV, Gaming, |
|
| Nach oben |
|
 |
profo
: 18.01.2007
: 1709
|
| : 13.07.2011, 19:02 : Re: div Container – Ich bin zu blöd |
|
|
| CubeMaster hat Folgendes 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 Folgendes 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.
Ceterum censeo facebook esse delendam. |
|
| Nach oben |
|
|
mano_negra
: 23.07.2009
: 2770
: la luna
|
| : 13.07.2011, 19:14 : div Container – Ich bin zu blöd |
|
|
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: |
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
text-align:left;
color: #555555;
margin: 0px;
padding:0px;
}
#root {
width:900px;
margin: 0px auto;
text-align: left;
color: #666666;
background-color: #ffffff;
}
#head {
height: 100px;
border: 1px solid #cccccc; border-top: 0px;
margin: 0px 0px 20px 0px;
}
#content {
border: 1px solid #cccccc;
margin: 0px;
}
.navi_left {
width: 170px;
float: left;
background-color: #f8f8f8;
padding: 30px 0px 0px 20px;
}
.content_main {
width: 688px;
float: right;
padding: 30px 0px 0px 20px;
}
.clear0px{
clear:both; height:0px; font-size:0px; line-height:0px
}
#footer {
width:900px;
position:fixed;
bottom:0px;
background-color: #333333;
height: 100px;
} |
und füge das vor dem abschliessenden /div - tag für content ein:
| Code: |
| <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.
achtung ich komme!  |
|
| Nach oben |
|
|
CubeMaster
: 15.12.2004
: 462
|
| : 13.07.2011, 19:36 : div Container – Ich bin zu blöd |
|
|
| mano_negra hat Folgendes 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: |
| <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 
[S] LT: Energie, Versicherung, Tiere
[B] LT: Energie, Finanzen, Versicherung, Promis & TV, Gaming, |
|
| Nach oben |
|
|
mano_negra
: 23.07.2009
: 2770
: la luna
|
| : 13.07.2011, 19:51 : div Container – Ich bin zu blöd |
|
|
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.
achtung ich komme! |
|
| Nach oben |
|
|
CubeMaster
: 15.12.2004
: 462
|
| : 14.07.2011, 10:12 : div Container – Ich bin zu blöd |
|
|
| mano_negra hat Folgendes 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: |
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* 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.
[S] LT: Energie, Versicherung, Tiere
[B] LT: Energie, Finanzen, Versicherung, Promis & TV, Gaming, |
|
| Nach oben |
|
|
CubeMaster
: 15.12.2004
: 462
|
| : 15.07.2011, 10:33 : div Container – Ich bin zu blöd |
|
|
…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: |
#content_bottom {
width:840px;
background-color: #333333;
margin:0px;
padding: 0px 30px 0 30px;
}
#content_bottom_left {
width:230px;
float: left;
margin: 0px 0px 0px 185px;
padding:30px 0 35px 0;
}
#content_bottom_right {
width:425px;
color:#cccccc;
float: right;
padding:30px 0 35px 0;
margin:0px;
} |
| Code: |
<div id="content_bottom">
<div id="content_bottom_left"></div>
<div id="content_bottom_right"></div>
<div class="clearbox"></div>
</div> |
[S] LT: Energie, Versicherung, Tiere
[B] LT: Energie, Finanzen, Versicherung, Promis & TV, Gaming, |
|
| Nach oben |
|
|
profo
: 18.01.2007
: 1709
|
| : 15.07.2011, 11:10 : div Container – Ich bin zu blöd |
|
|
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.
Ceterum censeo facebook esse delendam. |
|
| Nach oben |
|
|
top
: 14.07.2005
: 212
|
|
| Nach oben |
|
|
CubeMaster
: 15.12.2004
: 462
|
| : 15.07.2011, 12:57 : div Container – Ich bin zu blöd |
|
|
| profo hat Folgendes 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.
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
[S] LT: Energie, Versicherung, Tiere
[B] LT: Energie, Finanzen, Versicherung, Promis & TV, Gaming, |
|
| Nach oben |
|
|
mano_negra
: 23.07.2009
: 2770
: la luna
|
| : 15.07.2011, 13:11 : div Container – Ich bin zu blöd |
|
|
| CubeMaster hat Folgendes 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?
achtung ich komme! |
|
| Nach oben |
|
|
CubeMaster
: 15.12.2004
: 462
|
| : 15.07.2011, 13:24 : div Container – Ich bin zu blöd |
|
|
| mano_negra hat Folgendes 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
[S] LT: Energie, Versicherung, Tiere
[B] LT: Energie, Finanzen, Versicherung, Promis & TV, Gaming, |
|
| Nach oben |
|
|
mano_negra
: 23.07.2009
: 2770
: la luna
|
| : 15.07.2011, 13:39 : div Container – Ich bin zu blöd |
|
|
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.
achtung ich komme! |
|
| Nach oben |
|
|
CubeMaster
: 15.12.2004
: 462
|
| : 15.07.2011, 13:53 : div Container – Ich bin zu blöd |
|
|
| mano_negra hat Folgendes 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
[S] LT: Energie, Versicherung, Tiere
[B] LT: Energie, Finanzen, Versicherung, Promis & TV, Gaming, |
|
| Nach oben |
|
|
CubeMaster
: 15.12.2004
: 462
|
| : 18.07.2011, 09:48 : div Container – Ich bin zu blöd |
|
|
…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: |
<div id="head">
<a href="http://www[.]website[.]de/"><img src="images/logo.gif" class="logo"></a>
</div> |
css dazu:
| Code: |
.logo{
position: relative;
margin: 30px 0 0 30px;
border:none;
} |
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?
[S] LT: Energie, Versicherung, Tiere
[B] LT: Energie, Finanzen, Versicherung, Promis & TV, Gaming, |
|
| Nach oben |
|
|
