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

div in div

L

lucaa

Neues Mitglied
Hallo,
Ich habe folgendes Problem:

HTML: 
<style type="text/css">
#container {
width: 200;
margin: 0 auto;
background-color: #ff99cc;
}
#container2 {
position: absolute; 
left: 100px;
}
</style>
<body>
<DIV id="container">
<DIV id="container2">
hier dann der ganze Seiteninhalt
</div>
</DIV>
</BODY>

ich will meine seite im css aufbauen.
Dann sozusagen eine groupbox(div) über alles drüberlegen.
und dann die ganze div in die mitte verschieben.

hab es hier probiert.
zuerst meinen seiteninhalt linksbündig aufbauen (mit left: 100).
Und dann in die Mitte verschieben.
Ich wollte schaun was passiert!. Hat leider nicht geklappt.

Wie kann ich das sonst machen?

lg Luca
 
Werbung:
Hallo lucaa,

Also entscheide dich erstmal ob du deine Tags groß- oder kleinschreiben möchtest.!

Des weiteren solltest du dir überlegen ob du ein festes Layout (feste Größe) oder ein flexibles Layout (Layout passt sich an die Browsergröße an) bauen möchtest.

Willst du die 2. Box zu der 1. ausrichten musst du einen Positionierungskontext setzen!!!
Sag mal bitte genau, was du möchtest , denn es gibt wie die sicherlich weißt tausende Möglichkeiten :)

Also hier mal ein Beispielcode: (float basiertes Layout)
HTML:
Code: 
...
<!-- uebergeordneter Container -->
<div id="wrapper">
<div id="content_left">
</div>
<div id="content_right">
</div>
</div>
CSS:
Code: 
/* Innen- und Aussenabstaende aller Elemente eliminieren */
* { padding: 0;
     margin: 0;
}
/* Groesse des Designs angeben, automatische Ausrichtung erreichen */
#wrapper {
width: 800px; 
margin-left: auto;
margin-right: auto;
}
/* Groesse der einzelnen Boxen angeben */
content_left {
width: 20%;
float: left; 
}
content_right {
width: 80%;
float: left; 
}
/* die Box ordnet sich automatisch neben der ersten an. */
wäre die einfachste Methode. Ich würde dir empfehlen erstmal mit float basierten Layouts zu experimentieren, bevor du die dich an absolut positionierte Layouts ranwagst.

P.S: alle Werte in CSS müssen mit einer Einheit angeben werden. Nur der Wert 0 braucht keine.

Gruß
 
Zuletzt bearbeitet:
Werbung:
ich weis zwar nicht was du da genau machen willst

aber wenn es einfach alles in der mitte sein soll kannst du das so machen

Code: 
<style type="text/css">
body {
width: 60%;
margin-left:20%;
margin-right:20%;
}
</style>
ich weis nicht ob es das ist was du suchst :D
 
Okee.
Ich kann nicht gut erklären!
Desswegen versuche ich es grafisch!
Also:


Code 1:
Code: 
<html>
<style type="text/css" >
#d5 {
position: absolute; 
left: 25px; top: 180px; width:300px; height:150px;
font-size: 120%;
color: white;
text-decoration: none;
font-weight: bold;
    }
#logdivid1
{
position: absolute;
left: 490px; top: 75px; width:300px; height:150px;
font-size: 20px;
font-weight: bold;
color: white;
text-shadow: #c0c0c0 3px 3px 5px;
 }
 
#logdivid2
{
position: absolute;
left: 490px; top: 35px; width:300px; height:150px;
font-size: 20px;
font-weight: bold;
color: white;
text-shadow: #c0c0c0 3px 3px 5px;
}
#logdivid3
{
position: absolute;
left: 505px; top: 115px; width: 300px; height: 150px;
font-size: 20px;
font-weight: bold;
color: #000000;
text-shadow: #c0c0c0 3px 3px 5px;
}
#marktdivid1
{
 position:absolute;
 left:420px; top:50px; width:300px; height:150px;

}
 #marktdivid2
{
 position:absolute;

  left:550px; top:50px; width:300px; height:150px;
}
#divid7
{
position: absolute;
left: 335px; top: 0px; width:300px; height:150px;
}
 #marktdivid3
{
 position:absolute;
 left: 495px; top:80px; width:300px; height:150px;

 font-weight:bold;
}
#marktdivid4
{
position: absolute;
left: 420px; top: 110px; width:300px; height:150px;
  color: white;
 text-shadow: #c0c0c0 3px 3px 5px;
}
.ku {text-decoration: none;}
.kuu {font-size:110%;
	  word-spacing:6em;
	 }
	 .kuuu {font-size:115%;
	  text-decoration: none;
	 }
	 #marktdivid5
{
position: absolute;
left: 420px; top: 20px; width:300px; height:150px;
 text-shadow: #c0c0c0 3px 3px 5px;
  color: white;
}
	#marktdivid6
{
position: absolute;
left: 520px; top: 20px; width:300px; height:150px;
 color: white;
 text-shadow: #c0c0c0 3px 3px 5px;
} 
#marktdivid7
{
position: absolute;
left: 335px; top: 0px; width:300px; height:150px;
}
#marktdivid9
{
position: absolute;
left: 20px; top: 45px; width:300px; height:150px;
font-size: 20px;
word-spacing: 10px;
text-align: center;
color: white;
text-shadow: #c0c0c0 3px 3px 5px;
}
#marktdivid8
{
position: absolute;
left: 735px; top: 0px; width:300px; height:150px;
}

