Gå til innhold

Vil lære PHP + CSS. Kan noen ta en titt på dette?

phex

Av phex
i Programmering og webutvikling

Anbefalte innlegg

phex

phex

Skrevet
Skrevet (endret)

Prøver å lage min første side ved hjelp av PHP og CSS. Lekte meg litt for å se hva jeg klarte å få til og resulatet bledette. Har jeg gjort mye feil eller mange rare ting? En ting jeg synes er litt rart er at når jeg skal lage en ny side til websiden, så må jeg alltid lage en .html fil med innholdet og en .php fil med include koden. Er det sånn det skal gjøres eller gjør jeg feil? Du kan også laste ned hele siden i .zip filen nedenfor.

 

Takk

 

Ps: Er litt trøtt nå så det kan godt hende at dere ikke skjønner hva jeg mener med dette innlegget.

 

:sleep:

Endret av phex
Lenke til kommentar

Videoannonse

Videoannonse
Annonse
phex

phex

Skrevet
  • Forfatter
Skrevet (endret)
Du mangler

</body>

</html>

Hvor er det jeg mangler det?

 

Du har 9emner om denne siden din, går vel ann å holde det innenfor en tråd.

"Min første hjemmeside, masse problemer" eller noe.

Beklager så mye at det ble sånn, skal samle alt i en tråd neste gang ...

 

Du trenger ikke å lage en egen html-fil for hovedinnholdet - dette kan du legge rett i php filen. Men husk å lukke php tag'en først.

 

Eksempel:

 

<?php include('header.html'); ?>

 

Her er hovedsiden sin html kode....

 

<?php include('footer.html'); ?>

5249532[/snapback]

Takk, har gjort det nå. Er det riktig gjort (sjekk vedlegg lenger nede på siden)? Og er det andre ting som er feil/rart ellers?

 

Takk!

Endret av phex
Lenke til kommentar
Jernlov

Jernlov

Skrevet
Skrevet (endret) 

HTML: <div id="innhold">teksten</div>
CSS: div#innhold  {
         width: 780px;
}

For å få teksten litt innenfor og så prøv dette:

CSS: div#innhold  {
         width: 760px;
         padding-left: 10px;
         padding-right: 10px;
}

 

 

Du burde også ta headern i CSS'n:

(gi den div'n du har bildet i id header og fjern bildet fra html)

<div id="header"></div>

 

også gi css'n det her:

 

* {

margin: 0 auto;

padding: 0;

}

div#header {

background: url('bilder/header.jpg');

width: 780px;

height: 60px;

}

Endret av skate4life
Lenke til kommentar
Jernlov

Jernlov

Skrevet
Skrevet

Først så burde du skifte charset fra utf-8 til: (for å kunne skrive "æøå")

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">

 

Også må du ta bort linken til stilarket som er innenfor <body>

 

Også for å footeren til å være til sist må du ikke ha den etter <div id="header"> men etter <div id="innhold">

 

Også bildet du har (film klapper) trenger ikke width og height ettersom det har den størrelsen fra før (uten spesifisert størrelse så er bildet i orginal størrelse)

 

Alt i alt skal det bli slik:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Min første webside</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link rel="stylesheet" href="/stilark.css" type="text/css">
</head>
<body>
<div id="header"></div>
<div id="innhold">
<p align="justify">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam enim. Phasellus semper tincidunt nisi. In a dui a est venenatis faucibus. Quisque gravida. Duis
eget ante ac quam sagittis elementum. Nullam aliquet nulla. Maecenas tincidunt. Curabitur dictum, eros at tincidunt lobortis, leo tellus ultricies dui, ut tincidunt elit mi quis
massa. Pellentesque cursus, lacus vitae venenatis varius, nulla leo tincidunt tellus, feugiat mollis nunc eros vestibulum est. In at dolor quis nulla cursus eleifend. Praesent id
ante. Ut congue, lacus et pretium porta, nibh massa venenatis dui, ac tristique massa sapien vitae sem. Nulla fringilla leo vel urna tempus porttitor. Duis ultrices. Praesent
vitae pede vitae dui placerat hendrerit. Suspendisse aliquam diam ac nisi. Quisque nonummy vulputate enim. Cras et nisl. Mauris lobortis, diam sit amet porttitor lacinia, leo
neque tristique tortor, vitae porttitor neque ligula at dolor.</p>
<p align="justify">Suspendisse potenti. Morbi sagittis pede ac libero. Fusce aliquam. Etiam malesuada. Aliquam erat elit, congue sed, fermentum id, dictum in, erat. Mauris sapien
leo, auctor et, semper in, consequat et, leo. Pellentesque condimentum tincidunt metus. Phasellus at quam. Aenean eleifend ornare nisl. Nam lacus.</p>

<p align="justify"><img src="bilder/testbilde1.jpg" alt="testbilde"></p>
</div>
<div id="footer"></div>
</body>
</html>

Lenke til kommentar
phex

phex

Skrevet
  • Forfatter
Skrevet (endret)

Tusen takk skate4life! Hva skulle jeg gjort uten deg? :love:

 

Over til noen spørsmål:

 

1) Hva er forskjellen mellom å skrive teksten/innholdet på siden i en .php fil og en .html fil? Som dere ser har jeg gjort det i en .php fil, men hva er forskjellen?

 

2) Hvis jeg har en webside som er på flere forskjellige språk, hvordan skal jeg da få lagt inn meta description/keywords? Jeg vil f. eks. at en svenske skal se beskrivelsen av siden på svensk, men en engelskmann skal se beskrivelsen av siden på engelsk og komme til den engelske delen av wesiden.

 

3) Hva er forskjellen mellom å ha headeren i css filen og i den såkalte main.php?

 

Håper jeg forklarte meg godt nok :)

Endret av phex
Lenke til kommentar
phex

phex

Skrevet
  • Forfatter
Skrevet (endret)

Tror jeg har gjort alt du sa i den siste posten din skate4life, men footeren er fortsatt over teksten. Kan noen se hva som er feil? Og hvorfor blir siden helt feil/rar i IE?

 

Main.php:

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Min første webside testest</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link rel="stylesheet" href="/stilark.css" type="text/css">
</head>
<body>
<div id="header"></div>
<div id="innhold"></div>
<div id="footer"></div>
</body>
</html>

 

Index.php:

 

<?php include('main.php'); ?>
<link href="stilark.css" rel="stylesheet" type="text/css" />
<div id="innhold">
 <p><span class="Overskrift">Lorem ipsum dolor sit</span></p>
 <p class="Vanlig">Amet, consectetuer adipiscing elit. Ut tristique mollis massa. Cras vel augue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer dapibus purus vel est. Vivamus auctor dapibus pede. Etiam ac ligula quis neque placerat tincidunt. In hac habitasse platea dictumst. Ut elementum mi ut orci. Proin lectus augue, malesuada in, viverra vitae, pretium ultricies, mauris. Etiam libero. Donec magna risus, vehicula at, lacinia id, blandit ut, ligula. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Mauris nec ligula nec nunc lobortis lacinia. Curabitur enim massa, lobortis eget, placerat tincidunt, mollis id, sapien. Quisque adipiscing. Pellentesque semper, orci quis pellentesque vehicula, turpis mi egestas sem, id ullamcorper eros mi sed dui. Etiam augue. Ut in nunc. Nunc et sem gravida nisi placerat placerat. Suspendisse scelerisque justo id dui.
   
   Duis molestie nisi non nisl. Suspendisse eu pede. Cras vulputate volutpat quam. Mauris sit amet metus eget risus lacinia dapibus. In dapibus lacus a nisl consectetuer sollicitudin. Integer nec odio eget sem auctor semper. Nulla id lorem eget nibh posuere dignissim. Duis interdum nunc a libero. Maecenas semper, elit ac posuere aliquet, est orci tincidunt mi, ut bibendum dolor turpis sed risus. Aliquam velit mauris, ornare eget, condimentum ut, convallis quis, augue. Curabitur ligula. Vestibulum justo nisl, pellentesque sit amet, lobortis sed, varius eu, turpis. Phasellus sem leo, sollicitudin quis, sodales ac, semper porttitor, neque.</p>
 <p class="Vanlig"> </p>
 <p class="Vanlig">Et bilde: </p>
 <p align="justify"><img src="bilder/testbilde1.jpg" alt="En flott filmklapper!"></p>
 <p align="justify"> </p>
 <p align="justify">Enda et bilde: </p>
 <p align="justify"><img src="bilder/testbile2.jpg" alt="Og Lucas Film THX lyd er vel best, elns ..."></p>
</div>

 

Stilark.css:

 

