Toon posts:

Probleem Met CSS-Styling

Pagina: 1
Acties:
  • 462 views sinds 30-01-2008
  • Reageer

donderdag 19 januari 2006 19:48

Acties:

Verwijderd

Topicstarter
Hello,

Ik ben nieuw op deze forum. Dus don't shoot me als ik iets verkeerd post ofzo :)

Ik ben nu bezig met een nieuwe site aan het maken. Ik wou afstappen van het gebruik met tabellen, dus ben ik begonnen met DIV's & CSS, maar ik er ondervind er wel veel problemen mee...

http://www.bowlingstones....uweOpmaakTest/index2.html -> dit ziet er heel in orde uit op IE & OPERA ... Maar als je dit laat lopen in Firefox wordt de hele lay-out door mekaar gegooid ...

Code :
--> opmaak.css <--
Css : http://www.bowlingstones....euweOpmaakTest/opmaak.css

--> index.html <--
html : http://www.bowlingstones....uweOpmaakTest/index2.html


Hopelijk kunnen jullie helpen ....
Anders stap ik terug over op tabellen

mvg,
Frederic

[ Voor 12% gewijzigd door Verwijderd op 19-01-2006 19:51 ]

donderdag 19 januari 2006 20:54

Acties:
  • Blauw
  • Registratie: Januari 2001
  • Laatst online: 10-04 19:05

Blauw

De Schreeuw

Deze layout is al erg vaak langskomen op Got, en er zijn ook al een paar goeie links gegeven om dit soort layouts goed te maken met behulp van CSS. Een daarvan zal ik even noemen -> http://intensivstation.ch/en/templates/

Daar staat ook jou gewenste vorm bij. Tip: schoon de CSS eens een stukje op, want het is een enorm rommeltje. Op deze manier heb je jer voor jezelf weinig voordeel mee ten opzichte van tabellen en dat is jammer want als je het eenmaal gewend bent werkt het veel fijner :)

Succes!

donderdag 19 januari 2006 21:03

Acties:

Verwijderd

Topicstarter
Na het bekijken van je link heb ik niet echt direct gevonden w at ik zoek ... eigenlijk wil ik het volgende bereiken ..

http://www.bowlingstones....weOpmaakTest/probleem.JPG

Dus ja ik heb al iets gemaakt met tabellen :

http://www.bowlingstones.be/ExtraFre/Test

Zo moet het eigenlijk eruit zien .. e nidd ik ben juist begonnen met de styling in DIV's en weet niet goed wat mag en neit mag en krijg ik allerhande problemen

Ook wetende dat het een photoshop image is in stukjes gesneden en dat ze moeten zitten zoals op foto... maar ja ... :)

[ Voor 15% gewijzigd door Verwijderd op 19-01-2006 21:08 ]

donderdag 19 januari 2006 21:53

Acties:
  • crisp
  • Registratie: Februari 2000
  • Nu online

crisp

Devver

Pixelated

Begin eerst eens met het toevoegen van een DTD; hiermee zullen browsers de markup in standards-compliant mode renderen en heb je dus al minder met verschillen te maken ;)

Intentionally left blank

donderdag 19 januari 2006 22:09

Acties:

Verwijderd

Topicstarter
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

dees dan boven mijn Html... Lol het krijgt nog een andere look zowel in IE & firefox, maar IE is toch het best bij de les :p

donderdag 19 januari 2006 22:24

Acties:
  • crisp
  • Registratie: Februari 2000
  • Nu online

crisp

Devver

Pixelated

Verwijderd schreef op donderdag 19 januari 2006 @ 22:09:
dees dan boven mijn Html... Lol het krijgt nog een andere look zowel in IE & firefox, maar IE is toch het best bij de les :p
Ik zou toch uitgaan van de rendering van Firefox aangezien IE nou niet echt bekend staat om de correcte implementatie van webstandaarden ;)

Intentionally left blank

donderdag 19 januari 2006 22:28

Acties:

Verwijderd

Topicstarter
Shit kga moeten beginnen terug van vooraf aan ...

Dus bij het nesten van Div's in div's krijg ik problemen .. anders zet hij de lay-out hoe het moet zijn maar als je ziet naar probleem.JPG dan kuan je zien dat bepaalde deeltje nog eens onderverdeeld moeten zijn, mag je dat dan met tables vullen of laat je die best achterwege ???


Maar voor de lay-out dat ik wil, is het bijna niet mogelijk om het anders te doen of toch :s


ik moet table's in mijn div's steken om die kleine lay-out te hebben ... En waarom mag je geen DIV's Nesten ????

En ik denk da tik nog niet compleet mee ben ....
Hoe doeje dan om zo'n lay-out te doen als op mijn JPG dat ik jullie gaf ... hoe weet ie wanneer hij op nieuwe lijn moet starten ??? Of wanneer hij de één onder de ander moet gaan zetten ... Pfff: ) met tabellen was ik wel rapper weg :p ... Maar dees is beter .. Maar moet je eerst mee leren werken :s

mvg

[ Voor 53% gewijzigd door Verwijderd op 19-01-2006 23:00 ]

vrijdag 20 januari 2006 09:12

Acties:
  • Boelie-Boelie
  • Registratie: November 2004
  • Laatst online: 26-09-2020

Boelie-Boelie

Voor de layout kun je kijken naar de link die Blauw gaf, met als aanvulling:

Cogito ergo dubito

vrijdag 20 januari 2006 11:40

Acties:
  • Zoefff
  • Registratie: September 2001
  • Laatst online: 09-04 11:51

Zoefff

❤ 

Natuurlijk mag je div's wel nesten, maar dan moet het wel nuttig zijn. Ik heb het gevoel dat je een denkfout maakt. Je stapt van tabellen af (dat is goed), maar vervolgens ga je met div'jes op precies dezelfde manier als met tabellen werken, en dat is niet goed.

In je source zie ik bijvoorbeeld
HTML:
1

<div id="space"></div>


Dat is dus écht not-done. Er zijn verschillende hulpmiddelen om ruimte om een ander blockelement te krijgen. Je kan dit met een margin of padding doen, of desnoods het object absoluut positioneren. Zogenaamde "spacers" zoals je in tabel-layouts nog wel eens moest gebruiken, zijn absoluut verleden tijd.

Daarnaast moet je ook om de semantiek in je pagina denken, wat nu veel eenvoudiger kan dan met tabellen. Ik zie bijvoorbeeld
HTML:
1
2
3
4
5

<div id="headerLeft">
    <div id="1"></div>
    <div id="2"></div>
    <div id="3"></div>
</div>

Dit ziet er uit als een opsomming. Het is dan ook logisch om daar een lijst voor te gebruiken:
HTML:
1
2
3
4
5

<ul>
    <li>item #1</li>
    <li>item #2</li>
    <li>item #3</li>
</ul>

Bovenstaan voorbeeld kan je op dezelfde manier stijlen als wanneer het div's waren geweest, alleen is het op deze manier wel duidelijker & makkelijker.

Misschien moet je het zo zien dat je alleen div's gebruikt om grote delen van je site te groeperen, die niet op een andere manier bij elkaar te houden zijn.

Het lijkt me verstandig om de linkjes eens door te nemen die hier in dit topic genoemd worden, en daarnaast nog wat basis-tutorials over semantische HTML en CSS-based layouts te lezen, misschien dat het dan wat duidelijker word :)


Fotoblog • Werkaandemuur.nl • Moestuincursus.nl • Twitter

vrijdag 20 januari 2006 11:59

Acties:
  • BtM909
  • Registratie: Juni 2000
  • Niet online

BtM909

Watch out Guys...

<list> :?

Je bedoelt zeker ul en ol, I assume

Ace of Base vs Charli XCX - All That She Boom Claps (RMT) | Clean Bandit vs Galantis - I'd Rather Be You (RMT)
You've moved up on my notch-list. You have 1 notch
I have a black belt in Kung Flu.

vrijdag 20 januari 2006 12:06

Acties:
  • Zoefff
  • Registratie: September 2001
  • Laatst online: 09-04 11:51

Zoefff

❤ 

BtM909 schreef op vrijdag 20 januari 2006 @ 11:59:
<list> :?

