Div-Frage

Loon3y · 3 Juni 2008

so....habe mal wieder eine frage zu div's...

habe jetzt folgendes gebastelt:

css:

Code:

body {
  padding: 0px;
  margin: 0px;
  background-color: #FFFFFF;
}

#header {
  height: 100px;
  margin: 10px;
  margin-left: 25px;
  width: 915px;
  background-color: #B8B8B8;
}
#main {
  width: auto;
  margin: 45px 200px;
  background-color: #B8B8B8;
}
#sidebar1 {
  position: absolute;
  top: 165px;
  left: 25px;
  width: 160px;
  height: 300px;
  background-color: #B8B8B8;
}
#sidebar2 {
  position: absolute;
  top: 165px;
  right: 25px;
  width: 160px;
  height: 300px;
  background-color: #B8B8B8;
}

index.html:

Code:

<html>

<head>
<link href="page.css" rel="stylesheet" type="text/css" />
<link href="navigation.css" rel="stylesheet" type="text/css" />
</head>

<body>

    <div id="header">...</div>

    <ul id="Navigation">
    menu

    </ul>

    <div id="main">
text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>
    </div>


    <div id="sidebar1">...</div>


    <div id="sidebar2">

    </div>


</body>

</html>

das menu habe ich jetzt mal entfernt, weil das zu lange ist...wird schlicht ein mouseover sein was zwischen header und dem darunterliegendem main,sidebar1 und sidebar2 erscheinen wird.

Meine Frage bei dem ganzen ist jetzt... lohnt es sich nochmals über dies ganze einen Div zu ziehen der es umrahmt damit es auch fixiert ist..oder soll ich es so lassen?..das problem beim ganzen ist wenn ich es so lasse..das es sich strecken und zerren lässt ohne ende...zumindest der "main-container". Wie kann ich dies verhindern? sprich das sich der container vllt verkleinert, aber nicht größer wird.

Lohnt es sich über das ganze in einen großen div darzustellen mit festen linken und rechten rand? Wenn ja, wie stell ich das an?

Danke schoneinmal...

grüßli..

Efchen · 3 Juni 2008

Wichtig ist, dass die Seite gut ins Browserfenster passt. Sie sollte keine fixe Breite haben, bei kleinen Browserfenstern sollten keine horizontalen Scrollbalken kommen, Textabsätze sollten aber nicht zu breit sein, weil man die dann nicht mehr gut lesen kann. Man kann mit min-width und max-width experimentieren und dabei im Hinterkopf behalten, dass der IE das teilweise oder gar nicht versteht. Und wenn man den ganzen Inhalt als solches irgendwie anders layouten will, z.B. durch ein max-width und ein Zentrieren, dann ist es natürlich sinnvoll, alle Inhalte durch ein allumfassendes div zu gruppieren.

Gruß,
-Efchen

Loon3y · 3 Juni 2008

Nunja ich hatte mir einfach die seite so vorgestellt:

http://img218.imageshack.us/img218/7923/pageok9.png

(oben header, darunter menu, links sidebar1, mitte text [hier nur unterteilt um zu verdeutlichen das mehrere sachen mit vllt überschriften hinkommen, wie news..], rechts sidebar2)

das schwarze soll nur den rand darstellen, selbstverständlich ist der komplette hintergrund weiß und enhält nur ein weißes mittig fixiertes bild...

wäre es dann ratsam ncoh einen div um das ganze, wie im bild, zu ziehen (allein schon wegen der grafik die im hintergrund ist) oder sollte ich lieber es so lassen wie es momentan ist?!

wie mache ich das mit dem div über die ganzen divs denn ?

danke schonmal :)

Edit: ganz vergessen..wegen fixe breite, meinst du damit eventuell das von den sidebars gemachte "width: 160px;" , wäre es wohl ratsamer einfach dsa in % anzugeben oder wie war das gemeint? ^^

Efchen · 3 Juni 2008

Loon3y schrieb:
wäre es dann ratsam ncoh einen div um das ganze, wie im bild, zu ziehen (allein schon wegen der grafik die im hintergrund ist) oder sollte ich lieber es so lassen wie es momentan ist?!

Wenn Du es erreichen willst, dass Deine Seite links und rechts einen Abstand hat (die im Bild schwarzen Balken), dann wirst Du das wohl tun müssen, da sich Block-Elemente immer über die vollständige Breite erstrecken.

