een kolom maken in een <table>, zie bijgevoegde tekening.

[johan79]

hey mensen,

ben nog niet zo lang bezig met een website maken maar ik stuit op een probleem.

in de tekening waar de pijlen staan wil ik in een tabel een kolom van boven naar beneden,maar daarvan moet de 3de kolom net iets hoger en lager zijn dan de tabel zelf.

hoe kan ik dat maken?

alvast bedankt.

mvg,johan

 

[johan79]

weet niemand hier iets op?
is dit dan onmogelijk om te maken?
als dat zo is moet mijn vriendin wat anders gaan verzinnen om als webpagina te hebben.

mvg,
johan

 

[csshunter]

Hoi Johan,

... moet de 3de kolom net iets hoger en lager zijn dan de tabel zelf.

Ja, dat moet best kunnen. Maar niet in de tabel zelf: het zal een <div id="rechterkolom">...</div> moeten worden, die "over de tabel heen" geplakt wordt. Dat kan met css geregeld worden.

Maar hoe dat precies aangepakt moet worden, hangt van de code af die je nu al hebt voor de rest (menu, header, tabel en footer).
Kan je ergens een testpagina met wat er al is online zetten? Graag een linkje!

Met vriendelijke groet,
CSShunter

 

[johan79]

@ csshunter,

hier een link: http://members.tele2.nl/johan-gerrits/

het is nog niet af,maar ben er tussentijds wel mee bezig.
hoop dat je mij hier mee kan helpen.
weet jij toevallig ook hoe ik bij home enz., als ik er met de muis overheen ga,dat dan de achtergrondkleur veranderd??
heb veel kunnen vinden over mouse-over maar niet dat de achtergrondkleur veranderd.

al vast bedankt voor de moeite.

gr. johan

 

[csshunter]

Hoi Johan,
De laatste vraag is de makkelijkste:

... bij home enz., als ik er met de muis overheen ga, dat dan de achtergrondkleur verandert??

Dat gaat in principe vanzelf goed komen op het moment dat je een link op de HOME zet:

<a href="index.html">HOME</a>

Want in de css staat al: a:hover {background-color: #B30700;}. Die a van de a:hover slaat op de <a>'s in de html-code. Oftewel: als je met de muis over een link <a> zweeft ("hovercraft"), verandert de achtergrondkleur van die link in de kleur #B30700 (

). Maar zolang je de link er nog niet hebt staan, is er ook geen <a> waarover je met de muis kunt gaan, en dus ook geen kleur-verandering.

Dan de rechterkolom in de tabel, die een stukje moet overlappen.
Tja, eigenlijk zijn tabellen niet bedoeld voor opmaak (daar is css voor), maar in jouw constructie kan je denk ik het beste een bovenrij aan de tabel toevoegen, met een hoogte van de helft van de balk.

Vervolgens kan je de balk monteren als achtergrondfiguur van een <div>-container, en dan de tabel daar met een margin-top van ook de helft van de balk onder zetten.

Tenslotte kan je alle cellen van de rechterkolom samenvoegen: op de onderste en bovenste cel na.

O ja, ik zou de tabel een vaste breedte geven in plaats van in % van de breedte, want dat geeft allerlei onverwachte en onbedoelde effecten. Met een breedte van ca. 950px past het er mooi op bij een schermbreedte van 1024*768px, die langzamerhand iedereen wel heeft. Op hogere resoluties komt de pagina dan ook op die breedte in het midden te staan.

Dan krijg je zoiets:

• www.developerscorner.nl/csshunter/tests/table-fun.htm

Dit is nog lang niet ideaal (er moet nog een hoop in de code gesaneerd worden om de html-opmaak door nette css te vervangen), maar het is een beginnetje.

Met vriendelijke groet,
CSShunter

 

[johan79]

@ csshunter,

super bedankt voor je hulp.
hier ga ik even verder mee stoeien.

ik heb zelf geen opleiding/cursus gehad voor webdesing.
dus van css heb ik nog niet echt veel verstand van,door kijken en vergelijken leer ik steeds meer.

