Absolute div's centreren op pagina

Status
Niet open voor verdere reacties.
Elkana

Elkana

Gebruiker
Lid geworden
12 sep 2008
Berichten
170
Goedendag vriendelijk helpende vrienden :) ;)

Het is voor mij weer eens tijd om aan het stoeien te gaan met een website-ontwerp.

De basis is een afbeelding en daar overheen andere mouse-over afbeeldingen. Nu heb ik het voor elkaar om alles mooi te plaatsen op de juiste plek en de juiste mouse-over.
Maar het mooiste zou zijn als de tak met de pagina mee centreerde. Maar door de absolute AP-divs is dit (voor zover ik heb geprobeerd) niet mogelijk. Weet iemand hoe ik dit het beste kan doen?
De site (pagina) moet dus eigenlijk meeschalen met de browser maar de div's moeten wel op de juiste plek op de tak blijven staan... http://www.misterfoxy.nl/ is een voorbeeld van wat ik bedoel met meeschalen.

De link waarom het gaat is http://www.bettuelle.nl/test/
 
Hoi vriendelijk vragende vriendin, ;)

(Ik zie de pagina voor m'n neus veranderen!)

Antwoord 1
Dit kan je doen door de <body> op de breedte van de tabel te zetten, plus een margin van 0 boven en onder, een margin auto voor links en rechts, en een relatieve positie:
Code: 
body {
    margin: 0 auto;
    position: relative;
    width: 900px;
}
Zo staat de pagina altijd gecentreerd.
De relatieve positie van de <body> zorgt ervoor dat de "absolute" posities van de link-div's relatief (!) komen te staan t.o.v. de body, en dus op hun plaats blijven bij een ander window-formaat of andere resolutie.

(22:52 Ah, de pagina is alweer anders)

Antwoord 2
Maar het mooiste is:
  • Alle javascript voor preloaden en image-swappen vergeten; scheelt een bonk html-vervuilende code.
  • In plaats van 1 background-image + 1 tak-img + 11 normale + 11 hover-images = 24 images ... volstaan met 1 (één!) gecombineerd image, dat veel sneller gedownload is.
  • Helemaal geen absolute posities gebruiken.
  • Helemaal geen tabel voor de layout gebruiken.
  • Alles prettig regelen met css. :)

Met vriendelijke groet,
CSShunter
__________
PS: Je background-pakpapiertje is nu 1024*768px. Maar als je de site goed op een resolutie van 1024*768px wilt tonen, moet de breedte wat minder zijn, max. 990px. Dan is ernaast nog ruimte voor een de rechter-scrollbar. - Anders komt er onderin zo'n onhandige L/R-scrollbar.
 
Laatst bewerkt:
Hallo csshunter!
Bedankt voor je snelle en duidelijke reactie. Ben er inderdaad na het plaatsen nog mee bezig geweest.
Antwoord 1 heb ik inmiddels verwerkt. Dat werkt super! Nu blijft alles toch op de plek staat terwijl de pagina meeschaalt met de browser :)
Ook het kartonnetje op de achtergrond heb ik inmiddels kleiner gemaakt.

Maar antwoord 2... Kun je me daarmee op weg helpen? Want wat ik tot nu toe heb, is gemaakt met Dreamweaver en daar hoefde ik dus zelf niet voor te denken. Ik snap namelijk wel het een en ander aan css en html maar zelf bedenken hoe ik het moet doen... Dat lukt me nog niet!
 
Hoi Elkana,
Ja, voor Oplossing 2 moet je denken, en vooral wat cijferen met de pixeltjes. ;)

Eerst nog even de diagnose
In totaal werden 24 images gebruikt. Samen: 2,9MB! Logisch dat het even duurt (ook met een snelle verbinding), voordat de pagina op scherm staat: dat moet de arme browser van de bezoeker eerst allemaal downloaden.

Daar gaat ie!

Afbeelding normale toestand
Alle afbeeldingen van de normale toestanden van de links komen samen met de tak en het kartonnetje in één afbeelding te staan.
  • De images van de links waren ongeveer 2x zo groot als op scherm (betekent: ong. 4 keer zoveel oppervlak en bestandsgrootte!). Door ze in de ene combi-afbeelding te monteren worden ze meteen op ware grootte teruggebracht.
  • Als je alles ook op een schermresolutie van 1024*768px in één oogopslag zichtbaar wilt hebben, moet ook de hoogte beperkt worden (de kop-strook, het browser-menu, eventuele toolbars en de statusbalk nemen ook hoogte in: die moeten er nog van af). Zo kom je uit op ca. 600px hoog die je overhoudt.
  • De originele png's zijn opgeslagen met transparantie en in 16 miljoen kleuren. De transparantie zit in een zg. "alpha-kanaal" dat extra bestandsgrootte oplevert. Door opslaan zonder transparantie, met de witte achtergrond en al, ben je dat alpha-kanaal kwijt. En met 256 kleuren ipv 16M kom je ook een heel eind: scheelt nauwelijks in kwaliteit, maar bezuinigt fors op de bestandsgrootte.
Een beginnetje:
  • Resultaat met 2 links (ingehangen dingen in de tak): bettuelle-bg-start.png van 225kB.
  • Oude png's: samen 1246kB ( karton-bg: 942kB; takkaal.png: 158kB; lamp_1.png: 53kB; hart_1.png: 93kB).
  • Winst tot dusverre: ruim 1MB. :)

Wordt vervolgd!
CSShunter
 
Laatst bewerkt:
Hover-afbeeldingen: alles in een combi!
Nu kan je de hover-afbeeldingen allemaal apart hebben, maar je kunt ze ook combineren in een zg. "css-sprite". Dat is een soort legpuzzel-afbeelding, waarvan d.m.v. css telkens maar één stukje gebruikt wordt. Het prettige is dat niet alleen alle hover-afbeeldingen gecombineerd kunnen worden, maar deze ook samen met het normale toestand-image in één afbeelding kunnen komen.
Voor dit voorbeeld heb ik de twee hover-images onderaan gezet, ze kunnen als het beter uitkomt ook aan de rechterkant gezet worden:

bettuelle-sprite-klein.png

Een beginnetje:
  • Resultaat met 2 hover-links erbij: bettuelle-sprite.png van 252kB.
  • Oude png's: was 1246kB + hovers (lamp_2.png: 62kB; hart_2.png: 108kB) = 1416kB.
  • Winst tot dusverre: 1164kB.

Wordt vervolgd!
CSShunter
 
Zo, heb eens even gegoogled op CSS-sprite maar da's ff studeren! Maar echt super interessant. Wat fijn dat je zo goed alles uitlegt en wilt helpen! Ik kijk met heel veel spanning uit naar je vervolg :D En ondertussen zal ik ook eens even wat gaan lezen/leren/proberen ;)
 
Nu de afbeelding in principe klaar is, kunnen we overstappen naar het maken van de code met html en css.

De achtergrond
Het gedeelte "gewone toestand" uit de combi-afbeelding kan de achtergrond van de pagina (<body>) worden. Daartoe moet de <html> ook een background (hier: wit) krijgen, en tegelijkertijd kan de pagina horizontaal gecentreerd worden. De essentiële css:
Code: 
html {
	background: white;
	}
body {
	width: 990px;
	height: 600px;
	margin-left: auto;
	margin-right: auto;
	background: url(images/bettuelle-sprite.png);
	}
En in de html staat er nog niets in de body:
HTML: 
...
</head>
<body>

</body>
</html>
Omdat het kijkvenstertje van de <body> maar 990*600px is, blijft het onderste deel van het combi-image keurig buiten beeld.



Wordt vervolgd!
CSShunter
 
De link-oppervlakjes plaatsen
Nu moeten de links er in gezet worden: in de gewone toestand als transparante rechthoekjes.
Dat kan het beste door ze op te nemen in een ongeordende lijst <ul>. Ik heb de links een paar namen gegeven:
HTML: 
<body>

<ul id="menu">
	<li><a id="plannen" href="plannen.htm"></a></li>
	<li><a id="bruiloft" href="bruiloft.htm"></a></li>
	<!-- enz. -->
