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

Dreispaltiges Layout mit CSS: um Tabellen los zu werden (Seite 3)



<< |< 1 2 3 4 5 6 >| >> 52 Einträge, 6 Seiten
Crian
 2004-02-01 16:41
#25568 #25568
User since
2003-08-04
5866 Artikel
ModeratorIn
[Homepage]
user image
Aha ... ich seh schon, von Dir kann ich einiges lernen zum Thema CSS :)

Vielen Dank schonmal soweit.

Ich habe jetzt für oben, unten, mitte quasi keine Angaben mehr im CSS (nur Rahmenfabe um das Ergebnis zu überprüfen und margin-Abstände, aber keine Positionierungen.

Für die Mittel des dreispaltigen Bereichs habe ich jetzt auch die Breite weggelassen und diesen nach linkem und rechtem div im HTML-Code angegeben. Leider ist der mittlere Teil hier aber länger als der rechte und linke, so dass er unten von ganz links nach ganz rechts geht (klar, er floatet um die anderen beiden divs herum), und nicht in seiner "Spalte" bleibt.

Kann ich ihn daran noch irgendwie hindern?


Edit: Den Fuß hab ich inzwischen auch erfolgreich "ent-tabellifiziert" ;)\n\n

<!--EDIT|Crian|1075649645-->
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
Crian
 2004-02-01 17:48
#25569 #25569
User since
2003-08-04
5866 Artikel
ModeratorIn
[Homepage]
user image
Das bisherige unvollständige "Ergebnis" kann man sich jetzt unter http://www.duehl.de/test.html ansehen...
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-01 18:49
#25570 #25570
User since
2003-11-05
124 Artikel
BenutzerIn

user image
so wie es aussieht, sind hauptl und hauptr im  hauptm
( teste mal, indem du dem hauptm einen border gibst )
wenn der border auch auf hauptl und hauptr greift, dann stimmt wohl was mit den endtags /div nicht

mainmitte ist nach wie vor unnötig :-))

hier nochmal ein simples beispiel, wo es so funktioniert wie du es wohl haben willst

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
<html><head>
<style type="text/css">
#mitte { border:solid 1px; margin-left:205px;margin-right:205px;background-color:#E0E0E0;}
#links { border:solid 1px;width: 200px;  float: left;background-color:#E0E0E0;}
#rechts {border:solid 1px;width: 200px; float: right;background-color:#E0E0E0;}
#kopf {border:solid 1px;margin-bottom:50px;background-color:#E0E0E0;}
#fuss {border:solid 1px;background-color:#E0E0E0;
margin-top:20px;
}
</style>
</head><body>

<div id="kopf"><h1>KOPF</h1>
xxxxx xxxxxxxxxxx xxxxxxxxx xxxxxx
 </div>


<div id="links"><h1>LINKS</h1>
  width: 200px;
  float: left;
 </div>

<div id="rechts"><h1>RECHTS</h1>
  width: 200px;
  float: right;
</div>

<div id="mitte"><h1>MITTE</h1>
  margin-left: 205px;
  margin-right: 205px;
xxxxxxxxxxxxxx xxxxxxxxxxxxx xxxxxxxxx xxxxxxxxxxxxx xxxxxxxxxx xxxxxxxxxx
xxxxxxxxxxxxxx xxxxxxxxxxxxx xxxxxxxxx xxxxxxxxxxxxx xxxxxxxxxx xxxxxxxxxx
xxxxxxxxxxxxxx xxxxxxxxxxxxx xxxxxxxxx xxxxxxxxxxxxx xxxxxxxxxx xxxxxxxxxx
</div>

<div id="fuss" ><h1>FUSS</h1>
xxxxx xxxxxxxxxxx xxxxxxxxx xxxxxx
 </div>
</body>
</html>


ich würde auch keine schriftgröße festlegen ( ist userfreundlicher ) und die bereiche die größenmäßg hervorgehoben werden sollen mit relativen angaben wie zb. 200% umsetzen.
Gruß
KKO
Crian
 2004-02-01 19:19
#25571 #25571
User since
2003-08-04
5866 Artikel
ModeratorIn
[Homepage]
user image
[quote=KKO,01.02.2004, 17:49]mainmitte ist nach wie vor unnötig :-))[/quote]
Ist ja auch leerer Style inzwischen :)

