[html/css] vertical-align in css - Softwareontwikkeling

woensdag 29 november 2006 12:18

Acties:

Verwijderd

Topicstarter

Heb de volgende pagina met daarin twee situaties.

In beide situaties is hetzelfde menu te zien, maar dan één in een tabel (de bovenste) en één als lijst. Het moge duidelijk zijn dat ik de tweede situatie het liefste heb. alleen daar is wel een probleem bij.

Zoals te zien is in het eerste menu de boel netjes verticaal in het midden uitgelijnd. ook als een menu-item twee regels wordt blijft dit gehandhaafd.

Nu krijg ik dit alleen emt geen mogelijkheid voor elkaar met de lijst css. Heb al wat lopen klooien met display:table-cell en vertical-align: middle; maar dat helpt allemaal nix.

Heeft iemand een idee hoe ik dit aan zou moeten pakken?

woensdag 29 november 2006 12:22

Acties:

HertogHarrie

Ehm text-align: center; al geprobeerd?

woensdag 29 november 2006 12:26

Acties:

Arch-IT-ect

.nutter

Vertical align in css is bij mijn weten nog steeds onmogelijk (jammergenoeg)
Maak rond je divs gewoon een table en zet die dan verticaal in het midden.

HertogHarrie, text-align: center gaat trobs geven in browsers anders dan IE.

If freedom is short of weapons, we will compensate it with willpower

woensdag 29 november 2006 12:27

Acties:

Gonadan

Admin Beeld & Geluid, Harde Waren

HertogHarrie schreef op woensdag 29 november 2006 @ 12:22:
Ehm text-align: center; al geprobeerd?

Dat is voor horizontaal, en dat staat al in zijn code.

@TS: misschien is het handig om je code hier even te posten, dan trek je mensen sneller over de streep om even te kijken.

Vertical-align gebruik je bijvoorbeeld om de positie van plaatjes in een regel tekst te bepalen.
Maar hij werkt niet vaak als verwacht.

[ Voor 16% gewijzigd door Gonadan op 29-11-2006 12:29 ]

Look for the signal in your life, not the noise.

Canon R6 | 50 f/1.8 STM | 430EX II
Sigma 85 f/1.4 Art | 100-400 Contemporary
Zeiss Distagon 21 f/2.8

woensdag 29 november 2006 12:29

Acties:

Crayne

Have face, will travel

HertogHarrie schreef op woensdag 29 november 2006 @ 12:22:
Ehm text-align: center; al geprobeerd?

Wat de tekst mooi horizontaal zal centreren, ja.

Edit: Lang leve mijn trage posts.

[ Voor 8% gewijzigd door Crayne op 29-11-2006 12:29 ]

Mijn Library Thing catalogus

woensdag 29 november 2006 12:31

Acties:

HertogHarrie

Sorry je hebt gelijk, had ook iets te snel gelezen (en over vertical heen gelezen

woensdag 29 november 2006 12:33

Acties:

Jaap-Jan

Probeer eens vertical-align: middle

.

Zo staat het namelijk in de CSS- 2.1 standaard.

[ Voor 61% gewijzigd door Jaap-Jan op 29-11-2006 12:35 ]

| Last.fm | "Mr Bent liked counting. You could trust numbers, except perhaps for pi, but he was working on that in his spare time and it was bound to give in sooner or later." -Terry Pratchett

woensdag 29 november 2006 12:35

Acties:

HertogHarrie

Jaap-Jan schreef op woensdag 29 november 2006 @ 12:33:
Probeer eens vertical-align: middle .

Heb al wat lopen klooien met display:table-cell en vertical-align: middle; maar dat helpt allemaal nix.

woensdag 29 november 2006 12:51

Acties:

user109731

display table-cell icm. vertical-align:middle werkt wel, maar niet als je ook float gebruikt. Een float dwingt zeg maar display:block af, waardoor display:table-cell weinig zin heeft.

Vertical-align kan ook worden gebruikt op inline elementen, maar volgens mij kan de TS hier zijn elementen niet inline maken omdatie dan geen breedte kan opgeven?

IE ondersteunt sowieso display:table-cell niet afaik.

woensdag 29 november 2006 12:51

Acties:

Crayne

Have face, will travel

Jaap-Jan schreef op woensdag 29 november 2006 @ 12:33:
Probeer eens vertical-align: middle .

Zo staat het namelijk in de CSS- 2.1 standaard.

Als die nou in alle browsers zou werken zoals hij zou moeten werken...nou dan gingen hier de feesthoedjes op het hoofd.

Mijn Library Thing catalogus

woensdag 29 november 2006 13:08

Acties:

Victor

Als je tekst hebt die slechts één regel beslaat kun je line-height gebruiken, door deze gelijk te stellen aan de hoogte van het element.

woensdag 29 november 2006 13:10

Acties:

Verwijderd

Topicstarter

Ok.. hier is mijn volledige code

code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <title>Test</title>
        <meta http-equiv="content-language" content="nl">
        <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
        <meta http-equiv="imagetoolbar" content="no">
        <meta name="description" content="">
        <meta name="keywords" content="">

        <style type="text/css">
            /* Table styles */
            #topmenu {
                margin: 0;
                padding: 0;
                width: 746px;
                height: 40px;
                background: purple;
            }
            #topmenu a {
                font: normal 11px/1.2em Tahoma, Verdana, Arial, sans-serif;
                color: #fff;
                text-decoration: none;
            }

            #topmenu td {
                color: #fff;
                text-align: center;
                padding: 5px 1px 5px 1px; 
            }

            /* UL Styles */
            #topnav {
                margin: 0;
                padding: 0;
                list-style: none;
                height: 40px;
                background: purple;
                display: table-cell;
                vertical-align: middle;
            }
            #topnav li {
                margin: 6px 0;
                padding: 0; 
                float: left;
                width: 90px;
                height: 28px;
                color: #fff;
                display: table-cell;
                vertical-align: middle;
                text-align: center;
                background: none;
            }
            #topnav li.firstItem {
                border: 0;
            }
            #topnav a {
                margin: 0;
                padding: 0;
                display: block; 
                font: normal 11px Tahoma, Verdana, Arial, sans-serif;
                color: #fff;
                text-decoration: none;
                background: none;   
                display: table-cell;
                vertical-align: middle;
            }
        </style>
</head>
<body>
    
    <table id="topmenu" cellpadding="0" cellspacing="0">
        <tr>
            <td><a href="#">HOME</a></td>
            <td><a href="#">ALGEMENE VOORWAARDEN</a></td>
            <td><a href="#">INFO AANVRAAG</a></td>
            <td><a href="#">WIE ZIJN WIJ</a></td>
            <td><a href="#">WERKEN MET EXTRAREGEL</a></td>
            <td><a href="#">LANGETEKST METEXTRAREGEL</a></td>
            <td><a href="#">LEVERANCIER</a></td>
            <td><a href="#">ENKELE REFERENTIES</a></td>
            <td><a href="#">CONTACT</a></td>
        </tr>
    </table>

    <hr>

    <ul id="topnav">
        <li><a href="#">HOME</a></li>
        <li><a href="#">ALGEMENE VOORWAARDEN</a></li>
        <li><a href="#">INFO AANVRAAG</a></li>
        <li><a href="#">WIE ZIJN WIJ</a></li>
        <li><a href="#">WERKEN MET EXTRAREGEL</a></li>
        <li><a href="#">LANGETEKST METEXTRAREGEL</a></li>
        <li><a href="#">LEVERANCIER</a></li>
        <li><a href="#">ENKELE REFERENTIES</a></li>
        <li><a href="#">CONTACT</a></li>
    </ul>

</body>
</html>

en idd.. display: inline; gaat dan niet werken, omdat ik dan geen float: left; meer kan gebruiken, die dan nodig is om een breedte op te geven..

@King_Louie: dat is het probleem juist: er is tekst die op meer dan één regel komt/moet.

woensdag 29 november 2006 13:24

Acties:

Verwijderd

Het grappige is, je vertical-align in CSS werkt wel.... maak maar eens in je #topnav {} de height:200px;

dan zie je dat ie wel aligned zoals je wilt, tenminste, niet helemaal want het probleem wat optreedt, komt doordat sommige woorden over meerdere regels gaan! Daar zit dan ook het "probleem". Weet niet of dit eenvoudig is op te lossen dmv CSS, maar zal even wat proberen!

woensdag 29 november 2006 13:33

Acties:

Verwijderd

Cascading Stylesheet:

/* Edited with EditCSS */
/**** Style sheets whose contents could be loaded were ****/
/**** imported instead. Rule order may be incorrect ****/
/**** as a result. ****/
@import "chrome://firebug/content/outlines.css";

/**** Inline STYLE-tag style sheet ****/

            /* Table styles */
            #topmenu {
                margin: 0;
                padding: 0;
                width: 746px;
                height: 40px;
                background: purple;
            }
            #topmenu a {
                font: normal 11px/1.2em Tahoma, Verdana, Arial, sans-serif;
                color: #fff;
                text-decoration: none;
            }

            #topmenu td {
                color: #fff;
                text-align: center;
                padding: 5px 1px 5px 1px; 
            }

            /* UL Styles */
            #topnav {
                margin-top:0px;
                padding: px;
                list-style: none;
                height: 50px;
                background: purple;
                display: table-cell;
                vertical-align: middle;
            }
            #topnav li {
display:block;
        float:left;
