webdesign - Flydende bokse - Udvikleren.dk - Programmering, webdesign og grafik

Tags: grafik webdesign

Bruger #14438 @ 27.11.08 19:36

Hej!

Det er nok lidt svært at forklare, men jeg kunne godt tænke mig nogle løsningsforslag til hvordan jeg kan bygge en side op der skal bestå af:

En side på 1000x760 px
med en baggrund
og så med nogle bokse på lad os sige 100x150 px der skal "flyde" rundt på siden, dvs. de skal ikke bevæge sig, men de må heller ikke stå på lige linje. Når der trykkes på disse kasser skal der åbnes de respektive sider i et popup vindue der skal styres via. en administrationsdel. Det sidste skal foregå i PHP. Når jeg nu vil bruge PHP udelukker det vel muligheden for Flash? Ikke at jeg er særlig hård i det, men er vel den nemmeste måde at styre disse kasser.
Eller skal jeg ud i og lave hele "billedet" i PS og så markere kasserne med nogle DIV tags?

Nogen der kan hjælpe?

3 svar postet i denne tråd vises herunder
1 indlæg har modtaget i alt 3 karma

Sorter efter stemmer Sorter efter dato

Bruger #10572 @ 27.11.08 20:35

Du kunne jo f.eks. lave nogle div-tags, hvor du så bestemmer deres placering via CSS. Har bikset et lille eksempel sammen:

HTML kode

 <!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=iso-8859-1" />
 <title>Floating Boxes</title>
 <script language="javascript">
 function showPopUp(div){
     if(div.id == "content1"){
         window.open('pagename1.php','pagename1','width=320,height=190');
     } else if(div.id == "content2"){
         window.open('pagename2.php','pagename2','width=320,height=190');
     }
 }
 </script>
 <style type="text/css">
 body{
     width:1000px;
     height:760px;
 }
 #content1{
     background-color:#0099CC;
     width:100px;
     height:150px;
     position:absolute;
     top:40px;
     left:20px;
 }
 #content2{
     background-color:#FFCC00;
     width:100px;
     height:150px;
     position:absolute;
     top:100px;
     left:200px;
 }
 </style>
 </head>
 
 <body>
 <div id="content1" onclick="showPopUp(this)">
 Indhold 1
 </div>
 <div id="content2" onclick="showPopUp(this)">
 Indhold 2
 </div>
 </body>
 </html>

Det er måske endda bedre at lave en wrapper-div, der bestemmer sidens højde og bredde, men nu lavede jeg bare bodyen om for nemhedens skyld.

Indlæg senest redigeret d. 27.11.2008 20:39 af Bruger #10572

Bruger #14438 @ 28.11.08 15:33

Det kunne da godt være løsningen!
Hvordan skal selve showpopup delen se ud for at åbne et popup vindue?

Bruger #10572 @ 28.11.08 16:29

Jeg er ikke helt sikker på at jeg forstår hvad du mener.

onclick="showPopUp(this)", der placeret i hver div, sørger for at køre en JavaScript-funktion, der åbner popup-vinduet.

I showPopUp-funktionen, ændrer du bare window.open('pagename1.php','pagename1','width=320,height=190');
til at passe til den side du nu gerne vil ha' åbnet som poup

Flydende bokse

Karma barometer (30 dage)

Modtaget

Givet

Favorit hos
Forum tråde
Artikler