2016-09-17 4 views
1

Ich versuche, ein Bild auf einer Joomla-Website zu zentrieren, die ich baue. Es ist ein Logo, das in der Kopfzeile platziert wurde. Hier ist ein Link zu der Seite http://www.gothamtattoos.com/mmp_upgrade/index.php (logo.png an der Spitze ist eine, über die ich spreche). Ich habe ein paar verschiedene Dinge ausprobiert, aber meine Versuche haben entweder gar nichts gemacht oder sie haben mit der Anzeige des Top-Menüs zu tun gehabt. Ich lese hier über die Einstellung Marge zu Auto und Position zu relativ, etc., aber es hat nicht funktioniert oder vielleicht ich es an den falschen Ort hinzufügen.Zentrieren eines Bildes in Joomla

Hier ist der Abschnitt der Datei index.php, der sich auf das Logo bezieht. Ich bin überhaupt nicht viel Coder und weiß nur wenig, was ich mache, daher werden beschreibende Antworten sehr geschätzt. Vielen Dank im Voraus für die Hilfe.

$logopath = $this->baseurl . '/templates/' . $this->template . '/images/logo.png'; 
 
$logo = $this->params->get('logo', $logopath); 
 
$logoimage = $this->params->get('logoimage'); 
 

 
$sitetitle = $this->params->get('sitetitle'); 
 
$sitedescription = $this->params->get('sitedescription'); 
 

 

 

 

 
?> 
 
<!DOCTYPE html> 
 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" dir="<?php echo $this->direction; ?>"> 
 
<head> 
 
\t <jdoc:include type="head" /> 
 
\t <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/system.css" type="text/css" /> 
 
\t <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/general.css" type="text/css" /> 
 
\t <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/css/template.css" type="text/css" /> 
 
\t <link href='//fonts.googleapis.com/css?family=Droid+Sans:400,700' rel='stylesheet' type='text/css' /> 
 
\t <script type="text/javascript" src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/js/sfhover.js"></script> 
 

 
    
 
    
 

 
</head> 
 
<body> 
 

 
<div id="wrapper"> 
 

 
\t <!-- TopNav --> 
 
\t <?php if($this->countModules('position-13')): ?> 
 
\t <div id="topnav_wrap"> 
 
\t \t <div id="topnav"> 
 
\t \t \t <jdoc:include type="modules" name="position-13" style="xhtml" /> 
 
\t \t </div> 
 
\t </div> 
 
\t <?php endif; ?> 
 
\t 
 

 
\t <div id="header_wrap"> 
 
\t \t <div id="header"> 
 

 
\t \t \t <!-- Logo --> 
 
\t \t \t <div id="logo"> 
 

 
\t \t \t <?php if ($logo && $logoimage == 1): ?> 
 
\t \t \t \t <a href="<?php echo $this->baseurl ?>"><img src="<?php echo htmlspecialchars($logo); ?>" alt="<?php echo $sitename; ?>" /></a> 
 
\t \t \t <?php endif; ?> 
 
\t \t \t <?php if (!$logo || $logoimage == 0): ?> 
 

 
\t \t \t \t <?php if ($sitetitle): ?> 
 
\t \t \t \t \t <a href="<?php echo $this->baseurl ?>"><?php echo htmlspecialchars($sitetitle); ?></a><br/> 
 
\t \t \t \t <?php endif; ?> 
 

 
\t \t \t \t <?php if ($sitedescription): ?> 
 
\t \t \t \t \t <div class="sitedescription"><?php echo htmlspecialchars($sitedescription); ?></div> 
 
\t \t \t \t <?php endif; ?> 
 

 
\t \t \t <?php endif; ?> 
 

 
\t \t \t </div> 
 

 
\t \t \t <!-- Topmenu --> 
 
\t \t \t <div id="topmenu"> 
 
\t \t \t \t <jdoc:include type="modules" name="position-1" /> 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t </div>

Hier ist die CSS ist http://www.gothamtattoos.com/mmp_upgrade/templates/jaxstorm-black/css/template.css

Antwort

0

Um das Bild zu zentrieren, müssen Sie nur einige CSS anpassen.

#logo { 
    float:none; 
} 
#logo img { 
    display:block; 
    margin:0 auto; 
} 
+0

Danke Lee, ich weiß das zu schätzen. Es hat perfekt funktioniert. Ich wusste, dass es etwas Einfaches sein musste, aber ich vermasselte es immer wieder. – nyartman

0

Sie setzen Ihr Logo als Hintergrund, versuchen Sie es als img einstellen

<div id="leftcol"> 
<div class="leftpadding"> 

<div class="logo_container">   
    <h1 class="logo"> <a href="/index.php" title=""> 
     <span> 
     <img src="your_logo_url" alt="logo" /> 
     </span> 
    </a> </h1> 
    </div> 

    <div class="moduletable"> 

    </div> 
</div> 

Verwandte Themen