Archief - Achtergrondafbeelding wordt niet gecentreerd

Sw@tLorD · 17 okt 2013

Beste heren,

Na enige tijd afwezigheid in het milieu (html) zou ik graag voor een kennis een kleine informatieve website maken over audiodesciptie. Ik heb mijn lay-out al klaar, maar ik krijg mijn achtergrondafbeelding niet gecentreerd. Dit is de code die ik voorlopig heb:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>W.I.P.</title>

<style type="text/css">

body {
background-image: url(index%202%20pic);
background-repeat: no-repeat;
background-position: center center;
margin: auto;
}

</style>

<link rel="stylesheet" href="cssmenutools/scripts/MTHM.css" type="text/css" />
</head>

<body bgcolor="#B2B2B2" text="#000000" link="#333333" vlink="#333333">
<body>

<div id="MTHMFGYNRVADiv" class="MTHMFGYNRVAwrapper" style="maring: 0 auto;">
<div id="MTHMFGYNRVATop" class="MTHMFGYNRVAtop">
<ul>
<li class="MTHMFGYNRVAitem1" style="margin-left:auto"><a href="#"><span>Products</span></a></li>
<li class="MTHMFGYNRVAitem1"><a href="#"><span>Download</span></a></li>
<li class="MTHMFGYNRVAitem1"><a href="#"><span>Purchase</span></a></li>
<li class="MTHMFGYNRVAitem1"><a href="#"><span>Support</span></a></li>
<li class="MTHMFGYNRVAitem1"><a href="#"><span>Company</span></a></li>
</ul>
</div>
<script type="text/javascript" src="cssmenutools/scripts/MTHM.js">/* MTHMMenu script ID:MTHMFGYNRVA */</script>

</div>

</body>
</html>

Kan iemand zeggen wat ik verkeerd doe aub? Zo ziet het er nu uit : http://users.skynet.be/fd132257/

De achtergrondafbeelding is helemaal naar boven verschoven

adrianhates · 17 okt 2013

body {
background-image: url("index%202%20pic");
background-position: center 0;
background-repeat: no-repeat;
margin: auto;
}

sorry to be rude, maar wat is enige tijd?
Uw code trekt namelijk op ni veel en staat vol fouten. Leer eerst de basics

- geen inline styles gebruiken of zoveel mogelijk vermijden
- 1 body element zal het wel doen
- check uw site op spelfouten ( alsook in de code/markup )
- drop transitional en ga naar een nieuwere doctype
- ..

ik raad ook het gebruik van een tool zoals firebug of chrome developer tools aan. Zo kunt ge on the fly dingen uitproberen en aanpassen.

edit: nvm, had te snel gelezen, als je al enige tijd afwezig bent kan ik het u zeker niet kwalijk nemen

Maar uw fouten zijn wel zeer fundamentele fouten hoor.

Sw@tLorD · 17 okt 2013

Ik moet toegeven dat ik dreamweaver cs5 gebruik, en dat dit hier allemaal door dreamweaver is opgesteld. Ik dacht juist zo'n programma t gebruiken om geen fouten te maken, maar blijkbaar verwacht ik te veel.

Hieraan heb ik gisteren 2u liggen vloeken.

EDIT: Bedankt voor je hulp! Dit is net wat ik wou!

Sw@tLorD · 17 okt 2013

Welke code gebruik ik om bvb het menubalkje mee te centreren en later de tekstvakken ook?

Fransz · 19 okt 2013

Sw@tLorD · 20 okt 2013

Ondertussen moet ik een verticale menu maken, en is de layout ook aangepast ... maar ik krijg mijn layout niet op een vaste plak. Als ik bvb ctrl + scroll gebruik om in te zoomen of uit te zoomen, dan beweegt het css menu mee over het scherm. Ik zou het menu een vaste positie willen geven t.o.v. de achtergrond. Hoe kan ik dat in orde brengen?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>W.I.P.</title>

<style type="text/css">

body {
background-image: url(Untitled%20-%206.jpg);
background-position: center 0;
background-repeat: no-repeat;
margin: auto;
background-color: #EBEDEC;
}

</style>

<link rel="stylesheet" href="cssmenutools/scripts/MTHM.css" type="text/css" />
<style type="text/css">

</style>
<link rel="stylesheet" href="cssmenutools/scripts/MTVM.css" type="text/css" />
</head>
<body link="#FFFFFF" vlink="#CCCCCC">
<h1>
<div id="MTVMTeNIBWADiv" class="MTVMTeNIBWAwrapper">
<ul class="MTVMTeNIBWAtop">

<li class="MTVMTeNIBWAitem1" style="margin-top:0px "><a href="#">Welkom</a></li>
<li class="MTVMTeNIBWAitem1"><a href="#">Wie zijn wij</a></li>
<li class="MTVMTeNIBWAitem1"><a href="#">Projecten</a></li>
<li class="MTVMTeNIBWAitem1"><a href="#">Agenda</a></li>
<li class="MTVMTeNIBWAitem2"><a href="#">Info</a>
<ul style="display:none">
<li>Slechtzienden</li>
<li>Theaters</li>
<li>Subsidies</li>
</ul>
</li>
<li class="MTVMTeNIBWAitem1"><a href="#">Contact</a></li>
</ul>
<script type="text/javascript" src="cssmenutools/scripts/MTVM.js">/* MTVMMenu script ID:MTVMTeNIBWA */</script></div>
</h1>

</body>
</html>

Scissor · 20 okt 2013

Eerlijk gezegd raad ik je het volgende aan:
- Smijt die dreamweaver in de vuilbak
- Begin zelf eerst wat te lezen/oefenen over de basis html/css
- oefen, probeer, google

Als je dan nog met een specifiek probleem zit, kom hier gerust vragen. De code die je nu hebt doen mijn ogen een beetje bloeden, dus zie eerst dat je zelf tenminste de basis hebt als je een website wil maken. Vind je dat teveel tijd/moeite, geen enkel probleem, maar dan zou ik niet aan vrienden beloven dat je een website voor hen kan maken.

Sw@tLorD · 20 okt 2013

Ik begrijp jullie standpunt wel. Spijtig dat niemand een duwtje in de rug wilt geven zodat ik gewoon verder kan.
Ik heb niemand iets beloofd, ik heb enkel gezegd dat ik het wou proberen en ik mocht het doen. Ik ben volop aan het zoeken op google, maar geen enkele van de voorgestelde oplossingen heeft kunnen helpen.

Ik zoek wel verder. Toch bedankt

Scissor · 20 okt 2013

Je zoekt gewoon op google: HTML beginner tutorial of CSS3 beginner tutorial? Het probleem wordt hierboven al aangekaart
- je gebruikt inline styles
- je code ziet er verschrikkelijk uit met overal overbodige tags en weet'k nog wat allemaal. Een klein greep uit het aanbod

- je doctype is verouderd
- je verwijst naar een extern stylesheet maar je schrijft al je css toch in je html document?
- je gebruikt css in je html - elementen. Probeer deze gescheiden te houden, daarom dient net een apart stylesheet
- waarom verwijs je 2x naar je stylesheet?
- je heading 1 tag (h1) zit rondom heel je div?? (en zelf rond je script tags?)

Zoals'k al zei: er zijn hier genoeg mensen die gerust willen helpen, maar de basis leer je eerst zelf en als mensen opmerkingen geven dan ga je er liefst ook mee aan de slag. Anders leer jij er zelf niks van bij.

die What you see is what you get (wysiwyg) editors zoals Dreamweaver worden nauwelijks gebruikt omdat die voor bijzonder onleesbare en rommelachtige code zorgen. Zoiets kan je in 2 seconden zelf schrijven met een beetje html kennis. Gooi dit dus in de vuilbak en begin van 0.

Sw@tLorD · 20 okt 2013

Ik heb getracht de code wat op te kuisen.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>W.I.P.</title>

<style type="text/css">

body {
background-image: url(Untitled%20-%206.jpg);
background-position: center 0;
background-repeat: no-repeat;
margin: auto;
background-color: #336699;
}

</style>

<link rel="stylesheet" href="cssmenutools/scripts/MTVM.css" type="text/css">

</head>

