IPB

Willkommen, Gast ( Anmelden | Registrierung )

2 Seiten V   1 2 >  
Reply to this topicStart new topic
> Div Variabel?
Gast_Cyber-Surfer_*
Beitrag 25.04.2004 - 23:18
Beitrag #1





Gäste






Hallo

ich möchte auf meiner Seite 2 Blockelemente mit div realisieren die nebeneinander stehen.

Einer rechts (navigation) ausgerichtet und bleibt auch dort beim verkleinern des Brauserfensters

Der 2te soll links (Text) sein und sich in der größe so anpassen das sie sich nicht Überlappen (ähnlich wie tabellen).

Wer weiß was?

Gruß Cyber-Surfer
Go to the top of the page
 
+Quote Post
Gast_heinzelhund_*
Beitrag 25.04.2004 - 23:28
Beitrag #2





Gäste






Hallo,

ich weiß was. Und damit ich nicht alleine bleibe smile.gif
"absolut Positionieren"

Ciao
Heinzelhund
Go to the top of the page
 
+Quote Post
Terry
Beitrag 25.04.2004 - 23:58
Beitrag #3


looks good


Gruppe: User
Beiträge: 43
Mitglied seit: 17.02.2004
Mitglieds-Nr.: 2.047



Ich würds nicht unbedingt absolut positionieren und man kann auch %-Angaben machen bei den <div>s.

Eine weitere gute Seite wäre diese hier: http://css.fractatulum.net/index.htm

Zum Positionieren-Üben der <div>s gibt es dort auch diesen schönen Online-Editor - am besten zwei Browser gleichzeitig aufrufen und testen - viel Spaß, ist nämlich durchaus ein Puzzle-Spiel, das Ganze, bis es endlich in allen Browsern richtig sitzt... wink.gif

Aber prinzipiell müßte sich das machen lassen mit float - Angaben, damit sich dann der zweite <div>-Container daneben legt.
Go to the top of the page
 
+Quote Post
amethyst
Beitrag 26.04.2004 - 0:03
Beitrag #4


Kann auf gar keinen Fall einen Videorekorder programmieren!
***

Gruppe: User
Beiträge: 210
Mitglied seit: 08.12.2003
Wohnort: Bad Zwischenahn
Mitglieds-Nr.: 1.751



Conny würde floaten ;-)

Ich würde es auch mit %-Angaben machen 80%haupt und 20% menü und absolut positionieren.

Gruß uschi
Go to the top of the page
 
+Quote Post
Auge
Beitrag 26.04.2004 - 0:05
Beitrag #5


Anwärter auf W3.org Mitgliedschaft
*****

Gruppe: User
Beiträge: 550
Mitglied seit: 28.11.2001
Wohnort: Berlin Friedrichshain
Mitglieds-Nr.: 107



Hallo

ZITAT
ich weiß was. Und damit ich nicht alleine bleibe
"absolut Positionieren"


Die Beschreibung (speziell das Beispiel) geht aber so nicht auf die wirklich
variable Breite ein. Besonders die Beschreibung von position:relative
ist mehr als verwirrend bzw. unbefriedigend.

Ich habe mir aber ein Workaround (mehr ist es wohl nicht) gebastelt.

CSS:
QUELLTEXT
#left {
left:10px;
top:10px;
padding-right:200px;
position:absolute;
}

#right {
right:10px;
top:10px;
width:180px;
position:absolute;
z-index:2;
}


HTML:
QUELLTEXT
<html>
<head>
<!-- Head-Angaben -->
</head>
<body>
<div id="left">
<!-- Hier der Inhalt -->
</div>
<div id="right">
<!-- Hier z. B. die Navi -->
</div>
</body>
</html>


Das Problem ist, daß es mit NS 4 nicht funktioniert. Wäre die Navigation
auf der linken Seite, würde es funktionieren (mit Umbau wegen padding).
Ist also nur noch die Frage, ob dies noch jemanden ernsthaft interessiert.

Nachtrag: bei #right z-index hinzugefügt, um auf die dortigen Elemente
Zugriff zu haben.

Tschö, Auge

Der Beitrag wurde von Auge bearbeitet: 26.04.2004 - 12:26
Go to the top of the page
 
+Quote Post
amethyst
Beitrag 26.04.2004 - 0:10
Beitrag #6


Kann auf gar keinen Fall einen Videorekorder programmieren!
***

Gruppe: User
Beiträge: 210
Mitglied seit: 08.12.2003
Wohnort: Bad Zwischenahn
Mitglieds-Nr.: 1.751



Es sollte noch ernsthaft interessieren ;-)), es gibt nun mal noch viele, die den 4.xx von netscape benutzen.

Das Menü rechts ist vor allem dann nötig, wenn man seine Seiten auch für Blinde-Surfer praktikabel machen will, denn denen wird dann zuerst der Text und dann die Menülinks vorgelesen. Weiß kaum einer, aber ist ne Überlegung wert.

Gruß und gute Nacht

Uschi
Go to the top of the page
 
+Quote Post
Terry
Beitrag 26.04.2004 - 0:15
Beitrag #7


looks good


Gruppe: User
Beiträge: 43
Mitglied seit: 17.02.2004
Mitglieds-Nr.: 2.047



Ich hab grad mal folgendes getestet:

<div style="width:150px; height: 350px; position:absolute; top:100px; right:50px;">Navi:</div>

<div style="width:60%; height:500px; float:right; margin-right:220px;">Hauptcontainer</div>

Geht im Firefox einwandfrei - aber im IE überhaupt gar nicht! Da floated der Hauptcontainer kein Stück nach rechts, und wenn ich (wie oben) - mehr als 50% width für den Hauptcontainer angeben, dann verschwindet plötzlich der Navi-Container ??? blink.gif

Gibts dafür ne Erklärung oder ist mein Denkansatz so vollkommen falsch? unsure.gif

Wäre schön, wenn mir mal einer der Experten da helfen könnte...

Edit:

Beide floaten klappt allerdings (zumindest im IE 6.0 und im Firefox):

<div style="width:150px; height: 350px;float:right; margin-right:20px;">Navi:</div>
<div style="width:60%; height:1500px; float:right; margin-right:20px;">Hauptcontainer</div>

Der Beitrag wurde von Terry bearbeitet: 26.04.2004 - 0:24
Go to the top of the page
 
+Quote Post
Andreas
Beitrag 26.04.2004 - 6:34
Beitrag #8


____________________
Gruppensymbol

Gruppe: Admin
Beiträge: 1.220
Mitglied seit: 20.10.2001
Mitglieds-Nr.: 3



ZITAT(amethyst @ 26.04.2004 - 1:10)
Es sollte noch ernsthaft interessieren wink.gif), es gibt nun mal noch viele, die den 4.xx von netscape benutzen.

Hi,

das ist hoffentlich nicht ganz ernst gemeint.

Es sind definitiv weniger, als die Usergruppe, welche ohne Javascript - aus welchen Gründen auch immer - unterwegs ist. Und *diese* Usergruppe wird immer vergessen. Wozu also um den NN4.x scheren? Die Nicht-Javascripter sind doch viel wichtiger, da mehr!

Grüße

Andreas
Go to the top of the page
 
+Quote Post
Ede
Beitrag 26.04.2004 - 7:32
Beitrag #9


Ausnahme Poster
*

Gruppe: User
Beiträge: 147
Mitglied seit: 14.07.2003
Wohnort: Schwäbisch Gmünd
Mitglieds-Nr.: 947



@Terry

Hi Terry,

soweit ich mich erinnere:
Wenn du mit float positionierst erst den Container, der positioniert wird, dann den Container der sich am ge'floateten' orientieren soll im Code plazieren.

Beispiel:
QUELLTEXT
<div style="float: right;">Navigationsmenü mal rechts ausgerichtet</div>
<div> Dies ist der Inhalt, der links von der Navigation erscheint</div>


Kanns gerade nicht ausprobieren, weil ich meinen Rechner neu einrichte und Phase noch nicht wieder installiert hab.
Go to the top of the page
 
+Quote Post
Terry
Beitrag 26.04.2004 - 8:29
Beitrag #10


looks good


Gruppe: User
Beiträge: 43
Mitglied seit: 17.02.2004
Mitglieds-Nr.: 2.047



Hallo Ede,

da hast Du schon recht und das funktioniert ja auch - s. Edit.

Aber im 1. Versuch sollte sich der zweite Container ja auch gar nicht am ersten ausrichten, sondern am Body - deshalb ja das große margin-right.

Erreichen wollte ich damit, dass er Navi-Container ein wenig "runter" kommt und nicht oben mit dem anderen zusammen anfängt. (O.k. - Läßt sich natürlich auch mit margin-top beim floaten erreichen...)

Wie gesagt - der Firefox zeigt es so an, wie ich es mir vorgestellt habe, der IE kommt mit der Angabe überhaupt nicht klar, er läßt dabei sogar den Navigationscontainer ganz verschwinden, sobald der Hauptcontainer >50% hat.
Nun ja, also bleibt man besser bei einer Positionierung - entweder nur floaten oder nur absolut positionieren, um den armen IE nicht zu verwirren... wink.gif
Go to the top of the page
 
+Quote Post
Google Bot
Beitrag
Beitrag #


Google Ads









Go to the top of the page
 
Quote Post

2 Seiten V   1 2 >
Reply to this topicStart new topic
1 Besucher lesen dieses Thema (Gäste: 1 | Anonyme Besucher: 0)
0 Mitglieder:

 



RSS Vereinfachte Darstellung Aktuelles Datum: 24.04.2024 - 8:02

taschenkalender
expertise-panel IPS Driver Error

IPS Driver Error

There appears to be an error with the database.
You can try to refresh the page by clicking here