|
|||
![]()
Hi.
Hab erst vor ein paar Tagen mit CSS angefangen und wollte damit meine Seite gestalten. Ging soweit auch alles ganz gut, aber jetzt wollte ich ein Formular in die Seite einfügen, was aber in Opera 8 zu weit unten angezeigt wird. Im IE 6 hingegen wird das Formular an der richtigen Stelle angezeigt, aber dafür sind die anderen Boxen verschoben. Kann mir einer sagen was ich falsch gemacht habe? HTML Code:
<?xml version="1.0" encoding="windows-1252"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//de" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de"> <head> <title>TEST</title> <link rel="stylesheet" href="style.css" type="text/css" media="screen" /> </head> <body> <div class="header"> [img]pics/logo_klein.jpg[/img] <div class="banner"> [img]pics/logo_klein.jpg[/img] </div></div> <div class="topnav"> <ul id="menu">|[*]Section1|[*]Section2|[*]Section3|[*]Section4|[*]Section5|[*]Section6|[/list] </div> <div id="leftmenu"> <div> <h4>Sections</h4> <ul>[*]Section1[*]Section2[*]Section3[*]Section4[*]Section5[*]Section6[*]Section7[*]Section8[*]Section9[*]Section10[/list] </div> <div> <h4>Sections2</h4> <ul>[*]Section1[*]Section2[*]Section3[*]Section4[/list] </div> <div> <h4>Sections3</h4> <ul>[*]Section1[*]Section2[*]Section3[*]Section4[/list] </div> </div> <div id="content"> <form action="foo.php"> <fieldset> <legend>Beispielformular</legend> <label class="left">Text:</label> <input type="text" size="20" /> <label class="left">langer Text:</label> <input type="text" size="20" /> <label class="left">noch längerer Text:</label> <input type="text" size="20" /> <input type="submit" value="Test" class="right" /> </fieldset> </form> </div> <div class="footer"> Content Management System Version 0.1alpha. (C) 2005 by evo2 - All Rights Reserved. </div> </body> </html> Code:
body { font-family: Verdana, Arial, Helvetica, sans-serif; font-weight:bold; font-size:0.8em; color:#000000; } a:link { font-family: Verdana, Arial, Helvetica, sans-serif; font-weight:bold; font-size:0.8em; color:#000000; text-decoration:none; } a:visited { font-family: Verdana, Arial, Helvetica, sans-serif; font-weight:bold; font-size:0.8em; color:#000000; text-decoration:none; } a:hover { font-family: Verdana, Arial, Helvetica, sans-serif; font-weight:bold; font-size:0.8em; color:#FF090F; text-decoration:underline; } a:active { font-family: Verdana, Arial, Helvetica, sans-serif; font-weight:bold; font-size:0.8em; color:#000000; text-decoration:none; } a:focus { font-family: Verdana, Arial, Helvetica, sans-serif; font-weight:bold; font-size:0.8em; color:#000000; text-decoration:none; } div.header { margin:10px 2% 0px 2%; border:1px solid #000000; border-bottom-width:0px; padding:10px; font-weight:normal; font-family: Verdana, Arial, Helvetica, sans-serif; font-size:0.8em; } div.banner { float:right; } #leftmenu { float:left; width:14%; text-align:left; margin:10px 2% 10px 2%; } #leftmenu div { min-height:80px; margin-bottom:5px; padding:5px; border:1px solid #000; font-family: Verdana, Arial, Helvetica, sans-serif; font-size:0.8em; } div.topnav { margin:0px 2% 0px 2%; border:1px solid #000000; padding:10px; text-align:center; font-family: Verdana, Arial, Helvetica, sans-serif; font-size:0.8em; } #content { min-height:500px; margin:10px 2% 10px 17%; border:1px solid #000000; padding:10px; text-align:left; font-family: Verdana, Arial, Helvetica, sans-serif; font-size:0.8em; } #content div { min-height:80px; margin-bottom:10px; padding:5px; border:1px solid #000; font-family: Verdana, Arial, Helvetica, sans-serif; font-size:0.8em; } div.footer { clear:both; margin:10px 2% 0px 2%; border:1px solid #000000; padding:5px; text-align:center; font-family: Verdana, Arial, Helvetica, sans-serif; font-size:0.8em; } ul#menu { margin:0; padding:0; } ul#menu li { padding:0 2% 0 2%; margin:0; list-style:none; display:inline; } input { border : 1px solid #DDD; background : #F4F4F4; padding:0 2% 0 2%; margin:5px; } input:focus { border : 1px solid #AAA; background : #FFF; } textarea { border : 1px solid #DDD; background : #F4F4F4; padding:0 2% 0 2%; margin:5px; } textarea:focus { border : 1px solid #AAA; background : #FFF; } label.left { float: left; text-align: right; width: 10em; padding:0.5em 0.3em 0.5em 0; } input[type=text], select { float: left; margin:0.4em 0; } input.right { float: left; width: auto; clear: both; margin-left: 5.3em; margin-right: .3em; } input[type=checkbox].right,input[type=radio].right,input[type=submit].right { margin-left: 6.3em; } form br { clear: both; } evo2 |
Sponsored Links |
|
||||
![]()
Die Frage kommt mir bekannt vor
![]() Naja, also ich bleibe mal bei meiner Meinung. Einzigste Idee die ich momentan hätte wäre das Menü nicht zu floaten.
__________________
CSS Optimierer und Formatierer (CSSTidy) |
Sponsored Links |
|
||||
![]()
Du könntest das Menü absolut positionieren...nicht die schönste Lösung aber was besseres fällt mir grade nicht ein.
__________________
CSS Optimierer und Formatierer (CSSTidy) |
![]() |
Themen-Optionen | |
Ansicht | |
|
|
![]() |
||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Probleme mit der Darstellung in verschiedenen Browsern | chrissie65 | CSS | 6 | 03.05.2012 22:59 |
Probleme mit der Anzeige in verschiedenen Browsern. Bitte um Ratschläge! | gsharpp | CSS | 15 | 11.08.2011 14:59 |
Wie sieht eine Webseite in verschiedenen Browsern aus | TreasureZone | Grafik, Design, Typografie | 5 | 18.05.2010 20:52 |
CSS in verschiedenen Browsern | klausschwaben | CSS | 1 | 29.07.2008 16:04 |
Schriftunterschiede in verschiedenen Browsern | gh23 | CSS | 1 | 28.01.2008 23:17 |