Toon posts:

[CSS/HTML] <div> mooi uitlijnen

Pagina: 1
Acties:

woensdag 9 april 2003 11:52

Acties:

Verwijderd

Topicstarter
Ik heb het volgende stukje code:
HTML:
1
2
3
4
5
6
7
8
9
10
11
12
13
14

<html>

<head>
<title></title>
<base target="inhoud">
<link rel="stylesheet" type="text/css" href="stylesheet1.css">
</head>
<body class="top" topmargin="0" leftmargin="0">
<div class="main">
    <div class="top"><b>titel</b></div>
    <div class="top2">subtitel</div>
</div>
</body>
</html>

met het volgende css-bestandje:
Cascading Stylesheet:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

body.top     { background-color: #EEEEEE;
                    font-family: verdana;
                    color: #000000; 
                    font-size: 12pt; 
                    margin-top: 0pt;}
div.main     { background-image: url('menubg.gif');
                    background-repeat: no-repeat;
                    background-position: left top;}
div.top      { font-size: 18 pt;
                    margin-left: 125px;
                    margin-top: 5px; }
div.top2     { font-size: 13 pt;
                    margin-left: 145px;
                    margin-top: 5px;
                    font-style: italic;}

Maar div.main sluit niet aan aan de bovenzijde van het frame? :?
Ik heb al geprobeert margin-top: 0px toe te voegen aan div.main maar dit helpt niks. Met een tabel is het weg, maar dan zit er een extra regel onder de tabel :( als je dan de tekst selecteert en je muis omlaag haalt schuift het frame weg :(. Weet iemand hoe ik dit kan oplossen? of moet ik er gewoon mee leven.

woensdag 9 april 2003 11:59

Acties:
  • crisp
  • Registratie: Februari 2000
  • Laatst online: 23:06

crisp

Devver

Pixelated

Regel 5 in je css: maak daar eens px van
Verder kan toevoegen van padding-top: 0px; voor je body ook wel eens schelen.
topmargin en leftmargin in je body zijn ook redelijk overbodig als je toch css gebruikt (en daarbij geen standaard attributen)

Intentionally left blank

woensdag 9 april 2003 12:02

Acties:
  • InZane
  • Registratie: Oktober 2000
  • Laatst online: 22:10

InZane

Je body hoef je trouwens ook geen class name mee te geven. Je hebt toch maar 1 body? ;)
Maak er dus maar gewoon 'body {bla bla}' van en haal de class uit je body tag weg.

Verder inderdaad px gebruiken voor het positioneren..

woensdag 9 april 2003 12:05

Acties:

Verwijderd

Topicstarter
Ik heb een frames pagina, met 3 frames, een top, een menu en een hoofd, met een stylesheet.
Volledig Stylesheet.
Cascading Stylesheet:
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

a.menu:link     { color: #ffffff; text-decoration: none; width: 80pt;}
a.menu:visited  { color: #ffffff; text-decoration: none; width: 80pt;}
a.menu:active   { color: #FFFFFF; width: 80pt }
a.menu:hover    { color: #FFFFFF; width: 80pt }
body        { background-color: #FFFFEB;
          font-family: verdana;
          color: #000000;
          font-size: 12pt;}
body.top    { background-color: #EEEEEE;
          font-family: verdana;
          color: #000000;
          font-size: 12pt;
          margin-top: 0px;
          padding-top: 0px;}
body.menu   { background-color: #4D6DA4;
          font-family: verdana;
          color: #000000;
          font-size: 11pt;
          text-align: center;}
table.top       { background-image: url('menubg.gif');
          background-repeat: no-repeat;
          background-position: left top;
          border: 0}
div.main    { margin-top: 0px;
          background-image: url('menubg.gif');
          background-repeat: no-repeat;
          background-position: left top;
          border: 0px;
          padding-top: 0px;}
div.top         { font-size: 18 pt; margin-left: 125px; margin-top: 5px; }
div.top2    { font-size: 13 pt; margin-left: 145px; margin-top: 5px; font-style: italic;}

woensdag 9 april 2003 12:05

Acties:
  • lohost
  • Registratie: Juli 2002
  • Laatst online: 22-08 21:40

lohost

iemand had al localhost :-(

Bovenkant van welk frame?
Waarom heb je een div.top? Levert die niet hoe dan ook problemen op met body.top? Moet de div.top een class zijn of kun je die niet een andere naam geven en als id opvragen?

---People who say it can't be done, should not interrupt those who are doing it.---

woensdag 9 april 2003 12:07

Acties:
  • MAZZA
  • Registratie: Januari 2000
  • Laatst online: 17-08 14:00

MAZZA

Barbie is er weer!

Hoe ziet de pagina met frames eruit? Wat is de dikte van de borders van die frames?

woensdag 9 april 2003 12:08

Acties:

Verwijderd

Topicstarter
Tried, nothing...:'(

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
26
27
28
29
30
31
32
33

<html>

<head>
<title></title>
<link rel="stylesheet" type="text/css" href="stylesheet1.css">
</head>
<frameset framespacing="0" border="0" rows="*" frameborder="0">
  <frameset rows="80,20,*">
    <frame name="top" scrolling="no" noresize target="inhoud" src="top.htm">
    <frame name="menu" src="menu.htm" scrolling="no" noresize target="hoofd">
      <frame name="hoofd" src="hoofd.htm" scrolling="auto" noresize>
    </frameset>
  <noframes>
  <body>

  <p>Op deze pagina worden frames gebruikt, maar uw browser ondersteunt geen
  frames.</p>

  </body>
  </noframes>
  </frameset>
<frameset>
  <noframes>
  <body>

  <p>Op deze pagina worden frames gebruikt, maar uw browser ondersteunt geen
  frames.</p>

  </body>
  </noframes>
</frameset>

</html>

Er staat nog geen titel in omdat het een concept-layout is.
lohost schreef op 09 April 2003 @ 12:05:
Bovenkant van welk frame?
Waarom heb je een div.top? Levert die niet hoe dan ook problemen op met body.top? Moet de div.top een class zijn of kun je die niet een andere naam geven en als id opvragen?
Bovenste frame

[ Voor 132% gewijzigd door Verwijderd op 09-04-2003 12:11 ]

woensdag 9 april 2003 12:10

Acties:
  • InZane
  • Registratie: Oktober 2000
  • Laatst online: 22:10

InZane

Verwijderd schreef op 09 april 2003 @ 12:08:
Tried, nothing...:'(
Laat maar, je was me al voor :)

[ Voor 29% gewijzigd door InZane op 09-04-2003 12:11 ]

woensdag 9 april 2003 12:22

Acties:
  • RM-rf
  • Registratie: September 2000
  • Laatst online: 23:23

RM-rf

1 2 3 4 5 7 6 8 9

het includen van je stylesheet in je frameset-pagina heeft geen zin, je moet de <LINK> werkelijk in elke afzonderlijk ingeladen pagina plaatsen

Intelligente mensen zoeken in tijden van crisis naar oplossingen, Idioten zoeken dan schuldigen

woensdag 9 april 2003 12:27

Acties:

Verwijderd

Topicstarter
Dat heb ik gedaan(zie top-post) hij staat alleen per-ongeluk extra in de index.

woensdag 9 april 2003 12:31

Acties:

Verwijderd

Topicstarter
Als ik de <div class="main"></div> vervang door een tabel is het probleem weg, maar als ik de hoogte van die tabel 80px maak komt er een illegale regel onder de tabel. Dit heeft als resultaat dat de pagina omhoog schuift als je de tekst selecteert. :? :(

woensdag 9 april 2003 12:34

Acties:
  • MAZZA
  • Registratie: Januari 2000
  • Laatst online: 17-08 14:00

MAZZA

Barbie is er weer!

Is je pagina ergens online te vinden? Ik vind het maar een warrig verhaal zo :)

woensdag 9 april 2003 12:41

Acties:

Verwijderd

Topicstarter
Deze pagina nog niet, ik zit momenteel aan een openbare pc.

Op Deze site is in de bovenste frame een tabel geïntegreert, dit werkt goed maar als je die hele frame selecteert kun je zien dat er een regel onder staat, hier werkt het maar als de tabel net zo hoog is als het frame (met een marge van 0) valt deze regel buiten het frame en schuift de pagina als je alles selecteert. Om dit probleem te omzeilen wilde ik een div gebruiken maar die kan ik niet aan de bovenkant van de pagina plakken.

woensdag 9 april 2003 12:43

Acties:

Verwijderd

Topicstarter
Probleem opgelost, ik heb de dic weggegooit en de image op de background van de body geplakt.
Cascading Stylesheet:
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

a.menu:link     { color: #ffffff; text-decoration: none; width: 80pt;}
a.menu:visited  { color: #ffffff; text-decoration: none; width: 80pt;}
a.menu:active   { color: #FFFFFF; width: 80pt }
a.menu:hover    { color: #FFFFFF; width: 80pt }
body        { background-color: #FFFFEB;
          font-family: verdana;
          color: #000000;
          font-size: 12pt;}
body.top    { background-color: #EEEEEE;
              background-image: url('menubg.gif');
          background-repeat: no-repeat;
          background-position: left top;
          font-family: verdana;
          color: #000000;
          font-size: 12pt;
          margin-top: 0px;
          padding-top: 0px;}
body.menu   { background-color: #4D6DA4;
          font-family: verdana;
          color: #000000;
          font-size: 11pt;
          text-align: center;}
table.top       { background-image: url('menubg.gif');
          background-repeat: no-repeat;
          background-position: left top;
          border: 0}
div.top1        { font-size: 18 pt; margin-left: 125px; margin-top: 5px; }
div.top2    { font-size: 13 pt; margin-left: 145px; margin-top: 5px; font-style: italic;}

woensdag 9 april 2003 14:29

Acties:

Verwijderd

Je kunt trouwens beter H1, H2, H3, ... tags gebruiken voor koppen en subkoppen.
Pagina: 1
Reageer