#marktd3 {position: absolute; left: 800px; top: 65px; width:300px; height:150px; color: white; font-size: 15px; text-shadow: #c0c0c0 3px 3px 5px; font-weight: bold;}
#d2 {position: absolute; left: 800px; top: 35px; width:300px; height:150px; color: white; font-size: 25px; text-shadow: #c0c0c0 3px 3px 5px; font-weight: bold;}
#marktd4 {position: absolute; left: 800px; top: 85px; width:300px; height:150px; color: white; font-size: 15px; text-shadow: #c0c0c0 3px 3px 5px; font-weight: bold;}









#divid1
{
 position: absolute;
 left: 260; top: 300; width: auto; height: auto;
 color: white;
font-weight: bold; 
}


#divid2
{
 position: absolute;
 left: 247; top: 350; width: auto; height: auto;
 color: white;
font-weight: bold;
}


#divid3
{
 position: absolute;
 left: 332; top: 405; width: auto; height: auto;
 color: white;
 font-size: 150%;
font-weight: bold;
}


#divid4
{
 position: absolute;
 left: 332; top: 550; width: auto; height: auto;
 color: white;
 font-size: 200%;
font-weight: bold;
}


#divid5
{
 position: absolute;
 left: 258; top: 450; width: auto; height: auto;
 color: white;
 font-size: 150%;
font-weight: bold;
}


#divid6 
{
position: absolute; 
left: 25px; top: 180px; width:300px; height:150px;
font-size: 120%;
color: white;
text-decoration: none;
font-weight: bold;
}


</style>
<body background="master136_background.gif" link="0xFFFFFF">

 <form name="adresse" action="Marktlogin.php" method="get" enctype="text/html">
		<div id = "marktdivid8" class="examplediv">
	<img src="trennlinie.gif">
	</div>
	<div id = "marktdivid7" class="examplediv">
	<img src="trennlinie.gif">
	</div>
	<div id="marktdivid9" class="examplediv"> 
	<b>
	<p>
	Klicke
	<b><a href="file:///C:/xampp/htdocs/registrieren.html" class = "kuuu"> hier </a></b>
	um einen </p><p>neuen
	Eintrag zu machen.</p></b>
	</div>
	</form>
<form name="adresse2" action="Send.php" method="get" enctype="text/html">
<div id= "divid1">
<font style=" font-size: 150%;">
Name:
</font>
<input type="text" name="name" value="" size="30" maxlength="50" />
(Benutzername)
</div>

<br />
  <div id= "divid2">
  <font style="font-size: 150%;">
Betreff:
</font>
<input type="text" name="betreff" value="" size="30" maxlength="50" />
  (z.B. Frage, Beschwerde ..)
</div>

<br />
 <div id= "divid3">
<textarea name="text" rows="7" cols="45"></textarea>
</div>
<br />
  <div id= "divid4">
<input type="submit" name="submit" value="Abschicken" />
</div>
   <div id= "divid5">
Text:
</div>
</form>
	<div id="d5" class="examplediv">  
	
<table style="text-align: left; height: 32px; width: 932px;"
 border="1" cellpadding="2" cellspacing="2">
  <tbody>
    <tr>
      <td style="text-align: center; height: 30px; width: 225px;"><a
 href="Markt.php" target="_top">Home</a></td>
      <td style="text-align: center; height: 30px; width: 225px;"><a
 href="RealMarket.php" target="_top">Markt</a></td>
      <td style="text-align: center; height: 30px; width: 225px;"><a
 href="index.php" target="_top">Sonstiges</a></td>
      <td style="text-align: center; height: 30px; width: 225px;"><a
 href="Kontakt.php" target="_top">Kontakt</a></td>
    </tr>
  </tbody>
