[xhtml] blokschema uitknippen en linken - Softwareontwikkeling

woensdag 8 oktober 2008 01:14

Acties:

Topicstarter

Ik heb een blokschema uit visio en die wil ik graag op mn website zetten.

Nu moet elk blokje uitgelegd worden, en vroeg me af wat de makkelijkste manier is om dit te doen.

Ik dacht achter elk blokje een pagina te maken, hoe doe ik dit het makkelijkst?

Een andere optie is een soort mooi popups te maken als er op een blokje wordt geklikt, java scriptje oid?

alvast dank,
Piet

(Heb weer genoeg om over na te denken, dank voor het uitgebreide antwoord)

[ Voor 10% gewijzigd door pietjepuk|IAA op 08-10-2008 09:38 . Reden: interpunctie toegevoegd, je hebt helemaal gelijk maar twas al al ]

woensdag 8 oktober 2008 01:17

Acties:

RobIII

Admin Devschuur®

^ Romeinse Ⅲ ja!

pietjepuk|IAA schreef op woensdag 08 oktober 2008 @ 01:14:
ik heb een blokschema uit visio en die wil ik graag op mn website zetten

nu moet elk blokje uitgelegd worden, en vroeg me af wat de makkelijkste manier is om dit te doen

Imagemap? Hoe complex is het schema?

pietjepuk|IAA schreef op woensdag 08 oktober 2008 @ 01:14:
ik dacht achter elk blokje een pagina te maken, hoe doe ik dit het makkelijkst?

<a href="/blokje1.html">Blokje 1</a>

Kun je wat concreter zijn? Wat bedoel je precies?

pietjepuk|IAA schreef op woensdag 08 oktober 2008 @ 01:14:
andere optie is een soort mooi popups te maken als er op een blokje wordt geklikt, java scriptje oid?

Pop-ups, lightboxes / thickboxes, JS alerts, nieuwe pagina's, tooltips, balloons, infobars, toasts en ga zo maar door. Wat is wel en wat is niet gewenst? Moet het modal zijn? Hoe veel informatie is er per blokje? Wil je uberhaupt JS gebruiken of moet het een aanvulling zijn voor mensen die JS aan hebben staan en heb je een alternatieve manier voor mensen die JS uit hebben staan?

Waarom probeer je niet gewoon het 1 en ander? Wat heb je zelf al bedacht wat een goede optie zou zijn en waarom? En waarom vallen andere opties volgens jou af? En bedenk dat, hoewel methode A misschien heel "hip" en erg "Web 2.0" is, methode B wellicht veel beter past in jou situatie. Iedere voorgenoemde techniek heeft bepaalde eigenschappen, voordelen en nadelen en die zul je toch écht zelf moeten afwegen; als je uit bent op kant-en-klare code dan moet ik je teleurstellen (zgn "Waar vind ik...?"-vragen en scriptrequests doen we niet aan).

Zou je voortaan ook gebruik willen maken van gangbare spelling en interpunctie zoals hoofdletters aan het begin van een zin, punten aan het einde en niet iedere regel in een nieuwe alinea? Dat leest zo veel fijner

[ Voor 38% gewijzigd door RobIII op 08-10-2008 01:28 ]

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

donderdag 9 oktober 2008 00:14

Acties:

pietjepuk|IAA

Topicstarter

Ok ik heb de thickbox gebruikt, werkt mooi.

(moet ik misschien een nieuwe topic voor openen?)

[url=""]Het resultaat is hier te zien.[/url]
(Heb de css maar in de html laten staan, kan je het nog zien)

Ik heb nog 2 andere vraagjes:

Hoe krijg ik een randje dat ik links heb, ook aan de rechterkant? een div maken aan die kant en em daarin zetten? Is er misschien een mooiere oplossing?

De linkerkant zit er zo in:

code:

#mainContent {
    padding: 20px 20px;
    background:url(images/content_09.gif) repeat-y;
}

In firefox ziet het er prima uit, maar in ie6 zit er een witregel tussen het nav menu en de content. Heb al gezocht en heb al van alles geprobeerd, misschien zie ik iets over het hoofd? Heb al margins op 0 bv..

alvast dank

[ Voor 3% gewijzigd door pietjepuk|IAA op 09-10-2008 13:45 ]

donderdag 9 oktober 2008 00:19

Acties:

RobIII

Admin Devschuur®

^ Romeinse Ⅲ ja!

Ik heb even niet verder gekeken, maarre... what's up with this?

HTML:

1
2

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "test4.html?placeValuesBeforeTB_=savedValues&TB_iframe=true&height=500&width=500" title="Windturbine" class="thickboxwww.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="test4.html?placeValuesBeforeTB_=savedValues&TB_iframe=true&height=500&width=500" title="Windturbine" class="thickboxwww.w3.org/1999/xhtml">

Edit: Even verder gekeken maar ik heb eigenlijk weinig trek om me door die shitload aan CSS heen te worstelen, zeker niet als die in het betreffende iframe waar feitelijk maar 1 div en een body in zitten ook nog eens royaal voorkomt. Maak het voor jezelf (ook) makkelijker en maak gewoon eens een uitgeklede testcase waarin je zoveel mogelijk weg laat om je probleem te localiseren; het is geen wonder dat je hier geen wijs uit wordt.

[ Voor 31% gewijzigd door RobIII op 09-10-2008 00:23 ]

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

donderdag 9 oktober 2008 00:40

Acties:

pietjepuk|IAA

Topicstarter

ja begrijp ik, [url=""]hier de verkorte versie[/url]

code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>uitgekleed</title>

<style type="text/css">
body {
    font: 100% Verdana, Arial, Helvetica, sans-serif;
    background: #666666;
    margin: 0; 
    padding: 0;
    text-align: center;
    color: #000000;
}
#container {
    width: 833px; 
    background: #FFFFFF;
    margin: 0 auto; 
    text-align: left; 
}
#header {
    height:156px;
    background:#1E1B16 url(images/header_01.gif) no-repeat;
    padding: 0; 
}
#navbar{
    height:29px;
    margin:0;
    padding:0;
}

#mainContent {
    padding: 20px 20px; /* remember that padding is the space inside the div box and margin is the space outside the div box */
    background:url(images/content_09.gif) repeat-y;
}       

</style>
</head>
<body>
<div id="container">
  <div id="header">
  </div>
<div id="navbar">
<img src="images/Header_02.gif" width="185" height="29" alt="" /><a href="index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image8','','images/Header-over_03.gif',1)"><img src="images/Header_03.gif" name="Image8" width="66" height="29" border="0" id="Image8" /></a><a href="floating_device.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image5','','images/Header-over_04.gif',1)"><img src="images/Header_04.gif" name="Image5" width="136" height="29" border="0" id="Image5" /></a><a href="methodology.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image6','','images/Header-over_05.gif',1)"><img src="images/Header_05.gif" name="Image6" width="168" height="29" border="0" id="Image6" /></a><a href="best_design.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image7','','images/Header-over_06.gif',1)"><img src="images/Header_06.gif" alt="best_design" name="Image7" width="113" height="29" border="0" id="Image7" /></a><img src="images/Header_07.gif" /><div id="navknop2"></div><img src=    "images/Header_08.gif" align="top" />
  </div>
  <div id="mainContent">
   <img height="456" width="634" src="images\flowdiagram2.gif" alt="" /></div>
</div>
</body>
</html>

(die padding in content maakt niets uit)

ohja, nog een mooie oplossing om zon grijs randje ook aan de andere kant te krijgen?

tnx wederom

[ Voor 3% gewijzigd door pietjepuk|IAA op 09-10-2008 13:45 ]

donderdag 9 oktober 2008 00:57

Acties:

RobIII

Admin Devschuur®

^ Romeinse Ⅲ ja!

Heel die thickbox komt niet terug in die uitgeklede versie

Ah, dat randje ging niet over de thickbox. Nah, hoe heb je het randje links gemaakt en hoe denk je het rechts te krijgen? Het is gewoon een background image met repeat-y op je content container. Makkelijkst is je plaatje even breed te maken als je container en dan rechts ook wat grijze pixels neer te zetten.

Verder is het hier niet de bedoeling dat we je aan je handje gaan houden; je mag best zelf even testen/stoeien met je code om te zien waar het probleem zit of kan zitten.

[ Voor 78% gewijzigd door RobIII op 09-10-2008 01:05 ]

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

donderdag 9 oktober 2008 07:54

Acties:

pietjepuk|IAA

Topicstarter

Ok dat is beter ja.

Het plaatje staat hier:

code:

#mainContent {
    padding: 20px 20px;
    background:url(images/content_09.gif) repeat-y;
}

Dit wit randje heb ik al een week last van maar ik dacht, laat ik eerst de functionaliteiten in grote lijnen voor elkaar krijgen...

Ik heb echt geen idee hoe ik het wegkrijg

donderdag 9 oktober 2008 09:55

Acties:

Da Weef

Wit randje? Wat bedoel je nu?

Voor het probleem met het grijze randje is eerder door Rob reeds een oplossing gepresenteerd...

.

donderdag 9 oktober 2008 11:12

Acties:

pietjepuk|IAA

Topicstarter

Da Weef schreef op donderdag 09 oktober 2008 @ 09:55:
Wit randje? Wat bedoel je nu?

Voor het probleem met het grijze randje is eerder door Rob reeds een oplossing gepresenteerd...

Ja ik bedoel dat het grijze randje niet doorloopt vanuit de header als je het opent in ie6. In FF werkt het prima en sluit het goed aan. Er zit dus eigenlijk een witregel tussen de header en content.

donderdag 9 oktober 2008 11:46

Acties:

Da Weef

Dat ligt er volgens mij aan dat de images die je in de navbar hebt staan een margin introduceren. Als je een aparte stylesheet hebt voor IE6 kun je dus gewoon de top-margin voor navbar -1 zetten.

Een andere oplossing is om simpelweg de navbar ook de background image mee te geven, die je de content geeft. Het is denk ik sowieso netter om dat te doen en daarnaast dan van je nav-plaatje een gifje met transparantie te maken...

.

donderdag 9 oktober 2008 12:05

Acties:

pietjepuk|IAA

Topicstarter

Da Weef schreef op donderdag 09 oktober 2008 @ 11:46:
Dat ligt er volgens mij aan dat de images die je in de navbar hebt staan een margin introduceren. Als je een aparte stylesheet hebt voor IE6 kun je dus gewoon de top-margin voor navbar -1 zetten.

Een andere oplossing is om simpelweg de navbar ook de background image mee te geven, die je de content geeft. Het is denk ik sowieso netter om dat te doen en daarnaast dan van je nav-plaatje een gifje met transparantie te maken...

Ok daar had ik idd ook overnagedacht. Waarom ik het zo gedaan heb is omdat ik de plaatjes van de knoppen niet erop kreeg. Hoe doe je dat? Een aparte id maken in de css voor elke knop met een absolute positie?

edit:

Die witregel is weg, veel betere oplossing inderdaad. Nu die knoppen nog op de goede plaats terug zetten

[ Voor 9% gewijzigd door pietjepuk|IAA op 09-10-2008 12:34 ]

donderdag 9 oktober 2008 12:40

Acties:

Da Weef

Oh, gets je hebt voor elke link een losse button gemaakt en die naast elkaar gezet... Kijk hier eens naar:

http://www.tutorial5.com/content/view/147/52/

En probeer zoveel mogelijk te doen met background-images in css. Verder moet je zelf maar even verder stoeien.

.

donderdag 9 oktober 2008 13:19

Acties:

pietjepuk|IAA

Topicstarter

Da Weef schreef op donderdag 09 oktober 2008 @ 12:40:
Oh, gets je hebt voor elke link een losse button gemaakt en die naast elkaar gezet... Kijk hier eens naar:

http://www.tutorial5.com/content/view/147/52/

En probeer zoveel mogelijk te doen met background-images in css. Verder moet je zelf maar even verder stoeien.

Ja klopt, behoorlijk lelijk idd. Had het eerst op een nette manier zoals ongeveer in die tutorial maar toen wist ik niet hoe ik er een rollover inkreeg...

Ik zie hier hoe ze met hover zo'n mouseover erin zetten. De belangrijkste vraag is eigenlijk: Hoe kan ik makkelijk de knoppen positioneren ?

donderdag 9 oktober 2008 13:36

Acties:

RobIII

Admin Devschuur®

^ Romeinse Ⅲ ja!

pietjepuk|IAA schreef op donderdag 09 oktober 2008 @ 13:19:
De belangrijkste vraag is eigenlijk: Hoe kan ik makkelijk de knoppen positioneren ?

Ik herhaal mezelf weer: Het is niet de bedoeling dat we ieder akkefietje voorkauwen en je aan het handje houden. Je valt van de ene vraag in de andere en we verwachten toch écht wat meer eigen inzet.

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

donderdag 9 oktober 2008 15:34

Acties:

pietjepuk|IAA

Topicstarter

Hm ik zie nu dat die imagemap helemaal niet werkt in ie6. de plaatjes in het flowdiagram zijn niet meer clickable.

Iemand een idee? In FF gaat het wel goed...

donderdag 9 oktober 2008 15:41

Acties:

RobIII

Admin Devschuur®

^ Romeinse Ⅲ ja!

We blijven niet je handje vasthouden... ik heb het nu toch vaak genoeg gezegd. Ik zie, wéér, totaal geen eigen inzet terug. Overigens vind ik het maar een vreemde 'imagemap' die je gebruikt, ik zie niet eens een <map> element of een usemap attribuut op je image. Ik weet niet waar deze 'nieuwerwetse' methode vandaan komt, maar wat is er mis met een good-ol' imagemap? Kijk hier eens.

[ Voor 61% gewijzigd door RobIII op 09-10-2008 15:46 ]

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