</ul>

</body>
</html>
Op deze manier hebben de links nog geen inhoud, dus ook geen oppervlak! Maar daar gaat verandering in komen.
Elke link krijgt een eigen id, zodat de positie en het oppervlak van elke link anders kan worden.
Maar eerst een paar maatregelen om de standaard stipjes van list-items weg te werken, en om de positie van de links onafhankelijk van elkaar te maken.
Code: 
body {
    ...
    position: relative;
    }
#menu {
	margin: 0;
	padding: 0;
	list-style: none;
	}
#menu a {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	}
De links hebben een absolutie positie, in principe allemaal met de linkerbovenhoek gelijk aan de linkerbovenhoek van de grote achtergrondfiguur in de body.
Met {display:block;} is het hele oppervlak van de links be-hoverbaar.
Nu kunnen de links afzonderlijk hun afstand tot de linkerbovenhoek krijgen, en hun eigen oppervlak:
Code: 
#plannen  { width: 185px; height: 207px; margin: 57px 0 0 44px; }
#bruiloft { width: 125px; height: 151px; margin: 272px 0 0 129px; }
Het makkelijkst is dit te doen door een laagje met de link-blokjes in de constructie-werktekening van de images te maken.
Via even opmeten in de werktekening heb je dan zo de vier afstanden te pakken:

bettuelle-werktekening.png


  • Test (met tijdelijk gestippelde randjes): bettuelle-2.htm
  • Aan het handje bij hoveren zie je dat de twee echte links zijn, de hover-images moeten nog komen.

Wordt vervolgd!
CSShunter
 
De hover-images op hun plek
Daarvoor geven we eerst opdracht om als achtergrond bij elke gehoverde link te gebruiken ... weer ons combi-image.
Code: 
#menu a:hover,
#menu a:focus {
	background: url(images/bettuelle-sprite.png);
	}
De :focus staat er bij om ook de verandering te laten zien aan mensen die met de Tab-toets van link naar link hoppen (ipv met een muis); want de :hover eigenschap werkt alleen maar als je een muis gebruikt.

Vervolgens kunnen de individuele links het goede gedeelte van de combi voorgeschoteld krijgen: door de background-positie voor allemaal 610px omhoog te trekken (waardoor alleen de onderste rij figuren te zien is), en dan per stuk zoveel naar links te verplaatsen als nodig is. Voor de tweede link dus de breedte van het vakje van de eerste link, enz.:
Code: 
a#plannen:hover,  a#plannen:focus  { background-position: 0 -610px; }
a#bruiloft:hover, a#bruiloft:focus { background-position: -185px -610px; }

  • Test: bettuelle-3.htm
  • (Ik heb de hover-images een klein gekleurd randje gegeven, zodat je als de hover-beweging stilstaat toch makkelijk kunt zien waar je op de tak zit.)
  • Bijna klaar!

Wordt vervolgd!
CSShunter
 
Laatst bewerkt:
De finishing touch
Als je de laatste test-3 in een pure tekst-browser bekijkt, of laat voorlezen door een voorleesbrowser, blijkt er niets van de inhoud van de links. Want die zijn alleen maar visueel op scherm te zien: in de html hebben de links geen inhoud. En ook de google-robot kan geen plaatjes zien, en kan geen trefwoord lezen dat in de link staat.
Daarom wordt in elke link een <span> gezet met een titel voor de link:
HTML: 
<ul id="menu">
	<li><a id="plannen" href="plannen.htm"><span>Plannen !</span></a></li>
	<li><a id="bruiloft" href="bruiloft.htm"><span>Onze bruiloft</span></a></li>
	<!-- enz. -->
</ul>
Met css kan je die <span>'s buiten bereik van het scherm zetten (9999px links van de linkerzijkant), terwijl tekstbrowsers, voorleesbrowsers en Google ze toch te pakken krijgen:
Code: 
#menu a span {
	position: absolute;
	margin-left: -9999px;
	}

