[Browsers] Positie tekst niet juist

[DoubleJ]

Kan de situatie wel proberen uit te leggen maar wat code een screenshot zegt meer denk ik

Het gaat er dus om dat ik de tekst niet hetzelfde gepositioneerd krijg. Wat gaat er fout?

HTML

code:

 <div id="left_top"><p id="menu">Home
    <br />
    <br />
    Arrangementen
    <br />
    <br />  
    <span id="sub">Bedrijfsuitjes
    <br />
    Groepszeilen
    <br />
    Huwelijksbootje
    <br />
    Vrijgezel
    <br />
    Zeilinstructie
    </span>
    <br />
    <br />
    Contact
    </p>
    </div>

CSS

code:

#left_top {
    height: 220px;
    width: 240px;
    position: absolute;
    z-index: 3;
}
#menu {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    text-align: right;
}

#sub {
    font-size: 10px
    }

Het probleem:

[Rowanov]

Ik zou die br's er uit knikkeren en gewoon een line-height op je elementen zetten. Zo dus:

Cascading Stylesheet:

#menu {
   line-height: __px;
}

Even de argumentatie; er is op zich niets mis met br's, maar in dit geval wel. Je gebruikt ze voor visuele opmaak, terwijl css eigenlijk de visuele opmaak hoort te regelen. Ook kan je het gedrag van br's en de exacte hoogte nooit inschatten in verschillende browsers.

[ Voor 49% gewijzigd door Rowanov op 30-05-2006 22:20 ]

[crisp]

Sterker nog: ik zou hier een geneste list voor gebruiken.
Het verschil wordt overigens veroorzaakt door verschillen in de default stylesheet van verschillende browsers mbt paddings en margins - in dit geval op het P-element - en foutieve margin-collapsing in IE (rendered IE in quirksmode wellicht - oftewel gebruik je wel een volledige doctype?)

Ook lineheight kan standaard verschillend zijn tussen browsers, dit is dus sowieso geen goede manier om het visueel in alle browsers gelijk te krijgen.

[ Voor 33% gewijzigd door crisp op 30-05-2006 23:12 ]

[DoubleJ]

Ik werk volgens een XHTML 1.1 doctype, maar of die volledig is, geen idee. Wat houd dat in?
Hij is wel valid volgens W3.

[Rowanov]

Dat het een doctype is die in de recommendation staat. Dat je site valideert of niet zegt niets over je weergave, maar alleen over het feit dat je geen foutieve (x)html ingeklopt hebt. Ik denk dat als je deze pagina over semantiek leest dat het wel duidelijk wordt dat valideren geen zak zegt over je toepassing van de code en over hoe het wordt weergegeven.

[ Voor 11% gewijzigd door Rowanov op 30-05-2006 23:27 ]

[crisp]

Als je XHTML 1.1 goed toepast dan hoef je je over IE helemaal geen zorgen te maken want die kan daar toch helemaal niets mee

[Palomar]

zet overal es margin: 0px; en padding: 0px; in. Dat helpt bij mij vaak wel. Evt. kun je daarna nog margn-left etc. specifiek op andere waardes zetten.

[ Voor 34% gewijzigd door Palomar op 30-05-2006 23:39 ]

[DoubleJ]

Rowanov schreef op dinsdag 30 mei 2006 @ 23:26:
Dat het een doctype is die in de recommendation staat. Dat je site valideert of niet zegt niets over je weergave, maar alleen over het feit dat je geen foutieve (x)html ingeklopt hebt. Ik denk dat als je deze pagina over semantiek leest dat het wel duidelijk wordt dat valideren geen zak zegt over je toepassing van de code en over hoe het wordt weergegeven.

Ja, dat weet ik wel. Doe ook zeker mn best om de code een beetje netjes en juist te houden maar ga daar geen complete boekwerken voor doornemen. Dat haal ik meer uit ervaring en met name problemen verhelpen, zo leer ik ook veel beter

Palomar schreef op dinsdag 30 mei 2006 @ 23:38:
zet overal es margin: 0px; en padding: 0px; in. Dat helpt bij mij vaak wel. Evt. kun je daarna nog margn-left etc. specifiek op andere waardes zetten.

Did the trick, thanks

[Palomar]

Of je zet dit bovenin je stylesheet:

Cascading Stylesheet:

* {
    padding: 0px;
    margin: 0px;
    }

(kwam ik toevallig net ergens tegen, en het is wel zo efficient).

[DoubleJ]

dat is een soort van wildcard die automatisch op alles toepast? kan dat met alles binnen css? dat is handig!

[Boelie-Boelie]

Palomar schreef op woensdag 31 mei 2006 @ 00:55:
Of je zet dit bovenin je stylesheet:

Cascading Stylesheet:

* {
    padding: 0px;
    margin: 0px;
    }

(kwam ik toevallig net ergens tegen, en het is wel zo efficient).

Dat hangt maar van je voorkeur af of je het efficiënt vindt. Zo moet je namelijk overal expliciet margins en paddings gaan instellen, terwijl de default wellicht voldoet.

Andere manier is Faruk Ateş 'Starting point for stylesheets'.

[MarkvE]

Palomar schreef op woensdag 31 mei 2006 @ 00:55:
Of je zet dit bovenin je stylesheet:

Cascading Stylesheet:

* {
    padding: 0px;
    margin: 0px;
    }

(kwam ik toevallig net ergens tegen, en het is wel zo efficient).

In sommige browsers haal je daarmee de standaard padding en margin van formuliervelden eruit, waardoor deze er niet altijd meer even mooi uitzien. En die padding er weer terug inzetten wil je écht niet in verband met de verschillende browsers die allen hun eigen "waarden" hebben.

[Verwijderd]

Als je nou eens wel begint met boekwerken, of iig refs doornemen, lijkt me wel zo handig als je iets wilt leren. Met trial en (vooral) error leer je het jezelf zeker weten verkeerd aan.

margins van je p op 0 zetten kan, maar is niet de oplossing, Crisp en Rowanov lullen echt geen onzin, dus zoek ff door op lists en semantiek en doctypes en browsermodes enzo.

of * een wildcrad is kan je ook prima zelf nazoeken, dan kom je er vanzelf achter dat dit inderdaad zoiets is: http://www.w3.org/TR/CSS21/selector.html#universal-selector

Vaak wil je het echter niet, aangezien je meteen alle margins en paddings op 0 zet, zoals MarkvE aangeeft. Z'n tweede zin is overigens of onzin of krom opgeschreven (als je zelf margins terug zet is het juist zeker weten in alle browsers hetzelfde, want dan hebben ze hun eigen waarden niet meer)

[ Voor 13% gewijzigd door Verwijderd op 31-05-2006 09:42 ]

[DoubleJ]

Verwijderd schreef op woensdag 31 mei 2006 @ 09:34:
Als je nou eens wel begint met boekwerken, of iig refs doornemen, lijkt me wel zo handig als je iets wilt leren. Met trial en (vooral) error leer je het jezelf zeker weten verkeerd aan.

Kijk, ik werk niet met tabellen ofzo probeer m'n sites zo klein mogelijk te houden en probeer alles met CSS te doen. Ik denk dat de correctheid van m'n code zwaar boven het gemiddelde ligt (nou is dat ook niet zo moeilijk).

Tuurlijk heb ik regelmatig wat tutorials en guides doorgenomen. Maar als ik een opdracht heb, met een deadline ga ik niet eerst 3 weken studeren

Allemaal bedankt voor de feedback iig. Heb weer wat mooie guides om op terug te vallen en m'n probleempjes zijn ook verholpen!

[BtM909]

Verwijderd schreef op woensdag 31 mei 2006 @ 09:34:
[...]Z'n tweede zin is overigens of onzin of krom opgeschreven (als je zelf margins terug zet is het juist zeker weten in alle browsers hetzelfde, want dan hebben ze hun eigen waarden niet meer)

Ik lees dat als: de standaard waardes van de verschillende browsers hanteren (om de default look and feel per browser te behouden); dus geen onzin

[Rowanov]

Hoe dank ook; ik denk dat het niet altijd verstandig is om de marges en padding standaard op 0 te gooien. Als je een site hebt waar de teksten verschillende constructies als lijsten, quotes en dergelijke bevatten hoeft dat niet pixel precies in elke browser hetzelfde te zijn. Het doel blijft immers een leesbare tekst weer te geven. Het lijkt me dan meer werk om voor elk mogelijk element wat in je tekst voor kan komen die stijlregels te gaan defineren, terwijl de standaarden van de browser ook een prima leesbaar resultaat opleveren.

Bij opmaak en structuur elementen, zoals divs, is het wel weer belangrijk, maar bij de meeste elementen die de structuur bepalen bestaan er geen standaard marge en padding instellingen. Dit is voor zover ik ervan op de hoogte ben

[Palomar]

Nou, ik denk dat het voor de echte Pietjes Precies wel zo fijn is als je alles default op margin 0px zet en dan handmatig per element aangeeft of er een margin op moet zitten. Al zal het met de default-waardes van je browser meestal ook wel goedgaan. Het probleem is alleen dat ik vaak dingen op de pixel nauwkeurig probeer neer te zetten, en als "onbekende_browser_x.x" dan besluit om <ul> default een marge te geven van 10 pixels dan verschuift alles op mn site... ([edit] al is <ul> dan misschien een wat slecht voorbeeld).

[ Voor 12% gewijzigd door Palomar op 31-05-2006 14:14 ]

[Rowanov]

Ik doel ook niet voor niets op structuur elementen. Als de element zoals ul in de context van je menu layout-kiritiek zijn, dan zet je daar natuurlijk je eigen waarden neer, maar zorg je wel dat je niet aan de default van de lijsten in de tekst komt. Met ul noem je dan ook wel weer een element wat in veel browsers een verschillende styling heeft wat betreft paddings en margins, maar ook of de list-bullet binnen of buiten het element staat etc.

Ik ga er overigens vanuit dat gebruikers van de door mijgemaakte websites van alles en nog wat op onvoorspelbare manieren in de tekst kunnen gooien. Dan val ik idd. liever terug op de defaults aangezien wat tekst styling betreft de defaults van de browsers niet vreselijk verschillen. Als je dan toch elementen "op 0" wilt zetten kan dat net zo makkelijk door je layout-kritieke elementen in de selectie te gebruiken. Het gebruik van de universal selector vind ik vies in een heleboel gevallen.

[DoubleJ]

Heb nou weer exact hetzelfde probleem, om zo'n harde enter te krijgen mag ik toch best een dubbele BR gebruiken? Word wel heel omslachtig als echt elke paragraaf in een nieuwe P moet stoppen.

HTML:

<h1 class="header">Uit-Zeilen met de zaak!</h1>
<p align="left" class="paragraaf">Wilt u eens wat anders met uw collega&#8217;s? Wij organiseren in de Randstad gezellige en avontuurlijke bedrijfsuitjes.
<br />
<br />
In de omgeving van Leiden en Den Haag hebben we op het Kaageiland een rustieke locatie een fantastische zeilomgeving. Tussen Utrecht en Amsterdam organiseren we op de uitgestrekte Loosdrechtse plassen een arrangement waar op het werk nog lang over nagepraat zal worden.
<br />
<br />
[img]"images/tekstvullers/1.jpg"[/img]
Bij het varen op valken krijgt u in groepen van 4 personen uitleg over de basisbeginselen van het zielen. Dit onder begeleiding van jonge, gediplomeerde en vooral enthousiaste instructeurs. Het accent ligt op samenwerking en gezelligheid.
<br />
<br />
UitZeilen onderscheidt zich door het jonge, avontuurlijke karakter.
</p>

Cascading Stylesheet:

.header {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 18px;
    border-left-width: 35px;
    border-left-style: solid;
    border-left-color: #FFC597;
    margin-left: -40px;
    margin-top: 20px;
    margin-bottom: 20px;
    padding-left: 5px;
    font-weight: bold;
}
.paragraaf {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    letter-spacing: 1px;
    border-bottom-width: 1px;
    border-bottom-style: dashed;
    border-bottom-color: #333333;
    padding-bottom: 15px;
}
#tekstvuller {
    margin-right: 10px;
    margin-bottom: 10px;
    border: 3px solid #000000;
}

[ Voor 7% gewijzigd door DoubleJ op 31-05-2006 15:07 ]

[CodeCaster]

DoubleJ schreef op woensdag 31 mei 2006 @ 15:06:
Heb nou weer exact hetzelfde probleem, om zo'n harde enter te krijgen mag ik toch best een dubbele BR gebruiken? Word wel heel omslachtig als echt elke paragraaf in een nieuwe P moet stoppen.

Raad eens waar de afkorting 'P' voor staat, in de tag <p>...</p>? Inderdaad, paragraaf.

En je kunt wel een dubbele br gebruiken, maar dan moet er tekst tussen staan, bijvoorbeeld een  .

---

(...) 4 personen uitleg over de basisbeginselen van het zielen. Dit onder begeleiding (...)

Zeilen denk?

[ Voor 16% gewijzigd door CodeCaster op 31-05-2006 15:11 ]

[DoubleJ]

CodeCaster schreef op woensdag 31 mei 2006 @ 15:10:
[...]

