Archief - HTML: Hoe site coden (table of div)

Bram · 8 mrt 2006

Haw, ik ben bezig met deze site te coden:
http://users.pandora.be/Sveltestsword/bramme/g20_prev.jpg

Maar ik vroeg me het volgende af:
Ik ben hem namelijk momenteel zo aan het slicen dat ik hem kan coden in css met div's enzo, maar ik vroeg me af of er geen efficientere manier was (toch tables ofzow) omdat het een hele hoop werk is om alles in die div's te krijgen...

Een beetje advies alsjeblieft, dank u wel.

TheCrow7 · 8 mrt 2006

Nobody said it was going to be easy.

Bram · 8 mrt 2006

TheCrow7 zei:
Nobody said it was going to be easy.

waarmee ge bedoelt da ik het toch maar in div's moe doen??? soit oke, maar dan nie komen klagen alsek afkom mee stomme vragen achter hulp

Ach vraagje voor de mensen die coden met div's en dergelijke... Hoe zouden jullie zo'n layout als deze doen?
Eerst alle div's goed zetten en dan aan de css beginnen, of div per div de css afwerken (dus bv de container div maken, de css inzetten, dan de header div, css gevolgd door nav div en dan css enzow) ik hoop dat deze vraag wat duidelijk is, zo niet, negeer ze dan maar.

Featherfoot · 8 mrt 2006

SveltestSword zei:
waarmee ge bedoelt da ik het toch maar in div's moe doen??? soit oke, maar dan nie komen klagen alsek afkom mee stomme vragen achter hulp

Ach vraagje voor de mensen die coden met div's en dergelijke... Hoe zouden jullie zo'n layout als deze doen?
Eerst alle div's goed zetten en dan aan de css beginnen, of div per div de css afwerken (dus bv de container div maken, de css inzetten, dan de header div, css gevolgd door nav div en dan css enzow) ik hoop dat deze vraag wat duidelijk is, zo niet, negeer ze dan maar.

Ik maak eerst de algemene divs en nadien pas de css code. Ik zet ook in elke div wa tekst zodat ik weet wat waar moet komen. Werkt goed voor mij.

Bram · 8 mrt 2006

voor degene die het interesseert, hier de general setup van m'n div's

HTML:

<div id="master">
<div id="wrapper">
<div id="left_border"></div>
<div id="container">
				<div id="left_container">
						<div id="header"></div><!-- end header -->
						<div id="nav"></div><!-- end nav -->
						<div id="info_wrapper">
								<div id="announce_wrap">
										<div id="announce_top"></div>
										<div id="announce"></div><!-- end announce -->
								</div><!-- end announce_wrap -->
								<div id="forum_wrap">
										<div id="forum_top"></div>
										<div id="forum"></div><!-- end forum -->
								</div><!-- end forum_wrap -->
						</div><!-- end info_wrapper -->
						<div id="left_content">
								<div id="latest_top"></div>
								<div id="latest"></div><!-- end latest -->
								<div id="top5_top"></div>
								<div id="top5"></div><!-- end top5 -->
								<div id="blog_top"></div>
								<div id="blog"></div>
						</div><!-- end left_content -->
						<div id="right_content">
								<div id="main_top"></div>
								<div id="main"></div><!-- end main, put main bottom.gif here too, let main_bg stretch over right_content -->
						</div><!-- end right_content -->
				</div><!-- end left_container -->
		<div id="right_container"><!-- right bg stretches here -->
				<div id="admin_top"></div>
				<div id="admin"></div><!-- end admin -->
				<div id="welcome_top"></div>
				<div id="welcome"></div><!-- end welcome -->
				<div id="feature_top"></div>
				<div id="feature"></div><!-- end feature -->
				<div id="newsletter_top"></div>
				<div id="newsletter"></div><!-- end newsletter -->
				<div id="affiliates_top"></div>
				<div id="affiliates"></div><!-- end affiliates -->
		</div><!-- end right_container -->
</div><!-- end container -->
<div id="right_border"></div>
</div><!-- end wrapper -->
<div id="clear"></div><!-- end clear -->
</div><!-- end master -->

