Scripts - Tutorials - Forum - Downloads - Showcase - Contact

Artikels

VPN vergelijken

Algemeen

Beginpagina

FAQ

Grafische worm (243)

Links

Nieuwsartikels

Nieuwsarchief

Boeken programmeren

Overzicht

Samenwerken

Webhosting

Zoek op Sitemasters

Leden

Registreren

Ledenlijst

Ons team

Links

webhostingtop10.be

Sociale media

Follow @sitemasters

Sitemasters

Adverteren op Sitemasters?

Contacteer ons

RSS

Link naar ons

Donaties

Poll

Je moet ingelogd zijn om te stemmen.

Statistieken

Linkpartners

Forum

Categorieën > HTML & CSS

Header met menubalk (Opgelost)

DamNSmArTy - 08/04/2008 19:08
Nieuw lid		Hallo, Ik ben nieuw hier en dit is meteen mijn eerste post. Ik heb namelijk een probleem met een website die we moeten maken voor school (Xhtml strict), het zit namelijk zo: ik had graag mijn header, een tussenbalkje en de menubalk allemaal graag onderelkaar tegenelkaar gehad. Met Internet Explorer is me dit al gelukt door alle images zonder spaties achter elkaar te plaatsen, maar als ik hem dan in Firefox open zit er witruimte tussen. Iemand enig id hoe ik dit kan oplossen?? html4strict code - Bekijk de code zonder highlighting - Klap code in <div id="boven"> <img src="images/header800px.jpg" alt="" style="width:800px; height:136px;" /><br /> <img src="images/sierbar.jpg" alt="" style="width:800px; height=24px;" /><br /> <img src="images/bar.png" alt="" style="width:800px; height:30px;" /><br /> </div> #boven { border:0px; margin:0px; padding:0px; } <div id="boven"> <img src="images/header800px.jpg" alt="" style="width:800px; height:136px;" /><br /> <img src="images/sierbar.jpg" alt="" style="width:800px; height=24px;" /><br /> <img src="images/bar.png" alt="" style="width:800px; height:30px;" /><br /> </div> #boven { border:0px; margin:0px; padding:0px; } Hoe het wel moet zijn (Internet Explorer) Hoe het niet zou mogen zijn (Firefox) ik ben nog maar een beginneling dus ik hoop dat jullie mij kunnen helpen. Alvast veel dank! DamNSmArTy

11 antwoorden

Gesponsorde links

Martijn - 08/04/2008 19:50 (laatste wijziging 08/04/2008 20:08)
Crew PHP		border hoef je niet neer te zetten en de laatste <br> na je 3e plaatje weghalen kan al wat uitmaken

DamNSmArTy - 09/04/2008 12:17
Nieuw lid		Bedankt voor de snelle reactie, maar met die <br /> weg te laten had ik al geprobeerd levert hetzelfde resultaat op in firefox. Ik zal één dezer dagen eens zien ofdat ik de pagina's online kan zetten voor het gemak.

nvleeuwen88 - 09/04/2008 12:27
HTML interesse		ik weet niet of het daar aan ligt maar je hebt height=24px; in plaats van height: 24px;

Simax - 09/04/2008 12:44

Onbekend

Probeer dit eens..

css code - Bekijk de code zonder highlighting - Klap code in

                <div id="boven">
  <img src="images/header800px.jpg" alt="" class="header"/>
  <img src="images/sierbar.jpg" alt="" class="sierbar"/>
  <img src="images/bar.png" alt="" class="bar"/>
</div>

            
<div id="boven">
  <img src="images/header800px.jpg" alt="" class="header"/>
  <img src="images/sierbar.jpg" alt="" class="sierbar"/>
  <img src="images/bar.png" alt="" class="bar"/>
</div>
 

css code - Bekijk de code zonder highlighting - Klap code in

                #boven
{
  border: 0px;
  margin: 0px;
  padding: 0px;
}

.header
{
  height: 136px;
  width: 800px;
}

.sierbar
{
  height: 24px;
  width: 800px;
}

.bar
{
  height: 30px;
  width: 800px;
}

            
#boven
{
  border: 0px;
  margin: 0px;
  padding: 0px;
}
 
.header
{
  height: 136px;
  width: 800px;
}
 
.sierbar
{
  height: 24px;
  width: 800px;
}
 
.bar
{
  height: 30px;
  width: 800px;
}
 

DamNSmArTy - 11/04/2008 12:32
Nieuw lid		Dit is de link naar de website, de menubalk is voorlopig nog alleen maar een afbeelding maar dat komt wel in orde. Als je hem nu opent in IE is alles goed, maar als je hem opent met Firefox zal je zien dat er een afstand ontstaat tussen de balken. Link Shiven zijn voorstel werkte niet, maar het is er wel veel overzichtelijker mee geworden, Bedankt !

