Ga naar inhoud

Aanbevolen berichten

Geplaatst:

hallo iedereen,

ik heb nu mijn (eerste) website gemaakt maar heb nog wel een paar

probleempjes :

probleem 1:

mijn website wilt niet goed werken op IE (internet explorer) maar wel op mozilla firefox,waarom weet ik niet,als jullie het soms zouden weten je zegt maar.:bawling:

probleem 2:

ik heb een foto en wil die instellen als achtergrond maar weet wel hoe dat moet maar niet zo goed,maar ik wil liefst ook dat hij zich aan iemand zijn beeldresolutie aanpast,als jullie tips hebben dan geef je ze maar.:pcguru:

Geplaatst:

Probleem 1: Als je een site maakt, heb je altijd verschillen in verschillende browsers.

Probleem 2: In HTML moet je dus zo een achtergrond instellen en wordt de resolutie ervan normaal aangepast voor iedereen:

<html>
<head>
         <title>Titel van de website</title>
</head>
<body background="afbeelding.jpg">
De inhoud van de pagina hier.
</body>
</html>

Geplaatst:

Als het voor de eerste keer is dan kan u best eerst hier leren.

HTML Cursus, uitleg voor Beginners: Lessenoverzicht

Als het uw bedoeling is om met één afbeelding de hele pagina vullen dan moet u zeker niet zo werken, want tegenwoordig zijn er wide scherm en dan zou de afbeelding gewoon lelijk zijn.

Wilt je met afbeelding werken dan zou ik aanraden met div in CSS2 of CSS3 te leren want zonder dat is het haast niet meer mogelijk met moderne browsers.

Geplaatst:

Als je html code begint te kennen. Dan kan je ook meteen leren voor CSS

Denkpist die je moet denken is zo:

Achtergrond in de kleur van uw afbeelding indien mogelijk.

<div>Afbeelding</div>

dus

Kleur links - afbeelding centeren - Kleur rechts

In css kan je van alles doen met DIV

Een voorbeeld met css en div

deze code css opslaan als style.css

html, body {

background:#99CCCC;

padding:0;

margin:0;

}

#wrapper {

top:0px;

min-height:550px;

left:0px;

}

#wrapper2 {

top:0px;

min-height:550px;

left:0px;

}

#headerleft {

top:0px;

min-height:500px;

padding-left: 15px;

background: url(shadow-left.gif) repeat-y top left;

}

#headerright {

top:0px;

min-height:570px;

padding-right: 15px;

background: url(shadow-right.gif) repeat-y top right;

right:0px;

}

#header {

top: 0px;

background: #66F;

left:15px;

height: 50px;

font-size:25px;

font-weight: bold;

text-align:center;

color: #f2d4d4;

}

#content {

top: 0px;

background: #CCFFFF;

left:15px;

min-height: 470px;

font-size:25px;

font-weight: bold;

text-align:center;

color: #f2d4d4;

}

#footer {

bottom:0px;

background: #66F;

left:15px;

height: 50px;

font-size:25px;

font-weight: bold;

text-align:center;

color: #f2d4d4;

}

#bericht {

background: #CCCCCC;

width:200px;

float: left;

margin-left:10px;

min-height: 50px;

font-size:25px;

font-weight: bold;

text-align:left;

color: #000000;

border: 1px solid #FF0000;

}

#logboek {

background: #CC2222;

width:250px;

float: left;

margin-left:10px;

margin-bottom:15px;

min-height: 50px;

font-size:25px;

font-weight: bold;

text-align:center;

color: #FFFFFF;

border: 1px solid #FF0000;

}

.lifont {

font-size:15px;

font-weight: bold;

text-align:left;

color: #000000;

}

.fonttxt {

font-size:15px;

font-weight: bold;

text-align:left;

margin-left:10px;

margin-right:10px;

color: #FFDDDD;

}

Deze code opslaan als html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="XHTML namespace" xml:lang="en" lang="en">

<head>

<title>test</title>

<link href="style.css" media="screen" rel="stylesheet" type="text/css" />

</head>

<body>

<div id="wrapper">

<div id="headerleft">

<div id="headerright">

<div id="wrapper2">

<div id="header">Header</div>

<div id="content">content

<div id="bericht">Attentie

<ul>

<li class="lifont">Leden</li>

<li class="lifont">Bevoegden</li>

</ul>

<div id="logboek">Mijn logboek

<div class="fonttxt">

<br/>

Hier is mijn logboekje<br/>

Voor het eerst wil ik gebruik maken van de nieuwste css2.

Maar moet nog veel leren. Ik had nog gewoonte om met css te werken wat uit de tijd is.

<br/><br/>

</div>

</div>

</div></div>

<div id="footer">footer</div>

</div>

</div></div></div>

</body>

</html>

Zoals je ziet is de pagina in drie delen geplaatst.

Daarin is dan nog eens div verwerkt.

Dit gebeurd volledig door CSS

  • 4 weken later...
Geplaatst:

wil je je achtergrond "vast" hebben staan kun je verschillende dingen doen.

Je kunt CSS gebruiken met een los CSS bestandje of je zet de CSS gewoon in de <head></head> tags van je pagina.

je krijgt voor een vaste achtergrond die mee scrolt, niet herhalend is en in het midden staat dit:

<style type="text/css">
body{
  background:url(achtergrond.gif);
  background-repeat:no-repeat;
  background-position:center;
}
</style>

Voor een achtergrond die altijd op dezelfde plek staat ook al scroll je (met dezelfde eigenschappen als bovenstaande) dit:

<style type="text/css">
body{
  background:url(achtergrond.gif);
  background-repeat:no-repeat;
  background-position:center;
  background-attachment:fixed;
}
</style>

je ziet dat er een regeltje bij is gekomen met:

background-attachment:fixed;

Deze zorgt ervoor dat de achtergrond altijd op dezelfde plaats staat als waar jij hem hebt gezet.

Mocht het niet lukken, of heb je vragen. Laat het maar weten,

Gr,

Leroy

×
×
  • Nieuwe aanmaken...

Belangrijke informatie

We hebben cookies geplaatst op je toestel om deze website voor jou beter te kunnen maken. Je kunt de cookie instellingen aanpassen, anders gaan we er van uit dat het goed is om verder te gaan.