[CSS] voor dummies - Deel 2 | Digital Corner (DIG)

donderdag 14 april 2005 @ 12:51:07 #51

SuperRembo

Sinds 1998

quote:
Op donderdag 14 april 2005 12:07 schreef SqueaK het volgende:
gewoon de hele inhoud van de site... ik heb dit als container, waar vervolgens 3 cellen in staan:
[..]

in FireFox staat die tabel wel in het midden, maar in IE staats alles links uitgelijnd...ik bedoel dus de text niet maar gewoon de container waar de inhoud in staat

quote:
As we know, Explorer Windows doesn't support margin: auto, so it doesn't center the site horizontally yet. Fortunately it allows us to center blocks by the (incorrect) use of text-align: center.

bron

Je moet dus de container van je #container (dat zal waarschijlijk de body zijn) op text-align: center zetten.

donderdag 14 april 2005 @ 13:27:03 #52

MouseInteractive

Grijze muis

quote:
Op donderdag 14 april 2005 12:51 schreef SuperRembo het volgende:

[..]

[..]

bron

Je moet dus de container van je #container (dat zal waarschijlijk de body zijn) op text-align: center zetten.

En zat dan wel in je andere div's weer de text-align op left, want anders is al je tekst gecentreerd.

Fotoboek

donderdag 14 april 2005 @ 17:01:06 #53

SuperRembo

Sinds 1998

quote:
Op donderdag 14 april 2005 13:27 schreef MouseInteractive het volgende:

[..]

En zat dan wel in je andere div's weer de text-align op left, want anders is al je tekst gecentreerd.

Klopt. Maar dat merk je snel genoeg.
Een text-align: left in #container zou voldoende moeten zijn.

zaterdag 16 april 2005 @ 14:45:42 #54

SqueaK

"Pis nooit tegen de wind

ik heb dit nu:

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>NHome</title>

<style type="text/css">
body {
font: normal 10pt Trebuchet MS, Arial, sans, sans-serif, monospace;
color: black;
margin: auto;
padding: 0px;
background-image: url(images/achtergrond.jpg);
margin: auto;
}
</style>
</head>

Maar hij pakt die font-size niet....die blijft standaard op 12... ook al verander ik het naar bijvoorbeeld 24, hij blijft gewoon hetzelfde...

waar kan dat aan liggen ?

[ Bericht 5% gewijzigd door SqueaK op 16-04-2005 15:03:07 ]

zaterdag 16 april 2005 @ 15:02:08 #55

SuperRembo

Sinds 1998

Opspliten in de losse attributen wil nog wel eens helpen

1
2
3
4
5

body {
   font-family: "Trebuchet MS", Arial, sans-serif;
   font-size: 18pt;
   font-style: normal;
}

dinsdag 19 april 2005 @ 20:12:11 #56

BaggerUser

ModderFokker!

heb een probleem

als content_left meer content krijgt wordt in firefox alleen content_left langer maar content_splitter niet. (en daardoor content_right ook niet)

FireFox

in explorer gebeurd dit wel
alleen werkt inherit voor content_right niet ..
explorer

index.html

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

<!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>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="stylesheet.css" type="text/css" rel="stylesheet" />
</head>

<body>
<center>
  <div id="main">
    <div id="header">
    </div>
    <div id="balk">
    </div>
    <div id="content_splitter">
      <div id="content_left">
     L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br></div>
    <div id="content_right">
   </div>
   </div>
  </div>
</center>
</body>
</html>

stylesheet.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
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84

/* CSS Document */
body
{
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
  margin-top: 0px;
  margin-left: 0px;
  margin-right: 0px;
  margin-bottom: 0px;
  background-color: #000000;
}

#balk
{
  width: 768px;
  height: 20px;
  display: block;
  background-color: #868686;
}

#content_splitter {
  width: 768px;
  min-height: 230px;
  background-color: #C9C9C9;
  display: block;
}
* html #content_splitter {
  height: 230px;
}

#content_left {
  width: 506px;
  min-height: 130px;
  background-color: #FFC9C9;
  display: block;
  float: left;
}

* html #content_left {
  height: 130px;
}

#content_right {
  width: 222px;
  min-height: inherit;
  background-color: #FFC9C9;
  display: block;
  float: right;
}

* html #content_right {
  height: inherit;
}

#main {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  margin:0 auto;
  display: block;
  top: 20px;
  width: 768px;
  min-height: 150px;
  text-align: left;
  border-style:solid;
  border-bottom-color:#FFFFFF;
  border-left-color:#FFFFFF;
  border-right-color:#FFFFFF;
  border-top-color:#FFFFFF;
  border-width:1px;
  background-color: #FFFFFF;
  float: center;
}
* html #main {
  height: 230px;
}

#header
{
  width: 768px;
  height: 178px;
  display: block;
  background-image: url(images/header.gif);
  background-color: #FFD110;
}

De enige echte BaggerUser!
Riemen
fiets kopen

dinsdag 19 april 2005 @ 21:05:10 #57

MouseInteractive

Grijze muis

quote:
Op dinsdag 19 april 2005 20:12 schreef BaggerUser het volgende:
heb een probleem
als content_left meer content krijgt wordt in firefox alleen content_left langer maar content_splitter niet. (en daardoor content_right ook niet)

FireFox
[[url=http://img151.echo.cx/img151/8296/werktniet14mf.th.jpg]afbeelding][/URL]

in explorer gebeurd dit wel
alleen werkt inherit voor content_right niet ..
explorer
[[url=http://img151.echo.cx/img151/862/werktniet27fd.th.jpg]afbeelding][/URL]

index.html
[ code verwijderd ]

stylesheet.css
[ code verwijderd ]

Schijnt erg moeilijk te zijn om dit met CSS te realiseren

Ik kreeg het in ieder geval ook niet voor elkaar met mijn pagina.

Fotoboek

dinsdag 19 april 2005 @ 21:20:31 #58

BaggerUser

ModderFokker!

quote:
Op dinsdag 19 april 2005 21:05 schreef MouseInteractive het volgende:

[..]

Schijnt erg moeilijk te zijn om dit met CSS te realiseren
Ik kreeg het in ieder geval ook niet voor elkaar met mijn pagina.

hoe heb je het opgelost ?

De enige echte BaggerUser!
Riemen
fiets kopen

dinsdag 19 april 2005 @ 21:44:35 #59

SuperRembo

Sinds 1998

Je kan 't oplossen mer een background image. Zie AListApart.

donderdag 28 april 2005 @ 16:23:28 #60

idiotforaliving

Beste mensen, ik heb een probleempje met mn css, ik heb een iframe en de tekst daarvan heb ik een style gegeven maar nu valt mn tekst over de scrollbalk en dat is dus net niet de bedoeling....

quote:
<div>
<iframe scrolling="yes" src="tekst.htm" width="700" height="349" frameborder="0">
</iframe>
</div>

dit staat dus in mn index2.htm

<link href="file:///I|/thinkquest/Thinkquest/css/thinkquest.css" rel="stylesheet" type="text/css">
</head>

<body class="inhoud" "style="margin: 0; padding: 0" width="700" height="349">
Portretfotografie.

dit is wat in mn iframe src staat, tekst.htm

Iemand misschien een idee hoe ik dit op kan lossen?

donderdag 28 april 2005 @ 17:48:21 #61

SuperRembo

Sinds 1998

En wij mogen raden wat er in thinkquest.css staat?

donderdag 28 april 2005 @ 21:26:50 #62

idiotforaliving

quote:
Op donderdag 28 april 2005 17:48 schreef SuperRembo het volgende:
En wij mogen raden wat er in thinkquest.css staat?

quote:
.bannerbg {
background-image: url(../afbeeldingen/banner.gif);
background-repeat: no-repeat;
position: relative;
background-color: #000000;
border: none;
}
.inhoud {
background-image: url(../afbeeldingen/inhoud.gif);
background-repeat: no-repeat;
position: relative;
left: auto;
top: auto;
width: 700px;
height: 350px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 16px;
font-weight: normal;
color: #FFFFFF;
border: none;
background-attachment: fixed;
background-position: 0px 0px;
text-align: left;
text-indent: 3pt;

}
.menu_bg {
background-color: #000000;
}
.inspring {
text-indent: 3pt;
}

sry

donderdag 28 april 2005 @ 22:44:58 #63

Berkery

Fat bastard

Kan je de boel niet even online zetten? Ik zie rode tekst in het screenshot, maar enkel een color: #fff in je stylesheet. Volgens mij hou je iets achter

Ich fälle Bäume und hupf und spring, steck Blumen in die Vas
Ich schlupf in Frauenkleider, und lummel mich in Bars

donderdag 28 april 2005 @ 23:10:19 #64

idiotforaliving

ja man, het is een samenzwering

, ik had de tekst rood gemaakt omdat het anders niet zo duidelijk was

ik kijk morgen wel of ik de site online gooi

vrijdag 29 april 2005 @ 10:03:34 #65

idiotforaliving

OK, kleine update: Ik heb de tekst voor elkaar. Ik heb in het bronbestand van mn iframe een tabel gezet die 670 px breed is ipv 700 en de tekst blijft nu netjes. Nu heb ik echter wel een horizontale scrollbalk die nutteloos is maar wel in beeld blijft

ik heb trouwens een .zip online gezet voor de diehards: http://members.lycos.nl/whitestripe/Thinkquest.zip

vrijdag 29 april 2005 @ 12:00:51 #66

SuperRembo

Sinds 1998

Kolere wat een bende frames.
Waarom al die frames? Wat is er mis met een layout met een paar divjes voor header, menu en content? Dat is zooo veel eenvoudiger.

Het zal wel een IE-bug zijn dat de tekst over de scollbars loopt.

maandag 2 mei 2005 @ 09:40:02 #67

sop

ahum

quote:
Op vrijdag 29 april 2005 12:00 schreef SuperRembo het volgende:
Het zal wel een IE-bug zijn dat de tekst over de scollbars loopt.

Ik denk eerder een FF-probleem. Firefox & scrollbars in frames/div's met overflow werken niet fatsoenlijk.

maandag 2 mei 2005 @ 12:39:29 #68

SuperRembo

Sinds 1998

quote:
Op maandag 2 mei 2005 09:40 schreef sop het volgende:

[..]

Ik denk eerder een FF-probleem. Firefox & scrollbars in frames/div's met overflow werken niet fatsoenlijk.

In IE loopt de tekst over de scrollbars heen, in FF niet. Dan noem ik het een IE-bug.

maandag 2 mei 2005 @ 13:48:32 #69

sop

ahum

quote:
Op maandag 2 mei 2005 12:39 schreef SuperRembo het volgende:

[..]

In IE loopt de tekst over de scrollbars heen, in FF niet. Dan noem ik het een IE-bug.

Ik krijg met de code die de TS heeft aangeleverd nergens problemen. Niet bij IE en niet bij FF.

Net ff dat zipje bekeken. Die CSS die daarin staat lusten de honden geen brood van

de code van tekst.htm zou moeten zijn:

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<link href="../css/thinkquest.css" rel="stylesheet" type="text/css">
</head>

<body class="inhoud">
....hier de body content....
</body>
</html>

en de CSS:

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

.inhoud {
   background-image: url(../afbeeldingen/inhoud.gif);
   background-repeat: no-repeat;
   background-attachment: fixed;
   background-position: 0px 0px;
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 16px;
   font-weight: normal;
   color: #FFFFFF;
   border: none;
   text-align: left;
   text-indent: 3pt;
        margin:0;
        padding:0;
}

Ik heb alle floats en breedte bepalingen weggehaald. Nu ook geen hor. scrollbar meer in FF. Die lelijke fixed table om de content heb ik ook weggehaald.

[ Bericht 37% gewijzigd door sop op 02-05-2005 14:01:27 ]

maandag 2 mei 2005 @ 19:31:27 #70

SuperRembo

Sinds 1998

Testkeesje: http://www.superrembo.com/css/IframeOverflow/.
Bij mij scollt de tekst voor de scrollbars langs met IE (IE6, Win2k).
Valid HTML en CSS.

maandag 2 mei 2005 @ 20:16:51 #71

DionysuZ

Respect my authority!

met scrolling="auto" ipv scrolling="yes" werkt het wel

□ Reality is merely an illusion,albeit a very persistent one-A.Einstein
■ Of ik ben gek of de rest van de wereld.Ik denk zelf de rest van de wereld-Rudeonline
□ The war is not meant to be won.It is meant to be continuous-G.Orwell

maandag 2 mei 2005 @ 20:32:57 #72

SuperRembo

Sinds 1998

position: relative weghalen werkt ook, en/of width en height weg halen.

dinsdag 3 mei 2005 @ 21:21:11 #73

SuperRembo

Sinds 1998

Weet iemand hoe je een pagina 100% hoogte geeft MET een border?

Ik heb hier een uitgekleed voorbeeld staan.
Als er veel content is (meer dan de hoogte van het window), dan ziet het er goed uit.
Maar als er weinig content is (klik op content voor demo), dan heb je zo'n irritante scrollbar

dinsdag 3 mei 2005 @ 23:43:00 #74

DionysuZ

Respect my authority!

ik heb het idee dat het aan de margins ligt. 100% hoogte en dan nog eens de margins erbij zorgt voor een scrollbartje

□ Reality is merely an illusion,albeit a very persistent one-A.Einstein
■ Of ik ben gek of de rest van de wereld.Ik denk zelf de rest van de wereld-Rudeonline
□ The war is not meant to be won.It is meant to be continuous-G.Orwell

woensdag 4 mei 2005 @ 08:21:04 #75

SuperRembo

Sinds 1998

quote:
Op dinsdag 3 mei 2005 23:43 schreef DionysuZ het volgende:
ik heb het idee dat het aan de margins ligt. 100% hoogte en dan nog eens de margins erbij zorgt voor een scrollbartje

Ja dat klopt. Maar hoe los ik dat op?

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

[CSS] voor dummies - Deel 2

» digital corner

» digital corner