DIV Container

[Peppi]

Guten Morgen,

habe da mal eine frage an die verschiebung von div containern.

Ich möchte 3 Container nebeneinander platzieren, diese 3 Container sollen in einer Tablle sein damt sie die Größe des Banners nich überschreiten. Jedoch sollen sie die schrift nicht in der gleichen Zeile haben. Geht das ohne weiteres oder muss ich die Tabelle dann weglassen?
Zudem komme ich nicht ganz klar mit folgendem:

font-size: 0.83em;
    float: left; width: 18em;
    margin: 0; padding: 0;
    border: 1px dashed silver;

für was genau steht das em?
Wie sage ich das die erste Box z.b. 100px breit sein soll und 200px hoch?
Margin-left/right?
Die schrift soll aber erst sagen wir vom obersten containerrand 10px entfernt sein.
Die 3te Box soll automatisch den rest der Tabelle, auf der rechten Seite  ausfüllen.

Die 3 Container stehen mittlerweile in einer Tabelle, jedoch ist das geschriebene immer in einer Spalte, das soll nicht sein.

Danke.

LG Peppi

[Gerch2003]

Hi,

schreib doch am besten mal einen kleinen Html-Code wie du es machen würdest.
Dann sagen wir dir was du ändern sollst ;-)

Ein bischen mehr Eigeninitiative bitte :-)

Gruß

[Peppi]

Hi,

schreib doch am besten mal einen kleinen Html-Code wie du es machen würdest.

Okee also kurz zur Seite oben befindet sich ein Banner. direktdadrunter die Navigationsleites(paralell zum Banner, gleich länge!)

Dadrunter kommen die 3 Boxen.

css:  
          <style type="text/css">  
		div#Navigationlinks {  
		margin-left: 0em;  
		float: left; width: 9em;  
		padding: 9 2em;  
		border: 1px dashed silver;}  
	  
		div#Content {  
		margin-left:1em;  
		float: left; width: 9em;  
		padding: 9 2em;  
		border: 1px dashed silver;}  
		  
		div#Navigaionwerbung {  
		margin-left:1em;  
		float: left; width: 9em;  
		padding: 9 2em;  
		border: 1px dashed silver;}  
	   </style>  
  
<table width="800px" height="15px">  
	<tr>  
		<td width="900px" height="25px">  
		Hier ist die Navigationsleiste  
		</td>  
	</tr>  
</table>  
<div id="Navigationlinks">  
Dies ist ein Container. ID= Navigationlinks  
</div>  
<div id="Content">  
Dies ist ein Container. ID= Content  
</div>  
<div id="Navigationwerbung">  
Dies ist ein Container. ID= Navigationwerbung  
</div>

So und jetzt macht er mir um die box werbung schonmal keinen Kasten mehr -.-

:)

[peppi]

So und jetzt macht er mir um die box werbung schonmal keinen Kasten mehr

Also der kasten ist wieder da:)

jetzt sollte halt am besten noch eine tabelle um das ganze herum, damit die werbe box, den rest der tabelle rechts ausfüllt.

lg

[Steel]

Hi!

Was genau hindert Dich denn nun eigentlich daran, deine Divboxen auch in eine (die) Tabelle zu verfrachten? Das habe ich noch nicht verstanden.

Ansonsten, solltest Du bald mal dazu uebergehen deine Seite durch CSS zu designen und das Tabellenlayout ueber Bord zu werfen. Sinn macht es naemlich keinen.

[Peppi]

Was genau hindert Dich denn nun eigentlich daran, deine Divboxen auch in eine (die) Tabelle zu verfrachten? Das habe ich noch nicht verstanden.

Ansonsten, solltest Du bald mal dazu uebergehen deine Seite durch CSS zu designen und das Tabellenlayout ueber Bord zu werfen. Sinn macht es naemlich keinen.

Hey,

ja das dachte ich mir auch. Rein theoretisch kann ich ja den Banner in eine Div stecken sowie die navileiste auch.
nur ich möchte nicht das in anderen Browsern sich die Boxen verschieben.

