Beiträge zentrieren, Suche in den Header

k0libri

Moin,

hab die Sidebar aus meinem Blog geschmissen und möchte nun die Beiträge zentrieren und insgesamt etwas "breiter" machen .. Desweiteren möchte ich die Suchfunktion in den Headerbereich, neben das Impressum packen ..

Mein Blog: http://xeonline.de/

Die header.php

PHP

<?php
/**
 * @package WordPress
 * @subpackage Smooth
 */
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>


	<head profile="http://gmpg.org/xfn/11">
		<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
		
		<title><?php wp_title('&laquo;', true, 'right'); ?> <?php bloginfo('name'); ?></title>
		
		<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
		<!--[if lte IE 7]><link rel="stylesheet" type="text/css" href="<?php bloginfo('template_url'); ?>/css/ie.css" media="screen" /><![endif]-->
		<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
		
		<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/cufon.js"></script>
		<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/qlassik.font.js"></script>


		<?php if ( is_singular() ) wp_enqueue_script( 'comment-reply' ); ?>
		<?php wp_head(); ?>
	</head>
	
	<body>
		
		<div id="nav">
			<div id="navContent" class="clear">
				<?php wp_page_menu(array('show_home' => '1')); ?>
			</div>
		</div>
		
		<div id="wrapper">
		
		<div id="header">
			<div class="left">
				<h1><a href="<?php echo get_option('home'); ?>/"><?php bloginfo('name'); ?></a></h1>
				<p><?php bloginfo('description'); ?></p>
			</div>
		</div>

Alles anzeigen

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

Tutrix

Das kannst du über die style.css deines Themes einstellen.

Das wrapper-div hat 940px

Durch das Entfernen der Sidebar, kannst du nun dem Content auch 940px geben.

style.css Zeile 145

Code

.col620 {
    float: left;
    margin-right: 20px;
    [COLOR=Red]width: 620px[/COLOR];
}

die Post-Infos links haben 140px plus 20px Abstand nach rechts

bleiben also 780px für den Post-Content

style.css Zeile 136

Code

.col460 {
    float: left;
    margin-right: 20px;
   [COLOR=Red]width: 460px[/COLOR];
}

Ach ja, das "margin-right: 20px;" kannst bei diesem Teil entfernen, ist ja keine Sidebar mehr da, somit ist dieser Abstand überflüssig

k0libri

Jau danke, wie kann ich denn jetzt noch den Post sowie das Header zentrieren und die Suche oben einfügen ?

Tutrix

lies dir meinen Beitrag nochmal durch ;-)

im Moment hast du dem Content 780px gegeben statt 940

und beim Post-Content hast du nur das margin entfernt, aber nicht auf 780px erweitert

eine Suchfunktion kann ich auf deiner Seite nicht finden

k0libri

So ist mir der Post aber zu breit und das Header offensichtlich immernoch nicht in der Mitte, aber erstmal danke ;)

Die Suchfunktion kann ich per <?php get_search_form(); ?> einfügen .. Beispielsweise auf http://xeonline.de/404

Tutrix

Zitat

So ist mir der Post aber zu breit

das kannst natürlich nach belieben anpassen ;-)
--------------------------------------
die Suchfunktion kannst ja mal hier (header.php) vor dem Menücode(rot) einfügen

PHP

<div id="navContent" class="clear">
[COLOR=Red]<?php wp_page_menu(array('show_home' => '1')); ?>[/COLOR]
</div>

eventuell muss es in ein div zum ausrichten
-------------------------------------
Header ausrichten
style.css Zeile 94

Code

#header .left {
    margin-left: 160px;
}

die 160px anpassen

k0libri

So, jetzt passt es mit der Zentrierung. Leider macht die Suchfunktion Probleme, die hätte ich gerne nur halb so breit und eben neben dem Impressum ...

Tutrix

Zitat von k0libri

Leider macht die Suchfunktion Probleme, die hätte ich gerne nur halb so breit und eben neben dem Impressum ...

dann setze sie mal nach dem Menü statt davor ;-)

Code

#searchform #s {
    border: 0 none;
    border-bottom-right-radius: 0;
    border-top-right-radius: 0;
    float: left;
    height: 20px;
    padding: 5px 5px 0;
   [COLOR=Red] [/COLOR][COLOR=Red]width: 265px;[/COLOR]




}

Alles anzeigen

width anpassen

und eventuell hier

Code

#searchform {
    margin-top: 5px;




}

ein

Code

position: absolute;

hinzufügen

k0libri

So, ist halbiert aber egal ob vor oder hinter, die Suchfunktion bleibt vor dem ganzen ..

Tutrix

setze die Suchfunktion mal in

Code

<div class="search">[COLOR=Red]also hier rein[/COLOR]</div>

und das in die style.css einfügen

Code

.menu {
    margin-right: 250px;
}
.search {
    float: right;
    margin-right: -340px;
}

k0libri

Daanke ! Wenn du mir jetzt auch noch sagen kannst, wie man die Suche etwas transparent macht und per Hover wieder zu 100% sichtbar macht, wäre das einfach der Hammer ! :)

Tutrix

Jetzt hast die Suche aber weit raus geschoben, ist somit nur für User großer Displays sichtbar.
Verkleiner mal das Browserfenster dann siehst was ich meine.

Zur Transparenz = http://www.w3schools.com/css/css_image_transparency.asp

k0libri

Ach, daran hab ich gar nicht gedacht ...

Tutrix

entferne mal testweise das

Code

position: absolute;

wieder, durch das div ist dies überflüssig und dann passt es glaub auch

k0libri

Hab die Suchfunktion in den Footer gebaut, da ich den sowieso noch ein wenig ausbauen wollte - vielen Dank für deine Hilfe !

k0libri

Ein Problem hab ich noch, egal in welche Größe ich ein Bild einfüge, es wird immer auf die gleiche Größe getrimmt, jedoch wird die eingestellte Größe 0.5 Sec angezeigt .. Woran kann das liegen ?

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Beiträge zentrieren, Suche in den Header

Jetzt mitmachen!