Iemand iets op aan te merken?

denk · 8 mrt 2006

in uw eerste post zei je dat je hem aan het slice' bent zodat je hem in divs krijgt, je hebt de layout dus in photoshop gemaakt?
Zoja: slice die met imageready en save html en images zodat hij css genereert

(File - Output Settings (denk ik) moet je HTML en Slices kiezen en css aan duiden en dan opslaan natuurlijk

)
Zonee: geen idee, code ziet er goed uit

orez · 8 mrt 2006

uhm denk... neen... uw manier is net de volledig af te raden manier. Slicen allemaal goed en wel but... NEVER USE imageready/photoshop gegenereerde code

en @sveltestsword...

WOW AT DIVS ! veel te veel imo ...

tikketim · 8 mrt 2006

hoe ik het doe : ik slice mijn layout in photoshop
daarna zet ik alle inhoud in basis html dus <h1> en <strong> tags etc ..
volgende stap die ik neem is de containers , de div's dus , ik positioneer alle inhoud en ga dan pas aan de rest van de css beginnen ...

edit ik zie dus dat jij geen gewone html tags gebruikt en alleen maar divs , dat is dan weer ook niet goed he , probeer zo min mogelijk divs te gebruiken , je kan je css ook laten verwijzen naar gewone html tags door een class of id

Zero Grav · 8 mrt 2006

Zegt de naam Kwaku u iets?

Rvl · 8 mrt 2006

SveltestSword zei:
waarmee ge bedoelt da ik het toch maar in div's moe doen??? soit oke, maar dan nie komen klagen alsek afkom mee stomme vragen achter hulp

Ach vraagje voor de mensen die coden met div's en dergelijke... Hoe zouden jullie zo'n layout als deze doen?
Eerst alle div's goed zetten en dan aan de css beginnen, of div per div de css afwerken (dus bv de container div maken, de css inzetten, dan de header div, css gevolgd door nav div en dan css enzow) ik hoop dat deze vraag wat duidelijk is, zo niet, negeer ze dan maar.

Of we zouden zelf moeite kunnen doen om even iets bij te leren

Quilombo · 9 mrt 2006

ziet er wel ambitieus uit

imo kunt ge best eerst css leren zonder photoshop, gewoon simpel design met drie divs, banner, menu en main, dat alles in ne wrapper/container

en zoals orez als zei ge hebt veeeeeeeeeeeel te veel divs nu

edit: en zoiezo iets in uw divs steken, al is het maar   anders komen der problemen van

deadlock · 9 mrt 2006

SveltestSword zei:

voor degene die het interesseert, hier de general setup van m'n div's

HTML:

<div id="master">
<div id="wrapper">
<div id="left_border"></div>
<div id="container">
				<div id="left_container">
						<div id="header"></div><!-- end header -->
						<div id="nav"></div><!-- end nav -->
						<div id="info_wrapper">
								<div id="announce_wrap">
										<div id="announce_top"></div>
										<div id="announce"></div><!-- end announce -->
								</div><!-- end announce_wrap -->
								<div id="forum_wrap">
										<div id="forum_top"></div>
										<div id="forum"></div><!-- end forum -->
								</div><!-- end forum_wrap -->
						</div><!-- end info_wrapper -->
						<div id="left_content">
								<div id="latest_top"></div>
								<div id="latest"></div><!-- end latest -->
								<div id="top5_top"></div>
								<div id="top5"></div><!-- end top5 -->
								<div id="blog_top"></div>
								<div id="blog"></div>
						</div><!-- end left_content -->
						<div id="right_content">
								<div id="main_top"></div>
								<div id="main"></div><!-- end main, put main bottom.gif here too, let main_bg stretch over right_content -->
						</div><!-- end right_content -->
				</div><!-- end left_container -->
		<div id="right_container"><!-- right bg stretches here -->
				<div id="admin_top"></div>
				<div id="admin"></div><!-- end admin -->
				<div id="welcome_top"></div>
				<div id="welcome"></div><!-- end welcome -->
				<div id="feature_top"></div>
				<div id="feature"></div><!-- end feature -->
				<div id="newsletter_top"></div>
				<div id="newsletter"></div><!-- end newsletter -->
				<div id="affiliates_top"></div>
				<div id="affiliates"></div><!-- end affiliates -->
		</div><!-- end right_container -->
</div><!-- end container -->
<div id="right_border"></div>
</div><!-- end wrapper -->
<div id="clear"></div><!-- end clear -->
</div><!-- end master -->

Iemand iets op aan te merken?

You sir, have Divitis.

Rvl · 9 mrt 2006

Zero Grav zei:
Zegt de naam Kwaku u iets?

Ik heb dat design ook ergens anders gezien maar dan met andere header, de rest is bijna een kopie. :naughty:

Bram · 9 mrt 2006

Rvl zei:
Ik heb dat design ook ergens anders gezien maar dan met andere header, de rest is bijna een kopie. :naughty:

design komt van http://www.deviantart.com/deviation/24097814/ zoals de copyright rechts onderaan zegt van Kwaku, en ik heb de .psd hier liggen samen met zijn toestemming natuurlijk... Chriss (kwaku) is oude vriend van mij en Callum (m'n partner in crime)...

Oh en als ge zegt da ik veel te veel div's heb, hoe los ik da dan het beste op???
Graag wa meer uitleg enzow, kunt ge bv <h1> enzow tags een vaste breedte ofzo opgeven? ik dacht dat die fungeerden net als <span> tags, dus enkel op de tekst en niet de alinea (of hoe ge het ook uitdrukt)

En nee, ik zou nooit gegenereerde code gebruiken van photoshop/imageready en ik ben aan het slicen in imageready... Iets gemakkelijker imo...

Nog eens de oproep om me uitleg te geven hoe ik het aantal div's kan verminderen. Thx in advance

Edit: http://en.wikipedia.org/wiki/Divitis mag ik hieruit afleiden dat ge h1's wel degelijk een breedte kunt meegeven?

tikketim · 9 mrt 2006

ja je kan aan een <h1> tag opmaak aan toevoegen met css , je kan dat met elke basis html tag doen

daarom zeg ik ook om eerst je site in basis html te zetten en daarna pas eventueel divs toevoegen

Quilombo · 9 mrt 2006

lees de css (en xhtml en html) tuto('s) op www.w3schools.com nog maar es door

$mokey · 12 mrt 2006

Imageready fuckt het altijd op bij mij, maak je slices en sla ze op als aparte images (JPEG,GIF) en maak dan een tabel aan plaats ze mooi op z'n plaats. "save for the web" is ook handig.

DevStyle · 12 mrt 2006

Zero Grav zei:
Zegt de naam Kwaku u iets?

I knew I've seen this one somewhere.
Maarja, als het met zijn toestemming is, no problem.

Zero Grav · 12 mrt 2006

I knew I had*

.. Carry on

LunchBox · 13 mrt 2006

Zo goedgelovig allemaal, en dat terwijl hij die toestemming niet heeft laten zien. Zelfs als iemand erachter vraagt is zoiets maar snel een documentje maken met zijn emailadres in de header.. jaja het internet, je overtuigt toch zo snel iemand. (ik beticht niemand hoor, tis maar'n bemerking die ik mezelf maak na de reacties)

Archief - HTML: Hoe site coden (table of div)

Bram

Legacy Member

TheCrow7

Legacy Member

Bram

Legacy Member

Featherfoot

Legacy Member

Bram

Legacy Member

denk

Legacy Member

orez

Legacy Member

tikketim

Legacy Member

Zero Grav

Legacy Member

Rvl

Legacy Member

Quilombo

Legacy Member

deadlock

Legacy Member

Rvl

Legacy Member

Bram

Legacy Member

tikketim

Legacy Member

Quilombo

Legacy Member

$mokey

Legacy Member

DevStyle

Legacy Member

Zero Grav

Legacy Member

LunchBox

Legacy Member