login  Naam:   Wachtwoord: 
Registreer je!
 Forum

Een paar vragen m.b.t CSS opbouw

Offline Aar - 22/04/2008 11:35
Avatar van AarPHP interesse Ik ben bezig geweest met dit en heb nog nooit eerder echt een hele site gebouwd in CSS:

http://www.plaatscode.be/7437/
(heb helaas geen uploadplek)
maar hebben jullie opmerkingen over de CSS opbouw? Ik denk dat het netter kan, en vooral met nadruk op cross-browsers.

tevens heb ik enkele vragen:
- Hoe krijg ik dat menu even lang als die aangrenzende content-box? Als ik die even lang maak gaat de copyright-divje flippen?
- En hoe krijg ik nou die h3.header nou 20 px. groot en groen (alleen bedoeld voor in het header-divje).
php code - Bekijk de code zonder highlighting - Klap code in 
  1. h3.header{ color: green; font-size:20px; }
werkt niet.

ik hoor het nog wel.

Ik hoor jullie reacties.

18 antwoorden

Gesponsorde links
Offline Kr4nKz1n - 22/04/2008 11:42 (laatste wijziging 22/04/2008 11:48)
Avatar van Kr4nKz1n Onbekend Graag een screenshot van de pagina, ik kan niet gelijk zien waarom je copyright-divje flipt

edit
Gebruik i.p.v.
css code - Bekijk de code zonder highlighting - Klap code in 
  1. h1.header

gewoon
css code - Bekijk de code zonder highlighting - Klap code in 
  1. #header h1


Dan verder zie ik
css code - Bekijk de code zonder highlighting - Klap code in 
  1. border-bottom: solid black 1px;


Dat moet OP Z`N MINST zijn
css code - Bekijk de code zonder highlighting - Klap code in 
  1. border-bottom: 1px solid black;

Eerst de grootte dan de stijl en dan de kleur.

Maar beter is
css code - Bekijk de code zonder highlighting - Klap code in 
  1. border-width: 0 0 1px 0;
  2. border-style: solid;
  3. border-color: #000;


#000 mag ook als #000000 of als black

Daarnaast raad ik je aan om tab`s te gebruiken.
Offline Aar - 22/04/2008 11:45 (laatste wijziging 22/04/2008 11:49)
Avatar van Aar PHP interesse Ik zie dat het probleme van het copyright-divje niet meer optredt, maar als ik 300 px. doe, is hij niet even lang dan de content?
Offline Kr4nKz1n - 22/04/2008 11:48 (laatste wijziging 22/04/2008 11:49)
Avatar van Kr4nKz1n Onbekend Zet dan even die h1 en h3 om...
Verder raad ik je aan om een externe stylesheet te gebruiken.

html code - Bekijk de code zonder highlighting - Klap code in 
  1. <link href='style.css' rel='stylesheet' type='text/css'>
Offline Aar - 22/04/2008 11:53 (laatste wijziging 22/04/2008 15:55)
Avatar van Aar PHP interesse Ja, komt later wel. Dit als CSSblock werkt makkelijker om ermee te spelen.

http://www.plaatscode.be/7438/
Dit heb ik nu, maar het menu divje en het copyright divje zijn in IE niet even lang meer? Komt het door iets vaags met die padding in IE?

En jij zegt dit:
border-bottom: 1px solid black;

Werkt mijn oplossing dan niet goed? Of is wat jij zegt gewoon Valid CSS?

Iemand enig idee? In Firefox ziet het er ook niet helemaal jofel uit?
De text Content heeft geen padding aan de linkerkant? en er ontbreekt een border links van de content?

What's wrong?

http://www.clayweb.nl/test/css/
Offline Kr4nKz1n - 22/04/2008 15:58 (laatste wijziging 22/04/2008 15:59)
Avatar van Kr4nKz1n Onbekend Valid CSS en die van jou werkt als het goed is niet goed.

edit
Voor de rest ziet alles er netjes uit, behalve dan dat je padding hebt gebruikt bij de content.
Offline Aar - 22/04/2008 16:05 (laatste wijziging 22/04/2008 16:07)
Avatar van Aar PHP interesse Hoe moet het anders m.b.t de padding?
Ik heb hem gevalideerd, maar de enige fouten zijn de kleuren, en niks over de paddings, hoogstes, plaatsbepalingen etc...
Offline Kr4nKz1n - 22/04/2008 16:12
Avatar van Kr4nKz1n Onbekend De site ziet er verder goed uit hoor.

Wat is je grootste probleem op dit moment dan?
Alle divjes zitten tegen elkaar/naast elkaar/onder elkaar, perfect toch?
Offline Aar - 22/04/2008 16:15 (laatste wijziging 23/04/2008 10:47)
Avatar van Aar PHP interesse Niet  , kijk zelf maar: http://www.clayweb.nl/test/css/.
Welke browser gebruik je dan?

In IE7 loopt de achtergrondkleur niet even ver door, als de content. (padding prob. gok ik?)

En in FF ontbreekt een border, en loopt hij alsnog niet goed door, en is de padding aan de linkerkant er niet in de content.
iemand enig idee?
Ik zit met mijn handen in het haar
Offline zointer - 23/04/2008 12:13 (laatste wijziging 23/04/2008 12:16)
Avatar van zointer HTML gevorderde zet bij #content margin-left:100px;

css code - Bekijk de code zonder highlighting - Klap code in 
  1. #content {
  2. border-left: 1px solid black;
  3. background: lightblue;
  4. height:300px;
  5. padding:10px;
  6. margin-left:100px;
  7. }

Zie je hier 
Offline nielsvdwal - 23/04/2008 12:59
Avatar van nielsvdwal PHP gevorderde geef je menu ander achtergrond kleurtje zodat je beter kan zien dat de achtergrond niet doorloopt.. zo is het bijna niet zichtbaar 
Offline zointer - 23/04/2008 13:54 (laatste wijziging 23/04/2008 13:55)
Avatar van zointer HTML gevorderde
nielsvdwal schreef:
geef je menu ander achtergrond kleurtje zodat je beter kan zien dat de achtergrond niet doorloopt.. zo is het bijna niet zichtbaar 

wat een oplossing 
----------------------------------------------------------------
btw ts je zal op nog een probleem stoten; als je content vult gaat deze over je footer heen en bij gevolg niet rekken.
verander dus bij #content height:300px; naar min-height:300px;

css code - Bekijk de code zonder highlighting - Klap code in 
  1. #content {
  2. border-left: 1px solid black;
  3. background: lightblue;
  4. min-height:300px;
  5. padding:10px;
  6. margin-left:100px;
  7. }
Offline Kr4nKz1n - 23/04/2008 14:01
Avatar van Kr4nKz1n Onbekend
html code - Bekijk de code zonder highlighting - Klap code in 
  1. <br style='clear: both;' />
Offline Aar - 23/04/2008 16:30 (laatste wijziging 23/04/2008 16:33)
Avatar van Aar PHP interesse Ik zal dit eens toevoegen. Maar op welke plaats, en wat houdt dit clear:both precies in? En waarom precies in een <br />?

Zo leer ik niet veel he ;).
----------------------
Citaat:
wat een oplossing

Was denk ik meer bedoeld om het debuggen te vergemakkelijken.
Offline zointer - 23/04/2008 17:23
Avatar van zointer HTML gevorderde
Aar schreef:
Ik zal dit eens toevoegen. Maar op welke plaats, en wat houdt dit clear:both precies in? En waarom precies in een <br />?

Zo leer ik niet veel he ;).
.

Moet je niet doen 
Onderstaande is je probleem opgelost(zie mijn eerdere reacties)
css code - Bekijk de code zonder highlighting - Klap code in 
  1. #content {
  2. border-left: 1px solid black;
  3. background: lightblue;
  4. min-height:300px;
  5. padding:10px;
  6. margin-left:100px;
  7. }
Offline Aar - 23/04/2008 17:33 (laatste wijziging 27/04/2008 21:13)
Avatar van Aar PHP interesse Ok, dat zal ik wel even toevoegen zo.
maar wat is er mis met die clear:both oplossing?

Iemand een idee?
Die margin left, werkt ook niet. Hij blijft niet doorlopen.
http://www.clayweb.nl/test/css
Zowel IE als FF.
Offline barone - 28/04/2008 09:53
Avatar van barone Onbekend clear zorgt ervoor dat je floats gesloten worden en dat je footer dus mooi onderaan komt.
Offline Aar - 06/05/2008 11:00 (laatste wijziging 06/05/2008 11:02)
Avatar van Aar PHP interesse Het is nog steeds niet verholpen? Heeft er iemand een idee?
Waarom is die grijze menubalk niet helemaal evenlang?

Terwijl #content en #menu beide 300 px. zijn :S..
Offline ReneeJ - 06/05/2008 11:48
Avatar van ReneeJ HTML interesse Omdat je content een padding heeft van 10px, dit is boven en beneden.. Als je de content 20px minder hoog maakt klopt het
Gesponsorde links
Dit onderwerp is gesloten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.454s