margin in <span> - Softwareontwikkeling

zondag 14 december 2003 16:55

Acties:

Verwijderd

Topicstarter

Wat ik dus wil is simpel een margin aanbrengen in een <span>. Dus:

code:

.news_header { 
     FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; COLOR: #666666; 
     FONT-SIZE :9px; FONT-WEIGHT: bold; TEXT-DECORATION :normal; TEXT-ALIGN: 
     justify; MARGIN-TOP: 3; MARGIN-LEFT: 5;
}

en

code:

1 2	<span class="news_header"><?=$NewsTitel?></span> <span class="main">on</span>&nbsp <span class="news_date"><?=$NewsDate?></span>

Nu heb ik [rml][ HTML] IE 5.01, margin-left werkt niet. Radelooz;([/rml] wel gelezen, maar een <div> gebruiken is dus was ik NIET wil.

Zie de titels van de nieuwsposts. Die margin-left van 5 wil nie

http://www.freestyle-design.nl/cmd/index.php?page=news

zondag 14 december 2003 16:57

Acties:

PrisonerOfPain

px er achter zetten?

zondag 14 december 2003 16:59

Acties:

Clay

cookie erbij?

een span is een inline element. Ik dacht dat daar alleen horizontale margins op werkten. (en terecht)

Instagram | Flickr | "Let my music become battle cries" - Frédéric Chopin

zondag 14 december 2003 17:06

Acties:

Verwijderd

Topicstarter

- margin-left is toch horizontaal.. of vergis ik me nu?
- px toevoegen maakt geen verschil.

Ik heb nu

code:

1	display: inline;

aan de CSS toegevoegd. Dit zet de 2 div's wel mooi naast elkaar. Maar de margin-left wil ik niet pakken

[ Voor 81% gewijzigd door Verwijderd op 14-12-2003 17:14 ]

zondag 14 december 2003 17:20

Acties:

Verwijderd

Underscores mogen niet in classNames in CSS.

[edit]
Maar het is natuurlijk gewoon het ontbreken van een eenheid, zoals px of em, inderdaad.

[ Voor 53% gewijzigd door Verwijderd op 14-12-2003 17:23 ]

zondag 14 december 2003 17:20

Acties:

Johnny

ondergewaardeerde internetguru

In welke brower? Ik zie hierboven namelijk iets staan over MSIE 5.01, het lijkt me de enkele gebruikers van die browser niet echt zullen klagen over het feit dat de tekst een paar pixels naar rechts staat.

Verder is het wel zo netjes om kleine letters te gebruiken en units (in dit geval pixels) op te geven.

Aan de inhoud van de bovenstaande tekst kunnen geen rechten worden ontleend, tenzij dit expliciet in dit bericht is verwoord.

zondag 14 december 2003 17:25

Acties:

Verwijderd

Nog een vraag: waarom test je het niet eerst toe op een minimaal document? En als je dan weet of het wel of niet werkt, dan weet je dus ook of het aan jouw HTML of CSS kan liggen of iets wel of niet werkt. Gewoon 'debuggen', net zoals je bij een programmeertaal zou doen.

zondag 14 december 2003 18:10

Acties:

Verwijderd

Topicstarter

het testen in een minimaal document maakt voor mij niet echt een verschil. Het document is in principe al redelijk klein.

Maar hoe zouden jullie dit dan oplossen?

Ik zit te denken aan een .gif als spacer oid...

edit:
Dit test ik trouwens in Explorer 5.0, moet nog eens upgraden

[ Voor 17% gewijzigd door Verwijderd op 14-12-2003 18:13 ]

zondag 14 december 2003 18:22

Acties:

Verwijderd

Tja, dan heb je het dus over een browser van meer dan 4 jaar oud.

zondag 14 december 2003 18:23

Acties:

WPN

Verwijderd schreef op 14 december 2003 @ 18:10:
het testen in een minimaal document maakt voor mij niet echt een verschil. Het document is in principe al redelijk klein.

Maar hoe zouden jullie dit dan oplossen?

Ik zit te denken aan een .gif als spacer oid...

minimaal document is dus alleen de
tags:

html
head
title
body

(head en title kan je zelfs nog weglaten)

en daar dan die span tag inzetten...

dus:

code:

<html>
<head>
<title>span margin test</title>
</head>
<body>

<span class="newsheader">blaat blaat blaat</span>

</body>
</html>

dat is minimaal document

en inderdaad px erachter zetten

code:

1	margin-left: 5px;

[ Voor 13% gewijzigd door WPN op 14-12-2003 18:24 ]

Als ik denk zoals ik dacht, dan doe ik zoals ik deed, als ik doe zoals ik deed, dan denk ik zoals ik dacht! Cogito Ergo Sum

zondag 14 december 2003 18:37

Acties:

Verwijderd

Topicstarter

Ja ik weet wel wat dat inhoudt maar dat maakt dus geen verschil. Door een paar dingen te veranderen zie ik vanzelf dat het aan de CSS ligt. Maar eigenlijk doet de vraag of het aan een fout in m'n code ligt er niet echt toe. Wat ik wil gaat dus gewoon niet.

Dan maar gebruik maken van een spacer. Andere oplossingen ?

maandag 15 december 2003 11:52

Acties:

Verwijderd

Titels e.d. horen met <hx>, maar als je toch al zo verdoemd bezig bent, kun je net zo goed doorgaan met tag-soup creeren en die spacergif toevoegen!

Underscores mogen _wel_ in classnames. Een paar oudere browsers ondersteunden het alleen niet: voorbeeld dat het correct is

maandag 15 december 2003 11:56

Acties:

RM-rf

1 2 3 4 5 7 6 8 9

er bestaat ook de 'inline-block' als display-propertie voor een element, dit genereert een element dat zich gedraagt als een block-element betreffende hoogte, breedte en margins-paddings, echter wel gewoon net zoals een inline element binnen een textflow geplaatst kan worden.

probleem enkel, browser-ondersteuning, het is CSS2.1 (en stond niet in de CSS2.0 spec)

[ Voor 7% gewijzigd door RM-rf op 15-12-2003 11:58 ]

Intelligente mensen zoeken in tijden van crisis naar oplossingen, Idioten zoeken dan schuldigen

maandag 15 december 2003 12:09

Acties:

Verwijderd

(de dingen die in CSS2.1 staan, zijn bijna altijd zo gespecificieerd dat ze zich naar de 'browser bugs' gedragen, inline-block is 1 van de nieuwe dingen die is toegevoegd, omdat deze nodig was voordat CSS3 er aan komt, denk aan plaatjes etc.)