suche neben logo in twentytwelve

gericoach

Schon wieder die Suche...:)
Arbeite mit TT. Möchte die Suche in den Header packen, auf der Höhe des Logos, was aber scheitert.
Habe folgendes bisher gemacht:
style.css

Code

/*searchform
---------------------------/*


.screen-reader-text {
    position:absolute;
    right: 25px;
    top: 90px;
z-index:999;
}


.searchform {
    float:right;
}
.searchform input[type=text] {
    border:1px dashed #999;
    background-color:#fff;
    color:#000;
    padding:2px;
    width:144px;
}
.searchsubmt {
}

Alles anzeigen

Header.php

PHP

[COLOR=#a9a9a9]<header id="masthead" class="site-header" role="banner">
        <hgroup>
            <h1 class="site-title"><a href="<?php echo  esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr(  get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><img  src="<?php echo  bloginfo('stylesheet_directory');?>/images/logo.png" alt="<?php  bloginfo( 'name' ); ?>" width="258"  height="38"/></a></h1>
        </hgroup> [/COLOR][COLOR=#b22222]<div id="searchform"><?php get_search_form(); ?> </div>[/COLOR]
       [COLOR=#a9a9a9] <?php $header_image = get_header_image();
        if ( ! empty( $header_image ) ) : ?>[/COLOR]

Wie ihr seht, habe ich schon einen z-index eingesetzt, erfolglos. Wollte den Aufruf mittlerweile neutral von hgrpoup, masthead usw. einfach oben drauf packen. Erfolglos.

Wo liegt mein Fehler? Was mache ich falsch? Ist der style code überhaupt sinnvoll?

Link zur Seite >>

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

maxe

searchform ist keine class(.) sondern eine id(#)

Code

div#searchform {
float: right;
margin-top: -50px;
}

gericoach

wie meinst Du das? Wie muss ich das ändern? Ist das absicht mit dem "div#searchform {...." ?

SirEctor

AW: suche neben logo in twentytwelve

Eine ID spricht man mit # in der CSS an, nicht mit Punkt (.) Das wollte maxe sagen.

gericoach

ok, verstanden. Hoffe, ich kann mir das langfristig merken... Eine Anpassung hat aber leider auch nicht geholfen, die Suchmaske sitzt immer noch unter dem Logo. Habt ihr noch ne Idee, woran es liegen könnte?

maxe

du hast die ganzen Searchform Styles auch auskommentiert ;-)
du musst am Schluss das /* umdrehen zu */

Code

/*searchform
---------------------------*/

mfitzen

So?

Versuch´s mal hiermit:

Code

.site-title {width: 400px; float: left;}
#searchform {float: right;}

Die H1 mit der Klasse site-title nimmt als Blockelement die volle Breite in Anspruch, weswegen Du diesem Element eine fixe Breite angeben müsstest, damit da noch was floatet.

gericoach

[COLOR=#800000]Danke für die Tipps.[/COLOR] Dass ich die description nicht geschlossen habe, war ja schonmal total dusselig...
Habe anschließend den Tipp von infected umgesetzt. War erstmal am Grübeln, wo das wohl rein soll. Aber es läuft. Nun verschiebt es allerdings das Logo bei der Ansicht auf iphone/android. Kann ich da noch gegensteuern?

gericoach

Gelöst. Infected hatte ja schon geschrieben, dass dem site-title eine Größe zugeordnet werden muss, habe nun aus den 400px > 300px gemacht und alles passt.

Willkommen! Melden Sie sich an oder registrieren Sie sich.

suche neben logo in twentytwelve

Jetzt mitmachen!