Seitenaufbau - CSS - a:Hover

neulandhb

Seitenaufbau - CSS - aktiv Button - ContactForm7

Hallo,
ich habe drei Probleme und weiss nicht weiter.

1 - Mein Starten-Button bleibt nicht ausgeklappt, wenn die Seite aktiv ist. Es ist keine Seite sondern ein Artikel.

2 - Der Seitenaufbau sieht etwas merkwürdig aus, d.h. das Bild mit dem Spruch baut sich erst oben auf und erscheint dann wo es sein soll. vielleicht etwas nervig auf Dauer.

3 - ich bekomme auf der Kontakt-Seite den Vornamen nicht neben den Nachnamen.

Kann mir jemand helfen?

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

kaiser

Ad 1) Es ist nicht Bestandteil des Menüs, daher fehlt Dir auch die Css-Class .current_page_item. Deswegen bleibt es nicht oben. Ambesten im Code etwas wie

PHP

if ( is_home() || is_front_page() ) {
echo "current_page_item";
}

bei dem Start-Menüpunkt einbauen.

Ad 2) Das liegt am Fancy Zoom JavaScript. Das Script wird im Footer aufgerufen, daher baut es sich erst nach den anderen Dingen der Homepage auf. Sollte aber auch so sein.

Ad 3) Code?

neulandhb

vielen Dank,

zu 1: Jetzt habe ich halt den Echotext "current_page_item" aber nicht den Bezug auf mein CSS?

zu 2: Kennst Du vielleicht eine Diashow, die wie FancyZoom funktioniert, aber sich das Bild anders aufbaut?

zu 3:

Code

<div class="TELE">Nachname<span style="color:#CC0000;">*</span>
[text* nachname 30/30]


<div class="TERI">Vorname
[text vorname 30/30]</div></div>


<div class="TELE">Email<span style="color:#CC0000;">*</span>
[email* email 30/]</div>


<div class="TEBI">Ihr Anliegen/Ihre Frage<span style="color:#CC0000;\">*</span>
[textarea* your-message class:TEBI]</div>


<div class="TECA">[captchac captcha-118 class:cap size:l]
[captchar captcha-118 30/]</div>


<div class="TEND">[submit "senden"]</div>

Alles anzeigen

Vielen Danke für die Hilfe

kaiser

Ad 1) Das solltest Du in Dein Template einbauen. Damit dann die Class für Dein Css verfügbar ist.

Ad 2) Wie gesagt, es liegt nur daran, dass es im footer ist. Das kann und sollte man mit jedem Js so machen. kannst Du aber auch ändern. Auch für das aktuelle Js.

Ad 3) Plugin? Dann bitte dort auf der Plugin, Autor oder Forumsseite nachfragen.

neulandhb

hallo,

zu 1: ich hatte

PHP

<?php if ( is_single('39') || is_home()) {
		echo "current_page_item"; 
		}  ?>

in mein template eingebaut und wie gesagt ist nur der Text "current_page_item" sichtbar und nicht der Bezug auf mein CSS.

Code

#start .current_page_item > a {
	background.....

zu 2: Ich schaue mal, danke.

zu 3: Contact Form 7. Hätte ja sein können, dass Du im CSS schon den Fehler sofort ohne Aufwand siehst. Dann frage ich dort mal nach.

Danke

kaiser

Ad 3) Das inline-css spricht nur von der Farbe (color).

Ad 1) Ich nehme einmal an, dass 39 die ID der Front Page ist? Bitte das nächste mal soetwas dazu sagen. Einstellungen raten ist manchmal schwer...

PHP

<!-- das geht so nicht. ist ja eine css class und nicht ein text im div -->
<div id="start"><a href="?p=39"></a>current_page_item</div>


<!-- lieber so: -->
<div id="start" <?php if ( is_home() || is_front_page() ) { echo class="current_page_item"; } ?>><a href="?p=39">Start</a></div>

cebito

Zitat von neulandhb

2 - Der Seitenaufbau sieht etwas merkwürdig aus, d.h. das Bild mit dem Spruch baut sich erst oben auf und erscheint dann wo es sein soll. vielleicht etwas nervig auf Dauer.

Ich kann dir nur empfehlen dich an diese Struktur zu halten, hab es immer noch on: http://www.cebito.de/examples/variabel/ dann gibts auch keine Probleme...

neulandhb

Hi Cebito,

ich habe mich jetzt an Deine Struktur gehalten und trotzdem ist baut sich der Spruchkasten erst oben (Firefox) und dann dort auf, wo er sein soll. Die Höhe des Divs zieht er sich aus dem

PHP

<script>
	        $('#bottom').css({
         'height':neueHoehe,
         'top':offset.top
      });
</script>

das habe ich in dem Script eingefügt, was Du mir für die Seitentransparentz gegeben hast, damit er eine variable Höhe bekommt. Dazu das CSS

Code

#zitat {
	position:absolute;
	width:132px;
	bottom:120px;
}


#bottom {
	left:-132px;
	position:absolute;
	width:132px;
}

Alles anzeigen

sonst sehe ich keine Möglichkeit, dass die Höhe des Divs Variable ist und der Kasten immer unten daran klebt.
Leider ist kein Unterschied zu meinem vorherigen Aufbau. Wenn es nur ein Bild im Kasten wäre, kann man sich mit [COLOR="Red"]background-position: bottom[/COLOR] aushelfen. Aber mit einem Plugin geht es nicht. Hast Du vielleicht ein Idee?

Zu meinem Problem mit dem Starten Button.

Code

#start {
	background-image:url("starten.png");
	height:64px;
	left:-22px;
	position:absolute;
	top:30px;
	width:22px;
	}
	
#start li:hover > a,
#start li.page_item > a {
	background-image:url("starten.png");
	height:64px;
	left:0px;
	position:absolute;
	top:0px;
	width:22px;
	}
	
#start li.current_page_item > a {
	background-image:url("starten_a.png");
	background-color:#223044;
	background-repeat:no-repeat;
	height:64px;
	left:-22px;
	position:absolute;
	top:0px;
	width:44px;
	}

Alles anzeigen

PHP

<div id="start">
		<?php 
		if ( is_single('39') || is_home()) {  ?>
		<li class="page_item current_page_item"> 
        <a href="?p=39"></a></li>
                
		<?php } ?>
        </div>

jetzt ist es schon fast perfekt. nur wenn ich eine andere Seite anklicke, habe ich nicht mehr die Möglichkeit Starten auszuwählen.:neutral:

cebito

Was machen die JS-Aufrufe in dem Div? Bring sie in den Head-Teil oder ganz ans Ende der Seite vor </body>. Den kleinen Extra-Div da drin kannst dir auch sparen, welche Funktion hat der? Bei mir baut es sich nur verzögert auf, nicht wie beim letzten mal...

neulandhb

Hmmm, JS-Aufrufe sind doch im Headteil? Oder was meinst Du?

PHP

<script>
$(window).resize(function() {
  setDiv();
});
$(window).load(function() {
  setDiv();
});
function setDiv(){
	var neueBreite = $(window).width()/2 - $('#centerCol').width()/2;
	var neueHoehe = $('#container').outerHeight();
	var offset = $('#container').offset();
      $('#leftCol').css({
         'width':neueBreite,
         'height':neueHoehe,
         'top':offset.top
      });
      $('#rightCol').css({
         'width':neueBreite,
         'height':neueHoehe,
         'top':offset.top
      });
	        $('#bottom').css({
         'height':neueHoehe,
         'top':offset.top
      });
}
</script>

Alles anzeigen

das ist der Code von Dir für die Seitenleisten, wo ich die letzten 3 Zeilen eingefügt habe, damit das bottom.div die Variable Höhe bekommt. Das ist auch die Funktion, die er haben soll.

Hast recht, es ist auch schon besser. Trotzdessen baut sich der Kasten als erstes oben und dann unten auf, was an dem JS liegt. Ich weiss aber nicht, wie ich sonst den Kasten immer unten bei variabeler Höhe kleben haben kann. Es ist ja in dem Sinne kein Bild sonder das PlugIn "Random image gallery"

cebito

Zitat von neulandhb

das ist der Code von Dir für die Seitenleisten, wo ich die letzten 3 Zeilen eingefügt habe, damit das bottom.div die Variable Höhe bekommt. Das ist auch die Funktion, die er haben soll.

Den bottom hab ich bei mir gar nicht drin, und den brauchts auch nicht. Dein Problem ist, das du dein Zitat vom Content abgekoppelt hast, bei mir hängt es da dran. Dann musst du auch nicht irgendwelche krummen Sachen drehen, um es da wieder hinzupositionieren. Das es länger läd, liegt wahrscheinlich am Plugin.
Der (bei mir) motto-div ist schon variabel, zur Veranschaulichung hab ich mal einfach noch ein wenig Text hinzugefügt... http://www.cebito.de/examples/variabel/

Ich würde sagen, du schaust dir das Beispiel nochmal genau an, und machst es dann so. Kopier dir am besten die Seite, dann kannst du mal durchspielen, was passiert, wenn du was änderst etc.pp.

neulandhb

Zitat

Den bottom hab ich bei mir gar nicht drin, und den brauchts auch nicht. Dein Problem ist, das du dein Zitat vom Content abgekoppelt hast, bei mir hängt es da dran.

Wie habe ich mein zitat vom content abgekoppelt? es ist nicht meine absicht.
den bottom habe ich wegen der variablen höhe des zitat.divs zugefügt.

ich habe es jetzt zumindest nach deiner anleitung gebaut. ist aber ein unterschied, ob es nur html und ein sauberes CSS ist. in Wordpress schaut es halt anders aus. so sieht es zumindest dann bei mir aus.

cebito

Dir fehlt ein einfaches clearen nach dem Ende von #container, da einfach mal <div style="clear:both;"></div> ergänzen. Ach ja, fürs weitere, deaktiviere mal bitte den Bildwechsel vom Hintergrundbild, so kann man mit Firebug nicht arbeiten, weil er bei jedem Bildwechsel da hoch springt. Das kannst wieder einschalten, wenn deine Seite soweit fertig ist.

neulandhb

HTML

<?php
/**
 * The Header for our theme.
 *
 * Displays all of the <head> section and everything up till <div id="main">
 *
 * @package WordPress
 * @subpackage Twenty_Ten
 * @since Twenty Ten 1.0
 */
?><!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<title><?php
	/*
	 * Print the <title> tag based on what is being viewed.
	 */
	global $page, $paged;


	wp_title( '|', true, 'right' );


	// Add the blog name.
	bloginfo( 'name' );


	// Add the blog description for the home/front page.
	$site_description = get_bloginfo( 'description', 'display' );
	if ( $site_description && ( is_home() || is_front_page() ) )
		echo " | $site_description";


	// Add a page number if necessary:
	if ( $paged >= 2 || $page >= 2 )
		echo ' | ' . sprintf( __( 'Page %s', 'twentyten' ), max( $paged, $page ) );


	?></title>
<link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
<?php
	/* We add some JavaScript to pages with the comment form
	 * to support sites with threaded comments (when in use).
	 */
	if ( is_singular() && get_option( 'thread_comments' ) )
		wp_enqueue_script( 'comment-reply' );


	/* Always have wp_head() just before the closing </head>
	 * tag of your theme, or you will break many plugins, which
	 * generally use this hook to add elements to <head> such
	 * as styles, scripts, and meta tags.
	 */
	wp_head();
?>


    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    
	
	<!-- MAXIMAGE -->
	<script src="jquery.maximage.js" type="text/javascript" charset="utf-8"></script>
    
<script>
	$(function(){
		jQuery('img.slidemaximage').maxImage({
			isBackground: true,
			slideShow: false,
			slideShowTitle: false,
			slideDelay: 15,
			maxFollows: 'height',
			overflow: 'auto',
			resizeMsg: {show: false}
		});
	});
</script>	


    
<script>
$(window).resize(function() {
  setDiv();
});
$(window).load(function() {
  setDiv();
});
function setDiv(){
	var neueBreite = $(window).width()/2 - $('#centerCol').width()/2;
	var neueHoehe = $('#container').outerHeight();
	var offset = $('#container').offset();
      $('#leftCol').css({
         'width':neueBreite,
         'height':neueHoehe,
         'top':offset.top
      });
      $('#rightCol').css({
         'width':neueBreite,
         'height':neueHoehe,
         'top':offset.top
      });
}
</script>


</head>


<body <?php body_class(); ?>>




<!-- maxImage Background Slideshow -->
<img src="loading.gif" class="loader" />
<img src="bg1.jpg" alt="" title="" class="slidemaximage" />
<img src="bg2.jpg" alt="" title="" class="slidemaximage" />
<img src="bg3.jpg" alt="" title="" class="slidemaximage" />
    




<div id="wrapper" class="hfeed">


<div id="leftCol"></div> <div id="rightCol"></div>


    
    	<div id="centerCol">




		<div id="blank"></div>        
    
 		<div id="centerRightCol">


		<div id="masthead">
	


			<div id="access" role="navigation">
			  <?php /*  Allow screen readers / text browsers to skip the navigation menu and get right to the good stuff */ ?>
				<div class="skip-link screen-reader-text"><a href="#content" title="<?php esc_attr_e( 'Skip to content', 'twentyten' ); ?>"><?php _e( 'Skip to content', 'twentyten' ); ?></a></div>
				<?php /* Our navigation menu.  If one isn't filled out, wp_nav_menu falls back to wp_page_menu.  The menu assiged to the primary position is the one used.  If none is assigned, the menu with the lowest ID is used.  */ ?>
				<?php wp_nav_menu( array( 'container_class' => 'menu-header', 'theme_location' => 'primary' ) ); ?>
			</div><!-- #access -->
            
          		</div><!-- #masthead -->
            
            <div id="content">
            
             <div id="start">
		<?php 
		if ( is_single('39') || is_home()) {  ?>
		<li class="page_item current_page_item"> 
        <a href="?p=39"></a></li>
                
		<?php } ?>
        </div>
        		<div id="zitat"><p style="text-align: center; margin-bottom:0;"><strong style=" font-family: Times">&bdquo;</strong>Der beste <strong style="font-size: 20px; font-weight:normal; line-height:12px;">Augenblick</strong> anzufangen ist immer <strong style="font-size: 20px; font-weight:normal; line-height:12px;">jetzt</strong></p></div>


	<div id="footer">




        		</div><!-- #middlerightCol -->

Alles anzeigen

wo soll ich das in der header.php einfügen?

cebito

Wie gehts weiter, wo ist der Rest? Genau dahinter wirds spannend ;)

neulandhb

dort habe ich es jetzt am ende eingefügt. arggggg:confused:

cebito

Nicht dort, die header.php wird von einer anderen Datei aufgerufen, und in genau der Datei gehts weiter und wird interessant...

neulandhb

dann klappt das auch mit dem PlugIn. Vieelen Dank.:)

jetzt sind bloß die beiden transparenten flächen anfangs um paar pixel verschoben und wenn man das browserfenster weiter aufmacht, passt es wieder?!?

und zweitens ist das content fenster so groß, dass es über die buttons geht und man nicht mehr direkt daran kommt, um sie auszuwählen.

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Seitenaufbau - CSS - a:Hover

Jetzt mitmachen!