Schrift
Start · Board · Weitere Sprachen · HTML, CSS und Javascript
[thread]2189[/thread]

Positionierung mit CSS: Ersetzen von verschachtelten Tabellen



<< >> 5 Einträge, 1 Seite
Ronnie
 2004-02-03 16:04
#25600 #25600
User since
2003-08-14
2022 Artikel
BenutzerIn
[default_avatar]
Ich habe ein ähnliches Problem wie crian im vorherigen Thread. Ich möchte im unteren Template die Blindtabelle 'Suchergebnisse', die nur der Positionierung dient, entsorgen. Anschließend suche ich einen XHTML konformen Weg meine Ausgabe trotzdem entsprechend verschachtelt darzustellen. Vor allem die Tatsache das die Anzahl möglicher Elemente abhängig von der Ergebnissmenge der Suchabfrage ist, bereitet mir Kopfschmerzen.

Code: (dl )
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<TMPL_INCLUDE NAME="header.tmpl">
<div id="ico_search">
  <img src="images/ico_search.gif" width="73" height="65" border="0" alt="Suchmaske:" />
</div>
<div id="navigation">
  <TMPL_INCLUDE NAME="navbar.tmpl">
</div>
<div id="search_template">
  <form action="<TMPL_VAR NAME="url">" method="post">
  <TMPL_INCLUDE NAME="search.tmpl">
  </form>
</div>
<TMPL_IF name="results">
<div id="search_result">
<table summary="Suchergebnisse:">
<TMPL_LOOP name="connection_loop">
 <tr class="grey">
  <td>
    <TMPL_INCLUDE NAME="tbl_connection.tmpl">
  </td>
 <TMPL_LOOP name="subnet_loop">
  <td>
    <TMPL_INCLUDE NAME="tbl_subnet.tmpl">
    <a href="edt_subnet.pl?eid=<TMPL_VAR name="snid">">[Subnetz bearbeiten]</a>
    <hr />
     <TMPL_LOOP NAME="component_loop">
       <TMPL_INCLUDE NAME="tbl_components.tmpl">
     </TMPL_LOOP>
  </td>
 </TMPL_LOOP>
 </tr>
 <tr class="dark">
  <td><a href="edt_subnet.pl">[Neues Subnetz]</a></td>
 </tr>
</TMPL_LOOP>
 <tr class="grey">
  <td>
   <a href="edt_connect.pl">[Neue Anbindung]</a>
  </td>
 </tr>
</table>
<br />
</div>
</TMPL_IF>
<TMPL_INCLUDE NAME="footer.tmpl">


Hat von euch jemand eine Idee?
Ronnie
 2004-02-03 16:38
#25601 #25601
User since
2003-08-14
2022 Artikel
BenutzerIn
[default_avatar]
Ich habe mir folgende Alternative überlegt:
Code: (dl )
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<!doctype html public "-//W3C//DTD HTML 4.0 //EN">
<html>
<head>
<title>div</title>
<meta name="author" content="Ronnie">
<meta name="generator" content="Ulli Meybohms HTML EDITOR">
<style type="text/css">
<!--
h1 { font-size:24pt;
     color:P
     border-bottom:solid thin black; }

.rleft   { width: 180px; float: left; background-color:#FFDDDD; }
.gleft   { width: 180px; float: left; background-color:#DDFFDD; }
.bleft   { width: 250px; float: left; background-color:#DDDDFF; }
-->
</style>
</head>
<body text="#000000" bgcolor="#FFFFFF" link="#FF0000" alink="#FF0000" vlink="#FF0000">
<h1>Nested DIVs</h1>
<div>
        <div class="rleft">
        Franz jagt im total verwahrlosten Taxi quer durch Bayern.
        </div>
        <div class="gleft">
        Franz jagt im total verwahrlosten Taxi quer durch Bayern.
        </div>
        <div class="bleft">
        Franz jagt im total verwahrlosten Taxi quer durch Bayern.
        Franz jagt im total verwahrlosten Taxi quer durch Bayern.
        Franz jagt im total verwahrlosten Taxi quer durch Bayern.
        Franz jagt im total verwahrlosten Taxi quer durch Bayern.
        Franz jagt im total verwahrlosten Taxi quer durch Bayern.
        Franz jagt im total verwahrlosten Taxi quer durch Bayern.
        </div>
</div>
<br />
<div>
        <div class="rleft">
        Franz jagt im total verwahrlosten Taxi quer durch Bayern.
        </div>
        <div class="gleft">
        Franz jagt im total verwahrlosten Taxi quer durch Bayern.
        </div>
        <div class="bleft">
        Franz jagt im total verwahrlosten Taxi quer durch Bayern.
        Franz jagt im total verwahrlosten Taxi quer durch Bayern.
        Franz jagt im total verwahrlosten Taxi quer durch Bayern.
        Franz jagt im total verwahrlosten Taxi quer durch Bayern.
        Franz jagt im total verwahrlosten Taxi quer durch Bayern.
        Franz jagt im total verwahrlosten Taxi quer durch Bayern.
        </div>
</div>
</body>
</html>

Leider hat das <br /> hier nicht die erhoffte Wirkung. Wie erreiche ich das eine zweite "Zeile" entsprechend weit nach unten versetzt beginnt?\n\n

<!--EDIT|Ronnie|1075819227-->
Crian
 2004-02-04 11:40
#25602 #25602
User since
2003-08-04
5871 Artikel
ModeratorIn
[Homepage]
user image
Hmmm ... zeichne doch mal auf (ascii-Grafik ;-) wie es ist und wie es sein soll (oder mach einen Screenshot von beidem).
s--Pevna-;s.([a-z]).chr((ord($1)-84)%26+97).gee; s^([A-Z])^chr((ord($1)-52)%26+65)^gee;print;

use strict; use warnings; Link zu meiner Perlseite
KKO
 2004-02-04 12:14
#25603 #25603
User since
2003-11-05
124 Artikel
BenutzerIn

user image
wenn du die 2. zeile wieder am linken rand beginnen lassen willst, dann darfst du dem .bleft kein float:left geben
falls es das ist, was du meinst
Gruß
KKO
Ronnie
 2004-02-04 12:17
#25604 #25604
User since
2003-08-14
2022 Artikel
BenutzerIn
[default_avatar]
Habe es mittlerweile aufgegeben, in der ursprünglichen Form. Werde jetzt eine einfach verschachtelte Variante nutzen:

Code: (dl )
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!doctype html public "-//W3C//DTD HTML 4.0 //EN">
<html>
<head>
<title></title>
<meta name="author" content="Ronnie">
<meta name="generator" content="Ulli Meybohms HTML EDITOR">
<style type="text/css">
<!--
h1 { font-size:24pt;
     color:P
     border-bottom:solid thin black; }

.red       { position: relative; left: 16px; background-color:#FFBBBB; }
.yellow    { position: relative; left: 16px; background-color:#FFFFDD; }
.blue      { position: relative; left: 16px; background-color:#BBBBFF; }

-->
</style>
</head>
<body text="#000000" bgcolor="#FFFFFF" link="#FF0000" alink="#FF0000" vlink="#FF0000">
<h1>Nested DIVs</h1>
<div class="red">
    Franz jagt im total verwahrlosten Taxi quer durch Bayern.
    <div class="yellow">
    Franz jagt im total verwahrlosten Taxi quer durch Bayern.
        <div class="blue">
        Franz jagt im total verwahrlosten Taxi quer durch Bayern.
        </div>
    </div>
</div>
</body>
</html>


Da wo jetzt noch der Blindtext ist kommen dann die jeweiligen Tabellen rein. Die <div>-Tags werden mit den Template-Loops ergänzt.

Gruss,
Ronnie
<< >> 5 Einträge, 1 Seite



View all threads created 2004-02-03 16:04.