Toon posts:

[CSS] Vertical alignment?

Pagina: 1
Acties:

zondag 25 augustus 2002 17:41

Acties:
  • StarLite
  • Registratie: Januari 2000
  • Laatst online: 17-08 23:21

StarLite

'ON ERROR RESUME NEXT

Topicstarter
Ik ben wat aan het stoeien met CSS [dit had ik eerder moeten doen! ;) ]

Ik heb de layout gedaan via tables [3 kolommen naast elkaar] alleen vertikaal staat alles dus gecentreerd IPV bovenaan de table.

Layout van de pagina:
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

<table class="layout">
<TR>
<TD>

<table class="menu">
<tr> 
<td>
 
< inhoud linkse table-cell >

</TR>
</TD>
</TABLE>

</TD>

<TD>
<table class="spacer">
  <tr>
    <td>
        < Inhoud spacer [&nbsp; dus] > 
    </td>
  </tr>
</table>
</TD>

<TD>
<table class="news">
  <tr>
    <td>
<div id="news">
< nieuws >
</div>

    </td>
  </tr>
</table>


CSS code
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

body 
{
background-image: url("bg.bmp")
}


table.layout
{
vertical-align: top;
background-color: transparent;
left: 0;
top: 50;
width: 800;
}

table.spacer
{
width: 75 
}

table.news
{
vertical-align: top;
}


table.menu
{
vertical-align: top;
background-color: #CCCCCC;
border-style: solid;
border-width: 1px;
border-color: #000000;
left: 0;
top: 50;
width: 125;
height: 500;
}


#menu 
{
font-family: verdana,helvetica,arial,sans-serif;
font-size: 13px;
font-solor: #000000;
text-align: left;
}

#news 
{
font-family: verdana,helvetica,arial,sans-serif;
font-size: 13px;
font-solor: #000000;
text-align: left;
border-style: solid;
border-width: 1px;
}


a.nounderline{text-decoration:none}
a:link    {color:#333333; background-color:transparent}
a:visited {color:#999999; background-color:transparent}
a:active  {color:#333333; background-color:transparent}
a:hover   {color:#666666; background-color:transparent


Nou gebruik ik met nieuws ook 1 table per nieuws item, maar die staan dus vertikaal gecentreerd IPV bovenin de nieuws kolom.

Hoe kan ik die nieuws items nu bovenin de nieuws kolom krijgen¿

tyrips, tywreps, tiewreps, tiereps, tie raps, ripties, taiwraps, kabelbindbandjes » Tie Wraps
\o/

zondag 25 augustus 2002 20:28

Acties:
  • KillR-B
  • Registratie: Mei 2002
  • Laatst online: 20-01 20:49

KillR-B

Probeer:

table.news
{
vertical-align: top;
}

....eens te vervangen door:

td.news
{
vertical-align: top;
}

En in je HTML bestand de "class=news" in de TD tag te plaatsen, dus:
<TD class="news">

zondag 25 augustus 2002 20:34

Acties:
  • Thijsmans
  • Registratie: Juli 2001
  • Laatst online: 22:05

Thijsmans

⭐⭐⭐⭐⭐ (5/5)

KillR-B heeft het aan het juiste eind. valign (html, css=vertical-align) is een eigenschap van een cel, niet van een tabel.

Privacy-adepten vinden op AVGtekst.nl de Nederlandse AVG-tekst voorzien van uitspraken en besluiten.

zondag 25 augustus 2002 21:22

Acties:
  • StarLite
  • Registratie: Januari 2000
  • Laatst online: 17-08 23:21

StarLite

'ON ERROR RESUME NEXT

Topicstarter
Duh!
Tuurlijk.
* StarLite » |:(

Tnx, ga ik nu eens verder klooien met transparency [alpha]. Wil nog niet echt lukken :(

tyrips, tywreps, tiewreps, tiereps, tie raps, ripties, taiwraps, kabelbindbandjes » Tie Wraps
\o/

zondag 25 augustus 2002 22:11

Acties:
  • Mercarra
  • Registratie: Juni 2001
  • Laatst online: 20:35

Mercarra

-=!ME!=- schreef op 25 augustus 2002 @ 21:22:


Tnx, ga ik nu eens verder klooien met transparency [alpha]. Wil nog niet echt lukken :(
filter:alpha(opacity=x);

Bedoel je dat als style? Lijkt me niet heel lastig.

Canon EOS 6D / Samyang 14mm f/2.8 / 17-40mm f/4.0 / 35mm f/1.4 / 50mm f/1.4 / 85mm f/1.8 / 70-200mm f/4 IS mercarra.nl

zondag 25 augustus 2002 22:43

Acties:
  • StarLite
  • Registratie: Januari 2000
  • Laatst online: 17-08 23:21

StarLite

'ON ERROR RESUME NEXT

Topicstarter
mercarra schreef op 25 augustus 2002 @ 22:11:
[...]


filter:alpha(opacity=x);

Bedoel je dat als style? Lijkt me niet heel lastig.
transparency wil wel lukken.
Ik wil één tabels achtergrond transparent hebben, maar de TEXT erin dus gewoon.. dat wil niet echt lukken :o

tyrips, tywreps, tiewreps, tiereps, tie raps, ripties, taiwraps, kabelbindbandjes » Tie Wraps
\o/

maandag 26 augustus 2002 00:50

Acties:

Verwijderd

en dat gaat dus niet, daar zal je een divje overheen moeten plaatsen.

maandag 26 augustus 2002 01:23

Acties:
  • StarLite
  • Registratie: Januari 2000
  • Laatst online: 17-08 23:21

StarLite

'ON ERROR RESUME NEXT

Topicstarter
Verwijderd schreef op 26 augustus 2002 @ 00:50:
en dat gaat dus niet, daar zal je een divje overheen moeten plaatsen.
Heb ik maar dat wil niet echt werken :(

code:
1
2
3
4
5
6
7
8
9
10
11
12
13

<table class="menubg">
<tr> 
<td class="news">

<div id="menu">
<A href="specs/index.html">system specs</A><BR>
<A href="server/index.asp">Server Lijst</A><BR>
<A href="forum/index.asp">Forum</A><BR>
</div>

</TR>
</TD>
</TABLE>


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

table.menubg
{
position:relative;
vertical-align: top;
background-color: #CCCCCC;
filter:alpha(opacity=30);
-moz-opacity:30%;
border-style: solid;
border-width: 1px;
border-color: #000000;
left: 0;
top: 0;
width: 128;
height: 500;
}

div#menu
{
position:relative;
background: #cccccc;
font-family: verdana,helvetica,arial,sans-serif;
font-size: 13px;
font-solor: #000000;
text-align: left;
filter:alpha(opacity=100);
-moz-opacity:100%;
}

wat klopt er dan niet¿

tyrips, tywreps, tiewreps, tiereps, tie raps, ripties, taiwraps, kabelbindbandjes » Tie Wraps
\o/

maandag 26 augustus 2002 07:54

Acties:

Verwijderd

In ieder geval font-solor volgens mij niet :)

maandag 26 augustus 2002 08:27

Acties:
  • crisp
  • Registratie: Februari 2000
  • Laatst online: 00:07

crisp

Devver

Pixelated

De font-color wordt toch niet gebruikt omdat voor de <a> tag de default kleur wordt gebruikt.
Wat er fout gaat is het volgende:
1) de background en de filter moet je in de <td> zetten, en niet in de <table>
2) opacity voor Mozilla is een getal tussen 0 en 1 en geen percentage

Hier een werkend voorbeeldje:
HTML:
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

<html>
<head>
<style type="text/css">
table.menubg {
  position: relative;
  border-style: solid;
  border-width: 1px;
  border-color: #000000;
  left: 0px;
  top: 0px;
  width: 128px;
  height: 500px;
  border-collapse: collapse;
}

td.news {
  vertical-align: top;
  background-color: #cccccc;
  filter:alpha(opacity=30);
  -moz-opacity: 0.3;
  padding: 0px;
}

div#menu {
  position:relative;
  font-family: verdana,helvetica,arial,sans-serif;
  font-size: 13px;
  font-color: #000000;
  text-align: left;
  padding-left: 3px;
}

</style>
</head>
<body>
<table class="menubg">
  <tr> 
    <td class="news">
      <div id="menu">
        <a href="specs/index.html">system specs</a><br />
        <a href="server/index.asp">Server Lijst</a><br />
        <a href="forum/index.asp">Forum</a><br />
      </div>
    </td>
  </tr>
</table>
</body>
</html>

:)

Intentionally left blank

maandag 26 augustus 2002 17:45

Acties:
  • StarLite
  • Registratie: Januari 2000
  • Laatst online: 17-08 23:21

StarLite

'ON ERROR RESUME NEXT

Topicstarter
crisp schreef op 26 augustus 2002 @ 08:27:
De font-color wordt toch niet gebruikt omdat voor de <a> tag de default kleur wordt gebruikt.
Wat er fout gaat is het volgende:
1) de background en de filter moet je in de <td> zetten, en niet in de <table>
2) opacity voor Mozilla is een getal tussen 0 en 1 en geen percentage

Hier een werkend voorbeeldje:
HTML:
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

<html>
<head>
<style type="text/css">
table.menubg {
  position: relative;
  border-style: solid;
  border-width: 1px;
  border-color: #000000;
  left: 0px;
  top: 0px;
  width: 128px;
  height: 500px;
  border-collapse: collapse;
}

td.news {
  vertical-align: top;
  background-color: #cccccc;
  filter:alpha(opacity=30);
  -moz-opacity: 0.3;
  padding: 0px;
}

div#menu {
  position:relative;
  font-family: verdana,helvetica,arial,sans-serif;
  font-size: 13px;
  font-color: #000000;
  text-align: left;
  padding-left: 3px;
}

</style>
</head>
<body>
<table class="menubg">
  <tr> 
    <td class="news">
      <div id="menu">
        <a href="specs/index.html">system specs</a><br />
        <a href="server/index.asp">Server Lijst</a><br />
        <a href="forum/index.asp">Forum</a><br />
      </div>
    </td>
  </tr>
</table>
</body>
</html>

:)
ah tnx ik zal het strax eens pronberen [zit nu niet 8er eigen pc], zat ik alweer te klooien met table en td styles :/

tyrips, tywreps, tiewreps, tiereps, tie raps, ripties, taiwraps, kabelbindbandjes » Tie Wraps
\o/

Pagina: 1
Reageer