Op deze website gebruiken we cookies om content en advertenties te personaliseren, om functies voor social media te bieden en om ons websiteverkeer te analyseren. Ook delen we informatie over uw gebruik van onze site met onze partners voor social media, adverteren en analyse. Deze partners kunnen deze gegevens combineren met andere informatie die u aan ze heeft verstrekt of die ze hebben verzameld op basis van uw gebruik van hun services. Meer informatie.

Akkoord

Vraag & Antwoord

Webdesign (HTML, CSS, Flash)

CSS - binnen kolom div naar beneden duwen

WimB
18 antwoorden
  • Een vriend van me heeft een nieuwe layout gemaakt voor een website die ik beheer: www.usconcert.nl/new
    Ik zou graag het logo (harpje) dat in de rechterkolom staat altijd beneden in de kolom zien staan, dus ongeacht de hoeveelheid tekst. Nu kan ik wel een footer altijd beneden aan de pagina krijgen maar mbv die techniek krijg ik niet het logo naar beneden. Nu wordt ie mbv margin-top naar beneden geduwt. Kan iemand me verder helpen?
    de CSS

    En verder natuurlijk de vraag: wat vinden jullie ervan? De bestuursleden vonden m ietwat somber, te weinig kleur. Ik denk dat de kracht van de layout de foto bovenin is (of is ie misschien wat te groot?) en de kleur uit die foto moet komen. Als je op de foto klikt komen er (nu mbv Javascript, later wordt aan elke pagina een foto gekoppeld) andere fotos zichtbaar om n idee van andere paginas te krijgen.
  • Je wilt het logo te allen tijde rechtsonderin de kolom? Volgens mij gaat dat niet lukken… Heb de vraag afgelopen jaar ook op het Tweakersforum een paar keer langs zien komen, maar niemand had een bevredigend antwoord (ik was zelf ook benieuwd namelijk).

    Enige dat je misschien kunt doen, is een footer inbouwen met het logo erin aan de rechterkant, maar dan is het logo dus niet naast de tekst, maar er rechtsonder…

    Of een ranzige oplossing met een tabel op 100% height en in de onderste cell een v-align bottom of zoiets :lol:

    Qua kleur zou je de uitstraling misschien wel iets lichter kunnen maken, weet alleen niet hoe. Heb ff een lichter font geprobeerd (Webdeveloper Toolbar), maar dat vond ik op het eerste gezicht ook niet helemaal gelukt (maar dat was slechts de verandering van #999999 in #ccc). Misschien dat de typografietips van Mark Boulton over licht op donker van nut kunnen zijn. Of ff afkijken bij andere licht op donkerwebsites… :wink:
  • Dank voor je reactie. Jammer dat het (nog) niet kan met CSS.
  • Op mijn site www.chinareis.net heb ik links een menu in een div en helemaal beneden nog een menutje dat altijd netjes beneden blijft.
    Dat bodem menu zit in de footer en wordt dan een stukje verplaatst (absolute) naar boven. Zoiets moet hier ook wel kunnen.
    Op Sitepoint forum heb ik pas iets gelezen over dit onderwerp, met een goed werkend voorbeeld, ik kan het helaas (nog) niet terug vinden.
    Toch nog gevonden: sitepoint en het voorbeeld: text at bottom
    wimb
  • Hé ja idd, kan toch wel?

    Heb zelf ff geprobeerd met position: absolute op het plaatje (dat ik in de footer heb gezet) met een negatieve margin, i.c.m. position: relative op de footer. Probleem met de oplossing zoals ik 'm heb, is dat de tekst onder het plaatje komt als de tekst in de kolom met het plaatje langer is dan de andere kolom (met de hoofdtekst).
    Datzelfde probleem is als je de container cleart en het plaatje als background-image aan de bottom van de container positioneert.

    Voor zover ik in kon zien, heeft WimB dat iets anders gedaan (maar ben vandaag iets te lui/moe om het uit te pluizen).. Maar blijkbaar kan het dus wel :D
  • dank voor de link. Dit is inderdaad wat ik zoek. Ik heb zelf al even lopen rommelen maar t wil nog niet helemaal lukken ( www.usconcert.nl/new ). Wanneer ik t doe zoals de tut dan verdwijnt het logo helemaal. Wat blijkt: als je bottom de waarde -100px geeft komt ie langzaam weer in beeld. Een verklaring voor dit gedrag kan ik echter niet vinden.

    @boelieboelie: zou je wat jij hebt uitgehaald online kunnen zetten? Misschien komen we er samen uit.
  • nog een vraag: in IE(6) heeft de rechterkolom een zwarte achtergrond (background van main). In FF is die echter grijs (bacjground van body). Hoe kan dat en hoe los ik t op.

    Mbv een backgroundimage op main heb ik t harpje rechtsonderin weten te krijgen. Dit werkt nu alleen in IE en heeft ws verband met bovenstaand probleem. Zie voor de huidige stand van zaken: www.usconcert.nl/new2
  • De hoogte van de div#main is niet goed in firefox. Probeer eens om er: overflow: auto; bij te zetten.
    wimb
  • dat werkt. Bedankt!

    Zou iemand kunnen kijken of t nu dan allemaal klopt, vooral in hogere resoluties dan 1024x768? Ik heb nu geen monitor tot mn beschikking die meer aankan. www.usconcert.nl/new2
    T harpje rechtsonderin ga ik proberen nog wat naar boven en links te krijgen.
  • Bij mij wel hoor. [IE]
  • in IE kan ik ook wel zien met reschecker.com Het gaat mij om Opera en FF, vooral of de achtergrondkleuren goed zijn.
  • Werkt ook op 1152x864 in Opera 9 en FF 1.5.

    (Ik hoef mijn gepruts dus niet te uploaden?)
  • nou, toch wel graag. Mijn oplossing is niet de mooiste momenteel:
    met background: #000000 93% 95% no-repeat url('_pics/harpje.gif');
    zorg ik dat t harpje niet helemaal rechtsonderin komt te staan. Maar t gaat mis bij de 95%. Bij een korte pagina zal t harpje dichter op de rand staan dan bij een lange pagina. De verschillen zullen met t oog nauwelijks te zien zijn maar toch…
    En ik moet een min-height geven aan de content waarbij dan ook nog een IE-hack moet worden toegepast omdat die dat weer niet snapt ($&#*).
  • Hier is het goed met FF2 opera9 en IE7.
    Je kunt ook het harpje wat groter maken om het wat meer van de kant te krijgen, wat meer leeg er om heen.
    wimb
  • daar heb ik ook aan gedacht maar vind ik nog smeriger. Het plaatje is om de pagina op te leuken en wil ik zo klein mogelijk houden (KB). Daarom wil ik er geen zwarte rand aan toevoegen.
  • gifjes zijn heel goed gecrompimeerd. Als je daar een groot vlak van 1 kleur aan toevoegd wordt de file bijna niet groter. Het harpje is nu 3k, maar heeft 103 unieke kleuren. Als je daar 8 van maakt kun je het plaatje veel groter maken met een kleiner bestand.
    Bovendien worden css plaatjes gecached en maar 1 maal opgehaald.
    wimb
  • 2 kleuren zijn zelfs al voldoende. Ik ga toch nog s nader kijken naar deze oplossing. Dank!
  • O ja, mijn maaksels (echt, het stelt nix voor en werkt zoals gezegd niet 100%):
    - background-position: bottom
    - negatieve margin

Beantwoord deze vraag

Dit is een gearchiveerde pagina. Antwoorden is niet meer mogelijk.