30 berichten aan het bekijken - 1 tot 30 (van in totaal 32)
  • Q:
    Bijdrager
    DeXoN

    Blog Layout Check

    [size=9:ec317dab24]
    Website Layout – Blog – WIP

    http://www.deviantart.com/view/36612427/

    Dit is een WIP dat waarschijnlijk zal uitgewerkt worden om te dienen als mijn blog. Dus zeg maar eens wat jullie er van vinden en wat ik er nog kan aan verbeteren.

    Thx DeXoN
    [/size:ec317dab24]

    Bijdrager
    wout3r

    Ik heb er eigenlijk niet zoveel op aan te merken, ik ben alleen benieuwd of je het kan realiseren

    Bijdrager
    DeXoN

    Dat zal geen probleem zijn. Enkel de backgrounds die een repeat nodig hebben zal een beetje zoeken zijn maar voor de rest zal het geen probleem zijn. Ik vrees enkel dat de site wel zwaar al worden en dat ik een preloader ga meoten gebruiken.

    Bijdrager
    WouterReyntjens

    echt mooi en clean!
    het maken van de site in xhtml en css mag geen probleem zijn, zeker het groene is heeel makkelijk, neem een rijtje van 3 “sterretjes” en repeat het over x en y
    padding 0 en margin ook

    grtz

    Bijdrager
    DeXoN

    Nja da groene weet ik :D. Maar het is de header en de content box die een klein beetje puzzelwerk gaat vergen.

    Bijdrager
    HSL
    ”DeXoN”

    Ik vrees enkel dat de site wel zwaar al worden en dat ik een preloader ga meoten gebruiken.

    ehm,… een preloader bij een html/css site is niet echt nodig hoor, zo zwaar kan hij niet zijn:-)

    Bijdrager
    WouterReyntjens

    de top is natuurlijk wat anders maar de content box is vrij makkelijk!
    je sliced juist de rand tot aan het wit, (boven onder, links en rechts) en dan is dat probleem ook al uit de weg

    grtz

    Bijdrager
    DeXoN

    @ HS-L
    Welja ik weet het nog niet hoe groot de afbeeldingen zijn. Ik ga eerst de site in een beta stage steken die dan getest wordt. En wanneer mensen dan vinden dat het te ombetant is om zo lang te wachten zal ik er een preloader insteken.

    @ WouterReyntjens
    Bedank maar ik weet dit ook allemaal hoor:D
    Het zal enkel een klein beetje puzzelwerk worden omdat de randen onregelmatig zijn he. Maar dit zal ik wel oplossen hoor :P

    Bijdrager
    WouterReyntjens

    misschien is het makkelijker om de site in flash te maken,

    voor xhtml en css=>
    de top, ik denk dat ik het weet,
    je neemt een licht en een donker streepje,je repeat het op de x
    en maak er een background van

    => dit is gewoon de gele achtergrond als je me begrijpt, de effecten laat je weg

    daarboven zet je een div met de andere effecten

    => je doet de gele achtergrond weg, transparante achtergrond, en je kan het opslaan in png

    grtz
    als je vragen hebt let me know:p

    kheb het niet kunnen laten en ik heb al begonnen:p Klik de top is niet super goed maar ik heb het snel gesliced uit je gifje dus daarom dat de top niet optimaal is, als je het eens wil zien stuur mij dan de psd en dan toon ek eens hoe ik het denk dat het zal lukken

    grtz

    Inactief
    Anoniem

    Ga je er WordPress voor gebruiken?

    Bijdrager
    DeXoN

    @ WouterReyntjens
    Je bent heel erg bedankt hoor maar ik zal dit zelf wel allemaal doen. Wat is er anders leuk aan een website maken hé.

    @ darkleroy
    Nee ik ga Expression Engine gebruiken omdat ik totaal niet overweg kan met wordpress.

    Bijdrager
    Jonnotie

    Wow dat ziet er ongelooflijk goed uit. Alleen het lijkt me inderdaad moeilijk omdat om te zetten naar xhtml en css. Succes er mee!

    Bijdrager
    TijhofGraphics

    Ik denk dat het het beste is om inderdaad dat van WouterReyntjens(dit ongeveer als bsis te gebruiken.
    Om dan in die header een jpeg(of gif of png) met dat logo te centreren zodat het ook in smalle toestand of voor mensen met een kleiner beelscherm altijd in het midden staat.
    En dan vanaf het groene gedeelte een <div> van begin tot eind met in de CSS bijvoorbeeld:
    [code:1:48be67b0c9]
    div.content {
    width: 770px;
    margin: 0px auto;
    text-align: justify;
    border-left: 1px solid #000;
    border-right: 1px solid #000;
    }
    [/code:1:48be67b0c9]

    Bijdrager
    DeXoN

    Zeg voor wat zien jullie mij:?
    Ik wil nu niet cru overkomen maar ik weet dit wel allemaal hoor.
    Maar nu zit ik in een klein putje. Ik heb dus men content box. Daarin moet het menu komen (links) en daarnaast de conent (rechts). Maar dit lukt me niet echt. Weet er iemand dit?

    CSS:
    [code:1:239bb59813]
    /* Body CSS
    ————————- */
    body {
    background: url(images/main/bg_main.jpg) repeat;
    color: #6E685C;
    font-family: Verdana;
    font-size: 9px;
    line-height: 14px;
    margin: 0 0 0 0;
    text-align: center;
    }

    /* Header CSS
    ————————- */
    #header {
    background: url(images/main/bg_header.jpg) repeat-x;
    height: 150px;
    width: 100%;
    border-bottom: 3px solid #E0BD79;
    }

    /* Wide browser windows
    ————————- */
    #wrap {
    width: 650px;
    margin: 0 auto;
    text-align: justify;
    }

    /* Content
    ————————- */
    #content_top {
    margin: 20px 0 0 0;
    width: 650px;
    height: 30px;
    background: url(images/main/bg_content_top.jpg) no-repeat;
    }

    #content {
    background-color: #FCF5EB;
    background: url(images/main/bg_content.jpg) repeat-y;
    padding: 0 20px 0 20px;
    }

    #content_menu {
    width: 150px;
    }

    #content_info {
    width: 500px;
    margin-left: 150px;
    position: relative;
    }
    [/code:1:239bb59813]

    Html
    [code:1:239bb59813]
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
    <title>Dexonia</title>

    <link rel="stylesheet" type="text/css" href="stijlblad.css" />

    </head>

    <body>

    <div id="header" align="center"><img height="150" width="640" alt="header" src="images/main/header.jpg" /></div>

    <div id="wrap">

    <div id="content_top"></div>
    <div id="content">
    <div id="content_menu">
    <img height="23px" width="52px" alt="Menu" src="images/main/menu_menu.jpg" /><br />
    Blog<br />
    Downloads<br />
    Portfolio<br />
    Info<br />
    Contact
    </div>
    <div id="content_info">
    test
    </div>
    </div>

    </div>
    </body>
    </html>
    [/code:1:239bb59813]

    Bijdrager
    MVB

    Bij menu – float: left;
    Bij de content – float: right;

    Dat moet werken lijkt me.
    Er mooie layout!

    Bijdrager
    DeXoN

    nope werkt niet echt:(

    Bijdrager
    MVB

    Ik zie het al, je hebt een margin-left en position: relative erin. Ik denk dat ze er gewoon uit kunnen omdat de floats al duidelijk maken dat het menu en content naast elkaar moeten. Sowieso is position: relative niet logisch omdat de content ten op zichte van het menu nog 150px verder komt te staan.

    Bijdrager
    DeXoN

    nee hoor het werkt gewoon niet:(

    Bijdrager
    MVB

    En als je nou het menu of de content smaller maakt? je hebt 500+150=650 maar daar zitten de paddings nog niet bij in. Heb in dit voorbeeld content_info even 400px gemaakt, kan misschien nog wel iets breder, maar dat mag je dan zelf wel even uitrekenen

    [code:1:05e1faeb57]/* Body CSS

    #content_menu {
    width: 150px;
    float: left;
    }

    #content_info {
    width: 400px;
    float: right;
    }
    [/code:1:05e1faeb57]

    Als het nu nog niet werkt weet ik het ook niet meer :P

    Bijdrager
    hansenonline

    heb even het lekker lelijk gemaakt, maar door de kleuren kan je goed zien hoe het opgebouwd wordt.[code:1:8c7bf22615]/* Body CSS
    ————————- */
    body {
    background: url(images/main/bg_main.jpg) repeat;
    color: #6E685C;
    font-family: Verdana;
    font-size: 9px;
    line-height: 14px;
    margin: 0 0 0 0;
    text-align: center;
    }

    /* Header CSS
    ————————- */
    #header {
    background-color:grey;
    height: 150px;
    width: 100%;
    border-bottom: 3px solid #E0BD79;
    }

    /* Wide browser windows
    ————————- */
    #wrap {
    width: 650px;
    margin: 0 auto;
    text-align: justify;
    }

    /* Content
    ————————- */
    #content_top {
    margin: 20px 0 0 0;
    width: 650px;
    height: 30px;

    background-color: #33FF00;
    }

    #content {

    background-color: red;
    height: 400px;
    width: 650px;
    xpadding: 0 20px 0 20px;
    }

    #content_menu {
    position:relative;
    float:left;
    width: 150px;
    height: 400px;
    background-color:orange;
    }

    #content_info {
    width: 400px;
    height: 400px;
    background-color:#CCFF66;
    xmargin-left: 150px;
    position: relative;
    float:right;
    } /* CSS Document */[/code:1:8c7bf22615]
    mocht je nog een foooter willen, moet je clear:both gebruiken.[code:1:8c7bf22615]/* Body CSS
    ————————- */
    body {
    background: url(images/main/bg_main.jpg) repeat;
    color: #6E685C;
    font-family: Verdana;
    font-size: 9px;
    line-height: 14px;
    margin: 0 0 0 0;
    text-align: center;
    }

    /* Header CSS
    ————————- */
    #header {
    background-color:grey;
    height: 150px;
    width: 100%;
    border-bottom: 3px solid #E0BD79;
    }

    /* Wide browser windows
    ————————- */
    #wrap {
    width: 650px;
    margin: 0 auto;
    text-align: justify;
    }

    /* Content
    ————————- */
    #content_top {
    margin: 20px 0 0 0;
    width: 650px;
    height: 30px;

    background-color: #33FF00;
    }

    #content {

    background-color: red;
    height: 400px;
    width: 650px;
    xpadding: 0 20px 0 20px;
    }

    #content_menu {
    position:relative;
    float:left;
    width: 150px;
    height: 400px;
    background-color:orange;
    }

    #content_info {
    width: 400px;
    height: 400px;
    background-color:#CCFF66;
    xmargin-left: 150px;
    position: relative;
    float:right;
    } /* CSS Document */
    #clear{clear:both;}
    [/code:1:8c7bf22615] en voor je html[code:1:8c7bf22615]
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
    <title>Dexonia</title>

    <link rel="stylesheet" type="text/css" href="stijlblad.css" />

    </head>

    <body>

    <div id="header" align="center"><img height="150" width="640" alt="header" src="images/main/header.jpg" /></div>

    <div id="wrap">

    <div id="content_top"></div>
    <div id="content">
    <div id="content_menu">
    <img height="23px" width="52px" alt="Menu" src="images/main/menu_menu.jpg" /><br />
    Blog<br />
    Downloads<br />
    Portfolio<br />
    Info<br />
    Contact </div>
    <div id="content_info">
    test </div>
    <div id="clear"></div>
    </div>

    </div>
    </body>
    </html> [/code:1:8c7bf22615]
    succes en het ziet er mooi uit, maar moet je voor ee niet betalen?

    Bijdrager
    MVB

    @hansenonline
    Zo zit er toch nog steeds ruimte tussen menu en content? Dat wordt nu rood, ik dacht namelijk dat die margin-left er uit moest??

    Bijdrager
    hansenonline

    ja er zit ruimte tussen, maar als je de maten goed invoert zie je die niet meer, dit was enkel ter illustratie hoe de blokjes opgebouwd worden.

    Bijdrager
    DeXoN

    Bedankt allemaak. De manier van MVB werkte dus wel. Maar het waren de afmetingen die ik moest veranderen.

    Bijdrager
    MVB

    Ok, mooi. Succes verder met de site!

    Bijdrager
    DeXoN

    U P D A T E
    De basis dingen van de index pagina zijn gedaan.
    http://pixiesplace.whateero.com/index.php

    Bijdrager
    WouterReyntjens

    misschien een kleine aanpassing:
    de plaats waar je logo staat, dat zou ik doen met een transparante achtergrond, want nu als je je scherm groter maakt, dan zie je het.

    het is maar een tip

    grtz

    Bijdrager
    martijnG

    @ DeXoN

    De streepjes achtergrond in de header is mooi herhalend, maar de streepjes in je logo sluiten daar niet op aan. Mischien kun je voor je logo een png24 maken zonder de streepjes achtergrond en voledige alpha transparantie.

    Maak daarna een transparante gif aan van 1X1 pixel, en noem hem: blank.gif en sla hem op in de root van je www folder.

    in je css file:
    —-
    [code:1:07e6e1f1e7]
    img
    {
    behavior: url("pngbehavior.htc");
    }
    [/code:1:07e6e1f1e7]

    pngbehavior.htc file:
    [code:1:07e6e1f1e7]
    <public:component>
    <public:attach event="onpropertychange" onevent="propertyChanged()" />
    <script>

    var supported = /MSIE (5.5)|[6789]/.test(navigator.userAgent) && navigator.platform == "Win32";
    var realSrc;
    var blankSrc = "blank.gif";

    if (supported) fixImage();

    function propertyChanged() {
    if (!supported) return;

    var pName = event.propertyName;
    if (pName != "src") return;
    // if not set to blank
    if ( ! new RegExp(blankSrc).test(src))
    fixImage();
    };

    function fixImage() {
    // get src
    var src = element.src;

    // check for real change
    if (src == realSrc) {
    element.src = blankSrc;
    return;
    }

    if ( ! new RegExp(blankSrc).test(src)) {
    // backup old src
    realSrc = src;
    }

    // test for png
    if ( /.png$/.test( realSrc.toLowerCase() ) ) {
    // set blank image
    element.src = blankSrc;
    // set filter
    element.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’" +
    src + "’,sizingMethod=’scale’)";
    }
    else {
    // remove filter
    element.runtimeStyle.filter = "";
    }
    }

    </script>
    </public:component>
    [/code:1:07e6e1f1e7]

    Bijdrager
    WouterReyntjens

    Waarom zou je het zo moeilijk maken voor de transparante png? er is een makkelijk scriptje voor:
    maar een bestandje aan pngfix.js

    [code:1:8527d27b3f]
    var arVersion = navigator.appVersion.split("MSIE")
    var version = parseFloat(arVersion[1])

    if ((version >= 5.5) && (document.body.filters))
    {
    for(var i=0; i<document.images.length; i++)
    {
    var img = document.images[i]
    var imgName = img.src.toUpperCase()
    if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
    {
    var imgID = (img.id) ? "id=’" + img.id + "’ " : ""
    var imgClass = (img.className) ? "class=’" + img.className + "’ " : ""
    var imgTitle = (img.title) ? "title=’" + img.title + "’ " : "title=’" + img.alt + "’ "
    var imgStyle = "display:inline-block;" + img.style.cssText
    if (img.align == "left") imgStyle = "float:left;" + imgStyle
    if (img.align == "right") imgStyle = "float:right;" + imgStyle
    if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle
    var strNewHTML = "<span " + imgID + imgClass + imgTitle
    + " style="" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
    + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
    + "(src=’" + img.src + "’, sizingMethod=’scale’);"></span>"
    img.outerHTML = strNewHTML
    i = i-1
    }
    }
    }
    [/code:1:8527d27b3f]
    En zet dit in je head
    [code:1:8527d27b3f]
    <!–[if lt IE 7.]>
    <script defer type="text/javascript" src="pngfix.js"></script>
    <![endif]–>
    [/code:1:8527d27b3f]

    Ps martijnG opletten voor dubbelposts.

    Bijdrager
    martijnG

    Reden waarom de htc file aangeroepen wordt in een behavior is omdat andere browsers behavior niet begrijpen. Daarnaast is .htc een IE only extensie, vandaar dus .htc en geen .js.

    Reden waarom ik liever de de png behavior aanroep in de css is om rotzooi te voorkomen in de html ( scheiden van opmaak en content )

    Bijdrager
    DeXoN

    Van al hetgeen hierboven versta ik niets. En dat van de header weet ik maar wanneer ik hem transparant maak (gifje) dan bekom je het resultaat totaal niet. Maar ik zal het anders eens proberen met een png.

30 berichten aan het bekijken - 1 tot 30 (van in totaal 32)

Je moet ingelogd zijn om een reactie op dit onderwerp te kunnen geven.