wie mache ich das mit dem div über die ganzen divs denn ?

Huh? Na, ein <div> komplett außen rum legen! Das öffnende Tag vor den bisherigen Inhalt, das schließende ans Ende.

Edit: ganz vergessen..wegen fixe breite, meinst du damit eventuell das von den sidebars gemachte "width: 160px;" , wäre es wohl ratsamer einfach dsa in % anzugeben oder wie war das gemeint? ^^

Auch. Aber ich würde nicht "%" als Einheit verwenden, sondern "em" (außer vielleicht bei der Gesamtbreite), dann ist es von der Schriftgröße abhängig und dann verändert sich die Größe des Elements auch mit, wenn jemand die Schriftgröße ändert. Das ist an Benutzerfreundlichkeit dann nicht mehr zu übertreffen.
Bezieht sich natürlich nicht nur auf eine Sidebar, sondern auf alle Elemente.

Gruß,
-Efchen

Loon3y · 3 Juni 2008

wäre es ratsam, für die sidebars eventuell hintergrundgrafiken zu benutzen? sprich von der höhe fest vorgeschriebene grafiken die dann erscheinen und darüber nur der text?

eine weitere frage, die sich mir leider stellt ist, wie schaffe ich es, das meine rechte sidebar immer einen gleichen abstand zum text-div hat, ebenso wie die linke sidebar? (Egal in welcher auflösung und sich nicht 1000px weit wegziehen lässt und ein rießen abstand reinkommt..) das ist doch dann letzendlcih nur mit einen div außenrum möglich und dann hm...ich steh grad aufm schlauch..endschuldige.

Auch. Aber ich würde nicht "%" als Einheit verwenden, sondern "em" (außer vielleicht bei der Gesamtbreite), dann ist es von der Schriftgröße abhängig und dann verändert sich die Größe des Elements auch mit, wenn jemand die Schriftgröße ändert. Das ist an Benutzerfreundlichkeit dann nicht mehr zu übertreffen.
Bezieht sich natürlich nicht nur auf eine Sidebar, sondern auf alle Elemente.

könntest du mir vllt ein paar seiten geben wo ich dieses "em" finde damit ich mir das mal anschauen kann, wie sich der div beim verändern der browsergröße verhält. Ich selbst hasse ja maximierte browserfenster, grässlich..von daher stimme ich dir 100% zu, das man bei jeder größe des browserfensters und vor allem schriftgröße optimal alles sehen sollte.

Wobei ich denke, dass man, mit dem dargestellten, nicht extrem weit unter eine auflösung von 800x600 gehen muss, oder? (wer hat heutzutage noch 15 Zoll Monitore / Flatscreens?)

nochmals vielen lieben Dank.

Efchen · 3 Juni 2008

Loon3y schrieb:
wäre es ratsam, für die sidebars eventuell hintergrundgrafiken zu benutzen? sprich von der höhe fest vorgeschriebene grafiken die dann erscheinen und darüber nur der text?

Das ist eine reine Designfrage, die Dir niemand beantworten kann.

eine weitere frage, die sich mir leider stellt ist, wie schaffe ich es, das meine rechte sidebar immer einen gleichen abstand zum text-div hat, ebenso wie die linke sidebar?

Indem Du einen immer gleich bleibenden Abstand setzt.

