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
-
11-01-2014, 22:54 #1
Particulier
- Berichten
- 112
- Lid sinds
- 18 Jaar
HTML CSS advies
-
In de schijnwerper
(SEO) Tekstschrijver nodig voor winstgevende teksten?Freelance / WerkLaravel / Wordpress - Top kwaliteit voor een gunstig tariefFreelance / WerkZeer ervaren programmeur beschikbaar | web, api & appFreelance / WerkStartpagina script V2.1 - WP plugin - Vernieuwd - Vele opties - V2.1 NU LIVEPHP scripts -
11-01-2014, 23:05 #2
Particulier
- Berichten
- 433
- Lid sinds
- 17 Jaar
Re: HTML CSS advies
Ik ben geen professionele baser. maar ik zou twee divs maken boven, een voor feyenoord en de ander voor het menu.
En dan de afbeelding met welkom in een div daaronder over de hele breedte.
-
11-01-2014, 23:33 #3
Particulier
- Berichten
- 45
- Lid sinds
- 13 Jaar
Re: HTML CSS advies
Ik zou 1 container div aanmaken (header); die geef je een top-border van 1px in het rood.
Daarin maak je 1 div die je centreert (en een class meegeeft), daar kan je logo in met bijv. een h1, rechts daarvan positioneer je het menu, dit kan volledig met een unordered list.
Onder die div, maar binnen je container maak je een div met volledige breedte waarin je die grijze afbeelding opneemt, die kun je vervolgens met html5 een cover geven zodat hij altijd past. Daarbinnen maak je weer een div, met de class van de eerdere div, zodat hij gecentreerd staat, waar je de witte tekst in kwijt kunt.
Ter verduidelijking van de html krijg je:
<header>
<div class="gecentreerd">
<h1>Feyenoord</h1>
<ul>
</ul>
</div>
<div class="achtergrondcontainer">
<div class="gecentreerd">
<h2>Verzameling</h2>
</div>
</div>
</header>
-
12-01-2014, 17:33 #4
Particulier
- Berichten
- 112
- Lid sinds
- 18 Jaar
Re: HTML CSS advies
Bedankt voor de tips hier kan ik wat mee
-
14-01-2014, 00:26 #5
Particulier
- Berichten
- 112
- Lid sinds
- 18 Jaar
Re: HTML CSS advies
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.
Code:<!doctype html> <html> <head> <meta charset="utf-8"> <title>Untitled Document</title> <link href="style.css" rel="stylesheet" type="text/css"> </head> <body> <div id="Center"> <div id="Header"> <div class="Headercenter"> </div> </div> </div> </body> </html>
Code:@charset "utf-8"; /* CSS Document */ /* main container */ #Center{ width: 100%; } #Header { border-top: 2px solid #000; } .Headercenter{ margin: 0 auto; width: 1576px; height: 246px; }
-
14-01-2014, 00:56 #6
Particulier
- Berichten
- 130
- Lid sinds
- 15 Jaar
Re: HTML CSS advies
body { margin:0px auto; padding:0px }
-
14-01-2014, 01:01 #7
Particulier
- Berichten
- 186
- Lid sinds
- 17 Jaar
Re: HTML CSS advies
#Header {
border-top: 2px solid #000; <-- Deze kleur zwart toevallig ;)
}
Edit:
Sorry, te snel gereageerd. Dacht dat de border weg moest. De oplossing die Hasan zojuist gaf zou moeten werken.
-
14-01-2014, 15:12 #8
Particulier
- Berichten
- 112
- Lid sinds
- 18 Jaar
Re: HTML CSS advies
Bedankt voor jullie reacties dat was de oplossing idd.
Het Design zelf in Photoshop is 1920x1900.
Voor de banner heb ik deze code gebruikt in css.
De maat van de banner is 1920x127 hoe krijg ik die mooi zodat hij helemaal past zonder dat ik naar rechts hoef te scrollen.Code:background:url(Images/banner.png) no-repeat center; width:1920px; height:127px;
met deze code lukt het wel maar dan heb je niet de volledige banner zeg maar je mist dan een stuk.
alvast bedankt voor jullie hulp allemaalCode:width:100%;
-
14-01-2014, 23:41 #9
Particulier
- Berichten
- 130
- Lid sinds
- 15 Jaar
Re: HTML CSS advies
@Robbert
Ik zelf maak gebruik van deze code in een van me websites:
min-height:340px; margin:0px auto; background: #fff url('img/bg.jpg') top center no-repeat; width:100%; background-size: 100%; //propotional resize
-
14-01-2014, 23:57 #10
Particulier
- Berichten
- 112
- Lid sinds
- 18 Jaar
Re: HTML CSS advies
Top die code werkt perfect. Ga hem voor me zelf uit pluizen die code zodat ik er nog wat van leer ook
-
14-01-2014, 23:59 #11
Particulier
- Berichten
- 130
- Lid sinds
- 15 Jaar
Re: HTML CSS advies
Mooi :) verder nog vragen horen we graag !
-
15-01-2014, 00:36 #12
Particulier
- Berichten
- 112
- Lid sinds
- 18 Jaar
Re: HTML CSS advies
Ben al een heel stuk verder dankzij je hulp. Nu het volgende de background krijg ik nu zo te zien.
Maar zo moet die worden
Heb al het al geprobeerd met de code
maar die werkt niet heb uiteraard in de vorige code van jou de maat aangepast van min-height:340 px naar 1900 px de maat van de achtergrond.Code:position:fixed;
-
27-01-2014, 23:43 #13
Particulier
- Berichten
- 112
- Lid sinds
- 18 Jaar
Re: HTML CSS advies
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
Hieronder zie je de css code die ik gebruikt heb in mijn body
Code:background-image:url('Images/bg.png');background-repeat:no-repeat; height:1900px; width: 100%; background-size: 100%; //propotional resize