Maar er is meer mogelijk!
Je kunt ook bv. de inhoud van de span's wel laten zien als er gehoverd wordt: dan zijn het in feite tooltips geworden (alleen zijn ze niet automatisch na 3 tellen weg zoals gewone tooltips, maar blijven ze er staan zolang de hover er is).
De span's kunnen hun eigen styles krijgen aan lettergrootte, kleur, enz. Daarbij kan je per link ook nog de positie van de woorden naar smaak instellen, bv.:
Code: 
#menu a span {
	position: absolute;
	margin-left: -9999px;
	font-size: 1.1em;
	font-weight: bold;
	color: white;
	}
a#plannen:hover span,  a#plannen:focus span  { margin: 60px 0 0 30px; }
a#bruiloft:hover span, a#bruiloft:focus span { margin: 95px 0 0 -20px; width: 3em; }
De tweede heeft een vrij smalle breedte gekregen om de woorden onder elkaar te krijgen zonder dat er een <br /> nodig is.



=======
Conclusie
Het doel is bereikt! :)
  • Alle javascript is verdwenen.
  • De tabel-opmaak is verdwenen.
  • Alle images gereduceerd tot 1, met megawinst qua bestandsgrootte/paginasnelheid.
  • Dankzij de css-sprite is preloaden niet meer nodig, de hover-images zijn meteen binnen.
  • Resolutie-onafhankelijk.
  • Cross-browser.
  • Valid xhtml1.0.
  • Valid css2.1.
  • Gebruiksvriendelijk, toegankelijk en Google-vriendelijk.
  • Supersimpele html.

Vergelijk wat het was:
HTML: 
<body onLoad="MM_preloadImages('img/uil_2.png','img/cadeau_2.png','img/hart_2.png','img/hartje_2.png','img/hartslinger_2.png','img/lamp_2.png','img/lampje_2.png','img/vlinder_2.png','img/huisje_2.png','img/vaasje_2.png','img/setje_2.png')">
<table class="c3" width="990" height="743" border="0">
    <tr>
        <td class="c1" width="100"></td>
        <td width="900"><img src="/test/img/takkaal.png" width="763" height="436" alt="takkaal" />
            <div id="apDiv10">
                <a href="#" onMouseOut="MM_swapImgRestore()" 
                    onMouseOver="MM_swapImage('lampje','','img/lampje_2.png',1)">
                    <img src="img/lampje_1.png" name="lampje" width="97" height="107" 
                    border="0" id="lampje" alt="lampje" />
                </a>
            </div>
            <div id="apDiv9">
                <a href="#" onMouseOut="MM_swapImgRestore()" 
                    onMouseOver="MM_swapImage('lamp','','img/lamp_2.png',1)">
                    <img src="img/lamp_1.png" name="lamp" width="138" height="146" 
                    border="0" id="lamp" alt="lamp" />
                </a>
           </div>
           <!--- enz. --->
       </td>
       <td class="c2" width="100"></td>
    </tr>
</table>
</body>
met wat het nu is geworden:
HTML: 
<ul id="menu">
	<li><a id="plannen" href="plannen.htm"><span>Plannen !</span></a></li>
	<li><a id="bruiloft" href="bruiloft.htm"><span>Onze bruiloft</span></a></li>
	<!-- enz. -->
</ul>
Voorjaarsschoonmaak! :d

Met vriendelijke groet,
CSShunter
 
Laatst bewerkt:
Jeetje, CSShunter! Dat ziet er allemaal een stuk mooier uit! Ik zal me er de komende tijd eens verder in verdiepen. Het kan even duren door omstandigheden maar als ik vragen heb kom ik hier weer terug.
Super bedankt voor je uitgebreide en duidelijke uitleg!
 
Hoi CSShunter!

Dit is wat ik er tot nu toe van heb gemaakt: http://www.bettuelle.nl/test2/
Allemachtig wat een werk om dit zo te krijgen zeg! Als ik de afmetingen opnam, klopte daar niks van! Dus elke keer maar veranderen, pagina vernieuwen, veranderen, pagina vernieuwen enz. enz. enz...
Maargoed, het staat er! Nu nog de puntjes op de i!

Oh, nog iets waar ik tegenaan liep. De eerste onderstaande reeks had ik blijkbaar niet goed. Het plaatje stond wel op de goede plek, maar ik merkte bij de tweede reeks dat het allemaal in de min (-) moest staan zodat het elkaar opvolgde. Hoe kan het dat het op beide manieren goed overkwam?

a#lampen:hover, a#lampen:focus { background-position: 0px -469px; }
a#hart:hover, a#hart:focus { background-position: -117px -469px; }
a#uil:hover, a#uil:focus { background-position: 450px -469px; }
a#setje:hover, a#setje:focus { background-position: 641px -469px; }
a#huisje:hover, a#huisje:focus { background-position: 359px -469px; }
a#slinger:hover, a#slinger:focus { background-position: -666px -468px; }

a#lampen:hover, a#lampen:focus { background-position: 0px -469px; }
a#hart:hover, a#hart:focus { background-position: -117px -469px; }
a#setje:hover, a#setje:focus { background-position: -219px -469px; }
a#uil:hover, a#uil:focus { background-position: -412px -469px; }
a#huisje:hover, a#huisje:focus { background-position: -503px -469px; }
a#slinger:hover, a#slinger:focus { background-position: -666px -468px; }
 
De Webdeveloper Toolbar!

Hoi Elkana,
Papparlepee! Dat is een heel gepriegel geweest! :thumb:
Voor de finishing touch het volgende!

Webdeveloper Toolbar
  1. Als je 'm nog niet hebt, moet je even de Webdeveloper Toolbar voor Firefox binnenhalen.
  2. Daarop zit een knopje CSS, zet dat op Edit CSS:
    toolbar-css.png

  3. Als je dat gedaan hebt, komt onderin beeld je stylesheet:
    toolbar-edit-css-mini.png

Nu kan je online iets uitproberen in de css, en je ziet meteen wat er dan verandert.
Bv. de margins van een link-blokje of de background-position van een link-blokje aanpassen.
Je maakt 'm net zolang een px hoger of lager totdat het klopt.
Dat scheelt het telkens moeten coderen/opslaan/bekijken trio voor elke aanpassing: je ziet het meteen voor je of het gelukt is.
Het werkt ook als je over een item heen hovert, dus je kan in een mum van tijd alles op de goede plek gerangeerd hebben.
Ben je klaar, dan kopieer je de stijlregels die je veranderd hebt (het makkelijkst als blokje tegelijk) en plakt die in je stylesheet.
Klaar! :)
  • NB: intussen geen pagina verversen of het Edit tijdelijk uitzetten: dan ben je alles kwijt!

    In bovenstaand screenshotje op ware grootte staat alvast de eerste 1px verbetering. ;)

=======
Plus of min?
Als er bij een background-image niets bij staat, staat dat automatisch op repeat. In de horizontale richting staat er dan naar rechts een oneindig optochtje van hetzelfde plaatje. En naar links ook. Maar omdat het plaatje achtergrond is, en die niet voorbij de grenzen kan komen van het element waar het in zit, zie je niets van die herhalingen.
Wil je de background-positie (van een onderdeel) op de goede plek zetten, dan kan je dat doen door de afbeelding een stukje naar links te trekken: met een negatieve waarde.
Maar omdat ernaast dezelfde afbeelding zit, kan je het ook doen door de vorige een stukje naar rechts te duwen! (dus met een positieve waarde)
Voor een browser maakt dat niets uit: die ziet niet wat de "echte" of de "vorige" is, ze zijn allemaal identiek.
Je kan dus bv. ook een exemplaar overslaan door de background-position een hele breedte van de afbeelding aan extra negatieve waarde te geven: komt allemaal op hetzelfde neer.
Voor naar boven of naar beneden geldt hetzelfde.
Zelf trek ik ze altijd naar links (negatief) en naar boven (ook negatief), dat vind ik het makkelijkste.

Met vriendelijke groet,
CSShunter
 
