Background in div?

[Nolani]

Hallo,

Voor school (en voor mij zelf) ben ik een website aan het maken, nu wil ik bovenin een soort banner hebben, ik kom er alleen niet uit hoe.


Ten eerste mijn site: jorisvdberg.ghl.mine.nu

Dit is het stukje code waarin de banner zou moeten komen en de bij behoorende css

code:

<div id="logo" >
    <h1>Website Joris </h1>
</div>

code:

#logo
{ width: 1024px;
  height: 100px;
  border-top: 5px solid;
}

Ik kom er niet uit hoe ik in dat bovenste frame (div ?) een banner kan plaatsen.
Deze dus:
http://i166.photobucket.c...2/Jorisvdberg/Banner1.jpg
Wat ik al geprobeerd heb:

code:

<div background="images/Banner/Banner1.jpg" id="logo" >
    <h1>Website Joris </h1>
</div>

in de css:

code:

#logo
{ width: 1024px;
  height: 100px;
  border-top: 5px solid;
  background-image:url(../images/Banner/Banner1.jpg)
}

Heeft iemand hier een raad voor mij?

Overigens laat hij hem wel in dreamweaver/frantpage zien, maar niet in firefox/ie.

Ik ben net beginnende met HTML en CSS, maar de basis etc. ken ik wel.

[BtM909]

Heb je wel je plaatje geupload? Wat is de directory structuur voor je html, css en je plaatje?

[Zeebonk]

als de code presies is zoals je zegt zou ik beginnen met in de css

background-image:url(../images/Banner/Banner1.jpg)

af te sluiten met een punt comma. Daarna zou ik het volgende proberen in plaats van het hierboven genoemde stukje css:

background: url(images/Banner/Banner1.jpg);

en dit:

<div background="images/Banner/Banner1.jpg" id="logo" >

gewoon:

<div id="logo">

[Nolani]

BtM909 schreef op donderdag 08 november 2007 @ 21:48:
Heb je wel je plaatje geupload? Wat is de directory structuur voor je html, css en je plaatje?

Plaatje was al geupload

In de hoofdmap staan de html pagina's en 2 mappen: images en style
images -> Banner -> hierin staat Banner1.jpg
style - in deze map zitten de colour.css, style.css en image_viewer.css

Ik weet zeker dat de bronnen goed gelinkt staan, incl eventuele hoofdletters.
@Zeebonk: die puntkomma was ik vergeten mee te kopieren, in de css staat hij er uiteraard wel.

geprobeerd maar werkt helaas ook niet.

Net ook met een kleiner plaatje dan 1024x100, zelfde probleem.

[Zeebonk]

ik zie net dat jouw stylesheets in een aparte map staan, en niet in je root. Als je je stylesheets nou eens in de root folder zet klopt de link naar de achtergrond afbeelding. Nu denkt de browser dat er in de map style een map images zit.

[SanderTje!]

Zeebonk schreef op donderdag 08 november 2007 @ 22:30:
ik zie net dat jouw stylesheets in een aparte map staan, en niet in je root. Als je je stylesheets nou eens in de root folder zet klopt de link naar de achtergrond afbeelding. Nu denkt de browser dat er in de map style een map images zit.

Of je verandert even de CSS, want dan houd je overzicht in de bestandsstructuur van je server

[orf]

Eerst gebruik je style.css waarin je de background zet, vervolgens gebruik je colour.css waarin je dit hebt gezet:

code:

background:#2C2C2A none repeat scroll 0%;

Daarmee overschrijf je de eerst declaratie en heb je dus geen afbeelding als achtergrond.

Omdat style.css in een submap staat moet je

code:

background:transparent url(../images/Banner/Banner1.jpg) repeat scroll 0% 50%;

gebruiken in plaats van

code:

background:transparent url(images/Banner/Banner1.jpg) repeat scroll 0% 50%;

[ Voor 9% gewijzigd door orf op 08-11-2007 22:33 ]

[Nolani]

Klink logish ja,

Ik heb de css bestanden in de root gezet, ook de link in index.html aangepast naar style.css ipv. style/syle.css. En de regel zoals jij hem zei in de css geplakt.....

Maar nog steeds krijg ik niets te zien.
Morgen kijk ik verder,

[orf]

Nee, als je stylesheet in dezelfde map staat, moet het path naar de afbeelding natuurlijk zonder '../' zijn. Verwijder de regel uit colour.css en het werkt.

Ik zie een mooie zonsondergang als ik de twee puntjes aanpas. (firebug in firefox maakt dat erg makkelijk)

[Nolani]

@orf, ik reageerde nog op zeebonk, maar jullie posten zo snel

Maar als ik het goed (of niet) begrijp moet ik de css's gewoon in die submap laten staan.
En in de style css moet dan staan:

code:

#logo
{ width: 1024px;
  height: 100px;
  border-top: 5px solid;
  background:transparent url(../images/Banner/Banner1.jpg) repeat scroll 0% 50%;
}

en in de colour.css:

code:

#logo, #logo h1
{ background: #2C2C2A;
  color: #707070;
  border-color: #82974B;
  background:#2C2C2A none repeat scroll 0%;
}

of moet die regel in colour.css alsnog weg?

[OkkE]

Als colour.css als laatste geladen wordt, moet daar de background inderdaad weg. Of moet je er background-color:#2C2C2A; van maken.

[Nolani]

code:

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

  <link rel="stylesheet" type="text/css" href="style/colour.css" />

  <link rel="stylesheet" type="text/css" href="style/image_viewer.css" />

Zo staat het in de html, is dat dan de volgorde van laden?

[OkkE]

Ja, dan wordt style.css als eerste geladen. Heb je in zowel style.css als in colour.css een background voor een element gedefinieerd, dan zal die van colour de style overschrijven.

In dit specifieke geval gebruik je background, wat een short-hand notatie is. Dit betekend dat als je background:red; gebruikt, dan worden automatisch de evt. eerder ingestelde zaken als background-color vervangen, en background-image null gezet.

[P.O. Box]

en om dat te testen kun je er even keihard "http://jorisvdberg.ghl.mine.nu/images/Banner/Banner1.jpg" inzetten.. .dan heb je geen gezeur met relatieve paden enzo...
als de banner dan nog niet verschijnt, zie je dat Okke gelijk heeft...

[Dark Blue]

Heeft iemand al gelet op hoofdletters? Het kan best zijn dat je Banner1.jpg bij het uploaden automatisch om wordt gezet naar banner1.jpg. En dat is vaak wel een heel verschil...

Verder moeten je paden en je code ook kloppen, maargoed, daar helpen al genoeg mensen je mee hierboven.