Full screen background IE

  • Onderwerp starter Onderwerp starter xbox1
  • Startdatum Startdatum
Status
Niet open voor verdere reacties.
X

xbox1

Gebruiker
Lid geworden
2 okt 2011
Berichten
37
Beste mensen,

Ik ben net begonnen op school met HTML. We krijgen nog CSS binnekort en daarna JavaScript. Maar ik zit met een probleem met mij eigen "website".
Ik heb full screen background dat werkt in Firefox,google chrome maar niet in Internet explorer?

PHP: 
<html>
<head><title>Homepage</title>




<style type="text/css">
 #full-screen-background-image {
        z-index: -999;
        min-height: 100%;
        min-width: 1024px;
        width: 100%;
        height: auto;
        position: fixed;
        top: 0;
        left: 0;
      }
</style>



</head><body><img alt="full screen background image" src="http://imageshack.us/a/img696/841/natuur100249.jpg" id="full-screen-background-image" /> 
<h1>Tekst en test </h1>





</body>
</html>
 
Welkom op Helpmij.nl :)

Zou je niet eerder je achtergrondafbeelding in de CSS willen zetten?
 
tobiastheebe:

Misschien als een css noob snap ik niet 100% wat je bedoelt. Ik wil gewoon de achtergrond afbeelding helemaal.
Want nu krijg je de tekst enz onder het plaatje inplaats er op.Als ik dit resultaat krijg door achtergrondafbeelding in de CSS willen zetten vind ik dat prima.
Hoe doe ik dat dan? De afbeelding plaatsen in de head?

dennisdennis12:
IE 9
 
HTML: 
<!doctype html>
<html>
<head><title>Homepage</title>
 
 
 
 
<style type="text/css">
 body
{
background:url(http://imageshack.us/a/img696/841/natuur100249.jpg);
background-repeat:no-repeat;
background-size:100% 100%;
background-attachment:top center;
}
</style>
 
 
 
</head><body>
<h1>Tekst en test </h1>
 
 
 
 
 
</body>
</html>
werkt als het goed is niet in alle browsers helaas vanwege css3 dat in ie9 wel is opgenomen maar in ie8 nog niet.
ps. je moet altijd een doctype erboven zetten. vraag maar aan je leraar wat dat betekent. wat er nu staat is html 5 nieuwste van het nieuwste op dit moment.
 
Laatst bewerkt:
Thanks man! En ik zal het vragen over de <!doctype html> zie hem volgende week weer.


........
Alleen nu staan mijn menu en zoek balken raar? en de margin px aanpassen werkt niet.
Mij balken krijg ik niet netjes links. En als de ene balk haast goed staat, dan staat de balk er onder heel raar.
Ik heb de code die niet van toepassing is weg gelaten. Zoals het menu recht en ook heb ik de links weg gelaten voor de naam link. (om geen reclame de maken, wat ik aan neem verboden is op deze forum)
[CPP]
<!doctype html>
<html>
<head><title>Homepage</title>



<style type="text/css">
body
{
background:url(http://imageshack.us/a/img696/841/natuur100249.jpg);
background-repeat:no-repeat;
background-size:100% 100%;
background-attachment:top center;
}




}
#menu
ul{
font-weight:bold;color:#FFFF00;
margin: -10px -50px;
padding: 10;
list-style:none}
ul li{
display:block;
position:relative;
float:left}
li ul{display:none}
ul li a{
display:block;
margin-left:1px;
text-decoration:none;
color:#B40404;
border-top:1px solid #000000;
padding: 5px 8px 5px 8px;
background:#424242;
white-space:nowrap}
ul li a:hover{background:#;color:inherit}
li:hover ul{
display:block;
position:left}
li:hover li{
font-size:70%;
clear:left;
width:12em}
li:hover a{ background:#B40404;color:inherit}
float:left;
li:hover li a:hover{background:#424242;color:inherit}
.clear_all{clear:both;height:0.5em;}

menub
{
margin: 40px 20px;
width:25%;
}
</style>



</head><body>
<h1><font face="MV Boli" color="5FF707"><center>Welkome bij de algemene homepage</center></font></h1>
<ul id="menu">
<li><a href="">Home</a></li> <li><a href="">Nieuws</a><ul> <li><a href="link">link</a></li><li><a href="link/">link</a></li><li><a href="link">links</a></li> <li><a href="link">link</a></li> </ul> </li>
<li><a href="">naam van de balk</a><ul><li><a href="link">link</a></li> <li><a href="link">link</a></li> <li><a href="link">link</a></li> <li><a href="link">link</a></li> </ul> </li>
<li><a href="link naar plaatje">contact</a></li> </ul>
<p class="clear_all"></p>

<div class="menub">
<TABLE BORDER=1 ><span>
<TD ROWSPAN=1 bgcolor="A7B39F">Zoeken op het web? Hier onder!</TD>
<tr> <td bgcolor="A7B39F" ><form action="link"><input name="q" type="text" value="link" size="40"><input type="submit" value="zoek"></form></td></tr>
<tr> <td bgcolor="A7B39F"><form action="link"><input name="q" type="text" value="naam link" size="40"><input type="submit" value="zoek"></form></td></tr>
<tr> <td bgcolor="A7B39F"><form action="een link"><input name="q" type="text" value="Naam van link zoeken" size="40"><input type="submit" value="zoek" ></form></td></tr>
</span>
</div>
</table>





</body>
</html>
[/CPP]
 
Hoi xbox1,
Ja, best lastig die html en css! ;)

Tip: als je iets gefabriekt hebt, dit eerst even door de html-validator en de css-validator halen.
Die controleren of alles wel geldige code is.

Hier is dat niet het geval.
Ik heb je code even online gezet: fullscreen-background-ori.htm

HTML-code
De html-validator geeft 6 fouten en 3 waarschuwingen aan. Onder andere:
  • In een <table> mag geen <span> zitten buiten de <td>'s.
  • Als je een <div> opent, moet alles wat daarin zit (bv. een <table>) éérst afgesloten worden (met </table>) vóórdat de </div> komt.
  • Dus <div><table>...</div></table> is fout, en <div><table>...</table></div> is goed. Elementen zitten dus altijd in nestjes.
  • De <font>-tag en de <center>-tag zijn streng verboden! (uitleg in dit topic; daar staan ook dingen in over het Doctype :) ).

CSS-code
De css-validator geeft 8 fouten:
  1. Op regel 17 staat een accolade } die er niet hoort.
  2. Op regel 22 staat padding: 10; zonder opgegeven maateenheid. Dan weet een browser niet welke maat gebruikt moet worden. Betekent die 10: 10 centimeter, of 10 meter, of 10 zeemijl, of schoenmaat 10, of 10 Rijnlandse voeten, enz.? - Dus: px er achter zetten.
  3. Op regel 38 staat een hekje # zonder kleurnummer er achter.
  4. Op regel 38 gaat ook de color mis door de vorige fout (deze vervolgfout komt vanzelf goed als vorige fout hersteld is).
  5. Op regel 38 gaat ook de inherit mis; ook een vervolgfout.
  6. Op regel 41 staat position:left; maar een position kan alleen static, relative, absolute of fixed zijn (float bedoeld?).
  7. Op regel 47 staat een float:left; die nergens bij hoort.
  8. Op regel 47 daardoor ook een vervolgfout.

Je moet daarom bij webbouwen niet alleen precies zijn, je moet héél erg precies zijn! ;)
Elke verkeerde punt of komma kan een hele webpagina om zeep helpen!

=======

Los hiervan: je hebt het link-lijstje van het menu ingericht met een <ul id="menu">.
In je css-code staat:
Code: 
#menu
    ul{
        font-weight:bold;color:#FFFF00;
        margin: -10px -50px;
        padding: 10;
        list-style:none}
    ul li{
        display:block;
        position:relative;
        float:left}
    li ul{display:none}
...
enz.
De <ul> van het menu heeft zelf de id="menu".
  • Als je dan #menu ul {...} neerzet, worden alleen de <ul>'s bereikt die binnen de <ul id="menu"> zitten, en niet de <ul id="menu"> zelf.
  • Het menu als totaal reageert daarom niet op de {margin: -10px -50px;}.
  • Op dit moment gelden de eigenschappen van de #menu ul {...} dus alleen voor de submenu's (die ook een <ul> hebben).
  • Als je die <ul id="menu"> zelf wilt stylen, dan neem je alleen: #menu {...}.

De ul li {...} die er onder staat (en de rest van het rijtje ook) slaat niet alleen op de <li>'s binnen een <ul> van het #menu, maar op alle <li>'s die op de pagina staan, ook buiten het menu-lijstje. Die zijn er nu nog niet, maar dat kan later problemen opleveren.
  • Wil je alleen de list-items en andere dingen van het menu pakken, dan moet de #menu voor elk ding uit het rijtje:
    #menu ul li {...}
    #menu li ul {...}
    enz.

Met vriendelijke groet,
CSShunter
 
CSShunter

Bedankt, Ja nu dat je zeg css-validator ken ik mij herinneren dat die daar wat over zegt. Maar we mogen nog niet gebruiken om zelf de foute leren opsporen.(moet er bij zeggen dat we in de klas nog pas bij HTML zijn). Bedankt voor je hulp ik ga even alle uitproberen en veranderen.
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan