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)

Vakken maken met DIV

h4xX0r
17 antwoorden
  • Ik heb een site in frames gemaakt (site is nog lang niet af hoor), om te kijken of het beviel. Maar frames is geen goed html, en tabellen ook niet, dus ik zat te kijken naar DIV. Ik wil mijn pagina hetzelfde als met Frames eruit laten zien, alleen ik heb zitten experimenteren met DIV, en het lukt me niet om 2 vakken naast elkaar te krijgen (het vak met de links, en het main vak). Hier staat de pagina's, sommige dingn werken niet, maar het gaat ff om de layout.

    http://members.lycos.nl/alexanderonline

    Alvast bedankt
  • Het is wel handig als je even je (stylesheet) code laat zien. Anders is het wat lastig tips geven.
  • Paar linkjes over css layout:

    http://www.weballey.net/links/HTML/CSS/Layout/
  • Maak gewoon 3 divs onder elkaar. De bovenste is dan je header, de tweede maak je voor je links en geef je de eigenschap [i:5edef6d210]float: left;[/i:5edef6d210] en de derde is je content. Dat zou moeten werken.

    - Bas
  • [quote:f706091544="gerben"]Paar linkjes over css layout:

    http://www.weballey.net/links/HTML/CSS/Layout/[/quote:f706091544]
    Ouwe spemmert! [img:f706091544]http://squaries.phrea.com/thumbs.gif[/img:f706091544]
  • Laat ik over "frame based layouts" nou net iets geschreven hebben: http://www.annevankesteren.nl/weblog/item/44 (Engels).

    Anne
  • thanxxxx
  • termina8or: goede site!

    maar ik heb toch nog een probleem. als ik ergens een DIV plaats voor de main, dan komt deze altijd boven of onder of tussen de sidebar en header. ik geef jullie ff de code van de index pagina, en dan wil ik graag weten waar die "content" DIV moet staan.

    [b:8948b439e4]index.php:[/b:8948b439e4]

    [code:1:8948b439e4]
    <html>
    <head>
    <title>Welkom op de website van de NBCV</title>
    <link type="text/css" rel="stylesheet" href="styles/default.css">

    </head>

    <BODY>




    <DIV CLASS="header">
    <?PHP
    require("top.html")
    ?>
    </DIV>


    <DIV CLASS="sidebar">
    <?PHP
    require("left.html")
    ?>
    </DIV>


    </body>
    </HTML>
    [/code:1:8948b439e4]

    [b:8948b439e4]default.css (in de map styles):[/b:8948b439e4]

    [code:1:8948b439e4]
    body {
    background-color: #FFFFCC;


    .mailform {
    font-family: "Courier New";
    font-size: 14pt;
    color: #000000;
    }
    .kop {
    font-family: "Lucida Handwriting";
    font-size: 24pt;
    color: #FF0000;
    text-align : center;
    }
    .normaal {
    font-family: Tahoma;
    font-size: 14pt;
    }
    .kopje {
    font-family: Tahoma;
    font-size: 14pt;
    color: #FF0000;
    text-decoration: underline;
    }
    .normaalcursief {
    font-family: Tahoma;
    font-size: 14pt;
    font-style: italic;
    color: #000000;
    }
    .welkom {
    font-family: "Tahoma";
    font-size: 16pt;
    color: #000000;
    }
    [/code:1:8948b439e4]

    wat moet ik in dit stylesheet voor een eigenschappen voor de content DIV opgeven? termin8or zei op haar site iets over een andere stylesheet,m iets met IE wat ik niet snapte sorry :oops: :oops: :oops: :oops:
  • Als je het zo wilt doen moet je dus ook in je stylesheet de klassen .header en .sidebar opnemen. En die klassen kun je vervolgens positioneren met bijv. float of met absolute positionering o.i.d..
  • Wat je moet doen is de html broncode van mij combineren met de stylesheets. Dan zal het werken.

    En bedankt voor het compliment :).

    Anne
  • Aanvullende opmerking: jouw laatste post nog eens doorlezend vraag ik me af of je het principe van het gebruik van css voor de lay-out wel door hebt. Wat bedoel je bijv. met 'de main' en 'de content div'. In je code gebruik je dan weer 'header' en 'sidebar'. Ik vraag me ook af waarom je opeens de php-functie require() gaat gebruiken. Tip: zoek eerst een CSS-tutorial (zie eerdere posts of bijv.http://www.bitstorm.org/edwin/cursus/css.html: ) en stort je eerst daar eens op.
    Succes.
  • Volgens mij is het niet echt noodzakelijk, maar ik vind het wel handig:

    een DIV die wordt gepositioneerd geef ik een ID
    de andere DIV's een class


    wimb
  • ik zit dat stylesheet eens door te kijken wat ik hier heb opgegeven, maar kennelijk heb ik niet het hele stylesheet eringezet :oops:

    [code:1:4dceaf5782]

    }
    body{

    margin:0;
    padding:header-<length> 0 0 sidebar-<length>;
    background-color: #FFFFCC;
    }
    div#sidebar{
    position:absolute;
    top:header-<length>;
    left:0;
    width:sidebar-<length>;
    height:100%;
    }
    div#header{
    position:absolute;
    top:0;
    left:0;
    width:500%;
    height:header-<length>;
    }
    @media screen{
    body>div#sidebar{
    position:fixed;
    }
    body>div#header{
    position:fixed;
    width:100%;
    }
    }
    [/code:1:4dceaf5782]
    zo die hoorden er nog bij. heb ik van anne's site. mm ik zal nog eens goed naar anne's site kijken, hoeze het heeft gedaan sorry.

    Maar dat require is gewoon handig. eigenlijk net als frames. kijk ik kan wel overal de zijkant ingaanvoeren, maar als ik dan iets wijzig moet ik het overal doen. of weten jullie een beter alternatief?
  • Dingen als [i:176cb3dde0]header-<length>[/i:176cb3dde0] moeten natuurlijk vervangen worden voor een waarde ;).

    Anne
  • [quote:27bc7b2d74="Alexander Online"]Maar dat require is gewoon handig. eigenlijk net als frames.[/quote:27bc7b2d74]Zeker is dat handig als je maar wel in de gaten hebt dat het wat anders werkt dan met frames. Je moet nl. niet een complete HTML-pagina 'includen' maar alleen de code die je op die plaats nodig hebt. Maar dat had je misschien zelf al in de gaten?
  • ja dat had ik in de gaten. dat ga ik ook ff veranderen. Sorry Anne, ik was vergeten header lengt enzo te wijzigen :oops:
  • damn het lukt niet. ik heb alles precies gedaan zoals op de site van anne, maar ik krijg nix te staan in de header en sidebar.

Beantwoord deze vraag

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