Scripts - Tutorials - Forum - Downloads - Showcase - Contact

Artikels

VPN vergelijken

Algemeen

Beginpagina

FAQ

Grafische worm (243)

Links

Nieuwsartikels

Nieuwsarchief

Boeken programmeren

Overzicht

Samenwerken

Webhosting

Zoek op Sitemasters

Leden

Registreren

Ledenlijst

Ons team

Links

webhostingtop10.be

Sociale media

Follow @sitemasters

Sitemasters

Adverteren op Sitemasters?

Contacteer ons

RSS

Link naar ons

Donaties

Poll

Je moet ingelogd zijn om te stemmen.

Statistieken

Linkpartners

Forum

Categorieën > HTML & CSS

Screen resize

BARRYBOYY - 16/08/2016 11:31 (laatste wijziging 16/08/2016 11:45)

Nieuw lid

Beste,

Ik ben bezig met een basis website.
Ik ben begonnen met een container: width: 100%;
In de container heb ik een header: height: 270px;
Daarin weer een menu: height: 65px;

De width van de header en de menu is gelijk aan de width van de container. (dit is toch goed bedacht? correct me aub)

Nu het volgende, ik wil graag dat mijn menu balk fixed is. oftewel dat hij mee komt zodra ik scroll naar beneden.

Weliswaar als ik position: fixed; geef aan de menu dan lukt het echter mijn balk is gek genoeg in een keer kleiner.. dat snap ik niet.

Ik kan het corrigeren met alsnog een width van 79% geven aan de menu balk en dat lukt ook.

MAAARRR zodra ik de screen verklein steekt de menubalk rechts uit (iets buiten de container) Kan iemand mij dat uitleggen hoezo dat is?

dit is mijn code

css code - Bekijk de code zonder highlighting - Klap code in

                #container {
    width: 80%;
    height: auto;
    margin-top: -1%;
    padding: 0 10%;}

#header {
    height: 270px;
    background-color: gainsboro;}

#menu {
    height: 65px;
    
    float: left;
    background: darkgrey;
    position: fixed;}

#menu ul li {
    list-style-type: none;
    display: inline-block;
    float: right;
    margin: 20px 20px 0 0;}

a {
    text-decoration: none;
    font-family: sans-serif;
    color: lightblue;
    font-size: 21px;}
            
#container {
    width: 80%;
    height: auto;
    margin-top: -1%;
    padding: 0 10%;}
 
#header {
    height: 270px;
    background-color: gainsboro;}
 
#menu {
    height: 65px;
 
    float: left;
    background: darkgrey;
    position: fixed;}
 
#menu ul li {
    list-style-type: none;
    display: inline-block;
    float: right;
    margin: 20px 20px 0 0;}
 
a {
    text-decoration: none;
    font-family: sans-serif;
    color: lightblue;
    font-size: 21px;}
 

html4strict code - Bekijk de code zonder highlighting - Klap code in

<div id="container">
    <div id="header">
    <div id="menu">
         <ul>
        <li><a href="#">Contact</a>
    </li>
        <li><a href="#">About</a>
    </li>
        <li><a href="#">Services</a>
    </li>
        <li><a href="#">Home</a>
    </li>
        
    
    </ul>
    </div>
   </div>
  </div>

<div id="container">
    <div id="header">
    <div id="menu">
         <ul>
        <li><a href="#">Contact</a>
    </li>
        <li><a href="#">About</a>
    </li>
        <li><a href="#">Services</a>
    </li>
        <li><a href="#">Home</a>
    </li>
 
 
    </ul>
    </div>
   </div>
  </div>

mod edit: code tags

8 antwoorden

Gesponsorde links