* {
margin: 0 auto;
padding: 0;
}
div#header {
background: url('bilder/header.jpg');
width: 780px;
height: 200px;
}

div#innhold {
padding-right: 10px;
width: 760px;
padding-left: 10px;
}

div#footer {
background-image: url('bilder/footer.jpg');
width: 780px;
height: 60px;
}

.Overskrift {
font-size: 18px;
text-align: left;
font-family: Arial, Helvetica, sans-serif;
}

.Vanlig {
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
text-align: justify;
}

 

 

Hadde også vært veldig fint om noen kunne hjelpe meg med svarene i den forrige posten min. :)

 

Tusen hjertelig takk :love:

 

Link til siden hvis det er nødvendig ...

Endret av phex
Lenke til kommentar
Lurifaksen

Lurifaksen

Skrevet
Skrevet (endret)

Tror du er ganske langt ute å kjører nå...

 

Regner med det skal være noe slikt:

 

header.php:

<html>
<head>
<title>Min første webside testest</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link rel="stylesheet" href="/stilark.css" type="text/css">
</head>
<body>
<!-- Her slutter header -->

 

footer.php:

<!-- Her begynner footer- vet ikke helt hva du skal ha her, men slutt i alle fall med dette: -->
</body>
</html>

 

index.php:

<?php include('header.php'); ?>

 

<!-- Her begynner innholdet -->

<div id="innhold">

<p><span class="Overskrift">Lorem ipsum dolor sit</span></p>

<p class="Vanlig">Amet, consectetuer adipiscing elit. Ut tristique mollis massa. Cras vel augue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer dapibus purus vel est. Vivamus auctor dapibus pede. Etiam ac ligula quis neque placerat tincidunt. In hac habitasse platea dictumst. Ut elementum mi ut orci. Proin lectus augue, malesuada in, viverra vitae, pretium ultricies, mauris. Etiam libero. Donec magna risus, vehicula at, lacinia id, blandit ut, ligula. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Mauris nec ligula nec nunc lobortis lacinia. Curabitur enim massa, lobortis eget, placerat tincidunt, mollis id, sapien. Quisque adipiscing. Pellentesque semper, orci quis pellentesque vehicula, turpis mi egestas sem, id ullamcorper eros mi sed dui. Etiam augue. Ut in nunc. Nunc et sem gravida nisi placerat placerat. Suspendisse scelerisque justo id dui.

  

   Duis molestie nisi non nisl. Suspendisse eu pede. Cras vulputate volutpat quam. Mauris sit amet metus eget risus lacinia dapibus. In dapibus lacus a nisl consectetuer sollicitudin. Integer nec odio eget sem auctor semper. Nulla id lorem eget nibh posuere dignissim. Duis interdum nunc a libero. Maecenas semper, elit ac posuere aliquet, est orci tincidunt mi, ut bibendum dolor turpis sed risus. Aliquam velit mauris, ornare eget, condimentum ut, convallis quis, augue. Curabitur ligula. Vestibulum justo nisl, pellentesque sit amet, lobortis sed, varius eu, turpis. Phasellus sem leo, sollicitudin quis, sodales ac, semper porttitor, neque.</p>

<p class="Vanlig"> </p>

<p class="Vanlig">Et bilde: </p>

<p align="justify"><img src="bilder/testbilde1.jpg" alt="En flott filmklapper!"></p>

<p align="justify"> </p>

<p align="justify">Enda et bilde: </p>

<p align="justify"><img src="bilder/testbile2.jpg" alt="Og Lucas Film THX lyd er vel best, elns ..."></p>

</div>

<!-- Her slutter innholdet -->

 

<?php include('footer.php'); ?>

Endret av Lurifaksen
Lenke til kommentar
Jernlov

Jernlov

Skrevet
Skrevet (endret)

Du har forsatt en del feil;

 

Jeg ser i koden at du har gjort som jeg sa når det gjelder dette:

<body>
<div id="header"></div>
<div id="innhold"></div>
<div id="footer"></div>
</body>
</html>

 

Men ETTER det igjen så har du:

