[css] tekst verticaal midden in layer.

woensdag 1 oktober 2003 12:07

-= Tja =-

Topicstarter

Hoe krijg ik het voor elkaar dat de tekst automatisch in het verticale midden van een layer wordt geplaatst? Ik heb op dit moment met een extra layer en padding het opgelost (layer eronder heeft een background), maar als je het font gaat resizen moet je de padding ook aanpassen. Er moet natuurlijk een betere manier zijn.

Nog een (domme) vraag *is nog niet zo lang bezig met css*, maar wat voor een 'vorm' heeft een layer? Is dit altijd een rechthoek? Ik ben van huis uit java programmeur en een panel is daar altijd een rechthoek, maar ik loop ergens met een aantal layers te stoeien (een titel layer en een content layer) en deze liggen in een andere layer (main). Heeft de main layer dan altijd de maximale vierkante vorm waarin die andere layers passen? (Als je niet uitgaat van static positionering).

En hoe zit het eigelijk met dat width gebeuren? Zo nu en dan krijg werkt het dat een kinder layer een 100% width krijgt van zijn parent layer om in te wonen (precies zoals ik het wil). En soms neemt de layer 100% van mijn browser width in beslag.

Ik heb de indruk dat dit te maken heeft met het positionering type, maar het is me niet altijd even duidelijk.

[edit]
http://www.alarmnummer.net dit is trouwens de site in kwestie.

[ Voor 11% gewijzigd door Alarmnummer op 01-10-2003 12:04 ]

Acties:

Willem

vertical-align:x (%,px);

en position:absolute wil nogal eens rot doen ja, dat klopt.

Motor (of auto) onderhoud bijhouden

woensdag 1 oktober 2003 12:17

Acties:

woensdag 1 oktober 2003 12:31

Devver

Pixelated

Alarmnummer schreef op 01 oktober 2003 @ 12:00:
Hoe krijg ik het voor elkaar dat de tekst automatisch in het verticale midden van een layer wordt geplaatst? Ik heb op dit moment met een extra layer en padding het opgelost (layer eronder heeft een background), maar als je het font gaat resizen moet je de padding ook aanpassen. Er moet natuurlijk een betere manier zijn.

mozilla:

Cascading Stylesheet:

#container {
  position: relative;
  display: table-cell;
  vertical-align: middle;
}

IE is echter een no-go, daar ben je aangewezen op tables of javascript als je de hoogte van je te positioneren element niet kent.

Nog een (domme) vraag *is nog niet zo lang bezig met css*, maar wat voor een 'vorm' heeft een layer? Is dit altijd een rechthoek? Ik ben van huis uit java programmeur en een panel is daar altijd een rechthoek, maar ik loop ergens met een aantal layers te stoeien (een titel layer en een content layer) en deze liggen in een andere layer (main). Heeft de main layer dan altijd de maximale vierkante vorm waarin die andere layers passen? (Als je niet uitgaat van static positionering).

ja, het zijn altijd rechthoeken.
Een container zonder vaste width en height zal altijd uitrekken zolang je niet absoluut positioneerd.

En hoe zit het eigelijk met dat width gebeuren? Zo nu en dan krijg werkt het dat een kinder layer een 100% width krijgt van zijn parent layer om in te wonen (precies zoals ik het wil). En soms neemt de layer 100% van mijn browser width in beslag.

Ik heb de indruk dat dit te maken heeft met het positionering type, maar het is me niet altijd even duidelijk.

Een parent layer is altijd een layer die absoluut of relatief gepositioneerd is, dus als een omliggende layer geen position: absoluut of position: relative heeft wordt niet de breedte van deze layer genomen.

Intentionally left blank

Acties:

woensdag 1 oktober 2003 12:45

-= Tja =-

Topicstarter

crisp schreef op 01 oktober 2003 @ 12:17:
ja, het zijn altijd rechthoeken.
Een container zonder vaste width en height zal altijd uitrekken zolang je niet absoluut positioneerd.

Zou ik dan beter van die absolute positionering van het menu en de main kunnen afstappen? Ik heb ook de normale positionering gedaan (en tegen menu gezegd: float left). Maar dan maakt internet explorer er iets anders van dan Mozilla. Ik ben het hele weekend bezig geweest met die positionering en heb me behoorlijk lopen ergeren als het in de 1 wel werkt en in de ander niet.

Een parent layer is altijd een layer die absoluut of relatief gepositioneerd is, dus als een omliggende layer geen position: absoluut of position: relative heeft wordt niet de breedte van deze layer genomen.

code:

<div style="positioning: absolute; width:500px">

     <div style="width:300px">
           
         <div style="width:100%"/>
    </div>

</div>

De breedte van de binnenste layer gaat dan 500px worden ipv 300?

[ Voor 5% gewijzigd door Alarmnummer op 01-10-2003 12:32 ]

Acties:

woensdag 1 oktober 2003 12:55

Devver

Pixelated

Alarmnummer schreef op 01 October 2003 @ 12:31:
[...]

Zou ik dan beter van die absolute positionering van het menu en de main kunnen afstappen? Ik heb ook de normale positionering gedaan (en tegen menu gezegd: float left). Maar dan maakt internet explorer er iets anders van dan Mozilla. Ik ben het hele weekend bezig geweest met die positionering en heb me behoorlijk lopen ergeren als het in de 1 wel werkt en in de ander niet.

IE gaat anders om met floats dan mozilla, IE rekt namelijk bij floats de container niet uit...

[...]
code:
1
2
3
4
5
6
7
8
<div style="positioning: absolute; width:500px">

     <div style="width:300px">
           
         <div style="width:100%"/>
    </div>

</div>
De breedte van de binnenste layer gaat dan 500px worden ipv 300?

Nee, hier gaat het nog wel goed, op het moment dat je echter de 3e div ook weer absoluut gaat positioneren gaat het fout:

HTML:

<div style="position: absolute; width:500px; border: 1px solid blue;"> 

     <div style="width:300px; border: 1px solid red;"> 
           
         <div style="position:absolute; width:100%; border: 1px solid green"> </div>

    </div>

</div>

(wel even in Mozilla bekijken, IE bakt hier ook niets van)

trouwens: een div is geen empty element en mag je dus niet dmv /> afsluiten

Intentionally left blank

Acties:

woensdag 1 oktober 2003 13:22

-= Tja =-

Topicstarter

[quote]crisp schreef op 01 oktober 2003 @ 12:45:

IE gaat anders om met floats dan mozilla, IE rekt namelijk bij floats de container niet uit...

Aha, dat verklaard het 1 en ander. Ik vind het zo vreemd dat ze zich gewoon niet aan een aantal simpele regels kunnen houden.

trouwens: een div is geen empty element en mag je dus niet dmv /> afsluiten

zeurkous

Maar hou zou jij de 3 hoofd componenten op mijn site gaan plaatsen? Ik heb dus een titel layer, een menu layer en een main layer.

Acties:

woensdag 1 oktober 2003 13:33

Devver

Pixelated

ik denk dat je hier wel wat aan gaat hebben: http://www.glish.com/css/7.asp

(persoonlijk zou ik gewoon voor Moz / Opera het boxmodel wijzigen naar padding-box in plaats van de hier toegepaste font-family hack, maar het gaat om het idee)

Intentionally left blank

Acties:

woensdag 1 oktober 2003 14:22

-= Tja =-

Topicstarter

Ok thanx, ik zal er zometeen mee aan de slag gaan. Handig die voorbeelden.

Acties:

woensdag 1 oktober 2003 14:54

-= Tja =-

Topicstarter

Ik heb nu 2 layers die naast elkaar zouden moeten komen. Ik heb de linker layer een float: left gegeven en die rechter hoort er dan gewoon naast te komen? In IE werkt het goed, maar bij mozilla valt de 'rechter' layer gewoon achter de linkerlayer (en vult het hele scherm op).

