Probleme bei Positionierung mittels CSS

24.04.2005, 12:53

Hallo. Ich habe da ein Problem. Ich moechte 4 Bloecke Positionieren.
Innerhalb des 4. Blocks moechte ich ein paar Links positionieren,
bei denen der Bezugspunkt fuer die Positionsangaben jeweils links oben in der
"Rightbox" liegen soll (da wo das Sternchen ist)

Code:

?--------------------------------------------------
|                    |                            |
|logobox             |   Titlebox                 |
|                    |-----------------------------
---------------------*-----------------------------
|                    |Rightbox     Link5          |
|                    |         Link2              |
|Leftbox             |   Link1        Link        |
|                    |       Link3                |
|                    |             Link4          |
----------------------------------------------------

Die 4 Boxen hab ich soweit positioniert, nur das mit den Links klappt nicht.
Weder wenn ich die links mit relative, noch mit absolute positioniere.
Positioniere ich sie mit absolute, werden sie relative zum Fensternullpunkt positioniert (links oben, wo das ? steht). Da stimmen dann die Positionen der Links zueinander.
Wenn ich relative benutze, stehen sie zwar in der Rightbox, aber die Positionen stimmen ueberhaupt nicht.

Hier mal meine Index-Datei und die CSS-Datei:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<link href="css.css" rel="stylesheet" type="text/css">
<title>Welcome on AJsWeb</title>
</head>
<body>
<div id="logobox">
    [img]img/Logo.gif[/img]
</div>
<div id="titlebox">
  Oder die etwas ausf&uuml;hrlichere Antwort auf die Frage nach dem Leben,
  dem Universum und Allem
</div>
<div id='leftbox'>
  <h1>Herzlich willkommen auf meiner Homepage</h1>

  Fuelltext
</div>
<div id='rightbox'>
  <div id='deathlink'><h3>alles &uuml;ber mich</h3></div>
  <div id='link0'>
     <h5>link 0</h5>
  </div>
  <div id='link1'>
     <h5>link 1</h5>
  </div>
  <div id='link2'>
     <h5>link 2</h5>
  </div>
  <div id='link3'>
     <h5>link 3</h5>
  </div>
  <div id='link4'>
     <h5>link 4</h5>
  </div>
  <div id='link5'>
     <h5>link 5</h5>
  </div>
  <div id='link6'>
     <h5>link 6</h5>
  </div>
  <div id='link7'>
    <h5>link 7</h5>
  </div>
</div>
</body>
</html>

;------------------------------------------------------------------------------
hier die CSS Datei


#link0  {position:relative; left:181px; top:4px; width:127px; height:23px; z-index:1;}
#link1  {position:relative; left:50px; top:44px; width:127px; height:23px; z-index:1;}
#link2  {position:relative; left:11px; top:128px; width:127px; height:23px; z-index:1;}
#link3  {position:relative; left:174px; top:213px; width:127px; height:23px; z-index:1;}
#link4  {position:relative; left:31px; top:171px; width:127px; height:23px; z-index:1;}
#link5  {position:relative; left:9px; top:82px; width:127px; height:23px; z-index:1;}
#link6  {position:relative;  left:199px; top:47px; width:127px; height:23px; z-index:1;}
#link7  {position:relative; left:197px; top:172px; width:127px; height:23px; z-index:1;}
#deathlink  {position:relative; left:166px; top:103px; width:127px; height:23px; z-index:1;}
#logobox  {float:left; z-index:1; }
#titlebox {float:left; width:400px; z-index:1; }
#leftbox {clear:left;float:left; width:400px; padding:10px; background:red}
#rightbox {float:left;top:0px, left:0px;}

body {color:#ffffff; background-color:#000000; }

24.04.2005, 19:20

Das Problem ist das die Positionierung mit relative auf die "normale" Anfangsposition des Elements bezogen ist. Das heißt die Werte für Left und Top beziehen sich auf die startposition des Elements unterhalb des nächsten bzw nach dem nächsten je nach display typ. Laut CSS spezifikation würde das Problem mit position:fixed gelöst werden können. Da es die Startposition top/left 0 auf die linke obere Ecke des Elternobjektes (<div id="rightbox">) Bezieht. Leider wird diese Option von keinem Browser umgesetzt. Du könntest mit einem kleinen PHP Script abhife schaffen in dem du die Position auf Absolute setzt und die Positionierungsangaben von der Rightbox hinzuaddierst. Dann ist die Startposition deiner link ID's quasie gelich der CSS funktion fixed.

Gruß René.

24.04.2005, 19:32

Mir ist gerade noch etwas aufgefallen. Es ist zwar laut Spezifikation nicht ganz richtig klappt aber mit Mozilla und IE.

die links als <a> Tags ohne <div> und den <div> für die Box beibehalten. Dann beide Absolute definieren und dann hast du bei den <a> tags quasi die position fixed.

<div id="rightbox">
<a href="xyz.html" class="link1" />
<a href="xyz.html" class="link2" />
</div>

CSS

#rightbox {border: solid black 1px;
position:absolute; top:70px; left:600px;
height:100px;}
#rightbox a.link1 {display:block;
position:absolute; top:60px; left:5px;
z-index:1;}
#rightbox a.link2 {display:block;
position:absolute; top:30px; left:25px;
z-index:1;}