Dein Beispiel hat aber rechts und links feste Breiten. Ich wollte die gern prozentual. Aber zur Not mache ich sie fest.\n\n

<!--EDIT|Crian|1075656051-->
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
Crian
 2004-02-01 19:31
#25572 #25572
User since
2003-08-04
5866 Artikel
ModeratorIn
[Homepage]
user image
[quote=KKO,01.02.2004, 17:49]so wie es aussieht, sind hauptl und hauptr im hauptm
( teste mal, indem du dem hauptm einen border gibst )
wenn der border auch auf hauptl und hauptr greift, dann stimmt wohl was mit den endtags /div nicht[/quote]
Es scheint sie sind da mit drin, aber der W3C-Validator sagt mir, es wär alles i.O.
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-01 22:35
#25573 #25573
User since
2003-11-05
124 Artikel
BenutzerIn

user image
float:left für links und mitte ist wohl doch das beste
.... jetzt meckert auch der W3C-Validator nicht mehr.....
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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Kopf - 3 Spalten - Fuss</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
#links {width: 20%; float:left;}
#mitte {width: 50%; float:left; }
#rechts {/*füllt, bedingt durch float:left von #mitte, die rechte seite auf*/}
#kopf {/*braucht nix zum justieren*/}
#fuss {/*braucht nix zum justieren*/}
#main {width: 100%;/*damit fuss weiß wo er anzufangen hat*/}
</style>


</head>

<body>
 <div id="kopf"><h1>KOPF</h1>
xxxxx xxxxxxxxxxx xxxxxxxxx xxxxxx
 </div>


<div id="main">

<div id="links"><h1>LINKS</h1>
xxxxxxxxxxxxxx xxxxxxxxxxxxx xxxxxxxxx xxxxxxxxxxxxx
 </div>

<div id="mitte"><h1>MITTE</h1>
xxxxxxxxxxxxxx xxxxxxxxxxxxx xxxxxxxxx xxxxxxxxxxxxx xxxxxxxxxx xxxxxxxxxx
xxxxxxxxxxxxxx xxxxxxxxxxxxx xxxxxxxxx xxxxxxxxxxxxx xxxxxxxxxx xxxxxxxxxx
xxxxxxxxxxxxxx xxxxxxxxxxxxx xxxxxxxxx xxxxxxxxxxxxx xxxxxxxxxx xxxxxxxxxx
xxxxxxxxxxxxxx xxxxxxxxxxxxx xxxxxxxxx xxxxxxxxxxxxx xxxxxxxxxx xxxxxxxxxx
xxxxxxxxxxxxxx xxxxxxxxxxxxx xxxxxxxxx xxxxxxxxxxxxx xxxxxxxxxx xxxxxxxxxx
xxxxxxxxxxxxxx xxxxxxxxxxxxx xxxxxxxxx xxxxxxxxxxxxx xxxxxxxxxx xxxxxxxxxx
</div>


<div id="rechts"><h1>RECHTS</h1>
xxxxxxxxxxxxxx xxxxxxxxxxxxx xxxxxxxxx xxxxxxxxxxxxx xxxxxxxxxx xxxxxxxxxx
</div>

</div>

<div id="fuss" ><h1>FUSS</h1>
xxxxx xxxxxxxxxxx xxxxxxxxx xxxxxx
 </div>
</body>
</html>
Gruß
KKO
Crian
 2004-02-02 00:09
#25574 #25574
User since
2003-08-04
5866 Artikel
ModeratorIn
[Homepage]
user image
Schick ... leider ist der Fuss jetzt unter rechts neben Mitte (hab Dein Beispiel direkt unverändert übernommen).
Aber dafür floatet der Mittelbereich nicht mehr in die beiden anderen.

Aber mit style="clear:both;" im Fuß-div bzw. in der CSS-Datei klappt es *freu*.

Vielen Dank für die ausführliche Hilfe.

Was noch auffällt: Die Überrischft der rechten Spalte ist etwas höher als die der linken und der Mitte, das kann man aber wohl durch eine margin-top-Angabe beheben,nehmen ich an, teste ich gleich mal.


Außerdem fällt noch auf, wenn man Kopf, Mitte und Fuß mit verschiebenfarbigen Rahmen umgibt, dass Mitte nach unten aus Main herausragt. Das ist wohl auch der Grund, warum dann Fuß beim ersten Mal rechts daneben gelandet ist.


Ich hab mal width:100% auf height:100% geändert, aber das bringt es auch noch nicht.\n\n

<!--EDIT|Crian|1075674306-->
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
Crian
 2004-02-02 00:30
#25575 #25575
User since
2003-08-04
5866 Artikel
ModeratorIn
[Homepage]
user image
Schau Dir die Ausgabe mal in dieser Version an:

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
56
57
58
59
60
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Kopf - 3 Spalten - Fuss</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
#links {width: 20%; float:left;
    border:5px dotted blue
    }
#mitte {width: 50%; float:left;
    border:5px dotted green
    }
#rechts {/*füllt, bedingt durch float:left von #mitte, die rechte seite auf*/
    border:5px dotted red
    }
#kopf {/*braucht nix zum justieren*/
    border: 10px solid red
    }
#fuss {clear:both;
    border: 10px solid yellow
}
#main {height: 100%;/*damit fuss weiß wo er anzufangen hat*/
    border: 10px solid magenta
}
</style>


</head>

<body>
    <div id="kopf"><h1>KOPF</h1>
        xxxxx xxxxxxxxxxx xxxxxxxxx xxxxxx
    </div>


    <div id="main">
        <div id="links"><h1>LINKS</h1>
        xxxxxxxxxxxxxx xxxxxxxxxxxxx xxxxxxxxx xxxxxxxxxxxxx
        </div>

        <div id="mitte"><h1>MITTE</h1>
        xxxxxxxxxxxxxx xxxxxxxxxxxxx xxxxxxxxx xxxxxxxxxxxxx xxxxxxxxxx xxxxxxxxxx
        xxxxxxxxxxxxxx xxxxxxxxxxxxx xxxxxxxxx xxxxxxxxxxxxx xxxxxxxxxx xxxxxxxxxx
        xxxxxxxxxxxxxx xxxxxxxxxxxxx xxxxxxxxx xxxxxxxxxxxxx xxxxxxxxxx xxxxxxxxxx
        xxxxxxxxxxxxxx xxxxxxxxxxxxx xxxxxxxxx xxxxxxxxxxxxx xxxxxxxxxx xxxxxxxxxx
        xxxxxxxxxxxxxx xxxxxxxxxxxxx xxxxxxxxx xxxxxxxxxxxxx xxxxxxxxxx xxxxxxxxxx
        xxxxxxxxxxxxxx xxxxxxxxxxxxx xxxxxxxxx xxxxxxxxxxxxx xxxxxxxxxx xxxxxxxxxx
        </div>

        <div id="rechts"><h1>RECHTS</h1>
        xxxxxxxxxxxxxx xxxxxxxxxxxxx xxxxxxxxx xxxxxxxxxxxxx xxxxxxxxxx xxxxxxxxxx
        </div>
    </div>

    <div id="fuss"><h1>FUSS</h1>
        xxxxx xxxxxxxxxxx xxxxxxxxx xxxxxx
    </div>
</body>
</html>


.. sehr aufschlußreich: Rechts ist gleich Main und Mitte ragt nach unten aus Main heraus.\n\n

<!--EDIT|Crian|1075674717-->
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-02 01:23
#25576 #25576
User since
2003-11-05
124 Artikel
BenutzerIn

user image
wird genauso angezeigt, wie die version von mir ( nur halt mit bunten rahmen )
habe den IE 6.0 SP1
das sich links und rechts noch einen border rüberziehen ist aber auch merkwürdig
tables sind irgendwie sicherer *lol*
Gruß
KKO
KKO
 2004-02-02 01:29
#25577 #25577
User since
2003-11-05
124 Artikel
BenutzerIn

user image
nachtrag zum border links - rechts
rechts zieht ja den border bis an die linke seite
scheint, dass border nicht begreift, dass links erst bei 80% der seite anfängt
Gruß
KKO
<< |< 1 2 3 4 5 6 >| >> 52 Einträge, 6 Seiten



View all threads created 2004-01-31 01:24.