width: 80px; 
height:50px;
vertical-align:middle;
                color: #fff;
                text-align: center;
                background: none;
            }
            #topnav li.firstItem {
                border: 0;
            }
            #topnav a {
                margin: 0;
                padding: 0;
                display: block; 
width:80px;height:50px;
vertical-align:middle;
                font: normal 11px Tahoma, Verdana, Arial, sans-serif;
                color: #fff;
                text-decoration: none;
                background: none;   
                display: table-cell;
            }
        


/**** LINK-tag style sheet outlines.css ****/

/* Non-http; imported above. */

ff gehackt in editCSS plugin voor firefox

the trick was: het a-element een vast maat geven en daarin vertical-align:middle

kijk hem ff na want hij is nog slordig!

woensdag 29 november 2006 13:39

Acties:

Verwijderd

Topicstarter

het werkt op zich inderdaad.. maar alleen in FF en niet in IE (ook niet ini IE7).. dus jammer genoeg nog niet DE oplossing...

woensdag 29 november 2006 13:48

Acties:

Verwijderd

sorry, inderdaad untested in IE7... ff kijken of ik daar nog wat voor weet

woensdag 29 november 2006 14:14

Acties:

lullebakman

Probeer eens je 'line-height' erbij te zetten, gewoon evenveel pixels als de hoogte en vertical-align: middle.

woensdag 29 november 2006 14:19

Acties:

Verwijderd

Topicstarter

helpt ook niet..

woensdag 29 november 2006 14:24

Acties:

B-Man

Ik heb hiervoor recent ook een oplossing gezocht, en voor ie6/ie7 is die er volgens mij niet. Afgezien van 'hacks' zoals spelen met de line height, maar dan enkel voor de elementen met maar 1 regel, die met 2 regels niet.

donderdag 30 november 2006 09:01

Acties:

Verwijderd

Topicstarter

das jammer.. en was er al een beetje bang voor.. dan maar terug naar tabellen..

donderdag 30 november 2006 12:58

Acties:

Mlancee

er zijn hier inderdaad al zoveel postst over geweest, conclusie is dan ook elke keer dat het is CSS niet mogelijk is verticaal te centreren. Een tabelletje er omheen gooien is inderdaad de oplossing. Zolang niet je hele pagina met tabellen is opgebouwd lijkt mij die ene tabel geen probleem.

donderdag 30 november 2006 16:03

Acties:

Verwijderd

Toch vreemd dat FF het goed doet en IE7 niet... dacht dat ze in de afhandeling van CSS inmiddels nader tot elkaar gekomen waren... blijkbaar is dit dus toch een voorbeeld van een afwijking die op dit moment nog steeds bestaat... zou alleen niet weten welke van de twee browsers het nu verkeerd afhandelt (lijkt me IE, want vertical-align lijkt me voorzich spreken)

donderdag 30 november 2006 16:16

Acties:

user109731

Verwijderd schreef op donderdag 30 november 2006 @ 16:03:
Toch vreemd dat FF het goed doet en IE7 niet...

Zo vreemd is dat niet, de gevallen waarin IE het goed doet en FF fout vind ik veel vreemder

dacht dat ze in de afhandeling van CSS inmiddels nader tot elkaar gekomen waren... blijkbaar is dit dus toch een voorbeeld van een afwijking die op dit moment nog steeds bestaat... zou alleen niet weten welke van de twee browsers het nu verkeerd afhandelt (lijkt me IE, want vertical-align lijkt me voorzich spreken)

IE ondersteunt display:table-cell nog steeds niet (zoals ik gisteren al zei)

In IE7 zijn wel wat bugs geplet, en een aantal properties en selectors toegevoegd, maar de leuke dingen als het table-layout-model, generated content e.d. zijn nog ver te zoeken.

[ Voor 7% gewijzigd door user109731 op 30-11-2006 16:19 ]

donderdag 30 november 2006 16:21

Acties:

Technicality

Vliegt rechtsom...

en een procentuele breedte? Of zeg ik nou iets doms...

vrijdag 1 december 2006 15:24

Acties:

Verwijderd

Zo werkt het prima.

Cascading Stylesheet:

div#topnav {
  background:purple;
  padding:5px;
  width:870px;
  }
    
div#topnav a {
  width:90px;
  vertical-align:middle;
  font:11px tahoma;
  color:#fff;
  text-align:center;
  text-decoration:none;
  display:table-cell; 
  text-transform:uppercase;
  }

HTML:

<div id="topnav">
  <a href="#">Home</a>
  <a href="#">Algemene voorwaarden</a>
  <a href="#">Info aanvraag</a>
  <a href="#">Wie zijn wij</a>
  <a href="#">Werken met extraregel</a>
  <a href="#">Langetekst metextraregel</a>
  <a href="#">Leverancier</a>
  <a href="#">Enkele referenties</a>
  <a href="#">Contact</a>
</div>

Pagina: 1

Reageer