Toon posts:

Opbouw layout met DIV's

Pagina: 1
Acties:

maandag 19 december 2005 14:22

Acties:

Verwijderd

Topicstarter
Hoi,

Wil een site maken, heb m'n ontwerp:

Afbeeldingslocatie: http://www.jortdevries.nl/layout.jpg

Ik wil dus de achtergrond gerepeat, er komt een weblog systeem in, en dus moet de achtergrond doorlopen naar beneden en opzij afhankelijk van de resolutie van de gebruiker en de grootte van de tabel naar beneden (afhankelijk van het aantal logs in de weblog)

Nou valt het wel mee, en kun je de achtergrond van de tabel laten repeaten naar benenen, MITS je achtergrond overal hetzelfde is! Maar door die roze bloemen kan hij pas repeaten waar de bloemen stoppen!

Wie heeft de juiste manier om deze layout om te zetten in html?? Wil geen inlineframes en scrolbalken in de browser, alleen de scrollbar van de browser zelf...

De zwarte achtergrond repeat zich ook naar buiten, is een patroon dus dat wordt breder zoals bijv. geenstijl.nl ook aan de zijkant heeft...

Ik dacht aan een DIVje met die bloemen als transparante GIF er overheen leggen, maar dan werken de links niet meer die er onder liggen...

Het liefst verwerk ik alles in 1 tabel, maar die achtergrond die moet repeaten vanaf waar de bloemen ophouden krijg ik niet voor elkaar...

[ Voor 7% gewijzigd door Verwijderd op 19-12-2005 14:30 ]

maandag 19 december 2005 14:30

Acties:
  • Rowanov
  • Registratie: Februari 2004
  • Niet online

Rowanov

Kop eens wat anders...

Zoals je al zegt kan je de divs er overheen leggen, maar je kan toch ook alleen de stukken die over je achtergrond heen vallen daar positioneren? Dan heb je het probleem met je links niet meer, maar moet je je plaatjes wel ff croppen.

Edit: Neem eens een kijk op www.csszengarden.com, omdat dergelijke ontwerpen daar redelijk vaak voorbij gekomen zijn.

[ Voor 21% gewijzigd door Rowanov op 19-12-2005 14:31 ]

maandag 19 december 2005 17:29

Acties:

Verwijderd

Hier zou dat toch mee moeten kunnen lukken {faux columns}

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

body{
    text-align: center;
    background: url(fauxbody.jpg);
}
#content {
        background: url(faux.gif) repeat-y center;
    text-align: left;
    width: 614px;
}
p{
    padding: 10px 70px 0 10px;
    font: 0.8em arial; 
}


Zie voorbeeld. Het is wat grof knip en plakwerk in PS, maar als je die bloemen en background op losse layers hebt, moet het aardig te doen zijn zo.

[ Voor 7% gewijzigd door Verwijderd op 19-12-2005 17:33 ]

maandag 19 december 2005 18:32

Acties:

Verwijderd

Topicstarter
Verwijderd schreef op maandag 19 december 2005 @ 17:29:
Hier zou dat toch mee moeten kunnen lukken {faux columns}

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

body{
    text-align: center;
    background: url(fauxbody.jpg);
}
#content {
        background: url(faux.gif) repeat-y center;
    text-align: left;
    width: 614px;
}
p{
    padding: 10px 70px 0 10px;
    font: 0.8em arial; 
}


Zie voorbeeld. Het is wat grof knip en plakwerk in PS, maar als je die bloemen en background op losse layers hebt, moet het aardig te doen zijn zo.
top, thnx dat je ff mee wil denken, maar tis wel de bedoeling dat ie die bloemen maar 1x toont en daarna alleen die roze achtergrond herhaalt... dus die bloemen moeten niet in repeat... Dat gaat in jouw voorbeeld niet op, of kijk ik er over heen?? :)

maandag 19 december 2005 19:23

Acties:

Verwijderd

