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)

[CSS/HTML] Website opent enkel correct in Chrome

BasHamar
5 antwoorden
  • Hallo,

    Ik ben bezig met een nieuw Webdesign, maar mijn design opent enkel correct in Chrome. In alle andere webbrowsers (zoals Firefox, Internet Explorer, Opera) opent hij steeds anders. Weten jullie soms mijn fouten?
    Het design is nog niet volledig af, maar het zo wel al correct moeten werken zoals het in Chrome doet. Dit is de link naar het design: http://thewebresource.uni.me/html-demo/Going%20Up/index.htm

    Hieronder post ik ook de code:

    index.htm
    [code:1:3186030171]
    <!DOCTYPE hmtl>
    <html>
    <head>
    <title>Going Up</title>
    <LINK REL=StyleSheet HREF="style.css" TYPE="text/css" MEDIA=screen>
    <script type="text/javascript" src="source/jquery-1.3.1.min.js"></script>
    <script type="text/javascript" src="source/jquery.scrollTo.js"></script>
    <script>

    $(document).ready(function() {

    $('a.panel').click(function () {

    $('a.panel').removeClass('selected');
    $(this).addClass('selected');

    current = $(this);

    $('#wrapper').scrollTo($(this).attr('href'), 800);

    return false;
    });

    $(window).resize(function () {
    resizePanel();
    });

    });

    function resizePanel() {

    width = $(window).width();
    height = $(window).height();

    mask_width = width * $('.item').length;

    $('#debug').html(width + ' ' + height + ' ' + mask_width);

    $('#wrapper, .item').css({width: width, height: height});
    $('#mask').css({width: mask_width, height: height});
    $('#wrapper').scrollTo($('a.selected').attr('href'), 0);

    }

    </script>
    </head>
    <body>
    <div id="header-img">
    <div id="header">
    <p id="title">Going up</p>
    <p id="description">Een nieuw dynamisch thema van The Web Resource!</p>
    <a id="logo" href="#item1"><img src="source/logo.png" alt="logo" height="75px" width="80px"></a>
    </div>
    </div>
    <div id="footer">
    <p id="footer-text">Design by: <a href="http://thewebresource.uni.me">The Web Resource</a></p>
    </div>
    <div id="wrapper">

    <div id="mask">

    <div id="item1" class="item">
    <a name="item1"></a>
    <div class="content1">
    <div class="navigation">
    <a href="#item1" class="panel">Home</a> |
    <a href="#item2" class="panel">Music</a> |
    <a href="#item3" class="panel">Biography</a> |
    <a href="#item4" class="panel">About</a> |
    <a href="#item5" class="panel">Contact</a>
    </div>
    <p class="text">Dit is het 'Going Up' thema. Het maakt gebruik van jQuery voor de slider. Hierdoor vraagt het thema niet veel resources van een client computer of van je server.</p>
    </div>
    </div>

    <div id="item2" class="item">
    <a name="item2"></a>
    <div class="content2">
    <div class="navigation">
    <a href="#item1" class="panel">Home</a> |
    <a href="#item2" class="panel">Music</a> |
    <a href="#item3" class="panel">Biography</a> |
    <a href="#item4" class="panel">About</a> |
    <a href="#item5" class="panel">Contact</a>
    </div>
    <p class="text">Hier komt de nieuwe content voor Music</p>
    </div>
    </div>

    <div id="item3" class="item">
    <a name="item3"></a>
    <div class="content3">
    <div class="navigation">
    <a href="#item1" class="panel">Home</a> |
    <a href="#item2" class="panel">Music</a> |
    <a href="#item3" class="panel">Biography</a> |
    <a href="#item4" class="panel">About</a> |
    <a href="#item5" class="panel">Contact</a>
    </div>
    <p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec quis dolor ligula, et malesuada velit. Nam facilisis volutpat pellentesque. Curabitur felis lorem, semper pellentesque bibendum in, laoreet sed orci. Vestibulum iaculis lacus et nisi hendrerit convallis. Praesent sit amet urna nibh, sed gravida sapien. Aliquam vestibulum purus ut nisl euismod hendrerit. Fusce faucibus neque eget massa bibendum posuere. Curabitur vitae orci eu eros mattis consequat vel sed lectus. In ac ante turpis, sed varius ante. Duis nec nulla elit, sit amet placerat odio.

    Praesent ac augue nisl. Suspendisse semper mi eleifend metus tincidunt fermentum. Phasellus iaculis enim eu ante venenatis id gravida turpis sagittis. Suspendisse euismod purus nec arcu bibendum id rutrum nisi rutrum. Maecenas pretium tristique lorem, quis luctus ante gravida vel. Donec imperdiet fermentum nisl, ac commodo tellus facilisis id. In blandit dapibus libero, vitae sollicitudin massa blandit vel. Integer pretium justo at enim sodales ut tempor nisl blandit. Vivamus dolor ante, pellentesque sed convallis vel, volutpat sed leo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean semper mi nec nulla ullamcorper id tempor urna consequat. Phasellus libero libero, condimentum ut rutrum condimentum, congue vitae metus. Aliquam erat volutpat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam a ante augue.

    Sed non felis a leo feugiat faucibus. Nullam tincidunt, nisl a convallis dictum, lorem neque porttitor dolor, et feugiat lorem neque et justo. Aliquam vel ante et mi egestas feugiat. Quisque ac neque a orci vulputate ultricies sit amet in sem. Cras ultrices nisi ut velit tempus vel imperdiet est ultricies. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque diam turpis, eleifend id elementum id, malesuada in ipsum. Nullam ante metus, tincidunt id ullamcorper tincidunt, laoreet et erat. Quisque faucibus porttitor urna non eleifend. Fusce ut risus sit amet felis consectetur lacinia sed vel mauris. Praesent feugiat blandit sodales. Etiam elit tortor, consequat a sodales sit amet, ornare in leo. Pellentesque condimentum interdum velit sed consectetur.

    Mauris vel gravida sapien. Nullam ac justo at erat accumsan imperdiet vitae ultricies diam. Quisque quam mi, luctus in adipiscing id, vehicula et ipsum. Morbi sagittis facilisis porta. Praesent quis dui eu enim elementum lobortis vitae sed ligula. Nullam id lacinia orci. Phasellus ante risus, faucibus non faucibus sit amet, mattis eu orci. Proin porta, felis ut lacinia cursus, ligula augue tincidunt est, ac pharetra enim mauris eu tellus. Vivamus mollis, lectus id fermentum interdum, nibh felis mollis odio, vitae facilisis tortor risus ac arcu. Vestibulum sit amet orci mauris, non semper tortor. Integer nec ligula nec purus feugiat molestie id at sem. Donec velit nulla, laoreet vel dapibus vehicula, suscipit egestas est.

    Suspendisse semper justo ut felis volutpat tempus. Proin ornare consectetur imperdiet. Vestibulum ac turpis tristique risus tincidunt vehicula eu vitae elit. Morbi commodo ante vel dui imperdiet scelerisque. Sed ac lobortis augue. Nulla sapien turpis, auctor in molestie et, pulvinar sed ligula. In vehicula sagittis sapien, rutrum laoreet nibh iaculis sed. Integer tristique, est sed pharetra accumsan, enim nisi imperdiet metus, sit amet commodo lectus felis et odio.

    Phasellus sollicitudin, odio at consequat placerat, arcu velit laoreet est, vitae luctus arcu nulla et nibh. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ac nisi nunc. Sed lacinia ipsum et tellus elementum elementum. Ut at massa ligula. Praesent id ultrices dolor. Aliquam neque orci, consectetur ut commodo at, ultrices id tortor. Praesent commodo risus nec massa posuere ultricies.

    Nulla dapibus semper iaculis. Mauris ut mauris nulla, ut tincidunt erat. Sed eu tellus urna, vitae semper metus. Cras tristique ultrices blandit. Pellentesque.</p>
    </div>
    </div>

    <div id="item4" class="item">
    <a name="item4"></a>
    <div class="content4">
    <div class="navigation">
    <a href="#item1" class="panel">Home</a> |
    <a href="#item2" class="panel">Music</a> |
    <a href="#item3" class="panel">Biography</a> |
    <a href="#item4" class="panel">About</a> |
    <a href="#item5" class="panel">Contact</a>
    </div>
    <p class="text">About:</p>
    <p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent a nunc sapien. Praesent hendrerit facilisis commodo. Aenean porta pellentesque venenatis. Aenean elementum sapien lectus, a pharetra enim. Mauris venenatis ipsum vehicula ipsum porttitor id aliquam justo convallis. Sed sit amet feugiat mi. Nunc iaculis lobortis felis, dignissim mattis nunc porta nec. Cras quis nisl augue, sit amet interdum sapien. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Ut dignissim vestibulum faucibus. Duis quam tortor, adipiscing at egestas ac, tincidunt id massa. Mauris scelerisque iaculis congue. Duis lectus velit, imperdiet in ultrices et, consectetur a eros. Maecenas a odio augue. Sed quis nibh magna, in condimentum erat.

    Vivamus nisl purus, euismod sed condimentum eu, scelerisque a purus. Donec viverra condimentum urna, ut egestas nisi iaculis ac. Mauris venenatis porttitor placerat. In vitae justo elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse posuere euismod massa. Nulla felis arcu, venenatis eu placerat in, blandit vel massa. In hac habitasse platea dictumst. Proin condimentum congue eros. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut et nulla elit, vitae venenatis augue. Fusce laoreet molestie magna non gravida. Vivamus sit amet risus ligula. Sed malesuada ligula ac felis semper adipiscing.

    Etiam in ultricies elit. Donec vel lorem quam, id ornare massa. Sed ac fermentum massa. Mauris feugiat lectus nec augue fermentum sagittis. Praesent varius egestas mi quis auctor. Aliquam luctus turpis accumsan ipsum ullamcorper vulputate. Quisque eget libero tellus, a iaculis elit. Nam odio nunc, gravida a egestas quis, hendrerit non nisi. Aliquam aliquam odio a augue accumsan sodales. Nulla gravida massa sed ligula fringilla id lacinia justo convallis. Aliquam quis lobortis quam. Nam convallis ornare fringilla. Vestibulum aliquam tortor id ante dignissim id tincidunt magna molestie. Pellentesque.</p>
    </div>
    </div>

    <div id="item5" class="item">
    <a name="item5"></a>
    <div class="content5">
    <div class="navigation">
    <a href="#item1" class="panel">Home</a> |
    <a href="#item2" class="panel">Music</a> |
    <a href="#item3" class="panel">Biography</a> |
    <a href="#item4" class="panel">About</a> |
    <a href="#item5" class="panel">Contact</a>
    </div>
    <p class="text">Hier komt de contact pagina.</p>
    <center><p class="text">Mr. Webbuilder</p></center>
    <center><p class="text">First Avenue 235</p></center>
    <center><p class="text">New York</p></center>
    </div>
    </div>


    </div>

    </div>
    </body>
    </html>
    [/code:1:3186030171]

    style.css:

    [code:1:3186030171]

    body {
    height:100%;
    width:100%;
    margin:0;padding:0;
    }
    #wrapper {
    width:100%;
    height:87%;
    position:absolute;
    overflow:hidden;
    }
    #header {
    height: 8%;
    font-family: Arial, Helvetica, sans-serif;
    }
    #title {
    font-size: 30px;
    text-align: center;
    }
    #description {
    font-size: 20px;
    text-align: center;
    }
    #logo {
    position: absolute;
    top:25px;
    left: 25px;
    }
    #footer {
    width: 100%;
    position: absolute;
    bottom: 0px;
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
    background-image: url('source/background-footer.jpg')
    }
    #footer-text {
    color: #ffffff;
    }
    #footer a:link {
    color: #ffffff;
    text-decoration: none;
    }
    #footer a:visited {
    color: #ffffff;
    text-decoration: none;
    }
    #footer a:hover {
    color: #aaa;
    text-decoration: none;
    }
    #mask {
    width:500%;
    height:100%;
    }

    .item {
    width:20%;
    height:100%;
    float:left;
    }


    .content1 {
    width:100%;
    height:100%;
    top:10%;
    margin:0 auto;
    background-image:url('source/background.jpg');
    background-color:#aaa;
    position:relative;
    }
    .content2 {
    width:100%;
    height:100%;
    top:10%;
    margin:0 auto;
    background-image:url('source/background2.jpg');
    background-color:#aaa;
    position:relative;
    }
    .content3 {
    width:100%;
    height:100%;
    top:10%;
    margin:0 auto;
    background-image:url('source/background3.jpg');
    background-color:#aaa;
    position:relative;
    }
    .content4 {
    width:100%;
    height:100%;
    top:10%;
    margin:0 auto;
    background-image:url('source/background4.jpg');
    background-color:#aaa;
    position:relative;
    }
    .content5 {
    width:100%;
    height:100%;
    top:10%;
    margin:0 auto;
    background-image:url('source/background5.jpg');
    background-color:#aaa;
    position:relative;
    }
    .content {
    width:100%;
    height:100%;
    top:10%;
    margin:0 auto;
    background-image:url('source/background.jpg');
    background-color:#aaa;
    position:relative;
    }
    .navigation {
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 20px;
    display: block;
    height: 50px;
    background: #ffffff;
    opacity:0.8;
    filter:alpha(opacity=80); /* For IE8 and earlier */
    }
    .text {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 17px;
    padding-left: 20px;
    padding-right: 20px;
    }
    .navigation a:link {
    color: #000000;
    }
    .navigation a:visited {
    color: #000000;
    }
    .navigation a:hover {
    color: #aaa;
    }
    [/code:1:3186030171]
  • Ik heb geen studie gemaakt van je code, maar het kan helpen als je (eventueel met screendumps*) aangeeft wat er dan niet klopt in andere browsers. Zo op het eerste gezicht zie ik namelijk geen fouten, en dan wordt het lastig helpen.

    Trouwens: een spatie in je URL is nooit een goed idee, dat kan al onverwachte problemen geven.


    ____
    *) Doe dat dan aub wel even met een thumbnail om te voorkomen dat de lay-out van het forum in de soep loopt
  • [list:e103c39c5b]
    [*:e103c39c5b]Je moet de header geen height geven: hierdoor vallen de elementen buiten de header.
    [*:e103c39c5b]Je moet je #footer onder de #wrapper plaatsen in de html.
    [*:e103c39c5b]Haal alle position:absolute en relative weg bij #logo, #footer, #wrapper.
    [*:e103c39c5b]Plaats #logo als eerste in #header.
    [*:e103c39c5b]Geef #logo een float:left;
    [*:e103c39c5b]geef een class van .clearfix aan de div#header.
    [*:e103c39c5b]En dan in je css plaats je:
    [code:1:e103c39c5b]
    .clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
    }

    .clearfix {
    display: inline-block;
    }

    html[xmlns] .clearfix {
    display: block;
    }

    * html .clearfix {
    height: 1%;
    }
    [/code:1:e103c39c5b]
    [*:e103c39c5b]Je wil waarschijnlijk de #footer een width of padding geven, en margin:0 zetten![/list:u:e103c39c5b]
  • Ik heb echt rare problemen met mijn code. Als ik de code van mijn footer verplaats, dan verdwijnt de hele footer en als ik de height van de #header verwijder dan schuift mijn content (de slider) naar beneden en zit de footer eronder. Het is echt raar. Weet je daar misschien een oplossing. Ik ken wel wat van HTML en CSS, maar ik ben geen pro, dus misschien daarmee mijn rare problemen.
  • Ten eerste: je hebt niet alles gedaan wat ik gevraagd heb… Dit moet eerst gebeuren…

    Dan:
    [list:b5f02e3641]
    [*:b5f02e3641] position:absolute bij #wrapper weghalen.
    [*:b5f02e3641] bij .content1, .content2 enzovoorts de top:10% en de position:relative weghalen;
    [/list:u:b5f02e3641]

Beantwoord deze vraag

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