<link href="stilark.css" rel="stylesheet" type="text/css" />
<div id="innhold">
 <p><span class="Overskrift">Lorem ipsum dolor sit</span></p>

 <p class="Vanlig">Amet, consectetuer adipiscing elit. Ut tristique mollis massa. Cras vel augue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer dapibus purus vel est. Vivamus auctor dapibus pede. Etiam ac ligula quis neque placerat tincidunt. In hac habitasse platea dictumst. Ut elementum mi ut orci. Proin lectus augue, malesuada in, viverra vitae, pretium ultricies, mauris. Etiam libero. Donec magna risus, vehicula at, lacinia id, blandit ut, ligula. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Mauris nec ligula nec nunc lobortis lacinia. Curabitur enim massa, lobortis eget, placerat tincidunt, mollis id, sapien. Quisque adipiscing. Pellentesque semper, orci quis pellentesque vehicula, turpis mi egestas sem, id ullamcorper eros mi sed dui. Etiam augue. Ut in nunc. Nunc et sem gravida nisi placerat placerat. Suspendisse scelerisque justo id dui.
   
   Duis molestie nisi non nisl. Suspendisse eu pede. Cras vulputate volutpat quam. Mauris sit amet metus eget risus lacinia dapibus. In dapibus lacus a nisl consectetuer sollicitudin. Integer nec odio eget sem auctor semper. Nulla id lorem eget nibh posuere dignissim. Duis interdum nunc a libero. Maecenas semper, elit ac posuere aliquet, est orci tincidunt mi, ut bibendum dolor turpis sed risus. Aliquam velit mauris, ornare eget, condimentum ut, convallis quis, augue. Curabitur ligula. Vestibulum justo nisl, pellentesque sit amet, lobortis sed, varius eu, turpis. Phasellus sem leo, sollicitudin quis, sodales ac, semper porttitor, neque.</p>
 <p class="Vanlig"> </p>
 <p class="Vanlig">Et bilde: </p>
 <p align="justify"><img src="bilder/testbilde1.jpg" alt="En flott filmklapper!"></p>
 <p align="justify"> </p>
 <p align="justify">Enda et bilde: </p>
 <p align="justify"><img src="bilder/testbile2.jpg" alt="Og Lucas Film THX lyd er vel best, elns ..."></p>

</div>

 

 

Ta og kopier den nederste div id="innhold" med innhold og bytt ut med den som er først og tom. Og slett alt som er igjen etter </html>

 

 

Når det gjelder de tre spørsmålene dine;

 

1. PHP gjør at du kan bruke andre koder, php koder. Og du trenger ikke php til ditt bruk her. Ikke som jeg kan se. Så jeg ville gått for vanlig html

 

2. Når det gjelder det at du vil ha description på forskjellige språk. Om siden skal være på mange forskjellige språk så må du ha mange html (eller php) filer hvor i en er det engelsk og i en annen finnsk. Da kan du bare skrive finnsk i den finske filen osv. Men tipper på at du ikke er så grovt flerspråkelig at du skal ha alle lands språk men at du skal ta det på eventuelt engelsk så da er det like greit og bare ha description på engelsk.

 

3. Forskjellen på å ha header og footer bildet og sånn i css filen enn i html koden er at du bare trenger å nevne den engang, istedenfor engang i hver fil.

 

Når det gjelder at siden ser rar ut i IE så kan det ha noe med at du har litt rot i koden så gjør det jeg skrev øverst og se på siden i IE da.

 

Lurifaksen; vitsen med egne php filer for header og footer og sånn? Jeg ville virkelig gått for ren html her.

Endret av skate4life
Lenke til kommentar
Lurifaksen

Lurifaksen

Skrevet
Skrevet (endret)
Lurifaksen; vitsen med egne php filer for header og footer og sånn? Jeg ville virkelig gått for ren html her.

5275959[/snapback]

Jeg er ganske sikker på at denne lå i PHP-forumet først... :hmm: Og så vidt jeg skjønner var det litt av poenget...?

 

Uansett - er jo ekstremt mye enklere å legge header og footer i egne filer i stedet for å "hardcode" dette inn i hvert enkelt dokument. Moro når du skal gjøre en endring... :roll:

 

Men selvfølgelig, om han kun skal ha et eneste dokument er det jo ikke vits i.

 

phex: Description og keywords er det søkemotorene som ser - ikke folk som surfer innom siden din. Så språket her er "irrelevant" for folk som er på siden din. Men veldig relevant når det gjelder folk som skal finne websiden via søkemotor f.eks...

Endret av Lurifaksen
Lenke til kommentar
phex

phex

Skrevet
  • Forfatter
Skrevet (endret)
Tror du er ganske langt ute å kjører nå...

Og jeg som trodde jeg hadde skjønt noe :blush: Uansett, har nå gjort det som Lurifaksen har sagt og tror det er ganske riktig nå (håper i hvert fall). skate4life: Jeg gjorde det på Lurifaksen sin måtte fordi jeg synes den var enklere, håper du ikke blir sur :)Link til siden.

 

 

header.php:

<html>
<head>
<title>Min første webside testest</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link rel="stylesheet" href="/stilark.css" type="text/css">
<div id="header"></div>
</head>
<body>
<!-- Her slutter header -->

 

footer.php:

<!-- Her begynner footer -->
<div id="footer"></div>
</body>
</html>

 

index.php:

<?php include('header.php'); ?>

<!-- Her begynner innholdet -->
<div id="innhold">
<p><span class="Overskrift">Lorem ipsum dolor sit</span></p>
<p class="Vanlig">Amet, consectetuer adipiscing elit. Ut tristique mollis massa. Cras vel augue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer dapibus purus vel est. Vivamus auctor dapibus pede. Etiam ac ligula quis neque placerat tincidunt. In hac habitasse platea dictumst. Ut elementum mi ut orci. Proin lectus augue, malesuada in, viverra vitae, pretium ultricies, mauris. Etiam libero. Donec magna risus, vehicula at, lacinia id, blandit ut, ligula. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Mauris nec ligula nec nunc lobortis lacinia. Curabitur enim massa, lobortis eget, placerat tincidunt, mollis id, sapien. Quisque adipiscing. Pellentesque semper, orci quis pellentesque vehicula, turpis mi egestas sem, id ullamcorper eros mi sed dui. Etiam augue. Ut in nunc. Nunc et sem gravida nisi placerat placerat. Suspendisse scelerisque justo id dui.
 
  Duis molestie nisi non nisl. Suspendisse eu pede. Cras vulputate volutpat quam. Mauris sit amet metus eget risus lacinia dapibus. In dapibus lacus a nisl consectetuer sollicitudin. Integer nec odio eget sem auctor semper. Nulla id lorem eget nibh posuere dignissim. Duis interdum nunc a libero. Maecenas semper, elit ac posuere aliquet, est orci tincidunt mi, ut bibendum dolor turpis sed risus. Aliquam velit mauris, ornare eget, condimentum ut, convallis quis, augue. Curabitur ligula. Vestibulum justo nisl, pellentesque sit amet, lobortis sed, varius eu, turpis. Phasellus sem leo, sollicitudin quis, sodales ac, semper porttitor, neque.</p>
<p class="Vanlig"> </p>
<p class="Vanlig">Et bilde: </p>
<p align="justify"><img src="bilder/testbilde1.jpg" alt="En flott filmklapper!"></p>
<p class="Vanlig"> </p>
<p class="Vanlig">Enda et bilde: </p>
<p align="justify"><img src="bilder/testbile2.jpg" alt="Og Lucas Film THX lyd er vel best, elns ..."></p>
<p class="Vanlig"> </p>
</div>
<!-- Her slutter innholdet -->

<?php include('footer.php'); ?>

 

Men hvorfor blir siden venstrestilt og ikke sentret i IE?

 

 

PHP gjør at du kan bruke andre koder, php koder. Og du trenger ikke php til ditt bruk her. Ikke som jeg kan se. Så jeg ville gått for vanlig html

Nei, ikke enda, men jeg kommer til å gjøre det :)

 

2. Når det gjelder det at du vil ha description på forskjellige språk. Om siden skal være på mange forskjellige språk så må du ha mange html (eller php) filer hvor i en er det engelsk og i en annen finnsk. Da kan du bare skrive finnsk i den finske filen osv. Men tipper på at du ikke er så grovt flerspråkelig at du skal ha alle lands språk men at du skal ta det på eventuelt engelsk så da er det like greit og bare ha description på engelsk.

 

3. Forskjellen på å ha header og footer bildet og sånn i css filen enn i html koden er at du bare trenger å nevne den engang, istedenfor engang i hver fil.

Ok, takk skal du ha!

Endret av phex
Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Du må være et medlem for å kunne skrive en kommentar

Opprett konto

Det er enkelt å melde seg inn for å starte en ny konto!

Start en konto

Logg inn

Har du allerede en konto? Logg inn her.

Logg inn nå
Gå til emneliste
×
×
  • Opprett ny...