[html] Lay-out probleempjes!

Status
Niet open voor verdere reacties.
Systemizer X100

Systemizer X100

Terugkerende gebruiker
Lid geworden
24 mei 2003
Berichten
1.636
Heh, ben ik weer. Ik was even aan het experimenteren met mijn layout, waarna ik twee afschrikwekkende dingen ontdekte. Kijk maar naar de layout :(.

Het bovenste plaatje is van het stuk waarbij ik een hele lange (onzinnige) zin heb getypt. Dat is natuurlijk niet zo mooi. Nu heb ik de layout in Photoshop gemaakt met slices enzo, oftewel de plaatjes bevinden zich in tabellen. Is het mogelijk om de content-tabel een vaste breedte te geven?

Bij het onderste plaatje heb ik heel wat <br> tags in het HTML document gezet om zo te testen of het plaatje nog heel blijft. Niet dus. Hoe kan ik dit probleempje oplossen? Of is het gewoon een kwestie van de hoeken apart slicen?
 

Bijlagen

  • vervormd.png
    vervormd.png
    6,5 KB · Weergaven: 51
Normale tekst zal gewoon naar de volgende regel gaan.

Slicen moet je leren, en aanpassen aan de layout.

In dit geval zou ik eerst drie stukken maken.

Footer: onderste met stukje blauw en zorgen dat de bocht er mooi bijkomt
vulling: net boven de footer ca 5 mm, en dit gebruik je dan als achtergond.
bovenste rest.

De bovenste rest slice je op opnieuw.

Of
je werkt in het content deel met een div en overflow.
Dan kun je je huidige indeling houden.
Overflow code in tabel:

in the head:
<style type="text/css">
<!--
.scroll {
background-color: #ff8040;
overflow: auto;
height:330px;
font-family:verdana;
font-size:12px;
color:#000000;

padding-top:2px;
padding-left:10px;
padding-right:10px;
padding-bottom:10px;
border: 1px outset #ffffff;
}
-->
</style>

In the body:
<td valign="top"><div class="scroll">content lange text<br></div></td>



De height:330px; moet gelijk zijn van de height van de td.
Pas de andere opties in de style aan.

:cool:
 
Hmm, okee, ik heb dus nu een horizontale scrollbar (heb de lengte goed kunnen krijgen, ik heb op een andere manier gesliced), maar kan ik misschien gebruik maken van 'wrapping'?
 
Hmm, interessant, maar kun je het niet zo slicen dat het menu niet wordt uitgerekt, maar toch op zijn plek blijft als de content box helemaal wordt uitgerekt?

Shoestring?
 
Natuurlijk, maar het was een vlugge slicing.
Dit om te laten zien dat het kan voor wat betreft de hoogte en ook een volle breedte van het scherm.

En wil je het menu ook van een onderrand voorzien, dan zul je dit in je origineel even moeten wijzigen.
De onderrand van het menu is nu gekoppeld met de onderrand van de content.
Vandaar.


Het verdient aanbeveling om niet alles in een keer te slicen en te voorkomen dat er met rowspan en colspan gewerkt moet worden.
Dus één stuk, in dit geval het menu opnieuw slicen.
Nu heb je een volle tabel voor het menu.
Er zijn sclicers waarbij je dit deel direct wederom kunt slicen.

Shoestring is een slicer, maar simpel.
Er zijn wat meer geavanceerde slicers.
Even googlen.

http://www.ziplink.net/~shoestring/dicer01.htm
http://www.thecastle.com/
http://www.lad.co.za/imaker.html

:cool:
 
Laatst bewerkt:
:p

Ik denk dat ik iets niet begrijp. Hoe bedoel je dat, dat van het menu opnieuw slicen enzo? Moet ik dan het menu uit de lay-out afbeelding knippen en apart bewerken ofzo?

ehhhhhhhhh
 
Ja.

Kan in sommige slicers direct, dus een stuk wederom verdelen.
Maar in dit geval zul je indien je je menu rondom van randen wenst te voorzien, opnieuw het origineel moeten aanpassen.
Je menu moet dus los komen van de onderrand.

Ivm mouseovers kun je dus ook eerst je tekst in het menu zetten, slicen en dan de mouseover met bv irfanview verkleuren, zodat bij mouseover een ander plaatje komt.
Of met je fotoprog, maar dan wel de originele grid bewaren.
Hierdoor kun je dan vlot de mouseovers slicen.

:cool:
 
Hmmm, ik heb even een plaatje bijgevoegd zoals ik mijn website nu heb (met slices enzo). Hoort dat zo gesliced te zijn?
 

Bijlagen

  • sliced.png
    sliced.png
    47,1 KB · Weergaven: 27
Ja, dat zou kunnen.
Maar dit is wel voor een vaste breedte, en je menu hangt -bij meer tekst in je content- links boven, en bovendien zul je dat handmatig in een tabel moeten zetten omdat anders het verband er uitgaat.

Een an ander bemerk je pas als je veel content toevoegd.
Dus vullen met content en waar nodig het plaatje als background gebruiken.

:cool:
 
hehe sorry hoor maar ik ben nogal nieuw met dat slicen enzo :p. Ik heb dus weer wat geprobeerd, en nu zie ik dus dit. Het menu komt los te staan van het bovenste stuk en er onstaat een open ruimte (zie bijlage). Bedoelde je dat met verhoudingen? Hmm, kan dat gefixt worden met behulp van op een andere manier slicen ofzoiets dergelijks?
 
Klopt.
Je moet er een gewoonte van maken om td tags
zo aan te geven:
<td valign="top">
direct al bij het maken van een tabel.

In mijn editor Arachnophilia heb ik daarvoor een sneltoets: Alt T

:cool:
 
Hmm, ok, de ruimte tussen het logo en het menu is wat kleiner geworden, maar de ruimte is er nog steeds. Ehm, is het misschien makkelijker als ik je de html code stuur?
 
Gedld.
Oei.. wel groot zeg 128 kb.
Zal toch terug moeten naar minderd dan 40 kb, anders duurt inladen met inbelverbinding veel te lang.

Zal vanavond kijken, duik nu mijn werkplaats weer in ;)

:cool:
 
Waarschijnlijk is het zo groot door de plaatjes enzo, op mijn schijf is het html bestand zelf 5kb groot.
Ik moet nog even een goeie compressiemethode vinden, ik heb het wel als .gif ge-exporteerd, maar wel alles op z'n hoogst. Dat ga ik nog veranderen hoor ;)

Veel plezier in je werkplaats :p
 
http://members.lycos.nl/vazed/test/homepagetest.html

banana.gif
 
Ok dit ga ik even helemaal uitvogelen :D heb je nou een tabel in een tabel gedaan?
 
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan