mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: So 23.07.2017 16:48 Benutzername: Passwort: Auto-Login

Thema: [CSS] Positionierung von Layern vom 21.04.2005


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Allgemeines - Nonprint -> [CSS] Positionierung von Layern
Seite: 1, 2  Weiter
Autor Nachricht
LioGetz
Threadersteller

Dabei seit: 24.03.2003
Ort: Aachen
Alter: 37
Geschlecht: Männlich
Verfasst Do 21.04.2005 17:42
Titel

[CSS] Positionierung von Layern

Antworten mit Zitat Zum Seitenanfang

Hi @all...

Ich hab mal wieder ein Problem und hoffe auf Hilfe.
Folgendes:
Ich will ne Startseite mit folgendem Inhalt erstellen: Logo, Name des Kunden, Adresse und E-Mail.
Logo, Name, Adresse und E-Mail sind einzelne Bilder + div-Layer, und können aus diversen Gründen nicht in einem Bild gespeichert werden (Schrift muss als Bild gespeichert werden weil es ne Hausschrift ist).
Mein Problem ist die Positionierung des ganzen per CSS. Der Layer des Namen soll halb im Logo drin stehen. Logo und Schrift soll mittig ausgerichtet werden, wobei aber der Abstand von der Schrift zum Logo soll fest sein und darf nicht verändern werden.
Zum besseren Verständis hab ich das hier mal online gestellt.
Ich hab schon ne Weile rumprobiert, aber das ganze CSS-Positionieren hab ich noch nicht geschnallt...irgendwie rückt die Schrift immer vom Logo weg wenn ich das Browser-Fenster vergrößere. kann mir da jemand helfen???

Danke im voraus
CU
Lio

P.S. JA, ich habe auch schon SelfHTML angeschaut und andere CSS-Pages überflogen aber "auf die Schnelle" keine Lösung des Problems gefunden. Und um das komplette CSS-Thema zu verstehen fehlt mir jetzt leider die Zeit...so schnell bin ich darin nicht Lächel


Zuletzt bearbeitet von shakadi am Fr 22.04.2005 10:52, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
dastef

Dabei seit: 03.11.2003
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Do 21.04.2005 17:56
Titel

Antworten mit Zitat Zum Seitenanfang

dein aktueller code-ansatz .. deine genauen probleme .. genaue
vorgaben von deiner seite her?
  View user's profile Private Nachricht senden
Anzeige
Anzeige
LioGetz
Threadersteller

Dabei seit: 24.03.2003
Ort: Aachen
Alter: 37
Geschlecht: Männlich
Verfasst Do 21.04.2005 18:16
Titel

Antworten mit Zitat Zum Seitenanfang

...immer diese kontrolle ob man schon was gemacht hat * Ich geb auf... * ...JA, habe ich Grins

Also, nachdem ich 3 Stunden rumprobiert hatte und danach nen Nervenzusammenbruch hatte war ich so gut wie beim Nullpunkt angelangt...und der sieht so aus:

Code:

<style type="text/css">

#head {
   position:absolute;
   left: 0px;
   top:0px;
   width:100%;
   height:90px;
   background-image:url(gfx/head.gif);
   z-index:1;
}

#main {
   width: 510px;
   background-image:url(gfx/main.gif);
   position : absolute;
   top : 150px;
   z-index:2;
}

#email {
   width:220px;
   height:22px;
   background-image:url(gfx/email.gif);
   position: absolute;
   left: 0px;
   top: 0px;
   right: 0px;
   bottom: 0px;
   z-index:3;
}

</style>
</head>

<body bgcolor="#FFFFFF" text="#000000" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<div id="head"></div>
<div id="main"><div id="email"></div></div>

</body>


head-div ist ne grafische leiste am oberen bildrand...und ist in Ordnung...und der rest irgendwie nicht...mein GENAUES Problem: Logo und Schrift sollen immer Mittig (also den Stand der Layer nicht mit Pixeln angeben weil "die Mitte" bei den verschiedenen Auflösungen unterschiedlich ist), und der Abstand + Position zwischen den Layern soll sich NICHT ändern (also irgendwie ne Angabe mit Abhängigkeit oder so (immer XXpx vom rechten Objekt ??!))...aber ich weiß nicht wie die ausrichtung (mit Margin ????) funktioniert. Mit Tabellen wäre das total easy, aber davon will ich mal weg kommen und es mit CSS probieren & verstehen.

// edit: Seitenvorgaben ? Gibts nicht...ist nur ne Baustellen-Seite (Seite ist im Aufbau bla bla)...also ein paar Layer in denen Bilder stecken die per CSS ausgerichtet werden sollen...


Zuletzt bearbeitet von LioGetz am Do 21.04.2005 18:18, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
el Zeratulo

Dabei seit: 04.04.2002
Ort: Bent Badheim
Alter: -
Geschlecht: Männlich
Verfasst Do 21.04.2005 19:19
Titel

Antworten mit Zitat Zum Seitenanfang

Code:

#main {
   width: 510px;
   height: 30px;
   background-image:url(gfx/main.gif);
   margin-left: auto;
   margin-right: auto;
   margin-top: 30px;
}

#email {
   width:220px;
   height:22px;
   background-image:url(gfx/email.gif);
}


kein plan ob das im EkelExplorer-Win funktioniert, Firefox tut.

grüße vom papst.ez
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Raumwurm

Dabei seit: 21.12.2004
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Do 21.04.2005 20:27
Titel

Antworten mit Zitat Zum Seitenanfang

falls nicht, schreibstas so:

Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
body {
   text-align: center;
   margin: 0px;
   padding: 0px;
}
#head {
   width: 100%;
   height: 90px;
   background: url(gfx/head.gif);
}
#main {
   width: 510px;
   background: url(gfx/main.gif);
   margin: 0px auto;
   text-align: left;
}
#email {
   width:220px;
   background: url(gfx/email.gif);
   left: 0px;
   top: 0px;
}
</style>
</head>
<body>
<div id="head"></div><div id="main"><div id="email">email</div></div>
</head>
<body>
</body>
</html>


das müsste auch funktionieren.
  View user's profile Private Nachricht senden
LioGetz
Threadersteller

Dabei seit: 24.03.2003
Ort: Aachen
Alter: 37
Geschlecht: Männlich
Verfasst Fr 22.04.2005 13:23
Titel

Antworten mit Zitat Zum Seitenanfang

ok, ich hab mal ein wenig rumprobiert und noch ein paar andere quellen gesucht die mir da helfen können. ich habs jetzt so gelöst und das klappt auch:

Code:

<html>
<head>
<style>
body {
   text-align: center;
   margin: 0px;
   padding: 0px;
}

#head {
   width: 100%;
   height: 90px;
   background: url(gfx/head.gif);
}

#pagecontainer {
   position : absolute;
   top : 150px;
   left : 50%;
   margin-left : -280px;   
   width: 540px;
}

#logo {
   width: 540px;
   height: 280px;
   text-align: right;
}

#names {
   width: 445px;
   height: 32px;
   position: absolute;
   left: 30px;
   top:46px;
}

#adress {
   width: 224px;
   height: 120px;
   position: absolute;
   left: 30px;
   top:80px;
}

#email {
   width: 220px;
   height: 22px;
   position: absolute;
   left: 30px;
   top:200px;
}

</style>
</head>

<body>

<div id="head"></div>
<div id="pagecontainer">
   <div id="logo"><img src="gfx/logo.jpg"></div>
   <div id="names"><img src="gfx/names.gif"></div>
   <div id="adress"><img src="gfx/adress.gif"></div>
   <div id="email"><img src="gfx/email.gif"></div>
</div>

</body>
</html>


Der Clou (und des Rätsels Lösung) ist hier der "pagecontainer". Der ist immer mittig und der Kram da drin ist fest ausgerichtet und verschiebt sich nicht...
Ist das die "gängige Methode" oder unsauber geschrieben ??
Falls das so gut ist, dann merk ich mir das für´s nächste Mal, ansonsten muss ich anders gucken wie es funktionieren könnte...

CU
Lio
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
way2hot

Dabei seit: 14.03.2004
Ort: Jüchen-Gierath
Alter: 34
Geschlecht: Männlich
Verfasst Fr 22.04.2005 13:30
Titel

Antworten mit Zitat Zum Seitenanfang

Also wenn ich das jetzt so richtig interpretiere, dann ist das die gängige Methode. Ich lege beispielsweise auch immer erst ein wrapper-Div an, in welches ich dann alle weiteren Divs verschachtele. Ich denke mal, dass dein #pagecontainer das gleiche ist, wie mein #wrapper
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Account gelöscht


Ort: -
Alter: -
Verfasst Fr 22.04.2005 16:39
Titel

Antworten mit Zitat Zum Seitenanfang

http://de.selfhtml.org/css/layouts/index.htm
 
 
Ähnliche Themen Bild Positionierung in Div Layern
frage zu css layern
Horizontale Navigation mit CSS und DIV layern
CSS Positionierung ...
[CSS] Positionierung
[CSS] Positionierung eines DIVs
Neues Thema eröffnen   Neue Antwort erstellen Seite: 1, 2  Weiter
MGi Foren-Übersicht -> Allgemeines - Nonprint


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.