Scripts - Tutorials - Forum - Downloads - Showcase - Contact

Artikels

VPN vergelijken

Algemeen

Beginpagina

FAQ

Grafische worm (243)

Links

Nieuwsartikels

Nieuwsarchief

Boeken programmeren

Overzicht

Samenwerken

Webhosting

Zoek op Sitemasters

Leden

Registreren

Ledenlijst

Ons team

Links

webhostingtop10.be

Sociale media

Follow @sitemasters

Sitemasters

Adverteren op Sitemasters?

Contacteer ons

RSS

Link naar ons

Donaties

Poll

Je moet ingelogd zijn om te stemmen.

Statistieken

Linkpartners

Forum

Categorieën > HTML & CSS

Automatisch verlengen pagina (Opgelost)

nick5m - 14/08/2009 00:31

Nieuw lid

Heb net ene nieuwe site gemaakt (photoshop gemaakt daarna opgeslagen zodat het css is geworden). Ik wil graag dat er naarmate de hoeveelheid tekst komt de pagina automatisch word verlengt . Wie kan helpen?

javascript code - Bekijk de code zonder highlighting - Klap code in

                <title>psd</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<!-- ImageReady Styles (psd.psd) -->
<style type="text/css">
<!--

#Table_01 {
	position:absolute;
	left:0px;
	top:0px;
	width:1024px;
	height:779px;
}

#index-01_ {
	position:absolute;
	left:0px;
	top:0px;
	width:1024px;
	height:107px;
}

#index-02_ {
	position:absolute;
	left:0px;
	top:107px;
	width:181px;
	height:28px;
}

#index-03_ {
	position:absolute;
	left:181px;
	top:107px;
	width:38px;
	height:11px;
}

#index-04_ {
	position:absolute;
	left:219px;
	top:107px;
	width:18px;
	height:28px;
}

#index-05_ {
	position:absolute;
	left:237px;
	top:107px;
	width:54px;
	height:11px;
}

#index-06_ {
	position:absolute;
	left:291px;
	top:107px;
	width:18px;
	height:28px;
}

#index-07_ {
	position:absolute;
	left:309px;
	top:107px;
	width:172px;
	height:11px;
}

#index-08_ {
	position:absolute;
	left:481px;
	top:107px;
	width:19px;
	height:28px;
}

#index-09_ {
	position:absolute;
	left:500px;
	top:107px;
	width:224px;
	height:15px;
}

#index-10_ {
	position:absolute;
	left:724px;
	top:107px;
	width:11px;
	height:28px;
}

#index-11_ {
	position:absolute;
	left:735px;
	top:107px;
	width:38px;
	height:11px;
}

#index-12_ {
	position:absolute;
	left:773px;
	top:107px;
	width:16px;
	height:28px;
}

#index-13_ {
	position:absolute;
	left:789px;
	top:107px;
	width:43px;
	height:15px;
}

#index-14_ {
	position:absolute;
	left:832px;
	top:107px;
	width:192px;
	height:28px;
}

#index-15_ {
	position:absolute;
	left:181px;
	top:118px;
	width:38px;
	height:17px;
}

#index-16_ {
	position:absolute;
	left:237px;
	top:118px;
	width:54px;
	height:17px;
}

#index-17_ {
	position:absolute;
	left:309px;
	top:118px;
	width:172px;
	height:17px;
}

#index-18_ {
	position:absolute;
	left:735px;
	top:118px;
	width:38px;
	height:17px;
}

#index-19_ {
	position:absolute;
	left:500px;
	top:122px;
	width:224px;
	height:13px;
}

#index-20_ {
	position:absolute;
	left:789px;
	top:122px;
	width:43px;
	height:13px;
}

#index-21_ {
	position:absolute;
	left:0px;
	top:135px;
	width:142px;
	height:472px;
}

#index-22_ {
	position:absolute;
	left:142px;
	top:135px;
	width:748px;
	height:462px;
}

#index-23_ {
	position:absolute;
	left:890px;
	top:135px;
	width:134px;
	height:462px;
}

#index-24_ {
	position:absolute;
	left:142px;
	top:597px;
	width:747px;
	height:10px;
}

#index-25_ {
	position:absolute;
	left:889px;
	top:597px;
	width:135px;
	height:90px;
}

#index-26_ {
	position:absolute;
	left:0px;
	top:607px;
	width:143px;
	height:90px;
}

#index-27_ {
	position:absolute;
	left:143px;
	top:607px;
	width:746px;
	height:121px;
}

#index-28_ {
	position:absolute;
	left:889px;
	top:687px;
	width:135px;
	height:92px;
}

#index-29_ {
	position:absolute;
	left:0px;
	top:697px;
	width:143px;
	height:82px;
}

#index-30_ {
	position:absolute;
	left:143px;
	top:728px;
	width:746px;
	height:51px;
}

-->
</style>
<!-- End ImageReady Styles -->
</head>
<body style="background-color:#FFFFFF;">
<!-- ImageReady Slices (psd.psd) -->
<div id="Table_01">
	<div id="index-01_">
		<img id="index_01" src="images/index_01.gif" width="1024" height="107" alt="" />
	</div>
	<div id="index-02_">
		<img id="index_02" src="images/index_02.gif" width="181" height="28" alt="" />
	</div>
	<div id="index-03_">
		<img id="index_03" src="images/index_03.gif" width="38" height="11" alt="" />
	</div>
	<div id="index-04_">
		<img id="index_04" src="images/index_04.gif" width="18" height="28" alt="" />
	</div>
	<div id="index-05_">
		<img id="index_05" src="images/index_05.gif" width="54" height="11" alt="" />
	</div>
	<div id="index-06_">
		<img id="index_06" src="images/index_06.gif" width="18" height="28" alt="" />
	</div>
	<div id="index-07_">
		<img id="index_07" src="images/index_07.gif" width="172" height="11" alt="" />
	</div>
	<div id="index-08_">
		<img id="index_08" src="images/index_08.gif" width="19" height="28" alt="" />
	</div>
	<div id="index-09_">
		<img id="index_09" src="images/index_09.gif" width="224" height="15" alt="" />
	</div>
	<div id="index-10_">
		<img id="index_10" src="images/index_10.gif" width="11" height="28" alt="" />
	</div>
	<div id="index-11_">
		<img id="index_11" src="images/index_11.gif" width="38" height="11" alt="" />
	</div>
	<div id="index-12_">
		<img id="index_12" src="images/index_12.gif" width="16" height="28" alt="" />
	</div>
	<div id="index-13_">
		<img id="index_13" src="images/index_13.gif" width="43" height="15" alt="" />
	</div>
	<div id="index-14_">
		<img id="index_14" src="images/index_14.gif" width="192" height="28" alt="" />
	</div>
	<div id="index-15_">
		<img id="index_15" src="images/index_15.gif" width="38" height="17" alt="" />
	</div>
	<div id="index-16_">
		<img id="index_16" src="images/index_16.gif" width="54" height="17" alt="" />
	</div>
	<div id="index-17_">
		<img id="index_17" src="images/index_17.gif" width="172" height="17" alt="" />
	</div>
	<div id="index-18_">
		<img id="index_18" src="images/index_18.gif" width="38" height="17" alt="" />
	</div>
	<div id="index-19_">
		<img id="index_19" src="images/index_19.gif" width="224" height="13" alt="" />
	</div>
	<div id="index-20_">
		<img id="index_20" src="images/index_20.gif" width="43" height="13" alt="" />
	</div>
	<div id="index-21_">
		<img id="index_21" src="images/index_21.gif" width="142" height="472" alt="" />
	</div>
	<div id="index-22_">
		<p>&nbsp;</p>
		<p>&nbsp;</p>
		<p>&nbsp;</p>
		<p>&nbsp;</p>
		<p>&nbsp;</p>
		<p>&nbsp;</p>
		<p>&nbsp;</p>
		<p>&nbsp;</p>
		<p>&nbsp;</p>
		<p>&nbsp;</p>
		<p>&nbsp;</p>
		<p>&nbsp;</p>
		<p>&nbsp;</p>
		<p>&nbsp;</p>
		<p>&nbsp;</p>
		<p>&nbsp;</p>
		<p>&nbsp; </p>
	</div>
	<div id="index-23_">
		<img id="index_23" src="images/index_23.gif" width="134" height="462" alt="" />
	</div>
	<div id="index-24_">
		<img id="index_24" src="images/index_24.gif" width="747" height="10" alt="" />
	</div>
	<div id="index-25_">
		<img id="index_25" src="images/index_25.gif" width="135" height="90" alt="" />
	</div>
	<div id="index-26_">
		<img id="index_26" src="images/index_26.gif" width="143" height="90" alt="" />
	</div>
	<div id="index-27_">
		<img id="index_27" src="images/index_27.gif" width="746" height="121" alt="" />
	</div>
	<div id="index-28_">
		<img id="index_28" src="images/index_28.gif" width="135" height="92" alt="" />
	</div>
	<div id="index-29_">
		<img id="index_29" src="images/index_29.gif" width="143" height="82" alt="" />
	</div>
	<div id="index-30_">
		<img id="index_30" src="images/index_30.gif" width="746" height="51" alt="" />
	</div>