Je bedoelt zeker ul en ol, I assume
|:(

Teveel FG-FAQ's gemaakt de laatste tijd :z


Fotoblog • Werkaandemuur.nl • Moestuincursus.nl • Twitter

vrijdag 20 januari 2006 12:59

Acties:

Verwijderd

Topicstarter
thx voor de tips & de uitleg hier, ik zal het allemaal eens op mijn gemak doornemen ...

die :

<div id="headerLeft">
<div id="1"></div>
<div id="2"></div>
<div id="3"></div>
</div>

is eigenlijk voor de lay-out :$ ... Zoals u ziet ik denk nog veel teveel tabellen -> In de eerste div komt een soort pijltje, tweede div (id 2) komt balkje, derde div (id 3) komt nog een pijltje om het boeleke af te sluiten. Dat was mijn bedoeling en wat ik voor ogen had ... Omdat headerleft, ingedeeld is in drie afbeeldingen.. En wist (weet ik nog niet) totaal ni hoe ik dit moest indelen ...

Idd jullie hebben gelijk dat ik nog veel te Tabellerig (is dat het woord) denk... Het is ook een hele grote aanpassing om van tabellen naar CSS & DIV over te schakelen...

Ik zal zien of het iets wordt...

mvg & thx voor de info. ;)

vrijdag 20 januari 2006 14:31

Acties:

Verwijderd

Topicstarter
Het is wel irritant de output van firefox & IE vaak verschillend zijn :s Ik zou niet weten wat ik nu verkeerd doe ... Ik probeer nu de lay-out te zetten om vanboven en vanonderne dat pijlke te zetten ... :s in firefox is er lijk een klein stukje te kort waardoor lay-out ni meer klopt & in IE ziet het er goe uit :s en als ik dan kleiner zet (minder px) ziet het er weer slecht uit op IE & goed in firefox :s

<body>
<div id="container">
<div class="headerLeft"><h3> </h3><p> </p></div>
<div class="headerMidden"></div>
<div class="headerRechts"><h3> </h3><p> </p></div>
</div>
</body>

deel css :

.headerLeft {
margin: 10px 0 10px 0;
background:#7D7D7D;
float:left;
width:9px;
height: 93px;
}

.headerLeft h3 {
margin:0px 0 0 0;
background:url("DesignGroter2_03.gif") top no-repeat;
}

.headerLeft p {
margin:50px 0 0px 0;
background:url("DesignGroter2_09.gif") bottom no-repeat;
}


.headerMidden {
background:url("DesignGroter2_04.gif") no-repeat;
margin: 10px 0 10px 0;
float:left;
width:831px;
height: 93px;
line-height:0px;
}

.headerRechts {
margin: 10px 0 10px 0;
background:#7D7D7D;
float:right;
width:9px;
height: 93px;
}

.headerRechts h3 {
margin:0px 0 0 0;
background:url("DesignGroter2_05.gif") top no-repeat;
}

.headerRechts p {
margin:50px 0 0px 0;
background:url("DesignGroter2_10.gif") bottom no-repeat;
}

Resultaat :

firefox :
Afbeeldingslocatie: http://www.bowlingstones.be/ExtraFre/NieuweOpmaakTest/firefox.JPG

IE :
Afbeeldingslocatie: http://www.bowlingstones.be/ExtraFre/NieuweOpmaakTest/IE.JPG


en als ik dan iets verander dus de margin vermeerdert, krijg ik dan omgekeerd effect , dat er iets teveel is voor bij firefox :s

Hoe komt dat ??? En is mijn manier van werken nu al beter ???

mvg

vrijdag 20 januari 2006 15:05

Acties:
  • Cartman!
  • Registratie: April 2000
  • Niet online

Cartman!

Zoals je het nu doet is ook niet echt de bedoeling... Je gebruikt de H3 tag en P tag verkeerd zo.

Wat ik zou doen om te maken wat jij wilt :

<div class="header">
[img]"./images/de_moaten.gif"[/img]
</div>

waarbij class header een background heeft die de grijze achtergrond balk dinges heeft.
Zoiets dus :)

vrijdag 20 januari 2006 15:20

Acties:

Verwijderd

Topicstarter
Probleem is dat er in die ene div wel drie gif's moet of twee ... hoe moet ik dan die ene boven positioneren en die ander beneden ... in da voorbeeld zag ik zoiets staan daarmee ...

vrijdag 20 januari 2006 15:31

Acties:
  • RagaBaSH
  • Registratie: Januari 2001
  • Laatst online: 27-11-2025

RagaBaSH

Huttenbouwer

wat je kan doen is een javascript oplossing zoeken om je hoeken wat af te ronden (ik heb nog niet veel sites die 45° hoek goed zien dien, rounded wel). zoek dan bijv. op Nify-Corners (kom je op een of andere italiaanse page), deze kan aardig goed met rounded corners aangeven
daarnaast zou ik niet die grijze balk als gif of jpg doen maar als border van je Header div. (border-left: 10px solid #{kleurcode};) hierdoor hoef je je alleen nog maar zorgen te maken over die hoekjes.
Dat IE en Firefox dat nooit eenduidig oplossen komt omdat ze allebei anders rekenen voor de afstanden. zoek eens op dit forum rond naar conditional statements (<-[IF gt IE 7 etc.), door dergelijke technieken toe te passen kan je de opmaak anders maken afhankelijk van gebruik van FF of IE.
Verder kan je veel goeie informatie vinden als je eens wat zoekt op CSS-design bij digg.com of op sites als www.alistapart.com .
Het voordeel van CSS ten opzichte van tables zit hem er ondermeer in dat je niet in zoveel segmenten hoeft te werken maar dat je veel dingen makkelijk kan oplossen met wat simpele trucjes. (granted de learning curve is wat stijler).

Zes pallets, een paar vierkante kilometer dekzeil en een zooi verroeste spijkers is geen troep. Dat is een hut in ontkenningsfase.

zaterdag 21 januari 2006 16:52

Acties:
  • Cartman!
  • Registratie: April 2000
  • Niet online

Cartman!

RagaBaSH schreef op vrijdag 20 januari 2006 @ 15:31:
wat je kan doen is een javascript oplossing zoeken om je hoeken wat af te ronden (ik heb nog niet veel sites die 45° hoek goed zien dien, rounded wel). zoek dan bijv. op Nify-Corners (kom je op een of andere italiaanse page), deze kan aardig goed met rounded corners aangeven
daarnaast zou ik niet die grijze balk als gif of jpg doen maar als border van je Header div. (border-left: 10px solid #{kleurcode};) hierdoor hoef je je alleen nog maar zorgen te maken over die hoekjes.
Dat IE en Firefox dat nooit eenduidig oplossen komt omdat ze allebei anders rekenen voor de afstanden. zoek eens op dit forum rond naar conditional statements (<-[IF gt IE 7 etc.), door dergelijke technieken toe te passen kan je de opmaak anders maken afhankelijk van gebruik van FF of IE.
Verder kan je veel goeie informatie vinden als je eens wat zoekt op CSS-design bij digg.com of op sites als www.alistapart.com .
Het voordeel van CSS ten opzichte van tables zit hem er ondermeer in dat je niet in zoveel segmenten hoeft te werken maar dat je veel dingen makkelijk kan oplossen met wat simpele trucjes. (granted de learning curve is wat stijler).
Iemand meteen het gebruik van conditional statements aanraden vind ik dan weer niet verstandig. Zo leert iemand nooit goed omgaan met CSS. Er zijn zeker verschillen maar die zijn ook te omzeilen. Het zei door een div meer te gebruiken maar dan heb je geen ranzige code dus.

zaterdag 21 januari 2006 18:46

Acties:
  • DelTorro
  • Registratie: December 2004
  • Laatst online: 01-01-2024

DelTorro

Ik denk dat een link die ik onlangs vond uit een post op dit forum een heel goede uitleg geeft over hoe je een site opbouwt met div's. Het begint bij de basis (9 regels) en eindigt in het volgende. Als je de pagina doorleest zul je zien hoe makkelijk het is om div's toe te voegen en er iets veel uitgebreiders van te maken.
Link

edit:
Owja, de gegeven code maakt gebruik van een table. Ik heb 't echter zelf weten op te lossen zonder table. Kijk naar de "top, margin-top, left en margin-left" van de eerste div in de volgende CSS:
code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64

div.container {
    position: absolute;
    margin: 0 auto;
    width: 730px;
    height: 469px;
    top: 50%;
    margin-top: -234px;
    left: 50%;
    margin-left: -365px;
}

div.top {
    position: absolute;
    width: 730px;
    height: 140px;
    top: 0px;
    left: 0px;
    background-color: #00FF00;
}

div.kop {
    position: absolute;
    width: 447px;
    height: 35px;
    top: 140px;
    left: 25px;
    background-color: #FF00FF;
}

div.contentleft {
    position: absolute;
    width: 25px;
    height: 329px;
    top: 140px;
    left: 0px;
    background-color: #0000FF;
}

div.content {
    position: absolute;
    width: 447px;
    height: 259px;
    top: 175px;
    left: 25px;
    background-color: #FFFF00;
}

div.contact {
    position: absolute;
    width: 258px;
    height: 329px;
    top: 140px;
    left: 472px;
    background-color: #999999;
}

div.contentonder {
    position: absolute;
    width: 447px;
    height: 35px;
    top: 434px;
    left: 25px;
    background-color: #FF0000;
}


HTML:
code:
1
2
3
4
5
6
7
8
9
10
11

<body>
<div class="container">
    <div class="container"></div>
    <div class="top"></div>
    <div class="kop"></div>
    <div class="contentleft"></div>
    <div class="content"></div>
    <div class="contact"></div>
    <div class="contentonder"></div>
</div>
</body>


En het resultaat

[ Voor 72% gewijzigd door DelTorro op 21-01-2006 19:21 ]

zaterdag 21 januari 2006 23:24

Acties:
  • crisp
  • Registratie: Februari 2000
  • Nu online

crisp

Devver

Pixelated

Alles absoluut positioneren ben ik persoonlijk niet zo gecharmeerd van...

Intentionally left blank

zaterdag 21 januari 2006 23:37

Acties:
  • DelTorro
  • Registratie: December 2004
  • Laatst online: 01-01-2024

DelTorro

crisp schreef op zaterdag 21 januari 2006 @ 23:24:
Alles absoluut positioneren ben ik persoonlijk niet zo gecharmeerd van...
Hmm, waarom niet eigenlijk? Zitten er nadelen aan?

zaterdag 21 januari 2006 23:44

Acties:
  • crisp
  • Registratie: Februari 2000
  • Nu online

crisp

Devver

Pixelated

DelTorro schreef op zaterdag 21 januari 2006 @ 23:37:
[...]


Hmm, waarom niet eigenlijk? Zitten er nadelen aan?
Scrolling-issues, text-selection issues, en bij dynamisch content loop je al snel het risico dat dingen door elkaar heen gaan lopen.

In jouw voorbeeld haal je echt alles uit de flow wat in standards-compliant mode (aka een document met volledig doctype) resulteert in een body zonder content - en dus geen hoogte. Alles is dan overflow (dus ook geen scrolling-mechanisme bij te klein window).

[ Voor 6% gewijzigd door crisp op 21-01-2006 23:45 ]

Intentionally left blank

maandag 23 januari 2006 18:58

Acties:

Verwijderd

Topicstarter
Heb nog altijd datzelfde lay-out probleem .... Heb er nog niets opgevonden, niemand die een ideetje heeft ... en idd absoluut positionering is zeker af te raden ... :) Krijg je veel problemen mee ... Anders ja ga ik het anders moeten aanpakken ... Want jah links moet er eigenljk dubbel menu-'tje komen en moet ik div's in div's steken maar daar komen problemen van & gaat het niet in firefox :s

Links moeten menu komen log-in & menu zelf ... dus twee aparte stukjes, kan je toch ni anders dan met div's in div's werken ???? Niet ???

Kijk het resultaat :s in firefox ... bovenste stuk is ok... maar nu gaat de footer niet mee (hij staat op clear:both;) Zie CSS

http://www.bowlingstones....euweOpmaakTest/test2.html

http://www.bowlingstones....st/afbeeldingen/test2.css (zie maar) ...

Bekijk het resultaat in firefox, zieje dat footer niet meeloopt en bekijkresultaat in IE -> lay-out niet goe ... :s

mvg,

Ben wel veel aan't bijleren ;) thx

[ Voor 29% gewijzigd door Verwijderd op 23-01-2006 20:51 ]

donderdag 26 januari 2006 01:15

Acties:

Verwijderd

Topicstarter
Bon het dus opgelost geraakt :) Zoals je kan zien in de onderstaande links ;) Thx voor jullie hulp, ik ben er echt mee verder geholpen :) Het heeft zelf de W3C validation doorstaan :D

--> Opmerkingen ofzo zijn altijd welkom zé :D

http://www.bowlingstones....euweOpmaakTest/test2.html
http://www.bowlingstones....ieuweOpmaakTest/test2.css

http://validator.w3.org/c...weOpmaakTest%2Ftest2.html (passed validation)

mvg,
Pagina: 1
Reageer