Simax - 11/04/2008 12:40 (laatste wijziging 11/04/2008 12:48)

Onbekend

Doe dan ok wat ik zeg.
Ik zie in je code het volgende..

css code - Bekijk de code zonder highlighting - Klap code in

                <div id="boven">
<img src="images/header800px.jpg" alt="" class="header"><br>
<img src="images/sierbar.jpg" alt="" class="sierbar"><br>
<img src="images/bar.png" alt="" class="bar">
</div>

            
<div id="boven">
<img src="images/header800px.jpg" alt="" class="header"><br>
<img src="images/sierbar.jpg" alt="" class="sierbar"><br>
<img src="images/bar.png" alt="" class="bar">
</div>
 

Edit
Waar zijn die <br> goed voor?
Haal deze weg en het werkt perfect, in alle browsers

DamNSmArTy - 11/04/2008 13:14
Nieuw lid		Shiven schreef: Doe dan ok wat ik zeg. Ik zie in je code het volgende.. [..code..] Edit Waar zijn die <br> goed voor? Haal deze weg en het werkt perfect, in alle browsers . ok maar als ik dit doe, dan heb ik juist gezelfde probleem in IE zoals dat ik heb in FireFox

Simax - 11/04/2008 13:20 (laatste wijziging 11/04/2008 13:24)

Onbekend

Gebruik de volgende code maar..
en laat even weten wat er nog fout gaat.

style.css

css code - Bekijk de code zonder highlighting - Klap code in

                #boven
{
  border: 0px;
  margin: 0px;
  padding: 0px;
}

.header
{
  height: 136px;
  width: 800px;
}

.sierbar
{
  height: 24px;
  width: 800px;
}

.bar
{
  height: 30px;
  width: 800px;
}

            
#boven
{
  border: 0px;
  margin: 0px;
  padding: 0px;
}
 
.header
{
  height: 136px;
  width: 800px;
}
 
.sierbar
{
  height: 24px;
  width: 800px;
}
 
.bar
{
  height: 30px;
  width: 800px;
}
 

index.html

css code - Bekijk de code zonder highlighting - Klap code in

                
<div id="boven">
  <img src="images/header800px.jpg" alt="" class="header"/>
  <img src="images/sierbar.jpg" alt="" class="sierbar"/>
  <img src="images/bar.png" alt="" class="bar"/>
</div>

            
<div id="boven">
  <img src="images/header800px.jpg" alt="" class="header"/>
  <img src="images/sierbar.jpg" alt="" class="sierbar"/>
  <img src="images/bar.png" alt="" class="bar"/>
</div>
 

Edit
Probeer in het vervolg alles goed af te sluiten

. Bijvoorbeeld:

css code - Bekijk de code zonder highlighting - Klap code in

                <img src="" alt="" class="">
            
<img src="" alt="" class="">

moet zijn:

css code - Bekijk de code zonder highlighting - Klap code in

                <img src="" alt="" class=""/>
            
<img src="" alt="" class=""/>

DamNSmArTy - 11/04/2008 14:03
Nieuw lid		uhu, dat heb ik (misschien kan het helpen als je mijn styl blad eens zou downloaden, wie weet zitten daar ook fouten in) stijlblad maar aangezien ik nog maar een beginner ben zou het mij niet verwonderen dat er nog wat fouten instaan! Bedankt voor alles tot nu toe! ik waardeer het echt!

Simax - 11/04/2008 14:11 (laatste wijziging 12/04/2008 15:49)

Onbekend

Probeer dit eens..

css code - Bekijk de code zonder highlighting - Klap code in

                .header
{
  background: url(images/header800px.jpg);
  height: 136px;
  width: 800px;
}

.sierbar
{
  background: url(images/sierbar.jpg);
  height: 24px;
  width: 800px;
}

.bar
{
  background: url(images/bar.png);
  height: 30px;
  width: 800px;
}

            
.header
{
  background: url(images/header800px.jpg);
  height: 136px;
  width: 800px;
}
 
.sierbar
{
  background: url(images/sierbar.jpg);
  height: 24px;
  width: 800px;
}
 
.bar
{
  background: url(images/bar.png);
  height: 30px;
  width: 800px;
}
 

css code - Bekijk de code zonder highlighting - Klap code in

                <div class="header"></div>
<div class="sierbar"></div>
<div class="bar"></div>

            
<div class="header"></div>
<div class="sierbar"></div>
<div class="bar"></div>
 

Edit
Laat even weten of het werkt..

DamNSmArTy - 15/04/2008 08:38
Nieuw lid		Yes yes, Firefox geeft dit nu ook weer zoals ik gewenst had! Eindelijk Bedankt Shiven!!

Gesponsorde links

Dit onderwerp is gesloten.

Actiefste leden van de maand

Actieve forumberichten