1. #1

    Registered
    30/12/06
    Location
    regio kortrijk
    Posts
    687
    iTrader
    19 (100%)
    Mentioned
    0 Post(s)
    Reputation
    0/0

    css toon niet gehele background

    hallo

    Vroeger werkte ik met frames,maar ik ben nu bezig met te leren werken met div's en met css.
    Enig probleem mijn background image wordt niet op de volledige groote getoond?

    website
    originele background

    Ook wil ik hebben als men de browser verkleint ofvergroot de content mee gaat in grote maar dit gebeurd ook niet.
    Hmm ik heb nog veel te leren over divs en css

    css
    Code:
    body{
    margin: 0;
    padding: 0;
    border: 0;
    background-color: white;
    }
    
    #top{
    width:65%; 
    height:10%; 
    position:fixed;
    top:0px; 
    left:18%; 
    background-color:black;
    }
    
    #links{
    width:20%; 
    height:100%; 
    position:fixed;
    top:0px; 
    left:0px; 
    background-color:black;
    }
    
    #midden{
    background-image:url(../img/background.jpg);
    background-repeat:no-repeat;
    width:100%;
    height:100%; 
    position:fixed;
    top:50px; 
    left:20%; 
    background-color:black;
    }
    
    #rechts{
    width:100%; 
    height:100%;
    position:fixed; 
    top:0px; 
    left:82.5%; 
    background-color:black;
    }
    
    #footer{
    width:62.5%; 
    height:5%; 
    position:fixed;
    bottom:0px; 
    left:18%; 
    background-color:black;
    }
    html

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    
    <head>
    <title>Garage Vervaecke David</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="html/style.css" type="text/css" media="all">
        </head>
        <body>
    		 <div id="top"> 
            <a href="http://test.be"> top </a> 
    				</div> 
    				
            <div id="links"> 
            <a href="http://test.be"> links </a> 
    				</div>
    				
            <div id="midden"> 
            <font color="#FFFFFF">midden </font> 
    
    				
    				</div>
    				
            <div id="rechts"> 
            <a href="http://test.be"> rechts </a> 
    				</div>
    				
    				 <div id="footer"> 
            <a href="http://test.be"> footer </a> 
    				</div>
    				
        </body>
    </html>
    wie kan me verder helpen hiermee?

    grts
    no votes   Reply With Quote Reply With Quote

  2. #2
    woony's Avatar
    Registered
    03/12/03
    Location
    Oostende
    Posts
    2,599
    iTrader
    78 (100%)
    Mentioned
    0 Post(s)
    Reputation
    7/10
    Ik ga u de oplossing niet geven aan gezien je aan het leren bent.

    Het probleem zit hem simpel weg in de grootte van de div die je creëert. #midden tov het feit dat uw background een vaste grootte heeft.

    dus ofwel zorg je dat uw div diezelfde grootte heeft, maar dan zal deze ook niet wijzigen naar gelang uw browser size zal veranderen.

    andere oplossing is om background-size: 100% te zetten wat een css3 setting is.

    Op zich is uw manier wat je probeert gewoon geen goeie manier , maar je bent nog aan het leren.

    eigenlijk zou je een klein repeatend stukje background moeten gebruiken, en de elementen er op als de titel en de auto losstaand positioneren hierop afhankelijk dan van de groottes.

    veel succes nog.
    no votes   Reply With Quote Reply With Quote

  3. #3

    Registered
    30/12/06
    Location
    regio kortrijk
    Posts
    687
    iTrader
    19 (100%)
    Mentioned
    0 Post(s)
    Reputation
    0/0
    hey

    ik heb de oplossing gevonden denk ik bijna :-)
    eerst een div container maken en daarin enkel div classes.(verschill moet ik nog uitzoeken)
    Nu lukt het zoals ik wil enkel nog zien of de rest het doet.
    Maar nu kan ik blijven naar beneden scrollen en dit is ook de bedoeling niet
    Wat ik ook wel raar vind is de uitlijning van het logo en de auto.
    het logo geef ik een top: 30px; left: 30px; en de car moet ik top: -1000px; left: 420px; meegeven dus dat zal ook wel ergens fout zitten.
    Nu we zijn al een stap verder ;-)

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    
    <html>
    <head>
    <title>Untitled</title>
    <link rel="stylesheet" href="html/style.css" type="text/css" media="all">
    </head>
    <body>
    <div id = "wrapper">
    <div class="top">test</div>
    <div class="bgimg">
    <div class="logo">logo</div>
    <div class="car">logo</div>
    </div>
    </div>
    
    </body>
    </html>
    Code:
    body, html{
    margin: 4px;
    height:100%;
    background-color:black;
    }
    #wrapper{
    margin-left:300px;
    }
    
    .top {
        height:100px;
    		width:79%;
    		align: center;
    		background-color:red; 
    }
    
    .bgimg {
        background-image: url(../img/wall.png);
    		background-repeat:no-repeat;
    		position: relative;
    		height:1000px;
    		width:100%;
    		align: center; 
    }
    
    .logo {
        background-image: url(../img/logo.png);
    		background-repeat:no-repeat;
    		position: relative;
        top: 30px;
        left: 30px;
    		height:100%;
    		width:100%;
    		align: center;
    		
    }
    
    .car {
        background-image: url(../img/car.png);
    		background-repeat:no-repeat;
    		position: relative;
        top: -1000px;
        left: 420px;
    		height:100%;
    		width:100%;
    		align: center;
    		
    }
    Last edited by badboyss; 07-10-2013 at 17:51.
    no votes   Reply With Quote Reply With Quote

  4. #4
    CrushTheButton's Avatar
    Registered
    27/03/12
    Location
    Knesselare
    Posts
    425
    iTrader
    10 (100%)
    Mentioned
    0 Post(s)
    Reputation
    0/0
    Als je alles mooi in het middel wilt hebben staan dan kan je de wrapper aanpassen. Zie code.

    Code:
    #wrapper {
          width: 960px; /* Dit heb je nodig zodat de margin weet hoeveel margin er aan elke kant moet om alles te centreren */
          margin: auto; /* Dit plaatst het element in het midden */
    }
    
    #top {
          width: 100%; /* Zo hoef je niet beide "widths" aan te passen als het groter moet. Je kan ook 960px schrijven */
    }
    Als je het natuurlijk niet wilt centreren dan heb ik niets gezegd!
    Portfolio website: http://www.rubenvermeulen.be/
    Nederlandstalige PC Multi-Gaming Clan: http://www.soldiersoffreedom.be/
    no votes   Reply With Quote Reply With Quote

  5. #5

    Registered
    30/12/06
    Location
    regio kortrijk
    Posts
    687
    iTrader
    19 (100%)
    Mentioned
    0 Post(s)
    Reputation
    0/0
    alles moet gecentreerd zijn ;-)
    bedankt daarvoor aangepast.
    Maar hoe vermijd ik het eindeloos scrollen nu?

    grts
    no votes   Reply With Quote Reply With Quote

  6. #6
    woony's Avatar
    Registered
    03/12/03
    Location
    Oostende
    Posts
    2,599
    iTrader
    78 (100%)
    Mentioned
    0 Post(s)
    Reputation
    7/10
    pff, er is hier geen simpele oplossing voor want je zit eigenlijk al van het begin mis

    waarom zijn dat logo en die auto 100% height? dan zit je met een div met text in met clear:both dus die komt er onder te staan. waardoor je het enigsinds gaat oplossen met allerhande negatieve margins etc.

    moest ik jou zijn zou ik eens herbeginnen. en neem eens een kijkje naar floats.

    start met uw wrapper met daar in 4 divkes.
    logo car
    menu
    content en maak gewoon gebruik van floats, dus geen top left etc.
    no votes   Reply With Quote Reply With Quote

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Log in

Log in