Ik heb een tweetal vragen waar ik al een paar weken mee bezig ben.
Ik zou op de site die ik aan het maken ben graag het volgende willen maken, maar ik weet niet hoe ik dat met CSS voor elkaar krijg.
Ik wil bij de adresgegevens het telefoonnummer, mobiele nummer en e-mailadres recht onder elkaar zetten daarnaast moeten de nummers en het mailadres zelf ook recht onder elkaar komen te staan. (zoals een tab in een tekstverwerker dat doet.) De combinatie HTML en CSS zou daar toch een oplossing voor moeten hebben?
De tweede vraag gaat over een foto waar hotspots op zijn aangebracht.
Deze foto beslaat op deze pagina de gehele header-DIV. De foto geeft geen problemen op een scherm dat groter is dan 1024px, maar als de header kleiner moet worden, wordt de foto zelf wel kleiner (passend) maar verkleinen de hotspots niet mee. Kan ik met behulp van PHP of Javascript de gegevens van die hotspots ook mee verkleinen (bijvoorbeld mbv een "if(schermafbeelding=='')-statement) ?
Ik ben bang dat er de komende dagen nog wel een paar vragen bij komen. Vaak weet ik wel een oplossing voor het ene probleem en voor het andere probleem, maar als dat dan samen valt, ben ik de draad een beetje kwijt.
Ik hoop dat er iemand is die me in ieder geval bij de eerste twee vragen kan en wil helpen zodat dit weekend in ieder geval niet in zijn geheel wordt besteed aan het speuren op andere internetsites...
Je eerste vraag snap ik niet zo goed...
Bedoel je:
adres
telefoon
mobiel
email
?
Als dat zo is, dan is de vraag snel op telossen vermoed ik (tenzij je iets anders bedoeld).
Als jij je gegevens opvraagt uit de database via PHP, kan je alles toch gewoon scheiden met een <br /> ? die begint gewoon een nieuwe lijn waardoor alles gewoon onder elkaar komt.
Op je 2de vraag heb ik vermoedelijk ook een werkende uitkomst.
Maak een map aan en geef die area's mee. Deze duiden de gebieden aan in die map. Dan geef je die map mee met je afbeelding.
Deze dien je natuurlijk wel zelf aan te passen, maar ik denk dat dit wel een uitkomst zou kunnen bieden... (tenzij je dit al gebruikt natuurlijk, er is nergens een voorbeeldje)...
Een stukje code dat je momenteel gebruikt kan soms wonderen doen als er antwoorden verwacht worden...
Met de eerste vraag is het inderdaad zo dat er ongeveer dit zou moeten komen:
Adres, telefoon etc moeten mooi onder elkaar komen, maar ook de straatnaam, nummers en mailadres moeten een mooi rijtje vormen
adres straatnaam
telefoon nummer
mobiel nummer
email mailadres
-----------------------------------------------------
Het tweede punt:
Dit is de code die ik heb.
Nu maak ik in mijn CSS sheet een opmaak voor twee verschillende resolutie formaten
Zeg maar een van 1024px breed en een van 1280px breed. De 1280 px brede pagina laat het gewenst resultaat zien. De pagina op 1024 px ook wel maar daar zijn de coords van de foto niet goed.
Kan ik daar dus mbv Javascript of PHP een if statemant omheen zetten waarbij ik de coords aanpas.
Ik hoop dat het zo duidelijk is, ik zou niet weten hoe ik het anders moet omschrijven...
<style>
.adres,.email{
float:left;//laat de boxen links aligneren
align:left;//laat de inhoud links aligneren
}
</style>
<div class="adres">
Hier de adresgegevens en alles die links moet gealigneerd worden.
</div>
<div class="email">
Hier de emailgegevens en de rest die er rechts van moet staan.
</div>
Hierna zal je volgende element best een css clear:both; moeten hebben, anders blijft het er maar naast komen. Met padding en margin kan je de boxen wat uit elkaar krijgen.
Over de imagemap: meestal is die oplossing niet de goede oplossing. Wat probeer je er exact mee te doen? Is het een menu?
Als eerste dank voor de oplossing voor het eerste probleem.
Voor het tweede probleem het volgende;
In de header van de pagina komt een afbeelding te staan met daarin de hotspots.
Op deze foto staan personen die werken in dat bedrijf.
Door te klikken op één van de personen komt er in een DIV daaronder de CV van deze persoon te staan.
Je kan dus eigenlijk wel zeggen dat het een soort menu is, maar zeker niet het hoofdmenu.
Ik heb de foto een breedte meegegeven gelijk aan de breedste schermmaat die ik aan het maken ben (1280px). Het verkleinen lukt me dus voor een ander scherm wel voor de foto maar niet voor de "#map"...
Ik kan hier jammer genoeg niet meer van laten zien dan wat er in een eerder bericht hierboven staat
Ik zou dit niet als imagemap doen. Wat als er iemand nieuw in het bedrijf komt te werken? Nieuwe foto, nieuwe imagemap,... Is best veel werk en niet echt futureproof.
Wat je zou kunnen doen, is met CSS een @media query gaat toekennen en een 2e map maakt die goed is voor kleinere schermen. Met de @media query kan je de grote versie voor kleinere schermen verbergen en omgekeerd. Dit werkt, maar is natuurlijk een lapmiddeltje.
Btw: iemand die je een goed antwoord geeft kan je 'belonen' door rechts van zijn antwoord op "Bedankt Poster!" of Oplossing te klikken.
Ja dat heb je zo met nieuwe leden.... die hebben die knoppen nog niet zo in de gaten.
Maar het is voor mij zowiezo van zelfsprekend dat iedereen die de moeite meent naar mijn 'problemen' te kijken daar voor bedankt wordt
Ik ga me eens verdiepen in die @media query.
Als ik het goed begrijp maak ik op de pagina twee (of meer naar gelang ik voor schermformaten nodig heb) header DIV's aan die ik op bijbehorende schermen wel of niet zichtbaar maak.
Ik denk dat dit inderdaad een oplossing kan zijn. Mochten er nog andere ideeen zijn (wat minder lapmiddel ) dan kan ik dat altijd nog aanpassen.
Moet ik nu dan al aangeven dat het een oplossing is?
Maar in ieder geval bedankt!
De beste oplossing is om echte links te maken, geen imagemap links. Natuurlijk moet je dan de fotootjes apart hebben, ipv 1 grotere groepsfoto.
Die @media query is een mogelijkheid met css, je zal het vast ook met javascript kunnen, maar dat zal omslachtiger zijn (kijken naar schermgrootte, aanpassen van de gezette waarden).
Laat het topic nog maar even open, zolang je nog niet ten volle de oplossing hebt uitgewerkt. Wie weet komt er iemand met een beter idee.
Het is misschien een ideetje?
Al heb ik wel een stil vermoeden dat je foto vaste afmetingen zal moeten hebben, heb er ook nog niet verder op in gekeken...
Wat is jouw favoriete javascript framework? (S: 18, R: 2)
Gesponsorde links
Actiefste leden van de maand