Thomas - 16/08/2016 12:00
Moderator		Op het moment dat je position: fixed gebruikt haal je dat element uit de "flow" van de pagina denk ik. Elementen met position: fixed erven dan als zodanig ook geen eigenschappen over van bovengelegen elementen in de pagina, immers, dit element was al uit de context van de pagina gehaald. Oftewel, indien je elementen met position: fixed gaat gebruiken is het wellicht beter om alle dimensies expliciet op te geven. In het algemeen is er iets voor te zeggen om met vaste breedtes te werken op basis van de dimensies van je browservenster. En dat brengt mij bij het volgende punt: indien je je venster gaat resizen en je wilt dat de layout zich hier op aanpast dan zul je hier iets voor in moeten bouwen in de vorm van responsive design: op grond van afmetingen of enkel de breedte van je browservenster heeft je site een bepaalde layout. Enige tijd geleden heb ik trouwens een snippet gemaakt met een sticky navigatiebalk. Wellicht kun je dat als uitgangspunt gebruiken voor een responsive variant. Je zou deze natuurlijk ook zo aan kunnen passen dat deze niet afhankelijk is van JavaScript indien de toegankelijkheid tot jouw website dit vereist.
Bedankt door: BARRYBOYY

BARRYBOYY - 16/08/2016 12:19
Nieuw lid		Bedankt voor je uitleg! tof! Is het gebruiken van een container op deze manier wel goed? In feite heb ik me ook gefocust op een responsive design en de header en body (3 columns) bewegen goed mee zodra ik mijn screen resize. Dus, als ik je goed begrijp. Indien ik position fixed geef aan een element in dit geval #menu negeert hij alle codes van de bovenliggende element? oftewel, Menu zit in een header en de header zit in mijn container met 80% width dan negeert mijn menu de 80% width omdat ik postion fixed gebruik? Wat dat betreft als ik alsnog wil dat mijn Menu stickt dan moet ik jou tutorial gebruiken (oftewel javascript?)

Thomas - 16/08/2016 12:34
Moderator		Citaat: Is het gebruiken van een container op deze manier wel goed? Jawel hoor, misschien met de toevoeging dat je een absolute breedte (in pixels, op grond van de afmetingen van je browservenster) gebruikt in plaats van een relatieve; indien je absolute breedtes gaat gebruiken is het vervolgens wel handig als je deze weer af laat hangen van je schermdimensies. Daarmee worden de absolute breedtes weer relatief ten opzichte van je scherm, zogezeid . Citaat: Indien ik position fixed geef aan een element in dit geval #menu negeert hij alle codes van de bovenliggende element? oftewel, Menu zit in een header en de header zit in mijn container met 80% width dan negeert mijn menu de 80% width omdat ik postion fixed gebruik? Ik weet niet hoe het precies werkt maar beschouw elementen met position: fixed als op zichzelf staande elementen die je dus ook expliciet moet opmaken via CSS. Het effect is in ieder geval hetzelfde (elementen met position: fixed trekken zich nergens anders iets van aan). Citaat: Wat dat betreft als ik alsnog wil dat mijn Menu stickt dan moet ik jou tutorial gebruiken (oftewel javascript?) Je hebt niet per se JavaScript nodig voor een sticky menu maar je zult het verschil merken als je gaat scrollen. In een variant met JavaScript is de overgang soepeler dan zonder omdat je dynamisch een class toevoegt en verwijdert op grond van scrollpositie. Je wilt namelijk niet dat je navigatiebalk op voorhand tegen de bovenbalk zit geplakt tenzij je design zo in elkaar zit.
Bedankt door: BARRYBOYY

BARRYBOYY - 16/08/2016 12:50 (laatste wijziging 16/08/2016 12:54)
Nieuw lid		Duidelijk! ik ga het met javascript proberen! Je zou dus ook aanraden om een sticky nav voortaan te fixen met javascript?

Thomas - 16/08/2016 13:09
Moderator		De snippet waar ik naar verwees "werkt" ook indien JavaScript uit staat, al blijft de navigatiebalk dan gewoon inline staan (scrollt dan niet mee indien je naar beneden scrollt). Zolang je JavaScript oplossing je site niet breekt indien JavaScript uit staat kun je prima extra toeters en bellen bijmaken in JavaScript.

BARRYBOYY - 16/08/2016 14:13

Nieuw lid

Ik heb Javascript toegevoegd. En het ziet er leuk uit!
Echter, nu ontstaat er alsnog een probleem.

Zodra ik alsnog mijn screen resize en kleiner maak dan wordt mijn Menu balk kleiner en niet meer de width die ik heb aan gegeven.

Het blijft stoeien!
Dit is mijn code zoals ik hem nu heb.

css code - Bekijk de code zonder highlighting - Klap code in

                #container {
    max-width: 950px;
    height: auto;
    margin: -25px auto;
}
#header {
    height: 270px;
    background-color: gainsboro;
    
}
#menu {
    margin-top: -16px;
    height: 60px;
    background: darkgrey;
    max-width: 950px;
    }

#menu ul li {
    list-style-type: none;
    display: inline-block;
    float: right;
    margin: 20px 20px 0 0;
    
}
div#menu.sticky   { position: fixed; top: 0; z-index: 1;}

a {
    text-decoration: none;
    font-family: sans-serif;
    color: lightblue;
    font-size: 21px;
    }



#body {
    height: 2000px;
    background-color: aliceblue;
    margin-top: 100px;
    
}
.row1 { 
    width: 33%;
    height: 200px;
    background-color: darkcyan;
    text-align: center;
    
}

.row2 { 
    width: 33%;
    height: 200px;
    background-color: darkgoldenrod;
    margin: -200px 33.5%;
    text-align: center;
    
    
}

.row3 { 
    width: 33%;
    height: 200px;
    background-color: darkmagenta;
    float: right;
    text-align: center;
    }
    
    
section {
    height: 200px;
    background-color: antiquewhite;
    margin: 200px 0 0 0;
}

            
#container {
    max-width: 950px;
    height: auto;
    margin: -25px auto;
}
#header {
    height: 270px;
    background-color: gainsboro;
 
}
#menu {
    margin-top: -16px;
    height: 60px;
    background: darkgrey;
    max-width: 950px;
    }
 
#menu ul li {
    list-style-type: none;
    display: inline-block;
    float: right;
    margin: 20px 20px 0 0;
 
}
div#menu.sticky   { position: fixed; top: 0; z-index: 1;}
 
a {
    text-decoration: none;
    font-family: sans-serif;
    color: lightblue;
    font-size: 21px;
    }
 
 
 
#body {
    height: 2000px;
    background-color: aliceblue;
    margin-top: 100px;
 
}
.row1 { 
    width: 33%;
    height: 200px;
    background-color: darkcyan;
    text-align: center;
 
}
 
.row2 { 
    width: 33%;
    height: 200px;
    background-color: darkgoldenrod;
    margin: -200px 33.5%;
    text-align: center;
 
 
}
 
.row3 { 
    width: 33%;
    height: 200px;
    background-color: darkmagenta;
    float: right;
    text-align: center;
    }
 
 
section {
    height: 200px;
    background-color: antiquewhite;
    margin: 200px 0 0 0;
}
 

html4strict code - Bekijk de code zonder highlighting - Klap code in

<!DOCTYPE html>
<html>
<head>
<title>Basic</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>

<div id="container">
    <div id="header">
        </div>
    <div id="menu">
         <ul>
        <li><a href="#">Contact</a>
    </li>
        <li><a href="#">About</a>
    </li>
        <li><a href="#">Services</a>
    </li>
        <li><a href="#">Home</a>
    </li>
        
    
    </ul>
    </div>
   
    <div id="body">
    <div class="row1">Lorem Ipsum adalah contoh teks atau dummy dalam industri percetakan dan penataan huruf atau typesetting. Lorem Ipsum telah menjadi standar contoh teks sejak tahun 1500an, saat seorang tukang cetak yang tidak dikenal mengambil sebuah  </div>
    <div class="row2">Sudah merupakan fakta bahwa seorang pembaca akan terpengaruh oleh isi tulisan dari sebuah halaman saat ia melihat tata letaknya. Maksud penggunaan Lorem Ipsum adalah karena ia kurang lebih memiliki penyebaran huruf yang normal. </div>
    <div class="row3">Tidak seperti anggapan banyak orang, Lorem Ipsum bukanlah teks-teks yang diacak. Ia berakar dari sebuah naskah sastra latin klasik dari era 45 sebelum masehi, hingga bisa dipastikan usianya telah mencapai lebih dari 2000 tahun.  </div>

        <section>
        
        </section>
    
    </div>
    
</div>
    
<script type="text/javascript">
//<![CDATA[
    $(document).ready(function() {
        $(document).scroll(function(e) {
            if ($(document).scrollTop() > 270) {
                $('div#menu').addClass('sticky');
            } else {
                $('div#menu').removeClass('sticky');
            }
        });
    });
//]]>
</script>    
    
    
</html>

<!DOCTYPE html>
<html>
<head>
<title>Basic</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
 
<div id="container">
    <div id="header">
        </div>
    <div id="menu">
         <ul>
        <li><a href="#">Contact</a>
    </li>
        <li><a href="#">About</a>
    </li>
        <li><a href="#">Services</a>
    </li>
        <li><a href="#">Home</a>
    </li>
 
 
    </ul>
    </div>
 
    <div id="body">
    <div class="row1">Lorem Ipsum adalah contoh teks atau dummy dalam industri percetakan dan penataan huruf atau typesetting. Lorem Ipsum telah menjadi standar contoh teks sejak tahun 1500an, saat seorang tukang cetak yang tidak dikenal mengambil sebuah  </div>
    <div class="row2">Sudah merupakan fakta bahwa seorang pembaca akan terpengaruh oleh isi tulisan dari sebuah halaman saat ia melihat tata letaknya. Maksud penggunaan Lorem Ipsum adalah karena ia kurang lebih memiliki penyebaran huruf yang normal. </div>
    <div class="row3">Tidak seperti anggapan banyak orang, Lorem Ipsum bukanlah teks-teks yang diacak. Ia berakar dari sebuah naskah sastra latin klasik dari era 45 sebelum masehi, hingga bisa dipastikan usianya telah mencapai lebih dari 2000 tahun.  </div>
 
        <section>
 
        </section>
 
    </div>
 
</div>
 
<script type="text/javascript">
//<![CDATA[
    $(document).ready(function() {
        $(document).scroll(function(e) {
            if ($(document).scrollTop() > 270) {
                $('div#menu').addClass('sticky');
            } else {
                $('div#menu').removeClass('sticky');
            }
        });
    });
//]]>
</script>    
 
 
</html>

Thomas - 16/08/2016 15:29 (laatste wijziging 16/08/2016 15:31)
Moderator		Mogelijk wil je dingen anders aanpakken op kleinere schermweergaven. In bovenstaande code zie ik geen responsiveness. Het is misschien handig om te beginnen met je ontwerp voor het kleinste schermformaat (dit principe wordt ook wel "mobile first" genoemd). Daarbij zou ik vaste hoogtes voor dynamische elementen (#body height 2000px ?) vermijden. NB de jQuery versie die je daar gebruikt is inmiddels redelijk verouderd, snor een nieuwere versie op. Daarnaast zou je je af kunnen vragen -indien je jQuery verder niet gebruikt- of dit niet nogal overkill is, je include een redelijk grote library voor een enkel simpel visueel effect.

BARRYBOYY - 16/08/2016 17:13
Nieuw lid		Roger that! bedankt voor de hulp! ik ga weer even van scratch beginnen. Ik wil hierin door gaan! dus dat wordt stoeien stoeien stoeien!

Gesponsorde links

Je moet ingelogd zijn om een reactie te kunnen posten.

Actiefste leden van de maand

Actieve forumberichten