Toon posts:

[html/css] Probleem met layout omzetten in html

Pagina: 1
Acties:

dinsdag 10 mei 2005 17:34

Acties:
  • Tommetje
  • Registratie: Februari 2004
  • Laatst online: 19-11-2024

Tommetje

Topicstarter
Ik zit weer met 'n probleempje. Ik heb het beginnetje van een layout, die ik moet slicen. Klik hier.

Vol goede moed ben ik er aan begonnen, tot ik dit had. De randen sluiten niet netjes aan, het werkt niet op lager reso's dan 1024 x 768 en ook niet op hoger. Ook Opera doet het niet goed. ;(

Ben er al met al al een aantal uurtjes mee bezig geweest, zie het niet meer echt zitten (kwa layout dan he :P). Iemand een ideetje of iemand die me een duwtje in de goede richting geeft?

Hoi!

dinsdag 10 mei 2005 17:37

Acties:

Verwijderd

zoek eens op css slants ;) kan je die wiggen nog leuk schaalbaar maken ook

dinsdag 10 mei 2005 17:40

Acties:

Verwijderd

Gewoon als achtergrondplaatje instellen, niks knippen. Tenzij je het een variabele grootte moet geven, dan moet je trucs gaan uithalen.

dinsdag 10 mei 2005 17:54

Acties:
  • André
  • Registratie: Maart 2002
  • Laatst online: 06-05 11:13

André

Analytics dude

Zoals mophor al zei:

code:
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

<html>
  <head>
    <title>Test</title>
    <style type="text/css">
      .left {
        position: absolute;
        left: 0px;
        top: 0px;
        border-right: 65px solid #FFFFFF;
        border-top: 600px solid #FF0000;
      }
      .top {
        position: absolute;
        right: 0px;
        top: 0px;
        border-bottom: 65px solid #FFFFFF;
        border-right: 900px solid #FFFF00;
      }
    </style>
  </head>
  <body>
    <div class="left"></div>
    <div class="top"></div>
  </body>
</html>

dinsdag 10 mei 2005 18:18

Acties:

Verwijderd

Dat vind ik wel zo goor. Als je graphics nodig hebt, mag je gerust plaatjes gebruiken. Zelfs een border van een pixel met een plaatje doen is geen schande.

Je voegt een nietsbetekenend element toe, én je hebt CSS nodig. Als je het puur en alleen met een achtergrondplaatje, en ongemodificeerde HTML kunt doen, dan is dat veel netter. Mijn layouts bestaan steeds vaker uit een klein aantal achtergrondafbeeldingen.

dinsdag 10 mei 2005 18:41

Acties:
  • Tommetje
  • Registratie: Februari 2004
  • Laatst online: 19-11-2024

Tommetje

Topicstarter
Die oplossing met slants gaat wel, mar dan ziet het er zo 'korrelig' uit, helemaal niet meer mooi ;).
Verwijderd schreef op dinsdag 10 mei 2005 @ 17:40:
Gewoon als achtergrondplaatje instellen, niks knippen. Tenzij je het een variabele grootte moet geven, dan moet je trucs gaan uithalen.
Dat is het probleem, je hebt verschillende resoluties en de pagina kan langer of korter zijn..

[ Voor 13% gewijzigd door Tommetje op 10-05-2005 18:42 ]

Hoi!

dinsdag 10 mei 2005 18:59

Acties:

Verwijderd

ik zei het niet voor niets met een knipoog, het is vooral een leuke techniek om naar te kijken en voor een schalabare layout kan het bijzonder praktisch zijn, dan ontkom je er namelijk ook al bijna niet onderuit om extra elementen te gebruiken

met het handig positioneren van een (groot) achtergrondplaatje kom je er overigens ook wel (de achtergrond van de linkerkant lijn je dus rechtsboven uit etc)

dinsdag 10 mei 2005 18:59

Acties:
  • André
  • Registratie: Maart 2002
  • Laatst online: 06-05 11:13

André

Analytics dude

Verwijderd schreef op dinsdag 10 mei 2005 @ 18:18:
Dat vind ik wel zo goor. Als je graphics nodig hebt, mag je gerust plaatjes gebruiken. Zelfs een border van een pixel met een plaatje doen is geen schande.

Je voegt een nietsbetekenend element toe, én je hebt CSS nodig. Als je het puur en alleen met een achtergrondplaatje, en ongemodificeerde HTML kunt doen, dan is dat veel netter. Mijn layouts bestaan steeds vaker uit een klein aantal achtergrondafbeeldingen.
Ben ik helemaal met je eens, maar dat neemt niet weg dat het wel grappig is om een keer te gebruiken :P
Tommetje schreef op dinsdag 10 mei 2005 @ 18:41:
Die oplossing met slants gaat wel, mar dan ziet het er zo 'korrelig' uit, helemaal niet meer mooi ;).
[...]

Dat is het probleem, je hebt verschillende resoluties en de pagina kan langer of korter zijn..
Tja, deze layout leent zich niet echt om makkelijk voor alle resoluties gemaakt te worden. Wat je kunt doen is de layout zo maken dat de vlakken elkaar op 640 en 800 nog raken en dat op 1024 en groter ze elkaar niet meer raken:

code:
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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <title>Test</title>
    <style type="text/css">
      html, body
      {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      
      div.achtergrond {
        position: absolute;
        bottom: 0px;
        left: 0px;  
        height: 100%;
        width: 100%;
      }

      div#bottom {
        background: url("bottom.gif") bottom left no-repeat;
      }
      div#left {
        background: url("left.gif") top left no-repeat;
      }
      div#right {
        background: url("right.gif") bottom right no-repeat;
      }
      div#top {
        background: url("top.gif") top right no-repeat;
      }
      
      h1 {
        margin: 0;
        padding: 25px 0 0;
      }
      
      div#content {
        border: 1px solid #000;
      }
    </style>
  </head>
  <body>
    <div class="achtergrond" id="left"><div>
    <div class="achtergrond" id="right"></div>
    <div class="achtergrond" id="top"></div>
    <div class="achtergrond" id="bottom"></div>
          
    <h1>Test</h1>
    <div id="content">
      <h2>Welkom!</h2>
      <p>Bloeb</p>
      <p>Bloeb</p>
    </div>
  </body>
</html>

Enige wat je dan nog moet doen is de witte gedeeltjes van de plaatjes transparant maken.

dinsdag 10 mei 2005 19:05

Acties:
  • Tommetje
  • Registratie: Februari 2004
  • Laatst online: 19-11-2024

Tommetje

Topicstarter
Die werkt stukken beter dan mijn versie! ;)

Ik ga eens aan de slag met transparant plaatjes. Hartelijk bedankt alvast :)

Hoi!

dinsdag 10 mei 2005 23:42

Acties:
  • drm
  • Registratie: Februari 2001
  • Laatst online: 09-06-2025

drm

f0pc0dert

Cheatah:
Dat vind ik wel zo goor. Als je graphics nodig hebt, mag je gerust plaatjes gebruiken. Zelfs een border van een pixel met een plaatje doen is geen schande.
Dan neem je toch een img i.p.v. een div? :+

Music is the pleasure the human mind experiences from counting without being aware that it is counting
~ Gottfried Leibniz

donderdag 12 mei 2005 18:40

Acties:
  • Tommetje
  • Registratie: Februari 2004
  • Laatst online: 19-11-2024

Tommetje

Topicstarter
Ben ik weer.. Ben al weer een heel stuk verder (jaja, ik kom d'r wel :P).

Nog 3 kleine probleempjes:
  • Ik geef de divs met de 'background'-class een min-height van 100%, maar alleen de eerste div pakt dit op, die andere blijven dus even hoog. :? (In Firefox 1.0.4)
  • In Opera komen er onderaan een paar extra witte pixels, die er helemaal niet horen te zijn. Ik krijg dus een scrollbar, die niet nodig is .. (Opera 7.54).
  • De div#container moet 80px van de onderrand afblijven. Helaas werkt een margin hier op niet goed in Opera en Firefox, dus heb ik het opgelost met een padding op die div, en nog een extra div erin (ranzig), is er een mooiere oplossing hiervoor?
Klik hier voor de pagina

De header moet ik idd nog transparant maken, dat hoor niet zo ;)

edit
Het menublokje staat ook niet goed, als je de pagina voor het eerst bezoek (met Firefox), na een refresh klopt het wel? vaag :?

[ Voor 16% gewijzigd door Tommetje op 12-05-2005 20:04 ]

Hoi!

vrijdag 13 mei 2005 20:51

Acties:
  • Tommetje
  • Registratie: Februari 2004
  • Laatst online: 19-11-2024

Tommetje

Topicstarter
*kickje* O-)

Hoi!

Pagina: 1
Reageer