Hallo ik ben bezig met een site aan het omzetten naar html css.
Nu zit ik met het volgende probleem.
Op het onderstaande plaatje zie je een header/achtergrond nu is mijn vraag hoe krijg ik die het beste mooi omgezet in html/css
Ik gebruik nu deze code.
Code:<!DOCTYPE html><html> <head> <title>Verzameling</title> <link rel="stylesheet" href="style.css" type="text/css" /> </head> <body> <!-- / wrapper \ --> <div id="wrapper"> <div id="center"> <header id="header"> <a class="logo" href="#"><img src="https://www.sitedeals.nl/images/logo.png" alt=""></a> </header> <!-- \ Header / --> </div> </div> </body> </html>Code:/* ### general ### */ *{padding: 0px; margin: 0px;} html, body { font-family:Open Sans;font-size: 14px; color: #1d1d1d; } input, select, textarea { font-family:Open Sans;font-size: 14px; color: #1d1d1d; } body{background: url(images/bg.png); border-top: solid 4px #db0000;} #center{ width:960px;margin:0 auto; } /* ### wrapper ### */ #wrapper { position: relative; float: left; width: 100%; min-height: 100%; } /* ### Header ### */ #header{ position: relative;width:1300px; height: 165px; background: url(images/header.png)no-repeat; float:right; } #header a.logo { position: absolute; top: 55px; display: block; width: 196px; }
Op de screenshot hier onder zie je hoe het er nu uitziet bij mij het staat niet helemaal goed de tekst FRVerzameling staat te veel naar rechts. Weet niet of het ermee te maken heeft dat ik een 29 inch widescreen scherm op mijn pc heb aangelsoten.
Op de screenshot hieronder zie je hoe het eindresultaat er uit moet zien.
Ik hoop dat iemand mij kan helpen. Mocht het nodig zijn ben ik best bereid een kleine vergoeding te geven.
Groeten Robbert
- HTML Probleem
-
15-11-2015, 14:24 #1
- Berichten
- 112
- Lid sinds
- 18 Jaar
HTML Probleem
-
15-11-2015, 15:27 #2
- Berichten
- 268
- Lid sinds
- 16 Jaar
Re: HTML Probleem
Het heeft waarschijnlijk te maken met de width van beide classes.
Het klopt sowieso al niet helemaal dat je center-div slechts 960px wijd is maar je header 1300px...
Hoe breeder je header wordt, hoe verder je logo en de afbeelding van elkaar af komen te staan.
Verander de code is in dit:
Code:* ### Header ### */ #header{ position: relative;width:960px; height: 165px; background: url(images/header.png)no-repeat; float:right; }
-
15-11-2015, 16:05 #3
- Berichten
- 1.345
- Lid sinds
- 18 Jaar
Re: HTML Probleem
Je kan de center weglaten en de wrapper centreren
Code:/* ### general ### */*{padding: 0px; margin: 0px;}html, body { font-family:Open Sans;font-size: 14px; color: #1d1d1d; }input, select, textarea { font-family:Open Sans;font-size: 14px; color: #1d1d1d; }body{background: url(images/bg.png); border-top: solid 4px #db0000;} /* ### wrapper ### */ #wrapper { max-width: 1300px; margin: 0 auto; position: relative; min-height: 100%; } /* ### Header ### */ header { position: relative; width: 100%; height: 165px; background: url(images/header.png)no-repeat; float:right; } header a.logo { position: absolute; top: 55px; display: block; width: 196px; }
Plaats een
- + Advertentie
- + Onderwerp
Marktplaats
Webmasterforum
- Websites algemeen
- Sitechecks
- Marketing
- Domeinen algemeen
- Waardebepaling
- CMS
- Wordpress
- Joomla
- Magento
- Google algemeen
- SEO
- Analytics
- Adsense
- Adwords
- HTML / XHTML
- CSS
- Programmeren
- PHP
- Javascript
- JQuery
- MySQL
- Ondernemen algemeen
- Belastingen
- Juridisch
- Grafisch ontwerp
- Hosting Algemeen
- Hardware Info
- Offtopic