Oppsett til nettside

14. april 2012

Hei!

Jeg holder på å lage en statisk nettside hvor jeg ønsker en header, en venstre- og en høyremeny, en footer, også innhold midt i smørøyet her. moridin tipset meg da om PHP-funksjonen include, så selv om jeg ikke har noe erfaring med PHP, virket det såpass enkelt at jeg ga meg ut på å prøve.

Har nå gjort et forsøk på å lage en index.php, som ser slik ut:
http://pastebin.com/YN1k4xMX

Har jeg misforstått noe grundig, eller kan det gjøres så enkelt? Setter stor pris på innspill!

drittunge

3.238 1.767

14. april 2012

Ja. PHP include legger bare inn markup fra filen du linker til, så det blir på en måte som å lage en snarvei til et program på skrivebordet f.eks.

BbZrP

Trådstarter

42 39

14. april 2012

Sitat av drittunge

Ja. PHP include legger bare inn markup fra filen du linker til, så det blir på en måte som å lage en snarvei til et program på skrivebordet f.eks.

Vis hele sitatet...

Takk for svar

Så da trenger jeg heller ikke doctype eller tags som html, body o.l. i "meny.php"? Kan bare begynne "rett på"?

Og ikke minst!
Hvis man trykker på en link i menyen, hvordan får man den nye siden til å vises i innholdsdiv'en?

Sitat av BbZrP

Hvis man trykker på en link i menyen, hvordan får man den nye siden til å vises i innholdsdiv'en?

Vis hele sitatet...

Hm, jeg tenker kanskje litt feil nå. Er det best å bruke det "skjelettet" jeg linket til, i alle filer? Egentlig tenkte jeg å bare bruke det i index.php, også få de forskjellige innholdsfilene til å laste inn i midten. Men det er kanskje bedre å bruke PHP include i alle innholdsfilene og laste hele siden (alle div'ene) på nytt ved hvert klikk..
Innspill?

norboost

573 226

14. april 2012

Da gjør du noe som dette

Kode

<div id="innhold">
      <?php
      if(!isset($_POST["side"])){
            include("innhold.php");
      }elseif($_POST["side"] = "hjem"){
      include("hjem.php");
      }
      }elseif($_POST["side"] = "om"){
      include("om_meg.php");
      }
      ?>
</div>

Menyelementene dine skal da se noe slik ut:

Kode

http://side.no/index.php?side=hjem
http://side.no/index.php?side=om

etc

Svært lettvindt å bare gjøre dette:

Kode

include($_POST["side"]);

da må du i så fall ta høyde for at brukeren selv kan skrive inn verdier for "side". Dette gjelder både feilhåndtering og sanitering av verdier.

edit: ikke testet kode og småstressa (på vei ut døra) så du får ta det med en klype salt.
http://www.w3schools.com/php/

Sist endret av norboost; 14. april 2012 kl. 19:55.

BbZrP

Trådstarter

42 39

14. april 2012

Nå har jeg googlet meg blå, men finner ikke svaret på dette... Kan man resize bilder hvis nødvendig i CSS? Altså, jeg har et bilde på 300x300 px. Det skal være i en div som har tildelt 20% av sidebredden. Så, dersom denne div'en er mer enn 300px vil jeg vise bildet i full størrelse, men dersom div'en f.eks. bare er 150 px, så vil jeg nedskalere bildet så hele bildet passer inn.

Går det an?

Sist endret av BbZrP; 14. april 2012 kl. 23:34.

norboost

573 226

15. april 2012

går fint det
width: 100%;
max-width: 300px;

BbZrP

Trådstarter

42 39

15. april 2012

Sitat av norboost

går fint det
width: 100%;
max-width: 300px;

Vis hele sitatet...

Fantastisk. Nå går det så det suser her!
Det vil si, har vært mye jeg har slitt med, men etter noen timer på Google, og prøv-feil, så finner man ut av det til slutt!

Fantastisk følelse å få det til.

Men nå er det selvfølgelig en ting jeg ikke får til... I venstremenyen har jeg lister. Altså, linkene i menyen er li-elementer. Kan jeg få det slik at hele raden blir en link? Slik det er nå, må man klikke på selve teksten. Jeg ønsker at det skal fungere som en link, selv om man klikker noen pixler til høyre for selve teksten. Hvordan gjør man dette? Har prøvd å sette inn width: 100% flere steder bl.a., men ikke noe hell med noe.