<div id="MTVMTeNIBWADiv" class="MTVMTeNIBWAwrapper" >
<ul class="MTVMTeNIBWAtop">
<li class="MTVMTeNIBWAitem1"><a href="#">Welkom</a></li>
<li class="MTVMTeNIBWAitem1"><a href="#">Wie zijn wij?</a></li>
<li class="MTVMTeNIBWAitem1"><a href="#">Projecten</a></li>
<li class="MTVMTeNIBWAitem1"><a href="#">Agenda</a></li>
<li class="MTVMTeNIBWAitem2"><a href="#">Info</a></li>
<li class="MTVMTeNIBWAitem1"><a href="#">Contact</a></li>
</ul>
<script type="text/javascript" src="cssmenutools/scripts/MTVM.js">/* MTVMMenu script ID:MTVMTeNIBWA */</script>
</div>

</body>
</html>

CrushTheButton · 20 okt 2013

De code ziet er al stukken beter uit, het probleem dat je aanhaalde is nogal moeilijk op te lossen (in mijn ogen althans). De achtergrond zal altijd reageren als je in of uitzoomt. Wat je kan doen is als je bijvoorbeeld je inhoud allemaal in de witte blok wilt. Dan kan een div aanmaken die een bepaalde breedte draagt en vervolgens wijs je aan die div een achtergrond toe die dan die witte blok is. Wanneer je dan in of uitzoomt zal alles in verhouding meegaan met elkaar. Behalve de body achtergrond dan wel te verstaan.

Ik hoop dat je snapt waar ik heen wil.

Sw@tLorD · 20 okt 2013

Dat is dan het probleem van html. Als dit flash zou zijn, dan had het geen probleem geweest zeker?
De website moet toegankelijk worden voor slechtzienden. Dat betekent dat deze persoon moet kunnen inzoomen (ctrl + scroll). Dat menu kan je op zich wel vastzetten op een bepaalde positie vanaf de marge, maar die marge beweegt mee natuurlijk.

Ik snap je, maar gaat die DIV dan niet mee verschuiven zodat die blok opeens wel uit de achtergrond springt?

woony · 21 okt 2013

mss als eens beginnen met een <body> tag???

Fransz · 21 okt 2013

Je gebruikt html5 dus dan zou ik die divs veranderen. Die css mag ook volledig external.

Sw@tLorD · 21 okt 2013

Door van alles naar mijn hoofd te slingeren weet ik echt niet wat jullie bedoelen. Opbouwende kritiek aub. Ik ben een leek in vergelijking met de meesten hier.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>W.I.P.</title>

<style type="text/css">

body {
background-image: url(Untitled%20-%206.jpg);
background-position: center 0;
background-repeat: no-repeat;
margin: auto;
background-color: #336699;
}

</style>

<link rel="stylesheet" href="cssmenutools/scripts/MTVM.css" type="text/css">

</head>

<body>

<div id="MTVMTeNIBWADiv" class="MTVMTeNIBWAwrapper">

<ul class="MTVMTeNIBWAtop">
<li class="MTVMTeNIBWAitem1"><a href="#">Welkom</a></li>
<li class="MTVMTeNIBWAitem1"><a href="#">Wie zijn wij?</a></li>
<li class="MTVMTeNIBWAitem1"><a href="#">Projecten</a></li>
<li class="MTVMTeNIBWAitem1"><a href="#">Agenda</a></li>
<li class="MTVMTeNIBWAitem2"><a href="#">Info</a></li>
<li class="MTVMTeNIBWAitem1"><a href="#">Contact</a></li>
</ul>
<script type="text/javascript" src="cssmenutools/scripts/MTVM.js">/* MTVMMenu script ID:MTVMTeNIBWA */</script>

</div>

</body>
</html>

Body inderdaad over het hoofd gezien. Is nu toegevoegd. Thx

EDIT: Blijkbaar heb ik het nog in orde kunnen brengen door een body { ... } toe te voegen.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>W.I.P.</title>

<style type="text/css">

body {
background-image: url(Untitled%20-%206.jpg);
background-position: center 0;
background-repeat: no-repeat;
margin: auto;
background-color: #336699;
}

</style>

<link rel="stylesheet" href="cssmenutools/scripts/MTVM.css" type="text/css">

<style type="text/css">

body {
position:relative;
left:-590px;
right:-3px;
top:150px;
width:0px;
height:100px;
z-index:-56;
}
</style>

<body>

<div id="MTVMTeNIBWADiv" class="MTVMTeNIBWAwrapper">

