[html] Onzichtbare randen rond afbeeldingen - Softwareontwikkeling

maandag 19 oktober 2009 12:27

Acties:

0 Henk 'm!

i7x

Emoji fan 👽🦑🦋🍓

Topicstarter

Ik heb best wel een noob op dit gebied dus vandaar deze vraag.

Ik bezit dus een domeinnaam en host en ik dacht, 'laat ik die gebruiken als mail en ftp server'.
Nu wilde ik daar graag een mooie pagina voor maken waar je op e-mail of ftp kunt klikken. Ik heb die dus even ontworpen in Photoshop en de knoppen en afbeeldingen uitgesneden.

Ik heb nu 5 afbeeldingen.

Logo
Open plek | FTP knop | E-mail knop | Open plek
Onderkant van achtergrond

En zo wil ik dat het er uit gaat zien:
Afbeeldingslocatie: http://i38.tinypic.com/715l6w.jpg

Afbeeldingslocatie: http://i38.tinypic.com/715l6w.jpg

Nu heb ik met mijn basiskennis van html de pagina proberen te schrijven. Ik heb dat als volgt gedaan:

code:

<html>

<head>
 <title>blablabla</title>
</head>

<body style="background-color:#100c03">
 <p align="center">
  <img border="0px" src="http://i38.tinypic.com/2vt7g9z.jpg" />
 <br />
  <img border="0px" src="http://i35.tinypic.com/2d0kfmg.jpg" />
  <img border="0px" src="http://i34.tinypic.com/2ppni88.jpg" />
  <img border="0px" src="http://i38.tinypic.com/2ni9mqq.jpg" />
  <img border="0px" src="http://i38.tinypic.com/2cgyfbd.jpg" />
 <br />
  <img border="0px" src="http://i38.tinypic.com/anhhu1.jpg" />
 </p>
</body>

</html>

Maar wanneer ik deze pagina open ziet het er dus zo uit:
Afbeeldingslocatie: http://i34.tinypic.com/acyid2.jpg

Je ziet dus open plekken tussen de plaatjes. Hoe los ik dit op? Ik heb al veel op internet gezocht en dingen als v- of hspace="0" geprobeerd maar ook dat maakte geen verschil.

De links werken trouwens inderdaad nog niet maar dat doe ik later wel.

🦅 U.S. ETFs kopen in Europa? https://europoor.com/ 📈 ARKK, 📈 UPRO, 📈 TECL, 📈 QQQJ, ...

maandag 19 oktober 2009 12:29

Acties:

0 Henk 'm!

RobIII

Admin Devschuur®

^ Romeinse Ⅲ ja!

Het border attribuut wordt niet zo happy van de "px" toevoeging is mijn eerste gedachte

Oh, en wegens gebrek aan een fatsoenlijke doctype worden er "spaties" tussen de images gezet.

[ Voor 34% gewijzigd door RobIII op 19-10-2009 12:31 ]

There are only two hard problems in distributed systems: 2. Exactly-once delivery 1. Guaranteed order of messages 2. Exactly-once delivery.

Je eigen tweaker.me redirect

Over mij

maandag 19 oktober 2009 12:31

Acties:

0 Henk 'm!

n1ck

Probeer eens:

HTML:

1	<img border="0" src="http://i38.tinypic.com/2vt7g9z.jpg" />

of

Cascading Stylesheet:

1
2
3

img {
border: 0px;
}

maandag 19 oktober 2009 12:31

Acties:

0 Henk 'm!

Verwijderd

border="0px" gaat al niet werken. Het is <img border="0" ... of <img style="border: 0px;".....

Dit zijn eigenlijk standaard dingen die je via google ook kan vinden.

maandag 19 oktober 2009 12:31

Acties:

0 Henk 'm!

Bosmonster

*zucht*

Een van m'n standaard toevoegingen in CSS is

Cascading Stylesheet:

1
2
3

img {
   border: 0;
}

Omdat een standaard border eigenlijk nooit gewenst is, en anders kun je hem natuurlijk altijd nog zelf weer toevoegen

maandag 19 oktober 2009 12:31

Acties:

0 Henk 'm!

BtM909

Watch out Guys...

Heb je dit gebeuren ook ergens online staan? Ik neem aan dat je achtergrond zwart is, dus het zou marges kunnen zijn of de leuke enters / spaties / tabs die je gebruikt voor de image naam. Het is alleen lastig te bepalen, aangezien het er anders uitziet in FF

Welke browsers heb je getest?

Ace of Base vs Charli XCX - All That She Boom Claps (RMT) | Clean Bandit vs Galantis - I'd Rather Be You (RMT)
You've moved up on my notch-list. You have 1 notch
I have a black belt in Kung Flu.

maandag 19 oktober 2009 12:36

Acties:

0 Henk 'm!

mcDavid

Bovenstaande border (en evt. margins/paddings) verwijderen, en ook de whitespaces (spaties en linebreaks) tussen de afbeeldingen verwijderen.

Maar het blijft een beetje een gare oplossing om zo'n afbeelding in stukken te knippen. Beter maak je:
- een achtergrondafbeelding met enkel een tekst-overlay voor de knoppen
- een imagemap

maandag 19 oktober 2009 12:37

Acties:

0 Henk 'm!

michiel_hc

het is geen border het zijn de spaties tussen de afbeeldingen:

code:

<head>
 <title>blablabla</title>

</head>

<body style="background-color:#100c03">
 <p align="center">
  <img src="http://i38.tinypic.com/2vt7g9z.jpg" /><br /><img src="http://i35.tinypic.com/2d0kfmg.jpg" /><img src="http://i34.tinypic.com/2ppni88.jpg" /><img src="http://i38.tinypic.com/2ni9mqq.jpg" /><img src="http://i38.tinypic.com/2cgyfbd.jpg" /><br /><img src="http://i38.tinypic.com/anhhu1.jpg" />
 </p>
</body>

</html>

Dit werkt wel

maandag 19 oktober 2009 12:45

Acties:

0 Henk 'm!

i7x

Emoji fan 👽🦑🦋🍓

Topicstarter

Aha! Bedankt hiervoor. Ik heb al in geen tijden iets in HTML geschreven en iets groots heb ik ook nooit gemaakt.

Dat px heb ik toegevoegd omdat ik dacht dat je altijd kunt kiezen tussen px of %. Ik zal ook eens gaan kijken naar zo'n text overlay. Dat lijkt mij inderdaad ook wel handig.

🦅 U.S. ETFs kopen in Europa? https://europoor.com/ 📈 ARKK, 📈 UPRO, 📈 TECL, 📈 QQQJ, ...

maandag 19 oktober 2009 13:16

Acties:

0 Henk 'm!

InZane

i7x schreef op maandag 19 oktober 2009 @ 12:45:
Aha! Bedankt hiervoor. Ik heb al in geen tijden iets in HTML geschreven en iets groots heb ik ook nooit gemaakt.

Dat px heb ik toegevoegd omdat ik dacht dat je altijd kunt kiezen tussen px of %. Ik zal ook eens gaan kijken naar zo'n text overlay. Dat lijkt mij inderdaad ook wel handig.

Eenheid toevoegen voor een waarde van 0 heeft sowieso nooit zin.
0 koeien of 0 kippen, het is allebei 0.

maandag 19 oktober 2009 13:30

Acties:

0 Henk 'm!

MueR

Admin Tweakers Discord

is niet lief

michiel_hc schreef op maandag 19 oktober 2009 @ 12:37:
het is geen border het zijn de spaties tussen de afbeeldingen:

Dat is dus wat RobIII zegt, met als enige verschil dat jij een brakke oplossing aandraagt.

RobIII schreef op maandag 19 oktober 2009 @ 12:29:
Oh, en wegens gebrek aan een fatsoenlijke doctype worden er "spaties" tussen de images gezet.

[ Voor 7% gewijzigd door MueR op 19-10-2009 13:30 ]

Anyone who gets in between me and my morning coffee should be insecure.

maandag 19 oktober 2009 14:45

Acties:

0 Henk 'm!

mcDavid

MueR schreef op maandag 19 oktober 2009 @ 13:30:
[...]

Dat is dus wat RobIII zegt, met als enige verschil dat jij een brakke oplossing aandraagt.

[...]

Ook met doctype houden sommige browsers (bijv. firefox) wat afstand tussen afbeeldingen als er in de html spaties of linebreaks tussen staan.

maandag 19 oktober 2009 15:21

Acties:

0 Henk 'm!

MueR

Admin Tweakers Discord

is niet lief

mcDavid schreef op maandag 19 oktober 2009 @ 14:45:
[...]

Ook met doctype houden sommige browsers (bijv. firefox) wat afstand tussen afbeeldingen als er in de html spaties of linebreaks tussen staan.

True, sommige browsers *kuch*IE*kuch* zijn nu eenmaal vreemd. Maar met een doctype is het voor fatsoenlijke browsers geen giswerk hoe ze de pagina moeten renderen.

Anyone who gets in between me and my morning coffee should be insecure.

maandag 19 oktober 2009 15:25

Acties:

0 Henk 'm!

NMe

Quia Ego Sic Dico.

Los daarvan behoor je met CSS je images te positioneren als pixelprecieze lay-out belangrijk is, zodat spaties geen issue zijn. En nee, michiel_hc, dat doe je niet door dan maar alle whitespace uit je HTML te halen, da's gewoon een workaround.

[ Voor 4% gewijzigd door NMe op 19-10-2009 15:25 ]

'E's fighting in there!' he stuttered, grabbing the captain's arm.
'All by himself?' said the captain.
'No, with everyone!' shouted Nobby, hopping from one foot to the other.

maandag 19 oktober 2009 15:37

Acties:

0 Henk 'm!

mcDavid

NMe schreef op maandag 19 oktober 2009 @ 15:25:
Los daarvan behoor je met CSS je images te positioneren als pixelprecieze lay-out belangrijk is, zodat spaties geen issue zijn. En nee, michiel_hc, dat doe je niet door dan maar alle whitespace uit je HTML te halen, da's gewoon een workaround.

Daarom vind ik het ook nog steeds een rotoplossing. Bovendien hebben de afbeeldingen geen meerwaarde voor de content, en zouden dus gewoon (een) bg-image(s) moeten zijn ipv inline-images.

Scheelt nog HTTP-requests ook

[ Voor 3% gewijzigd door mcDavid op 19-10-2009 15:41 ]

maandag 19 oktober 2009 15:47

Acties:

0 Henk 'm!

RobIII

Admin Devschuur®

^ Romeinse Ⅲ ja!

mcDavid schreef op maandag 19 oktober 2009 @ 15:37:
Scheelt nog HTTP-requests ook

Images vervangen door background images scheelt geen HTTP requests? Tenzij je met CSS sprites gaat werken uiteraard.

There are only two hard problems in distributed systems: 2. Exactly-once delivery 1. Guaranteed order of messages 2. Exactly-once delivery.

Je eigen tweaker.me redirect

Over mij

maandag 19 oktober 2009 20:38

Acties:

0 Henk 'm!

InZane

mcDavid schreef op maandag 19 oktober 2009 @ 15:37:
Scheelt nog HTTP-requests ook

Que?

Die mag je uitleggen.

maandag 19 oktober 2009 21:14

Acties:

0 Henk 'm!

Sebazzz

3dp

RobIII schreef op maandag 19 oktober 2009 @ 15:47:
[...]

Images vervangen door background images scheelt geen HTTP requests? Tenzij je met CSS sprites gaat werken uiteraard.

Dat zal hij ook wel bedoelen

[Te koop: 3D printers] [Website] Agile tools: [Return: retrospectives] [Pokertime: planning poker]