[CSS] Float

[NewNoise]

Huhu,

ich habe heute mal ein Problemchen mit dem Float-Befehl.
Ich möchte gerne 2 Divs nebeneinander positionieren.
Wenn ich das allerdings mit float mache, funktioniert der Rest meines Layouts nicht mehr, weil float die Elemente ja so heraushebt.
Gibt es da eine andere Möglicheit?
Zu sehen gibbet das ganze im Gästebuch von:
Perfume Uniform

Eigentlich sollte halt die Angabe (Name email usw) NEBEN den vom User getätigten Eingaben stehen.

Und hier der Code:

HTML:

 <div id="gbg">
                  	<div id="gbl"><b>Datum</b>:</div>

                  	<div id="gbr">15. December 2007 19:43</div>
                  	<div id="gbl"><b>Name</b>:</div>
                  	<div id="gbr">erz</div>
                  	<div id="gbl"><b>Homepage</b>:</div>
                  	<div id="gbr"><a href="http://rturt">http://rturt</a></div>

                 	<div id="gbl" style="margin-bottom:10px;"><b>eMail</b>:</div>
                  	<div id="gbr" style="margin-bottom:10px;"><a href="mailto:stutr">stutr</a></div>
                       <div id="gbn">
                         <div id="gbl" style="background-color:transparent; margin-bottom:40px;"><b>Nachricht</b>:</div>
			<div id="gbr" style="background-color:transparent; margin-bottom:40px;"> hier steht text</div>
                       </div>

                   </div>

und der zugehörige CSS Teil:

#gbg     {
		width: 100%;
                 height: 100%;
                 background-color: yellow;
}

#gbl     {
		width: 20%;
                 height: 100%;
                 padding-left: 0px;
                 background-color: transparent;
}

#gbr     {
		width: 80%;
                 height: 100%;
                 padding-right: 0px;
                 background-color: transparent;
}

#gbn	{
		height: 100%;
                	background-color: yellow;
}

Vielen Dank,
noise

 

[dkdenz]

Erstmal nimmst Du unsinnig viele div's.
Außerdem ist es besser, wenn man "sprechende" Selektoren benutzt.
Dieses Ganze gbg-, bgb-, agb-Gedöns verwirrt mehr als es nutzt.

Wenn Du etwas "floatest", musst Du auch wieder "entfloaten"...

Nützlicher Link: Linksammlung: Formulargestaltung

 

[Albu]

Ich dachte immer IDs müssten eindeutig sein...

 

[NewNoise]

naja für mich sind die divs eindeutig
gbl = guestbook left
gbr = guestbook right
gbg = gustbook gesamt
naja aber darum geht es ja letztlich nicht, da der name ja eigentlich keinen einfluss auf die ausgabe hat ...

wie entfloate ich denn?

und die linksammlung hilft mir nicht wirklich weiter ...

die problematik ist aber schon rübergekommen oder?

danke trotzdem schonmal.

edit: achso und wie kann ich es denn mit weniger divs machen?
ich muss doch die divs jeweils schließen und es dann neu öffnen oder wie ginge es anders?

 

[dkdenz]

und die linksammlung hilft mir nicht wirklich weiter ...

Tja, Lesen hält halt auf...
...aber darauf zu hoffen, das andere das für einen erledigen ist ja auch verlockender.
Meinst Du, die "Anderen" haben sich das nicht auch mal irgendwann beigebracht?

Und ja, id's müssen dokumentweit eindeutig sein.
Einfach Regeln umzuwerfen zeugt nicht von einen hohen Lernwillen.

Noch mal Links:
SELFHTML: Stylesheets / CSS-Eigenschaften / Positionierung und Anzeige von Elementen
SELFHTML: Stylesheets / CSS-Eigenschaften / Positionierung und Anzeige von Elementen

 

[NewNoise]

eigentlich lese ich gerne, aber die letzten links bezogen sich ja eher auf forms und da lag ja nich das problem.
die gerade haben das problem gelöst. clear brauchte ich.
herzlichen dank.

 

[dkdenz]

Wundert mich, das mein Link Dich nicht weitergebracht hat:
Formulare per CSS Layouten - style-sheets.de
Applying CSS to forms
Formulardesign : Einfach für Alle

 

[NewNoise]

mmh hab gar nich soweit gelesen, weil es die ganze zeit um forms ging, mit denen ich mich ja hierbei eigentlich gar nicht befasst habe
vielen dank und sei nich so böse, dass ich 2mal fragte

 

[ein schlauer]

Mal abgesehen von den vielen technischen Fehlern (du willst hier Klassen benutzen keine IDs, diese müssen immer eindeutig sein, d.h. sie dürfen nur einmal im Dokument vorkommen) ist dein Ansatz sehr mißlungen. steht ja schon in deinem Quellcode. Warum du für eine "Tabellenartige Struktur" keine Tabelle benutzen willst ist seltsam, aber selbst dann liesse sich das wesentlich einfacher und ohne überflüssige Elemente gestalten:

Das CSS

.gb {}
.gb h2 {
font-size:1em;
font-weight:normal;
margin:0;
padding:0;
}
.gb b {
	display:block;
	width:20%;
	float:left;
}
.gb p {
	margin:10px 0 0 0;
}

Das HTML:

<div class="gb">
<h2>
<b>Datum:</b> 16. December 2007 05:12<br>
<b>Name:</b> ert<br>
<b>Homepage:</b> <a href="http://wet">http://wet</a> <br>
<b>eMail:</b> <a href="mailto:WT">WT</a>
</h2>
<p>
<b>Nachricht:</b>
WTE</p>
</div>

 

[NewNoise]

hi.
wenn du nun auf meine gehst siehst du wie es aussieht
Perfume Uniform
außerdem kann ich so die einträge nicht eingrückt übergeben oder?
ist das so dramatisch mit den divs?
ich meine warum zb darf ne id nur einmal verwendet werden, wenns so ohne probleme geht?
und ist denn das grundgerüst ok? also gehts nur um die gb ausgabe? oder is auch die struktur der index.php insich schlecht?
gruß und danke für die hilfe/mühe

 

[dkdenz]

HTML / XHTML / XML / WML Validator

 

[NewNoise]

wäre es denn in ordnung statt die divs statt mit id mit class zuzuweisen?

 

[ein schlauer]

Im Prinzip ja, aber wie du an meinem Beispiel siehst brauchst du diese ganzen Klassen überhaupt nicht. Du hast einen Bereich, in dem kannst du die Elemente nach deinem Wunsch formatieren. Es besteht keine Notwendigkeit jedem Element eine Klasse zu geben

 

[NewNoise]

ja das habe ich verstanden.
aber kann ich das dann so einrichten, dass die eingaben eingerückt dargestellt sind. also so:
Name:.......Peter
eMail:........Peter@peter.de
Hompage:..Peter.de
So richtig gehts hier nich aber du verstehst was ich meine
gruß
edit: der löscht ja die leerzeichen hier automatisch, daher habe ich punkte eingefügt um den abstand zu erreichn

 

[ein schlauer]

Genau das macht mein Beispiel.

 

[NewNoise]

ja hab ich jetzt auch gesehen.
der browser hatte noch die alte css im cache ...
aber er rückt mehrzeilige nachrichten nich ein siehe beispiel text auf meiner seite.
wie erreiche ich das?
danke

 

[ein schlauer]

Ich weiß nicht was du meinst. Ich hab mein Beispiel so gemacht, dass es bei mir exakt so aussah wie deine Seite.

 

[NewNoise]

wenn die nachricht mehrzeilig ist, rückt er die weiteren nicht mehr korrekt ein:

gruß

 

[undefined]

Warum du für eine "Tabellenartige Struktur" keine Tabelle benutzen willst ist seltsam...

Eine Tabelle wäre die Lösung Deines Problems.

 

[NewNoise]

ich dachte man dürfe keine tabellen mehr verwenden, weil die so uncool sind?
außerdem hatte ich bei tabellen auch probleme, da war das einrücken unregelmäßig