Kijk eens aan! Het resultaat :D Ben echt zooooo blij! Had het vanmorgen eigenlijk al opgegeven. Toen zei m'n man dat 'ie dat heel erg dom en zwak zou vinden, zo kent 'ie me niet ;) :P Toen toch maar doorgezet en door jou heb ik echt de puntjes op de i kunnen zetten. Nu eens even verder kijken wat ik ermee ga doen. Ik bedoel, dit zal de landingspage zijn op het domein en dan zal ik met WordPress verder gaan werken en dit dan weer laten herhalen bovenaan de pagina als menu denk ik... Nog even over denken :)

Maar echt super 100maal dank!

Oh, nog een vraagje: Kan ik ook nog op de rest van de pagina een achtergrond-image doen?
 
Laatst bewerkt:
Jazeker, dat kan prima. :)

Daarvoor is nodig dat het background-img met de sprite uit de body gehaald wordt, en in het #menu geplaatst wordt.
  • Met medeneming van zijn hoogte en breedte, en z'n {position: relative;}.
  • Het hele prettige is dat het menu nu op elke gewenste positie kan komen zonder dat er iets aan de hover-posities gedaan hoeft te worden: die verhuizen automatisch mee.

Zo is de weg vrijgemaakt om aan de <body> (of aan de <body> en óók aan de <html>) een eigen background-image te koppelen.

Verder dacht ik nog aan de volgende suggesties voor de posities van de (teksten bij de) hovers:
Code: 
#lampen { width: 118px; height: 134px; margin: 39px 0 0 43px; }
a#setje:hover span, a#setje:focus span { margin: 35px 0 0 30px; width: auto; background: white; }
a#slinger:hover span, a#slinger:focus span { margin: 95px 0 0 55px; width: 3em; }
a#cadeautje:hover span, a#cadeautje:focus span { margin: 100px 0 0 20px; width: 3em; }
a#hartje:hover span, a#hartje:focus span { margin: 95px 0 0 40px; width: 3em; }
a#lampje:hover span, a#lampje:focus span { margin: -20px 0 0 0px; width: 3em; }
Bij het #setje een witte achtergrond achter de tekst gezet, zodat deze loskomt van het plaatje en beter leesbaar is.

En wat ook kan:
  • De sprite (nu een semi-transparante png van 16 miljoen kleuren en 406kB) terugbrengen tot een transparante gif van 256 kleuren.
  • Het kwaliteitsverlies is (met mijn ogen) minimaal, en valt niet op als je ze niet naast elkaar ziet.
  • De rechterstrook van 85px breed en de onderstrook van 75px worden niet benut en kunnen afgesneden worden: dat scheelt 143.455 pixels die niet gedownload hoeven te worden.
  • Met afsnijden en gif samen wordt een winst van zo'n 75% van de image-bestandsgrootte geboekt (= snellere pagina): de sprite3.gif is maar 105kB.

Bovenstaande omgezet in een testpagina: bettuelle-5.htm

Met vriendelijke groet,
CSShunter
 
Ah, wauw! Je hebt al meer voor elkaar gemaakt dan dat ik in gedachten had :)
Dan kan ik de afbeelding ook vast wel verkleinen tot een 'navigatie-plaatje'? Dat ik de grote afbeelding als landingspage gebruik en daarna terug laat komen in het klein?

Ben bezig met het opzetten van een layout die ik dan om moet toveren tot website. Dat is oooook nog weer een heel gevogel want ben meer een ontwerper dan een website-bouwer. Deze layout moet dan samengevoegd worden met WordPress. Maaar, eerst de layout verder afmaken in Photoshop.

opzetvb.jpg
 
Hoi Elkana,
Whoops! Jij bent nogal wat van plan! Leuk hoor! :)

Ja: het menu kan verkleind terugkomen.
  • Bij verkleining veranderen wel de maten en posities van de hover-links.
  • Voor elke link zal dan het circus van de bepaling van width / height / margins / background-position opnieuw gedraaid moeten worden.
  • Maar nu ken je de truc! ;)

