[HTML/CSS] Div naast een tabel laten zweven - Softwareontwikkeling

woensdag 12 april 2006 11:57

Acties:

Ik Henk 'm!

Topicstarter

Ik ben bezig met een website.

Nu heb ik een vraagje over het DIV verhaal i.c.m. floating/position absolute/relative.

Ik heb een tabel die bestaat uit 3 rijen boven elkaar.
Hoogte van de rijen:
header: 100px
content: variable aan de inhoud
footer: 25px

Nu wil ik een <div> aan de linkerkant hangen van de content dus:

code:

      | header  |
______|_________|
| div | content |
|_____|         |
      |_________|
      |_footer__|

Nu moet de tabel altijd gecentreerd zijn op de pagina.

Hoe kan zoiets het beste realiseren?
Ik heb nog niet genoeg HTML/CSS kennis om dit met <div> te doen.

Trans-life! :::: "All things change, whether from inside out or the outside in. That is what magic is. And we are magic too."

woensdag 12 april 2006 12:04

Acties:

BtM909

Watch out Guys...

Als je het perse met een tabel wilt doen, zou je de div in je content cel plaatsen en de volgende pseudo-CSS gebruiken:

Cascading Stylesheet:

td#id{
 position: relative;
}

div{
position: absolute;
top:0;
left:-breedte van je div
}

Hoe je een element kan centreren in het midden van je scherm, daar zijn genoeg topics in WEB over geweest. Even zoeken kan geen kwaad

Overigens zou ik je adviseren om toch eens te kijken naar mogelijkheden om GEEN tabel voor layout meer te gebruiken

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.

woensdag 12 april 2006 12:36

Acties:

Zerora

Ik Henk 'm!

Topicstarter

BtM909 schreef op woensdag 12 april 2006 @ 12:04:
Overigens zou ik je adviseren om toch eens te kijken naar mogelijkheden om GEEN tabel voor layout meer te gebruiken

Ik heb al meerdere keren geprobeerd om het met <div> te doen, maar Ik had het constant het probleem dat mijn div samen met de inhoud steeds verkeerd gepositioneerd stond. De ene browser deed het weer wel goed en dan in de andere weer niet. Dat werd ik eigenlijk strontbeu dat ik maar weer terug naar tabellen ben gegaan.

Ik ga nu ff je code uitproberen. thanx

Trans-life! :::: "All things change, whether from inside out or the outside in. That is what magic is. And we are magic too."

woensdag 12 april 2006 12:44

Acties:

mithras

Of je kiest voor alleen div's met deze oplossing: Als je de linker div een "top" attribuut meegeeft die 100px hoog is, zo hoog als je header, komt ie toch ter hoogte van je 2e div

woensdag 12 april 2006 14:56

Acties:

Zerora

Ik Henk 'm!

Topicstarter

BtM909 schreef op woensdag 12 april 2006 @ 12:04:
Als je het perse met een tabel wilt doen, zou je de div in je content cel plaatsen en de volgende pseudo-CSS gebruiken:
Cascading Stylesheet:
1
2
3
4
5
6
7
8
9
td#id{
 position: relative;
}

div{
position: absolute;
top:0;
left:-breedte van je div
}

Ik heb ff zitten vogelen met de code, maar de div wordt niet naast de content cel geplaatst, maar hij blijft linkboven staan. Met left: -85, wat ik nodig heb, wordt de div buiten beeld gezet.
En dat is niet wat ik wil.

Trans-life! :::: "All things change, whether from inside out or the outside in. That is what magic is. And we are magic too."

woensdag 12 april 2006 14:59

Acties:

BasieP

Zerora schreef op woensdag 12 april 2006 @ 14:56:
[...]

Ik heb ff zitten vogelen met de code, maar de div wordt niet naast de content cel geplaatst, maar hij blijft linkboven staan. Met left: -85, wat ik nodig heb, wordt de div buiten beeld gezet.
En dat is niet wat ik wil.

dan ben je vergeten om je td position:relative te zetten, als je dit doet zou het moeten werken nl.

[ Voor 40% gewijzigd door BasieP op 12-04-2006 15:08 ]

This message was sent on 100% recyclable electrons.

woensdag 12 april 2006 16:39

Acties:

Zerora

Ik Henk 'm!

Topicstarter

Ik heb alleen de td#id {position: relative} die BtM909 heeft genoemd gebruikt.
Of moet ergens nog een toevoegen?

IK zal ff mijn code geven:

HTML:

<html>
    <head>
        <title>
            Rakkerzero.net | welkom
        </title>
        <style type="text/css">
            @import "index.css";
        </style>
    </head>
    <body>
        <table align="center" cellspacing="0" cellpadding="0">
            <tr>
                <td class="header">
                    [img]"img/header.jpg">
                </td>
            </tr>
            <tr>
                <td>
                    <div[/img]
                        <a href="">[img]"img/home.gif"></a><br>
                        <a[/img][img]"img/weblog.gif"></a><br>
                        <a[/img][img]"img/portfolio.gif"></a><br>
                        <a[/img][img]"img/downloads.gif"></a><br>
                        <a[/img][img]"img/info.gif"></a>
                    </div>
                    content
                </td>
            </tr>
            <tr>
                <td>footer
                </td>
            </tr>           
        </table>
    </body>
</html[/img]

Cascading Stylesheet:

body
    {
        background-color: #626262;
        background-image: url(img/bgrd.jpg);
        background-repeat: repeat-x;
        background-position: top;
    }
img 
    {
        border: none;
    }
table
    {
        background-color: white;
        width: 450px;
    }
.header
    {
        height: 100px;
        border-left: 1px solid #3F3F3F;
        border-right: 1px solid #3F3F3F;
    }
td#id
    {
        position: relative;
    }
div
    {
        position: absolute;
        top: 0;
        left: 0;
        display: inline;
    }
#menu a
    {
        background-image: url(img/but_off);
        height: 24px;
    }
#menu a:hover
    {
        background-image: url(img/but_on);
    }

Zo ziet het er dan uit in de IE/FF:

Afbeeldingslocatie: http://img119.imageshack.us/img119/6186/menuverkeerd2fn.jpg

Die background van de knopjes moet ik ook nog fixen

Trans-life! :::: "All things change, whether from inside out or the outside in. That is what magic is. And we are magic too."

woensdag 12 april 2006 18:58

Acties:

JHS

Splitting the thaum.

Je moet voor #id natuurlijk wel een relevant id invullen natuurlijk, wat dan ook moet bestaan in je CSS. BtM gaf dan ook al aan dat het pseudo-CSS was..

DM!

donderdag 13 april 2006 10:53

Acties:

Zerora

Ik Henk 'm!

Topicstarter

ik ben ff aan het proberen met dat #id, maar ik geen idee waar dat vandaan moet halen of neerzetten?
IK heb geprobeerd om:

Cascading Stylesheet:

#content
    {
        width: 450px;
        border-left: 1px solid #3F3F3F;
        border-right: 1px solid #3F3F3F;
    }
td#content
    {
        position: relative;
    }
.menuposition
    {
        position: absolute;
        top: 0;
        left: 0;
        display: inline;
    }

aan te maken en in mn html <td id="content"><div class="menuposition"></div></td> neer te zetten, maar dat werkt niet.

Ik zal ff gaan zoeken op google of ik iets erover kan vinden om het duidelijker te maken voor me.
Als iemand het me zo kan vertellen in een duidelijk reply dan hoor je mij niet klagen

EDIT:

Ik heb het werkend nu

Toen ik van div een class maakte in CSS en de div aan de class koppelde in mn HTML werkt ie.
(ik heb het ff in de bovenstaande code gecorrigeerd zoals het nu werkt)

Toch bedankt allemaal

[ Voor 46% gewijzigd door Zerora op 13-04-2006 11:31 ]

Trans-life! :::: "All things change, whether from inside out or the outside in. That is what magic is. And we are magic too."

donderdag 13 april 2006 14:00

Acties:

JHS

Splitting the thaum.

Aangezien een id uniek moet zijn op de hele pagina en voor alle elementen is een constructie #content { } td#content { } natuurlijk incorrect

. Bovendien gebruik je een div, die je vervolgens inline gaat weergeven. Pak dan gelijk span

. Daarnaast heb ik eerlijkgezegd het gevoel dat je maar wat 'probeert'. Ik zou je toch echt willen aanraden de specs te lezen, zowel op het gebied van HTML als CSS

.

DM!

donderdag 13 april 2006 14:07

Acties:

Zerora

Ik Henk 'm!

Topicstarter

@ JHS
Dit soort dingen zijn nieuw voor me, dus is het idd proberen.

---
Ik stuit nu tegen een probleem als gevolg van de bovenstaande code.

Ik kan dat het makkelijkst duidelijk maken d.m.v. een plaatje.

Afbeeldingslocatie: http://img81.imageshack.us/img81/2545/ruimte7st.jpg

Afbeeldingslocatie: http://img81.imageshack.us/img81/2545/ruimte7st.jpg

Met het menu schuift de tekst een stukje op.
Haal ik het menu weg dan staat de tekst wel goed.

Hoe is dit op te lossen??
Google search kon mij geen oplossing bieden (of ik zoek verkeerd

).

[ Voor 9% gewijzigd door Zerora op 13-04-2006 14:09 ]

Trans-life! :::: "All things change, whether from inside out or the outside in. That is what magic is. And we are magic too."

donderdag 13 april 2006 16:23

Acties:

Boelie-Boelie

Je kunt bijv. Aardvark installeren (Firefox-extensie) om te kijken welke elementen de tekst opzij duwen, om vervolgens de betreffende waarden aan te passen.

En verder zou je een hoop info over CSS-gebruik kunnen halen uit online bronnen die ik op het C!T-forum op een rijtje heb gezet.

Cogito ergo dubito

donderdag 13 april 2006 17:10

Acties:

Zerora

Ik Henk 'm!

Topicstarter

Aardvak is ene leuk tooltje, thanks.
Alleen kan ik nog steeds niet achterhalen wat die tekst in de weg zit.

Info over CSS gebruik had ik zelf ook al geneog gevonden.
Alleen kan ik daarin niet vinden wat mijn probleem oplost.

[ Voor 54% gewijzigd door Zerora op 13-04-2006 17:10 ]

Trans-life! :::: "All things change, whether from inside out or the outside in. That is what magic is. And we are magic too."

donderdag 13 april 2006 17:48

Acties:

Rowanov

Kop eens wat anders...

Heb je een goed doctype er boven staan? Dat wil de vercshillen met allerlei rare marges/paddings nog wel eens oplossen.

vrijdag 14 april 2006 00:46

Acties:

Zerora

Ik Henk 'm!

Topicstarter

Ik heb eerlijk gezegd nog nooit met doctypes etc.. gewerkt.
Ik zal er eens wat info over gaan zoeken.

Trans-life! :::: "All things change, whether from inside out or the outside in. That is what magic is. And we are magic too."

vrijdag 14 april 2006 00:50

Acties:

RobIII

Admin Devschuur®

^ Romeinse Ⅲ ja!

Zerora schreef op vrijdag 14 april 2006 @ 00:46:
Ik heb eerlijk gezegd nog nooit met doctypes etc.. gewerkt.
Ik zal er eens wat info over gaan zoeken.

Tipje: http://www.quirksmode.org/

( -> http://www.quirksmode.org/css/quirksmode.html )

[ Voor 10% gewijzigd door RobIII op 14-04-2006 00:50 ]

There are only two hard problems in distributed systems: 2. Exactly-once delivery 1. Guaranteed order of messages 2. Exactly-once delivery.

Je eigen tweaker.me redirect

Over mij

vrijdag 14 april 2006 08:49

Acties:

JHS

Splitting the thaum.

Zie ook: http://hsivonen.iki.fi/doctype/

.

DM!

vrijdag 14 april 2006 23:01

Acties:

Zerora

Ik Henk 'm!

Topicstarter

OK thanx voor de info.
Ik zal er na het weekend mee verder gaan

Trans-life! :::: "All things change, whether from inside out or the outside in. That is what magic is. And we are magic too."