Gradient border aan weerkanten van layout - Softwareontwikkeling

vrijdag 4 januari 2008 16:38

Acties:

Topicstarter

Hallo,

Ik heb al wat afgezocht op google en hier op het forum maar ik kom niet echt tot een duidelijk antwoord.
Het gaat om het volgende, ik wil een website gaan maken en nu zag ik dat je soms in de ontwerpen een gradient overloop hebt aan weerskanten van de website. Zie link voor een afbeelding
http://www.scriptfreakz.com/chatbe/profiel(met).jpg

Nu is mijn vraag, hoe maak ik zo iets? en als de website langer wordt door de inhoud dat de onderste overloop ook mee gaat naar benenden? Ik werk in m'n layout met div elementen dus hoe ga ik dit verwezelijke? Op de website van microsoft hebben ze ook zo iets maar door dat de bron code on-overzichtelijk kan ik het er niet uit halen hoe ze het doen.

Een website met een tutorail is ook goed, en dan zit ik nog met het volgende. Mijn website wordt variabel in de breedte dus hij moet ook mee schuiven aan beide kanten. Mijn layout staat gecentreed en is minimaal 700px breed en max 1200px breed. Daar tussen in moet die ook goed weergeven worden.

Hoe moet ik dit aanpakken?

Met vriendelijke groet,
Robbert van den Berg

edit: Het gaat om de gradient van 1px de witte aan de boven en onderkant daar tussen in is die weg...

[ Voor 4% gewijzigd door Disksoft op 04-01-2008 16:49 ]

vrijdag 4 januari 2008 16:49

Acties:

Bozozo

Your ad here?

Gewoon een hele lange 1px brede afbeelding op de achtergrond zetten en horizontaal tilen.
Ervanuitgaande dat je de gradient bovenaan wilt laten beginnen moet je die zo noteren:
div#ditisdeidvandesitecontainerdiv {
background: #kleur2 url("gradientvankleur1naarkleur2.gif") repeat-x top left;
}
waarbij #kleur2 de hexadecimale kleurencode is van kleur2 in je gradient.

Als je bij microsoft rechts klikt op de achtergrond gradient en "achtergrond afbeelding bekijken" klikt, dan zie je zo'n 1px afbeelding.

TabCinema : NiftySplit

vrijdag 4 januari 2008 16:55

Acties:

Disksoft

Topicstarter

Ja maar hij moet ook mee met de breedte van de website, Hij heeft geen vaste breedte.
Ik wil hem eigenlijk zo als in de afbeelding en niet dat die hem nog langer gaat uitrekken als de site langer word. De gradient moet de zelfde lengte blijven.

vrijdag 4 januari 2008 16:58

Acties:

Bozozo

Your ad here?

Dan moet je zogeheten wrappers gebruiken.

<div id="wrapper">
<div>mijncontent bablabla</div>
</div>

Door nou die wrapper left en right padding te geven en een achtergrond zoals ik net schreef, krijg je het effect wat jij volgens mij wilt.

TabCinema : NiftySplit

vrijdag 4 januari 2008 17:32

Acties:

Disksoft

Topicstarter

Zou je me kunnen helpen ik heb nu dit als html (dit is nog de basis)
Ik maar zelf wel de afbeeldingen (logisch) maar kan je hier bijvoorbeeld het zo maken dat ik het effect kan bereiken? Door middel van plaats_hier_gradient_header.jpg en plaats_hier_gradient_footer.jpg

Als je me daar mee zou kunnen helpen zou ik het echt top vinden.

code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
    <meta name="author" content="">

    <title></title>

    <style type="text/css">
        * {
            padding: 0px;
            margin: 0px;
            outline: none;
        }

        body, html {
            height: 100%;
            width: 100%;
        }

        body {
            background: #2a3e73 url(background.jpg) repeat-x top center;
        }
        
        #container {
            width: 900px;
            margin: 0 auto;
            text-align: left;

                position: relative;
                min-height: 100%;
                height: auto !important; /* voor moderne browsers */
                height: 100%; /* voor IE */

            border-left: 1px solid #53618e;
            border-right: 1px solid #53618e;
        }
        #header{
            height:200px;
        }
        #inhoud {

            padding: 0 2em 60px 2em;
        }
        #footer {
            border-top: 1px solid #53618e;
            
                position: absolute;
                bottom: 0; /* heel belangrijk */
            width: 100%;
            background: #152652;
            height: 10px;
            font-family: Arial;
            font-size:12px;
            font-weight:bold;
            text-align:center;
            color: #ffffff;
            padding-top: 10px;
            padding-bottom: 15px;
        }

    </style>
</head>

<body>

<div id="container">
    <div id="header"></div>

    <div id="inhoud">


    </div>
    <div id="footer">&copy; 2008 - Motorclub Zoetermeer.nl</div>
</div>

</body>
</html>

Met vriendelijke groet,
Robbert

vrijdag 4 januari 2008 17:38

Acties:

RobIII

Admin Devschuur®

^ Romeinse Ⅲ ja!

Disksoft schreef op vrijdag 04 januari 2008 @ 17:32:
Zou je me kunnen helpen
<snip>
Als je me daar mee zou kunnen helpen zou ik het echt top vinden.

Euh, sorry, maar zo werkt het hier niet

(Zie Kan iemand even...?)

Het is hier niet de bedoeling dat je je code neerplempt en wij het wel even voor je maken; dat mag je zelf doen. Verdiep je in de materie, probeer het een-en-ander en kom dan gerust terug met een nieuw topic waarin je laat zien wat je al hebt gezocht, gevonden en geprobeerd en wat er niet aan werkt(e) (zoals ook beschreven in onze Quickstart)

Disksoft schreef op vrijdag 04 januari 2008 @ 17:32:
Met vriendelijke groet,
Robbert

Wij tweakers doen elkaar permanent de groeten

[ Voor 51% gewijzigd door RobIII op 04-01-2008 17:40 ]

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