De linkerlayer heeft een width van 240px en verder maak ik gebruik van de default position.

[edit]
En hoe zit het met opvullen van layers?

Gaat een layer als je hem niet gaat bijsturen zichzelf automatisch zo groot maken als hun ouder?

[edit2]
*snapt er helemaal geen kloot meer van*... wat een ongelovelijk wazig opgezet verhaal zeg. Dit hadden ze beter af kunnen kijken van java met hun layout managers want hoe moet je hier nou iets mee?

[ Voor 40% gewijzigd door Alarmnummer op 01-10-2003 14:45 ]

Acties:

woensdag 1 oktober 2003 14:57

Devver

Pixelated

opzetje aan de hand van de layout van jouw site:

HTML:

<html>
<head>
<title>test</title>
<style type="text/css">

body {
  padding: 0px;
  margin: 0px;
  overflow: auto;
  min-height: 400px;
}

div {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

#menu {
  position: absolute;
  top: 50px;
  left: 0px;
  width: 200px;
  height: 350px;
  border: 2px solid blue;
  padding: 10px;
}

#content {
  margin-left: 200px;
  margin-right: 0px;
  border: 2px solid green;
  padding: 10px;
}

div.title {
  width: 100%;
  height: 50px;
  border: 2px solid red;
  text-align: center;
}

div.title h1 {
  font-size: 24px;
  margin: 0px;
}

</style>
<body>
<div class="title"><h1>Main Title</h1></div>
<div id="menu">menu</div>
<div id="content">
  <div class="title"><h1>Title</h1></div>
  content<br />
  bla<br />bla<br />bla<br />bla<br />bla<br />bla<br />bla<br />
  bla<br />bla<br />bla<br />bla<br />bla<br />bla<br />bla<br />
</div>
</body>
</html>

Intentionally left blank

Acties:

Woudloper

« - _ - »

In het verlengde van crisp zijn eerdere suggestie (om te kijken bij glish) hier nog een link welke ik bij Zeldman zag. Daar heeft namelijk iemand een 'Laout-o-Matic gemaakt die automatisch de glish layout genereerd. In het verlengde daarvan kan je ook nog gebruik maken van de List-o-Matic waarmee je mooie menu's kan genereren...

woensdag 1 oktober 2003 14:58

Acties:

woensdag 1 oktober 2003 15:10

Analytics dude

Dit soort dingen zuigen zwaar als je het mij vraagt. Het is niet goed geimplementeerd door diverse browsers.

En layers maken zich niet automatisch zo groot als hun parent (tenzij er content in staat waardoor hij oprekt).

Acties:

woensdag 1 oktober 2003 15:12

-= Tja =-

Topicstarter

crisp schreef op 01 October 2003 @ 14:54:
opzetje aan de hand van de layout van jouw site:

Ik zie dat jij de margin-left hebt 'misbruikt' om de main te positioneren. Dat is idd ook een manier. Maar als je geen gebruik maakt van absolute positionering van dat menu en puur gebruik wilt maken de normale flow, hoe zou je het dan aanpakken?

Acties:

woensdag 1 oktober 2003 15:15

-= Tja =-

Topicstarter

Woudloper schreef op 01 oktober 2003 @ 14:57:
In het verlengde van crisp zijn eerdere suggestie (om te kijken bij glish) hier nog een link welke ik bij Zeldman zag. Daar heeft namelijk iemand een 'Laout-o-Matic gemaakt die automatisch de glish layout genereerd.

Ik probeer liever te begrijpen hoe het in elkaar steekt ipv een tooltje te pakken die het voor mij genereerd.

In het verlengde daarvan kan je ook nog gebruik maken van de List-o-Matic waarmee je mooie menu's kan genereren...

Ik hoop toch niet mooier dan mijn menu generator

(XML/XSLT)

vb:

code:

<menu-system>
                        
    <collapse-pane-list>
    
        <collapse-pane>
            <title>Java Projects</title>
            <collapsed>false</collapsed>
            <menu-content>
                
                <menu-item>
                    <title>NCollections</title>
                    <newFrame>false</newFrame>
                    <href>ncollections.html</href>
                </menu-item>        
                
                <menu-item>
                    <title>PredicateCollections</title>
                    <newFrame>false</newFrame>
                    <href>notready.html</href>              
                </menu-item>        
                                
                <menu-item>
                    <title>Log4J Appender</title>
                    <newFrame>false</newFrame>
                    <href>notready.html</href>
                </menu-item>
                
                <menu-item>
                    <title>Swing Widgets</title>
                    <newFrame>false</newFrame>
                    <href>notready.html</href>
                </menu-item>
                
                <menu-item>
                    <title>ChangeSupport</title>
                    <newFrame>false</newFrame>
                    <href>notready.html</href>
                </menu-item>
                
                <menu>
                    <title>Handige projecten</title>
                    
                    <menu-item>
                        <title>NCollections</title>
                        <newFrame>false</newFrame>
                        <href>notready.html</href>              
                    </menu-item>        
                
                    <menu-item>
                        <title>Log4J Appender</title>
                        <newFrame>false</newFrame>
                        <href>notready.html</href>
                    </menu-item>
                </menu>
                
            </menu-content>
        </collapse-pane>

                .....

[ Voor 70% gewijzigd door Alarmnummer op 01-10-2003 15:14 ]

Acties:

woensdag 1 oktober 2003 15:18

Devver

Pixelated

Alarmnummer schreef op 01 oktober 2003 @ 15:10:
[...]

Ik zie dat jij de margin-left hebt 'misbruikt' om de main te positioneren. Dat is idd ook een manier. Maar als je geen gebruik maakt van absolute positionering van dat menu en puur gebruik wilt maken de normale flow, hoe zou je het dan aanpakken?

Dan zou ik zowel het menu als de content een float: left geven. Nadeel is dan dat je je content niet net zo breed kan maken als de beschikbare breedte naast het menu...

Ik ben het met je eens dat de huidige beschikbare methoden om met layers een (ingewikkelde) layout te genereren eigenlijk te beperkt is, en de implementatie van die mogelijkheden in hedendaagse browsers zo mogelijk nog beperkter.
Ik moet eerlijk toegeven dat ik ook nog wel eens teruggrijp naar een tabel

Intentionally left blank

Acties:

woensdag 1 oktober 2003 15:22

-= Tja =-

Topicstarter

crisp schreef op 01 October 2003 @ 15:15:
[...]

Dan zou ik zowel het menu als de content een float: left geven. Nadeel is dan dat je je content niet net zo breed kan maken als de beschikbare breedte naast het menu...

Dan ga ik denk ik jouw aanpak maar gebruiken. Thanx.

Ik moet eerlijk toegeven dat ik ook nog wel eens teruggrijp naar een tabel

Ik ben niet dom, en ben ervaren met het lezen van specificaties. Maar ik ben vanaf vrijdag al bezig (hele weekend ook nog eens) om eigelijk niets anders voor elkaar te krijgen dan positioneren.

Om het beter te begrijpen begin je dan ermee te spelen en in 1e instantie werkt het ook zoals je dacht te begrijpen. Maar dan ineens werkt het niet meer en zit je zo van.. hmm.. ik snap er nu echt helemaal niets meer van.

En ik deed het vroeger gewoon met een frameset, maar frameset schijnen taboe te zijn, dus nu maar eens met layers aan de slag om die frames te positioneren.

Acties:

Verwijderd

frames zijn helemaal niet taboe, mits ze op de juiste manier gebruikt worden en dat gebeurt niet vaak. Ze hebben een hele hoop nadelen als je niet weet wat je doet.

sowieso, als je iets wel of niet doet, weet dan waarom je het doet en niet omdat iedereen dat zegt

woensdag 1 oktober 2003 15:26

Acties:

woensdag 1 oktober 2003 15:55

-= Tja =-

Topicstarter

Verwijderd schreef op 01 October 2003 @ 15:22:
frames zijn helemaal niet taboe, mits ze op de juiste manier gebruikt worden en dat gebeurt niet vaak. Ze hebben een hele hoop nadelen als je niet weet wat je doet.

sowieso, als je iets wel of niet doet, weet dan waarom je het doet en niet omdat iedereen dat zegt

Ik ben niet genoeg bezig met webpagina`s om zelf tot de ontdekking te komen waarom frames en framesets nou taboe zijn. Maar ik wou eens een keer iets anders proberen en daarnaast mijn kennis over html en aanhang op te frissen + vergroten.

Ik ben gewoonlijk java-developer.

[edit]
Je kunt nu trouwens wel links naar inner pagina`s maken en zonder dat je zonder navigatie komt te zitten (En bekend probleem van frames).

[ Voor 24% gewijzigd door Alarmnummer op 01-10-2003 15:28 ]

Acties:

woensdag 1 oktober 2003 16:00

-= Tja =-

Topicstarter

André schreef op 01 October 2003 @ 14:58:
En layers maken zich niet automatisch zo groot als hun parent (tenzij er content in staat waardoor hij oprekt).

Hoe krijg je dat voor elkaar?

Acties:

woensdag 1 oktober 2003 16:09

Analytics dude

Alarmnummer schreef op 01 oktober 2003 @ 15:55:
[...]

Hoe krijg je dat voor elkaar?

Door die layer geen width te geven.

Acties:

woensdag 1 oktober 2003 16:13

-= Tja =-

Topicstarter

André schreef op 01 October 2003 @ 16:00:
[...]

Door die layer geen width te geven.

Dit werkt ook met een iframe? Stel dat die iframe in een layer ligt en je wilt dat die iframe die layer volledig opvult, dan trekt die iframe zich daar niets van aan als je geen width opgeeft.

java:

JPanel site = new JPanel();
site.setLayout(new BorderLayout());
site.add(titlePanel, BorderLayout.NORTH);
site.add(menuPanel, BorderLayout.WEST);
site.add(mainPanel,BorderLayout.CENTER);

en alles werkt en resized exact zoals ik het wil...

[ Voor 34% gewijzigd door Alarmnummer op 01-10-2003 16:12 ]

Acties:

woensdag 1 oktober 2003 16:14

Analytics dude

Een iframe is weer een verhaal apart. Daarmee werkt dat niet.

java:

JPanel site = new JPanel();
site.setLayout(new BorderLayout());
site.add(titlePanel, BorderLayout.NORTH);
site.add(menuPanel, BorderLayout.WEST);
site.add(mainPanel,BorderLayout.CENTER);

en alles werkt en resized exact zoals ik het wil...

_{<table width="100%"><tr><td colspan="2">NORTH</td></tr><tr><td width="20%">WEST</td><td>CENTER</td></tr></table>}

[ Voor 77% gewijzigd door André op 01-10-2003 16:16 ]

Acties:

woensdag 1 oktober 2003 16:17

-= Tja =-

Topicstarter

André schreef op 01 oktober 2003 @ 16:13:
Een iframe is weer een verhaal apart. Daarmee werkt dat niet.

en nog een hele lading andere icoontjes die niet echt vrolijk zijn. Sjezus.. vandaar dat webdeven lastig is. Niet zozeer door alle complexe technieken, maar eerder door het gebrek aan degelijke oplossingen.

[edit]
Maar is er dan een manier dat een iframe automatisch de volledige ruimte van zijn parent container in beslag gaat nemen?

[ Voor 16% gewijzigd door Alarmnummer op 01-10-2003 16:15 ]

Acties: