| Autor |
Nachricht |
LioGetz
Threadersteller
Dabei seit: 24.03.2003
Ort: Aachen
Alter: 44
Geschlecht: 
|
Verfasst Do 21.04.2005 17:42
Titel [CSS] Positionierung von Layern |
  |
|
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 
Zuletzt bearbeitet von shakadi am Fr 22.04.2005 10:52, insgesamt 1-mal bearbeitet
|
|
| |
   |
 |
dastef
Dabei seit: 03.11.2003
Ort: -
Alter: -
Geschlecht:
|
Verfasst Do 21.04.2005 17:56
Titel
|
|
|
dein aktueller code-ansatz .. deine genauen probleme .. genaue
vorgaben von deiner seite her?
|
|
| |
|
|
|
Anzeige
|
|
|
LioGetz
Threadersteller
Dabei seit: 24.03.2003
Ort: Aachen
Alter: 44
Geschlecht:
|
Verfasst Do 21.04.2005 18:16
Titel
|
|
|
...immer diese kontrolle ob man schon was gemacht hat  ...JA, habe ich 
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
|
|
| |
|
|
el Zeratulo
Dabei seit: 04.04.2002
Ort: Bent Badheim
Alter: -
Geschlecht:
|
Verfasst Do 21.04.2005 19:19
Titel
|
|
|
| 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
|
|
| |
|
|
Raumwurm
Dabei seit: 21.12.2004
Ort: -
Alter: -
Geschlecht:
|
Verfasst Do 21.04.2005 20:27
Titel
|
|
|
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.
|
|
| |
|
|
LioGetz
Threadersteller
Dabei seit: 24.03.2003
Ort: Aachen
Alter: 44
Geschlecht:
|
Verfasst Fr 22.04.2005 13:23
Titel
|
|
|
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
|
|
| |
|
|
way2hot
Dabei seit: 14.03.2004
Ort: Jüchen-Gierath
Alter: 41
Geschlecht:
|
Verfasst Fr 22.04.2005 13:30
Titel
|
|
|
|
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
|
|
| |
|
|
Account gelöscht
Ort: -
Alter: -
|
|
| |
|
|
| |
|
|
| Ähnliche Themen |
Bild Positionierung in Div Layern
problem mit layern
Drucken von Layern
Anfrageformular mit Layern (?) ?
frage zu css layern
ein / ausblenden von Layern
|
|
Willkommen auf dem Portal für Mediengestalter
