[Jann Hendrik]

Ich habe ein CSS-Problem.

Nach dem Vorbild von dieser Seite:
Zwei Menüs im Textfluß
wollte ich in meine Seite nun einen optional eingeblendeten div-Container einarbeiten, damit sofern vorhanden news angezeigt werden.

Leider habe ich das nicht hinbekommen. Denn bei mir sieht es so aus:
screenshot
ich möchte aber, dass das so wird
photomontage

Der div-Container mit den news soll vom div-Container umflossen werden.

Die CSS habe ich mal hier verlinkt:
CSS

Hat jmd. dazu eine Idee? Ich würde mich freuen!

[robo47]

hättest du vieleicht mal irgendwo die beispiel-html-version mit css wo es nicht tut ? anstatt nur dem jpg ?

[Jann Hendrik]

sry... habe ich vergessen!

also die testseite befindet sich unter www.bekaan.org/index2.php

[robo47]

bei #content das clear weg und schmäler machen sollte dein problem beheben.

meine test-css:

body
{
 font-family:Verdana,sans-serif;
 font-size:12px;
 background-color:#FFFFFF;
 color:#000000;
 width:765px;
}

h1
{
  font-size:18px;
  color:#000000;
  margin-bottom:0px;
  background-color:#FFFFFF;
}

h2
{
  font-size:16px;
  color:#000000;
  background-color:#FFFFFF;
}

h3
{
  font-size:14px;
  color:#000000;
  background-color:#FFFFFF;
}

p
{
  margin-top:0px;
}

code
{
  font-size:14px;
  color:#0000ff;
  background-color:#FFFFFF;
}

pre
{
  font-size:14px;
  color:#0000ff;
  padding:5px;
  background-color:#FFFFFF;
}

a:link, a:visited, a:active, a:hover
{
  text-decoration:none;
  font-weight:bold;
  color:#634142;
  font-size:12px;
  background-color:#FFFFFF;
}

a:active, a:hover
{
 text-decoration:underline;
}

#title
{
  height:34px;
  padding:5px;
  border-bottom:1px solid #000000;
  margin-bottom:20px;
}

#left
{
  width:180px;
  float:left;
  line-height:18px;
  clear:right;
}

#news
{
  width:175px;
  float:right;
  line-height:18px;

  border:1px solid #606060;
  padding:5px;
  margin:0px 0px 5px 5px;
}

.menutitle
{
  font-weight:bold;
  border-top:1px dashed #000000;
  margin-top:15px;
}

#content
{
  width: 300px;
  float:left;
  margin-right:10px;
  margin-left:10px;

}

#footer
{
  text-align:center;
  clear:both;
  margin-top:20px;
  width: 765px;
  vertical-align: middle;
  color: #000000;
  height: 21px;
  background-color:#FFFFFF;
}

IMG
{
  border-top-style: none;
  border-right-style: none;
  border-left-style: none;
  border-bottom-style: none;
}

img.picture_right
{
  margin-bottom:10px;
  margin-left:10px;
  margin-right:10px;
  margin-top:10px;
  float:right;
}

img.picture_left
{
  margin-bottom:10px;
  margin-left:10px;
  margin-right:10px;
  margin-top:10px;
  float:left;
}

img.picture_no_float
{
  margin-bottom:10px;
  margin-left:10px;
  margin-right:10px;
  margin-top:10px;
}

img.valid
{
  border:0;
  width:80px;
  height:15px
}

fieldset.kontakt
{
  width: 350px;
  margin-left: 10px;
  height: 300px;
}

fieldset.admin
{
  width: 350px;
  margin-left: 10px;
  height: 80px;
}

fieldset.amazon
{
  width: 350px;
  margin-left: 10px;
  height: 60px;
}

fieldset
{
  width: 350px;
  margin-left: 10px;
  height: 350px;
}

getestet im FF 1.0.6

[Jann Hendrik]

das hätte aber den Nachteil, dass wenn ich das CSS für den content-Container so ändere:

#content
{
  width: 370px;
  float:left;
  margin-right:10px;
  margin-left:10px;
}

dass diser dann aber auch so schmal ist, wenn der news-Container nicht eingeblendet wird.
Ich dachte daher an eine Möglichkeit, dass der content-Container um den news-div herumfließt.

Der news-div soll nämlich nicht immer eingeblendet werden! Im Falle des nicht-einblendens wäre der content unnötig beschränkt!

Daher halt die Idee des herumfliessens, wie ich es in der Grafik oben
photomontage
angedeutet habe...

Verstehst du, wie ich das meine?

[Ben]

Teste mal diese CSS-Datei.

body
{
 font-family:Verdana,sans-serif;
 font-size:12px;
 background-color:#FFFFFF;
 color:#000000;
 width:765px;
}

h1
{
  font-size:18px;
  color:#000000;
  margin-bottom:0px;
  background-color:#FFFFFF;
}

h2
{
  font-size:16px;
  color:#000000;
  background-color:#FFFFFF;
  margin-top:50px;
}

h3
{
  font-size:14px;
  color:#000000;
  background-color:#FFFFFF;
}

p
{
  margin-top:0px;
}

code
{
  font-size:14px;
  color:#0000ff;
  background-color:#FFFFFF;
}

pre
{
  font-size:14px;
  color:#0000ff;
  padding:5px;
  background-color:#FFFFFF;
}

a:link, a:visited, a:active, a:hover
{
  text-decoration:none;
  font-weight:bold;
  color:#634142;
  font-size:12px;
  background-color:#FFFFFF;
}

a:active, a:hover
{
 text-decoration:underline;
}

#title
{
  height:34px;
  padding:5px;
  border-bottom:1px solid #000000;
  margin-bottom:20px;
}

#left
{
  width:180px;
  float:left;
  line-height:18px;
  clear:right;
}

#news
{
  width:175px;
  float:right;
  line-height:18px;
  border:1px solid #606060;
  padding:5px;
  margin:0px 0px 5px 5px;

}


#news h2 {
    margin-top:0;
}




.menutitle
{
  font-weight:bold;
  border-top:1px dashed #000000;
  margin-top:15px;
}



#footer
{
  text-align:center;
  clear:both;
  margin-top:20px;
  width: 765px;
  vertical-align: middle;
  color: #000000;
  height: 21px;
  background-color:#FFFFFF;
}

IMG
{
  border-top-style: none;
  border-right-style: none;
  border-left-style: none;
  border-bottom-style: none;
}

img.picture_right
{
  margin-bottom:10px;
  margin-left:10px;
  margin-right:10px;
  margin-top:10px;
  float:right;
}

img.picture_left
{
  margin-bottom:10px;
  margin-left:10px;
  margin-right:10px;
  margin-top:10px;
  float:left;
}

img.picture_no_float
{
  margin-bottom:10px;
  margin-left:10px;
  margin-right:10px;
  margin-top:10px;
}

img.valid
{
  border:0;
  width:80px;
  height:15px
}

fieldset.kontakt
{
  width: 350px;
  margin-left: 10px;
  height: 300px;
}

fieldset.admin
{
  width: 350px;
  margin-left: 10px;
  height: 80px;
}

fieldset.amazon
{
  width: 350px;
  margin-left: 10px;
  height: 60px;
}

fieldset
{
  width: 350px;
  margin-left: 10px;
  height: 350px;
}

Ich habe #content ganz rausgenommen .. damit funktioniert es bei mir .. jedenfalls im FF 1.5.

Grüße Ben.


Updated:
Ich habe mal die Definition von h2 zusammengefasst. In der ersten Version von mir hatte ich diese doppelt.
Das #news h2 existiert, um das margin-top wieder zu berichtigen.


Edited:
Getestet unter FireFox 1.5, Opera 8.5, Internet Explorer 6.0, alles auf Windows XP

[Jann Hendrik]

ich habe mal Bens aktuallisiertes CSS genommen, da ja nun das #content fehlt...

es sieht scheiße aus:
screeshot

[robo47]

tut meins nicht ?

[Ben]

Zitat von Jann Hendrik

es sieht scheiße aus

Danke sehr. Ich habe ja auch nur die Startseite begutachtet ..

[Jann Hendrik]

Zitat von robo47

tut meins nicht ?

ich habe deines mal hier eingebaut:
http://www.bekaan.org/robo.php
Der Nachteil ist halt, dass der content-div überall auf die schmale Breite eingeengt wurde...
Da aber der news-div nicht immer und nicht überall eingeblendet wird ist das nicht so dolle...

Zitat von Ben

Danke sehr. Ich habe ja auch nur die Startseite begutachtet ..

Sry - aber auch hier meine Schuld, weil die nur die index2.php mit dem geänderten CSS begutachten konntest...
ich habe mal 'dein' CSS hier hochgeladen:
http://www.bekaan.org/ben.php

Nun ist das CSS jeweils für die ganze Seite begutachtbar... allerdings ist bei Bens Lösung leider der float-Fehler, wenn die Navi kürzer ist als der content.
Nach links (Richtung Navigation) sollte der Content nicht rüberrutschen...

[robo47]

hmm wie wärs mit ner variablen im template mit der du für den div sowas machst:


<div id="content" style="%var%">


und damit halt die breite abhängig davon ob der newsdiv inhalt hat oder nicht setzt ?

greetz
robo47

[Jann Hendrik]

ok, generell wäre ne Möglichkeit das in den Inhalt der Startseite mit einzubinden, aber....
das muss doch via CSS gehen, oder nicht?

wenn nicht... dann muss ich mir wohl was anderes überlegen - aber noch habe ich nicht aufgegeben!

[Lars]

Floating und maximale Breite verträgt sich nicht, da die Breite in allen Browsern Priorität hat.

[robo47]

im FF und Opera wäre vieleicht ein workaround mit min-widthund max-width möglich ... vieleicht, nur grad ein komischer einfall

[Lars]

Der IE kann das aber nicht.

[robo47]

Zitat von Lars

Der IE kann das aber nicht.

hmm gab irgendwo mal ein CSS-woraround dass er es doch kann, war etwas umständlich hat aber glaub ich getan ...habs nur grad ned gefunden ..

[Lars]

Das würde mich interessieren, ich vermisse min und max beim IE nämlich sehr

[xabbuh]

min-width sollte sich folgendermaßen simulieren lassen, da der IE width ähnlich wie die anderen Browser min-width interpretiert:

div {
    min-width : 5em;
}

* html div {
    width : 5em;
}

-> http://de.selfhtml.org/css/layouts/browserweichen.htm