Karl

[Hans]

Guten Morgen,

könnte mir jemand verraten, wie man dieses Layout mit FLoats hinbekommt?

Darf man absolute und float mischen ?

Danke

[Karl]

Hatte das Link vergessen

http://www.stichpunkt.de/css/4-box.html

[Patrick]

Weshalb heißt Du eigentlich einmal Karl und dann Hans, ist es Dir peinlich hier etwas zu posten, oder was?

[Hans]

Guten Tag,

Weshalb heißt Du eigentlich einmal Karl und dann Hans, ist es Dir peinlich hier etwas zu posten, oder was?

LOL. :))))

Nein, überhaupt nicht.
Ich arbeite hier mit 2 Kollegen an einer kleinen Clubpage.
Auf dem einen Rechner ist Internet und Selfforum als Startseite.
Habe wohl übersehen dass Karl da schon was eingetragen hatte.

Sehe sonst keinen Grund mehere Namen zu verwenden.

[wahsaga]

hi,

Hatte das Link vergessen

http://www.stichpunkt.de/css/4-box.html

hast du immer noch.
</faq/#Q-19> sagt dir, wie du hier links einbindest.

http://www.stichpunkt.de/css/4-box.html

sieh dir http://glish.com/css/7.asp an.

btw: hast du danach nicht erst gestern oder vorgestern gefragt (als du vielleicht noch nicht Karl oder Hans hiesst?).

btw2: und nächstes mal wähle bitte einen sinnvollen thread-titel.

gruss,
wahsaga

[Hans]

Wieso ist das Logo denn nun verschoben.
Brauche für die Logozeile absolute Positionierung, aber der bar ist ca. um einen halben cm nach untern verschoben.

Woran kann das nur liegen:

#barcorner
{
  margin: 0px 0px 0px 0px;
  width: 200px;
  background-color: #ffffff;
}

#greybar
{
  margin: 0px 0px 10px 200px;
  background-image: url(../images/bar.jpg);
  background-repeat:repeat-x;
}

#logo
{
  position: absolute;
  top: 0px;
}

<div id="barcorner"><img src="../images/edgeleft.jpg" width="200" height="52" alt="edgeleft.jpg" /></div>
<div id="logo"><img src="../languages/{$language}/img/slogan.gif" align="right" alt="slogan.gif" /></div>
<div id="greybar"> </div>

Vielen Dank

[wahsaga]

hi,

Brauche für die Logozeile absolute Positionierung

nein, _brauchst_ du ganz sicher nicht, jedenfalls nicht für das layout, was du hier als vorgabe angegeben hast.
_wofür_ willst du es absolut positionieren?
notiere es als allersters element im body, dann ist es doch automatisch ganz oben.

gruss,
wahsaga

[Hans]

Hi wasaga,

ich sehe wirklich nicht wie es gehen soll.

http://www.dentona.de/pages/news.php?lang=de

Also ich soll folgende Seite von Tabellen auf css umstellen.
Auf der Seite oben gibt es eine Grafik (Graue ecke) die 200 px breit ist. Damit die Grafik weiterläuft muss der braue Bar bis zum rechten Bildschirmrand wiederholt werden.

Innendrin ist aber noch das Logo, das am rechten Bildschirmrand ausgerichtet werden soll.

Hat jemand eine Idee?

Danke

[wahsaga]

hi,

ich sehe wirklich nicht wie es gehen soll.
http://www.dentona.de/pages/news.php?lang=de

verlinken, bitte. </faq/#Q-19>.

http://www.dentona.de/pages/news.php?lang=de

Also ich soll folgende Seite von Tabellen auf css umstellen.
Auf der Seite oben gibt es eine Grafik (Graue ecke) die 200 px breit ist. Damit die Grafik weiterläuft muss der braue Bar bis zum rechten Bildschirmrand wiederholt werden.
Innendrin ist aber noch das Logo, das am rechten Bildschirmrand ausgerichtet werden soll.

den unteren teil des balkens nach wie vor als hintergrundbild in einen div einbinden.
den linken teil des rahmens als bild einbinden, mit float:left versehen.
das logo ebenfalls als bild, mit float:right.
das wird eine feste höhe für den umgebenden div erforderlich machen, aber das dürfte ja kein problem darstellen.

gruss,
wahsaga

[Hans]

Hi wasaga,

es klappt immer noch nicht.
Sticht was ins Auge?

#barcorner
{
  float: left;
  margin: 0px 0px 0px 0px;
  width: 200px;
}

#greybar
{
  margin: 0px 0px 10px 200px;
  background-image: url(../images/bar.jpg);
  background-repeat:repeat-x;
}

#logo
{
  float: right;
  top: 0px;
}

<div style="height: 52px;">
 <div id="barcorner"><img src="../images/edgeleft.jpg" width="200" height="52" alt="edgeleft.jpg" /></div>
 <div id="logo"><img src="../languages/{$language}/img/slogan.gif" align="right" alt="slogan.gif" /></div>
 <div id="greybar"> </div>
</div>

[wahsaga]

hi,

Hi wasaga,

zwischen mir und schwedischem knäckebrot besteht keinerlei verbindung ;-/

es klappt immer noch nicht.

heisst ...?

Sticht was ins Auge?

ja, die anordnung.

<div style="height: 52px;">
 <div id="barcorner"><img src="../images/edgeleft.jpg" width="200" height="52" alt="edgeleft.jpg" /></div>
 <div id="logo"><img src="../languages/{$language}/img/slogan.gif" align="right" alt="slogan.gif" /></div>
 <div id="greybar"> </div>
</div>

versuch's mal so:

<div id="greybar">
<div id="barcorner"><img src="../images/edgeleft.jpg" width="200" height="52" alt="edgeleft.jpg" /></div>
<div id="logo"><img src="../languages/{$language}/img/slogan.gif" align="right" alt="slogan.gif" /></div>
</div>

#greybar bekommt jetzt die höhe und das hintergrundbild zugewiesen.
#barcorner wird nach links gefloatet, #logo nach rechts.
allerdings solltest du bei float immer auch die breite mit angeben, also ergänze mal #barcorner und #logo um eine angabe zu width.

gruss,
wahsaga

[Hans]

Jetzt ist total durcheinander.

Die abrcorner.gif ist nun in der Mitte der Seite.
Das Logo am rechten rand ein paar cm runter und die bar.gif ist ganz weg.

Ahhh, drehe bald durch.

[Thomas Luethi]

Hallo,

Wieso ist das Logo denn nun verschoben.

#logo
{
  position: absolute;
  top: 0px;
}

Moegliche Ursache: Das Position:absolute bezieht sich
auf die absolute Position im naechsten Eltern-Element,
das ausserhalb des normalen "Flusses" positioniert ist.
MudGuard wies mich im Posting [pref:t=63910&m=363094] darauf hin:
http://www.w3.org/TR/REC-CSS2/visudet.html#containing-block-details :
"If the element has 'position: absolute', the containing block is established by the nearest ancestor with a 'position' other than 'static'."

Da Du vermutlich kein solches Eltern-Element hast hast,
bezieht sich das position:absolute wohl auf body oder
sogar auf html.

Versuch's mal mit:
html, body { margin:0; border:0 none; padding:0; }
evtl. noch mit
body { position:absolute; top:0; left:0; }

Gruesse,

Thomas

[Ingo Turski]

Hi,

da ist doch gar nicht viel zu ändern dran ...
zunächst definiere die äußeren abstände über padding für body,
dann ersetze die positionsangaben für links und rechts durch float,
width:auto für inhalt würde ich löschen.
damit das dann funktioniert, mußt du links und rechts im quelltext vor inhalt setzen.

freundliche Grüße
Ingo