• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Logo korrekt positionieren!

K

kaukauz

Neues Mitglied
Hallo,

ich habe folgendes Problem bezüglich meines Logos, welches ich in das Template eingefügt habe:

- es sitzt zu weit am linken Rand und ich weiss nicht wie ich das mittels der index.html oder css beheben könnte.

Ich habe jetzt schon mehrere Möglichkeiten versucht, jedoch ohne Erfolg. Bin auch noch relativer Anfänger auf diesem Gebiet.

Folgender Code in der index.html:

HTML: 
<!-- start header -->
<a href="index.php">
<img src="{$tpl_path}img/top_logo.png" alt="ups" width="490" height="200" /></a>
Was muss ich noch ergänzen bzw. was kommt in die stylesheet.css, damit ich das Logo ein klein wenig vom linken Rand abrücken kann? Ich habe es bereits mit padding versucht jedoch weiss ich nicht wie ich es korrekt ergänzen muss in dem Fall.

Über Tipps wäre ich dankbar!
 
kaukauz schrieb:
- es sitzt zu weit am linken Rand und ich weiss nicht wie ich das mittels der index.html oder css beheben könnte.
Zum Vergrößern anklicken....
Mit HTML zeichnet man nur den Inhalt aus, das Aussehen, Layout oder Design wird komplett in CSS bestimmt.

Aber nun zu deinem Problem:
Gib deinem <a>-Tag eine Klasse oder ID. Dann kannst du mit margin im CSS einen Aussenabstand eines Elements bestimmen. So kannst du mit zB "margin-left: 10px;" einen linken Aussenabstand von 10px erzielen.
Mehr dazu findest du auf Abst.
 
Hallo und erstmal danke für den Tip. Ich werde es gleich probieren. Wegen deinem Hinweis auf CSS...demzufolge wäre es auch möglich den Abstand (10px) des Logos direkt in der CSS zu bestimmen anstatt in HTML? Dazu müsste ich dann aber die komplette Positionierung des Logos auch in der CSS regeln?

Gruss
 
kaukauz schrieb:
demzufolge wäre es auch möglich den Abstand (10px) des Logos direkt in der CSS zu bestimmen anstatt in HTML?
Zum Vergrößern anklicken....

Das wäre nicht nur möglich, das soll so gemacht werden. Mit HTML wird nur der Inhalt deiner Webseite ausgezeichnet. Für das Aussehen ist CSS zuständig.

kaukauz schrieb:
Dazu müsste ich dann aber die komplette Positionierung des Logos auch in der CSS regeln?
Zum Vergrößern anklicken....

Wo wird die Positionierung denn im Moment geregelt? In dem Codeausschnitt den du gepostet hast ist keine Positionierung zu erkennen.

Gruss
Elroy
 
Hallo, also im Moment hab ich das Logo lediglich durch die index.html eingefügt und in der CSS noch gar nichts vermerkt. Demzufolge muss ich jetzt die CSS bearbeiten aber weiss nicht den Code dafür um die in der index.html eingefügtes Logo mehr einzurücken. Ich poste mal ein Teil der CSS.

Wo wird die Positionierung denn im Moment geregelt? In dem Codeausschnitt den du gepostet hast ist keine Positionierung zu erkennen
Zum Vergrößern anklicken....
Bevor ich das Logo einfügte war lediglich ein Schriftzug im Template eingebettet, den ich in der index.html durch die Logo-Grafik entfernt bzw. ersetzt habe, aber eben noch nichts in der stylesheet verändert habe. Welcher Code ist zu dort zu entfernen und neu zu ersetzen um das Logo vom linken Rand abzurücken?

Code: 
body {
    margin: 0;
    padding: 0;
    background: #FFFFFF url(img/img01.jpg) repeat-x;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 13px;
    color: #666666;
}

form {
    margin: 0;
    padding: 0;
}

fieldset {
    margin: 0;
    padding: 0;
    border: none;
}

input, textarea, select {
    font: normal 1em "Trebuchet MS", Arial, Helvetica, sans-serif;
}

h1, h2 {
    font-weight: normal;
    color: #7CD300;
}

h1 {
    letter-spacing: -1px;
    font-size: 2.6em;
}

h2 {
    font-size: 1.8em;
}

h3 {
    font-size: 1.2em;
    font-weight: bold;
}

p, ul, ol {
}

p {
}

blockquote {
    font-style: italic;
}

ul {
}

ol {
}

a {
    color: #7CD300;
}

a:hover {
    text-decoration: none;
}

small {
}

hr {
    display: none;
}

img {
    border: none;
}

img.left {
    float: left;
    margin: 0 15px 0 0;
}

img.right {
    float: left;
    margin: 0 0 0 15px;
}

/* Header */

#header {
    width: 920px;
    height: 160px;
    margin: 0 auto;
}

/* Logo */

#logo {
    float: left;
}

#logo h1, #logo h2 {
    margin: 0;
    text-transform: lowercase;
}

#logo h1 {
    padding-top: 52px;
    font-size: 4em;
    color: #554D49;
}

#logo h1 a {
    color: #554D49;
}

#logo h2 {
    margin-top: -10px;
    padding-left: 1px;
    letter-spacing: -1px;
    font-size: 1.8em;
    color: #7F7772;
}

#logo h2 a {
    color: #7F7772;
}

#logo a {
    text-decoration: none;
}

/* Menu */

#menu {
    float: right;
}

#menu ul {
    margin: 0;
    padding: 40px 0 0 0;
    padding-right: 185px;
    list-style: none;
}

#menu li {
    display: inline;
}
 
Zuletzt bearbeitet:
Hallo.

Falls du noch Probleme hast bitte einen Link zu Seite oder den kompletten HTML Code posten.

Gruss
Elroy
 
@Elroy
hier ist der gesamte HTML Code der index.html
ich habs mit margin-left: 10px; versucht allerdings glaube ich, muss in der CSS noch etwas umgeschrieben werden, da noch der alte Code des vorherigen Schriftzuglogos darin vermerkt ist, nicht jedoch das Grafiklogo (top_logo.png) - siehe CSS Code oben!

{config_load file="$language/lang_$language.conf" section="index"}
<!-- start header -->
<a href="index.php">
<img src="{$tpl_path}img/top_logo.png" alt="xamant warenhandel" width="490" height="200" /></a>
<div id="menu">
<ul>
{if $account}{php} if (isset($_SESSION['customer_id'])) { {/php}<li><a href="{$logoff}">{#link_logoff#}</a>{php} } {/php}</li>{/if}
{if $account}<li><a href="{$account}">{#link_account#}</a></li>{/if}
<li><a href="{$cart}">{#link_cart#}</a></li>
<li><a href="{$checkout}">{#link_checkout#}</a> </li>
</ul>
</div>
</div>
<!-- end header -->
<!-- start page -->
<div id="page">
<!-- start content -->
<div id="content">
<!-- start latest-post -->
<div id="latest-post" class="post">
<div class="entry">
{$navtrail}<br /><br/>
{$main_content}
</div>
</div>
<!-- end latest-post -->
<!-- start recent-posts -->
<div id="recent-posts">
{*$box_LANGUAGES*}
{$box_CATEGORIES}
{$box_CART}
{$box_LOGIN}
{$box_BESTSELLERS}
{$box_INFOBOX}
{$box_WHATSNEW}
{$box_CURRENCIES} {$box_MANUFACTURERS_INFO}{$box_MANUFACTURERS} {$box_LAST_VIEWED}
{$box_REVIEWS}
{$box_NEWSLETTER}
{$box_ADMIN}
{*$box_ADD_QUICKIE*}
</div>
<!-- end recent-posts -->
</div>
<!-- end content -->
<!-- start sidebar -->
<div id="sidebar">
<ul>
<li id="search">
{$box_SEARCH}
</li>
<li>
{$box_CONTENT}
</li>
<li>
{$box_SPECIALS}
</li>
<li>
{$box_INFORMATION}
</li>
</ul>
<div style="clear: both;">&nbsp;</div>
</div>
<!-- end sidebar -->
</div>
<!-- end page -->
<div id="footer">
<p id="legal">&copy;2007 {$store_name}. Alle Rechte vorbehalten. | Designed by <a href="http://www.freecsstemplates.org/">Free CSS Templates</a> | Design2Shop by <a href="i3internet.de">i3internet.de</a></p>
</div>
Zum Vergrößern anklicken....
 
Wenn Du eine HTML/CSS-Frage hast, solltest Du auch immer nur den HTML/CSS-Code posten, und nicht irgendwelchen Code, der serverseitig ausgeführt wird. Da weiß man ja gar nicht, was am Ende rauskommt.

Besser ist es übrigens immer, einen Link zur Seite zu posten.
 
Nochmal ganz konkret:
Wenn du in der CSS dieses verwendest (logo als Klasse) und dann beim Img Tag die CSS Klasse mit (class="logo") aufrufst sollten die Befehle wie margin etc. funktionieren.

CSS: img.logo {margin:10px;}
HTML: <img src="{$tpl_path}img/top_logo.png" alt="xamant warenhandel" class="logo" width="490" height="200" />

Gruss die Code // Agenten
Die Code // Agenten - Sie gestalten. Wir programmieren. | slicing | xhtml | css | php | cms | webseiten | coding | design zu html | programmieren
 
@codeagenten

danke für den Tip, damit hats jetzt geklappt! Allerdings habe ich dadurch ein neues Problem bekommen:

je weiter ich mit margin einrücke (80px), desto mehr verschiebt sich das Logo jetzt nach unten. Soll heissen, ich habs jetzt auf der gewünschten Position, nur sitzt es jetzt zu weit unten. Was muss ich da noch einfügen um das Logo wieder nach oben zu rücken?
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben