Achtergrond met kleurverloop verlengen

donderdag 24 juni 2010 16:48

Acties:

0 Henk 'm!

Verwijderd

Topicstarter

.

[ Voor 105% gewijzigd door Verwijderd op 01-11-2023 01:36 ]

donderdag 24 juni 2010 16:49

Acties:

0 Henk 'm!

BCC

Achtergrond kleur op LEFT-div zetten en de achtergrond van de LEFT-div niet repeaten en zijn positie forceren op linksboven.

[ Voor 18% gewijzigd door BCC op 24-06-2010 17:04 ]

Na betaling van een licentievergoeding van €1.000 verkrijgen bedrijven het recht om deze post te gebruiken voor het trainen van artificiële intelligentiesystemen.

donderdag 24 juni 2010 17:13

Acties:

0 Henk 'm!

truegrit

Volgens mij is dit weer een taak voor de faux-columns!

hallo

donderdag 24 juni 2010 18:36

Acties:

0 Henk 'm!

amahusu

taking over the world!

eerst je kleur en dan je plaatje toewijzen aan de div in css

code:

1	.div {background: #000000 url(images/background.jpg); background-repeat:no-repeat;}

en dan idd zoals BCC zegt, no-repeat en een absolute positie.

[ Voor 6% gewijzigd door amahusu op 24-06-2010 18:41 ]

Always Outnumbered, Never Outgunned // Some people feel the rain, others just get wet

vrijdag 25 juni 2010 10:19

Acties:

0 Henk 'm!

Verwijderd

Topicstarter

.

[ Voor 99% gewijzigd door Verwijderd op 01-11-2023 01:36 ]

vrijdag 25 juni 2010 10:24

Acties:

0 Henk 'm!

moozzuzz

Ik zou idd ook voor faux collumns gaan:

code:

<body>
<div id=allesbehalveleft_metpadding200px>
   <div id=header>
      <div id=nav>
      </div>
   </div>
   <div id=footer_metmargin-200px>
   </div>
</div>
<div id=left_absolute>
</div>
</body>

vrijdag 25 juni 2010 10:31

Acties:

0 Henk 'm!

Verwijderd

Topicstarter

.

[ Voor 99% gewijzigd door Verwijderd op 01-11-2023 01:36 ]

vrijdag 25 juni 2010 10:32

Acties:

0 Henk 'm!

Yoram

Misschien je achtergrond gewoon opbouwen en dan met behulp van "z-index" een div over je achtergrond heen zetten waar je content in kwijt kan.

Hallo!

vrijdag 25 juni 2010 10:33

Acties:

0 Henk 'm!

MueR

Admin Tweakers Discord

is niet lief

Laat eens een testcase zien, een work in progress. Ik krijg nu het idee dat je eigenlijk zit te wachten op een werkend voorbeeld.

Anyone who gets in between me and my morning coffee should be insecure.

vrijdag 25 juni 2010 11:16

Acties:

0 Henk 'm!

Verwijderd

Topicstarter

.

[ Voor 101% gewijzigd door Verwijderd op 01-11-2023 01:36 ]

vrijdag 25 juni 2010 11:21

Acties:

0 Henk 'm!

Compizfox

Bait for wenchmarks

Is dit niet alleen mogelijk met Faux Collums? Zover ik weet iig wel.

Of zijn er tegenwoordig nieuwere mogelijkheden in CSS?

Gewoon een heel grote verzameling snoertjes

vrijdag 25 juni 2010 11:25

Acties:

0 Henk 'm!

Verwijderd

Topicstarter

.

[ Voor 149% gewijzigd door Verwijderd op 01-11-2023 01:36 ]

vrijdag 25 juni 2010 11:40

Acties:

0 Henk 'm!

MueR

Admin Tweakers Discord

is niet lief

Doe eens een online testcase.. Zet het bestand online. Dan heb je meteen de css er bij en hoeven we niet zelf te gaan klieren.

Anyone who gets in between me and my morning coffee should be insecure.

vrijdag 25 juni 2010 12:52

Acties:

0 Henk 'm!

Pendaco

Vogon Poetry FTW!

Als ik jou was zou ik die linkerkolom niet helemaal links naast de header laten beginnen. Simpelweg de header naar links doortrekken en de bg afbeelding voor de header aanpassen zodat het visueel nog wel lijkt alsof de linkerkolom links bovenin begint.

Vervolgens start je linkerkolom op gelijke hoogte met je content en kun je het geheel makkelijk dmv faux columns oplossen.

vrijdag 25 juni 2010 12:58

Acties:

0 Henk 'm!

Taurnil

Pendaco schreef op vrijdag 25 juni 2010 @ 12:52:
Als ik jou was zou ik die linkerkolom niet helemaal links naast de header laten beginnen. Simpelweg de header naar links doortrekken en de bg afbeelding voor de header aanpassen zodat het visueel nog wel lijkt alsof de linkerkolom links bovenin begint.

Vervolgens start je linkerkolom op gelijke hoogte met je content en kun je het geheel makkelijk dmv faux columns oplossen.

+1

wat hij zegt

vrijdag 25 juni 2010 13:24

Acties:

0 Henk 'm!

Verwijderd

Topicstarter

.

[ Voor 103% gewijzigd door Verwijderd op 01-11-2023 01:36 ]

vrijdag 25 juni 2010 13:34

Acties:

0 Henk 'm!

Pendaco

Vogon Poetry FTW!

Het enige probleem is die drop-shadow aan de rechterkant van de linkerkolom. De gradient zelf 1px breed maken en horizontaal herhalen, rest (onderkant) uitvullen met egale blauwe kleur. De drop-shadow zou ik aan die content div toevoegen en verticaal laten herhalen (afb 1px hoog).

vrijdag 25 juni 2010 13:46

Acties:

0 Henk 'm!

moozzuzz

Ik heb hier even enkel IE6 en daar ziet de testcase er onbegrijpelijk uit. Ik zie het probleem van de dropshadow niet zo:

faux collumns is dé oplossing voor de "oneindige" dropshadow. Desnoods leg je die in een extra container.

De gradient naar boven toe combineer je desnoods met een background-color: transparent (waar je normaliter voor een kleur zou kiezen indien je geen dropshadow moet combineren).

De combinatie met één div is wellicht niet mogelijk (met mijn kennis :^)

Edit: zoals Pendaco hierboven dus zegt. Je mixt gewoonweg twee "problemen".

[ Voor 7% gewijzigd door moozzuzz op 25-06-2010 13:48 . Reden: te laat :-) ]

vrijdag 25 juni 2010 18:18

Acties:

0 Henk 'm!

SgtCaffran

Andere optie: drop schaduw in de afbeelding voor de text opnemen, dan kan je onderaan wel een egale kleur gebruiken.

edit: overigens heb ik laatst zelf een soortgelijk probleem gehad (en dan nog lastiger). Komt er op neer dat nu met css dit gewoon niet mogelijk is. Ik zou willen dat er een functie in css was die de hoogte gewoon uitrekt tot het maximum.

Gebruik inderdaad faux collumns.

[ Voor 54% gewijzigd door SgtCaffran op 25-06-2010 18:20 ]

zondag 27 juni 2010 00:52

Acties:

0 Henk 'm!

mcDavid

Verwijderd schreef op vrijdag 25 juni 2010 @ 10:19:
Een achtergrondkleur is niet mogelijk. Onderaan is de kleur inderdaad effen maar er zit wel een schaduwrandje aan. Ik moet dus op de 1 of andere manier een 1 pixel hoog plaatje repeaten. Ben dus al een tijd bezig geweest met 2 divs onder elkaar en 1 er boven maar dat liep helemaal in de soep.

beetje offtopic misschien, maar als je de prestaties wat wilt boosten, maak dat plaatje dan lekker 20 pixels hoog ofzo.
Qua grootte maakt het voor een PNG haast niets uit als het herhalende pixels zijn. En vooral Internet Explorer heeft het er echt ontzettend zwaar mee als het een achtergrondplaatje vaak moet herhalen.

zondag 27 juni 2010 10:43

Acties:

0 Henk 'm!

Copyman

Dode muis

Met een ongewijzigde header is het alsnog mogelijk om Faux Columns toe te passen. Al zou ik het logo wel in de header willen hebben staan, niet in de sidebar. Een voorbeeld met de Faux background op #wrapper: http://www.mauricesnip.nl/etc/examples/faux-hasse.html

Zeer belangrijke informatie: Inventaris

zondag 27 juni 2010 11:02

Acties:

0 Henk 'm!

Raynman

Copyman schreef op zondag 27 juni 2010 @ 10:43:
Een voorbeeld met de Faux background op #wrapper: [..]

In de testcase-HTML zie ik heel wat #wrappers. En er mist nog een isgelijkteken bij het alt-attribuut. Misschien eerst ook nog even door een validator halen om eventuele bijwerkingen van zulke foutjes uit te sluiten.

donderdag 1 juli 2010 13:28

Acties: