2 Design vragen

Door Thomas op 04-03-2008 20:36

456 views

Okee ik ben bezig met een nieuwe site, volledig met div's. Probleem is dat ik altijd in tabellen heb gewerkt, en ik daar binnen 2 tellen een website heb en weet hoe het moet. Maar met divs niet.

Vraag 1:
Ik heb een midden deel 850px breed. En aan de linker kant moet een ander achtergrond plaatje komen dan aan de rechterkant. Ze moeten ook allebei automatisch even breed worden. Allebei moeten ze op repeat x staan. Maar het lukt me niet, weet iemand hoe ik dat voor elkaar kan krijgen?

Vraag 2:
Op de volgende site: http://3drockz.com/ heb je een menu boven in wat blijft staan als de site gaat scrollen. Ik heb wel floating menu's gevonden, maar die haperen bij het scroller. Ik zou graag zo menu willen hebben wat bovenin blijft. Maar ik weet niet hoe het moet. Iemand een idee?

W Wouter K

04-03-2008 20:40

In die site overlapt dus een div tijdens het scrollen maar kan je niet direct een antwoord uit men duim zuigen.

Broncode bekijken ...

/*
** Tab navigation
*/
ul.primary {
  border-collapse: collapse;
  padding: 0 0 0 1em;
  white-space: nowrap;
  list-style: none;
  margin: 5px;
  height: auto;
  line-height: normal;
  border-bottom: 1px solid #bbb;
}
ul.primary li {
  display: inline;
}
ul.primary li a {
  background-color: #ddd;
  border-color: #bbb;
  border-width: 1px;
  border-style: solid solid none solid;
  height: auto;
  margin-right: 0.5em;
  padding: 0 1em;
  text-decoration: none;
}
ul.primary li.active a {
  background-color: #fff;
  border: 1px solid #bbb;
  border-bottom: #fff 1px solid;
}
ul.primary li a:hover {
  background-color: #eee;
  border-color: #ccc;
  border-bottom-color: #eee;
}
ul.secondary {
  border-bottom: 1px solid #bbb;
  padding: 0.5em 1em;
  margin: 5px;
}
ul.secondary li {
  display: inline;
  padding: 0 1em;
  border-right: 1px solid #ccc;
}
ul.secondary a {
  padding: 0;
  text-decoration: none;
}
ul.secondary a.active {
  border-bottom: 4px solid #999;
}

Ik gok op dit

T Thomas

04-03-2008 20:42

Ja ik ben de bron aan het bekijken met Firebug en zie idd dat het ook div's zijn. Maar ik heb verder geen idee hoe die werkt, maar bedankt iig dat je bevestigd dat het een div is.

R Robert Deiman

04-03-2008 20:43

Vraag1:
Het middendeel van 850px kan je centreren door margin:0px auto; te gebruiken in je css voor die div.

Vraag2:

Zie:cssplay

Of mooier, met scrollbalk voor de content:
Cssplay2

En zelfde verhaal met meerdere kolommen:
Cssplay3

T Thomas

04-03-2008 20:53

Dankje Robert, heb op cssplay gevonden hoe het moet!

Maar wie kan me helpen met hoe ik me div;s moet instellen zodat mijn layout werkt?

W Wouter K

04-03-2008 21:18

Wat heb je al ?.
In dit geval kan je mss met procenten werken ?
grote container verdelen in 3 stukken (in jouw voorbeeld).
Links -> 50 %
Midden -> 850 px;
rechts -> 50 %

Ik gok op dat ?

T Thomas

04-03-2008 21:32

Ah okee dat kan ik idd wel eens proberen, dankje! Ben nog echt een n00b met div dus het is veel proberen enzo.

D Daan

04-03-2008 21:36

Krijg je dan niet 100% + 850 px ?
Misschien twee divs op achtergrond van 50% absoluut positioneren en in het midden een div van 850px breed eroverheen..

Succes met proberen ;)

Reageren

Inloggen om te reageren