Probleem met "wrapper" background HTML5

Status
Niet open voor verdere reacties.

njoy1

Gebruiker
Lid geworden
12 nov 2011
Berichten
9
Hallo forumleden,

Ik ben voor het eerst bezig met het maken van een eigen website.
Het gaat allemaal prima alleen ik krijg mijn background voor de content niet helemaal zichtbaar.

Dit zie ik :
schermafbeelding2011111l.png


En dit is de bedoeling (dit is een photoshop bestand en hier is de zwarte background nog niet te zien):
schermafbeelding2011111q.png










Dit is de html code:
HTML:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html"; charset="UTF-8">
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link href="styles.css" rel="stylesheet" type="text/css">
<link href='http://fonts.googleapis.com/css?family=Varela|Open+Sans|Chivo' rel='stylesheet' type='text/css'>
<title>Portfolio Niek Volkert</title>

</head>
<body>

<div id="wrapper">
	 <logo>
	  <p>NIEK VOLKERT </p>
	 </logo>
     <onderheader>
     <p>WEBDESIGN & SOCIAL MEDIA</p>
     </onderheader>
</div>    
      
    
</body>
</html>

En dit is de CSS code
Code:
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code, dek, dfn, em, font, 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, {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
}



body {
	width:auto;
	height:auto;
	background-color:#000000;
	
}

#wrapper {
	background-image:url(images/bg.jpg);
	background-position:top;
	background-repeat:no-repeat;
}

logo {
	line-height:0 pt;
	font-family: 'Varela', sans-serif;
	text-align:center;
	color:#CCC;
	text-decoration:none;
	font-size:30px;
}

onderheader {
	font-size:10px;
	font-family: 'Varela', sans-serif;
	text-align:center;
	color:#CCC;
}

Weet iemand wat er mis is ?
 
Laatst bewerkt:
Hoi njoy1,
Behalve als een background-img in html- of body-style zit, wordt een background-img alleen als background getoond binnen de grenzen van het element waar het in zit.

Het element is de #wrapper. De #wrapper heeft geen opgekregen hoogte, dus wordt maar net zo hoog als zijn inhoud. De inhoud is alleen de <logo>-regel en de <onderheader>. Daaronder houdt de #wrapper dus op, en is ook zijn background niet meer te zien.

Aanschouwelijk gemaakt: zet maar eens een bordertje om de #wrapper heen:
#wrapper {border: 1px solid white;}
  • Meer over achtergronden en hun posities: De Patrijspoort-Theorie.
Met vriendelijke groet,
CSShunter
________
PS: In de html zitten een paar dingen niet snor, zegt de html-validator. Dat altijd eerst even wegwerken, om geen verrassingen tegen te komen.

En het is maar goed dat er een tikfout in de line-height van het logo zit, want bij een line-height van 0pt zou het helemaal mis gaan. ;) Dus ook de css-validator langs laten komen. :)
 
Laatst bewerkt:
Hallo csshunter,

heel erg bedankt voor je reactie,
Ik had de wrapper ook al een height en een width gegeven alleen ik had er geen px achter gezet (stomme beginnersfout).
De achtergrond is nu te zien alleen de background met de tekst erin word nu links uitgelijnt, en de background sluit ook niet aan op te top (dus er is nog een zwarte rand aan de bovenkant te zien).
Weet jij misschien een oplossing hiervoor?
 
de background sluit niet aan op de top
Als de reset-css, waarmee alle margins en paddings op nul gezet worden, er nog steeds in staat, zou dat niet mogen gebeuren (een testpagina bij mij doet het goed in alle browsers). - Tenzij tikfout. ;)

