[CSS] positie in IE van een div - Softwareontwikkeling

zaterdag 10 juni 2006 15:11

Acties:

Topicstarter

Ik zit met het volgende probleem

http://www.mmac.be/got/

dit ziet er op zich best wel goed uit vind ik zelf, zolang je met Firefox de site bezoekt...
Wanneer je in IE kijkt zie je een soort van "enter".

Ik heb van alles al geprobeerd, al een paar keer de gehele site opnieuw opgebouwd, duidelijk en gestructureerd maar het mag niet baten.

Verder hielpen css elementen als "position:absolute;" en die toestanden bar weinig...
Het is vast weer iets doms maar ik zie het niet

overigens centreerd de site zich ook niet in IE wel in Firefox...

(eerste site die ik met divs echt opbouw trouwens, ik vind het toch niet zoveel gemakkelijker dan tables op het moment verre van zelfs)

[ Voor 8% gewijzigd door Sjoerd op 10-06-2006 15:12 ]

Modelbouw - Alles over modelbouw, van RC tot diorama

zaterdag 10 juni 2006 15:25

Acties:

Verwijderd

langezwieper schreef op zaterdag 10 juni 2006 @ 15:11:
Ik zit met het volgende probleem

http://www.mmac.be/got/

dit ziet er op zich best wel goed uit vind ik zelf, zolang je met Firefox de site bezoekt...
Wanneer je in IE kijkt zie je een soort van "enter".

Ik heb van alles al geprobeerd, al een paar keer de gehele site opnieuw opgebouwd, duidelijk en gestructureerd maar het mag niet baten.

Verder hielpen css elementen als "position:absolute;" en die toestanden bar weinig...
Het is vast weer iets doms maar ik zie het niet
overigens centreerd de site zich ook niet in IE wel in Firefox...

(eerste site die ik met divs echt opbouw trouwens, ik vind het toch niet zoveel gemakkelijker dan tables op het moment verre van zelfs)

Probeer het volgende om je site te centreren.

Plaats alles in een div 'container' met volgende opmaak:

Cascading Stylesheet:

div#container{
    position: relative;
    width: 750px;
    left: 50%;
    margin-left: -375px;
}

zaterdag 10 juni 2006 15:33

Acties:

user109731

zet eens

Cascading Stylesheet:

1	body, html { height:100%; width:100%; }

In je stylesheet? Ik zie verder nl. geen problemen, zo op het eerste gezicht

langezwieper schreef op zaterdag 10 juni 2006 @ 15:11:
(eerste site die ik met divs echt opbouw trouwens, ik vind het toch niet zoveel gemakkelijker dan tables op het moment verre van zelfs)

Tja, het is ff wennen... Het is ook heel logisch: als je het altijd zo doet (ook al is het fout), en je stapt over op wat nieuws, is dat altijd even lastig

Als je er eenmaal goed mee overweg kunt dan wil je niet meer terug

Nofi, maar je gebruikt nu nog steeds een tabel, het enige verschil is dat er wat divjes omheen staan? Achtergrondafbeeldingen kun je trouwens ook beter gelijk in je stylesheet zetten, en gebruik ipv <div align="center"> de css-eigenschap text-align:center.

@yeo: de manier die nu gebruikt word is veel beter (flexibeler bijv

)

[ Voor 71% gewijzigd door user109731 op 10-06-2006 15:40 ]

zaterdag 10 juni 2006 15:38

Acties:

Sjoerd

Topicstarter

Ondertussen alle 2 de mogelijke oplossingen even geprobeerd, helaas mag het niet baten.
Het is wel zo dat de eerste oplossing mijn site wel centreerd...

blijft leuk dat css

Modelbouw - Alles over modelbouw, van RC tot diorama

zaterdag 10 juni 2006 15:45

Acties:

user109731

HTML:

1 2	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Helemaal bovenaan in je html-bestand. Dan MOET het gewoon goed gaan

(dit word overigens een doctype genoemd, google daarop en dan vind je wel wat meer informatie)

Wat die witte lijn betreft:
- haal je image uit #banner
- css:

Cascading Stylesheet:

#banner {
  height:109px;
  padding:0;
  margin:0;
  background-image: url(images/banner.png);
  background-repeat: no-repeat;
  background-position:center bottom;
}

Je had waarschijnlijk ook zoiets kunnen doen:

HTML:

1	<div id="banner">[img]"banner.png"[/img]</div>

Dus zeg maar alle spaties/linebreaks er tussenuit halen. Vaag gedrag van IE...
Tip: margin-bottom:0px; margin-top:0px; margin-left:0px; margin-right:0px; is te schrijven als margin:0; Het bespaart je misschien wat werk, en het staat veel duidelijker

[ Voor 127% gewijzigd door user109731 op 10-06-2006 16:14 ]

zaterdag 10 juni 2006 17:00

Acties:

Sjoerd

Topicstarter

Grote prutser schreef op zaterdag 10 juni 2006 @ 15:45:
...

Bedankt! $_/-\o_$ en een handige tip inderdaad!

mijn divs lijjken wel wat te verschuifen maar dat is zo opgelost met een margin, bedankt!

Modelbouw - Alles over modelbouw, van RC tot diorama

zondag 11 juni 2006 09:44

Acties:

Sjoerd

Topicstarter

langezwieper schreef op zaterdag 10 juni 2006 @ 17:00:
[...]

Bedankt! $_/-\o_$ en een handige tip inderdaad!

mijn divs lijjken wel wat te verschuifen maar dat is zo opgelost met een margin, bedankt!

door mijn vreugde van gisteren heb ik de site niet meer getest in firefox maar wel in IE zie hier het resultaat in Firefox:

http://www.mmac.be/got/

erg vervelend, werkt het in IE werkt het niet in Firefox...
ik zie door de css codes de juiste code niet meer

Modelbouw - Alles over modelbouw, van RC tot diorama

zondag 11 juni 2006 10:28

Acties:

Cobalt

Door position: relative; en float:left; toe te voegen aan de #contentleft in je css en de tweede width weg te halen wordt het menu netjes onder de bovenkant van het menu geplaatst.

Cascading Stylesheet:

#contentleft {
    width:191px;
    font-family: Tahoma, Arial, Helvetica, sans-serif;
    color: #333333;
    font-weight: bold;
    font-size: 12px;
    position: relative;
    float:left;
}

Door de <div id="contentleft"> tussen de <div id="banner"> en de <div id="contentcenter"> te zetten wordt het linker menu netjes onder de bovenkant van het menu geplaatst.

HTML:

.........
<div id="banner">[img]"http://www.mmac.be/got/images/banner.png"[/img]</div>
 <!--/banner-->
 
  <!--links-->
  <div id="contentleft">
    [img]"http://www.mmac.be/got/images/memo2.png"[/img]  </div>
 <!--/links--> 

 <!--midden-->
 <div id="contentcenter">
.........

Als het goed is wordt het menu nu op de correcte positie getoond in IE en Opera.

zondag 11 juni 2006 10:39

Acties:

Rowanov

Kop eens wat anders...

Die position: relative kan je weglaten.

zondag 11 juni 2006 10:49

Acties:

Sjoerd

Topicstarter

Cobalt schreef op zondag 11 juni 2006 @ 10:28:

Als het goed is wordt het menu nu op de correcte positie getoond in IE en Opera.

Super dit werkt idd wel in ie en firefox

Het is denk ik pure ervaring en veel werken met css voor je dit soort geintjes onder de knie hebt bedankt!

Modelbouw - Alles over modelbouw, van RC tot diorama

zondag 11 juni 2006 17:04

Acties:

Rowanov

Kop eens wat anders...

Dat onder de knie krijgen is een kwestie van een aantal keer css kloppen en dan per regel die je toevoegt, kijken in IE, FF en Opera wat er gebeurt. Dat is imho de makkelijkste manier om te zien hoe alles werkt.