Sitecheck (CSS en achtergrond)

[anoniem]

Hai, Ik heb voor het eerst een site weten te maken in CSS, zónder gebruik van tabellen (alleen voor 't menu, maar goed). [url]www.motustudio.tk[/url] Kunnen jullie toevallig even een kijkje nemen, om te zien of hij een beetje degelijk in elkaar zit? Ik ben namelijk een complete noob als het aankomt op coderen. [i:52a55d1b70]Ik weet overigens dat de site het niet/niet goed doet in IE, maar dat komt omdat IE niet goed omgaat met CSS (heb ik me laten vertellen). Ik moet ook eerlijk zeggen dat ik niet zo'n rekening houdt met IE... de site is/wordt geöptimaliseerd voor Safari en Firefox. Wat ik ook niet begrijp, is dat FireFox de plaatjes ook een dotted-lijntje geeft, terwijl ik dat heb uitgezet. In Safari doet hij dat nl niet.[/i:52a55d1b70] [b:52a55d1b70]Dan heb ik gelijk nog een aanvullend vraagje ook: Op mijn site heb ik 3 div's gebruikt voor de achtergrond, i.v.m. het patroon van het plaatje. Maar als ik een simpel achtergrond-patroontje wil, met daar bovenop de main-achtergrond (het middendeel waar de content in komt), hoe kan ik dat dan oplossen?[/b:52a55d1b70] Ik heb nu deze code voor het middendeel:[code:1:52a55d1b70] body { background: url(_beeld_a/achtergrond.jpg) no-repeat fixed center top; background-color:#990000; margin: 0 0 0 0; font: Arial, Helvetica, sans-serif; line-height: 1.6; font-size: 12px; }[/code:1:52a55d1b70]Maar ik weet niet hoe ik nu een plaatje achter deze achtergrond kan plaatsen, die zichzelf herhaalt. [url]http://vkmag.com[/url] heeft zo'n achtergrondpatroon wat ik bedoel (het grijze stuk). Alvast bedankt voor de info! Mvg, Joram

[anoniem]

First off all...je hebt inderdaad de keuze om je site zo te laten in IE, maar je praat wel over 90% van de mensen die je site komen bezoeken. Het is imho niet slim om deze groep een site voor te schotelen die half werkt. Het is de taak van de developer om de sites te laten werken. Dat IE slecht met CSS omgaat durf ik niet te zeggen. Oke, ze houden zich niet aan de standaarden, maar het is prima mogelijk om jouw site goed in IE te krijgen, zij het met wat aanpassingen hier en daar. Ook ik ben geen geek ik CSS, maar het probleem wat je nu hebt komt volgens mij door je absolute positionering van je elementen. Op [url=http://www.456bereastreet.com/lab/developing_with_web_standards/csslayout/2-col/finished.html]deze[/url] site wordt dezelfde layout gebruikt zoals jij die hebt, en daar is alles wel goed in IE en FF als ik hover over je links dan zie ik heel kort je rechterkolom opflitsen. Ook dit komt volgens mij door de absolute positionering van je kolommen, maar dat weet ik niet zeker. Het is in ieder geval nogal storend. In je code komen veel van dit soort dingen voor [code:1:eec7961fc0] <p><span class="style1"><span class="style4">WEBSITE ONLINE - </span><span class="style4"> <a href="http://motu.web-log.nl/log/2915591" title="naar macfreak" target="_blank" alt="link ergens heen"> </a></span><span class="style3">13-07-2005</span></span><br> [/code:1:eec7961fc0] Wat je daar doet is de kracht van CSS verkeerd benutten en je vergeet semantisch te werken. Zet titels altijd tussen header tags (h1, h2 etc) Deze kun je eventjeel stylen met CSS. Ook kun je die class="style1" prima aan je <p> element koppelen, daarmee hoef je niet zoveel <span> elementen te gebruiken. Zoals je het nu doet beland je nl in een span-soup. Hoezo heb jij je dotted lijntje uitgezet? [code:1:eec7961fc0] a:hover{ text-decoration:none; color: #413B25; border-bottom: 1px dotted #413B25; [/code:1:eec7961fc0] daar staat toch heel duidelijk dotted ;) Nog over dat herhalen van het achtergrondplaatje. [url=http://www.thefixor.com/help/background/table_repeat_y.html]Pruts[/url] eens met die no-repeat. Maak er eens van repeat-x of repeat-y...

[anoniem]

Ziet er mooi uit! Coderen kan inderdaad met wat <span>'s minder, door goed gebruik van [url=http://mezzoblue.com/downloads/markupguide/]header-tags[/url]. Voor lijstjes, zoals een lijst met links, kun je gebruik maken van [url=http://css.maxdesign.com.au/listutorial/]unordered lists[/url]. Het menu kan met een unordered list worden gemaakt en [url=http://wellstyled.com/css-nopreload-rollovers.html]m.b.v. CSS gestyled[/url] worden. En er is idd iets mis met die rechterkolom waardoor 'ie elke links langsflitst als je over een link heen gaat. Ook klopt het dat IE soms raar doet, maar dat mag geen reden zijn om 'm niet in IE ook goed te laten werken. Er zijn diverse sites met [url=http://www.positioniseverything.net/explorer.html]IE-bugs en -oplossingen[/url].

[anoniem]

Bedankt voor de reacties! :) Ik weet niet goed hoe ik al die span's kan vervangen door headers "< H >" Ik ben pas sinds woensdag serieus bezig met CSS namelijk, hehehe. Wat betreft Absolute positionering; als ik dat niet doe, dan verspringt de boel ineens... wat is dan de andere optie? Ik heb geprobeerd met een Unordered list te werken, maar ik vond dat zo lastig als maar wezen kan... al die afkortingenanv zo'n lijst is nog onoverzichtelijker dan een tabelcode in HTML :cry: Javapeh; Ik ben gelukkig geen developer ;) Maar ik wil wel graag dat mijn site overal redelijk werkt (op z'n minst) Ik heb alleen geen idee hoe ik de site ook in IE goed kan laten zien. Het enige wat ik nu een beetje begin te snappen van CSS, is hoe je dingen kan positioneren e.d., maar als ik kijk naar die site die je opgaf, waar het allemaal wel werkt... ik zie daar zoveel CSS, en nog meer DIV's, da's nog een beetje chinees voor me. Iemand enig idee hoe ik het beste verder kan gaan met de site? :o Mvg, Joram

[anoniem]

als je inderdaad pas sinds kort bezig bent met CSS dan ben je al goed op weg. Je stelt veel vragen, maar ik kan zeggen dat veel antwoorden staan in de links die ik en boelieboelie geven. Een header tag doe je met [code:1:07d5baee46] <h1>titel<h1> [/code:1:07d5baee46] In je CSS file kun je deze h1 stylen zoals je dat zelf wilt [code:1:07d5baee46] h1 { font-size: 20px; } [/code:1:07d5baee46] dit is natuurlijk maar een voorbeeldje. De reden waarom je het zo moet doen is dat je site dan semantiesch correct in elkaar zit. Je definieert een titel als een titel zeg maar. Echter op dit moment zou ik meer aandacht spenderen aan je IE 'probleem' ipv deze stijlverbeteringen. Een duidelijke uitleg over de manier waarop die site die ik gaf werkt staat [url=http://www.456bereastreet.com/lab/developing_with_web_standards/csslayout/2-col/]hier[/url]. Een unordered list is niet erg moeilijk hoor. <ul> betekent [b:07d5baee46]U[/b:07d5baee46]nordered [b:07d5baee46]list[/b:07d5baee46] <li> is [b:07d5baee46]L[/b:07d5baee46]ist [b:07d5baee46]i[/b:07d5baee46]tem als ik het goed heb. Ook de opmaak daarvan is niet moeilijk. je begint met <ul> en sluit het geheel af met </ul> daartussen zet je steeds <li>...</li>...[url=http://www.w3schools.com/tags/tag_li.asp]Meer info op w3schools[/url] Het goed maken avn een website zal ook inhouden dat je veel moet lezen. Maar er zijn vele en duidelijke tutorials op het net beschikbaar. Voor specifieke vragen kun je natuurlijk altijd hier terecht. Overigens vind ik je site er in FF wel mooi uitzien. Qua design kan ik wel wat van je leren.

[anoniem]

Bedankt voor 't compliment Japaveh! :D Ik kijk regelmatig op sites zoals CSSzengarden, maar omdat ik in die code niet goed kan zien waar elk CSS-deel naartoe refereert, is het nogal lastig om dan een duidelijk beeld te krijgen. En oplossingen vinden voor m'n vragen is behoorlijk verwarrend, omdat ik vaak niet eens weet waar ik naar vraag. 't Is veel makkelijker en overzichtelijker om dan in een forum een gerichte vraag te stellen, omdat je een exact antwoord krijgt op wat je wilt weten... dat leert een stuk makkelijker :P Ik ben 'as we speak' bezig met het vervangen van de SPAN-tags voor Header-tags, dus dat komt helemaal goed. Die (un)ordered lists zijn inderdaad de correcte manier van menu's e.d. maken.... ik kreeg dat op een ander forum ook te horen. Maar die code is bijna 2x zo lang en ingewikkeld als een tabelletje. Ik zit nu nog heel veel te switchen tussen Code-view en Design-view in Dreamweaver namelijk, dus ik maak even een tabelletje, en die plaats ik dan in code in de DIV. Zo'n list maken is dan een stuk lastiger voor een beginner ;) Maar als ik deze beginselen van CSS een beetje goed doorheb, ga ik eens knutselen met lists; al die afkortingen zijn op dit moment nog te lastig :) Maar hoe optimaliseer ik de site voor IE dan eigenlijk? Voor zover ik weet en kan zien heb ik een correcte CSS-code, en (buiten de spans, die ik nu corrigeer) ook een goede HTML-code. Ik zou niet weten wat ik dan moet veranderen, zodat de site er op Firefox en IE, én Safari goed werkt. "Probleem" is ook, dat ik geen IE-6 heb.... ik werk namelijk op een Mac, hehehe. [b:9bd0f120cb]Ik wás dus bezig met alle SPANS te vervangen voor Headers... maar dat werkt niet helemaal. Alles wat áchter een Header komt, begint op een nieuwe regel. Aangezien ik in mijn Header 2 delen heb (de titel en de datum), zet hij deze onder elkaar. Dus 2 Headers naast elkaar lukt me niet :([/b:9bd0f120cb]

[anoniem]

Het moet natuurlijk <h1>titel</h1> zijn, maar dat had je waarschijnlijk wel begrepen. Het klopt dat de headers standaard een regeleinde met zich mee hebben. Dat komt doordat de breedte automatisch 100% is en de display property in CSS automatisch op 'block' staat. Geef je als extra stijlregel voor h1: [code:1:f947be8ce9]display:inline; [/code:1:f947be8ce9] Dan gedraagt de header zich net zoals <span>. [quote:f947be8ce9] 't Is veel makkelijker en overzichtelijker om dan in een forum een gerichte vraag te stellen, omdat je een exact antwoord krijgt op wat je wilt weten... dat leert een stuk makkelijker [/quote:f947be8ce9] En ondertussen kunnen de mensen op dat forum voor de 1000e keer dezelfde principes gaan uitleggen.. das lekker. Het voordeel van zo'n link dat je juist niet exact het antwoord krijgt wat je wil, maar dat je zelf op onderzoek moet uitgaan en er ook nog wat van leert! Heb je alleen maar voordeel van bij een volgend ontwerp. [quote:f947be8ce9] "Probleem" is ook, dat ik geen IE-6 heb.... ik werk namelijk op een Mac, hehehe. [/quote:f947be8ce9] Maar vast toch wel op school of bij kennissen of op een oude PC? Lees in ieder geval de bugs door die in IE zitten, of hoe IE dingen (standaard) anders aanpakt dan het W3C. Een organisatie die in mijn ogen overigens ook niet altijd gelijk heeft (maar dat is weer een heel andere discussie).