<ul class="MTVMTeNIBWAtop">
<li class="MTVMTeNIBWAitem1"><a href="#">Welkom</a></li>
<li class="MTVMTeNIBWAitem1"><a href="#">Wie zijn wij?</a></li>
<li class="MTVMTeNIBWAitem1"><a href="#">Projecten</a></li>
<li class="MTVMTeNIBWAitem1"><a href="#">Agenda</a></li>
<li class="MTVMTeNIBWAitem2"><a href="#">Info</a></li>
<li class="MTVMTeNIBWAitem1"><a href="#">Contact</a></li>
</ul>
<script type="text/javascript" src="cssmenutools/scripts/MTVM.js">/* MTVMMenu script ID:MTVMTeNIBWA */</script>

</div>
</body></head>
</html>

Shigato · 25 okt 2013

Fransz zei:
Je gebruikt html5 dus dan zou ik die divs veranderen. Die css mag ook volledig external.

En wat heeft het gebruik van HTML5 te maken met het verwijderen van divs?
Nog nooit gehoord dat er niet gewerkt mag worden met divs in Html5 ^^

Shigato · 25 okt 2013

Ok, laat ik het effe opklaren.

Je doctype helemaal bovenaan is verouderd.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

kan je gewoon veranderen door

Code:

<!DOCTYPE html>

wat de doctype voor de recente html5 is.

Code:

<style type="text/css">




body {
background-image: url(Untitled%20-%206.jpg);
background-position: center 0;
background-repeat: no-repeat;
margin: auto;
background-color: #336699;
}


</style>

Als ik dit zou doen krijg je een dikke vette 0. Css intern in je html wordt niet meer gedaan.
Stel je eens voor dat facebook in elke pagina alle css moet gaan plaatsen..
zouden nogal wat pagina's zijn. Werkt natuurlijk prima, maar je moet weten dat er ook stijlregels zijn.
Bekijk W3C maar eens, vind je ook veel informatie over en zelfs tutorials.
Ik zou zeggen gooi die blok css is een apart css bestandje en link die dan aan je html met

Code:

<link rel="stylesheet" href="link/to/css/file.css" type="text/css">

Verder kan ik je ook nog aanraden van ergens een reset.css te zoeken

Code:

/**
* Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/)
* http://cssreset.com
*/

html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display: block;
}

body {
    line-height: 1;
}

ol, ul {
    list-style: none;
}

blockquote, q {
    quotes: none;
}

blockquote:before, blockquote:after,q:before, q:after {
    content: '';
    content: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

dit is er één die ik persoonlijk gebruik, met al de verschillende browsers
deze tijd gebruiken ze allemaal hun eigen standaard css op je pagina.
Met dit zet ie alles terug op basis zodat het er overal hetzelfde uitziet.

verder dit nog:

Code:

</div>
</body></head>
</html>

Je head sluit je voor je de body opent,
die </head> mag dus helemaal niet onderaan je html staan,
maar moet net boven je <body> staan.

Dan zie ik nog iets staan, waarom zou je 2x een style maken voor het zelfde element?
Je maakt twee keer een style aan voor je body.

Als ik even heel eerlijk mag zijn en je wilt echt iets met webdesign gaan beginnen.
Begin even met het lezen van de basis
Na de basis html kan je verder gaan naar html5

En uiteindelijk naar CSS & CSS3

Als je dit allemaal hebt gedaan verzeker ik je dat wel je plan kan trekken
en basis statische websites kan maken.

EDIT: Nog even vergeten melden, de volgorde waarin je css bestanden linkt doet er wel degelijk toe.

Als je die reset.css helemaal onderaan zou zetten zou deze al je stijlen / de meeste terug op de standaar zetten. Let daar dus wel goed op wanneer je met meerdere css bestanden zou beginnen werken

Archief - Achtergrondafbeelding wordt niet gecentreerd

Sw@tLorD

Legacy Member

adrianhates

Legacy Member

Sw@tLorD

Legacy Member

Sw@tLorD

Legacy Member

Fransz

Legacy Member

Sw@tLorD

Legacy Member

Scissor

Legacy Member

Sw@tLorD

Legacy Member

Scissor

Legacy Member

Sw@tLorD

Legacy Member

CrushTheButton

Legacy Member

Sw@tLorD

Legacy Member

woony

Legacy Member

Fransz

Legacy Member

Sw@tLorD

Legacy Member

Shigato

Legacy Member

Shigato

Legacy Member