# Darstellungsprobleme der Navigation



## holzart (26. Februar 2012)

Hallo,

wie im Topic schon erwähnt habe ich Probleme die Navigation mit dem roten Hintergrund bündig zu dem Bannerbild zu gestalten. Die Seite lautet:

http://www.kulturpark-steinitz.de

Die Seite habe ich mit dem CMS Joomla! 1.7 erstellt und ist fast perfekt, nur diese blöde Navigation muss noch bündig werden. Zudem soll die Navigation beim Zoom auch noch bündig bleiben. Die Darstellung ist bei mir im ff richtig, jedoch in den anderen wie Chrome, IE und Safari wird es gleichermaßen falsch angezeigt.  Im IE ist der Linkhover des Logos auch noch komisch. Da kommt unten ein weißer Strich. Keine Ahnung woher das kommen mag. 

Wäre super nett wenn heute noch jemand sich des Problems annehmen könnte, da ich die Seite morgen in meiner Bachelorverteidigung nach der Präsentation zeige. 

Hier mal ein Auszug des Codes damit man nicht suchen muss 

So steht es in der Index.php:


```
<div id="navigation"><!-- Beinhaltet beide Navigationsleisten -->
                    
					<?php if ($navposition=='left' AND $showleft) : ?>

						<?php if(!$this->params->get('html5', 0)): ?>
							<div class="left1 <?php if ($showRightColumn==NULL){ echo 'leftbigger';} ?>" id="nav">
						<?php else: ?>
							<nav class="left1 <?php if ($showRightColumn==NULL){ echo 'leftbigger';} ?>" id="nav">
						<?php endif; ?>
								<a href="<?php echo $this->baseurl ?>" title="Zur Startseite" style="none"><img src="<?php echo $this->baseurl ?>/templates/kulturpark/images/kulturpark_logo.png" alt="Das barrierefreie Logo des Kulturparks" title="Das barrierefreie Logo des Kulturparks" /></a>
								<jdoc:include type="modules" name="position-8" style="beezDivision" headerLevel="3" />
								<jdoc:include type="modules" name="position-4" style="beezHide" headerLevel="3" state="0 " />
								<jdoc:include type="modules" name="position-5" style="beezTabs" headerLevel="2"  id="3" />

						<?php if(!$this->params->get('html5', 0)): ?>
							</div><!-- end navi oben-->
						<?php else: ?>
							</nav>
						<?php endif; ?>

					<?php endif; ?>
                    
                    
              <!-- Zweite Navigation: Gastronomie, Veranstaltungen, Service -->
                
                
                <div id="secondnav">
                <jdoc:include type="modules" name="position-7" style="beezDivision" headerLevel="3" />
                </div><!-- end navi unten -->

			</div><!-- end Navigation -->
```

Das ist das zugehörige CSS:


```
#navigation{
	width:200px;
	float: left;
}

.left1
{
	background:#b40001;
    float: left;
    width: 100%;
    position:relative;
	font-size: 1.3em;
}

#secondnav{
  color: #000;
  background:#edefee;
  width:100%;
  position: relative;
  font-size:1.3em;
  float:left;
  }
```

Grüße


----------



## SpiceLab (26. Februar 2012)

Bündig zum Bannerbild? Etwa so?


```
<a href="/" title="Zur Startseite" style="none"><img style="margin-top:10px" ...></a>
```


----------



## holzart (26. Februar 2012)

Hi,

leider löst es das problem nicht. Zwar ist es dann in 3 Browsern richtig, aber im meistbenutzen (ff) eben nicht. Es sollte in allen Browsern funktionieren uuund beim Zoom immer noch bündig bleiben. Trotzdem danke..


----------



## SpiceLab (26. Februar 2012)

Meinen Lösungsvorschlag hatte ich im  Firefox Add-on "Firebug" ermittelt, und konnte keinen Darstellungsfehler ohne und unter Einsatz der Zoom-Funktion wahrnehmen  :suspekt:


----------



## holzart (26. Februar 2012)

Kann Firebug Lösungsvorschläge machen? Das wär mir neu


----------



## SpiceLab (26. Februar 2012)

holzart hat gesagt.:


> Kann Firebug Lösungsvorschläge machen? Das wär mir neu


Das hab ich nicht behauptet


----------



## holzart (26. Februar 2012)

Wär auch zu schön gewesen  naja ich hab ja im CSS ein margin-top mit der ich die Navigation regle. Ich wüsste nicht warum es bei einem margin-top des Logos besser sein sollte. Jedenfalls habe ich deinen Vorschlag aber auch ausprobiert (probieren geht über studieren) und hat bei mir auch nix gebracht...


----------



## SpiceLab (26. Februar 2012)

holzart hat gesagt.:


> Jedenfalls habe ich deinen Vorschlag aber auch ausprobiert (probieren geht über studieren) und hat bei mir auch nix gebracht...


Dann kann ich dir hier leider auch nicht weiterhelfen, denn bei mir flutscht's erwartungsgemäß wie erwünscht ;-)


----------



## holzart (26. Februar 2012)

Entweder ist mein Firefox verstellt oder deiner  ich versuchs morgen nach der Präsi mal auf einem anderen Rechner. Das es beim Zoomen bündig bleibt, hab ich bei keinem Browser hinbekommen. Nicht 1- Fach Zoom sonder STRG und + 6 mal drück. Das sind die Kriterien für eine barrierefreie Seite..


----------



## SpiceLab (26. Februar 2012)

holzart hat gesagt.:


> Nicht 1- Fach Zoom sonder STRG und + 6 mal drück. Das sind die Kriterien für eine barrierefreie Seite..


Amen!


----------



## holzart (26. Februar 2012)

Ich weiß nicht ob du mich verstehst. Aber ich sehe in dem Bild die Bündigkeit nicht. Die wäre weiter unten zu sehen. Der Strich zwichen den Links der Grube und Veranstaltungen soll auf einer Höhe mit der Unterkante des Bannerbildes sein. Dann wirkt das so als ob es vier Bereiche gäbe. Weißt was ich meine? Es soll so wie im Bild bei der Vergrößerung bleiben. Der gelbe Kreis markiert die kritische Stelle.


----------



## SpiceLab (26. Februar 2012)

Dann wäre schlußendlich noch geklärt worden, worauf sich die Bündigkeit _konkret_ beziehen soll - null Problemo  ;-)


----------



## holzart (26. Februar 2012)

Na wenn es bei dir funktioniert, dann hab ich für morgen Hoffnung, dass nur mein Browser spinnt  ich schau dann mal. Aber die Bündigkeit springt wirklich nicht hin und her beim Zoomen? Bei mir springt das total..


----------