</div>
<!-- End ImageReady Slices -->
</body>
</html>

            
<title>psd</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<!-- ImageReady Styles (psd.psd) -->
<style type="text/css">
<!--
 
#Table_01 {
	position:absolute;
	left:0px;
	top:0px;
	width:1024px;
	height:779px;
}
 
#index-01_ {
	position:absolute;
	left:0px;
	top:0px;
	width:1024px;
	height:107px;
}
 
#index-02_ {
	position:absolute;
	left:0px;
	top:107px;
	width:181px;
	height:28px;
}
 
#index-03_ {
	position:absolute;
	left:181px;
	top:107px;
	width:38px;
	height:11px;
}
 
#index-04_ {
	position:absolute;
	left:219px;
	top:107px;
	width:18px;
	height:28px;
}
 
#index-05_ {
	position:absolute;
	left:237px;
	top:107px;
	width:54px;
	height:11px;
}
 
#index-06_ {
	position:absolute;
	left:291px;
	top:107px;
	width:18px;
	height:28px;
}
 
#index-07_ {
	position:absolute;
	left:309px;
	top:107px;
	width:172px;
	height:11px;
}
 
#index-08_ {
	position:absolute;
	left:481px;
	top:107px;
	width:19px;
	height:28px;
}
 
#index-09_ {
	position:absolute;
	left:500px;
	top:107px;
	width:224px;
	height:15px;
}
 
#index-10_ {
	position:absolute;
	left:724px;
	top:107px;
	width:11px;
	height:28px;
}
 
#index-11_ {
	position:absolute;
	left:735px;
	top:107px;
	width:38px;
	height:11px;
}
 
#index-12_ {
	position:absolute;
	left:773px;
	top:107px;
	width:16px;
	height:28px;
}
 
#index-13_ {
	position:absolute;
	left:789px;
	top:107px;
	width:43px;
	height:15px;
}
 
#index-14_ {
	position:absolute;
	left:832px;
	top:107px;
	width:192px;
	height:28px;
}
 
#index-15_ {
	position:absolute;
	left:181px;
	top:118px;
	width:38px;
	height:17px;
}
 
#index-16_ {
	position:absolute;
	left:237px;
	top:118px;
	width:54px;
	height:17px;
}
 
#index-17_ {
	position:absolute;
	left:309px;
	top:118px;
	width:172px;
	height:17px;
}
 
#index-18_ {
	position:absolute;
	left:735px;
	top:118px;
	width:38px;
	height:17px;
}
 
#index-19_ {
	position:absolute;
	left:500px;
	top:122px;
	width:224px;
	height:13px;
}
 
#index-20_ {
	position:absolute;
	left:789px;
	top:122px;
	width:43px;
	height:13px;
}
 
#index-21_ {
	position:absolute;
	left:0px;
	top:135px;
	width:142px;
	height:472px;
}
 
#index-22_ {
	position:absolute;
	left:142px;
	top:135px;
	width:748px;
	height:462px;
}
 
#index-23_ {
	position:absolute;
	left:890px;
	top:135px;
	width:134px;
	height:462px;
}
 
#index-24_ {
	position:absolute;
	left:142px;
	top:597px;
	width:747px;
	height:10px;
}
 
#index-25_ {
	position:absolute;
	left:889px;
	top:597px;
	width:135px;
	height:90px;
}
 
#index-26_ {
	position:absolute;
	left:0px;
	top:607px;
	width:143px;
	height:90px;
}
 
#index-27_ {
	position:absolute;
	left:143px;
	top:607px;
	width:746px;
	height:121px;
}
 
#index-28_ {
	position:absolute;
	left:889px;
	top:687px;
	width:135px;
	height:92px;
}
 
#index-29_ {
	position:absolute;
	left:0px;
	top:697px;
	width:143px;
	height:82px;
}
 
#index-30_ {
	position:absolute;
	left:143px;
	top:728px;
	width:746px;
	height:51px;
}
 
-->
</style>
<!-- End ImageReady Styles -->
</head>
<body style="background-color:#FFFFFF;">
<!-- ImageReady Slices (psd.psd) -->
<div id="Table_01">
	<div id="index-01_">
		<img id="index_01" src="images/index_01.gif" width="1024" height="107" alt="" />
	</div>
	<div id="index-02_">
		<img id="index_02" src="images/index_02.gif" width="181" height="28" alt="" />
	</div>
	<div id="index-03_">
		<img id="index_03" src="images/index_03.gif" width="38" height="11" alt="" />
	</div>
	<div id="index-04_">
		<img id="index_04" src="images/index_04.gif" width="18" height="28" alt="" />
	</div>
	<div id="index-05_">
		<img id="index_05" src="images/index_05.gif" width="54" height="11" alt="" />
	</div>
	<div id="index-06_">
		<img id="index_06" src="images/index_06.gif" width="18" height="28" alt="" />
	</div>
	<div id="index-07_">
		<img id="index_07" src="images/index_07.gif" width="172" height="11" alt="" />
	</div>
	<div id="index-08_">
		<img id="index_08" src="images/index_08.gif" width="19" height="28" alt="" />
	</div>
	<div id="index-09_">
		<img id="index_09" src="images/index_09.gif" width="224" height="15" alt="" />
	</div>
	<div id="index-10_">
		<img id="index_10" src="images/index_10.gif" width="11" height="28" alt="" />
	</div>
	<div id="index-11_">
		<img id="index_11" src="images/index_11.gif" width="38" height="11" alt="" />
	</div>
	<div id="index-12_">
		<img id="index_12" src="images/index_12.gif" width="16" height="28" alt="" />
	</div>
	<div id="index-13_">
		<img id="index_13" src="images/index_13.gif" width="43" height="15" alt="" />
	</div>
	<div id="index-14_">
		<img id="index_14" src="images/index_14.gif" width="192" height="28" alt="" />
	</div>
	<div id="index-15_">
		<img id="index_15" src="images/index_15.gif" width="38" height="17" alt="" />
	</div>
	<div id="index-16_">
		<img id="index_16" src="images/index_16.gif" width="54" height="17" alt="" />
	</div>
	<div id="index-17_">
		<img id="index_17" src="images/index_17.gif" width="172" height="17" alt="" />
	</div>
	<div id="index-18_">
		<img id="index_18" src="images/index_18.gif" width="38" height="17" alt="" />
	</div>
	<div id="index-19_">
		<img id="index_19" src="images/index_19.gif" width="224" height="13" alt="" />
	</div>
	<div id="index-20_">
		<img id="index_20" src="images/index_20.gif" width="43" height="13" alt="" />
	</div>
	<div id="index-21_">
		<img id="index_21" src="images/index_21.gif" width="142" height="472" alt="" />
	</div>
	<div id="index-22_">
		<p>&nbsp;</p>
		<p>&nbsp;</p>
		<p>&nbsp;</p>
		<p>&nbsp;</p>
		<p>&nbsp;</p>
		<p>&nbsp;</p>
		<p>&nbsp;</p>
		<p>&nbsp;</p>
		<p>&nbsp;</p>
		<p>&nbsp;</p>
		<p>&nbsp;</p>
		<p>&nbsp;</p>
		<p>&nbsp;</p>
		<p>&nbsp;</p>
		<p>&nbsp;</p>
		<p>&nbsp;</p>
		<p>&nbsp; </p>
	</div>
	<div id="index-23_">
		<img id="index_23" src="images/index_23.gif" width="134" height="462" alt="" />
	</div>
	<div id="index-24_">
		<img id="index_24" src="images/index_24.gif" width="747" height="10" alt="" />
	</div>
	<div id="index-25_">
		<img id="index_25" src="images/index_25.gif" width="135" height="90" alt="" />
	</div>
	<div id="index-26_">
		<img id="index_26" src="images/index_26.gif" width="143" height="90" alt="" />
	</div>
	<div id="index-27_">
		<img id="index_27" src="images/index_27.gif" width="746" height="121" alt="" />
	</div>
	<div id="index-28_">
		<img id="index_28" src="images/index_28.gif" width="135" height="92" alt="" />
	</div>
	<div id="index-29_">
		<img id="index_29" src="images/index_29.gif" width="143" height="82" alt="" />
	</div>
	<div id="index-30_">
		<img id="index_30" src="images/index_30.gif" width="746" height="51" alt="" />
	</div>
</div>
<!-- End ImageReady Slices -->
</body>
</html>
 

5 antwoorden

Gesponsorde links

MiST - 14/08/2009 11:43
Lid		lange scripts horen op plaatscode (forum regels) Voor de rest vind ik de Photoshop HTML/CSS output erg onhandig voor wat het is. 1) Het is ERG onleesbaar 2) vroeger waren het tables, maar das blijkbaar ook al opgelost 3) Veel te veel images waar soms niet nodig (vertraagt site significant, zeker de eerste load) 4) geen Splitted HTML/CSS (maar das een secondenwerkje eigenlijk) Mijn advies. Firebug installeren in firefox en een beetje herschrijven die handel. Ik bedoel maar. Ik kan zo niet aan die HTML uit, en ik zou vermoeden dat je dat zelf ook niet kan ;)

Martijn - 14/08/2009 11:59 (laatste wijziging 14/08/2009 12:01)
Crew PHP		een desgin tip, maak niet de html zoals ps dat doet. Niet om reclame te maken, maar kijk http://www.martijnvooges.net even, die heeft geen enkele slice Je zou de knoppen apart kunnen slicen, maar 1 totaal achtergrond plaatje is VEEL beter dan veel plaatjes De reden daarvoor is dat browsers maar 2 dingen tegelijk laden van 1 host voor dat ze het volgende gaan downloaden. ------------------------------ Over je vraag, hoe ik het zou oplossen, is het deel drie divs maken, 1 banner met vaste grootte (als relative of float positioneren!) hetzelfde voor de midden div, alleen daar zet je alleen de width vast, ook weer met float neerzetten, en als laats je footer, ook weer vaste groottes met een floatje

nick5m - 14/08/2009 12:40 (laatste wijziging 14/08/2009 12:42)
Nieuw lid		@Devioursoul ziet er idd leuk uit die website, maar heeft verder niks met de verlengde pagina te maken. Maar bedankt voor de tip. Ga de website herschrijven in zo weinig mogelijk slices. Maar als ik 3 div's maak, hoe kan ik dan zorgen dat de middelste banner, ofwel content continu verlengd word met achtergrond images? En hoe kan ik net zoals die website van Martijn de achtergrond stil laten staan? grt

Martijn - 14/08/2009 13:17
Crew PHP		css code - Bekijk de code zonder highlighting - Klap code in background: url('link'); repeat-x fixed; background: url('link'); repeat-x fixed; t voorbeeld was er voor zo min mogelijk slices als ik dit door photoshop zou doen, zou ik zo 17 divs hebben, alleen maar voor de plaatjes. Dat zijn er nu 6, waarvan 5 allemaal een 1px transparant knopje zijn.

nick5m - 14/08/2009 16:13 (laatste wijziging 14/08/2009 16:19)
Nieuw lid		daar heb je wel gelijk in, maar is het zo nog wel mogelijk om een rollover over die button te gooien? en ik zie dat op martijn's site je helemaal niet naar beneden kan scrollen terwijl dat juist op mijn pagina wel het geval moet zijn. Op die manier kan ik ook geen achtergrond gebruiken want dat zou moeten betekenen dat de achtergrond telkens langer moet worden grt

Gesponsorde links

Dit onderwerp is gesloten.

Actiefste leden van de maand

Actieve forumberichten