Elemte richtig anordnen

trytokillme · 9. Juli 2013

Hey leute, ich muss für mein Praktikum auf unserer Wordpress Seite Sprachbuttons einbauen. Gesagt getan. Jetzt hab ich die 2 Links in die Header Php rein gemacht. Und sie sind auch rechts von der Seite nur nicht weit genug und auch viel zu Tief (fast in der Navi leiste)

Kann mir jemand sagen wie ich das anstelle? Hier mal der Code von der header.php

header.php

PHP

<?php
/**
* Header Template
*
* @package Mysitemyway
* @subpackage Template
*/
?><!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<title><?php mysite_document_title(); ?></title>
<link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
<?php mysite_head(); ?>
<?php wp_head(); ?>
</head>
<body class="<?php mysite_body_class(); ?>">
<div class="multibg"><div class="multibg"></div></div>
<div id="body_inner">
<?php mysite_before_header();
?><div id="header">
<div id="header_inner">
<div style="float:right;">
<?php
global $q_config;
if(is_404()) $url = get_option('home'); else $url = '';
echo '<ul id="headerMenuSystem">';
foreach(qtrans_getSortedLanguages() as $language)
{
$link = qtrans_convertURL('', $language);
if($_SERVER["HTTPS"] == "on")
$link = preg_replace('#^http://#','https://', $link);
echo '<a href="'.$link.'"';
echo ' hreflang="'.$language.'" title="'.$q_config['language_name'][$language].'"';
echo '><img src="..../flags/'.$language.'.png"><span';
echo '>'.$q_config['language_name'][$language].'</span></a></li>';
}
echo '</ul>';
?>
</div>
<?php mysite_header();
?></div>
</div>
<?php mysite_after_header();
?><div id="content">
<div id="content_inner">
<?php mysite_before_main();
?><div id="main">
<div id="main_inner">
<?php mysite_before_page_content(); ?>

Alles anzeigen

Und so sieht es auf der Page aus.

florian0 · 9. Juli 2013

Die betreffenden StyleSheet's wären noch praktisch. Oder gibts keine?

Wo ist dein <li> -Tag?
Ich seh nur den </li>

Gruß
florian0

trytokillme · 9. Juli 2013

Hmm weiß ich net kenn mich net so aus.

Den part hier hab ich im netz gefunden und eingefügt (bzw ein teil davon also das grundgerüst, nach rechts setzen war ich)

<div style="float:right;">
<?php
global $q_config;
if(is_404()) $url = get_option('home'); else $url = '';
echo '<ul id="headerMenuSystem">';

foreach(qtrans_getSortedLanguages() as $language)
{
$link = qtrans_convertURL('', $language);

if($_SERVER["HTTPS"] == "on")
$link = preg_replace('#^http://#','https://', $link);

echo '<a href="'.$link.'"';
echo ' hreflang="'.$language.'" title="'.$q_config['language_name'][$language].'"';
echo '><img src="..../flags/'.$language.'.png"><span';
echo '>'.$q_config['language_name'][$language].'</span></a></li>';
}

echo '</ul>';
?>
</div>

florian0 · 9. Juli 2013

Ok ich hab das Prob. jetzt erst verstanden ...

Ich seh grad ... ist es das Theme?
http://themes.mysitemyway.com/method/
Nimm position:absolute ... der ganze Header ist so aufgebaut.

Sieht sogar ganz ok aus ...

(Ist dein Code + 3px Padding auf den <span> und position: absolute)

Gruß
florian0

trytokillme · 9. Juli 2013

Theme ist inFocus. Was meinst du mit 3px Padding auf dem <span> ?^^

florian0 · 9. Juli 2013

Im Moment sieht dein html-Ergebniss etwa so aus:

HTML

<ul id="headerMenuSystem" class="langselect">
<li><a href="#"><img src="deutsch.png"><span>Deutsch</span></li>
<li><a href="#"><img src="englisch.png"><span>Englisch</span></li>
</ul>

Und ich hab eben dem <span> Element per CSS noch 3px Padding gegeben. Sonst klebte das so am Icon dran:

CSS

langselect.ul > li > a > span {
padding: 3px;
}
/* Und halt das restliche Listen-Styling */
langselect.ul {
list-style-type: none; /* Punkte weg */
}
langselect.ul > li {
display: inline; /* Elemente nebeneinander anzeigen */
}

Alles anzeigen

trytokillme · 9. Juli 2013

In welche Datei kommt das rein?

Style.css? oder in Themen bei General Settings->Custom CSS?

Edit: Also muss ich auch das hier anpassen damit er es richtig aus dem CSS ließt?

echo '<ul id="headerMenuSystem" class="langselect">'; [müsste so richtig sein oder?

florian0 · 10. Juli 2013

Jup.
Und über die ID kannste dann per CSS die Position festlegen.

Click me for a solution

Teilen