Ellers er jeg nå snart ferdig med oppsettet og designet, så da er det bare til å legge inn innhold, som bør være ganske rutine... Er med andre ord snart ferdig med å plage dere nå.

Tusen takk for hjelp!

esl

twist?

1.601 121

15. april 2012

Det er mange metoder, en av disse finner du her: http://iloveusability.com/usability-...ble-list-item/

norboost

573 226

15. april 2012

HTML-kode

<html>
<head>
<title>test</title>
<style>
ul#meny {
	width: 200px;
	border: 1px solid #000;
	list-style: none;
	padding: 10px 0 10px 20px;
}
ul#meny li a {
	margin: 0px; display: block; width: 100%;
	color: #111;
}
ul#meny li a:hover {
	color: #ddd;
}
</style>
</head>
<body>
<ul id="meny">
	<li><a href="test.html#1">test1</a></li>
	<li ><a href="test.html#2">test2</a></li>
	<li><a href="test.html#3">test3</a></li>
</ul>
</body>
</html>

BbZrP

Trådstarter

42 39

15. april 2012

Sitat av norboost

HTML-kode

<html>
<head>
<title>test</title>
<style>
ul#meny {
	width: 200px;
	border: 1px solid #000;
	list-style: none;
	padding: 10px 0 10px 20px;
}
ul#meny li a {
	margin: 0px; display: block; width: 100%;
	color: #111;
}
ul#meny li a:hover {
	color: #ddd;
}
</style>
</head>
<body>
<ul id="meny">
	<li><a href="test.html#1">test1</a></li>
	<li ><a href="test.html#2">test2</a></li>
	<li><a href="test.html#3">test3</a></li>
</ul>
</body>
</html>

Vis hele sitatet...

Jeg ser at koden din funker i jsFiddle, men når jeg redigerer koden selv, så skjer det ingenting. Slik ser meny-CSSen min ut:

HTML-kode

#meny {
		width: 20%;
		min-width: 170px;
		background-color: #fff;
		margin-right: 10px;
		border: 1px solid #000;
		border-radius: 10px;
		padding-top: 7px;
		float: left;
		}

#meny h2 {
		border: 1px 0px solid #000;
		background-color: #090;
		color: #fff;
		font-size: .9em;
		padding: 3px 6px;
		text-transform: uppercase;
		}

#meny ul {
		list-style-type: none;
		list-style-position: inside;
		list-style-image:url('rga.jpg');
		padding: 0;
		margin: 0;
		width: 90%;
		font-size: 1em;
		}
		
#meny ul li {
		text-align: left;
		margin: .5em 0;
		display: block;
		width: 100%;
		}
		
img#meny_logo {
		display: block;
		margin-left: auto;
		margin-right: auto;
		width: 90%;
		max-width: 214px;
		}

Antar at det er noe av den andre koden min som "opphever" funksjonen av det jeg hentet fra innlegget ditt, da.. Noen som ser hva?

norboost

573 226

15. april 2012

Mulig til å poste hele koden / url her så man kan ta en titt?

kan ikke se at du har denne noe sted, som sier til a-elementet at det skal være 100% bredt

Kode

ul#meny li a {
	margin: 0px; display: block; width: 100%;
}

Sist endret av norboost; 15. april 2012 kl. 22:10.

BbZrP

Trådstarter

42 39

16. april 2012

Sitat av norboost

Mulig til å poste hele koden / url her så man kan ta en titt?

kan ikke se at du har denne noe sted, som sier til a-elementet at det skal være 100% bredt

Kode

ul#meny li a {
	margin: 0px; display: block; width: 100%;
}

Vis hele sitatet...

Jeg har den bare lokalt på maskinen, har ikke lastet opp til nett enda...

Jeg har ikke spesifisert li-lenker, nei... Men jeg har jo width: 100% på (#meny ul li), trodde det da også gjaldt automatisk for linkene...

Ah, never mind, la til en (#meny ul li a) og satte width der også. Det gjorde visst susen (skjønner likevel ikke hvorfor..)

Supert, takk for hjelpen!!

norboost

573 226

16. april 2012

Årsaken er at a-elementet (linken) legger seg rundt det du har inni taggen, men ikke noe mer. Derfor må man spesifisere at 100% av tilgjengelig bredde skal være klikkbar.

Kan forsåvidt anbefale å installere apache/php/mysql lokalt så du har et skikkelig miljø å bygge nettsider i. Eventuelt kan du installere en ferdigpakke som Xampp der du får alt du trenger i èn installasjonsfil.

Sist endret av norboost; 16. april 2012 kl. 08:15.