zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > (X)HTML
Seite neu laden Absoluter Anfänger - Frage zum Div und Positionierung

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 22.01.2007, 15:13
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 22.01.2007
Beiträge: 6
eenux befindet sich auf einem aufstrebenden Ast
Standard Absoluter Anfänger - Frage zum Div und Positionierung

Hallo Leute,

ich bin schier am verzweifeln. Irgendwie blicke ich es grad nicht mehr und hoffe das ihr mir vielleicht helfen könnt.

Ich dachte mit CSS wäre es recht einfach einen Container zu Positionieren (es sieht auch immer so einfach aus wenn man die ganzen Tuts und Kurse durchmacht)

Ich habe versucht in einen Container weitere Container rein zu setzten und wollte diese dann mit Texten und Bildern füllen, aber die Container werden nicht angezeigt, bzw. sie werden nicht so angezeigt wie ich es mir wünschen würde.
Wo liegt den mein denkfehler? Danke für eure Hilfe im vorraus

Hab schon fast alles durchprobiert. Das Zentrieren mit marign-left und right auf auto gesetzt funktioniert wohl.

Aber wie kann ich den Text von einem Container über das Bild von dem anderen Container setzten? Hab auch schon versucht mit position:absolute zu arbeiten, aber dann wird es aus dem Fluss heraus genommen. Verstehe nicht warum, dachte immer die Anweisungen beziehen sich auf das umliegende Element.

Hier der Code den ich geschrieben habe.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="test.css" media="screen, projection" />
<title></title>
</head>
<body>

<div id="container">
<div id="top">
</div>

<div id="nav">
</div>

<div id="startseite">

<div id="startHBild">
Text im Bild
</div>

<div id="startText">
Text soll auf dem Bild stehen
</div>

</div>

</div>
</body>
</html>


------------------------------------
Hier der Inhalt der CSS-Datei

#container{
margin-left: auto;
margin-right: auto;
background: Aqua;
width: 600px;
height: auto;
}

#top{
background: Black;
width: 500px;
height: 10px;
}

#nav{
background-color: Blue;
width: 500px;
height:20px;
}

#startseite{
background-color: Fuchsia;
width:550px;
height: auto;
}

#startHBild{
position: relative;
background:transparent;
background-image: url(pics/picStartseite.jpg);
width:500px;
height: 500px;
z-index: 1
}

#startText{
position: relative;
padding: -100px;
margin-bottom:100px;
background-color: Lime;
z-index: 2
}


------------------
Sorry, gehört eigentlich ins CSS Forum rein, aber wurde ausgeloggt und als ich es abgeschickt habe ist es hier gelandet.
Bitte um verschieben ins richtige Forum oder eine Antwort, wenn die Frage nicht zu schwer war. Danke

Geändert von eenux (22.01.2007 um 15:18 Uhr)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 22.01.2007, 16:03
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 25.03.2004
Beiträge: 1.843
RoToRa wird schon bald berühmt werden
Standard

Zitat:
Zitat von eenux Beitrag anzeigen
Ich dachte mit CSS wäre es recht einfach einen Container zu Positionieren (es sieht auch immer so einfach aus wenn man die ganzen Tuts und Kurse durchmacht)
Nun, ich glaube jeder stellt sich unter "positionieren" etwas anderes vor. Insbesondere "sehen" viele Anfänger nur absolute Positionierung, die zwar auf dem ersten Blick einfach und leistungsfähig aussieht, aber in Wirklichkeit viele Probleme macht, wenn man die Grundlagen des Weblayouts nicht kennt.

Zitat:
Aber wie kann ich den Text von einem Container über das Bild von dem anderen Container setzten?
Welche Container meinst du? Ich nehme an mit "über" meinst Du "auf"? In der Regel geht das mit Hintergrundbildern, oder wenn es sein muss auch mit absoluter Positionierung, aber dazu wäre es besser zu wissen wie das Ganze am Ende aussehen solll.

Zitat:
Verstehe nicht warum, dachte immer die Anweisungen beziehen sich auf das umliegende Element.
Jein. Absolute Positionierung beziegt sich immer auf den sogenannten "Containing Block". Das ist bei absoluten positionierten Elementen (vereinfacht ausgedrückt) das umgebende Element, das ebenfalls absolut (oder relativ oder fixed) positioniert ist.

Robin
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 22.01.2007, 16:08
Benutzerbild von tizeka
Neuer Benutzer
neuer user
 
Registriert seit: 10.11.2006
Beiträge: 12
tizeka befindet sich auf einem aufstrebenden Ast
Standard

ich weiß auch nicht wo das bei dir hingehen soll, aber könnte es so gemeint sein?

html
------------------------------------------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="test.css" media="screen, projection" />
<title></title>
</head>
<body>

<div id="container">
<div id="top">
</div>

<div id="nav">
</div>

<div id="startseite">

<div id="startHBild">
Text im Bild
</div>

<div id="startText">
Text soll auf dem Bild stehen
</div>

</div>

</div>
</body>
</html>
---------------------------------------------------

css
----------------------------------------------------
#container{
margin-left: auto;
margin-right: auto;
background: Aqua;
width: 600px;
height: auto;
}

#top{
background: Black;
width: 500px;
height: 10px;
}

#nav{
background-color: Blue;
width: 500px;
height:20px;
}

#startseite{
background-color: Fuchsia;
width:550px;
height: auto;
position: relative;
}

#startHBild{
background:transparent;
background-image: url(pics/picStartseite.jpg);
width:500px;
height: 500px;
}

#startText{
position: absolute;
top: 50px;
left: 50px;
padding: -100px;
margin-bottom:100px;
background-color: Lime;
}
-------------------------------------------------
__________________
Viele Grüße
Tillmann
Mit Zitat antworten
  #4 (permalink)  
Alt 22.01.2007, 18:26
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 22.01.2007
Beiträge: 6
eenux befindet sich auf einem aufstrebenden Ast
Standard

Hey, danke für eure Antworten. Ich habe bis jetzt auch mal rumprobiert um heraus zufinden wie das funktioniert.

Meine Frage wäre, wie kann ich folgendes realisieren.

Container1

Container2

Container3
Container4

Container 1 umschließt alle anderen Elemente
(soll das Logo und die Navigation enthalten welche auf allen anderen Seiten gleich bleibt)

Container 2 enthält den Inhalt der jeweiligen Seite. Um die Bilder und Texte zu positionieren würde ich Container 3 und 4 und noch weitere verwenden.

Worauf muss ich achten wenn ich die Container 3 und 4 postioniere. Kann ich da jeweils einfach eine width und height definieren und mit top und left positionieren? Ich habe rum experimentiert aber irgendwie verstehe ich noch nicht ganz wie die Beziehungen zueinander sind. Ich dachte wenn ich Container 2 mit div erstelle, dann orientieren sich 3 und 4 an den Rändern von 2. Im Browser tun sie das aber irgendwie nicht.

Liege ich falsch wenn ich davon ausgehe das alles Ebenen sind? Also wenn ich z. B. Container 2 mit 500 x 500 pixeln erstelle, müsste das doch in sich geschossen funktionieren oder?
Mit Zitat antworten
  #5 (permalink)  
Alt 22.01.2007, 18:54
Benutzerbild von tizeka
Neuer Benutzer
neuer user
 
Registriert seit: 10.11.2006
Beiträge: 12
tizeka befindet sich auf einem aufstrebenden Ast
Standard

Ich hatte dir einen Lösungsansatz gepostet. Hast du ihn dir angeschaut? War es was, was du gefragt hattest. Es Wäre nett, wenn du auch auf die Hilfe eingehst, die dir angeboten wird.

Schau dir am Besten mal CSS Positionierung &ndash; Einführung in XHTML, CSS und Webdesign an...

Bevor du nicht verstanden hast, was relative und absolute Positionierung bedeutet wird dir auch eine längere Antwort hier nicht viel Helfen.
__________________
Viele Grüße
Tillmann
Mit Zitat antworten
  #6 (permalink)  
Alt 22.01.2007, 19:06
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 22.01.2007
Beiträge: 6
eenux befindet sich auf einem aufstrebenden Ast
Standard

@tizeka

Danke für Deine Hilfestellung,... konnte nicht ganz den Unterschied festellen. Aber die Seite welche Du mir empfohlen hast habe ich mir heute und gestern bestimmt schon eingemale durchgelesen

So ungefähr ist es mir schon klar wie das Modell funktioniert, aber wenn ich es versuche anzuwenden, dann klappt es meistens doch nicht.

Ich habe hier z. B. gerade das Problem (und das finde ich mal echt merkwürdig) das ich einen Container habe in welchem sich zwei weitere befinden. In der CSS-Datei hatte ich eine ID unter der anderen, als ich sie nach oben geholt habe, ist aufeinmal alles verschwunden.

Moment, ich füge das mal hier geschwind ein.

DIE HTML-DATEI

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title></title>

<link rel="stylesheet" type="text/css" href="styles/main.css" media="screen" />


</head>

<body>

<div id="container">

<div id="logo">
</div>