[Peppi]

Ich habe das zur zeit wie folgt:
         ~~~css <style type="text/css">
div#Navigationlinks {
margin-left: 0em;
float: left; width: 9em;
padding: 9 1em;
border: 1px dashed silver;}

	div#Content {  
	margin-left: 0,9em;  
	float: left; width: 9em;  
	padding: 9 5em;  
	border: 1px dashed silver;}  
	  
	div#Navigationwerbung {  
	margin-left: 0,9em;  
	float: left; width: 9em;  
	padding: 9 5em;  
	border: 1px dashed silver;}  
</style>

~~~html
<div id="Navigationlinks">  
				Dies ist ein Container. ID= Navigationlinks  
			</div>  
			<div id="Content">  
				Dies ist ein Container. ID= Content  
			</div>  
			<div id="Navigationwerbung">  
				Dies ist ein Container. <br>ID= Navigationwerbung  
			</div>

Jetzt will ich aber das in der ersten box weiter oben angefangen wird zu schreiben und in der 2ten in der mitte und in der 3ten z.b. unten. Die 3 Boxen sollen komplett unabhängig sein. Und alle 3 zusammen max 800px breit sein. d.h. egal wie viel ich schreibe sie sollen nicht breiter werden als ich es voreingestellt habe.

[Steel]

Aha.

Habe ich dich richtig verstanden? Du moechtest sowas haben?

-------------------------------------------------
|hier kommt text|               |               |
|nach oben      |               |               |
|               |               |               |
|               |hier ist text  |               |
|               |mittig         |               |
|               |               |               |
|               |               |hier is der    |
|               |               |text unten     |
-------------------------------------------------

[peppi]

Aha.

Habe ich dich richtig verstanden? Du moechtest sowas haben?

---

|hier kommt text|               |               |
|nach oben      |               |               |
|               |               |               |
|               |hier ist text  |               |
|               |mittig         |               |
|               |               |               |
|               |               |hier is der    |
|               |               |text unten     |

Ja genau. Wenn jetzt aber der mittlere Text voller wird bzw. oben anfangen soll aber sagen wir mal nur 3 px vom oberen Rand und der linke text(linke box) 10 px vom obrigen Rand anfangen soll verschiebt sich der mittlere in die mitte der box. Zu dem soll eine 4te Box unter die 3, und egal wie hoch die Boxen wer die 4te soll sich immer unter den 3en aufhalten.

So und dann nochmal eine allgemeine frage.
Wie sage ich denn das der Text oben 3px vom rand entfernt sein soll unten 10px und links & rechts jeweils 5 px?

[Steel]

Aha.

Habe ich dich richtig verstanden? Du moechtest sowas haben?

---

|hier kommt text|               |               |
|nach oben      |               |               |
|               |               |               |
|               |hier ist text  |               |
|               |mittig         |               |
|               |               |               |
|               |               |hier is der    |
|               |               |text unten     |

Ja genau. Wenn jetzt aber der mittlere Text voller wird bzw. oben anfangen soll aber sagen wir mal nur 3 px vom oberen Rand und der linke text(linke box) 10 px vom obrigen Rand anfangen soll verschiebt sich der mittlere in die mitte der box. Zu dem soll eine 4te Box unter die 3, und egal wie hoch die Boxen wer die 4te soll sich immer unter den 3en aufhalten.

Oookay. Das versteh ich wieder nciht so richitg. Soll der Text zentriert sein? Oder einfach um x Pixel verschoben? Letzteres ist leicht. (s.u.)

So und dann nochmal eine allgemeine frage.
Wie sage ich denn das der Text oben 3px vom rand entfernt sein soll unten 10px und links & rechts jeweils 5 px?

Dafuer gibts CSS. http://de.selfhtml.org/css/eigenschaften/innenabstand.htm@title=Padding lautet das Zauberwort.

[Peppi]

Oookay. Das versteh ich wieder nciht so richitg. Soll der Text zentriert sein? Oder einfach um x Pixel verschoben? Letzteres ist leicht. (s.u.)

Also sagen wir mal ich habe den obermenüpunkt news. Den klicke ich an.
Dann soll sich eine Spalte unter dem ober menüpunkt news öffnen, wo dann z.b. alte news und neue news als unterpunkt kommen.

Aufbau:
|--------------------------------------|

Banner
Laufschrift
--------------------------------------
--------------------
News Preise Angebot
-------------------------
alte news      neue news
-------------------------
-----------
Sonstiges
-----------
------------------
--------------------------------------
Impressum etc.
--------------------------------------

Was halt wichtig ist das wenn die box aufhört soll ein Umbruch sein!
und die Boxenbreite soll nicht variabel sein!

So und beim Padding gibt es ja 2 werte?

padding: 9 5em;

für was steht die 9 und die 5em?

lg

[Steel]

Du bist ja ne Grossbaustelle!

Sehe ich das richtig? Du moechtest schlicht ein Drop-Down Menu erstellen?

Fangen wir mal mit den Basics an: Such dir doch zuerstmal ein Seitenlayout aus, das auf CSS basiert. Hier finden sich ein paar anschauliche Beispiele.

Dann verstehe ich dich richtig? Das Einblenden des Untermenues verusacht ein runtersetzen der Spalten? Positioniere das Untermenue absolut. Dann wird es aus dem Fluss genommen.

Aber Vorsicht: Absolute Positionierung hat teilweise ungewollte Nebeneffekte und sollte mit Bedacht eingesetzt werden. Am Besten gar nicht, wenn man nicht genau weiss, was man tut.

[Peppi]

Du bist ja ne Grossbaustelle!

Sehe ich das richtig? Du moechtest schlicht ein Drop-Down Menu erstellen?

Fangen wir mal mit den Basics an: Such dir doch zuerstmal ein Seitenlayout aus, das auf CSS basiert. Hier finden sich ein paar anschauliche Beispiele.

Dann verstehe ich dich richtig? Das Einblenden des Untermenues verusacht ein runtersetzen der Spalten? Positioniere das Untermenue absolut. Dann wird es aus dem Fluss genommen.

Aber Vorsicht: Absolute Positionierung hat teilweise ungewollte Nebeneffekte und sollte mit Bedacht eingesetzt werden. Am Besten gar nicht, wenn man nicht genau weiss, was man tut.

Kann man dich iwie per mail oder chatprogramm erreichen? Wäre sehr nett wenn du mir da noch ein wenig helfen könntest, natürlich nur wenn es dir keine Umstände macht. Habe erst mit Html angefangen :(

Lg

[Steel]

Hi!

Kann man dich iwie per mail oder chatprogramm erreichen? Wäre sehr nett wenn du mir da noch ein wenig helfen könntest, natürlich nur wenn es dir keine Umstände macht. Habe erst mit Html angefangen :(

Das is schon okay. Ich bin zwar auch per Mail oder diversen Messengern zu erreichen, das aber eigentlich nur für Bekannte. ;)

Du bist hier schon richtig. Du musst es nur Schrittweise angehen. SELFHTML ist zwar teilweise nicht mehr ganz aktuell, bietet aber immer noch eine gute Hilfe beim Erlernen der Basiswebtechniken.

Hast Du schonmal überlegt einfach ein fertiges Template zu nehmen (gibts massenweise kostenlos) und das etwas umzugestalten? Oder einfach nur um es mal zu studieren?

Ansonsten erstmal den ersten Schritt machen. Die CSS Layouts, die ich Dir verlinkt habe empfinde ich persönlich als guten Start. Definitiv verbesserbar, aber eben schön universell und zum Verstehen gut geeignet. Alles dynamische kann man dann später einbauen oder verbessern.

[ChrisB]

Hi,

habe da mal eine frage an die verschiebung von div containern.

Dann stelle sie ihr, wenn du sie irgendwo triffst.

MfG ChrisB