Alleen zie ik wel wat beren op de weg: ik weet niet of dit ontwerp zich ervoor leent om (makkelijk) tot eigengemaakt Wordpress-sjabloon omgebouwd te worden.
  • Wordpress is een CMS, en heeft een bepaalde html-structuur en naamgeving voor de gebruikte elementen. Daar moet jouw sjabloon op gaan passen.
  • Omgekeerd zou in principe ook kunnen (Wordpress passend maken voor jouw ontwerp en jouw elementen), maar dat vereist diep ingrijpen in het Wordpress-systeem. Dat is een grote beer.
  • Je ontwerp passend maken als Wordpress-template (met de Wordpress-structuur als uitgangspunt): dat is een kleinere beer, maar zou ook redelijk gecompliceerd kunnen uitpakken. Vraag is of in het keurslijf van Wordpress alles kan wat je zou willen.
  • Tweede kleinere beer: dan zullen toch de nodige ingrepen moeten plaatsvinden in de (met php gecodeerde) bestanddelen van het CMS om alles op zijn plaats te laten vallen. Heb je al wel eens eigenhandig een Wordpress-sjabloon gemaakt? (zie anders bv. tutorial wordpress-template-maken en andere Google-resultaten)

Als je zou overstappen op bv. Joomla als CMS, zou daar hetzelfde spelen (how-to-build-a-joomla-template-start-to-finish).

Wat wel betrekkelijk eenvoudig kan, is er zelf een rechttoe-rechtaan php-site van maken (tutorial).
Dan is het in wezen een statische website, en mis je het dynamische CMS-gedeelte waarmee de site makkelijk beheerd en gewijzigd / aangevuld kan worden zonder te hoeven coderen.

Eigenlijk lijkt me nu de eerste vraag om later niet nat te gaan: wat moet de site allemaal kunnen? *)

Met vriendelijke groet,
CSShunter
___________
*) En de tweede vraag: hoe moet dat gerealiseerd worden met de middelen en kennis die je hebt?
Want "Alles kan", als je maar genoeg studietijd incalculeert. ;)
En de derde vraag: misschien de bouw uitbesteden ($$$ ! :rolleyes:) ?
 
Laatst bewerkt:
Okee, dan ga ik vanavond (of wanneer ik tijd heb) beginnen met een nieuwe afbeelding en deze dan (op een andere pagina?) met de juiste posities opslaan. Kan ik 'm later integreren in de -nog te bouwen- PHP pagina's :)

Het is de bedoeling dat het een portfolio site wordt. Eigenlijk niet veel bijzonders qua functies. Een klein stukje over wie de maker is en dan een slider met foto's. Dat is eigenlijk de basis. De reden dat ik op WordPress kwam was omdat ik al heel veel hiermee werk en dit makkelijk te leren is om er zelf wat op te zetten. Maar dat is denk ik nu toch niet zo'n hele hoge prio. Het is een portfolio, daar veranderd in princiepe niet zo heel veel aan. Af en toe een extra fotootje in de slider.

De pagina omzetten naar een eenvoudige php pagina, daar begint het voor mij. Ik kan mooi dingen in Photoshop zetten, maar om het dan om te zetten naar een echt werkende layout... Het mooist zou het volgens mij zijn als het in CSS geschreven is en dat ik dan met php een aantal (2 ofzo) pagina's kan includen. Ook een LightBox functie zou ik erg prettig vinden. Dat heb ik al eens gedaan dus dat is het probleem niet.

Een betaalde uitbesteding zal er deze keer niet in zitten. Het is namelijk voor een vriendin die ik sponsor door gratis een website voor haar te bouwen.. Daarom dat ik hier ook zoveel te vinden ben ;)
 
Dat valt dan mee! :D
Het mooist zou het volgens mij zijn ...
Klik om te vergroten...
Mooi, dan kan je gewoon zonder problemen op de ingeslagen weg voortgaan en er eerst goed werkende css+html pagina's van maken. :thumb:
Het php-includen komt dan op het eind.

Bij vragen zien we je wel weer verschijnen. :)
Met vriendelijke groet,
CSShunter.
 
Leuk dat ik hier m'n voortgang kan plaatsen! :D

Bij deze, de volgende stap. De pagina tot nu to TADAAAA!
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan