Ik ben bezig met een website, maar ik loop een beetje vast op een nogal
lastig (voor mij) probleempje.

Allereerst, een linkje naar het w.i.p.: www.motustudio.org/testsite/index.html

Zoals je kunt zien heb ik 't als volgt gedaan;
- Een "header" div op 100% breedte, zodat ik 'm 'n andere kleur kon geven
- Dáárin 2 divs: een "logo" en een "greybar" div.

Ik heb het al op diverse manieren geprobeerd, maar wat ik wil is het volgende;
Ik wil dat de boel gecentreerd staat, en dat de grijze balk vanaf de rechterkant
van het browservenster, tot aan het plaatje van 't logo loopt. Het probleem is dat
hij nu doorloopt tot aan de linker kant, wat niet de bedoeling is.

Het menu wat eronder komt te staan, de content en de footer komen ook
gecentreerd te staan. Een plaatje van hoe het er ongeveer uit komt te zien kun
je hier vinden: http://motustudio.org/diversen/site_layout1_groot.jpg

Enig idee hoe ik dit voor elkaar krijg?

/* -------------------------- donkere balk naast logo */
#greybar {
right: 0px;
top: 0px;
width: 100%;
height: 146px;
position: absolute;
text-align: left;
background: url(img/greybar.gif) repeat-x right top;
}

dan krijg je hetzelfde als je jpg

Ik heb een soortgelijke oplossing geprobeert als jij weergeeft, maar
dan valt m'n balk over het logo, en staat het logo linkslijnend, hehe.

Ik heb m'n testsite een beetje aangepast, zodat je beter kan zien wat
m'n bedoeling is.

(Bewerkt door joram om 14:19, 1-02-2007)

Het werkt helemaal zoals ik wil nu, maar met zoveel hacks weet ik
niet of dit de beste oplossing is. Het zijn voor zover ik kan zien vooral
hacks voor IE, maar zou iemand héél misschien even een blik willen
werpen om te zien of dit in orde is?

Alvast bedankt weer

link

met kleurtjes, het logo kan je in de logo div als achtergrond plakken en rechts laten beginnen (no-repeat)

width van de titlebar is 49,9% anders loopt IE te miepen. Even geen safari bij de hand, maar bovenstaande code werkt in IE & FF (zo'n beetje).

Maar ik ben al een poosje van tabellelebelletjes af hoor
Ik heb alleen nooit iets echt lang online staan, omdat wát ik wil, daar heb ik PHP voor nodig.
En dat kan ik nog niet, hehe. Dus ik ben gewoon aan het bouwen totdat ik 'n stukje
PHP tegenkom wat ik als houvast kan gebruiken om het verder te leren.

@MK;
Wow, da's nog eens een klein beetje, én simpele, code! In Safari ziet het er ook goed uit!
Hoe ik het logo er verder in moet zetten snap ik (gelukkig), en da's precies wat ik morgen
gelijk even ga proberen. Zoals jij het gedaan hebt scheelt 't me zelfs een plaatje, hehe.
Die grijze balk kreeg ik eerst niet lekker op z'n plek, vandaar dat ik er een 1px breed
plaatje van had gemaakt. Die grijze balk krijgen zoals jij het nu gedaan hebt was eigenlijk
het enige echte probleem waar ik niet uitkwam, hehe. Bedankt!

p.s.: Handig boekje Peter! Ik heb hier al wat liggen, en lees bijna elke dag wel wat
informatie op bijvoorbeeld www.alistapart.com en www.456bereatstreet.com , maar
boekjes zijn nooit weg

(Bewerkt door joram om 19:51, 1-02-2007)

Even voor mijn idee. Ik heb een site opzet gemaakt in tables. Nu wil ik echt wel css gaan leren (just for the fun) maar is het de tijdsinvestering waard?

Vraag.
Kan deze site relatief makkelijk gerealiseerd worden met css?
http://www.huisvanklei.nl

Op de plaats waar nu de grote foto verschijnt wil ik ook tekstblokken kunnen tonen nadat er op een link geklikt wordt.

Elk beetje hulp is welkom en een groffe structuuropzet zou helemaal mooi zijn (ga ik wel verder pielen).
By the way. De site is gewoon voor een kennis van me en ik verdien er geen stuiver mee.

Oefen gerust, maar maak er geen halszaak van !
Verdiep je in de links die hier eerder vermeld werden,
al gaan die soms al meteen erg 'diep'. Een boek helpt ook,
zeker als het helder en stap-voor-stap de materie beschrijft.
Kijk 'ns in mijn boekenlijst: http://www.studea.nl/weblitlijst
Als je geen moeite met Engels hebt, zijn de boeken van
Zeldman een heel praktische zet in de goede richting.

En ik kan je uit eigen ervaring vertellen dat het investeren van tijd in
't leren van CSS-layouts het meer dan waard is. Zoals je in dit draadje
ziet heb ik nog steeds wat te leren in CSS. Maar de mogelijkheden die
CSS me biedt, wat bij tabellen veel meer pielen is, geeft me ook tijdens
't ontwerpen van een site meer inspiratie. Ik hoef niet te denken in hoeveel
tabelletjes ik die site moet opknippen e.d.

Buiten dat;
Ik neem aan dat je weet dat tabellen zowieso niet eens bedoeld waren
voor het opmaken van een site. Buiten dat is een site met CSS beter indexeerbaar
door bijvoorbeeld Google, is de code (als je 't een beetje goed doet) kleiner
dan een site met tabellen, én neem je jezelf veel werk uit handen als je later
de site nog eens moet aanpassen.

Kijk voor de grap anders eens naar www.csszengarden.com
Deze site heeft maar 1 html bestand, maar talloze CSS-bestanden. Zo ziet de site
er met elk CSS bestand totaal anders uit, terwijl er aan de inhoud niets verandert.
Het is een erg goed voorbeeld van de kracht van CSS.

Belangrijk om te weten is dat Internet Explorer niet altijd de code even goed weergeeft.
Maar als je je aan de standaarden houdt kom je écht een heel eind. Ik ben nu ongeveer
2 jaar bezig met CSS, en op zo nu en dan wat kleine problemen (zoals in dit draadje)
na, maak ik volledige css-layouts. En dat zonder opleiding of echt boeken lezen.
Alles wat ik weet leer ik van sites, kleine stukjes CSS kopiëren en aanpassen,
en het verder gewoon doen. Het klinkt cliché, maar ik ben echt geen wizkid,
en ik heb er bijzonder weinig tijd in gestoken in verhouding tot wat een hoop mensen
denken dat nodig is.

Daar moet ik wel aan toevoegen dat als ik professioneel CSS-sites wiltmaken, dat
ik zéker nog een hoop te leren heb. Maar met de zo nu en dan kleine beetjes tijd
die ik er nu in heb gestoken kan ik zeer fatsoenlijke sites maken zonder één
tabel.

Dus, in mijn ogen is het elke investering die je erin kán steken, het volledig waard

(Bewerkt door joram om 23:07, 1-02-2007)

Zelf heb ik veel op Internet rondgekeken (zie de reeds genoemde links in dit topic) en 9 maanden voor een webbedrijf gewerkt waar ik voornamelijk psd's om moest zetten naar xhtml/css-layouts. Op een gegeven moment heb je de vele browserrarigheden wel voorbij zien komen. Maar nog steeds kan je uren kijken naar een klein ding wat niet werkt zoals je zou verwachten... (IE sucked)

Ik heb het volgende boek gelezen: http://www.cssmastery.com/ waar ik zelf veel aan heb gehad. Op een gegeven moment gaat er een lichtje branden, en weet je waarom dingen verschuiven of op een andere plaats komen te staan... en meestal is dat dan ook weer te fixen.

css-hacks probeer ik tot een minimum te beperken, meestal is er wel een andere manier om hetzelfde voor elkaar te krijgen.

Daarom is het fijner om 2 elementen te nemen, de binnenste geef je de gewenste breedte en de buitenste geef je de padding/marge en dan werkt het lekker, zowel in IE als andere browsers.

Ik heb er gelijk nog een vraagje achteraan;
Ik heb nu de code van MK toegepast, en dat werkt erg goed! Maar ik heb
nu het menu-achtergrondje geplaatst, plus de div met een vaste breedte
voor de content. Maar als ik de pagina nu test in Safari of Firefox, dan heb
ik een beetje een vreemd verschijnsel.

De pagina moet uiteindelijk 900px breed worden (ik hou wel van een beetje
schermvullende sites), maar als de browser smaller wordt gemaakt moet
de bezoeker horizontaal scrollen. Nu is dat geen probleem, maar de hele
"header"-div doet dan gelijk gek. Als ik horizontaal moet scrollen vult
deze header zichzelf niet meer uit. Je ziet dan dus de bruine achtergrond
in plaats van de header+grijze balk.

http://www.motustudio.org/testsite/index.html
Ik heb al geprobeerd om te spelen met margins en floats, maar dat hielp
helaas niets. Heeft iemand een geniaal inzicht in waar het aan zou kunnen liggen?

Mvg
Joram

joram om 9:54, 2-02-2007

http://www.motustudio.org/testsite/index.html
Ik heb al geprobeerd om te spelen met margins en floats, maar dat hielp
helaas niets. Heeft iemand een geniaal inzicht in waar het aan zou kunnen liggen?

Grappig ja, dat is een probleem met het mixen van % en fixed afmetingen.
width 100% geldt alleen voor het huidige browserwindow, als het browserwindow kleiner wordt dan de fixed 900px en je moet dan scrollen vult hij inderdaad niet meer netjes de header uit. je zou misschien een min-width van 900px op de header kunnen zetten. IE support dat weer niet (goed).

hoewel je met http://www.cssplay.co.uk/boxes/minwidth.html misschien nog iets kunt bereiken

Goh, zo'n beetje aparte layout houdt je in ieder geval wel lekker bezig, lol!

@joram: ik wil ook php'n, maar snap echt niets van de taal. html en inmiddels ook css gaat prima. Ik heb al wel een aantal keren een CMS toegepast wat gebaseerd is op php (uiteraard). Wordpress en (mambo) Joomla!

Voor zowel Wordpress als Joomla, kun je helemaal zelf een template ontwikkelen. Deze werken dan wel weer met CSS. Joomla biedt hierin ook handleidingen die vanaf 'scratch' te werk gaan. Mogelijkheden zijn eindeloos.

(Bewerkt door Macsel om 11:20, 2-02-2007)

joram om 23:01, 1-02-2007

Buiten dat;
Ik neem aan dat je weet dat tabellen zowieso niet eens bedoeld waren
voor het opmaken van een site. Buiten dat is een site met CSS beter indexeerbaar
door bijvoorbeeld Google, is de code (als je 't een beetje goed doet) kleiner
dan een site met tabellen, én neem je jezelf veel werk uit handen als je later
de site nog eens moet aanpassen.

Sinds je toch over Google begint, kan je misschien beter je code eens opkuisen van al die onnodige div containers. Niet om je te kl... maar waar is je titel van je pagina op je ontwerp? Google kan voor zover ik weet nog geen background-images lezen, screen-readers ook niet.

Je hebt 4 divs alleen al in je header, je logo zou moeten tussen h1 tags staan zodat Google het wel degelijk vindt. Je 'titlebar' kan in een andere header tag, omdat het nu eenmaal een titel is. Je bouwt je code veel te visueel op, je moet je code opbouwen zoals je het in een text-editor doet. Volgens belangrijkheid en met de gepaste html element keuze.

Jouw visuele code:

<b>header tekst</b><br />
01.02.2007
</div>
</div>
</div>
<div id="menu">menu</div>
<div id="content">content</div>


Een leescode:

<div id="content">content</div>


Ik hoop dat mijn post niet te grof overkomt, maar ik wou je even duidelijk maken dat het belangrijker is een goede code te schrijven, dan een mooi ontwerp te maken. Ik maakte vroeger, en soms nog, dezelfde fout met vanaf mijn ontwerp te beginnen om mijn code op te bouwen. Terwijl je eerst naar de content moet kijken voor je met je code begint.
Voor Google maakt het niet uit welk kleurtje je waar gebruikt hebt, de h1 tag is veel belangrijker tegenwoordig. Je kan toch bijna alles al met CSS aanpassen, als de mensen dan geen CSS hebben zien ze tenminste iets.

Ik heb je ontwerpje even hermaakt met de nieuwe markup: Link. Lijkt dat niet verdacht veel hetzelfde  

Boeken zoals Bulletproof Web Design (zoals Peter al zei) en Transcending CSS leren je enorm veel over het gebruik van CSS en goede HTML markup. Het is een aanrader ze te lezen.

Grts,
Ward

(Bewerkt door Ward om 11:42, 2-02-2007)

o.a. Daarom wil ik PHP leren zodat ik een wordpress-theme van scratch kan maken.
Dan kan ik tenminste m'n eigen template vanaf 0 opbouwen, zonder dat daar
(soms onbedoelt) stukjes code achterblijft van de vorige maker.

Maar de enige problemen die ik soms met CSS nog nodig heb is als ik dingen moet
doen zoals die grijze balk in m'n huidige header. Dat zijn nét even van die
vervelende probleempjes waar ik net even wat kennis voor mis. Niet dat ik er niet uitkom,
want daar zijn fora hartstikke fijn voor toch? Maar dat zie/hoor/lees je één keer, en dan
weet ik het ook wel

@WARD;
Ik heb geen idee wat je bedoelt Ik heb ongeveer net zoveel code gebruikt als jou, maar
voor zover ik kan zien is het enige echte verschil dat je hebt het feit dat je de H1-tag hebt
gebruikt voor het plaatsen van m'n logo. Maar qua CSS en HTML zit er niet bijster veel
verschil in code en hoeveelheid toch?

Mijn "doelgroep" (als ik die al heb) is mensen die een grafische achtergrond hebben,
of iets nodig hebben uit die sector. Ik ken niemand die een browser heeft die geen CSS
ondersteund, en screenreaders/palmtops hebben ook steeds vaker gewoon redelijke
ondersteuning. Op die h1-tag na heb ik volgens mij alles nu toch netjes staan of niet?

p.s.: Ik zie het niet als kleineren hoor Ward, maar ik ben geen professionele webbouwert,
en heb nog genoeg te leren in CSS

(Bewerkt door joram om 11:51, 2-02-2007)

Je doelgroep is veel groter dan je denkt, niet enkel grafische personen gaan op je website terechtkomen. Het kan om het even wie zijn die er op beland en dan moet je op alles voorbereid zijn. En dat doe je maar op één manier, goede html schrijven, niet enkel met het design in gedachten.

Je haalt er ook zelf voordeel uit, je code is lichter en meer overzichtelijk. Als je elk element de goede html-tag meegeeft zal het voor jou ook een stuk gemakkelijker lezen worden, als er iets moet worden aangepast. Teveel divs gebruiken gaat je html code vervuilen en dan werk je eigenlijk op dezelfde manier als vroeger, alleen heb je nu de table-cellen vervangen door divs. Je moet zo weinig mogelijk div's gebruiken en zoveel mogelijk gebruik maken van de bestaande html-tags.

Nog een aanrader is de Microformats eens door te nemen.

Net zoals je stukje code #branding h1
Waarom op die manier, en niet gewoon een #branding-ID toevoegen aan
een h1-htmltag? Waarom zet je er specifiek h1 achter? Want dan pakt hij toch
elke keer als je h1 gebruikt dat plaatje?

Dat zijn dus dingen die ik nog moet leren. Maar op dit moment hou ik me eigenlijk
vooral bezig met het máken/uitproberen van verschillende layouts, zodat ik er
steeds handiger in wordt. En ook omdat ik mezelf dan verplicht om na te denken
over de IE-probleempjes en mogelijkheden om m'n eigen code te verbeteren.

Even een aanvulling:
Een betere indexering op Google kan bijna niet, lol! Ok, het kan natuurlijk wel,
maar als je op motustudio, "motu joram" of "motu flabber" zoekt in Google, sta
ik áltijd bovenaan de lijst, of is op z'n minst m'n website makkelijk te vinden.
Da's toch een aardige lijst van goed geindexeerde digitale "ikjes", hehehe.

(Bewerkt door joram om 12:50, 2-02-2007)

Ik denk dat het child-selector heet, maar ik ben niet meer zeker, dat is wanneer je een id-selector gebruikt om een element te bepalen en daarna de onderliggende elementen stijl geeft.
Zoals #branding h1, het is inderdaad zo dat nu alle h1's onder branding het logo mee krijgen, maar aangezien je waarschijnlijk geen tweede h1 gaat gebruiken, kan dat ook zo. Het betekent minder html code en een duidelijke css. Want je stijlt je titel die onder branding valt.

Moest je nu bvb een blog hebben waar bij iedere post hetzelfde icoontje voor moet komen is het beter om het als volgt te doen: één div die alles omsluit en de posts altijd met hetzelfde element beginnen.
ex:

<h3>Titel van het blokje</h3>
<p>Tekst van het blokje</p>
</div>


Dit is beter dan iedere h3 een class mee te geven. Je kan dit eventueel wel doen bij uitzonderingen om ze apart te stijlen. Maar het houdt je code tenminste overzichtelijk.

Wat ik tegenwoordig zelf veel doe, is via javascript de juiste blokken de juiste class/stijl meegeven.

(Bewerkt door Ward om 13:13, 2-02-2007)

(Bewerkt door Ward om 13:14, 2-02-2007)

Google weet niet wat jij met .leuke_kop of #leuke_kop bedoelt...
De semantiek daarvan ontgaat 'm dus wordt-ie niet gehonoreerd
met een (iets) hogere ranking op basis van semantische inhoud.
Aanhaking bij andere uitingsvormen zoals RSS is dan ook beter.

Maar je gebruikt JavaScript om je blokken de juiste stijl mee te geven?
Is dat niet juist veel minder goed? Er zijn meer computers (ok, PC's dan, hehe)
die geen JavaScript ondersteunen dan computers die geen CSS ondersteunen.
Dank daar Service Pack 2 maar voor... of Bill Gates

Het gaat me op zich niet eens zozeer of ik op de 1e of 10e plek sta in Google overigens.
Belangrijker voor mij is dat áls mensen m'n site zoeken/vinden, dat het in de meest
gangbare browsers goed werkt. Een RSS-feed toevoegen aan m'n site is ook nog onbekend
terrein voor me. Ik zie her en der wel wat gratis PHP en/of Javascriptjes die het voor
je doen, maar als ik 't doe, wil ik 't beter doen dan een gratis scriptje... of in ieder geval
zélf doen. Gratis scriptjes geeft me hetzelfde gevoel als het gebruik van die gratis
gastenboekjes die je met de lelijkste thema's aan je eigen "site" kan plakken.

Maar helaas zijn PHP en JavaScript nog "ToT" (totaal onbekend terrein).
Die talen staan al in m'n to-do list, maar voorlopig doe ik er verder nog niet zo heel
veel mee... éérst een beetje basiskennis opdoen, hehe.

(Bewerkt door joram om 13:29, 2-02-2007)

Ik dénk dat de site dat nu niet doet omdat de header is gepositioneerd d.m.v.
percentages en negatieve margins. Hahaha, 't is eigenlijk best lachwekkend dat
één grijze balk zoveel geneuzel in een ontwerp kan veroorzaken, :D
Ik ga even terug naar Photoshop om te kijken of ik die balk dáár niet anders
kan oplossen. 't Is natuurlijk mooi dat we met CSS kunnen blijven knutselen,
maar zo blijft je bezig.

Op deze manier kon hij met de h1-tag heel makkelijk het logo
zetten. Wat ik alleen niet snap is waarom het met de bovenstaande
code gedaan werd. Ik begrijp dat het semantisch is, maar waarom
niet gewoon "h1" in plaats van "#branding h1"? Hij hangt geen ID aan
de h1-tag in de html, dus zou het toch ook met "h1" kunnen zonder
het "#branding" ervoor te zetten?

Alvast bedankt voor de info