anoniem Geplaatst: 12 oktober 2004 Delen Geplaatst: 12 oktober 2004 Hallo mensen. Ik heb deze vraag al eerde gesteld. In de hoop dat nu iemand wel antwoord kan geven (m'n vorige vraag was misschien een beetje een zooitje) doe ik het nog een keer. Ik heb de volgende (zwaar versimpelde) pagina: [code<html> <head> <style type="text/css"> <!-- .header { width: 530px; background-color:#FFDF9A; padding: 2px 4px 2px 4px; border-width: 1px 1px 1px 1px; border-style: solid; border-color: #FFA853; } .afzender { float: left; width: 100px; text-align:left; vertical-align: middle; } .titel { float: right; width: 300px; text-align:left; font-weight: bold; vertical-align: middle; } --> </style> </head> <body> <div class="header"> <span class="afzender" > Afzender </span> <span class="titel"> titel </span> </div> </body> </html>[/code] Het is de bedoeling dat de div "header" zorgt voor een rechthoek om afzender en titel. De rechthoek moet de kleur #FFDF9A krijgen en een border met de kleur #FFA853. In IE gaat alles goed. In Firefox echter. Krijg ik net boven afzender en titel een heel dun rechthoekje. (2 keer de padding) De spans worden dus geheel buiten de div geplaatst lijkt het. Hoe komt het dat het niet weergegeven wordt zoals ik wil? Waarschijnlijk omdat ik iets niet goed doe natuurlijk.. Maar wat dan????? :-? Thanks. Jasper Quote Link naar reactie
anoniem Geplaatst: 13 oktober 2004 Auteur Delen Geplaatst: 13 oktober 2004 Als ik de header een 'height' meegeef, werkt 'ie bij mij. Quote Link naar reactie
anoniem Geplaatst: 13 oktober 2004 Auteur Delen Geplaatst: 13 oktober 2004 Maar die height is variabel. De titel kan namelijk meerdere regels bevatten... Nou kan ik daar mee gaan sjoemelen natuurlijk. Maar dat is niet ideaal.. Is er geen algemenere oplossing? Bedankt voor je reactie!! Quote Link naar reactie
anoniem Geplaatst: 13 oktober 2004 Auteur Delen Geplaatst: 13 oktober 2004 [code:1:94d5962a3b] <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>Test Document</title> <style type="text/css"> <!-- html,body{ margin:0; padding:0; } body { text-align:center; /* needed for IE5.x */ } .header { text-align:left; /* needed for IE5.x */ margin: 10px auto; width: 530px; background-color:#FFDF9A; padding: 2px 4px 2px 4px; border: 1px solid #FFA853; } .afzender { width: 100px; border: 1px solid #FFA853; vertical-align: middle; } .titel { float: right; width: 300px; text-align:left; font-weight: bold; vertical-align: middle; border: 1px solid #FFA853; } --> </style> </head> <body> <div class="header"> <span class="titel"> Titel </span> <span class="afzender"> Afzender<br> Nog een afzender </span> </div> </body> </html> [/code:1:94d5962a3b] Zo staat header gecentreerd, margin uit header verwijderen en hij staat links. Voor het visuele effect, border aan afzender en titel toegevoegd. Quote Link naar reactie
anoniem Geplaatst: 14 oktober 2004 Auteur Delen Geplaatst: 14 oktober 2004 Hallo Suay!! Bedankt voor je reactie!! Ik ben er even mee aan de slag geweest. En ik dacht dat het goed werkte.. maar helaas... Als ik een tweede regel aan de titel toevoeg, werkt het niet... De tweede regel komt er gewoon onder te staan in Firefox.... [code:1:9e9def3ccf]<div class="header"> <span class="titel"> Titel <br> Tweede regel titel</span> <span class="afzender"> Afzender</span> </div> [/code:1:9e9def3ccf] Hoe kan dit??? Thanks! Quote Link naar reactie
anoniem Geplaatst: 14 oktober 2004 Auteur Delen Geplaatst: 14 oktober 2004 Waarom gebruik je de oplossing van boelieboelie niet gewoon? Geef een height mee aan de header. Als je dan meer regels er in zet wordt de hoogte automatisch aangepast. Of begrijp ik niet goed wat je wil? Quote Link naar reactie
anoniem Geplaatst: 14 oktober 2004 Auteur Delen Geplaatst: 14 oktober 2004 Als ik display:table; in .header zet, dan werkt die bij mij. Quote Link naar reactie
anoniem Geplaatst: 14 oktober 2004 Auteur Delen Geplaatst: 14 oktober 2004 Bedankt voor je reactie! Het ziet er nu prima uit! Ik word helemaal gek! Het werkt nu wel in Firefox, maar niet meer in IE! :-? :cry: Het is de bedoeling dat dmv JS een bepaalde header wordt weergegeven of verborgen door middel van oa: [code:1:4929f6a55d]document.getElementById('contex'+n).style.display="table";[/code:1:4929f6a55d] IE vind dit echter niet leuk! Ik krijg de fout: [b:4929f6a55d]Could not get the display property. Invalid argument.[/b:4929f6a55d] Het werkt in IE wel als ik van table block maak. Maar ja.. zoals bekend werkt het dan niet meer in Firefox... Ik weet t niet meer.................................. Maar gewoon een browsercheckje ertussen gooien? Of is er een andere oplossing? Quote Link naar reactie
anoniem Geplaatst: 14 oktober 2004 Auteur Delen Geplaatst: 14 oktober 2004 Bij voorkeur geen browsercheck gebruiken. Ik denk dat dat in dit geval ook zeker niet hoeft. Je kunt ook gewoon een <br clear="all"> erachter gooien (achter de floaters), dan kun je in Firefox ook display: block; gebruiken. Maar volgens mij hoef je helemaal geen floaters te gebruiken. Gewoon 1 als een 'normale' div gebruiken met een 300px margin-right en een absoluut gepostioneerde div met right:0;. De container div moet dan position:relative hebben. Maar je zou ook gewoon een tabel kunnen gebruiken, misschien zelfs wel aan te raden in dit geval. Quote Link naar reactie
anoniem Geplaatst: 17 oktober 2004 Auteur Delen Geplaatst: 17 oktober 2004 Hallo mensen! Bedankt voor jullie hulp! Het is een combinatie geworden van de door jullie aangedragen oplossingen! Namelijk een tabel met daarin twee divs (met een float right). Het werkt prima zo. Thanks! Jasper Quote Link naar reactie
Aanbevolen berichten
Om een reactie te plaatsen, moet je eerst inloggen