achtergrond vasthangen

Status
Niet open voor verdere reacties.
Ladyke

Ladyke

Gebruiker
Lid geworden
9 okt 2010
Berichten
671
hoi,
ik ben een beetje aan het leren met vallen en opstaan in CSS .
nu heb ik voorlopig al een klein stukje kunnen maken ,
maar nu stuitte ik op een probleem :(.
ik wil dat mijn achtergrond (foto 1920x1080) vast blijft staan op zijn plak en dat het stuk waar text staat dat dat scrolt , zoiets als op de game mania site : http://www.gamemania.be/default.aspx

ook hoe kan ik de rand van mijn middenstuk bolle hoeke laten hebben ?

dit is al wat ik heb gemaakt : http://plussersherentals.webs.com/-%20New%20Folder%20(2)/Gaming%20site.htm

dit is de code :
HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<style type="text/css">
div.ex
{
width:500px;
height:500px;
padding:250px;
border:1px solid black;
margin:200px;
background:#FFFFFF;
}
</style>
</head>
<body>

<BODY background="http://plussersherentals.webs.com/-%20New%20Folder%20(2)/battlefield_3-wallpaper-1920x1080.jpg">
<CENTER><div class="ex"><br />
</div></CENTER>



</body>
</html>

Groets Ladyke
 
Dat eerste is erg simpel, gewoon de achtergrond er in zetten via CSS, niet in je HTML. Dat kan zo.
Code: 
body{
background-image:url('url van je afbeelding.jpg');
background-repeat:no-repeat; //zorgt ervoor dat de afbeelding niet steeds herhaalt wordt.
background-position:50% 0; // plaatst de afbeelding boven en in het midden van het scherm (zodat hij op breede schermen niet aan een rand blijft plakken.
background-attachment:fixed; // zorgt ervoor dat de afbeelding niet meescrollt.
background-color:black; // geeft een achtergrondkleur mee zodat mensen met erg breede schermen niet opeens een witte achtergrond zien.
}

Wat die afgeronde hoeke betreft kun je border-radius:10px; toepassen op het element dat ronde hoeken moet hebben, maar dat werkt niet in oudere versies van IE.

Overgens is 0.5MB wel erg veel voor een achtergrondafbeelding. (mag je dat plaatje trouwens wel gebruiken van de eigenaar?

NB: De <CENTER> tag is al zo'n tien jaar geleden verouderd verklaard, niet meer gebruiken dus. Gebruik in plaats daarvan CSS. Als je de margin van die div verandert in margin:200px auto; komt 'ie mooi in het midden te staan. Ik weet niet welke site je heeft aangeraden die tag te gebruiken maar je kunt er denk ik beter wegblijven. Misschien moet je de cursus op web-garden.be eens doornemen.

EDIT: Overigens open je twee keer je <body> tag, dat klopt natuurlijk niet.
 
Laatst bewerkt:
hoi,
is er dan een css editor ofzo want dit heb ik gedaan met html kit.
dit plaatje is een voorbeeld , wss komt er nog een ander .

meen je dat nu echt van die center ? , ik heb een half jaar geleden een online cursus doorgenomen en heb dar daar geleerd :p
euhm ik ben dus totaal nog een "groentje" in css , ik begin het een beetje te verstaan (enkel nog van margin enzo).

EDIT: Overigens open je twee keer je <body> tag, dat klopt natuurlijk niet.
Klik om te vergroten...
kan mag ik eigg <BODY eraf laten en enkel background=" ..... zetten ?

ik zit echt in de begin fasen van alle stukkies ;)
alvast bedankt en hiermee ga ik aan de slag :)

Ladyke
 
Ladyke zei:
hoi,
is er dan een css editor ofzo want dit heb ik gedaan met html kit.
dit plaatje is een voorbeeld , wss komt er nog een ander .
Klik om te vergroten...

Nee, er is een aparte editor voor CSS, da's ook niet nodig, zelfs met notepad kun je een CSS bestand bewerken, ik neem aan dat dat met HTMLkit ook kan.


meen je dat nu echt van die center ? , ik heb een half jaar geleden een online cursus doorgenomen en heb dar daar geleerd :p
Klik om te vergroten...

Die was dan niet bij de tijd. Kijkt hier eens zou ik zeggen.


kan mag ik eigg <BODY eraf laten en enkel background=" ..... zetten ?
Klik om te vergroten...

Kun je doen, maar dan komt dat gewoon als losse tekst in je site te staan, het zal verder niets doen. CSS is toch echt de manier om een achtergrond in te stellen.
 
Laatst bewerkt:
hoi,
nu het is me tot hier gelukt maar ik krijg maar geen foto erbij,ik heb al verscillende dingen geprobeerd maar ik krijg ze niet ik in het midden van het witte gedeelte.
en hoe moet ik eigenlijk in de css een stukje late eindigen want ik wou de code die jij me had gegeven 2 maal in dezelfde gebruiken en toen werkte het niet meer :(

Ladyke
 
Ladyke zei:
hoi,
nu het is me tot hier gelukt maar ik krijg maar geen foto erbij,ik heb al verscillende dingen geprobeerd maar ik krijg ze niet ik in het midden van het witte gedeelte.
en hoe moet ik eigenlijk in de css een stukje late eindigen want ik wou de code die jij me had gegeven 2 maal in dezelfde gebruiken en toen werkte het niet meer :(

Ladyke
Klik om te vergroten...
Beetje vaag, wat heb je precies gedaan? Heb je die cursus van web-garden doorgelzen? Daarin staat uitgelegd hoe je een extern CSS bestand an kunt maken.
 
hoi,
ik heb je cursus doorgenomen en ik moet zeggen het valt precies wel mee :)
alleen zit ik een beetje vast :(

hgh.jpg

ik wil namelijk het deel van de ps vita in het witte deel zetten,
maar nu moet ik hierbij <div> gebruiken maar er sttat precies al eentje en ik weet niet goed he ik hem moet aanpassen om he zoals deze te krijgen .
het deel met de steren en de punten ga ik later doen maar als je me hierbij al een beetje een richting mee kan wijzen dan : :thumb:

dit is mijn code , ik weet da de css in de <head> staat maar dit is om iets sneller te kunnen oefenen , later gaan ze in een apart css filetje :thumb:

HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<style type="text/css">
<!--
img
{
position:absolute;
width:998px;
border-radius:10px;
left:452px;
top:0px;
z-index:-1;
}
-->
</style>
<style type="text/css">
<!--
div.ex
{
width:500px;
height:500px;
padding:250px;
border:1px solid black;
margin:250px;
background:#FFFFFF;
border-radius:10px;
}


body{
background-image:url('http://plussersherentals.webs.com/-%20New%20Folder%20(2)/dirt_3_2011_game-1920x1080.jpg');
background-repeat:no-repeat;
background-position:50% 0;
background-attachment:fixed;
background-color:black;
}
ul#list-nav {
list-style:none;

margin:-245px;
padding:0;
width:800px
}

ul#list-nav li {
display:inline;

}

ul#list-nav li a {
text-decoration:none;
padding:5px 0;
width:100px;
background:	#000A00;
color:#eee;
float:left;
text-align:center;
border-left:2px solid #fff;
}

ul#list-nav li a:hover {
background:#003300;

color:#fff
}

p{
color:black;
width:800px;
font-size:15px;
margin:100px;
}
h1{
color:black;
font-size:30px;
margin:100px;
}


-->
</style>



</head>
<body>


<CENTER><div class="ex">
<ul id="list-nav">
<li><a href="#">Home</a></li>
<li><a href="#">Trailers</a></li>
<li><a href="#">Consoles</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Reviews</a></li>
<li><a href="#">Wallpapers</a></li>
</ul>
<img src="http://plussersherentals.webs.com/-%20New%20Folder%20(2)/Gaming%20site%201%20-%20kopie.jpg" width="960" height="250">

<h1><b>Recente nieuwtjes</b></h1

<p>


</p>














</div></CENTER>
</body>
</html>

kan je me hierbij helpen ?

alvast bedankt
Ladyke
 
Om te beginnen, haal eens heel snel die <center> tag weg :)

Je moet bij het schrijven van de HTML rekening houden met hoe de site er uiteindelijk uit moet zien. Je hebt nu een afbeelding die bovenaan je pagina komt, tamelijk laag in de HTML staan, waardoor je hem met allerlei kunstgrepen weer naar boven moet brengen. Wat je kunt doen is een <div> maken met id="header" (bijvoorbeeld, het gaat erom dat het iets is wat je zelf makkelijk kunt onthouden) die je, met de afbeelding erin (of gewoon als achtergrondafbeedling), bovenaan de pagina hangt. Daaronder komt dan je menu, en daaronder dan weer een div, met daarin weer subdivs waarin dan je nieuwsberichtjes staan. Zoiets dus.

HTML: 
<ul id="menu">
<li>
Test
</li>
</ul>
<h1>Nieuwsberichten</h1>
<div id="nieuwsberichten">
<div class="nieuwsbericht">
<img src="" class="nieuwsafbeelding"/>
<p>verhaaltje over de psVita</p>
</div>

<div class="nieuwsbericht" >
    <img src="test.jpg" class="nieuwsafbeelding />
<p>verhaaltje over iets anders</p>
</div>

</div>
Met CSS breng je het geheel dan mooi op z'n plek

PS: Die <b> om je kop (wel goed afsluiten die <h1>) zijn niet nodig, kopteksten worden vanzelf dik gedrukt. Als je de weergave van een koptekst aan wilt passen kun je dat het beste via je CSS bestand doen.
 
oke cool ik begin het een beetje door te hebben.
maar nu ben ik weer achter iets gekomen,mijn laptop is al aan de iets oudere kant dus zijn scherm is 1280x800 dus alles staat helemaal verkeerd :(
ik heb de site op de vorm van, mijn vast scherm gemaakt dus dit is 1920x1080 dus een 24 inch.
is er dus en mannier dat de site zich automatisch aanpast aan de scherm grootte ?

Ladyke
 
yup, dimensies in percentages, in plaats van pixels opgeven.

Ook, belangrijk is dat je uitkijkt met het gebruik van position:absolute; en position:fixed;, als je die verkeerd gebruikt kunnen stukken van je site over elkaar heen gaan glijden.
 
oke daar gaan we ons ook mee bezig houden dan :)
jha idd heb ik gemerkt want ik krijg maar geen foto in het witte stukje , je kan geen <div> in een <div> gebruiken he ?
 
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan