You are not logged in.

Tabelle mit CSS formatieren - wie?

wcf.regNote.message

Prometheus

Administrator

  • "Prometheus" started this thread

Posts: 3,278

  • Send private message

1

Friday, October 15th 2004, 11:51am

Tabelle mit CSS formatieren - wie?

ich hab jetzt alle möglichen seiten durchsucht nach einer möglichkeit eine komplexe tabelle mit css aufzubauen. mit reinen html befehlen funktioniert das überhaupt nicht das steht fest. nur mit dem css werd ich irgendwie nicht ganz schlau. mansche seiten beschreiben das auch die css formatierungen von den meisten browsern falsch oder garnicht interpretiert werden und andere wiederum schreiben das geht grundsätzlich alles. was stimmt denn nun? geht das oder geht es nicht?

folgender aufbau muss realisiert werden:

äußere tabellenausmaße: 820 pixel breit 600 pixel hoch
kopf: 820 pixel breit, 120 pixel hoch
unter dem kopf 3 spalten: links 200 pixel, mitte 400 pixel, rechts 220 pixel, 480 pixel hoch

so und das ganze muss nun so sein das wenn in der mitte ein bild eingeblendet wird was wegen mit 1000 pixel breit ist dadurch die tabelle kein einziges pixel breiter wird. die seite ist im augenblick mit frames realisiert aber davon würde ich gerne weg kommen. jemand ne idee wie ich so ein konstrukt aufbaue so das wirklich alles fixiert ist und sich rein garnichts verschiebt?
Jedwege Anfragen bitte an Technomausi oder ShaoKhan richten. Dieses Konto ist und bleibt inaktiv.

bauser

Intermediate

Posts: 384

Occupation: Senior Software Engineer

  • Send private message

2

Friday, October 15th 2004, 12:37pm

ich hab noch nie mit tabellen"köpfen" gearbeitet, ichmach hier einfach mal n td mit den ausmaßen hin

Source code

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<table style="width:820px; height:600px;">
  <tr>
    <td colspan="3" style="width:820px; height:120px;">
    </td>
  </tr>
  <tr>
    <td style="width:200px; height:480px;">
    </td>
    <td style="width:400px; height:480px;" cellpadding="0">
      <div style="width:400px;height:480px;position:absolute; top:0px;left:0px; overflow:hidden;">
        <img src="bild.png">
      </div>
    </td>
    <td style="width:220px; height:480px;">
    </td>
  </tr>
</table>


ich habe in letzter zeit viel mit css psoitioniert und größen bestimmt etc und ichkann nur sagen dass ich festgestellt habe, dass 220 pixel im IE weniger sind als 220 pixel im Firefox. Aber da ich nich dumm war hab ich einfach http_user_agent nachgeschaut nach browser und dann nach IE und Firefox unterschieden. hab auch andere browser probiert, die ließen sich aber alle unter IE und Firefox zusammenfassen.

mit dem

position: absolute
bedeutet dass du die position absolut im bezug aufs elternelement angibst.

top:0px;
left:0px;
0 pixel abstand zum oberen und linken rand des elternelements.

overflow:hidden
mit overflow kannst du bestimmen wie inhalt, der über die grenzen des divs hinausgeht behandelt werden soll (darum habe ich auch im div tag nochmal genau breite und höhe angegeben). hidden heißt dass er das wa szu viel ist abschneidet. mit scrolling statt hidden würde der browser scrolleisten anbieten (aber auch wenn der inhalt passt), mit overflow:visible wird der overflow inhalt immer antgezeigt und mit overflow:auto entscheidet der browser selber (scrolling ist bei auto erlaubt).

das ist jetzt aber nur ne idee, ob es so klappt müsste getestet werden, wo cih jetzt keine zeit zu habe ;)

EDIT: semikolon hinzugefügt ;)
I'm Tony Menthanar! You fuck wit me, you fuckin' wit da best!

Prometheus

Administrator

  • "Prometheus" started this thread

Posts: 3,278

  • Send private message

3

Friday, October 15th 2004, 2:27pm

schau mer einfach mal wie das aussieht :D ... das ist das ergebnis wenn ich haar genau die tabelle nehme die du gepostet hast.

Zelle 1
Zelle 2
Zelle 3
Zelle 4


scheint also echt zu funktionieren. ich kratze jetzt mal den code der ganzen seite zusammen und teste das mal komplett so. allerdings was mich etwas wundert ist das der teil in dem div nicht da ist. also zelle 3 fehlt ganz.

ach ja .. das ganze ist für die seite hier ---> www.cmb-solutions.de
Jedwege Anfragen bitte an Technomausi oder ShaoKhan richten. Dieses Konto ist und bleibt inaktiv.

bauser

Intermediate

Posts: 384

Occupation: Senior Software Engineer

  • Send private message

4

Friday, October 15th 2004, 2:32pm

hmm was hast du dem div denn als inhalt gegeben ?

EDIT: mir fällt grade auf dass ich oben ein semikolon vergessen habe. nach dem overflow:hidden muss ein ; folgen... also overflow:hidden;
I'm Tony Menthanar! You fuck wit me, you fuckin' wit da best!

Prometheus

Administrator

  • "Prometheus" started this thread

Posts: 3,278

  • Send private message

5

Friday, October 15th 2004, 3:10pm

das semikolon hab ich schon dazu gemacht aber funktioniert dennoch nicht. ich hab das ganze auch jetzt mal in mein cms übernommen und dort versucht aufzubauen. grundsätzlich funktioniert das schon nur ich denke durch irgend ein problem in dem div oder so läuft da was schief. sobald ich da nun inhalt einfügen will dreht der total an der uhr.

ach ja ... die tabelle sieht so aus

Quoted

<table border="1" style="width:820px; height:600px;">
<tr>
<td colspan="3" style="width:820px; height:120px;">Zelle 1
</td>
</tr>
<tr>
<td style="width:200px; height:480px;">Zelle 2
</td>
<td style="width:400px; height:480px;" cellpadding="0">
<div style="width:400px;height:480px;position:absolute; top:0px;left:0px; overflow:hidden;">
<img src="bild.png">Zelle 3
</div>
</td>
<td style="width:220px; height:480px;">Zelle 4
</td>
</tr>
</table>
Jedwege Anfragen bitte an Technomausi oder ShaoKhan richten. Dieses Konto ist und bleibt inaktiv.

bauser

Intermediate

Posts: 384

Occupation: Senior Software Engineer

  • Send private message

6

Friday, October 15th 2004, 3:14pm

was heisst denn er dreht an der uhr ? wie genau ? langsam oder schnell ? :P

ne das einzige wo ich eben überlegt hab ist ob er das mit dem top:0px; und left:0px wirklich am rand vom td ausrichtet, und dann auch noch am inneren wie wir das wollen :)

du kannst mal probieren bei dem position: absolute; ein position:relative; einzutragen und dann schaun was passiert.

EDIT: ich habs ausprobiert und das problem ist, dass er das DIV am browserfenster orientiert und nich an der tabelle (scroll mal hier auf der seite ganz hoch und sieh links oben in die ecke *g*). er positioniert es also ganz oben links in die ecke. weitere erkenntnisse folgen

und weiter gehts:

wenn du position:relative machst klappt es, dann setz er es in die tabelle.
(position:relative; top:0px; left:0px; ist im prinzip das gleiche als wenn dus weglässt, da relative heisst dass du die positionierung im bezug auf die positionierung anbigst, an der er eigentlich starten würde. sprich 0px nach unten und 0px nach rechts vom eigentlich startpunkt ist der eigentliche startpunkt.)

du könntest auch probieren ob der das overflow auch in einem td tag interpretieren kann und versuchen <td style="overflow:hidden"><img src="bild.png"></td>, also das div komplett weglassen.

oder du setzt das bild als hintergrundbild für das <td>, verhinderst aber so dass zum beispiel per scrolleiste das ganze bild angesehn werden kann
I'm Tony Menthanar! You fuck wit me, you fuckin' wit da best!

Prometheus

Administrator

  • "Prometheus" started this thread

Posts: 3,278

  • Send private message

7

Friday, October 15th 2004, 4:39pm

garnicht mal übel muss ich sagen ... das funktioniert bis jetzt mal echt gut.

zum vergleich:
seite mit frames: www.cmb-solutions.de
seite mit table: cms.cmb-solutions.de/cmbsolutionsnew/

ist bis jetzt aber nur die startseite umgesetzt. allerdings is da was komisch. ich hab cellspacing="0" und cellpadding="0" angegeben und auch sonst nichts weiter und trotzdem ist zum einen zwischen den buttons ein abstand und außerdem noch wenn man drüber fährt zucken die darunter liegenden buttons. die buttons selber haben aber 100% alle die gleiche größe.
Jedwege Anfragen bitte an Technomausi oder ShaoKhan richten. Dieses Konto ist und bleibt inaktiv.

piep001

Intermediate

Posts: 338

Location: NRW

Occupation: Fachinformatiker (AE)

  • Send private message

8

Friday, October 15th 2004, 5:36pm

Ich hab da jetzt leider keine Zeit genau durchzuschaun, aber wenn du es mit CSS machen willst, also richtig, so mit Klassen und so, dann hab ich einmal ein Beispiel als Quelltext und einmal ein Beispiel als Link...

Link: http://www.pixy.cz/blogg/clanky/css-3col-layout/

Quelltext:

PHP Source code

 
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

<html>

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

<body>
<div id="main">
    
   <div class="cleaner"></div>
    
   <div id="content1"><div id="content2">
        <!--NAVBAR-->
        <div id="navbar">
            <div class="navbar_element"><a href="login.php" title="Hier geht es zum Login">Login</a></div>
            <div class="navbar_element"><a href="register.php" title="Hier k&ouml;nnen Sie sich f&uuml;r den OnlineShop registrieren">Registrieren</a></div>
            <div class="navbar_element"><a href="index.php" title="Startseite">Home</a></div>
            <div class="cleaner">&nbsp;</div>
        </div>
    <!--NAVBAR-->
    
    
        <!--INHALT-->
        <div id="content" style="text-align:center;">
         <h1>Test</h1>
         
            Auf dieser Seite steht der Inhalt des gesamten Dramas.
            Mit ein bissl text. bla bla bla <br />bla bla bla bla bla bla
            bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla<br />
            bla bla bla
    </div>
    <!--INHALT-->
        
        
        <div class="cleaner"></div><!--floaten beenden !!! -->
  </div>

    
</div>

</body>
</html>


CSS:

Source code

 
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
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121

/*ALLGEMEINE FORMATIERUNGEN*/
body {
	color: #000000;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 10pt;
	line-height: 135%;
	margin: 0px;
}

/*DIV's*/
#main {
	margin-left: 0px;
	margin-top: 10px;
}


/*Definitionen run um die Navbar (inkl. Links)*/
#navbar {
	float: left;
	width: 205px;
	margin: 0px;
	background-color: #4682B4;
	
}

/*weite muss 202 ergeben*/
.navbar_element {
	width: 200px;
	margin-left: 0px;
	margin-bottom: 3px;
	padding-left: 5px;
	background-color: #9CA8B4;
	margin-top: 1px;
	color: #FFFFFF;
}

#navbar hr {
	margin-left: 23px;
	width: 201px;
}
#navbar a:link, #navbar a:visited, #navbar a:active {
	color: #FAFAFA;
	text-decoration: none;
}
#navbar a:hover, #navbar a:focus {
	color: #F0F0F0;
	text-decoration: none;
	font-weight: bold;
}
#navbar_warenkorb {
	display: none;
	text-align: center;
	color: #FAFAFA;
}
/*============================================*/



/* 
	+------------------------------------------+
   | DEFINITION DES CONTENT-BEREICHES         |
	+------------------------------------------+
*/
#content1 {
	margin-top: 10px;
	margin-bottom: 10px;
	margin-left: 0px;
	margin-right: 0px;
	border: 1px solid #DEDEDE;
	width: auto;
	float: none;
	background-color: #0000FF;
}

#content2 {
	margin-left: 0px;
	margin-right: 0px;
	//background: #FFFFFF url(u_border.gif) top left repeat-y;
	background-color: #00FF00;
	width: auto;
}

#content {
	margin: 0px;
	padding-left: 20px;
	margin-left: 205px;
	width: auto;
	background-color: #FF0000;
}

#content h1 {
	color: #708090;
	margin-top: 0px;
}

/*--------------------------------------------------------------------------*/


.cleaner {
	clear: both;
	font-size: 1px;
	height: 1px;
}


/*spacer. zum platz machen*/
.space5 {
	height: 5px;
}
.space10 {
	height: 10px;
}
.space15 {
	height: 15px;
}
.space20 {
	height: 20px;
}
.space25 {
	height: 25px;
}
Spaß im Netz auf www.piep001.de

bauser

Intermediate

Posts: 384

Occupation: Senior Software Engineer

  • Send private message

9

Monday, October 18th 2004, 10:47am

also wenn du mit buttons links die menüpunkte meinst, dann liegt das wahrschenlich daran dass die fettgroßerotschrift größer ist als die zelle in der die schrift steht. darum wrid der die zelle vergrößern damit noch ales reinpasst und somit zucken die andern mit.

verusch entweder mal mit einem

Source code

 
1

style="table-layout:fixed;"


das heisst die größenangaben der tabelle haben vorrang vor dem inhalt (kann sein dass es nur für die breite gilt).

oder mach die zellen alle mal so 3 pixel höher. und schau ob sie dann imme rnoch zucken.
I'm Tony Menthanar! You fuck wit me, you fuckin' wit da best!

Prometheus

Administrator

  • "Prometheus" started this thread

Posts: 3,278

  • Send private message

10

Monday, October 18th 2004, 11:16am

größer werden kann da nichts weil wie gesagt die buttons grafiken sind mit einheitlicher größe. ich hatte extra wegen dem zucken grafiken draus gemacht weil am anfang war das blöd das die ganze leiste am zucken war wenn man drüber gefahren ist.
Jedwege Anfragen bitte an Technomausi oder ShaoKhan richten. Dieses Konto ist und bleibt inaktiv.

bauser

Intermediate

Posts: 384

Occupation: Senior Software Engineer

  • Send private message

11

Monday, October 18th 2004, 11:22am

hätte vorm antworten mal quelltext ansehn sollen ^^

hmm wie wärs wenn du um jedes bild ein <div> mit absoluter positionierung setzt, dann sollte sich an den positionen nichts ändern.
I'm Tony Menthanar! You fuck wit me, you fuckin' wit da best!

wcf.user.socialbookmarks.titel