nog een paar probleempjes met CSS

Pro web-ontwikkeling
#1

Ik doe mijn uiterste best om de tabellen buiten te gooien (alhouwel ze ook z'n charmes hebben), maar loop toch tegen een paar probleempjes aan. Ik heb de andere topics over CSS hier ook al eens goed bekeken en die hebben me flink geholpen (ben gisteren begonnen aan het eerste XHTML project na jaren tabellen).

Het ontwerp moet er als volgt uit zien:
[img:8d7c461cd0]http://www.3sign.be/klanten/cpac/images/voorbeeld.jpg[/img:8d7c461cd0]

Wat ik tot hiertoe heb is:
http://www.3sign.be/klanten/cpac/
(stylesheet)

Wat zijn nu de problemen:

  • De dunne blauwe lijn onder de tabs wordt gevormd door een figuur die daar in de achtergrond staat. Om de een of andere reden gaat die (rechts) niet tot op het einde.
  • De kadertjes met de links zijn opgemaakt als lijsten. Ik vind de witruimte tussen de ‘title’ en de eerste link te groot. Ik krijg het echter niet kleiner.
  • hetzelfde probleem bij de tekst. De <p> en </p> schijnen plaats in te nemen, en wel te veel naar mijn zin. Is het mogelijk ergens in de CSS te zetten hoeveel plaats ze mogen innemen (boven en onder)?
  • de achtergronden in de kadertjes vullen niet op. Ze vullen enkel het deel waar tekst staat. Het grote kader houd geen rekening met de kleine kadertjes, enkel met de tekst. Ik denk dat het komt omdat de kleine kadertjes ‘absolute’ zijn, maar zie geen andere oplossing.
  • -alles ziet er het beste uit in safari. bij mozilla vallen de achtergrondkleuren weg (wel oude versie).

#2

[quote:bc0e8ac6d0]Wat zijn nu de problemen: - De dunne blauwe lijn onder de tabs wordt gevormd door een figuur die daar in de achtergrond staat. Om de een of andere reden gaat die (rechts) niet tot op het einde. - De kadertjes met de links zijn opgemaakt als lijsten. Ik vind de witruimte tussen de 'title' en de eerste link te groot. Ik krijg het echter niet kleiner.[/quote:bc0e8ac6d0]

lees http://www.alistapart.com/articles/slidingdoors/

[quote:bc0e8ac6d0]- hetzelfde probleem bij de tekst. De <p> en </p> schijnen plaats in te nemen, en wel te veel naar mijn zin. Is het mogelijk ergens in de CSS te zetten hoeveel plaats ze mogen innemen (boven en onder)?[/quote:bc0e8ac6d0]

met padding en margin

[quote:bc0e8ac6d0]- de achtergronden in de kadertjes vullen niet op. Ze vullen enkel het deel waar tekst staat. Het grote kader houd geen rekening met de kleine kadertjes, enkel met de tekst. Ik denk dat het komt omdat de kleine kadertjes ‘absolute’ zijn, maar zie geen andere oplossing.[/quote:bc0e8ac6d0]

gebruik floats

[quote:bc0e8ac6d0]- -alles ziet er het beste uit in safari. bij mozilla vallen de achtergrondkleuren weg (wel oude versie).[/quote:bc0e8ac6d0]

Het is een zooitje in Firefox 0.8. Ik zou firefox downloaden (http://www.mozilla.org) en je CSS file daar goed testen, want er conflicteren een aantal zaken met positionering e.d., of er mist ergens een “;”. Haal de CSS file even door de validator op http://jigsaw.w3.org/css-validator/

#3

thx. Ik ga het eens goed bekijken. Het is idd een mess in firefox. Ik denk dat ik best eens van scratch begin, en beoordeel in firefox.

#4

Haal je HTML ook even door de validator. Zeker met de strict doctype kan een simpel probleem rare effecten hebben.

#5

OK, ik ben van scratch opnieuw begonnen, deze keer veel gestructureerder. Alles werkt (tab heb ik van de tutorial: thx tennapel!)

http://klanten.3sign.be/cpac/
en hier de stylesheet

er zijn nog twee problemen:
-de list in de submenu’s (twee kadertjes links) krijg in met geen stokken dichter bij de kanten. Ik heb al alles (margin, padding) geprobeerd, maar doet allemaal niets.

  • op firefox staan de figuren goed. In safari: mesthoop. Met float:right doet hij het zoals het moet, met float:left (zoals nu) zet hij alles naast elkaar.
    Zou ik een hacl moeten zoekn die geen float toont bij safari? Of is alles goed bij een nieuwere versie van safari (ik werk nog op 10.2).

-de tabs zijn een ramp op IE for MAC. Dat stond ook zo in de tutorial, maar een bijgeleverde hack zou dat moeten oplossen. Die hack doet eigenlijk niets…

Dat is het :slight_smile:
Als ik dat nog even in orde krijg ben ik CSS-maagd af.

#6

[quote:d9f7507a7c="macetaria"]er zijn nog twee problemen: -de list in de submenu's (twee kadertjes links) krijg in met geen stokken dichter bij de kanten. Ik heb al alles (margin, padding) geprobeerd, maar doet allemaal niets.

Als ik dat nog even in orde krijg ben ik CSS-maagd af.[/quote:d9f7507a7c]

Volgens mij moet het [code:1:d9f7507a7c] .menu {
float: left;
margin: 12px 18px 10px 0px;
width: 150px;
white-space: nowrap;
display:block
}
[/code:1:d9f7507a7c] zijn…en dan staat ie wel aan de kant.

#7

Er gebeurt ook iets raars: al ik met de muis over een link in de menu's links ga, dan schuift de hele pagina een paar pixels naar rechts en blijft daar. Ook zie ik een grote horizontale scrollbar (allemaal in Safari 1.0 op 10.2).

Haal eerst eens zowel je HTML pagina, als je CSS pagina door de validators van w3: http://validator.w3.org om te zien of je foutmeldingen krijgt.

#8

[quote:17277fedb8].menu { float: left; margin: 12px 18px 10px 0px; width: 150px; white-space: nowrap; display:block } [/quote:17277fedb8] Dat schuift de menu zelf op, misschien was ik niet helemaal duidelijk. Het gaat over de list in de menukadertjes.

[quote:17277fedb8]Haal eerst eens zowel je HTML pagina, als je CSS pagina door de validators[/quote:17277fedb8]
HTML = prima
CSS = prima nadat ik [behavior:url(“csshover.htc”);] uit de body tag gehaald heb.

#9

[quote:760ab976a7]Ook zie ik een grote horizontale scrollbar (allemaal in Safari 1.0 op 10.2). [/quote:760ab976a7]

dat zal wel te maken hebben met de poging (terecht of onterecht: geen idee) om alle tekst en figuren horizontaal naast elkaar te plaatsen. Als ik de foto’s en hun float:left er uit haal komt alles prima op z’n plaats, maar ik zie niet in wat er mis is met die float: left, en ik heb de foto’s nodig…

Ik heb de twee bovenste menulinks aangepast. Daarmee kan je nu van stymesheet wisselen. Dat raar verschuif-effect heb je dus niet als er geen float:left bij de figuren staat.

@tennapel: hoe staan de figuren en tekst bij jou bij de ‘normale’ stylesheet? +/- op een gezonde plaats, of allemaal naast elkaar?

#10

Het probleem zit in het floaten van de eerste image (profile.jpg). Gezien de structuur van de site is het denk ik de bedoeling dat de text onder die image komt. Wat ik zou doen: eerste image niet laten floaten en er een <br /> achter zetten. Dan gaat het goed in Safari (en Mozilla).

Ik zou in een html-only versie (dus zonder stylesheet, maar alleen een HTML-pagina) dit ook doen, want dat is veel logischer in de opbouw.

#11

http://klanten.3sign.be/cpac/index.php?style=newstyle Is inderdaad een oplossing, merci!

Ik ging er van uit dat als er niet genoeg plaats is naast een item dat float, dat er dan meteen eronder verdergedaan wordt (dat stond ook zo bij W3C). Maar blijkbaar werkt dat niet altijd even goed.

De site wordt toch dynamisch gemaakt, dus ik zal er gewoon een scriptje insteken dat even kijkt hoe breed de foto is, en naargelang dat de style van de foto aanpast, dan is het (foto)probleem helemaal van de baan.

Ik zoek nog even een oplossing voor de andere problemen, en deel ze hier zeker mee als ik ze gevonden heb.

#12

In geval van CSS problemen: lees dit eens: http://www.mezzoblue.com/archives/2004/03/10/css_problems/

Wijze raad en het helpt (echt waar – doe het zelf ook zo)

#13

[quote:9fb0f1fdbe="macetaria"] -de list in de submenu's (twee kadertjes links) krijg in met geen stokken dichter bij de kanten. Ik heb al alles (margin, padding) geprobeerd, maar doet allemaal niets. [/quote:9fb0f1fdbe]

Je hebt een fout in je selectors gemaakt. In je CSS staat: [code:1:9fb0f1fdbe]subMenuList ul {
…
}[/code:1:9fb0f1fdbe]
d.w.z. alle ul’s die [b:9fb0f1fdbe]binnen[/b:9fb0f1fdbe] de class subMenuList vallen.

In je html staat echter [code:1:9fb0f1fdbe]<ul class="subMenuList">[/code:1:9fb0f1fdbe]
d.w.z. een ul [b:9fb0f1fdbe]met de class[/b:9fb0f1fdbe] subMenuList.

De correcte selector in je CSS bestand moet zijn: [code:1:9fb0f1fdbe]
ul.subMenuList {
…
}[/code:1:9fb0f1fdbe]

Daar kan je je helemaal op blind staren en een validator haalt dit er inderdaad niet uit.

#14

[quote:c53d2b78fd="macetaria"]-de tabs zijn een ramp op IE for MAC. Dat stond ook zo in de tutorial, maar een bijgeleverde hack zou dat moeten oplossen. Die hack doet eigenlijk niets... .[/quote:c53d2b78fd]

Je bent vergeten om float:left toe te voegen aan #tabContainer a, anders heeft de hack geen zin :wink:

#15

Ah OK, nu snap ik 'm. Ik kon er niet helemaal aan uit, en nam het gewoon over (maar zelfs niet helemaal dus), en dat is iets dat (ik) beter niet doe.

Tsja, tennapel, je hebt me er helemaal uitgeholpen!

Prima, dan kan ik de boel in een (smarty) template gieten en beginnen aan het echte (content) werk.

#16

[quote:2f3b931a12]In geval van CSS problemen: lees dit eens: http://www.mezzoblue.com/archives/2004/03/10/css_problems/ [/quote:2f3b931a12]

prima tip, en sluit helemaal aan bij mijn manier van werken.
Overal verschrikkelijk lelijke (bij voorkeur roze en felgroene) kadertjes, randen, letters enz. zetten om te zien wat er precies gebeurt. Zo doe ik het althans in flash, en nu dus ook in CSS (/HTML).