Verwijderd schreef op maandag 19 december 2005 @ 18:32:
[...]
top, thnx dat je ff mee wil denken, maar tis wel de bedoeling dat ie die bloemen maar 1x toont en daarna alleen die roze achtergrond herhaalt... dus die bloemen moeten niet in repeat... Dat gaat in jouw voorbeeld niet op, of kijk ik er over heen?? :)
even misunderstood, ik zit er even mee te klooien, maar het geeft idd problemen, ook z-indexen gaan hier niet op. Maar goed we laten ons niet kennen.

maandag 19 december 2005 19:35

Acties:

Verwijderd

Topicstarter
Verwijderd schreef op maandag 19 december 2005 @ 19:23:
[...]

even misunderstood, ik zit er even mee te klooien, maar het geeft idd problemen, ook z-indexen gaan hier niet op. Maar goed we laten ons niet kennen.
kzie dat je zit te proberen, waardeer 't ontzettend!!!

Heb ik nou zo'n appart ontwerp gemaakt of?? Valt wel mee toch?

maandag 19 december 2005 20:13

Acties:

Verwijderd

Dan zeg ik: refresh. dit moet hem zijn ;)

Ik vind het wel grappig om wat met css te doen, ik ben meer van het recht-toe recht aan, dus dit is weer even wat anders. Zoals Rowanov aangaf, bij csszengarden zie je vrij veel van dit soort werk, maar ik heb me er eigenlijk niet in verdiept hoe dat in elkaar steekt, zoals ie nu is zal het ook niet geheel correct zijn, maar het werkt in IE & FF.

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
32
33
34
35
36
37
38
39
40
41
42
43

body{
    background: url(fauxbody.jpg);
    font-family: Arial, Helvetica, sans-serif;
    margin: 0;
    padding: 0;
}

body,html{
    height: 100%;
}

p{
    font: 0.8em arial;
    padding: 0px 120px 0 120px;
}

#contentbg{
    background: url(bg.gif) no-repeat top center;
    height: 100%;
    margin: 0;
    min-height: 100%;
    padding: 40px 0 0 0;
    position: relative;
}

#frame{
    background: url(framebg.gif);
    height: 100%;
    left: 50%;
    margin-left: -327px;
    min-height: 100%;
    position: relative;
    width: 654px;
    z-index: 0;
}

#top{
    background: url(top.gif) no-repeat center;
    height: 318px;
    margin: 0;
    padding: 0;
    position: relative;
}


HTML:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

    <div id="frame">
      <div id="top"></div>
      <div id="contentbg">
        <p>
          Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce est.
          Ut varius tortor id dolor. Vivamus turpis lectus, lobortis ut,
          accumsan ac, imperdiet sed, augue. Nullam scelerisque faucibus mi.
          Donec tincidunt metus vitae lorem. Mauris posuere. Nulla feugiat
          lacus vel arcu. Aliquam bibendum neque quis risus. Aliquam
          sollicitudin tempor turpis. Aenean eu dui vulputate magna
          consectetuer imperdiet. Maecenas non ligula id odio scelerisque
          tempus. Nam sem lacus, dignissim id, fringilla nec, mollis at, felis.
        </p>

{etc} 

      </div>
    </div>
  </body>


meerdere background images dus ;)

[ Voor 73% gewijzigd door Verwijderd op 19-12-2005 20:18 ]

maandag 19 december 2005 20:36

Acties:

Verwijderd

Topicstarter
Verwijderd schreef op maandag 19 december 2005 @ 20:13:
Dan zeg ik: refresh. dit moet hem zijn ;)
Jemig, hier was ik zelf nooit opgekomen, hij werkt ook gewoon in Safari... :)

Top, thnx man! Cool dat je ff tijd wou maken, heb 't wel eens anders meegemaakt hier op tweakers ;)

't komt vooral door die bloemen aan de rechterkant die zo ver naar beneden hangen, dat 't zo lastig is... maargoed, eigenwijs he ;)

thnx dude!

[ Voor 66% gewijzigd door Verwijderd op 19-12-2005 20:37 ]

maandag 19 december 2005 20:43

Acties:
  • posttoast
  • Registratie: April 2000
  • Laatst online: 21-04 22:26

posttoast

Je bent er nog niet, en dat komt doordat je height: 100%; gebruikt. Internet Explorer interpreteert dat als "minimale hoogte is 100%, als het hoger is rek ik mee", FireFox denkt: "hoogte is 100%". Die 100% slaat niet op je content, maar op je viewport. Je browserscherm dus.

Om dit verschil in interpretatie op te lossen gebruik je een hack:
Cascading Stylesheet:
1
2

_height: 100%;
min-height: 100%;

Dan zou het wel moeten werken :)

[ Voor 4% gewijzigd door posttoast op 19-12-2005 20:43 ]

omniscale.nl

maandag 19 december 2005 20:46

Acties:

Verwijderd

posttoast schreef op maandag 19 december 2005 @ 20:43:
Je bent er nog niet, en dat komt doordat je height: 100%; gebruikt. Internet Explorer interpreteert dat als "minimale hoogte is 100%, als het hoger is rek ik mee", FireFox denkt: "hoogte is 100%". Die 100% slaat niet op je content, maar op je viewport. Je browserscherm dus.

Om dit verschil in interpretatie op te lossen gebruik je een hack:
Cascading Stylesheet:
1
2

_height: 100%;
min-height: 100%;

Dan zou het wel moeten werken :)
u is correct (had dit ook al gezien, maar hé ik dacht dat we al een heel eind waren ;) ).
dit valt toch ook op te lossen br met een clear:both; dacht ik ?

@jortdevries en om nu het menu erin te hangen, moet je hem dus eigenlijk croppen totaan de blauwe balk, blauwe balk met stukkie bloem aan de zijkanten als background gaan gebruiken in een "nav" div en dan eronder die content div hangen.

[ Voor 16% gewijzigd door Verwijderd op 19-12-2005 20:49 ]

maandag 19 december 2005 20:50

Acties:
  • posttoast
  • Registratie: April 2000
  • Laatst online: 21-04 22:26

posttoast

Verwijderd schreef op maandag 19 december 2005 @ 20:46:
[...]
u is correct (had dit ook al gezien, maar hé ik dacht dat we al een heel eind waren ;) ).
dit valt toch ook op te lossen br met een clear:both; dacht ik ?
Een <br /> met clear: both; ? Die ken ik nog niet, kun je vertellen wat dat is? :)

omniscale.nl

maandag 19 december 2005 21:06

Acties:

Verwijderd

posttoast schreef op maandag 19 december 2005 @ 20:50:
[...]
Een <br /> met clear: both; ? Die ken ik nog niet, kun je vertellen wat dat is? :)
Ik ben abuis want dat werkt niet ;) weet niet meer waarvoor dat diende, had wel iets te maken met het meegroeien van de div dacht ik.

maandag 19 december 2005 22:46

Acties:
  • Daan
  • Registratie: Februari 2000
  • Laatst online: 08:31

Daan

Het clearen doe je bij floats :P

maandag 19 december 2005 22:52

Acties:

Verwijderd

Phreak schreef op maandag 19 december 2005 @ 22:46:
Het clearen doe je bij floats :P
zo was het idd :)

dinsdag 20 december 2005 14:49

Acties:

Verwijderd

Topicstarter
mannen, top!

Heb het nu voor elkaar dat m'n weblog php er in is verwerkt, alleen repeat hij nu niet de achtergrond naar beneden, wat hij eerder wel deed toen er nog geen php in stond...

Werkt die repeat niet als je een externe file include? Lijkt me sterk toch?

zie: www.jortdevries.nl/kelly/index3.php

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

<html>
  <head>

<style type="text/css">

<!--




body{
    background: url(fauxbody.gif);
    font-family: Arial, Helvetica, sans-serif;
    margin: 0;
    padding: 0;
}

body,html{
    height: 100%;
}



#contentbg{ background-image: url(bg.gif);
 background-repeat: no-repeat; 
background-attachment: scroll; 
background-position: center top; 
height: 100%; 
margin: 0; 
min-height: 100%;
 padding: 40px 0 0; 
position: relative; 
visibility: visible; }

#frame{ background-image: url(framebg.gif); 
background-repeat: repeat; 
background-attachment: scroll; 
background-position: 0 0; 
height: 100%; 
left: 50%; 
margin-left: -327px; 
min-height: 100%; 
position: relative; 
width: 654px; 
z-index: 0; 
visibility: visible; }

#top{ background-image: url(top.gif); 
background-repeat: no-repeat; 
background-attachment: scroll;
 background-position: center; 
height: 318px; margin: 0; 
padding: 0; 
position: relative; 
visibility: visible; }
#clear {
    clear: both;
}
-->

</style>
    <title>Kelly in Thailand!</title>
  </head>
  <body>
    <div id="frame">
      <div id="top"></div>
      <div id="contentbg">
           <?php
  include ("index.php"); // maak verbinding
?>
</div>
</body>


          </div>
    </div>
  </body>
</html>


edit: kzie nu in virtual pc dat hij op de PC met IE wel goed draait, op de MAC met FF niet... en Safari ook niet...

[ Voor 12% gewijzigd door Verwijderd op 20-12-2005 14:55 ]

dinsdag 20 december 2005 14:55

Acties:
  • BtM909
  • Registratie: Juni 2000
  • Niet online

BtM909

Watch out Guys...

Kijk zelf eens goed naar je (na PHP gecompilede) source... ;)

Je bent nu op weg geholpen, maar je uitwerking is echt rampzalig. Weet je zelf echt niet waarom het verkeerd is, dan kan je eventueel je source nog door de validator bij W3.org halen.


edit:

http://validator.w3.org/c...s.nl%2Fkelly%2Findex3.php alstu ;)

[ Voor 19% gewijzigd door BtM909 op 20-12-2005 14:56 ]

Ace of Base vs Charli XCX - All That She Boom Claps (RMT) | Clean Bandit vs Galantis - I'd Rather Be You (RMT)
You've moved up on my notch-list. You have 1 notch
I have a black belt in Kung Flu.

dinsdag 20 december 2005 15:41

Acties:

Verwijderd

Topicstarter
BtM909 schreef op dinsdag 20 december 2005 @ 14:55:
Kijk zelf eens goed naar je (na PHP gecompilede) source... ;)

Je bent nu op weg geholpen, maar je uitwerking is echt rampzalig. Weet je zelf echt niet waarom het verkeerd is, dan kan je eventueel je source nog door de validator bij W3.org halen.


edit:

http://validator.w3.org/c...s.nl%2Fkelly%2Findex3.php alstu ;)
ben het met je eens dat ik erg slordig werk, slecht eigenschap van mij, moet wat aan gedaan worden in het komende jaar...

heb nu een nettere code, www.jortdevries.nl/kelly/index5.html

die geeft geen foutmeldingen als ik 'm door de validator haal, maar zoals al eerder gezegd in een bovenstaande post, pakt hij de repeat tot onderaan je browserscherm. Als je dan gaat scrollen zie je dat de repeat stop waar je browserscherm eindigde!

Edit:

Hij werkt nu wel idd met die 'hack' als je gewoon plain text erin plakt, zodra je php include dan hangt ie weer!

[ Voor 7% gewijzigd door Verwijderd op 20-12-2005 16:06 ]

dinsdag 20 december 2005 16:21

Acties:

Verwijderd

Dit kan niet natuurlijk, nu had je eigenlijk nog beter de tables kunnen behouden, je hangt nu een body in een body maw: against all rules ;)

dinsdag 20 december 2005 16:22

Acties:

Verwijderd

Topicstarter
Verwijderd schreef op dinsdag 20 december 2005 @ 16:21:
Dit kan niet natuurlijk, nu had je eigenlijk nog beter de tables kunnen behouden, je hangt nu een body in een body maw: against all rules ;)
dat meen je niet...:)

In IE voor de pc pakt hij 'm anders wel... das dan ook de enige browser die hem pakt...
Pagina: 1
Reageer