de background met de tekst erin word nu links uitgelijnd
Je bedoelt: de #wrapper staat nog steeds gecentreerd, maar de tekst er in staat links uitgelijnd i.p.v. ook gecentreerd?
Dat kan kloppen, want:
  1. <logo>...</logo> en <onderheader>...</onderheader> zijn eigengemaakte tags, die niet bestaan in de html5-specificatie, en waarop browsers dus niet hoeven te reageren: verboden voorwerpen.
  2. De html-validator signaleert dit dan ook ogenblikkelijk.
  3. M'n PS van de vorige post kennelijk nog niet uitgevoerd? Altijd mee beginnen! :) (zie ook mijn handtekening hieronder).
  4. O.a. Firefox, Chrome en IE9 reageren toch op de logo{text-align:center;} en de idem-dito voor de <onderheader>, dat zal de ingebouwde foutcorrectie zijn. - De zelfbedachte tags hinkelen een beetje tegen XML aan, maar het document is dat niet: dat wordt in het Doctype als HTML geserveerd.
  5. Bv. IE8 en eerdere IE's centreren niets, domweg omdat het geen valid html is (terwijl los daarvan de ondersteuning van html5 nog niet op orde is).
Met vriendelijke groet,
CSShunter
 
Ha CSShunter,

ik heb de pagina volgens html en css validator helemaal correct nu, er zaten wat foutjes in de <meta> tag in het begin en de <logo> en <onderheader> tags heb ik veranderd in <h1> en <h3> tags.

Nu heb ik alleen nog het centreer probleem. Ik zie nu zeg maar het photoshop ontwerp hierboven (2de plaatje) gewoon goed alleen het is helemaal links uitgelijnd op de zwarte achtergrond (dus helemaal links op foto 1).
Ik dacht dat dit dan aan de wrapper moest liggen en heb vanalles weer gedaan alleen krijg hem maar niet naar het midden toe ( en het frustrerende is dat het waarschijnlijk iets heel makkelijks is hehe)

Bedankt trouwens voor de links die je me hebt gegeven!
 
Ik heb het al gevonden! ,ik moest alleen een margin: o auto; toevoegen aan de #wrapper en nu is het goed.
Heel erg bedankt voor je hulp!
 
Hoi Niek,
Goed werk dat ie nu valid html en valid css is. :thumb:

Wat je ook nog eens zou kunnen proberen, of je het hele inpakpapier van de #wrapper niet gewoon kan missen.
Dan geef je aan de <body> de eigenschappen (breedte, hoogte, achtergrond, margins en paddings, enz.) van de #wrapper.
Want de <body> is de eigenlijke pagina, en tegenwoordig (al vanaf IE6) kunnen alle browsers daar goed mee overweg.
  • Voor die tijd (t.t.v. IE5 en IE5.5) lag dat anders: toen was css-ondersteuning door met name Internet Explorer nog nauwelijks aanwezig, en zat je gebakken aan <center>...</center> tags om een pagina goed gecentreerd te krijgen. Een tag die nu als "deprecated" (achterhaald en vrijwel verboden) met een grote boog in de prullenbak is verdwenen. Gelukkig maar! De {margin: 0 auto;} is een stuk beter, en ontsiert de html niet.
Als alles zo is ondergebracht in de body-styles, kan vervolgens de #wrapper er tussen uit gehaald worden, en kan je meteen beginnen met de <h1>.

O ja, als je na de <h1> meteen een <h3> header gebruikt, is dat waarschijnlijk om een kleiner lettertype te gebruiken. Maar eigenlijk mag je geen kop-niveau overslaan, en zou na de <h1> eerst een <h2> moeten komen. Met css kan je de <h2> dan net zo klein of groot maken als je zelf wilt.
  • De header-volgorde is belangrijk voor de structuur van de pagina. En ook voor zoekmachines: die stropen de pagina af op koppen en waarderen de woorden in een hoger gelegen kop-niveau hoger voor de ranking.
Met vriendelijke groet,
CSShunter
 
HELP !

Ik kwam er tijdens het werken aan de html achter dat ik de root folders niet zo netjes geordend had. Ik werk in dreamweaver en heb een nieuwe map aangemaakt en daar alle files ingezet, en alle afbeeldingen in de css geüpdatet.
Alleen als ik nu een preview wil krijgen van de website (via dreamweaver) krijg eerst een volgende foutmelding:
Started: 14-11-11 16:42