Raad eens waar de afkorting 'P' voor staat, in de tag <p>...</p>? Inderdaad, paragraaf.

En je kunt wel een dubbele br gebruiken, maar dan moet er tekst tussen staan, bijvoorbeeld een

HTML:

&nbsp

;.

Ahja, dat werkt heel aardig idd.

[...]

Zeilen denk?

Niet mijn teksten, maar thanks

[ Voor 7% gewijzigd door DoubleJ op 31-05-2006 15:32 ]

[Rowanov]

DoubleJ schreef op woensdag 31 mei 2006 @ 15:06:
Heb nou weer exact hetzelfde probleem, om zo'n harde enter te krijgen mag ik toch best een dubbele BR gebruiken? Word wel heel omslachtig als echt elke paragraaf in een nieuwe P moet stoppen.

Dan mag jij raden wat de oplossing is die het beste werkt in alle browsers; alle alinea's in een p tag stoppen en er een bottom margin aan geven. Mophor heeft een stukje geschreven wat uitlegt waarom dit semantisch de beste oplossing is. Even een quote:

Note for Dutch readers: the term "paragraph" (<p>) is best translated by alinea. On the other hand, "section" or "division" (<div>) is best translated by paragraaf.

Dit geeft eigenlijk al aan dat het gebruik van p in dit geval juist zou zijn.

[ Voor 18% gewijzigd door Rowanov op 31-05-2006 15:34 ]

[DoubleJ]

Rowanov schreef op woensdag 31 mei 2006 @ 15:32:
[...]


Dan mag jij raden wat de oplossing is die het beste werkt in alle browsers; alle alinea's in een p tag stoppen zoals het bedoeld is en er een bottom margin aan geven.

Tja een paragraaf natuurlijk. Maar ik heb nu bijv. onder elke P een dashed lijntje. Dan staat die opeens onder elke alinea. Zou de correcte oplossing zijn het in een DIV te gooien?

[Rowanov]

DoubleJ schreef op woensdag 31 mei 2006 @ 15:33:
Tja een paragraaf natuurlijk. Maar ik heb nu bijv. onder elke P een dashed lijntje. Dan staat die opeens onder elke alinea. Zou de correcte oplossing zijn het in een DIV te gooien?

Als je dan even het laatste gedeelte van mijn post ook leest

Ter verduidelijking; je hele tekst (dus met header, alinea's en de hele reutemeteut) gaat in een division die je mogelijkerwijs de class "paragraph" can geven. Je alinea's worden dan <p> tags. Niks geen extra divs die er niet horen te zijn! Dat dashed lijntje is natuurlijk vrij simpel in je css aan te passen.

[ Voor 31% gewijzigd door Rowanov op 31-05-2006 15:38 ]

[DoubleJ]

Aye sorry, ff gemist duidelijk!

webscripting begint wel steeds leuker en absoluut logischer te worden zo

[ Voor 63% gewijzigd door DoubleJ op 31-05-2006 15:49 ]

[Verwijderd]

HTML is veel en veel simpeler dan de meeste mensen denken, zo simpel zelfs dat het bijna nergens terug te vinden is hoe simpel het is, het heeft me zelf 4 jaar gekost om dat door te hebben ofzo...

Aangezien HTML compleet los (zou moeten) staan van opmaak (heb je CSS voor), hoef je je qua html alleen maar druk te maken om de betekenis, de semantiek. Dus netjes alinea's in <p>, die vormen samen met lijsten, tables en headings een paragraaf (<div>) die samen met andere paragrafen en weer een heading een hoofdstuk vormen en zo steeds groter.

Het is echt precies als in boeken, als je die hele structuur klaar heb hoef je enkel hier en daar nog een id of een structuur div toe te voegen om toch net even iets meer te kunnen met css en klaar ben je

p, ul, ol, dl, table, h1-h6, address etc staan allemaal op hetzelfde niveau, dat zijn blokken die hoofdstukken en subhoofdstukken (paragrafen) vormen

daarin heb je al je inline zut, daarbuiten heb je "hoofdstuk" elementen, zoals div, form, fieldset, map etc, dat zijn verzamelblokken, die groeperen, ik noem ze vaak structure level elementen, omdat ze net iets meer zijn dan block elementen (ze worden ook ooit sectioning elements genoemd, bv in de html 5 spec wip)

ik heb dat hier eens opgepend

[ Voor 31% gewijzigd door Verwijderd op 31-05-2006 17:13 ]