login  Naam:   Wachtwoord: 
Registreer je!
 Forum

HTML CSS advies (Opgelost)

Offline antrax - 11/01/2014 20:55
Avatar van antraxLid Hallo Ik ben weer begonnen met een psd template om te zetten naar HTML CSS om weer wat meer kennis op te doen. Maar nu zit ik met een probleem.
Dit is de template die ik aan het omzetten ben
Hoe kan ik het beste deze header+menu omzetten naar html css
Header+menu

Ik zelf dacht aan een Header div en die weer centreren en binnen in die div weer aparte div elementen voor menu ect.

Graag jullie advies

10 antwoorden

Gesponsorde links
Offline Thomas - 11/01/2014 21:22 (laatste wijziging 11/01/2014 21:25)
Avatar van Thomas Moderator Maar, moet die header (die donkere welkom-balk dus) zo breed zijn als het scherm, of heeft deze ook een vaste breedte? De rest van de pagina (menu + content) lijkt een vaste breedte te hebben?

Als de header 100% breed moet zijn en de rest van de pagina een vaste breedte heeft (en horizontaal gecentreerd is) is het wellicht een idee om in "de rest van de pagina" een uitsparing te maken voor een absoluut gepositioneerde header?

Veel hangt denk ik af van of zaken relatieve (percentages) of absolute (pixels) breedtes hebben, een combinatie van kan de boel gecompliceerd maken. Als alles vaste breedtes heeft kun je ook zoiets doen:

wrapper div (die alles centreert)
<padding>kop +menu<padding>
welkom-balk over de hele breedte
<padding>content<padding>
footer
einde wrapper div

En als je die welkom-balk uit de "flow" haalt door deze een absolute positionering te geven kun je wellicht ook zoiets doen:

wrapper div
<padding>kop +menu<padding>
<-- hier een uitsparing door kop of content extra padding/margin te geven -->
<padding>content<padding>
footer
einde wrapper div
(absoluut gepositioneerde) welkom-balk over de hele breedte (die hierboven wordt afgedrukt)

EDIT: of zonder padding dus:
wrapper div
kop+menu
<-- hier een uitsparing door kop of content extra padding/margin te geven -->
content
einde wrapper div
footer
(absoluut gepositioneerde) welkom-balk over de hele breedte (die hierboven wordt afgedrukt)
/EDIT


Ik ben niet echt een designer maar als je geen speciale doelen voor ogen hebt (super toegankelijke site of helemaal toegespitst op zoekmachine optimalisatie) dan zou ik het in ieder geval zo simpel mogelijk houden :-). Kun je het later ook gemakkelijker aanpassen als je er bij nader inzien toch niet tevreden over bent.
Bedankt door: antrax
Offline antrax - 14/01/2014 00:23
Avatar van antrax Lid Ik loop nu tegen het volgende probleem aan op de screenshot hier onder zie je een zwarte lijn.
Maar boven die zwarte lijn zit een kleine witte ruimte tussen net als bij de zijkant. Nu is mijn vraag hoe los ik dat op dat die witte ruimtes weg zijn.
Screenshot van Probleem

Dit is de code die ik gebruik.
html4strict code - Bekijk de code zonder highlighting - Klap code in 
  1. <!doctype html>
  4. <meta charset="utf-8">
  5. <title>Untitled Document</title>
  6.  
  7. <link href="style.css" rel="stylesheet" type="text/css">
  8. </head>
  9.  
  11. <div id="Center">
  12. <div id="Header">
  13. <div class="Headercenter">
  14.  
  15. </div>
  16. </div>
  17. </div>
  18. </body>
  19. </html>


css code - Bekijk de code zonder highlighting - Klap code in 
  1. @charset "utf-8";
  2. /* CSS Document */
  3.  
  4. /* main container */
  5. #Center{ width: 100%; }
  6.  
  7. #Header {
  8. border-top: 2px solid #000;
  9. }
  10.  
  11. .Headercenter{
  12.  margin: 0 auto; 
  13.  width: 1576px; 
  14.  height: 246px;
  15. }
Offline Thomas - 14/01/2014 11:12 (laatste wijziging 14/01/2014 12:00)
Avatar van Thomas Moderator Ik denk dat dat de margin van de body is?

Voeg het volgende toe:
css code - Bekijk de code zonder highlighting - Klap code in 
  1. body { margin: 0; }


EDIT: let er wel op dat "width: 100%" in je Center div de breedte van je scherm is, en niet noodzakelijkerwijs "zo breed als het grootste onderliggende element". Dit kan dus minder zijn dan 1576px (je Headercenter class), zoals op het scherm van mijn laptop het geval is.

Als je nu van die Headercenter class je buitenste div maakt, is deze door margin: 0 auto; (waar deze class al gebruik van maakt) ook meteen horizontaal gecentreerd, mits er ruimte over is uiteraard .

Vervolgens kun je de header hier weer in stoppen (verwijder dus de height uit de Headercenter class). De Headercenter class gebruik je als wrapper voor de rest van je divs en hiermee regel je precies twee zaken:
- het definieren van een vaste breedte
- het centreren van je hele site

EDIT2: De meeste moderne browsers hebben ingebouwde / downloadbare mogelijkheden voor het inspecteren van elementen op een pagina (meestal onder de F12-toets). Hiermee kun je de structuur + bijbehorende stijlen supersnel verkennen en zelfs "realtime" in de cache manipuleren, om direct, visueel te zien wat voor effect deze wijzigingen hebben. Dit kan heel handig zijn als je een pagina aan het ontwikkelen bent, of snel uit wil zoeken hoe iemand anders een pagina heeft opgezet. Persoonlijk ben ik liefhebber (in ieder geval voor ontwikkelen) van Firefox i.c.m. firebug.
Offline antrax - 14/01/2014 15:10 (laatste wijziging 14/01/2014 15:11)
Avatar van antrax Lid
FangorN schreef:
Ik denk dat dat de margin van de body is?

Voeg het volgende toe:
[..code..]


Dat was idd de oplossing bedankt.

Voor de Center div heb ik nu deze code gebruikt om te Centreren dat is de maat van het middenblok met content zegmaar.
css code - Bekijk de code zonder highlighting - Klap code in 
  1. { margin: 0 auto; width:1576px; }


Het Design zelf in Photoshop is 1920x1900.

Voor de banner heb ik deze code gebruikt in css.
css code - Bekijk de code zonder highlighting - Klap code in 
  1. background:url(Images/banner.png) no-repeat center; 
  2. 	width:1920px;
  3. 	height:127px;

De maat van de banner is 1920x127 hoe krijg ik die mooi zodat hij helemaal past zonder dat ik naar rechts hoef te scrollen.

met deze code lukt het wel maar dan heb je niet de volledige banner zeg maar je mist dan een stuk.
css code - Bekijk de code zonder highlighting - Klap code in 
  1. width:100%;


iedergeval bedankt voor je hulp tot nu toe
Offline Thomas - 14/01/2014 15:48 (laatste wijziging 14/01/2014 15:52)
Avatar van Thomas Moderator Uhm, je banner is sowieso breder dan je Center div, dus daar past 'ie sowieso niet in.

100% is relatief. Zo is 100% op mijn laptoppie 1366 (tijd voor een nieuwe ).

Wat je nog zou kunnen doen is de banner plaatsen als background van je body (tenzij hier al een andere background in zit?), maar de enige manier om te garanderen dat je de hele background ziet (bijvoorbeeld voor als de horizontale resolutie lager is) is de background in een div zetten die even breed is als deze background.

Je kunt overwegen om voor meerdere resoluties een layout te maken, maar dat is meer werk. Of je stelt dus een eis aan de resolutie die gebruikers minimaal moeten ondersteunen als ze je site bekijken.

EDIT: En als je je banner precies wilt laten passen op 1920 x ... dan moet deze iets minder breed zijn dan 1920, tenzij je je pagina's niet hoger maakt dan je schermhoogte... Anders bent je sowieso wat horizontale ruimte kwijt voor de verticale scrollbalk .
Offline antrax - 14/01/2014 21:21 (laatste wijziging 28/01/2014 00:49)
Avatar van antrax Lid Na het project even te laten rusten ben ik vol goeie moed weer verder gegaan maar het wil nog steeds niet echt lukken ben er nu wel bijna maar zit nog met een probleem.
De achtergrond image is hellemaal te zien nu maar na de achtergrond image is er een heel wit vlak die ik niet weg krijg.
Ik hoop dat iemand mij kan helpen met het weg krijgen van dat witte vlak alvast bedankt voor de hulp.

klik op de afbeelding zodat het misschien wat duidelijker wordt
Afbeelding van probleem

Hieronder zie je de css code die ik gebruikt heb in mijn body
css code - Bekijk de code zonder highlighting - Klap code in 
  1. background-image:url('Images/bg.png');background-repeat:no-repeat;
  2. height:1900px;
  3. width: 100%;
  4. background-size: 100%; //propotional resize
Offline Thomas - 28/01/2014 10:17
Avatar van Thomas Moderator Als ik w3schools mag geloven (en het goed begrepen heb) dan heeft de manier waarop jij background-size gebruikt het effect dat de afbeelding zo breed wordt gemaakt als de ruimte waar deze (achtergrond)afbeelding in staat, met behoud van de verhouding. Oftewel jouw declaratie "background-size: 100%;" is equivalent aan "background-size: 100% auto;" (100% van de breedte, automatische hoogte - deze wordt dus afgestemd op de breedte).

Wellicht is dit opgelost als je "background-size: 100% 100%;" gebruikt? Maar dan krijg je dus mogelijk een vertekende afbeelding. Maar als je een vaste hoogte gebruikt (het lijkt hier op?) dan kan de vertekening meevallen.

En als dit het allemaal niet is heb ik je vraag niet goed begrepen . Wat wil je (in dat geval) precies bereiken en wat gebeurt er (niet)? Wellicht helpt het dan ook als je wat meer broncode meestuurt.
Offline antrax - 28/01/2014 15:29
Avatar van antrax Lid
Heb de bestanden online gezet zodat je de broncode kan zien hoe die nu is.
vakz4v2

Het bovenste witte vlak dat hoort wit te zijn alleen dat witte vlak onderaan na de afbeelding dat hoort niet wit te zijn.
Offline Thomas - 28/01/2014 15:58
Avatar van Thomas Moderator Okay, maar wat zou dit dan wel moeten zijn? Moet de achtergrond-afbeelding over de hele hoogte (1900px) gestrekt worden? Moet deze een (grijze?) achtergrond kleur hebben? Iets anders?

Als je het eerste wilt (afbeelding over volledige breedte en hoogte strekken) moet je, zoals ik al eerder zei, het volgende doen:

background-size: 100% 100%;

---

Ik denk dat je me verkeerd begrepen hebt. Wat je oorspronkelijk had:

background-size: 100%;

Is equivalent met:

background-size: 100% auto;

Als je background-size: 100%; vervangt door background-size: 100% auto; verandert er dus effectief niets .

Ik zou trouwens eerder een vaste breedte hanteren dan een vaste hoogte. Hoogtes zijn vaak variabel in dynamische webpagina's (pagina's waar een scriptingtaal achter steekt).
Offline antrax - 28/01/2014 16:24
Avatar van antrax Lid background-size 100% 100% is de oplossing bedankt voor al je hulp.
Gesponsorde links
Je moet ingelogd zijn om een reactie te kunnen posten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.225s