Php og css
HejsaJeg er ved at rette i vores eksamensprojekt, som vi skal op og forsvare engang mellem 7-27 juni, kender ikke datoen endnu..
Jeg er midlertidigt raget uklar med min gruppe, og har ikke kontakt med dem mere...
Hende der har sat php koderne ind, har stylet elementerne inde i html koden og ikke i eksternt css, og det er det jeg gerne vil have lavet om...
Den aktuelle side, jeg har problemer med, er følgende:
http://soederberg-webdesign.dk/eksamenOrganic/kontakt.php
Koden er således:
<!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>Vero Moda´s økologiske kollektion "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="Shop økologisk tøj fra Vero Modas nye kollektion 'Organic Cotton'" />
<meta name="keywords" content="Økologlogi, økologisk tøj, Organic Cotton" />
<meta name="author" content="Organic Cotton team" />
<style type="text/css" media="all">
@import "organic.css";
</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="shoppingcart/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="sidebar">
<br />
<center><form action="http://soederberg-webdesign.dk/organic/" method="get">
<input type="text" size="18" name="goto" />
<input type="submit" value="Søg" />
</form></center>
<br />
<center>
<p><img src="images/billede2.jpg" alt="Produktbillede" /></p>
<p><br />
</p>
<p> </p>
</center>
</div>
<div id="venstre">
<!-- Kommentarer til koden:
Her begynder formen der skal lade folk besvare en række spørgsmål og sende kommentarer i en email til os.
form name="form1" er bare det navn man giver den overordnede form.
method="post" method refererer til hvordan formen skal opføre sig, og post betyder at koden skal vises/postes for brugeren.
action="contactform.php" gør at formen linker til php kodningen der indeholdes i contactform.php filen. -->
<div id="formHolder">
<form action="contactform.php" method="post" name="form1" id="form1">
<table width="100%" border="1" cellpadding="6" cellspacing="10" >
<tr>
<!-- Her følger skabelsen af alle tekstfelterne. Input navn (name, email osv) er vigtigt, fordi det bliver brugt af funktionerne på contactform.php til at videreføre det som brugeren skriver til os. -->
<td><label for="email">
<div align="right" class="style40">
<div align="center" class="style64">Email:</div>
</div>
</label> </td>
<td><div align="left">
<input name="email" type="text" id="email" size="35" maxlength="100" />
</div></td>
</tr>
<tr>
<td><label for="name">
<div align="right" class="style40">
<div align="center" class="style64">Navn:</div>
</div>
</label> </td>
<td><div align="left">
<input name="name" type="text" id="name" size="35" maxlength="80" />
</div></td>
</tr>
<tr>
<!-- Her følger quizspørgsmålene. Når man laver dem via "indput type", kommer svarmulighederne til at fremstå som radiobuttons, hvor brugeren kan sætte sit kryds i een. -->
<td><div align="right" class="style40">
<div align="center" class="style64">Hvad synes du om Organic Cotton?</div>
</div></td>
<td><p align="left">
<label> <span class="style37">
<input type="radio" name="budget" value="Chess" id="budget_0" />
<span class="style63"> Flot kollektion</span></span></label>
<span class="style63"><br />
<label>
<input type="radio" name="budget" value="Chess Cartoons" id="budget_1" />
Lækker kollektion</label>
<br />
<label>
<input type="radio" name="budget" value="Pens" id="budget_2" />
Grim kollektion</label>
<br />
<label>
<input type="radio" name="budget" value="Markers and Watercolours" id="budget_3" />
Smart kollektion</label>
<br />
<label>
<input type="radio" name="budget" value="Digital" id="budget_4" />
Ligegyldig kollektion</label>
</span><br />
</p></td>
</tr>
<tr>
<!-- Her følger quizspørgsmålene. Det er "rullevindue" spørgsmål, i stedet for radiobuttons som ovenover, hvor brugeren kan markere een. Det er opnået ved at bruge "option value" i stedet for "input type". Det er lidt hurtigere gjort på rullevinduemåden, i øvrigt. -->
<td><div align="right">
<label for="travelers">
<div align="center"><span class="style64">Hvordan fik du kendskab til vores site?</span></div>
</label>
</div></td>
<td><div align="left">
<select name="travelers" id="travelers">
<option>Vælg...</option>
<option value="ICC">Gennem Google</option>
<option value="Art Community">Gennem venner</option>
<option value="Blogging">Gennem kampagne</option>
<option value="Friend Reference">Gennem familie</option>
<option value="Other">Andet</option>
</select>
</div></td>
</tr>
<!-- Her dannes feltet til kommentarer som brugeren kan skrive i. Det skabes ved at bruge columns og rows, og ved at putte det ind i en textarea klamme. -->
<tr>
<td><div align="right">
<label for="comments">
<div align="center" class="style64">Kommentarer:</div>
</label>
</div></td>
<td><div align="left">
<textarea name="comments" id="comments" cols="26" rows="5"></textarea>
</div></td>
</tr>
<tr>
<!-- Her til sidst laves 2 knapper. En til at slette alt som brugeren har skrevet i formen, hvis vedkommende gerne vil begynde forfra, og så en "send email" knap. Man laver knapperne ved at vælge input type, og så reset for den der skal rydde formen, og submit for den der skal smide mailen afsted. -->
<td><div align="right">
<label for="clear"></label>
<div align="left">
<input type="reset" name="clear" id="clear" value="Fortryd" />
</div>
</div></td>
<td><div align="right">
<label for="submit"></label>
<div align="left">
<input type="submit" name="submit" id="submit" value="Send Email!" />
</div>
</div></td>
</tr>
</table>
</form>
</div>
</div>
</div>
</div>
<center><div id="footer3">
<p>©2008 | Organic Girls</p>
</div>
</center>
</body>
</html>
Hvordan får jeg stylet det lettest i css?
Mit stylesheet ser sådan her ud:
/* CSS Document */
html, body {
margin: 0;
padding: 0;
}
body {
background-color: #e1d4c1;
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: 295px;
background-color: #494e48;
line-height: 18px;
/*clear: right;*/
color: #ffffff;
}
#sidebar .padding {
padding: 0px 25px 25px 25px;
}
#venstre {
margin-right: 295px;
padding-left: 25px;
padding-top: 10px;
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:200px;
left: 444px;
top: 302px;
}
#flashfilmtekst {
position:absolute;
margin-left:200px;
left: 462px;
top: 251px;
}
Er det helt umuligt at redde?
Vi kan måske tage den over mail eller messenger?
Og kan det lade sig gøre at få hjælp for 200 point, eller skal der mere til?
Jeg har svært ved at forstå php delen...
og derfor er det svært for mig at få stylet det i det eksterne css fil...
Jeg vil meget gerne lave det så korrekt kodet som muligt til eksamen...
På forhånd tak lone