</table>
   </div>

</body>
</html>
<?php

echo "<div id=\"marktd3\" class=\"examplediv\">" ;
echo "Letzes mal aktualisiert:"  ;
echo "</div>" ;
echo "<div id=\"marktd4\" class=\"examplediv\">" ;
echo Date("H:i:s")      ;
echo "</div>" ;
echo "</div>" ;



$abfrage= 0;
 mysql_connect("localhost", "root", "");
 mysql_select_db("login");
 $sql = "SELECT Counter FROM Counter" ;
$ergebnis = mysql_query($sql);
$row = mysql_fetch_object($ergebnis);	
$counter = $row->Counter ;
echo "<div id=\"d2\" class=\"examplediv\">" ;
$counter = $counter + 1 ;
echo "Counter: ".$counter;
mysql_query("UPDATE counter Set
Counter = '$counter'");
echo "</div>" ;
 $ip = getenv ("REMOTE_ADDR");
 $sql2 = "SELECT ip, log, Login FROM daten";
 $ergebnis2 = mysql_query($sql2);
  while ($row = mysql_fetch_object($ergebnis2))
 {
	if ($row->ip == $ip)
	{
		if ($row->log == 1)
		{
		$login = $row->Login;
		$abfrage = 1;
		}
	}
 }
 
if ($abfrage == 1)
{
  echo "<div id=\"logdivid2\" class=\"examplediv\"> ";
	echo "<b>Hallo </b>". $login ."<b> !</b>";
	echo "</div>";
	echo "</body>";
	echo "<div id=\"logdivid1\" class=\"examplediv\">";
    echo "<span style=\"word-spacing:0.5em\">Zum <a href=\"profil.php\" class = \"ku\">Profil</a></span>";
    echo "</div>";
	echo "<div id=\"logdivid3\" class=\"examplediv\">";
	echo "<a href=\"logout.php\">Logout</a>";
	echo "</div>";
}
Else
{
echo "<form name=\"adresse\" action=\"Marktlogin.php\" method=\"get\" enctype=\"text/html\">
 	<div id = \"marktdivid1\" class=\"examplediv\">
  <input type=\"text\" name=\"ben\" value=\"Benutzername\" size=\"15\" maxlength=\"50\" />
  </div>
    <div id = \"marktdivid2\" class=\"examplediv\">
  <input type=\"password\" name=\"pw\" value=\"Passwort\" size=\"15\" maxlength=\"50\" />
  </div>
    <div id = \"marktdivid3\" class=\"examplediv\">
  <input type=\"submit\" name=\"einloggen\" value=\"  einloggen  \" />
  </div>
	<div id = \"marktdivid4\" class=\"examplediv\">
  <b><span style=\"word-spacing:0.5em\">Noch kein Mitglied?<font size = \"4\"><a href=\"registrieren.php\" class = \"ku\">                        registrieren</a></font></span></b>
	</div>
	<div id = \"marktdivid5\" class=\"examplediv\"> 
	<b><font class = \"kuu\">Login:</font></b>
	</div>
	<div id = \"marktdivid6\" class=\"examplediv\"> 
	Du bist nicht eingeloggt!
	</div>
	</form>";
}
Bild:


So der Bereich der (schlechten) Testpage soll in die Mitte verschoben werden!!
Aber auf jedem Bildschirm sollte es in der Mitte sein!
HAb es jetzt nochmal mit <center> versucht hat aber nicht geklappt...

Code 2:(abgeküzt)
Code: 
<html>
<center>
<body background="master136_background.gif" link="0xFFFFFF">

 <form name="adresse" action="Marktlogin.php" method="get" enctype="text/html">
		<div id = "marktdivid8" class="examplediv">
	<img src="trennlinie.gif">
	</div>
	<div id = "marktdivid7" class="examplediv">
	<img src="trennlinie.gif">
	</div>
	<div id="marktdivid9" class="examplediv"> 
	<b>
	<p>
	Klicke
	<b><a href="file:///C:/xampp/htdocs/registrieren.html" class = "kuuu"> hier </a></b>
	um einen </p><p>neuen
	Eintrag zu machen.</p></b>
	</div>
	</form>
<form name="adresse2" action="Send.php" method="get" enctype="text/html">
<div id= "divid1">
<font style=" font-size: 150%;">
Name:
</font>
<input type="text" name="name" value="" size="30" maxlength="50" />
(Benutzername)
</div>

<br />
  <div id= "divid2">
  <font style="font-size: 150%;">
Betreff:
</font>
<input type="text" name="betreff" value="" size="30" maxlength="50" />
  (z.B. Frage, Beschwerde ..)
</div>

<br />
 <div id= "divid3">
<textarea name="text" rows="7" cols="45"></textarea>
</div>
<br />
  <div id= "divid4">
<input type="submit" name="submit" value="Abschicken" />
</div>
   <div id= "divid5">
Text:
</div>
</form>
</body>
</center>
</html>
Bild 2:

Es kommt nur das dabei raus!!!!


PS: War nur ein Test also nicht aufregen über design, code , alles...

lg Ich hoffe ihr könnt mir helfen!
 
Werbung:
Hallo.

Ein guter Anfang währe deiner Seite einen Doctype zu geben und die ganzen absoluten positionierungen rauszunehmen.
Deine Seite soll in jedem Browser in der Mitte angezeigt werden. Das ist mit absoluten positionierungen nicht möglich.

Der HTML Code ist gar grauselig.
Der Head fehlt komplett, die ganze Seite ist ein wunderbares Beispiel für ein div Layout.
Tut mir Leid aber für was HTML eigentlich ist scheinst du noch nicht verstanden zu haben.

Gruss
Elroy
 
Zuletzt bearbeitet:
Elroy schrieb:
Hallo.

Ein guter Anfang währe deiner Seite einen Doctype zu geben und die ganzen absoluten positionierungen rauszunehmen.
Deine Seite soll in jedem Browser in der Mitte angezeigt werden. Das ist mit absoluten positionierungen nicht möglich.

Der HTML Code ist gar grauselig.
Der Head fehlt komplett, die ganze Seite ist ein wunderbares Beispiel für ein div Layout.
Tut mir Leid aber für was HTML eigentlich ist scheinst du noch nicht verstanden zu haben.

Gruss
Elroy
Zum Vergrößern anklicken....

Ich habe oben geschrieben das ich das schnell zusammengeschrieben habe.
Allerdings war auch nicht meine frage ob der Code schön ist.

Wie geht das dann?
Zeig mir mal einer deiner Codes damit ich was lernen kann.
Am besten mit zentrierung...

lg lucaa
 
Zuletzt bearbeitet:
Hallo.

Also wenn du etwas absolut positionierst kannst du es nicht in die Mitte verschieben.
Siehe hier:
Code: 
#container2 {
position: absolute; 
left: 100px;
}
Du willst es in der Mitte haben? Dann nimm die absolute Positonierung raus.

Es geht nicht darum ob dein Code schön oder hässlich ist. Das ist mit egal.
Es geht darum das dein Code falsch ist.

Du brauchst keine divs um HTML Tags anzusprechen und du brauchst keine divs um dein Formular zu formatieren.
Und man erstellt mit divs kein Layout.
Man benutzt keine Tabelle für ein Menü

CSS baut auf der richtigen Anwendung von HTML auf und das ist bei dir leider nicht der Fall.

Übrigens da es richtig viel weniger Code ist kann man es auch ganz schnell richtig schreiben.
Mit einem Link zur Seite könnten wir dir auch besser helfen.

Gruss
Elroy
 
Werbung:
Hallo Elroy,

Ok also fragen:

1) Wie kann ich ein Layout ohne div´s erstellen?
2) Ich habe die position absolute rausgenommen. Jetzt sind alle Bilder, Objekte etc. irgendwo am Bildschirm..Was habe ich falsch gemacht?? (hab einfach position: absolute entfernt)
3) Kann ich event. ein beispielcode von dir bekommen? (da lern ich am meisten)

Meine Seite ist nur offline^^

lg lucaa
 
Hallo.

1) Du hast ein Formular. In ein Formular gehören keine divs. Nutze die Tags die HTML dafür vorsieht.
Formulare erstellen
Benutze divs nur dann wenn sie sinnvoll sind. Also wenn du mehrere Elemente zusammen fassen musst.
Du hast ein Menü, das ist eine Liste von Links also zeichne es als Liste aus. In eine Tabelle gehören nur tabellarische Daten.

2) Positionieren kannst du mit padding und margin und float.

3) Beipielcode habe ich jetzt keinen.

Deine Seite kannst du bei jedem Freehoster wie z.B. bplaced hochladen.

Gruss
Elroy
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben