8 berichten aan het bekijken - 1 tot 8 (van in totaal 8)
  • Q:
    Inactief
    Anoniem

    CSS schaduw?

    Ik heb een website van 953px breedte, en aan elke kant nog eens 76px met een schaduw.
    het probleem is dat de scrollbalk verschijnt als de schaduw er niet in past.
    Maar de scrollbalk moet pas verschijnen als de website zelf van 953px er niet in past.

    Schaduw is “lshade” en “rshade”

    [code:1:87034e0481]
    * {
    padding:0;
    margin:0;
    }
    body,html {
    font-family:Geneva, Arial, Helvetica, sans-serif;
    height:100%;
    background-color:#330099;
    }
    #container {
    width: 953px;
    margin-left: -472px;
    left: 50%;
    background-color: #FFFFFF;
    position: relative;
    min-height:100%;
    _height:100%;
    }
    #buttons {
    width: 943px;
    height: 72px;
    position: absolute;
    left: 81px;
    top: 23px;
    z-index: 2;
    }
    #logo {
    width: 513px;
    height: 170px;
    position: absolute;
    left: 517px;
    top: 115px;
    z-index: 1;
    }
    #header {
    width: 953px;
    height: 351px;
    position: absolute;
    left: 76px;
    top: 0px;
    }
    #lcolumn {
    width: 200px;
    height: 628px;
    position: absolute;
    left: 76px;
    top: 272px;
    }
    #mcolumn {
    width: 554px;
    height: 549px;
    position: absolute;
    left: 276px;
    top: 351px;
    }
    #rcolumn {
    width: 200px;
    height: 548px;
    position: absolute;
    left: 830px;
    top: 352px;
    }
    #footer {
    width: 953px;
    height: 100px;
    position: absolute;
    left: 76px;
    bottom: 0px;
    }
    #lshade {
    width: -76px;
    height: 1000px;
    position: absolute;
    top:0px;
    }
    #rshade {
    width: -76px;
    height: 1000px;
    position: absolute;
    left: 1028px;
    top: 0px;
    }
    .clear {
    clear: both;
    }
    [/code:1:87034e0481]

    Bijdrager
    sturb

    Wat een methode om schaduwtjes aan de linker En rechter kant te krijgen zeg.

    als je een jpgje maakt van 953px breed met de afloop/schaduw erbij en deze als achtergrond zet van een onderliggende div is het een stuk makkelijker….
    dus:
    [code:1:11a6af47e1]
    <div id=’base’>
    <div id=’container’>
    hier komt je content
    </div>
    </div>
    [/code:1:11a6af47e1]
    en dan de css
    [code:1:11a6af47e1]
    #container {
    width:953px; etc etc
    }
    #base {
    background:url(’path/naar.jpg’) repeat-y center top;
    }
    [/code:1:11a6af47e1]
    succes

    Bijdrager
    rvanheukelum
    ”sturb”

    Wat een methode om schaduwtjes aan de linker En rechter kant te krijgen zeg. Als je een jpgje maakt van 953px breed met de afloop/schaduw erbij en deze als achtergrond zet van een onderliggende div is het een stuk makkelijker….

    .. en onnodig groot. Gewoon de image (ik werk zelf alleen maar met png’s) zo breed maken als de schaduw is, en deze in je stylesheet positioneren ( background-position: 940px 0px ). Dan hou je alleen een kleine afbeelding van de schaduw over … we praten dan over k’s i.p.v. kb’s
    Schaduw :

    Positionering via CSS :

    Bijdrager
    GrizzDesign

    Ik ben het eens met Sturb dat het maken van een 1px hoge afbeelding die zo breed is als de gehele site bij elkaar (953+76+76=)1105px. Dus een afbeelding van 1px * 1105 px formaat.

    Echter, denk ik ook aan het volgende

      [*:6c69abeeca]Is dit de volledige CSS ? En kun je een linkje geven naar de website, want het is mogelijk dat andere factoren ook een rol spelen, en wij kunnen doen met bijvoorbeeld een Web Dev plugin in Firefox zelf non-distructive aan de code draaien en proberen.
      [*:6c69abeeca]Ik denk dat je het juist moet laten zoals het is, betreft de scrollbalken. Hoewel ik je site niet heb gezien lijkt me het wel handig als er wat ruimte om de site heen is zodat het niet direct tegen de kant aan is*
      [/list:u:6c69abeeca]

      * Mocht je toch de scrollbalken niet willen dan moet je bovenstaande vermelde afbeelding als achtergrond zetten op de <body> in de CSS en deze vervolgens “repeat-y” en position “top center”.

      [code:1:6c69abeeca]
      body {
      background-image: url(images/bodybg.png);
      background-position: top center;
      background-repeat: repeat-y;
      }
      [/code:1:6c69abeeca]
      of de Shorthand:
      [code:1:6c69abeeca]
      body {
      background: url(images/bodybg.png) repeat-y top center;
      }
      [/code:1:6c69abeeca]

      Tot slot, nogmaals ik heb de site nog niet gezien dus het is mogelijk dat de breedte variabel is of iets dergelijks, maar ik denk dat 950~1000px wel aan de brede kant is voor een webpagina.


      Grizz

      Bijdrager
      Rub3n

      950 tot 1000px is nog te doen. Als het maar op een 1024*768 scherm te zien is, lijkt het me goed.

      Lager houd ik persoonlijk als webdesigner geen rekening meer mee.

      Bijdrager
      arri

      2 centjes:

      websites ontwerpen op basis van een bepaalde hoeveelheid pixels is geen goed ideetje.
      niet iedereen heeft dezelfe fonts, browser of platform (enz..)

      ga bij web-design uit van allereerst de inhoud en interactie,

      en check deze site eens:

      http://www.webrichtlijnen.nl/

      Bijdrager
      sturb
      ”R_van_Heukelum”
      ”sturb”

      Wat een methode om schaduwtjes aan de linker En rechter kant te krijgen zeg. Als je een jpgje maakt van 953px breed met de afloop/schaduw erbij en deze als achtergrond zet van een onderliggende div is het een stuk makkelijker….

      .. en onnodig groot. Gewoon de image (ik werk zelf alleen maar met png’s) zo breed maken als de schaduw is, en deze in je stylesheet positioneren ( background-position: 940px 0px ). Dan hou je alleen een kleine afbeelding van de schaduw over … we praten dan over k’s i.p.v. kb’s

      Volgens mij hebben we het over hetzelfde, alleen gebruik ik een plaatje van zoals hierboven al gezegd van 1px hoog. Dan zit je ook in de bytes ipv kb’s. En dan gifjes ipv png’s.

      Transparantie in png’s is in IE alleen op te lossen met wat extra scripts -> weer extra kb’s (of heb ik een ontwikkeling gemist?)

      Bijdrager
      rvanheukelum

      Ik bouw mijn sites in Freeway … ik heb dat probleem dus niet. Standaard IE6 en 7 compatible, inclusief de Transparancy-fix. Altijd 100% Valid code en CSS. Vandaar dat ik alleen maar png’s gebruik … mogelijkheden zijn eindeloos.

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

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