Um schreiben oder kommentieren zu können, benötigen Sie ein Benutzerkonto.
Sie haben schon ein Benutzerkonto? Melden Sie sich hier an.
Jetzt anmeldenHier können Sie ein neues Benutzerkonto erstellen.
Neues Benutzerkonto erstellen
Mein Ziel ist es, auf der gleichen Ebene wie das Logo ist rechts ein paar Socila Icons zu positionieren. Leider bisher recht erfolglos. Wie würdet Ihr da vorgehen? Eigenes Div anlegen und ein Social Media Plugin da positionieren? Oder habt ihr da einen wirklich guten Ansatz?
URL: http://plus-seminare.info/
Danke für jede Idee/jeden Vorschlag!
P.S. heisst natürlich: "
[h=2][size=12]social media icons neben logo in twentytwelve [/SIZE][/h]
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.
Hallo Gericoach
interessant wäre noch zu wissen, ob denn das Theme responsive bleiben soll? Und wenn ja, wo denn dann die Icons erscheinen sollen?
Aber prinzipiell würde ich es so machen wie du oben schon erwähnt hast -> eigenes Div und PlugIn-Aufruf rein.
LG, Stephan
Hey Stephan, yup, es sollte responsiv bleiben. Habe aktuell Folgendes gemacht:
in der Header.php:
<div id="header-icons">
<ul>
<li><a href="http://www.facebook.com" target="_blank" alt="Facebook"><img src="http://plus-seminare.info/wp-content/uploads/2013/05/Facebook.png"></a> </li>
<li><a href="http://www.twitter.com" target="_blank" alt="Twitter"><img src="http://plus-seminare.info/wp-content/uploads/2013/05/Twitter.png"></a> </li>
<li><a href="http://www.googleplus.com" target="_blank" alt="Google+"><img src="http://plus-seminare.info/wp-content/uploads/2013/05/Googleplus.png"></a></li>
</ul>
</div>und in die Style.css:
#header-icons {
float: right;
margin: 50px;
width: 100px;
padding-left: 15px;
}
#header-icons ul {
height: 50px;
width: 50px;
}
#header-icons ul li {
display: inline;
float: right;
height: 50px;
margin: 0px;
padding: 0px;
}
#header-icons img {
float: right;
height: 48px;
margin: 0px;
padding-left: 15px;
width: 48px;
}Klappt aber nicht so, wie gedacht. Soll ja eigentlich nebeneinander und auf Höhe Logo, nur halt rechts. Ist halt die Frage, ob es an der richtigen Stelle in der Header.php ist. Denke mal auch nicht:
<?php
/**
* The Header for our theme.
*
* Displays all of the <head> section and everything up till <div id="main">
*
* @package WordPress
* @subpackage Twenty_Twelve
* @since Twenty Twelve 1.0
*/
?><!DOCTYPE html>
<!--[if IE 7]>
<html class="ie ie7" <?php language_attributes(); ?>>
<![endif]-->
<!--[if IE 8]>
<html class="ie ie8" <?php language_attributes(); ?>>
<![endif]-->
<!--[if !(IE 7) | !(IE 8) ]><!-->
<html <?php language_attributes(); ?>>
<!--<![endif]-->
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<meta name="viewport" content="width=device-width" />
<title><?php wp_title( '|', true, 'right' ); ?></title>
<link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
<?php // Loads HTML5 JavaScript file to add support for HTML5 elements in older IE versions. ?>
<!--[if lt IE 9]>
<script src="<?php echo get_template_directory_uri(); ?>/js/html5.js" type="text/javascript"></script>
<![endif]-->
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<div id="page" class="hfeed site">
<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="295" height="82"/></a></h1>
<h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>
</hgroup>
<div id="header-icons">
<ul>
<li><a href="http://www.facebook.com" target="_blank" alt="Facebook"><img src="http://plus-seminare.info/wp-content/uploads/2013/05/Facebook.png"></a> </li>
<li><a href="http://www.twitter.com" target="_blank" alt="Twitter"><img src="http://plus-seminare.info/wp-content/uploads/2013/05/Twitter.png"></a> </li>
<li><a href="http://www.googleplus.com" target="_blank" alt="Google+"><img src="http://plus-seminare.info/wp-content/uploads/2013/05/Googleplus.png"></a></li>
</ul>
</div>
<nav id="site-navigation" class="main-navigation" role="navigation">
<h3 class="menu-toggle"><?php _e( 'Menu', 'twentytwelve' ); ?></h3>
<a class="assistive-text" href="#content" title="<?php esc_attr_e( 'Skip to content', 'twentytwelve' ); ?>"><?php _e( 'Skip to content', 'twentytwelve' ); ?></a>
<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>
</nav><!-- #site-navigation -->
<?php $header_image = get_header_image();
if ( ! empty( $header_image ) ) : ?>
<a href="<?php echo esc_url( home_url( '/' ) ); ?>"><img src="<?php echo esc_url( $header_image ); ?>" class="header-image" width="<?php echo get_custom_header()->width; ?>" height="<?php echo get_custom_header()->height; ?>" alt="" /></a>
<?php endif; ?>
</header><!-- #masthead -->
<div id="main" class="wrapper">Hab den Code in den hgroup Tag gepackt, bringt aber auch nix. Der Custom-header ignoriert den Code komplett...
hab den html code erstmal rausgenommen, da der kunde morgen früh drauf schaut. Da wäre es nicht so prickelnd, wenn er dieses Chaos erblickt... Problem bleibt aber bestehen.
Hab die Liste als solche hinbekommen. Aber die Positionierung ist immer noch murks.
style.css:
#header-icons {
position: relative;
float: right;
display: inline;
right:50px;
top: 10px;
z-index: 999;}
#header-icons ul {
list-style-type: none;}in der header.php hab ich den Code direkt hinter das Logo gesetzt, kriege die Icons trotzdem nicht auf gleiche Höhe. Muss ich da evtl. noch was in der functions.php anpassen??
<div id="page" class="hfeed site">
<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="295" height="82"/></a></h1>
<div id="header-icons">
<ul>
<li><a href="http://www.facebook.com" target="_blank" alt="Facebook"><img src="http://plus-seminare.info/wp-content/uploads/2013/05/Facebook.png"></a>
<a href="http://www.twitter.com" target="_blank" alt="Twitter"><img src="http://plus-seminare.info/wp-content/uploads/2013/05/Twitter.png"></a>
<a href="http://www.googleplus.com" target="_blank" alt="Google+"><img src="http://plus-seminare.info/wp-content/uploads/2013/05/Googleplus.png"></a></li>
</ul>
</div>
</hgroup>
<nav id="site-navigation" class="main-navigation" role="navigation">Sorry Geri, war dann gestern nichtmehr online. Jetzt sieht es aber schon gut aus! Was meinst du mit gleicher Höhe? Oben bündig? unten Bündig? Oder eh wie jetzt in der Mitte Bündig? Ich denke die stelle in der header.php hast du richtig gewählt und in der functions.php sollte eigentlich nichts anzupassen sein.
LG, Stephan
[COLOR=#b22222]OK, Lösung gefunden![/COLOR]
Für diejenigen, die es interessiert: in der Style.css habe ich folgenden Code eingesetzt:
#header-icons {
position: relative;
float: right;
display: inline;
right:0px;
top: 70px;
z-index: 999;
}
#header-icons ul {
list-style-type: none;
}In der header.php habe ich den Listencode höher gesetzt, noch vor den hgroup-Tag:
<header id="masthead" class="site-header" role="banner"><div id="header-icons">
<ul>
<li><a href="http://www.facebook.com" target="_blank" alt="Facebook"><img src="http://plus-seminare.info/wp-content/uploads/2013/05/Facebook.png"></a>
<a href="http://www.twitter.com" target="_blank" alt="Twitter"><img src="http://plus-seminare.info/wp-content/uploads/2013/05/Twitter.png"></a>
<a href="http://www.googleplus.com" target="_blank" alt="Google+"><img src="http://plus-seminare.info/wp-content/uploads/2013/05/Googleplus.png"></a></li>
</ul>
</div>
Einzig auf dem kleinsten Mobile siehts hmmm aus. Ab Tablet ist es ok und passt.
stephan aka pixselig: Danke, dass Du Dich nochmal gemeldet hast! Habs hinbekommen... cherio!!
Hallo gericoach,
ich habe mir mal die betroffene Seite angeschaut und mir gefällt die Lösung mit der Grafik unter der Menüleiste sehr gut. Wie hast Du das realisiert?
Gruß, Ben
okeanos: welche "Grafik unter der Menüleiste" meinst Du?
Die Grafik wo die Bilder wechseln. Also über die gesammte Breite.
Das schaut echt stark aus.
das ist der Revolution Slider
Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!