[CSS] voor dummies - deel 6 | Digital Corner (DIG)

zondag 4 maart 2007 @ 13:27:43 #31

super-muffin

quote:
Op zondag 4 maart 2007 09:36 schreef BaggerUser het volgende:
simpel probleem:
[ code verwijderd ]

en css formulier
[ code verwijderd ]

het probleem is zodra er float wordt gebruikt nemen de menu en content div de achtergrond kleur niet meer over van de main div.. en worden ze grijs.. terwijl ze wit moeten blijven..

iemand ?

Je bent sowieso een accolade vergeten aan het einde.

maar je moet dan overflow: auto; aan de parent geven, wat #main is in dit geval

Steam - SC2

zondag 4 maart 2007 @ 14:03:01 #32

BaggerUser

ModderFokker!

quote:
Op zondag 4 maart 2007 13:27 schreef super-muffin het volgende:

[..]

Je bent sowieso een accolade vergeten aan het einde.

maar je moet dan overflow: auto; aan de parent geven, wat #main is in dit geval

de accolade sotnd er wel maar was niet mee gekopieerd per ongeluk

maar overflow: auto; helpt in firefox idd, maar in ie hlpt het nog niet ? wat is de hack daarvoor ?..

De enige echte BaggerUser!
Riemen
fiets kopen

zondag 4 maart 2007 @ 14:28:49 #33

super-muffin

Volgens mij moet je dan een <br /> aan het einde van de #main doen.

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<div id='main'>
   <div id='body'>
      <div id='container'>
         <div id='menu'>menu</div>
         <div id='content'>content</div>
      </div>
   </div>
   <br class="clear" />
</div>

CSS:

.clear {
clear: both; }

Maar dat weet ik niet zeker, ik heb geen IE hier :)

Steam - SC2

zondag 4 maart 2007 @ 14:54:38 #34

BaggerUser

ModderFokker!

quote:
Op zondag 4 maart 2007 14:28 schreef super-muffin het volgende:
Volgens mij moet je dan een <br /> aan het einde van de #main doen.
[ code verwijderd ]

Maar dat weet ik niet zeker, ik heb geen IE hier

gelukt, dankje!

De enige echte BaggerUser!
Riemen
fiets kopen

maandag 5 maart 2007 @ 19:01:36 #35

Coelho

BigGreenEgg

Ik ben wat aan het knutselen met CSS, en hoop dat iemand mij kan helpen. Pagina wordt gecentreerd weergegeven dmv een supercontainer DIV die voor de achtergrond zorgt. Hierin een container die gecentreerd is en een vaste breedte heeft. De container bevat een header en een footer met daartussen 3 kolommen: left, content, right. Positioneren lijkt goed te gaan, bij een meer dan schermvullende content stretcht alles mooi mee, echter wanneer de content maar een kwart pagina bevat, zweeft de footer ergens halverwege het scherm en zie je onderaan nog een stuk achtergrondkleur die ik ook links en rechts van het te centreren blok heb gebruikt.

Ik zou graag willen dat indien content te weinig is, de footer ongeacht content, ongeacht resolutie strak op de onderkant van het venster zit. Het meestretchen moet uiteraard blijven bestaan. Zie hier het belangrijkste deel van mijn code:

HTML:

1
2
3
4
5
6
7
8
9
10
11
12
13

<body>

<div id="supercontainer">
  <div id="container">
    <div id="header"></div>
<div id="left">menu</div>
<div id="right">add</div>
<div id="content">tekst</div>
<div id="footer"></div>
  </div>
</div>

</body>

CSS

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
65
66
67

#supercontainer {
   display:inline;
   top:0px;
   bottom:0px;
   background-color:#4b2f29;
   background-image:url(images/dubbelschaduw.gif);
   background-position:center;
   background-repeat:repeat-y;
   margin:0px auto;
   width:100%;
   height:100%;
}

#container {
   background-color: #fff9cd;
   border: 0px;
   color: #333333;
   margin:0px auto;
   width:770px;
   height:100%;
}

#header {
   background-color: #fff9cd;
   background-image:url(images/header.gif);
   border-bottom: 0px;
   height:125px;
   padding:0px;
}

#left {
   background-color: #fff9cd;
   float: left;
   margin: 0;
   padding: 5px;
   width: 125px;
}

#right {
   background-color: #fff9cd;
   border-color: #a27c65;
   border-style:dashed;
   border-width:1px;
   float: right;
   margin-right:5px;
   margin-top:20px;
   padding: 5px;
   width: 125px;
}

#content {
   border-left: 0;
   border-right: 0;
   margin-left: 140px;
   margin-right: 140px;
   padding:25px;
}

#footer {
   border-top: 1px solid gray;
   clear: both;
   margin:0px auto;
   padding:0px 0px 5px 0px;
   width:770px;
   height:60px;
   text-align:center;
}

Wie heeft de gouden tip?

maandag 5 maart 2007 @ 19:03:36 #36

CraZaay

prettig gestoord

Close to impossible. Er is al genoeg over geschreven her en der, maar ik heb geen enkele versie kunnen vinden die cross-browser precies deed wat 'ie hoorde te doen.

maandag 5 maart 2007 @ 19:25:45 #37

Coelho

BigGreenEgg

quote:
Op maandag 5 maart 2007 19:03 schreef CraZaay het volgende:
Close to impossible. Er is al genoeg over geschreven her en der, maar ik heb geen enkele versie kunnen vinden die cross-browser precies deed wat 'ie hoorde te doen.

shit, dat ga je niet menen... Geen idee hoe het op een andere visueel nette manier op te lossen. Zul je nog zien dat ik dadelijk mijn content moet gaan overvullen met <br> en dat keer 100

Als je een oplossing hebt die IE proof is dan ben ik (half) tevreden, ik heb niet het idee dat de doelgroep van mijn site allerlei exotische browsers gebruikt.

maandag 5 maart 2007 @ 19:42:24 #38

Nevermind

(-_-)

quote:
Op maandag 5 maart 2007 19:01 schreef Coelho het volgende:

Ik zou graag willen dat indien content te weinig is, de footer ongeacht content, ongeacht resolutie strak op de onderkant van het venster zit. Het meestretchen moet uiteraard blijven bestaan. Zie hier het belangrijkste deel van mijn code:

Heb je hier wat aan?
http://www.themaninblue.com/experiment/footerStickAlt/

GTA San Andreas Multiplayer: Las Venturas Playground Doe mee met FOK! Whatpulse en typ FOK! naar de 1e plaats!!

dinsdag 6 maart 2007 @ 22:19:29 #39

BaggerUser

ModderFokker!

ik ben weer eens vastgelopen...
ben bezig met een klein ajax foto boekje maar het css gedeelde doet totaal noiet wat hjet zou moeten doen.. in FF neit en in IE niet.

even ter visualisatie zie: www.mijnnaam.nl
(zie fotoalbum en speel wat met die pijltjes)

de structuur:

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Mijn Naam</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="stylesheet.css" type="text/css" rel="stylesheet" />

<script language='javascript' src='javascript/SubmitOnce.js'></script>
<script language='javascript' src='javascript/clienthint.js'></script>

</head>
<body>

<div id='main'>
   <div id='disclaimer'>
      <a href='http://validator.w3.org/check?uri=referer'>xhtml 1.0</a> | <a href='#'>contact</a>
   </div>
   <br />
   <div id='body'>
      <div id='container'>
         <div id='menu'>
         <br />
            <h4>menu</h4>
            <p>
            <img src='a.gif' alt=''/> 26.02.2007 <a href='http://esperanza-bolivia.com'>Esperanza-Bolivia</a>
            </p>
         </div>
         <div id='content_wrapper'>
            <br />
            <div id='content'>
               <h4>welkom,</h4>
               <p>
                  <a href="#" onClick='showHint("1")'>Fotoalbum</a>
               </p>


            </div>
         </div>
      </div>
   </div>
</div>
<div id='footer'></div>

</body>
</html>

de css file:

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
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95

html, body, form, fieldset, h1, h2, h3, h4, h5, h6, pre, blockquote, ul, ol, dl, address {margin: 0;padding: 0;}
ul,li {list-style-type: none;}

body, textarea, input {background-color: #F5F5F5; color: #000000;font: 11px/18px Arial,Tahoma;}

a:active
{
   color: #0984AE;
   text-decoration: underline;
}
a:hover
{
   color: #0984AE;
   text-decoration: none;
}
a:link
{
   color: #0984AE;
   text-decoration: underline;
}
a
{
   color: #0984AE;
   text-decoration: underline;
}

h4 {
font-size: 15px;
}

#main {
background-color: #ffffff;
width: 100%;
overflow: auto;
}

#disclaimer {
color: #999999;
float: right;
text-align: right;
}

#body {

}

#container {
margin: 0 10px 0 10px;

border-top-width: 1px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;

border-top-style: solid;
border-top-color: #E2E2E2;
}

#menu {
width: 300px;
float: left;
}

#content_wrapper {
min-height: 300px;
float: left;

border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 1px;

border-left-style: solid;
border-left-color: #E2E2E2;
}

* html #content_wrapper {
  height: 300px;
}

#content_wrapper #content {
margin: 0 10px 0 10px;
vertical-align: top;
overflow: hidden;
float: left;
background-color: #0fffff;

}

#footer {
font-size: 5px;
height: 5px;
width: 100%;
background-color: #ECECEC;
}

hoop dat jullie zien waar he taan lgit heb al diverse vage problem gehad net hiermee... opeens scrollbalken... opeens verschuivende divs maar verder dan dit kwam ik niet..

heb de content div een een ander kleurtje gegeven zodat het probleem nog duidelijker wordt.

tevens gaat de content div onder de menu div zitten en makt zich 100% breed terwijl hij er netjes naast zou moeten...

help!!

(ja ik ben wanhopig

)

[ Bericht 1% gewijzigd door iteejer op 27-01-2008 10:02:31 ]

De enige echte BaggerUser!
Riemen
fiets kopen

dinsdag 6 maart 2007 @ 23:27:49 #40

CraZaay

prettig gestoord

En nu ga je ons precies vertellen wat er dan niet is zoals je verwacht? Hier zie ik in FF niets geks namelijks.

woensdag 7 maart 2007 @ 13:16:51 #41

ManInLove

Real wisdom is a rare gift

quote:
Op maandag 5 maart 2007 19:01 schreef Coelho het volgende:
Ik ben wat aan het knutselen met CSS, en hoop dat iemand mij kan helpen. Pagina wordt gecentreerd weergegeven dmv een supercontainer DIV die voor de achtergrond zorgt. Hierin een container die gecentreerd is en een vaste breedte heeft. De container bevat een header en een footer met daartussen 3 kolommen: left, content, right. Positioneren lijkt goed te gaan, bij een meer dan schermvullende content stretcht alles mooi mee, echter wanneer de content maar een kwart pagina bevat, zweeft de footer ergens halverwege het scherm en zie je onderaan nog een stuk achtergrondkleur die ik ook links en rechts van het te centreren blok heb gebruikt.

Ik zou graag willen dat indien content te weinig is, de footer ongeacht content, ongeacht resolutie strak op de onderkant van het venster zit. Het meestretchen moet uiteraard blijven bestaan. Zie hier het belangrijkste deel van mijn code:

HTML:
[ code verwijderd ]

CSS
[ code verwijderd ]

Wie heeft de gouden tip?

Je layout hoeft geen flexibele breedte te hebben, maar een vaste breedte voor de hele site?

Dan zou ik in die supercontainer onder de header en boven de footer nog een tweede subcontainer-divje plaatsen en die relatief tov de supercontainer plaatsen. Zet dan je overige div's absoluut gepositioneerd in die subcontainer en dan kun je de uitlijning helemaal goed plaatsen.

Wat ik op mijn site heb gedaan is deze basishack gebruiken voor de supercontainer, die werkt zowel in IE als in firefox:
http://bluerobot.com/web/css/center1.html

Succes!

woensdag 7 maart 2007 @ 14:29:47 #42

CraZaay

prettig gestoord

quote:
Op woensdag 7 maart 2007 13:16 schreef ManInLove het volgende:

Wat ik op mijn site heb gedaan is deze basishack gebruiken voor de supercontainer, die werkt zowel in IE als in firefox:
[url=http://bluerobot.com/web/css/center1.html

]http://bluerobot.com/web/css/center1.html[/quote][/url]
Ik zie geen hack, alleen normale CSS hoor

Die IE fix heb je niet echt nodig overigens, da's alleen voor IE5.x, "margin: 0 auto" zou afdoende moeten zijn.

zaterdag 10 maart 2007 @ 20:52:09 #43

Geqxon

My god, wat ik mij net toch tegen kwam:

1	<a href="#" onclick="window.location='./reactie.asp'">klik dan hier</a>

Ik zie hier al twee zeer onzinnige punten :P

zaterdag 10 maart 2007 @ 21:51:51 #44

super-muffin

Klik dan hier is helemaal geen goede tekst, voor de rest zie ik niks geks?

Steam - SC2

zaterdag 10 maart 2007 @ 23:17:17 #45

CraZaay

prettig gestoord

Je vraagt je toch af waarom iemand daarvoor javascript gebruikt. Een verwoede poging om zo obtrusive mogelijk te werken

zaterdag 10 maart 2007 @ 23:22:17 #46

Geqxon

En ook heerlijk dat je door dit soort geintjes geen "Copy link" , "Add link to bookmarks" of "Open link in new tab" kan doen, heel de browser interpertation is door de war

Om maar over de engszins perfectionistische punt-slash aan het begin te zwijgen

zondag 11 maart 2007 @ 09:47:44 #47

CraZaay

prettig gestoord

Niet toegankelijk voor zo'n beetje iedere andere user agent

zondag 11 maart 2007 @ 10:29:07 #48

Whizzkith

edit: al gelukt

[ Bericht 34% gewijzigd door Whizzkith op 11-03-2007 10:46:00 ]

zondag 11 maart 2007 @ 15:58:01 #49

Nevermind

(-_-)

http://chillosophy.nl/fok/test.html

Wat moet ik veranderen om het in IE aan de praat te krijgen? Het is helemaal niet van belang dat het andere browsers werkt, maar de browser waar het om gaat trekt zich niet echt veel aan van de boundaries en laat de tekst mooi doorlopen over de hele pagina.

De twee 'panels' waar het wel werkt hebben een height-waarde in de CSS. Dus daar zal het probleem waarschijnlijk zitten. Maar ik weet geen hoogte van de andere twee panels, omdat dat afhankelijk is van de schermgrootte.

GTA San Andreas Multiplayer: Las Venturas Playground Doe mee met FOK! Whatpulse en typ FOK! naar de 1e plaats!!

woensdag 14 maart 2007 @ 15:06:41 #50

veldmuis

Met percentages werken?

Ik heb ook een vraag.
Simpel opbouwtje:
header.png
content.png
footer.png

3 plaatjes die ik als achtergrond wil gebruiken, waarbij content.png in de hoogte uitgerekt moet worden, afhankelijk van de hoeveelheid content die er op dat moment in de pagina gepropt zit.

Ik heb nu een wrapper met 3 containers daarin, en dan de plaatjes als achtergrond in de containers.

Dat werkt allemaal leuk, maar als ik nou een stuk tekst in die middelste container wil gooien komt die echt helemaal tegen de rand aan. Logisch, maar niet netjes. Hoe los je dat op? Nog een divje in het divje dat al in een divje zit, of toch anders?

woensdag 14 maart 2007 @ 15:18:56 #51

CraZaay

prettig gestoord

Padding op die content div?

woensdag 14 maart 2007 @ 15:22:32 #52

veldmuis

Geen idee wat het is, ik ga het eens bekijken!

woensdag 14 maart 2007 @ 21:28:52 #53

veldmuis

Werkte perfect, tnx!

Nog een vraag:
1 regel
2 woorden, warvan het ene links uitgelijnd moet worden, en het andere rechts. Hoe doe je dat?

woensdag 14 maart 2007 @ 21:33:14 #54

Geqxon

quote:
Op woensdag 14 maart 2007 21:28 schreef veldmuis het volgende:
Werkte perfect, tnx!

Nog een vraag:
1 regel
2 woorden, warvan het ene links uitgelijnd moet worden, en het andere rechts. Hoe doe je dat?

Het rechter woord in een span, en een float:right erin?

woensdag 14 maart 2007 @ 23:47:45 #55

CraZaay

prettig gestoord

quote:
Op woensdag 14 maart 2007 21:33 schreef Geqxon het volgende:

[..]

Het rechter woord in een span, en een float:right erin?

Da's inderdaad zo'n beetje de enige optie. Of misschien dat "text-align: justify" op het containing element ook nog werkt, maar da's dan wel min of meer een hack.

Daarnaast is het overigens meestal zo dat in het geval dat je het ene woord links wilt hebben en het andere rechts, deze qua semantiek allebei in een eigen element thuishoren, en je dus al hooks hebt om te floaten.

vrijdag 16 maart 2007 @ 10:56:29 #56

Nevermind

(-_-)

quote:
Op zondag 11 maart 2007 15:58 schreef Nevermind het volgende:
http://chillosophy.nl/fok/test.html

Wat moet ik veranderen om het in IE aan de praat te krijgen? Het is helemaal niet van belang dat het andere browsers werkt, maar de browser waar het om gaat trekt zich niet echt veel aan van de boundaries en laat de tekst mooi doorlopen over de hele pagina.

De twee 'panels' waar het wel werkt hebben een height-waarde in de CSS. Dus daar zal het probleem waarschijnlijk zitten. Maar ik weet geen hoogte van de andere twee panels, omdat dat afhankelijk is van de schermgrootte.

ik ben er nog steeds niet uit. met percentages werken is geen optie. iemand nog?

GTA San Andreas Multiplayer: Las Venturas Playground Doe mee met FOK! Whatpulse en typ FOK! naar de 1e plaats!!

vrijdag 16 maart 2007 @ 17:18:35 #57

veldmuis

Heb ik weer een vraag.

Ik weet dat ik iets met een hover moet hebben, maar lees nu weer iets over dat het niet in IE gaat werken enzo: een menu-achtig iets wat weergegeven wordt als je op de knop klikt.

Is zoiets lastig te realiseren?

vrijdag 16 maart 2007 @ 22:08:14 #58

veldmuis

Iemand die me kan helpen?

zaterdag 17 maart 2007 @ 09:03:19 #59

the_disheaver

Via :visited een hover-menu maken en van de link een random getal maken (zodat je niet als je nogmaals komt de menu uitgeklapt is...

:active zou hiervoor moeten werken, maar werkt niet (het werkt wel: het menu komt na de klik wel zichtbaar, maar gaat direct weer weg...

zaterdag 17 maart 2007 @ 10:43:47 #60

SuperRembo

Sinds 1998

Het punt is dus dat IE alleen :hover ondersteunt op een link, niet op andere elementen. Zie bijv Suckerfish Dropdowns.

Forum Opties
Forumhop:
Hop naar:	(afkorting, bv 'KLB')

[CSS] voor dummies - deel 6

» digital corner

» digital corner