<div id="nav">
<ul>
<li><a href="index.html"> Startseite</a></li>
<li><a href="Unternehmen.html">Unternehmen</a></li>
<li><a href="Leistungsspektrum.html">Leistungsspektrum</a></li>
<li><a href="Referenzen.html">Referenzen</a></li>
<li><a href="Kontakt.html">Kontakt</a></li>
<li><a href="Anfahrplan.html">Anfahrplan</a></li>
<li><a href="Impressum">Impressum</a> </li>
</ul>
</div>

<div id="startseite">

<div id="startHBild">


</div>

<div id="startText">
<h1>Willkommen auf unserer Seite</h1>
<p>Wir begrüssen sie auf unserer Seite</p>
</div>

</div>


</div>



</body>
</html>


----------------
DIE CSS-DATEI

* {
margin: 0;
padding: 0;
}

#container {
background: transparent;
background-color: #D6D6D6;
border-color: #000000;
border-left: 5px;
border-right: 5px;
color: #000000;
height: auto;
margin-left: auto;
margin-right: auto;
position: relative;
text-align: center;
width: 760px;
}

#logo {
background-image: url(../pics/MBT.jpg);
background-position: center;
background-repeat: no-repeat;
height: 120px;
width: 760px;
}

#nav {
background: #5E6087;
border-bottom: 0px solid medium;
width: auto;
}

#nav a {
background: transparent;
color: #FFFFFF;
display: inline;
float: none;
font-weight: bold;
line-height: 1.5em;
padding: 2px 2px;
text-decoration: none;
}

#nav a:hover {
background: #CC0066;
color: #FFFFFF;
}

#nav li {
display: inline;
}

#starthbild{
background-color: transparent;
background-image: url(../pics/picStartseite.jpg);
background-position: center;
background-repeat: no-repeat;
height: 500px;
min-height: 500px;
min-width: 760px;
width: 760px;
z-index: 2;
}
#startseite, #unternehmen{
position:relative;
height: auto;
margin-left: 0px;
margin-right: 0px;
text-align: left;
width: 760px;
z-index: 1;
}

#starttext{
background: transparent;
left: 50px;
position: relative;
text-align: left;
top: -500px;
width: 760px;
z-index: 3;
}

#unternehmenbildblock01{
background-color: #FF00FF;
height: 100px;
left: 200px;
position: relative;
text-align: left;
top: 10px;
width: 100px;
}

#unternehmenbildblock02{
text-align: left;
}

#unternehmentextblock01{
background-color: #0000FF;
height: 100px;
left: 10px;
position: relative;
text-align: left;
top: 10px;
width: 100px;
}

#unternehmentextblock02{
text-align: left;
}

---------------------
Ist echt verrückt?

Als Editor benutze ich TopStyle Pro 3.10 Trial

Hast Du eventuell einen besseren Editor?

Hab es jetzt nochmal geändert, aber der Conatainer startseite und unternehmen werden nicht angezeigt

Geändert von eenux (22.01.2007 um 19:12 Uhr)
Mit Zitat antworten
  #7 (permalink)  
Alt 22.01.2007, 19:48
Benutzerbild von tizeka
Neuer Benutzer
neuer user
 
Registriert seit: 10.11.2006
Beiträge: 12
tizeka befindet sich auf einem aufstrebenden Ast
Standard

Wenn du so schnell über deine dateien schaust wie bei dem was ich dir geschickt habe, kann ich verstehen dass du den Fehler nicht findest. Wenn du keinen Unterschied feststellen kannst, kann ich dir auch nicht weiterhelfen!
__________________
Viele Grüße
Tillmann
Mit Zitat antworten
  #8 (permalink)  
Alt 22.01.2007, 20:00
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 22.01.2007
Beiträge: 6
eenux befindet sich auf einem aufstrebenden Ast
Standard

Tillmann,
hast recht,
ich hatte beim letzten mal als ich Deine Lösung getestet habe vergessen zu speichern und deshalb wurde auch kein Unterschied im HTML-Doc angezeigt.

Dachte Du hast versehentlich nur auf antworten geklickt und den Text übernommen.

Sorry, mein Fehler.
Aber die Lösung scheint zu funktionieren. Hoffe das klappt auch mit vielen Containern.

Danke für die Antwort
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Div 100%-X Höhe Problem, ohne absolute Positionierung xblax CSS 8 28.10.2010 01:02
joomla template entschlüsseln nieselfriem CSS 2 18.03.2008 13:12
Kinder div genauso gross wie eltern Div - Frage #23456 koDiacc CSS 8 18.10.2004 11:04
Positionierung von div puntoamigo CSS 6 23.09.2004 22:57
div positionierung bw CSS 20 03.06.2004 18:52


Alle Zeitangaben in WEZ +2. Es ist jetzt 23:47 Uhr.