gr.
johan

 

[csshunter]

Hoi Johan,

css heb ik nog niet echt veel verstand van, door kijken en vergelijken leer ik steeds meer.

Dat is de methode! :thumb:

Ken je deze al? www.web-garden.be/cursus-html/cursus-html/

En ik kom nog even terug op het van kleur wisselen van links. Voor een menu is daarvoor een handig css-trucje:
Je monteert alle menu-onderdelen voor zowel de gewone stand als de hover-stand voor de muis op het menu, en de stand voor "actuele pagina" in één afbeelding.

• De links in het menu krijgen met css elk hun eigen stukje van de afbeelding aangehaakt.
• De afbeelding bij de links zit er als achtergrond-figuur in. De positie daarvan verschuift als je met de muis over de link hovert.
• Het oplichten/anders zijn van het menu voor de actuele bekeken pagina gaat met iets dergelijks. In de <body> tag wordt telkens een ID voor de betreffende pagina ingevuld, en dan regelt alles zich verder vanzelf: per pagina hoeft dan aan het menu niets meer veranderd te worden.
• Het is één keer een klusje om alles op de goede plaats te krijgen, maar dan heb je een stylesheet dat voor elke pagina gebruikt kan worden.
• Tegelijk ben je zo mooi van de tabel voor het menu af.

De html is nu simpel geworden:

<div id="menu">
	<ul>
		<li class="home"><a href="test-visagie-home.htm"></a></li>
		<li class="agenda"><a href="test-visagie-agenda.htm"></a></li>
		<li class="fotoboek"><a href="test-visagie-fotoboek.htm"></a></li>
		<li class="gastenboek"><a href="test-visagie-gastenboek.htm"></a></li>
		<li class="biografie"><a href="test-visagie-biografie.htm"></a></li>
		<li class="contact"><a href="test-visagie-contact.htm"></a></li>
	</ul>
</div>

Theorie:

• De Patrijspoort-theorie
• Een blokje knoppen

Praktijk:

• www.developerscorner.nl/csshunter/tests/test-visagie-home.htm

Succes!
Met vriendelijke groet,
CSShunter

 

[johan79]

@ csshunter,

echt super dat je zo veel wilt helpen.
ga er na het weekend even na kijken en uitzoeken of ik het allemaal begrijp (zit het weekend bij mijn schoonouders)

ga nog wel even proberen of ik in de rechterkolom die je gemaakt heb, of ik die nog in delen kan splitsen zoals aangegeven op tekening.

mvg,
johan

 

[csshunter]

Hoi Johan,

... rechterkolom ... in delen splitsen zoals aangegeven op tekening.

Ja, de ouderwetse methode zou zijn om weer een nieuwe tabel in die rechterkolom te hangen: de bekende tabel-in-de-tabel.

Maar het kan veel mooier!
Als je de rechterkolom eenmaal hebt, is het opsplitsen heel makkelijk geworden door er <div> blokjes in te zetten die er allemaal hetzelfde uit zien: een kop, een afbeelding, een "lees meer" tekst en een gekleurd onderlijntje. Het handigst is daarbij om zowel de foto als de "lees meer" aanklikbaar te hebben.
Dan kan de html in de cel van de rechterkolom worden:

<td bgcolor="#444444" rowspan="9" valign="top"><!-- rechterkolom -->
    <div class="itemRechts">
        <h2>BELLYPAINT</h2>
        <p><a href="#"><img src="images/bellypaint.png" alt=""><br>
        Lees meer!</a></p>
    </div>

    <div class="itemRechts">
        <h2>HAIRSTYLING &amp; MAKEUP</h2>
        <p><a href="#"><img src="images/hairstyling.png" alt=""><br>
        Lees meer!</a></p>
    </div>
    ... enz.
</td>

Zonder extra tabel en zonder inline styles ziet dat er beschaafd uit!

De opmaak kan geheel met css plaatsvinden: de class="itemRechts" is telkens het aankopingspunt, ook voor de elementen die erbinnen zitten.
Eerst wordt de algemene opmaak van zo'n blokje aangepakt, dan de kopjes <h2> en zo naar beneden tot alles aan de beurt geweest is:

.itemRechts {
    padding-bottom: 10px;
    font-family: arial, helvetica, verdana, sans-serif;
    border-bottom: 1px solid #6866B1;
    text-align: center;
    }
.itemRechts h2 {
    margin: 15px 0;
    padding: 0;
    font-size: 1em;
    color: #C0C0C0;
    }
... enz.

Zo kan met css op bestelling geleverd worden wat de schets wilde, zonder dat de html vervuild is met allerlei steeds terugkomende opmaak-attributen. Extra handig: mocht je na een paar maanden besluiten om alle onderrandjes toch niet paarsblauw te willen maar groen, dan is dat met één ingreep in de css zó te regelen (in plaats van dat bij de randjes van alle cellen in een html-tabel apart te moeten opzoeken en wijzigen):

.itemRechts {
    ...
    border-bottom: 1px solid green;
    ...

Met toepassing van het bovenstaande gaat het al met al zo ogen:

• www.developerscorner.nl/csshunter/tests/table-fun-2.htm

Hokus, pokus, css!

Met vriendelijke groet,
CSShunter

 

[csshunter]

Oeps,
Vergeten de www.developerscorner.nl/csshunter/tests/test-visagie-home.htm van nr. #7 te testen in Internet Explorer 7.
Die had natuurlijk wat: in het menu mogen daar de links geen float:left hebben, maar moeten het de <li>'s zijn die floaten, anders krijg je rare trappetje in het menu...

Inmiddels hersteld!

 

[csshunter]

De tabel uit het raam!

Hoi Johan en anderen,
Na het zien van de tabel-opmaak begonnen mijn handen te jeuken om hetzelfde zonder tabellen met pure css te realiseren.
En wie jeuk heeft, moet krabben ...

Ondanks dat het menu en de rechterkolom er al in css-gedaante waren: een aardige uitdaging! Maar met af en toe wat hoofdbrekens (en extra op de kop krabben) is het gelukt: dit is niet iets wat je zomaar even uit de losse pols schudt. Hier en daar zitten er wat trucs en halsbrekende toeren in om alles goed op z'n plek te krijgen.
Het geheel zou ik willen karakteriseren als "vrij gewelddadige css".

• De css staat in dit aparte stylesheet:
  www.developerscorner.nl/csshunter/tests/stylesheets/visagie-in-pure-css.css
  
  
• Dit is de pagina zelf:
  www.developerscorner.nl/csshunter/tests/visagie-pure-css.htm
  
  
• Je ziet (zie broncode): er blijft na het css-geweld een heel handzame en vreedzame html-code over. Het maken van vervolgpagina's is nu kinderspel geworden.

De kanttekeningen zijn:

• Valid html en css.
• Browsers: werkzaam in Firefox, IE7, IE8, Chrome, Opera en Safari (IE6 laat verstek gaan).
• De bezoeker kan alleen de lettergrootte aanpassen (en ook het totaal zoomen) zonder dat het handeltje uit elkaar valt.
• Er kunnen zoveel extra "tabel-rijen" bijgeplaatst worden als je zelf wilt.

Met vriendelijke groet,
CSShunter

 

[johan79]

hey CSShunter,

wat heb jij een werk verricht zeg,dat ziet er super uit en heel erg opgeruimt.
staan voor mij nog wel veel abra cadabra codes in,haha.

heb je voor mij ook de visagie-logo.png??

je hebt overal een duidelijke uitleg staan van welke code voor gebruikt wordt.
hier ga ik weer even mee stoeien.

gr. Johan

 

[csshunter]

Hoi Johan,

heb je voor mij ook de visagie-logo.png??

Ja hoor, die staat hier:

• www.developerscorner.nl/csshunter/tests/images/visagie-logo.png

En de bijbehorende achtergrond-figuur, waarin het logo is opgenomen:

• developerscorner.nl/csshunter/tests/images/visagie-topbar.png

Verder kan je alle andere gebruikte images gewoon ophalen via hun src="..." in de html-broncode of hun url(...) in het css-stylesheet.

Bv. de schmink-foto heb ik gePhotoShopt richting Mona Lisa:

>>>

't Gaat hier om de visagie, en niet om de waarheidsgetrouwheid van het portret!

Met vriendelijke groet,
CSShunter
________
PS: een animatie geeft een aardige indruk van de make-over. Trouwens misschien ook een idee om via bv. 5 fotootjes (op statief) verschillende stadia van opmaak van een model vast te leggen, en die dan in een soortgelijke overvloeiende animatie op de site te zetten?

 

[johan79]

hey CSShunter,

de foto is er zeker beter van geworden.
heb alles inmiddels op de testsite gezet,ziet er goed uit.
heb alleen mijn bedenkingen of ik de footer en de bovenste balk moet laten doorlopen als je een grote schermresolutie gebruikt.
ga even kijken hoe het er uit zal gaan zien als ik die gelijk maak met de rest.
waarschijnlijk zal dat niet lastig aan te passen zijn door de css-style.

onder bij de footer heb ik staan ©, maar daar geeft ie ook nog waat waars weer,misschien weet je dat ook? vraag wel weer veel.
jij hebt een leuk gezichtje bij het adresbalkje staan,hoe heb je die gekregen/gemaakt? ( heb ik al gevonden )

verder moeten we maar weer wat leuks gaan verzinnen voor de vervolg pagina's,hoe we die gaan indelen en maken.

bedankt alvast voor alle moeite die je hebt gedaan om te helpen!!

gr. johan

 

[johan79]

Snap er nu niks meer van,
heb ik eindelijk dat plaatje in het adresbalk staan,blijft de achtergrond wit.
het lijkt wel dat hij de css bestand niet leest of zo.
verder heb ik er niks aan veranderd.
maar weer even verder prutsen ;(


gelukt

was een afsluiting vergeten/verwijderd

gelukkig probleem gevonden

 

[csshunter]

gelukkig probleem gevonden

Waar je maar gelukkig mee bent!

Onder bij de footer heb ik staan ©, maar daar geeft ie ook nog wat raars weer.

Dat zal 'm er in zitten dat je de pagina een "charset" utf-8 hebt meegegeven, maar de pagina zelf niet als zodanig hebt opgeslagen. Als dat niet lukt (ik weet niet waar in DW de opties daarvoor zit), kan je ook altijd in de html-code gebruiken: &copy;

... bedenkingen of ik de footer en de bovenste balk moet laten doorlopen ...

Denk ook dat het mooier is als die bij grote breedte niet paginabreed zijn. Ze zouden misschien ook een stukje van 40px of zo links en rechts kunnen uitsteken, zodat het niet te stijf wordt, en de pagina een beetje de kant op gaat van een papierrol waar je een stuk van ziet.

... waarschijnlijk zal dat niet lastig aan te passen zijn door de css-style.

Klopt! Als de html een {background: black;} krijgt, kan de body een bepaalde width krijgen, die de pagina met {margin: 10px auto 0 auto;} blijft centreren.

 

[johan79]

weet jij wat ik hier fout doe.
mijn viendin wilde graag het youtube filmpje kleiner hebben en dan in het midden van het vakje.
nu heb ik het volgende er op verzonnen:

youtube {
position: relative;
margin-top: 25px;
margin-left: 50px;
width: 268px;/* 368px */
height: 200px; /* 300px*/ /* hoogte alvast reserveren terwijl de video gedownload wordt */
padding: 0;
border-left: 1px solid #333333;
border-right: 1px solid #404040;
border-bottom: 1px solid #A7A7A7;
}

als ik dat in dreamweaver zet dan komt het mooi in het midden te staan.
maar als ik het upload naar de site staat het wel in het midden van links naar rechts, maar niet in het midden van boven naar onder.

nog een vraagje,
ik ben aan het proberen op de 2 balken korter te maken.
nu heb ik de onderste korter gemaakt,maar de bovenste krijg ik maar niet voor mekaar.
heb al gekeken waar ik iets moest bij zetten,maar kon het niet vinden.
dacht eerst in content,omdat daar de logo ik in staat,maar dan wordt het middenstuk veranderd.
kan je mij hier mee op weg helpen?

heb ik de onderste balk goed aangepast?
body {
margin: 10px 0 0 0 ;
margin-left: 300px; /* margin: left + right zelf toegevoegd */
margin-right: 300px; /* margin: left + right zelf toegevoegd */
padding: 0;
background: black url(images/visagie-topbar.png) repeat-x 0 44px;
color: white;
font-family: arial, helvetica, verdana, sans-serif;
font-size: 100.1%;
}



gr. johan

 

[johan79]

Dat zal 'm er in zitten dat je de pagina een "charset" utf-8 hebt meegegeven, maar de pagina zelf niet als zodanig hebt opgeslagen. Als dat niet lukt (ik weet niet waar in DW de opties daarvoor zit), kan je ook altijd in de html-code gebruiken: &copy;

hoe moet ik hem dan opslaan,kan ik even kijken of ik dat kan vinden in dreamweaver.

ik heb nu ook een scrollbar gemaakt aan de zijkant.
in dreamweaver staat het allemaal goed,kleine vakken en zo, en gaat het filmpje ook mee op en neer.

nu dat ik het weer op de site heb gezet blijft het filmpje stil staan.
weet je hier ook een oplossing voor?
echt super vaag dit,nu zonder aanpassing ergens blijft het wel staan op de website,erg vreemd,is hier een verklaring voor??


gr. Johan

 

[csshunter]

Even stuk voor stuk!

ik ben aan het proberen op de 2 balken korter te maken.
nu heb ik de onderste korter gemaakt, maar de bovenste krijg ik maar niet voor mekaar.
... in dreamweaver staat het allemaal goed ...

• Oeps, in Firefox staat het allemaal fout: alles is aan het schuiven gegaan.
• Verklaring: DW is in de preview niet te vertrouwen!

Je kan de bovenste en de onderste balk tegelijkertijd inklemmen in de <body>, als je die body een breedte geeft, bv met:

html {
	height: 100%;
	padding: 1px;
	background: black;
	color: white;
	}
body {
	width: 980px;
	margin: 10px auto 0 auto;
	padding: 0;
	background: black url(images/visagie-topbar.png) repeat-x 0 33px;
	color: white;
	font-family: arial, helvetica, verdana, sans-serif;
	font-size: 100.1%;
	}

Op deze manier komen de balken iets uit te steken. Met de body-width op 930px sluiten ze precies aan op het dambordje.
En de rest verschuift dan niet.

=============

ik heb nu ook een scrollbar gemaakt aan de zijkant.

Ik weet niet of dat wel zo'n goed idee is: in ieder geval bij een resolutie van 1024*768px krijg je dan aan de rechterkant twéé verticale scrollbalken naast elkaar.

Die moet je dan om-en-om bedienen om de pagina te kunnen zien, en van dat beurtelings op-en-neren krijg ik altijd het heen-en-weer. Mijn eerste impuls is altijd om zo'n pagina acuut weer te verlaten...

In de css van het model is er rekening mee gehouden dat de pagina in hoogte kan groeien, en dan lijkt me één rechter-scrollbar wel genoeg.

================

... het youtube filmpje kleiner hebben en dan in het midden van het vakje.

Dat moet kunnen met:

.youtube {
    position: relative;
    margin-top: 15px;
    margin-bottom: 15px;
    margin-left: 50px;
    ... enz.

Met vriendelijke groet,
CSShunter

 

[johan79]

heb alles weer terug gezet met de wijzigingen die jij hebt gegeven.
met welk programma kan ik dat controleren?en welk programma gebruik jij dan op een website te maken,misschien zou dat voor mij ook wel beter zijn.

gr. johan