(Egal in welcher auflösung

Die Auflösung ist irrelevant.

das ist doch dann letzendlcih nur mit einen div außenrum möglich

Abstände definiert man in CSS mit margin, mit HTML oder einem speziellen Tag hat das nichts zu tun.

könntest du mir vllt ein paar seiten geben wo ich dieses "em" finde damit ich mir das mal anschauen kann, wie sich der div beim verändern der browsergröße verhält.

Keine Ahnung. Was spricht dagegen, wenn Du es einfach selbst ausprobierst? Ist doch schnell gemacht.

Wobei ich denke, dass man, mit dem dargestellten, nicht extrem weit unter eine auflösung von 800x600 gehen muss, oder? (wer hat heutzutage noch 15 Zoll Monitore / Flatscreens?)

Was hat die Größe des Monitors damit zu tun? Du sagst doch selber, Du hasst maximierte Browserfenster. Dann müsstest Du doch auch wissen, dass man selbst bei einem 153-Zoll-Bildschirm mit eienr Auflösung von 4.358.000x2.409.112px ein Browserfenster von nur 300x800px haben kann.

Außerdem geht der Trend derzeit eher zu kleinen Bildschirmen. PDAs haben meines Wissens eine Auflösung von 200x320 (und somit auch nicht das klassische Seitenverhältnis, wo die Breite größer ist als die Höhe), der neue Eee PC von Asus hat eine Auflösung von 800x480px. Auf großen Bildschirmen tendiert man eher dazu, sein Browserfenster kleiner zu machen, weil man endlich mehrere Anwendungen gleichzeitig im Blick haben kann.

Loon3y · 3 Juni 2008

Efchen schrieb:
Das ist eine reine Designfrage, die Dir niemand beantworten kann.

ich sehe schon..ich löchere mal wieder fragen ohne ende in die luft...endschuldige vielmals ^^

Indem Du einen immer gleich bleibenden Abstand setzt.

Abstände definiert man in CSS mit margin, mit HTML oder einem speziellen Tag hat das nichts zu tun.

wäre es auch eine möglichkeit alles am linken bildschirmrand auszurichten? oder würdest du davon abraten?

oder wäre es dann doch wesentlich klüger alles zu zentrieren, ein div außenrum zu legen und das ganze an header, main, sidebar1 + 2 in dieses div zu plazieren und dann mit max-wdth: xx em; und width: auto; zu "optimieren", sprich kleiner gehts, größer erscheint eben mehr rand links und rechts.

Die sache mit dem Monitor...es ist doch klar wenn man einen 15 Zoll Monitor hat, das man dann eine wesentlich kleinere Max.Auflösung hat wie bei einen 22 Zoller....es heißt ja immer, dass man homepages in jeder Auflösung optimal, ohne horizontales scrollen, nutzen sollte.

ich weiß, es kommen viele fragen, aber wenn man schon die möglichkeit hat und es beschäftigt sich jemand mit mir, der wesentlich mehr wissen als ich hat, dann versuche ich auch möglichst viel mitzunehmen ^^

Efchen · 3 Juni 2008

Loon3y schrieb:
wäre es auch eine möglichkeit alles am linken bildschirmrand auszurichten? oder würdest du davon abraten?

Wenn ich ein dreispaltiges Layout machen würde, würde ich die linke Spalte left floaten, die rechte Spalte right floaten, und evtl. dem mittleren Bereich ein margin-left in ca. der Breite der linken Spalte und ein margin-right in der Breite der rechten Spalte mitgeben. Dann würde der Text der Mitte auch nicht unterhalb des Inhalts der Sidebars nach links aud rechts "rausrutschen". Aber das kann ja auch gewollt sein, damit man keinen Platz verschwendet. Dann gibts eben keine margins.
Wenn ich den mittleren Platz noch beschränken wollte, würde ich alles zusammen gruppieren und die maximale Breite einschränken.

oder wäre es dann doch wesentlich klüger alles zu zentrieren, ein div außenrum zu legen und das ganze an header, main, sidebar1 + 2 in dieses div zu plazieren und dann mit max-wdth: xx em; und width: auto; zu "optimieren", sprich kleiner gehts, größer erscheint eben mehr rand links und rechts.

Das ist das, was ich im letzten Satz oben meinte.

Jetzt weiß ich auch, was Du mit "am linken Bildschirmrand ausrichten" meinst. Nein, das würde ich nicht unbedingt tun. Wenn die Seite eine maximale Breite erhält, sieht das doof aus, wenn die an einem Rand klebt und der Rest frei ist, da gefällt mir die zentrierte Variante besser.

Die sache mit dem Monitor...es ist doch klar wenn man einen 15 Zoll Monitor hat, das man dann eine wesentlich kleinere Max.Auflösung hat wie bei einen 22 Zoller....es heißt ja immer, dass man homepages in jeder Auflösung optimal, ohne horizontales scrollen, nutzen sollte.

Ja, das ist richtig, dass die Auflösung den maximal verfügbaren Platz definiert. Aber ansonsten ist sie irrelevant. Websites soll man aber nicht in jeder Auflösung optimal nutzen können, sondern mit jeder Fenstergröße. Die Auflösung ist da irrelevant. Wenn ich 1280x1024 als Auflösung habe, möchte ich eine Website auch ohne horizontale Scrollbalken nutzen können, wenn ich mein Fenster nur auf sagen wir 899x1024px aufgezogen habe. Die Auflösung ist dafür irrelevant.

ich weiß, es kommen viele fragen, aber wenn man schon die möglichkeit hat und es beschäftigt sich jemand mit mir, der wesentlich mehr wissen als ich hat, dann versuche ich auch möglichst viel mitzunehmen ^^

Kein Thema :-D

Loon3y · 3 Juni 2008

so vorneweg, ich weiß das kommt jetzt doof, habe ich 2 fragen... (wer hätte es gedacht

)

1. wie funktioniert das mit dem em? ich habe jetzt alle pixelangabe, durch gebrauch eines umrechners, in em-angaben ersetzt, leider geht jetzt garnixmehr *g*

2. wie zentriere ich nun die seite ? mittels div den ich drüber lege oder wie? irgendwie, egal was ich versuche, es will nicht klappen...würdest du mir eventuell dabei helfen können die css gut zu gestalten? ansonsten trete ich noch ewigkeiten auf der stelle und wenn ich in foren oder sonstiges lese, komme ich um fragen nicht drumrum. :(

Im Prinzip will ich das dreispaltige layout, zentriert, wenn es größer gezogen wird hab ich eben mehr rand, wenn es kleiner gemacht wird..hm..gute frage..soll es fix bleiben (dann muss ich aber schauen das auch bei kleiner auflösung kein scrollbalken erscheint) oder soll sich die größe der div-boxen ändern? Eigentlich..wenn man die größe der Div-Container optimal bestimmt, sollte selbst in einem kleinen Browserfenster alles gut zu lesen sein.

zu deinem geschriebenen..

a, das ist richtig, dass die Auflösung den maximal verfügbaren Platz definiert. Aber ansonsten ist sie irrelevant. Websites soll man aber nicht in jeder Auflösung optimal nutzen können, sondern mit jeder Fenstergröße. Die Auflösung ist da irrelevant. Wenn ich 1280x1024 als Auflösung habe, möchte ich eine Website auch ohne horizontale Scrollbalken nutzen können, wenn ich mein Fenster nur auf sagen wir 899x1024px aufgezogen habe. Die Auflösung ist dafür irrelevant.

urgs...naja ich meinte eben, wenn ich Auflösung sagte, wie groß das Browserfenster ist...habe ich mich wohl unverständlich ausgedrückt...aber wir wissen ja worauf es hinauslief...optimales nutzen der website.

Efchen · 3 Juni 2008

Loon3y schrieb:
1. wie funktioniert das mit dem em? ich habe jetzt alle pixelangabe, durch gebrauch eines umrechners, in em-angaben ersetzt, leider geht jetzt garnixmehr *g*

Was für ein Umrechner? "em" funktioniert wie alle anderen Einheiten auch.
1em entspricht der Breite(?) eines kleinen(?) "m" in der aktuellen Schriftgröße. das ist die Größe, die der Benutzer für sich als optimal in seinem Browser eingestellt hat.
Man sollte daher für Fließtext immer 1em als Größe verwenden. Alle anderen Größen richtet man danach aus. Wie groß Du das machst, bleibt Dir überlassen. Alles, was kleiner ist als 1em kann u.U. vom Nutzer nicht mehr richtig gelesen werden, sollte also eher spärlich, eher für "Kleingedrucktes" eingesetzt werden.
Die Größe von Containern richtet sich dann ebenfalls nach der Schriftgröße.

2. wie zentriere ich nun die seite ? mittels div den ich drüber lege oder wie?

Ein Block-Element wird horizontal zentriert, indem man ihm "margin:0 auto" mitgibt. dann werden die Abstände links und rechts gleich groß gemacht. Natürlich braucht das Element eine Breite, sonst ist es 100% breit und damit immer zentriert.
Wenn Du alle Elemente einer Seite zentrieren willst, macht es Sinn, diese durch ein <div> zu gruppieren und diesem <div> dann entsprechende Eigenschaft zu verpassen.

irgendwie, egal was ich versuche, es will nicht klappen

Was versuchst Du denn? Ich kann nicht hellsehen :-)

würdest du mir eventuell dabei helfen können die css gut zu gestalten?

Tu ich doch schon :-)
Ich schreibe aber keinen Code.
Nur Eigeninitiative und Lernwille und ein wenig Zeit führen zum Erfolg.

naja ich meinte eben, wenn ich Auflösung sagte, wie groß das Browserfenster ist...habe ich mich wohl unverständlich ausgedrückt...aber wir wissen ja worauf es hinauslief...optimales nutzen der website.

Wir wissen es. Andere nicht. Wenn immer jeder verstanden hätte, was jemand anders schreibt, dann gäbe es heute nicht so völlig nutzlose Dinge, wie Auflösungsweichen, die jemanden mit 1280x1024-Auflösung aber 800x600-Browserfenster auf eine für 1280x1024-optimierte statt 800x600-optimierte Seite weiterleiten.
Es ist pure Faulheit, wenn jemand "Auflösung" statt "Fenstergröße" (eigentlich "Fensterinnengröße") schreibt, das führt dann zu Missverständnissen und das verbreitet falsche Ansichten und Fehler und man wird es nie mehr los. :-(
(Kein persönlicher Vorwurf)

Gruß,
-Efchen

Loon3y · 3 Juni 2008

Efchen schrieb:
Was für ein Umrechner? "em" funktioniert wie alle anderen Einheiten auch.
1em entspricht der Breite(?) eines kleinen(?) "m" in der aktuellen Schriftgröße. das ist die Größe, die der Benutzer für sich als optimal in seinem Browser eingestellt hat.
Man sollte daher für Fließtext immer 1em als Größe verwenden. Alle anderen Größen richtet man danach aus. Wie groß Du das machst, bleibt Dir überlassen. Alles, was kleiner ist als 1em kann u.U. vom Nutzer nicht mehr richtig gelesen werden, sollte also eher spärlich, eher für "Kleingedrucktes" eingesetzt werden.
Die Größe von Containern richtet sich dann ebenfalls nach der Schriftgröße.

ich habe diesen hier benutzt: Em Calculator und welche angaben werden da jetzt alles ersetzt? nur schriftgrößen oder auch, wie läuft das denn jetzt genau ab? wenn ich div-container bastel muss ich dann statt heigh 100px am ende xxx em hinschreiben oder wie funktioniert das??

Ein Block-Element wird horizontal zentriert, indem man ihm "margin:0 auto" mitgibt. dann werden die Abstände links und rechts gleich groß gemacht. Natürlich braucht das Element eine Breite, sonst ist es 100% breit und damit immer zentriert.
Wenn Du alle Elemente einer Seite zentrieren willst, macht es Sinn, diese durch ein <div> zu gruppieren und diesem <div> dann entsprechende Eigenschaft zu verpassen.

ja ein block element, aber was ist mit 3en? immerhin habe ich ja drei spalten die zentriert werden sollen, d.h. ich muss die ja versetzt stehen lassen? und, wie binde ich meine divs in ein drunter liegendes div ein?

im prinzip hätte ich ja dann:

Code:

<div id="over">

  <div id="header></div>
  <div id="menu></div>
  <div id="sidebar1></div>    <div id="inhalt></div>    <div id="sidebar2></div>

</div>

Was versuchst Du denn? Ich kann nicht hellsehen :-)

schade, das wäre noch toll gewesen...*g* aber man kann nicht alles haben :-) nunja, wie das bild schon beschrieben hatte und auch jetzt der code hier...hm..

Tu ich doch schon :-)
Ich schreibe aber keinen Code.
Nur Eigeninitiative und Lernwille und ein wenig Zeit führen zum Erfolg.

das verlange ich auch garnicht und will ich nicht, selbst ist der mann / frau ;) aber erklärung und beschreibung wäre sehr hilfreich ^^

Es ist pure Faulheit, wenn jemand "Auflösung" statt "Fenstergröße" (eigentlich "Fensterinnengröße") schreibt, das führt dann zu Missverständnissen und das verbreitet falsche Ansichten und Fehler und man wird es nie mehr los. :-(
(Kein persönlicher Vorwurf)

fasse es auch so nicht auf, und ich endschuldge mich nochmals dafür...hatte anfangs selbst nicht dran gedacht das ich das falsche wort verwende ! Denn wenn man davon ausgeht das der browser immer maxiert ist, dann hat das browserinnenfenster, fast die größe der auflösung...bzw man kann ja das browserfenster in der auflösung x offen haben..ach egal..tut mir leid, war einfach nciht korrekt ausgedrückt.

Efchen · 3 Juni 2008

Loon3y schrieb:
und welche angaben werden da jetzt alles ersetzt? nur schriftgrößen oder auch, wie läuft das denn jetzt genau ab? wenn ich div-container bastel muss ich dann statt heigh 100px am ende xxx em hinschreiben oder wie funktioniert das??

Du wendest es überall da an, wo es Sinn macht. Leg doch einfach mal einen Container an mit eienr Größe von 10em. Dann ändere die Schriftgröße. Ich glaube, das hast Du bislang noch nicht probiert, denn sonst müsstest Du nicht fragen.

ja ein block element, aber was ist mit 3en?

Naja, wie funktioniert das denn, wenn Du mehr als einem Element gleichzeitig eine Formatierung verpassen willst? Du gruppierst diese Elemente und gibst die Eigenschaft dem Gruppenelement (<div>). Reden wir nicht die ganze Zeit davon, zu gruppieren? Alles in ein <div> zu packen zwecks gemeinsamer Formatierung, also einem Zentrieren?

immerhin habe ich ja drei spalten die zentriert werden sollen, d.h. ich muss die ja versetzt stehen lassen?

Du zentrierst ja nicht jede Spalte für sich, sondern packst die alle zusammen in einen Container und zentrierst den.

und, wie binde ich meine divs in ein drunter liegendes div ein?

Verstehe ich nicht.

selbst ist der mann / frau ;) aber erklärung und beschreibung wäre sehr hilfreich

Hmmm...was mach ich den gerade? Smalltalk? :-)

Denn wenn man davon ausgeht das der browser immer maxiert ist, dann hat das browserinnenfenster, fast die größe der auflösung.

Genauso falsch. Du hast keine Ahnung, wieviele Toolbars, Sidebars oder sonstwas in den Browsern Deiner Besucher offen sind, und Platz verbrauchen.

Aber entschuldigen musst Du Dich nicht :-) Es war ja kein Vorwurf in dem Sinne, sondern nur eine Erklärung, was alles passieren kann, wenn man bloß das falsche Wort verwendet. Es mag Leute geben, die das als kleinlich betrachten, aber wie gesagt - wenn es so klar wäre, dürfte es keine Auflösungsweichen geben.

Loon3y · 3 Juni 2008

Efchen schrieb:
Du zentrierst ja nicht jede Spalte für sich, sondern packst die alle zusammen in einen Container und zentrierst den.

bei mir kommt nun folgendes raus:

http://img238.imageshack.us/img238/2563/20329588od6.png

http://img138.imageshack.us/img138/8316/60426461pb3.png

index.htm:

Code:

<div id="over">

  <div id="header></div>
  <div id="menu></div>
  <div id="sidebar1"></div>    <div id="inhalt"></div>    <div id="sidebar2"></div>

</div>

css:

Code:

body {
  padding: 0px;
  margin: 0px;
  background-color: #FFFFFF;
}

#over {
 margin:0 auto;
 width: 900px;
 height: 1000px;
 border: #000000 2px solid; 
}

#header {
  height: 100px;
  margin:10px auto;
  width: 800px;
  background-color: #B8B8B8;
}
#main {
  width: 500px;
  margin:45px auto;
  background-color: #B8B8B8;
}
#sidebar1 {
  position: absolute;
  top: 165px;
  margin:0 auto;
  width: 160px;
  height: 300px;
  background-color: #B8B8B8;
}
#sidebar2 {
  position: absolute;
  top: 165px;
  right: 25px;
  width: 160px;
  height: 300px;
  background-color: #B8B8B8;
}

wo liegt nun der fehler? bei #sidebar2 muss sicherlich das "right:25px;" durch irgendwas ersetzt werden,nur was damit es rechts am div "over" anliegt??

Hmmm...was mach ich den gerade? Smalltalk? :-)

schlimm? ;) ist doch nur menschlich *g*

Genauso falsch. Du hast keine Ahnung, wieviele Toolbars, Sidebars oder sonstwas in den Browsern Deiner Besucher offen sind, und Platz verbrauchen.

Aber entschuldigen musst Du Dich nicht :-) Es war ja kein Vorwurf in dem Sinne, sondern nur eine Erklärung, was alles passieren kann, wenn man bloß das falsche Wort verwendet. Es mag Leute geben, die das als kleinlich betrachten, aber wie gesagt - wenn es so klar wäre, dürfte es keine Auflösungsweichen geben.

ich sehe ja meinen fehler schon ein ! ;-) werd zukünftlich mehr dadrauf achten.

Efchen · 3 Juni 2008

Loon3y schrieb:
wo liegt nun der fehler? bei #sidebar2 muss sicherlich das "right:25px;" durch irgendwas ersetzt werden,nur was damit es rechts am div "over" anliegt?

Ich würde kein position benutzen.
Die linke Spalte mit "float:left;" und die rechte Spalte mit "float:right;" - fertig.

Loon3y · 3 Juni 2008

wenn ich das mache, dann sind die sidebars bei mir ziemlich weit unten auf der seite, ich schätze mal dann auch zentriet zur der höhe meines "over"-divs ausgerichtet?

wenn ich links "maring:0 auto;" macht und rechts einfach "margin:0 690px;" (690px = [width "over"-div] 850px - [widht "sidebar2"-div] 160px)

oder wie bekomme ich die sidbars höher ausgerichtet?

Efchen · 3 Juni 2008

Loon3y schrieb:
wenn ich das mache, dann sind die sidebars bei mir ziemlich weit unten auf der seite, ich schätze mal dann auch zentriet zur der höhe meines "over"-divs ausgerichtet?

Dann hast Du noch irgendwas falsch gemacht oder nicht so definiert, wie Du es haben willst :-)

Ich bin jetzt an einem Punkt, an dem ich einen Link brauche

wenn ich links "maring:0 auto;" macht und rechts einfach "margin:0 690px;" (690px = [width "over"-div] 850px - [widht "sidebar2"-div] 160px)
oder wie bekomme ich die sidbars höher ausgerichtet?

In Deinem Code hier hast Du den Abstand nach oben und unten ja auf 0 gesetzt.
Das was Du da machst ist links im Elternelement zentrieren und rechts im Elternelment den linken und rechten Abstand auf 690px setzen, was wahrscheinlich böse endet, wenn Du nicht so viel Platz hast.
Wenn das ganze noch mit position:absolute kombiniert ist, steige ich aus ;-)
Für so ein einfaches Layout brauchts kein position:absolute.

Schönen Abend,
-Efchen

Loon3y · 3 Juni 2008

Der Link muss leider bis heute abend oder morgen warten, da ich zu meinen frauchen fahre und dort es erst hochladen müsste :-)

vorerst kann ich, leider nur mit quelltext rumwerfen.. :-(

Code:

body {
  padding: 0px;
  margin: 0px;
  background-color: #FFFFFF;
}

#over {
 margin:0 auto;
 width: 850px;
 height: 1000px;
 border: #000000 2px solid; 
}

#header {
  height: 100px;
  margin:10px auto;
  width: 800px;
  background-color: #B8B8B8;
}

#main1 {
  width: 500px;
  margin:45px auto;
  background-color: #B8B8B8;
}

#main2 {
  width: 500px;
  margin:0 auto;
  background-color: #B8B8B8;
}

#sidebar1 {
  position: absolute;
  top: 160px;
  margin:0 auto;
  width: 160px;
  height: 300px;
  background-color: #B8B8B8;
}

#sidebar2 {
  position: absolute;
  top: 160px;
  margin:0 690px;
  width: 160px;
  height: 300px;
  background-color: #B8B8B8;
}

ich kann mir gerade bildlich vorstellen wie du vom stuhl fällst...weil ich es mit absolute gemacht habe....es mag zwar sein das das richtige ergebnis rauskommt...aber obs richtig ist?! ne... :???:

der code von der index.htm hat sich nicht geändert, nur erweitert um ein main-fensteR:

Code:

<html>

<head>

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

</head>

<body>

<div id="over">

    <div id="header">...</div>

    <ul id="Navigation">


    </ul>

    <div id="main1">text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br></div>

    <div id="main2">text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br></div>

    <div id="sidebar1">...</div>


    <div id="sidebar2">

  </body>

    </div>

</div>

</body>

</html>

Einen schönen Abend vorerst, darf jetzt 3std Zug fahren..hehe..lesen lesen lesen... *js-buch auspack*..

Loon3y..

P.S.: hoffe du hast dich jetzt nicht verletzt als du vom stuhl gefallen bist :-(

Div-Frage

Loon3y

Neues Mitglied

Efchen

Guest

Loon3y

Neues Mitglied

Efchen

Guest

Loon3y

Neues Mitglied

Efchen

Guest

Loon3y

Neues Mitglied

Efchen

Guest

Loon3y

Neues Mitglied

Efchen

Guest

Loon3y

Neues Mitglied

Efchen

Guest

Loon3y

Neues Mitglied

Efchen

Guest

Loon3y

Neues Mitglied

Efchen

Guest

Loon3y

Neues Mitglied

Neueste Beiträge