logo mittels css platzieren + stream

Seite 1 von 2 - Forum: Coding Stuff auf overclockers.at

URL: https://www.overclockers.at/coding-stuff/logo-mittels-css-platzieren-stream_223755/page_1 - zur Vollversion wechseln!

Ich bin gerade dabei mein erstes Projekt mit Artisteer zu realisieren!
Funktioniert bis jetzt eigentlich alles sehr komfortabel, aber ich stehe gerade trotzdem bei einer kleinigkeit an...

link zur Webseite

Ich habe die Seite mittels css 127 pixel nach unten verschoben
und möchte nun in diesen 127 pixel einen Logo unterbringen.

mein Ansatz in css war:

Code: CSS

.art-sheet {
    background-image: url("../images/logo.gif");
    background-position: center center;
    background-repeat: no-repeat;
    cursor: auto;
    margin-top: 127px !important;

was willst du mit dem margin-top bewirken (das schiebt ja das Logo erst nach unten) - aso, im "art-sheet" ist schon der Inhalt, habe gedacht, das wäre nur für das Bild
dann macht das margin natürlich sinn

mein Ansatz wäre:
das Logo in ein eigenes Div und nicht als Background Image einbinden

Code: CSS

position: absolute;
top: 0 px;
left: 0px;

du könntest statt dem margin auch einfach padding verwenden, damit wird der inhalt des div's nach unten verschoben, background-images jedoch nicht.

@ill: hat leider nicht geklappt! dann erweitert er nur den hellen content bereich bis ganz nach oben!

@silentbob: an welcher stelle muss ich das div einbinden? gleich am Anfang von "art-sheet"?
oder noch eine ebene darüber?

kommt das position:relative von dir oder von dem Programm?
Normal macht relative Positionierung nur Probleme, viel sinnvoller mit paddings und margins zu arbeiten

wo willst du das logo haben, im braunen hintergrund?

edit: logo.gif existiert nicht

das position:relative kommt vom programm!
Das Logo sollte oben im Braunen Hintergrund in der mitte stehen.

edit: der logo heisst etwas anders got pm!

Code: CSS

body {
    background-color: #493308;
    background-image: url("../images/menuitem.png");
    background-position: center top;
    background-repeat: no-repeat;
    color: #44443C;
    margin: 0 auto;
    padding: 0;
}

ich bin gerade auf diese lösung gestoßen:

zwischen "body" und "art-main" folgende divs definieren:

Code: HTML

<div class="header">
<div class="logo"></div>
</div>

Code: CSS

.header
{
position: relative;
z-index: 0;
margin: 0 auto;
width: 800;
height: 127px;
}

.logo
{
background: url('../images/logo.gif') no-repeat;
width: 186px;
height: 127px;

float: left;
}

Yeah! nice! mittels body hat es geklappt!
war ja ne schwere geburt!

thx: @all!

Sehr gut

ps: sieht nice aus.

Danke!
Komplette Webseite in 2 Tagen aufsetzen inklusive domain ummeldung,... - done!

Is aber eh trotzdem noch genug zu tun...
Kann mir vielleicht jemand mit den "positionen" helfen?

hab jetzt ein modul für den header in joomla eingebunden und dafür die position "header" in der
templateDetails.xml angelegt!

in der index html hab ich dann:

Code: HTML

<div class="art-header">
    <div class="art-header-jpeg"></div>
</div>

Code: HTML

<div class="art-header">
	<jdoc:include type="modules" name="header" style="xhtml" />
	</div>
</div>

ok dass sie raus steht is, weil die anderen Elemente ein padding von 6 haben während .art-nav das nicht hat, und das ist auch der Grund warum du den Abstand zum .art-nav hast.
Würde sowas in der Art machen.

Code: CSS

.art-nav {
    height: 28px;
    margin: -6px 6px 0;
    position: relative;
    z-index: 100;
}

naja hauptsache es passt jetzt!

hab deinen code eingefügt und diesen auch auf den footer angewendet!
nur die 3 pixel nach oben bring ich ihn nicht

eine weitere sache die mir im bezug auf den footer nicht ganz klar ist betrifft das icon!?
eigentlich sollte unten links ein logo auftauchen, tut es aber nicht...

Code: CSS

.art-rss-tag-icon
{
  display: block;
  background-image: url('../images/facebook.gif');
  background-position: center right;
  background-repeat: no-repeat;
  height: 25px;
  width: 25px;
  cursor: default;
}

mit dem footer meinst du nehm ich an dass der helle Rahmen unten nicht weiter geht, DAS ist jetzt margin-collapse. Sauber kann man das nur lösen indem man irgendwo ein Padding einbaut, zum Glück hast du aber darunter ein div mit der Klasse "cleared", dieses setzt du einfach auf Höhe 6px, entweder durch extra klasse (class="cleared neueklasse") oder direkt mit style="..." (was aber die style/content-trennung noch mehr zerstört)

PS: das logo-gif hat eine andere Hintergrundfarbe als der Hintergrund...

hmm... ich hab in der index.php unten beim footer 3x cleared...
an welche stelle setzte ich das neu erstellte "clear-footer"?

und was muss ich dann im css noch genau dazuschreiben? nur margin: 6px...?

das mit dem logo weiß ich schon! nervt mich eh schon von anfang an!
aber zerst soll mal der rest laufen, dann kommen die schönheitskorrekturen!

edit: hab jetzt mit dem tv-stream anscheinend die datenbank gekillt...
wie bekomme ich die seite jetzt wieder online??

overclockers.at v4.thecommunity
© all rights reserved by overclockers.at 2000-2025