Thread: css toon niet gehele background
-
07-10-2013, 01:55 #1Member
- 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
csshtmlCode: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; }
wie kan me verder helpen hiermee?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>
grtsno votes
Reply With Quote
-
-
07-10-2013, 10:29 #2Approved 9-lifer
- 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
-
07-10-2013, 17:10 #3Member
- 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
-
07-10-2013, 19:07 #4Member
- 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.
Als je het natuurlijk niet wilt centreren dan heb ik niets gezegd!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 */ }
Portfolio website: http://www.rubenvermeulen.be/
Nederlandstalige PC Multi-Gaming Clan: http://www.soldiersoffreedom.be/
no votes
Reply With Quote
-
07-10-2013, 23:16 #5Member
- 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?
grtsno votes
Reply With Quote
-
08-10-2013, 13:52 #6Approved 9-lifer
- 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