Hoffe das ist in etwa das was du wissen wolltest.

25.04.2005, 04:38

Zitat:

Zitat von Rene-Kockisch

Hoffe das ist in etwa das was du wissen wolltest.

Ich will ja aber die Logobox, die Titelbox, die Leftbox und die Rightbox
floaten lassen, damit wenn jemand die Schriftgroesse verstellt, es trotzdem noch richtig dargestellt wird. Und nur die links sollen innerhalb der Rightbox
relativ zum Nullpunkt der Rightbox positioniert werden.

Die Loesung habe ich inzischen:

Ich floate die oben genannten 4 Boxen, jedoch versehe ich die Rightbox zusaetzlich mit einem "position: relative; top: 0px; left: 0px;".

Eine box kann also gleichzeitig gefloatet werden und relativ positioniert werden.

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
[Erledigt] Firefox / IE - Probleme		HTML, Usability und Barrierefreiheit	5	20.07.2009 17:04
Übergabe von eingegebenem String mittels Formular und POST?!	vampsoftchef	PHP Tipps 2006	7	18.10.2006 20:06
Probleme bei Speicherung von serialize() Strings	Manni2k	PHP Tipps 2006	13	15.10.2006 15:06
Probleme mit mbstring extension unter Debian	HStev	Server, Hosting und Workstations	3	30.08.2006 20:55
Probleme mit Rechteverteilung chmod() per script!!!???	Funky_	PHP Tipps 2006	7	17.06.2006 17:10
Connection Probleme PHP-MSSQL	DaOnkel	PHP Tipps 2006	4	11.04.2006 07:39
Probleme bei der Installation von Turck MMCache	tomx992	PHP-Fortgeschrittene	2	27.09.2005 20:31
Probleme mit von PHP erstellten Verzeichni tssen und Dateien		PHP Tipps 2005-2	2	23.08.2005 22:28
mysql mittels php abfragen- array problem		PHP Tipps 2005-2	6	20.07.2005 15:21
[Erledigt] hilfe! probleme mit...		PHP Tipps 2005	4	12.04.2005 22:55
Zwei Rechner ins Netz - Router - Hub - Probleme...	imported_Ben	Off-Topic Diskussionen	37	13.01.2005 21:36
[Erledigt] Technische Probleme mit Sessions		PHP-Fortgeschrittene	4	18.11.2004 14:45
[Erledigt] Probleme mit Fremdsprachen		HTML, Usability und Barrierefreiheit	2	21.09.2004 17:11
sendmail mittels popen ausführen???		PHP Tipps 2004	0	09.08.2004 19:54
PHP Bilder in DB / Probleme bei Änderung		PHP-Fortgeschrittene	1	05.06.2004 11:20


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

24.04.2005, 19:20
Gast Beiträge: n/a	Das Problem ist das die Positionierung mit relative auf die "normale" Anfangsposition des Elements bezogen ist. Das heißt die Werte für Left und Top beziehen sich auf die startposition des Elements unterhalb des nächsten bzw nach dem nächsten je nach display typ. Laut CSS spezifikation würde das Problem mit position:fixed gelöst werden können. Da es die Startposition top/left 0 auf die linke obere Ecke des Elternobjektes (<div id="rightbox">) Bezieht. Leider wird diese Option von keinem Browser umgesetzt. Du könntest mit einem kleinen PHP Script abhife schaffen in dem du die Position auf Absolute setzt und die Positionierungsangaben von der Rightbox hinzuaddierst. Dann ist die Startposition deiner link ID's quasie gelich der CSS funktion fixed. Gruß René.

24.04.2005, 19:32
Gast Beiträge: n/a	Mir ist gerade noch etwas aufgefallen. Es ist zwar laut Spezifikation nicht ganz richtig klappt aber mit Mozilla und IE. die links als <a> Tags ohne <div> und den <div> für die Box beibehalten. Dann beide Absolute definieren und dann hast du bei den <a> tags quasi die position fixed. <div id="rightbox"> <a href="xyz.html" class="link1" /> <a href="xyz.html" class="link2" /> </div> CSS #rightbox {border: solid black 1px; position:absolute; top:70px; left:600px; height:100px;} #rightbox a.link1 {display:block; position:absolute; top:60px; left:5px; z-index:1;} #rightbox a.link2 {display:block; position:absolute; top:30px; left:25px; z-index:1;} Hoffe das ist in etwa das was du wissen wolltest.