Suchfeld verschieben

Afox · Mar 10th 2016

Hallo,

angenommen ich wollte das Suchfeld z.B. in die Mitte des Headers verschieben. Wie würde man das updatesicher angehen? Ich habe bisher ausschließlich per CSS Dinge geändert und würde dies - zumindest im Fall vom WCF - zum ersten Mal machen.

Danke für jeden Hinweis.

Gruß,

Afox

norse · Mar 10th 2016

Meines Erachtens wäre auch in diesem Fall CSS die Methode der ersten Wahl.

Gruß norse

Afox · Mar 10th 2016

hi, ich habe mal eine Skizze gemacht. Geht das wirklich auch mit CSS ohne das Anlegen/Ändern eines Templates o.ä.?

Gruß,

Afox

Black Rider · Mar 10th 2016

Ja.

CSS

#topMenu {
	overflow: visible;

	.searchBar {
		left: 50%;
		margin-left: -120px;
		right: auto;
		top: 80px;
	}
}

Afox · Mar 10th 2016

sehr freundlich von dir, danke! leider findet aktuell nur eine Verschiebung innerhalb des userpanels statt

Timeout · Mar 10th 2016

füg noch ein:

Code

.userPanel {overflow:visible;}

dazu, dann sollte es ausserhalb des userPanels ersichtlich sein.

Afox · Mar 11th 2016

ok, danke. funktioniert nicht mit folgendem Gesamtcode

CSS

#topMenu {
	overflow: auto;
	.userPanel {
		overflow:visible;
	}
	.searchBar {
		left: 50%;
		margin-left: -120px;
		right: auto;
		top: 80px;
	}
}

Display More

Vielleicht habe ich den zweiten Schnipsel an die falsche Stelle gepackt?

Timeout · Mar 11th 2016

so ->

CSS

.userPanel {overflow:visible;}




#topMenu {
	overflow: auto;
	.searchBar {
		left: 50%;
		margin-left: -120px;
		right: auto;
		top: 80px;
	}
}

Display More

Afox · Mar 11th 2016

geht leider immernoch nicht, dennoch danke

Timeout · Mar 11th 2016

Quote from Afox

geht leider immernoch nicht

nimm das (gerade getestet):

CSS

.userPanel > div > .searchBar {
    right: auto;
    top: 80px;
    left: 50%;
    margin-left: -120px;
}




.userPanel {overflow:visible;}

Display More

Black Rider · Mar 11th 2016

Habe meinen Code oben korrigiert.

Afox · Mar 12th 2016

hi, wollte nur noch eben Feedback geben dass ich es wieder rückgängig gemacht habe, da die Formatierung bei geringen breiten (Smartphone etc.) nicht mehr passt. Falls jemand noch eine Lösung für dieses Problem hat kann er es gerne hier posten. Ich wollte aber erstmal nur "warnen" dass es noch nicht 100% funktioniert.
Gruß,

Afox

Nord1 · Mar 12th 2016

CSS

@media screen and (min-width: 801px) {
.userPanel > div > .searchBar {
right: auto;
top: 80px;
left: 50%;
margin-left: -120px;
}
.userPanel {overflow:visible;}
}

Auflösung nach Wunsch Eintragen

Suchfeld verschieben

Participate now!

Share