Connected to Portfoliowebsite Niek Volkert.
index.html - error occurred - An FTP error occurred - cannot put index.html. Access denied. The file may not exist, or there could be a permission problem. Make sure you have proper authorization on the server and the server is properly configured.

File activity incomplete. 1 file(s) or folder(s) were not completed.

Files with errors: 1
index.html

Finished: 14-11-11 16:42


En daarna op de browser een 404 error.

Ik baal er echt enorm van want de website vorderde nu echt snel.

Heb jij hier ervaring mee ?
 
Hoi Niek,
Groene Grutten! Hij kan de index niet uploaden, en die staat dan ook niet (meer) op de server.
- Nee, ik heb hier geen ervaring mee, want ik werk niet met Dreamweaver. *)

Misschien iemand anders?

Succes!
CSShunter
__________
*) Als het helemaal niet lukt met DW, en je wel via je Verkenner bij de index.html kunt komen, kan je 'm ook altijd uploaden buiten DW om, via bv. Filezilla (Client).
Zie ook de FileZilla-Gebruiksaanwijzing in dit topic.
 
Ik upload het nu op de server met een ander programma (gaat gelukkig weer goed). Ik loop nu alleen wel tegen een ander probeem:

Ik wil rechtsonder mijn pagina social media icons hebben op de volgende manier:

schermafbeelding2011111s.png


Alleen ik krijg ze maar niet omhoog geplaatst en 2 naast elkaar lukt ook niet.

schermafbeelding2011111at.png


Ik zal voor de handigheid ook maar mijn geüpdatete html en css posten:

De html
HTML:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link href="css/styles.css" rel="stylesheet" type="text/css">
<link href='http://fonts.googleapis.com/css?family=Varela|Open+Sans|Chivo' rel='stylesheet' type='text/css'>
<title>Portfolio Niek Volkert</title>
</head>

<body>

<div id="wrapper">
	 <h1>NIEK VOLKERT</h1>
     <h3>WEBDESIGN & SOCIAL MEDIA</h3>
     
<article>
      	<p class="content">
      	Welkom op mijn portfolio
      	</p>
      
<form method="post" action="php/index.php" class="contactformulier">
        		<p class="contact"> 
       			 Contact
        		</p>
      		<p>    
        	<label>Naam</label>
        	<input name="name" placeholder="Type hier uw naam">
        
       		<label>Email</label>
        	<input name="email" type="email" placeholder="voorbeeld@domein.nl">
        
        	<label>Bericht</label>
        	<textarea name="message" placeholder="Type hier uw bericht"></textarea>
      		</p>
      		<p>
        	<input id="submit" name="submit" type="submit" value="Submit">
      		</p>
    		</form>
            
        <ul class="socialmedia">
        
        <li><a href="http://www.facebook.com/niek.volkert"><img src="images/facebook.png" alt="Facebook" width="50" height="50"></a></li>
        <li><a href="http://twitter.com/NiekVolkert"><img src="images/twitter.png" alt="Twitter" width="50" height="50"></a></li>
        <li><a href="http://www.linkedin.com/pub/niek-volkert/2b/749/994"><img src="images/linkedin.png" alt="Linkedin" width="50" height="50"></a></li>
        </ul>

 </article>
    </div>
    
</body>
</html>

Code:
/* 
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com 
Twitter: @rich_clark
*/
/* BEGIN CSS RESET */
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

body {
    line-height:1;
}

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section { 
    display:block;
}

nav ul {
    list-style:none;
}

blockquote, q {
    quotes:none;
}

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

a {
    margin:0;
    padding:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

/* change colours to suit your needs */
ins {
    background-color:#ff9;
    color:#000;
    text-decoration:none;
}

/* change colours to suit your needs */
mark {
    background-color:#ff9;
    color:#000; 
    font-style:italic;
    font-weight:bold;
}

del {
    text-decoration: line-through;
}

abbr[title], dfn[title] {
    border-bottom:1px dotted;
    cursor:help;
}

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

/* change border colour to suit your needs */
hr {
    display:block;
    height:1px;
    border:0;   
    border-top:1px solid #cccccc;
    margin:1em 0;
    padding:0;
}

input, select {
    vertical-align:middle;
}
/* END CSS RESET */

body {
	background-image:url(../images/body1.jpg);
	background-repeat:repeat;
}

#wrapper {
	padding-top:10px;
	margin: 0 auto;
	width:1100px;
	height:1100px;
	background-image:url(../images/bg.jpg);
	background-repeat:no-repeat;
	border-bottom-left-radius:25px;
	border-bottom-right-radius:25px;
	
	
}

h1 {
	font-family: 'Varela', sans-serif;
	text-align:center;
	color:#CCC;
	text-decoration:none;
	font-size:30px;
	font-weight:300;
}

h3 {
	font-weight:100;
	font-size:10px;
	font-family: 'Varela', sans-serif;
	text-align:center;
	color:#CCC;
}

article {
	width:800px;
	height:1030px;
	background-image:url(../images/contentbg.png);
	background-repeat:no-repeat;
	background-position:center;
	margin: 0px auto;
	
}

.content {
	padding: 70px;
	font-family:"Century Gothic", "Courier New", Courier;
	color:#FFFFFF;
}

/* BEGIN CONTACTFORMULIER */
.contactformulier {

	width: 380px;
	height: 340px;
	margin: 445px 0 0 50px;
	
}

.contact {
	font-family: 'Varela', sans-serif ;
	color:#182841;
	font-size:25px;
	
}

label {
    display:block;
    margin-top:20px;
    letter-spacing:2px;
	font-family: 'Varela', sans-serif ;
	color:#333;
}

/* Style the text boxes */
input, textarea {
    width:320px;
    height:15px;
    background:#efefef;
    border:1px solid #dedede;
    padding:5px;
	color:#3a3a3a;
    margin-top:5px;
    font-size:0.9em;
    border-radius:5px;  
}

textarea {
	height:130px;
	background:url(images/textarea-bg.jpg) right no-repeat #efefef;
}

input:focus, textarea:focus {
    border:1px solid #97d6eb;
}

#submit {
    width:100px;
    height:25px;
	background:url(../images/submit.png);
	text-indent:-9999px;
    border:none;
    margin-top:10px;
    cursor:pointer;
}

	#submit:hover {
	    opacity:0.9;
	}


/* END CONTACTFORMULIER */

/* Social Media */

.socialmedia {
	margin-left:720px;
}
 
Ik zou 't in deze sfeer zoeken:
Code:
.socialmedia {
    float: right; /* dan is er ruimte om ze naast elkaar te krijgen */
    list-style: none; /* weg met de bullets */
    }
.socialmedia li {
    display: inline; /* zet ze in een hor. rijtje naast elkaar ipv vert. */
    }
.socialmedia img {
    padding: 5px; /* alle kanten gelijke afstanden rondom */
    }
#fb {
    display: block; /* facebook-item op eigen regel zetten */
    text-align: right; /* en rechts uitlijnen */
    }
met:
HTML:
<ul class="socialmedia">
    <li id="fb"><a href="http://www.facebook.com/niek.volkert">
        <img src="images/facebook.png" alt="Facebook" width="50" height="50"></a>
    </li>
    <li><a href="http://twitter.com/NiekVolkert">
        <img src="images/twitter.png" alt="Twitter" width="50" height="50"></a>
    </li>
    <li><a href="http://www.linkedin.com/pub/niek-volkert/2b/749/994">
        <img src="images/linkedin.png" alt="Linkedin" width="50" height="50"></a>
    </li>
</ul>
Komt dat in de buurt?
 
Ja dit komt zeker in de buurt. bedankt! alleen ik houd nog steeds het probleem dat ik de icons niet naar boven kan plaatsen. Horizontaal verschuiven kan wel.
Maar als ik bijvoorbeeld margin-bottom: 30px; erin zet dan komen er onder de icons 30px bij die de website eigenlijk langer maakt.
Ik denk dat iets anders in de weg zit waardoor het niet naar boven geplaatst kan worden?
 
Ja: een webpagina bouwt zichzelf standaard (in de "normal flow": van links naar rechts, van boven naar beneden) op als blokken onder elkaar, ook al hebben die blokken een bepaalde breedte.
Als je dan onderop meer margin-bottom toevoegt, gaat het geheel omhoog.

Je moet dan ook geen krik onder de social media plaatsen (margin-bottom), je moet ze omhoog hijsen met een hijskraan: van bovenaf optrekken.
Dat kan met de margin-top, die nu als default op nul staat. Omhoog hijsen gaat met een negatieve waarde.
  • Omdat de socialmedia-container gefloat is, en daarmee buiten de "normal flow" staat, kan dat zonder dat een linkerkant over het formulier komt te zitten en dat onbereikbaar zou maken.
Andere manier (die hier ook mogelijk is omdat de socialmedia-container gefloat is): het form-element ontdoen van zijn block-karakter, door dit een {display:inline-block;} of een {float:left;} te geven: dan kan het socialmedia-blokje erlangs.
En zoef! Daar schieten de socialmedia-figuurtjes omhoog! :) En nu heb je juist een margin-top nodig om ze weer naar beneden te krijgen.
  • Hulpmiddel bij het bepalen waar wat zit: aan alle elementen een border-kleurtje geven.
Vraagje uit nieuwsgierigheid: vanuit welke theoretische basis ben je bezig deze pagina te bouwen?

Met vriendelijke groet,
CSShunter
 
Ik studeer digitale communicatie en heb 2 keer voor mijn studie een website moeten bouwen. Dit is alweer een tijd geleden en probeer het nu weer op te pakken door een eigen website te maken.
En ik ben je dan ook heel dankbaar dat je me af en toe kan helpen bij een aantal zaken :) !
 
Juistem, maar dat was niet helemaal de vraag. ;)
De vraag was, vanuit welke theorie-achtergrond (boek, syllabus, enz.) je bezig bent.
Achtergrond van de vraag: je vragen hier zijn nogal basic, en als je er serieus werk van wilt maken, lukt het niet zonder theorie.
  • Het lijkt nu een beetje alsof je zonder rijschool op een afgelegen parkeerterreintje zelf aan het oefenen bent in het achteruit inparkeren, en dan af en toe je mobieltje pakt om een helper te vragen "welke kant moet ik het stuur nu opdraaien?". :p
Als je eerder in je studie niet aan je lot bent overgelaten om een site te bouwen (dat gebeurt ook: "zoek maar uit hoe je het doet"), zou ik nog 's driftig de toen aangeboden leerstof ophalen. Het kan ook dat het theorie-aanbod op de opleiding matig tot slecht van kwaliteit was (ook dat komt helaas voor: soms erg verouderde literatuur).
In elk geval:
webdesign-boek.png
Kan je hiermee even voort? :)

Met vriendelijke groet,
CSShunter
________
PS: Om de pagina in één oogopslag te kunnen zien, is een minimale schermhoogte van 1100px nodig (de #wrapper-hoogte). Je weet dat je huidige ontwerp op een 1024*768px scherm (nog behoorlijk in omloop) zo ongeveer dit oplevert?:

niek-formaat-a.png

Je moet een hele schermhoogte naar beneden scrollen voordat je wat kunt zien:

niek-formaat-b.png

Niet iedereen heeft een kantelscherm!
 
Laatst bewerkt:
Nee ik weet dat niet iedereen een hoge resolutie scherm heeft maar ik vond het mooi om hem 1100 bij 1100 te maken voor een portfolio site.
Het klopt wel een beetje wat je zegt, ik moet er eigenlijk ook zelf meer achter zien te komen maar dat probeer ik nu ook alleen sommige dingen lukken dan echt niet.

Ik heb hier een html boek van vorig jaar liggen en een php boek van Patrick Verhaert weet niet of je daar bekend mee bent.

Maar vanaf nu gaat het denk ik wel weer grotendeels lukken :)

bedankt !
 
Status
Niet open voor verdere reacties.
Terug
Bovenaan Onderaan