Avatar billede viggosmor Nybegynder
04. juni 2008 - 10:06 Der er 19 kommentarer og
1 løsning

Eksamens projekt igen igen

Jeg er ved at lægge sidste hånd på mit eksamensprojekt, men er løbet ind i problemer:

På denne side, har mit tidligere gruppemedlem, sat produktbilleder og flash filmen ind i layers, og positioneret med css...

http://soederberg-webdesign.dk/eksamenOrganic/shoppingcart/index.php

Men kan ikke finde ud af hvordan jeg retter det til, så det bliver positioneret rigtigt i forhold til hinanden...

Jeg ville godt lave det i divs og css..

Jeg kan ikke få flashfilmen, til at blive korrekt posioneret...

Her er html´en / Php´en:


<?php
// Include MySQL class
require_once('inc/mysql.class.php');
// Include database connection
require_once('inc/global.inc.php');
// Include functions
require_once('inc/functions.inc.php');
// Start the session
session_start();
?>
<!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>Organic Cotton, et multimediedesign eksamensprojekt</title>
    <meta http-equiv="Content-Language" content="en-us" />
   
    <meta http-equiv="imagetoolbar" content="no" />
    <meta name="MSSmartTagsPreventParsing" content="true" />
   
    <meta name="description" content="Køb Vero modas nye økologiske kollektion her!" />
    <meta name="keywords" content="Vero Moda, Organic Cotton" />
   
    <meta name="author" content="Organic Girls" />
   
    <style type="text/css" media="all">
    @import "../organic.css";
    #apDiv1 {
    position:absolute;
    left:348px;
    top:307px;
    width:381px;
    height:58px;
    z-index:1;
}
    </style>
</head>




<body>
<div id="content">
<div id="banner"><object type="application/x-shockwave-flash" data="../images/lonesBanner4.swf" width="900" height="200">
    <param name="movie" value="../images/lonesBanner4.swf" />
    <param name="quality" value="high" />
</object></div>
<div id="maincontent">
<div id="vdividermenu">
<ul>
<li><a href="../index.php" title="Home">Forside</a></li>
<li><a href="index.php" title="webshop">Webshop</a></li>
<li><a href="../visioner.php" title="visioner">Visioner</a></li>
<li id="current"><a href="../holdninger.php" title="Grundholdninger">Grundholdninger</a></li>
<li><a href="../betingelser.php" title="Handelsbetingelser">Handelsbetingelser</a></li>   
<li><a href="../kontakt.php" title="kontakt">Kontakt </a></li>
</ul>
</div>


<div id="venstre">
<h1>Organic Cotton udvalg: </h1>
<?php
$sql = 'SELECT * FROM books ORDER BY id';
$result = $db->query($sql);
$output[] = '<ul>';
while ($row = $result->fetch()) {       
$output[] = '<li>'.$row['title'].' <br/>Size: '.utf8_encode($row['author']).' <br/> Pris i kroner: '.$row['price'].' <br /> <button onclick="location.href=\'cart.php?action=add&amp;id='.$row['id'].'\';return false" class="blue" name="Button'.$row['id'].'">Læg i kurv</button><br/><br/><br/><br/><br/></li>';
}
$output[] = '</ul>';
echo join('',$output);
?>




<div id="billed1"> <a href="../toej.php"><img src="../images/webshoptoej1.jpg" border="0" alt="Organic Cotton tøj"/></a> </div>

<div id="billed2"><a href="../2 toej.php"><img src="../images/webshoptoej2.jpg" width="129" height="120" border="0" alt="Organic Cotton tøj"/></a></div>

<div id="billed3"> <a href="../3 toej.php"><img src="../images/webshoptoej3.jpg" border="0" alt="Organic Cotton tøj"/></a> </div>

<div id="billed4"><a href="../4toej.php"><img src="../images/webshoptoej4.jpg" width="98" height="120" border="0" alt="Organic Cotton tøj"/></a></div>

<div id="reklame"> 
  <object type="application/x-shockwave-flash" data="../images/lonesFilm4.swf" width="425" height="425">
    <param name="movie" value="../images/lonesFilm4.swf" />
    <param name="quality" value="high" />
</object> </div>
</div>

</div>
<center><div id="footer">
  <p>&copy;2008 | Organic Girls</p>
  </div>
</center>
</div>



 
</body>
</html>



Og css´en:

/* CSS Document */
html, body {
    margin: 0;
    padding: 0;
    }
   
body {
    background-color: #ffffff;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #666666;
    background-image: url(images/sort2.jpg);
    background-repeat: repeat;
    background-attachment: fixed;
    }
   
#content {
        width: 900px;
        padding-top: 0px;
        padding-bottom: 0px;
        background-color: #feffff;
        margin-left: auto;
        margin-right: auto;
        }   
/*#maincontent {
        width: 900px;
        background-color: #FFFFFF;
        }*/
       

                   
#sidebar {
    position: relative;   
    top: 0px;
    float: right;
    width: 304px;       
    background-color: #494e48;
    line-height: 18px;
    /*clear: right;*/
    color: #ffffff;
}       
               
#sidebar .padding {
    padding: 0px 25px 25px 25px;
}

#venstre {
    margin-right: 304px;
    padding-left: 25px;   
    padding-top: 25px;
    padding-right: 10px;
    padding-bottom: 25px;   
    background-color: #feffff;
    line-height: 18px;
    }

#venstre .padding {
    padding: 5px 25px 25px 50px;
}       
   
#footer {
    clear: both;   
    background: #333333;
    height: 30px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #FFFFFF;
    border-top: 3px solid #494e48;
    padding: 13px 25px;
    line-height: 10px;
    }

#vdividermenu ul{
margin: 0;
padding: 0;
/*margin-bottom: 1em;*/
float: left;
font: bold 100% Verdana;
width: 100%;
/*border: 1px solid #ffffff;*/
background-color: #333333;
}

* html #vdividermenu ul{ /*IE only rule, reduce menu width*/
width: 100%;
}

#vdividermenu ul li{
display: inline;
}

#vdividermenu ul li a{
float: left;
color: #FFFFFF;
padding: 2px 12px;
text-decoration: none;
background: transparent url(images/vertical.gif) center right no-repeat;
}

#vdividermenu ul li a:visited{
color: #FFFFFF;
}

#vdividermenu ul li a:hover{
color: #c5e792;
background-color: #000000;
}   

#sidebar img {
    padding: 0px 0px 100px 0px;
    }   
   
#CartIndhold {
   
    padding-left: 25px;   
    padding-top: 10px;
    padding-right: 0px;
    padding-bottom: 25px;   
    background-color: #feffff;
    line-height: 18px;
    }
       
#footer2 {
    clear: both;   
    background: #333333;
    height: 30px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #FFFFFF;
    border-top: 3px solid #494e48;
    line-height: 10px;
    width: 900px;
}

h1 {
    color: #666666;
    font-size: 16px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-weight: bold;
    }           
   
#footer3 {
    clear: both;   
    background: #333333;
    height: 40px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #FFFFFF;
    border-top: 3px solid #494e48;
    padding-top: 15px;
    line-height: 10px;
    width: 900px;
}
#formHolder {
    width: 96%;
    }       
   
    #billed1 {
    position:absolute;
    margin-left:200px;
    left: 252px;
    top: 246px;


}

#billed2 {
    position:absolute;
    margin-left:200px;
    left: 230px;
    top: 400px;


}

#billed3 {
    position:absolute;
    margin-left:200px;
    left: 263px;
    top: 552px;


}

#billed4 {
    position:absolute;
    margin-left:200px;
    left: 246px;
    top: 702px;


}
#reklame {
    position: absolute;
    margin-left: 140px;
    left: 326px;
    top: 170px;
}

#flashfilmtekst {
    position:absolute;
    margin-left:200px;
    left: 462px;
    top: 251px;
}


a:link{
        color: #66CC33;
        text-decoration: none;
        font-weight: bold;
    }   
   
a:hover {
        color: #CCCCCC;
        text-decoration: underline;
        font-weight: bold;
        }
       
a:visited {
        color: #66CC33;
        font-weight: bold;
        text-decoration: none;
        }
       
#sidebar2 {
    position: relative;   
    top: 0px;
    float: right;
    width: 304px;
    padding-bottom: 5400px;       
    background-color: #494e48;
    line-height: 18px;
    /*clear: right;*/
    color: #ffffff;
}       
               
/*#sidebar2 .padding {
    padding: 0px 25px 25px 25px;
}    */   

#reklameLone {
        float: right;
        margin-left: 300px;
        }


Er det til at fixe?
Avatar billede w13 Novice
04. juni 2008 - 10:12 #1
Hvor ville du have flashen placeret i stedet? Kan ikke se, at det skulle være galt, som det er nu, men jeg ved jo heller ikke, hvor du vil ha' den.
Avatar billede viggosmor Nybegynder
04. juni 2008 - 10:21 #2
jamen, produktbillederne og filmen rykker sig ikke med når man minimerer vinduet blandt andet, og så synes jeg filmen er placeret for yderligt og for langt nede på siden...

Ja jeg har lidt svært ved at forklare hvad jeg mener...

Undskyld..
Avatar billede viggosmor Nybegynder
04. juni 2008 - 10:22 #3
Jeg mener det er pga at elemnterne er placeret som absolutte...
Avatar billede w13 Novice
04. juni 2008 - 10:33 #4
Ja. Prøv først og fremmest at fjerne deres position:absolute;
Det går så ikke at positionere på den måde, for så bliver det, som det du nu vil undgå.
Avatar billede viggosmor Nybegynder
04. juni 2008 - 10:50 #5
Hmm, det fik det hele til at ryge ned på siden...

Jeg skal jo ligesom have 3 divs, en til teksten og knapperne, en til produktbillederne, og en til filmen, eller hvad?

Kan man ikke bruge float?
Avatar billede w13 Novice
04. juni 2008 - 11:02 #6
Jo, jeg ville bruge float. Dit problem er bare, at produkterne hentes fra en database og listen over produkter genereres jo derfor også ud fra den db.

Billederne skulle nemlig sættes ind i den kode, som laver menupunkterne, men hvordan skulle koden så vide, hvilket billede der hører til hvilket produkt? Det kan være, at det hele står i databasen, men det ved jeg jo ikke.
Avatar billede w13 Novice
04. juni 2008 - 11:03 #7
F.eks. skulle dette her:

$output[] = '<li>'.$row['title'].' <br/>Size: '.utf8_encode($row['author']).' <br/> Pris i kroner: '.$row['price'].' <br /> <button onclick="location.href=\'cart.php?action=add&amp;id='.$row['id'].'\';return false" class="blue" name="Button'.$row['id'].'">Læg i kurv</button><br/><br/><br/><br/><br/></li>';

Nok være i retning af:

$output[] = '<li><IMG SRC="BILLEDET" STYLE="float:right">'.$row['title'].' <br/>Size: '.utf8_encode($row['author']).' <br/> Pris i kroner: '.$row['price'].' <br /> <button onclick="location.href=\'cart.php?action=add&amp;id='.$row['id'].'\';return false" class="blue" name="Button'.$row['id'].'">Læg i kurv</button><br/><br/><br/><br/><br/></li>';

Dvs. tilføjet:
<IMG SRC="BILLEDET" STYLE="float:right">
Avatar billede viggosmor Nybegynder
04. juni 2008 - 11:10 #8
Oki, jeg ved ikke noget om, hvordan hun har lavet databasen....

Måske jeg bare skal lade det være og accepterer at det er som det nu er....

Det virker lidt omstændigt, at lave det om....
Avatar billede w13 Novice
04. juni 2008 - 11:15 #9
Ja :) Det tror jeg.
Avatar billede w13 Novice
04. juni 2008 - 11:15 #10
Hvis du beslutter dig for det, kan du bare oprette et svar og acceptere det, så du får dine point igen og spørgsmålet lukkes.
Avatar billede mclemens Nybegynder
04. juni 2008 - 11:22 #11
Prøv med:
    #maincontent{position:relative;}

... Og så skal billedernes top og left nok rettes.
Position relative på maincontent gør at top og left
absolute placering sker ud fra maincontent's placering.
- Forhåbentlig hjælper det på problemet, men måske skal
top og left også lige rettes lidt til på flashen's placering.
Avatar billede viggosmor Nybegynder
04. juni 2008 - 11:23 #12
Oki, nu fik jeg også placeret filmen nogenlunde... så lukker her, men tak for din hjælp alligevel :)
Avatar billede viggosmor Nybegynder
04. juni 2008 - 11:25 #13
Oki, mcclemens, det vil jeg kigge på... men nu ser det da nogenlunde ud, bare man ikke har et minimeret vindue LOL....
Avatar billede mclemens Nybegynder
04. juni 2008 - 11:28 #14
F.eks.:


        #maincontent{position:relative;}
#reklame {
    position: absolute;
    margin-left: 140px;
    left: 300px;
    top: 50px;
}




#billed1 {
    position:absolute;
    margin-left:200px;
    left: 122px;
    top: 46px;


}

#billed2 {
    position:absolute;
    margin-left:200px;
    left: 103px;
    top: 200px;


}

#billed3 {
    position:absolute;
    margin-left:200px;
    left: 133px;
    top: 352px;


}

#billed4 {
    position:absolute;
    margin-left:200px;
    left: 116px;
    top: 502px;


}
Avatar billede viggosmor Nybegynder
04. juni 2008 - 11:44 #15
Oki, takker... det vil jeg lige prøve så...

Tusind tak!!

Hvis jeg får det til at fungere opretter jeg lige et nyt spørgsmål med point til dig mclemens... :)
Avatar billede viggosmor Nybegynder
04. juni 2008 - 12:03 #16
Super mclemens, det funkede, nu skal jeg bare lige rette produktbillederne så de står mere mod venstre...

Kan man oprette point heri tråden igen, eller skla man oprette et nyt spørgsmål?
Avatar billede mclemens Nybegynder
04. juni 2008 - 12:08 #17
Velbekomme :o) ... man skal oprette et nyt spørgsmål,
men det behøves ikke, det var ikke så svært igen ;)
Avatar billede viggosmor Nybegynder
04. juni 2008 - 12:19 #18
Oki, takker :)
Avatar billede viggosmor Nybegynder
06. juni 2008 - 16:54 #19
Jeg har nu til min gru set, hvordan siden ser ud på min kærestes stationære skærm, han har en hel anden skærmstørrelse, og opløsning, og der er alle elementerne helt ude i venstre side, hvor man næsten ikke kan se dem...

Jeg opretter et nyt spørgsmål med point, til den der har svaret på hvordan jeg retter det....

Det må næsten være den absolutte posionering der gør det...
på elemnterne, altså php delen med formularen, produktbillederne og flash filmen....

Vil godt have det helt klart til eksamen...
Avatar billede viggosmor Nybegynder
06. juni 2008 - 17:16 #20
Nå fandt ud af det selv, havde ikke defineret width på #maincontent..
Det gjorde udslaget, så ingen hjælp alligevel :)
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester