Toon posts:

[CSS] min-width & centreren, en nog 2 vraagjes

Pagina: 1
Acties:

Verwijderd

Topicstarter
hey,

Ik heb een css-probleempje. Eerst even wat linkjes:

Pagina
http://www.qoo.nl/cssprobleem/001.html

Stylesheet
http://www.qoo.nl/cssprobleem/media/styles/screen2.css

Plaatje voor de Firefox-lozen
http://www.qoo.nl/cssprobleem/001.png

Zoals je ziet is de tekst bij A niet goed gecentreerd. Dit komt omdat 't parent block een min-width heeft en deze wordt nu toegepast. Bij het centreren wordt echter de "orginele" width gebruikt. Dat wil ik dus niet :). Hoe los ik dit op?

Tweede vraag. Zoals je ziet in m'n css code gebruik ik voor de font-sizes "small", "medium".. dat soort dingen. Zodat bezoekers in de browser de tekstgrootte makkelijk kunnen aanpassen. Dat werkt opzich, maar dan is de tekst in m'n balk niet meer verticaal gecentreerd. Komt omdat ik ze met een padding naar beneden heb gedrukt, hoe los ik dit mooier op?

Derde vraag. Als er wat meer tekst in de "tab" moet komen te staan, dan gaat 't achtergrond plaatje zich herhalen. (zie http://www.qoo.nl/cssprobleem/002.html) Maar ik wil dat 't er goed uit ziet. Dat
ik dus een begin, een midden en een eindstuk heb. Waarbij ik 't midden steeds kan herhalen. Hoe pak ik dit het mooiste aan?

Het hoeft wat mij betreft niet per sé in IE te werken. Als het maar aan de w3c standaarden voldoet en 't moet werken in FireFox. Het liefst natuurlijk ook in IE, maar als dat niet lukt.. dan maak ik voor de IE'rs wel een andere versie.

PS
Het viel me op, dat als je in je browser de tekstgrootte verandert, dat de tekst bij A dan wel gecentreerd wordt. Raar is dat :)

PPS
Eventuele andere opmerkingen/verbeteringen betreft mij code wordt ook gewaardeerd.

[ Voor 4% gewijzigd door Verwijderd op 14-03-2005 00:15 ]


  • crisp
  • Registratie: Februari 2000
  • Laatst online: 00:27

crisp

Devver

Pixelated

waarom zet je de text-align niet op je anchor ipv op je list-item?

Intentionally left blank


Verwijderd

Topicstarter
Zover ik weet zou dan de tekst in de anchor gecentreerd worden. Maar dat heeft geen zin omdat de anchor precies breed genoeg is om de tekst erin te hebben. Dus of ik de text-align nu left, center of right zet.. de tekst staat altijd t zelfde.

Als ik die min-width weghaal van m'n li.active werkt 't wel allemaal goed. Behalve dan dat ik geen min-width meer heb..

  • crisp
  • Registratie: Februari 2000
  • Laatst online: 00:27

crisp

Devver

Pixelated

Je anchor heeft toch een width:100% (althans, in de :link, misschien zou je dat specifiek voor alle states moeten doen)?

Intentionally left blank


Verwijderd

Topicstarter
In m'n css code heeft-ie idd een width van 100%. Maar in 't echt om een of andere reden ook reden niet. Ook niet als ik er een 'block' van maak.

Misschien dat ik dan maar een spacer.gif moet gebruiken voor een min-width :/, dan werkt het denk ik wel. Want die min-width die verstoord 't centreren.

  • crisp
  • Registratie: Februari 2000
  • Laatst online: 00:27

crisp

Devver

Pixelated

Cascading Stylesheet:
1
2
3
4
5
ul#nav li a {
  display: block;
  width: 100%;
  text-align: center;
}

zou toch moeten werken...

[ Voor 9% gewijzigd door crisp op 15-03-2005 01:18 ]

Intentionally left blank


Verwijderd

Topicstarter
De anchor-width wordt niet 100% in de li.active. Deze li.active heeft een min-width van 75px. Als ik in plaats van min-width, de gewone width gebruik (width: 75px), dan wordt de anchor wel 100% breed en wordt de tekst dus wel gecentreerd.

De css-parser ziet dus een verschil tussen een width opgegeven door min-width of de normale "width". Vraag me af of dit een bug is, ik ga 't straks eens verder onderzoeken. Als 't echt niet lukt dan bouw ik wel een eigen min-width in.

Bedankt voor je reacties trouwens :)

edit:
Als ik de anchor een min-width meegeven in plaats van de parent (li.active), dan werkt het opzich wel. Maar dan moet ik eerst over een linkje* hoveren om de tekst in de anchor te centreren.

* bij de hover-state van 't linkje wordt de li.active even weggeduwd.. komt er dus op neer, dat als de li.active opnieuw gerenderd moet worden, dat ie t dan wel goed doet.. -- zelfde verhaal overigens bij 't wijzigen van de tekstgrootte in mn browser

[ Voor 32% gewijzigd door Verwijderd op 15-03-2005 16:35 ]

Pagina: 1