Ergebnis 1 bis 6 von 6

Thema: Positionierung mit float

  1. #1
    Meister(in) Avatar von lukasn
    Registriert seit
    23.02.2008
    Ort
    Schweiz
    Alter
    27
    Beiträge
    491
    Danke
    2
    Bekam 12 mal "Danke" in 11 Postings

    Standard Positionierung mit float

    ...mal wieder =)

    In diesem layout wollte ich in der Topnavi (Balken unter dem Header) vertikal zentriert ein Such-Eingabefeld platzieren. In Safari und Iron funktioniert das auch, in Firefox, IE und Opera hingegen nicht. Ich habe shcon lange nichtmehr mit float positionierungen gearbeitet, und habe das problem bisher nicht gefunden.
    Ich wär also froh wenn mir einer von euch sagen könnte wie ich das sinnvoller mache. Es muss nicht mit float sein, auch wenn ich das wohl kaum vermeiden kann. Das ding soll einfach rechtsbündig in dem Topnavi Balken vertikal zentriert werden.

    Der relevante Code, falls ihr den ganzen wollt im Quelltext nachprüfen
    HTML-Code:
    <div id="topnavi">
    	<p>Some Menu Items | Some more | Yet another one</p>
    	<form action="/index.php" method="get" id="search">
    		<input type="hidden" name="special" value="search" />
    		<input type="search" placeholder="Search..." autosave="bsn_srch" results="5" name="q" value="" size="10" maxlength="99" class="search-input" />
    		<input type="submit" value="Suche" class="search-button" />
    	</form>
    </div>
    Code:
    #topnavi {
    	height: 40px;
    	line-height: 40px;
    	background: #999;
    	padding-left: 1em;
    }
    
    #topnavi p {
    	width: auto;
    	float: left;
    }
    
    #search {
    	float: right;
    	margin-right: 10px;
    }
    Danke schon im voraus,
    -Lukas

    PS: Keine designbewertungen bitte, die ganzen graus sind erst platzhalter =) geht bisher nur um die Positionierung

    EDIT1: <snip>Das Problem zum footer wurde gelöst, da hab ich schlicht eine Codezeile vergessen. Beim Searchbox-Problem hingegen komm ich auf keinen grünen Zweig...

    EDIT2: Ok, firefox machts mittlerweile Richtig, jetzt ist nur noch die Vertikale zentrierung bei IE und Opera ein problem.
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!
    Geändert von lukasn (20.02.2009 um 19:59 Uhr)

  2. #2
    Meister(in)
    Themenstarter
    Avatar von lukasn
    Registriert seit
    23.02.2008
    Ort
    Schweiz
    Alter
    27
    Beiträge
    491
    Danke
    2
    Bekam 12 mal "Danke" in 11 Postings

    Standard AW: Positionierung mit float

    Sorry wegen Doppelpost, aber ich wollte nicht noch einen Edit machen...

    Ich habe mittlerweile verschiedenste Methoden zur vertikalen Zentrierung versucht (z.B. die mit position: absolute; top: 50%; usw) und irgendwie wollte keine bei mir funktionieren. Ich könnte natürlich die Höhe der Topnavi wieder fix machen (ist atm. 2,5em) und dann den margin-top manuell eingeben so dass es zentriert ist, aber mir wär eine flexible Variante eigentlich lieber.
    Erkennt irgendwer warum die normalen Methoden nicht ziehen bei mir?

    -Lukas

  3. #3
    Samurai
    Registriert seit
    16.01.2009
    Ort
    Hannover
    Beiträge
    248
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Positionierung mit float

    ähm um was genau geht es dir gerade? wieso willst du etwas vertical zentrieren? wenn du höhenangaben hast kannst du mit padding oder margrin arbeiten. das ist wesentlich leichter als das flexibel zu machen. außerdem wird die Seite ja nur nach unten länger, da verändert sich nix an den abständen der einzelenen divs

  4. #4
    Meister(in)
    Themenstarter
    Avatar von lukasn
    Registriert seit
    23.02.2008
    Ort
    Schweiz
    Alter
    27
    Beiträge
    491
    Danke
    2
    Bekam 12 mal "Danke" in 11 Postings

    Standard AW: Positionierung mit float

    Das Suchfeld soll einfach rechtsbündig in der Mitte der div #topnavi stehen, so wies im Safari dargestellt wird (Bild)

    Dummerweise sieht das ding in jedem Browser etwas anders aus. Wenn ich Topnavi eine höhe von 2,5em geb und #search eine Höhe von 1,5em, dann sollte ich #search mit

    [code]
    #search {
    float: right;
    margin-top: 0,5em;
    <etc>
    }

    In der Mitte positionieren können, das sieht dann aber in jedem browser wieder anders aus, Zentriert ists mit jeder Methode die ich bisher versucht hab immer nur im Safari, FF und Iron/Chrome

    PS: Flexibel ists halt insofern, dass das Layout nicht kaputt gehen soll, wenn jemand die schriftgrösse hochdreht.

  5. #5
    Samurai
    Registriert seit
    16.01.2009
    Ort
    Hannover
    Beiträge
    248
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Positionierung mit float

    also der ff, opera und gc lesen den code meiner erfahrung nach gleich dann musst du nur für ie nen extra stylesheet machen, was du eh brauchst :P

  6. #6
    Meister(in)
    Themenstarter
    Avatar von lukasn
    Registriert seit
    23.02.2008
    Ort
    Schweiz
    Alter
    27
    Beiträge
    491
    Danke
    2
    Bekam 12 mal "Danke" in 11 Postings

    Standard AW: Positionierung mit float

    offensichtlich nicht, im firefox gehts ja, im opera nicht.

Ähnliche Themen

  1. Float im IE7
    Von Macrosdesign im Forum HTML & CSS Forum
    Antworten: 3
    Letzter Beitrag: 12.11.2008, 08:05
  2. CSS float clearen
    Von Dikra im Forum HTML & CSS Forum
    Antworten: 3
    Letzter Beitrag: 17.04.2008, 19:58
  3. Float und Table - IE-Bug?!
    Von Kasper im Forum HTML & CSS Forum
    Antworten: 1
    Letzter Beitrag: 16.12.2005, 15:18
  4. Probleme mit float
    Von Modula im Forum HTML & CSS Forum
    Antworten: 13
    Letzter Beitrag: 01.08.2005, 14:26
  5. css problem float
    Von pt-3000 im Forum HTML & CSS Forum
    Antworten: 1
    Letzter Beitrag: 21.07.2005, 16:06

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •