XHTML/CSS webpageanordnung

ViperDK · 13.05.2003

hi, ich probiere gerade bissl an ner html page und hab da nen kleines problem (wehe wiseguy uebersieht das topic hier :eek:

) mit der anordnung der einzelnen divs. also ich will eigentlich die navigation mit fester groesse machen. daran anschliessen soll sich der contentbereich. dieser soll bis rechts kurz vor den rand gehn und bis unten kurz vor den rand auch wenn nur wenig text drin steht. wenn ich jetzt im css aber als abstand von links nen festen wert einstelle, was soll ich dem dann als width uebergeben? 100% ist nicht, dann geht der kram ueber den rand. ich koennte eine prozentzahl nehmen die halbwegs funzt aber damit das wirklich gut aussieht, sollte der abstand zur navigation und der zum rechten rand gleich sein. optimal waere eigentlich irgendwas in richtung "ab 200px bis 100%-200px" aber das geht ja denk ich nicht. gibts da ne saubere loesung um das exakt zu machen oder muss ich das auf ungefaehr?

die page: http://viperdk.dyndns.org/viperdk/bw.de_copy

killerchicken_inaktiv · 13.05.2003

nur noch ne kurze verständnisfrage: du möchtest einfach, dass der rand rechts fest 200 px groß ist und der abstand zwischen navi und content ebenfalls?

killerchicken_inaktiv · 13.05.2003

ka ob ichs richtig verstanden habe, aber wie wärs damit?

Code:

div#content {border-bottom: thin solid #0000FF; border-top: thin solid #0000FF; position: absolute; top: 3em; left: 200px; right:200px; bottom: 20px; margin: 1em 2%; padding: 1em; background-color: #DDDDFF;}

ViperDK · 13.05.2003

ich hab mal pobiert, einfach right und left zu verwenden. aber wie es scheint, hilft das zwar, um einen *mindestabstand* vom rechten rand zu halten aber wenn der text nicht soweit geht, hoert auch der der bereich schon frueher auf.

killerchicken_inaktiv · 13.05.2003

schau dir plz den unterschied in der darstellungsweise verschiedener browser an. mozilla/phoenix könnens richtig, ie spuckt. ich glaube kaum dass du mit deinen ambitionen, deine hp in vorbildlichem 1A "XHTML 1.0 Strict". zu coden, eine möglichkeit findest das ding ohne tabellen im ie gescheit darzustellen

ViperDK · 13.05.2003

omg hast recht, opera machts richtig 8[

killerchicken_inaktiv · 13.05.2003

sag ich doch...

Wiseguy3 · 13.05.2003

So wie ich das sehe, wäre es wohl am besten, wenn du die Seite mit einer Mischung aus festen Elementen und float Elementen bauen würdest. Ich kann immer nur auf http://www.w3.org/ verweisen - da ist im grunde das, was du eigentlich willst. Bloss die Abstände musst du auf deine Bedürfnisse anpassen.

PS: Bitte Styles im Stylesheet in der Form ablegen:

Code:

div#top
	{
	float: clear;
	background-color: yellow;
	width: 550px;
	}
	
div#left
	{
	float: left;
	display: block;
	background-color: pink;
	width: 150px;
	}
	
div#left:first-line
	{
	font-weight: bold;
	font-size: 14px;
	background-color: white;
	}

usw - ist besser lesbar, als wenn man die ganzen Angaben nebeneinander schreibt.

PPS: Lasst uns bitte in dem Topic nicht über IE schimpfen, sondern eine möglichst gute und einheitliche Lösung für alle Browser finden. Das fänd ich mal sehr interessant.

ViperDK · 13.05.2003

hab den kram zum teil aus ner beispielpage kopiert. werd das mal teilweise einruecken wo es sinnvoll ist.

killerchicken_inaktiv · 13.05.2003

@viper: es ist generell immer sinnvoll, ne ordentliche formatierung einzuhalten

Wiseguy3 · 13.05.2003

Vor allem hilft es Fehler zu vermeiden.

EnimaN · 14.05.2003

um die abstände genau zu machen (und zwar auch so, dass es der ie versteht) kann man auch ein div (oder noch besser ne tabel) über den ganzen content bereich legen (also width =100%) und den <div> (oder halt den <td> tag) mit nem padding wert versehen:

Code:

div#content {
 padding-left: 200px;
 padding-right: 200px;
}

also ich würde ne table über die ganze seite ziehen:

Code:

<table cols="2" width="100%" border="0" cellspacing="0" cellpadding="0">
 <tr>
  <td>
   Menu
  </td> 
  <td style="padding-left: 200px; padding-right: 200px;">
   Content
  </td>
 </tr>
</table>

ich hab das jetzt net getestet aber müsste funzen...

Wiseguy3 · 14.05.2003

Original geschrieben von EnimaN
unqualifizierter Einwurf

Könntest du dich bitte mit solchen Kommentaren raushalten. Hier gehts darum, Seiten mit CSS zu formatieren, und nicht wieder in HTML Steinzeit zurückzufallen. Ist nicht böse gemeint, aber dein Einwurf passt wirklich nicht.

Wiseguy3 · 14.05.2003

Keine Ahnung, obs dir wirklich hilft, aber ich hab mal n Layout ganz ohne position: absolute gemacht und nur mit float.

Ausserdem hab ich nen Footer eingebaut, der so bei w3c nicht zu finden und auch sehr einfach ist.

Wenn du so ein floating Layout benutzt, kannst du im Grunde deine Probleme mit den horizontalen Anordnungen lösen.
Wie man allerdings die Seite auf 100% Höhe "strecken" kann, wenn nur wenig Text da ist, ist mir bei dieser Art Layout mit purem CSS nicht klar. Zur Not hilft immernoch eine 1px breite Tabelle mit height="80%" oder so, was aber vom Stil her echt hässlich ist.

Ich hab die Comments in den Stylesheets drin gelassen und auch sonst sind noch n paar Spielereien bei dem Beispiel zu finden.

http://www.nolamerz.org/csstryout/

EnimaN · 14.05.2003

hmm ok ich dachte es geht draum praktisch was zu lösen - leider muss man immer wieder in die tabellen strucktur zurückfallen um etwas kompatibel zu lösen - bei deinem o.g. beispiel zeigen (bei mir) sowohl opera als auch mozilla den "bottom" bereich neben dem rest an...

einzig und allein der internet explorer zeigt bei mir diesen bereich unter dem rest, allerdings zentriert, an...

wie ich gerade sah, hast du im bottom-div die angabe "float: right;" stehen - imo müsste es center sein oder? naja solange diese angaben nicht von allen browsern richtig interpretiert werden werde ich wohl bei meinem (zugegebenermasen chaotischen) stil bleiben

ViperDK · 14.05.2003

naja ich lass es mal so wie es jetzt ist und bau mir meine seite auf (kommt ja noch der part wo ich php ausprobieren will

). ist nicht genau das was ich mir gedacht habe aber es schaut zumindest korrekt aus und wer die page nicht von nem andern browser kennt, dem wird's wohl nicht auffallen.

ViperDK · 14.05.2003

hm, hab gerade mal ausgetestet, opera zeigt die page perfekt an, der IE macht das textfeld nur so gross, wie der text drin ist (was optisch akzeptabel ist) aber mozilla haut den titel der hp viel zu tief hin. irgendwem gelaeufig ob das nen normales prob bei mozilla ist(es schaut so naemlich scheisse aus)?

The_Company · 14.05.2003

Original geschrieben von Wiseguy
PPS: Lasst uns bitte in dem Topic nicht über IE schimpfen, sondern eine möglichst gute und einheitliche Lösung für alle Browser finden. Das fänd ich mal sehr interessant.

Soll Netscape 4 auch laufen?

ViperDK · 14.05.2003

manchmal denk ich mir flash proggen muss geil sein. keine 25 browserversionen die man checken muss sondern lediglich ein flash client den der anwender hat oder fuer den er angezeigt bekommt wo er herkommt, aber keine verhunzte seite weil jemand ne unglueckliche browserversion faehrt.

The_Company · 14.05.2003

Flash wird bei mir auf ewig ein weisser Kasten mit hellblauem Symbol bleiben.

Java Applets übrigens auch.

ViperDK · 14.05.2003

also ich find flash durchaus genial. die kleinen games sind zwischendurch immer mal lustig und design/effekt-maessig haengt ne gutgemachte flashpage normales html durchaus ab. ob es fuer ne page geeignet ist, bei der es auf den inhalt ankommt glaub ich selbst nicht so recht, aber design-maessig stell ich mir das schon attraktiv vor. is hier maybe einer der das schonmal gemacht hat?

Wiseguy3 · 14.05.2003

Original geschrieben von EnimaN

wie ich gerade sah, hast du im bottom-div die angabe "float: right;" stehen - imo müsste es center sein oder? naja solange diese angaben nicht von allen browsern richtig interpretiert werden werde ich wohl bei meinem (zugegebenermasen chaotischen) stil bleiben

Es gibt kein float:center (!) und dass das right ist, ist gewollt, weil ich viper zeigen wollte, wie man Dinge am rechten Rand platziert...

Flash stinkt.
Solange Flash nicht die gerade angezeigte Datei auch oben im URL Feld korrekt anzeigt bzw. solange man nicht auf Inhalte in Flash direkt verlinken kann, ist das nichts weiter als eine Spielerei.

Flash ist _definitiv_ nicht geeignet, um in contentbasierten Seiten benutzt zu werden.

EnimaN · 14.05.2003

ok ich muss einsehen, dass ich von CSS nicht so viel ahnung habe - wenn es sich aber weiter verbreitet, ist es auf jeden fall die bessere alternatie zu riesigen table konstrukten - ich werde mir wohl mal ein bisschen was anlesen müssen

Wiseguy3 · 14.05.2003

Was heisst den "weiter verbreitet"? Die Sachen, die wir hier bespreche, kann bereits jeder Browser (ausser Netscape 4).

ViperDK · 14.05.2003

naja, auf meiner seite funktioniert das wie gesagt nicht wirklich so wie es sollte(zumindest unter ie) und mit tabellen waere das problemlos gewesen.

EnimaN · 14.05.2003

ich weiss das CSS 1.0 schon viele browser unterstützen sollten - aber leider haben gerade die etwas älteren browser (die ja immernoch genutzt werden) fehler in der umsetzung / darstellung wodurch ich css nur marginal einsetze - mit verbreitung meine ich halt, dass sich nach und nach die neueren brwoser durchsetzten, und man somit auf den kleinen teil der CSS dann nicht optimal unterstützt verzichten kann...

BiBaButzemann · 15.05.2003

Auszug von ner Kundenmail:

Hallo Christian,
ich bin gerade bei meinem Bruder in Hamburg. Wir
wollten uns Deine neue Programmierung ansehen. Leider
war das nicht möglich, weil sein Brownser Netscape 4.7
ist. Mein Bruder ist profimäßig im Internet unterwegs
und handelt dort sehr viel. Vielleicht muß doch die
Programmierung auch für Netscape 4 gemacht werden. Wer
weis, wer alles diesen Brownser noch hat.
Bis morgen

*********

---------------------------------------------------------------------------------

Meine Antwort:

http://www.intern.de/news/3079.html

Dies ist eine recht aktuelle Statistik von Browsertypen, welche benutzt werden ( Stand Juni 2002 ).

NS 4 kommt dabei gerade auf 1.4%.

Von diesen 1.4% werden meiner Einschätzung nach 10% die Programmierer sein, welche testen, ob ihre Seite auch unter Netscape 4 läuft, 70% Unis, welche die Studenten mit diesem Urgestein an Browser quälen wollen und 20% Privatanwender.

In aktuellen Serverlogdateien, auf welche ich Zugriff habe, taucht Netscape 4 sogar garnicht mehr drin auf.

Um die Seite für NS 4 lauffähig zu machen, wäre quasi fast eine eigenständige Seite von Nöten, wovon ich abraten möchte. ( Es würde fast ne reine Textversion der Seite bei rausspringen und einen Haufen Aufwand mit sich bringen ) Für Win95 entwickelt auch kein Mensch mehr Anwendungen...

Netscape 7 ist bei der Statistik gerade frisch herausgekommen und die die Seite läuft darauf auch ohne Probleme, sowie mit Opera ( neuere Versionen ) .

Ich möchte jetzt zwar Ihren Bruder nicht zu Nahe treten, aber wenn er wirklich "profimässig" im Internet unterwegs ist, dann wäre es an seiner Stelle auch ratsam, sich zumindest die neueste Netscape Version herunterzuladen, anstatt einen mindestens 6 Jahre alten Programm zufriedenzugeben, welches viele Entwickler von ihrer Webseite sogar regelrecht aussperren.

Bis morgen,

Christian Lorenz

Muss dazu sagen, dass dies ein wirklich extrem nerviger Kunde war ( er will jetzt seine Seite in militärgrün haben, da angeblichen die Leute aus den Nahen Osten blau als eine Beleidigung empfinden, liess 1000 Sachen im Nachhinein nochmal ändern, obwohl vorher anders besprochen ) und ich habe ihm von vorneherein gesagt, NS4 kostet extra, wenn die Seite damit laufen soll.

Sas~iN~LoVe · 15.05.2003

wenn hier unsere css pros (und die, die sich dafür halten) schon mal alle in einem thread sind, kann ich ja auch gleich mal ne frage in den raum werfen:

wie kann ich per css ein element immer in der mitte des browserfensters positionieren? ich habs mit % angaben für top und left probiert, aber ohne erfolg :[

BiBaButzemann · 15.05.2003

horizontal: <center>...</center> ( oder align: center )

vertikal gehts nur mit frames ( oder javascript und umrechnen )

Sas~iN~LoVe · 16.05.2003

mit center bzw (text-)align richtet er nur texte aus, aber keine div-objekte... naja nur horizontal is eh gay, werd ich wohl ne tabelle mit 100% höhe und breite nehmen müssen -_-

EnimaN · 16.05.2003

du kannst auch ein äußeres div-tag mit 100% breite und höhe und den angaben text-align:center und vertical-align: middle (oder so ähnlich) machen, in dem du dann dein zweitest div tag mit definierter breite und höhe positionierst und somit zumindest den teil ausgerichtet hast - es gibt best noch elegantere lösungen, aber ich habe keine ahnung inwiefern sie von den versch. brwosern unterstützt werden

Sas~iN~LoVe · 16.05.2003

aber wie kann ich dann andere objekte im inneren div objekt absolut positionieren? laut selfhtml ist die angabe position:absolute; absolut im bezug auf die koordinaten des elternobjektes (also eigentlich relativ :ugly:

), aber das scheint nicht ganz hinzuhauen: er zerreisst mir mein ganzes layout, wenn ich um den ganzen mist drumherum ne 100% grosse tabelle mit ausrichtung zentriert und ein div objekt, auf das sich die left und top angaben der eigentlichen elemente der seite beziehen sollen, platziere... suxx :[

XHTML/CSS webpageanordnung

killerchicken_inaktiv

Guest

killerchicken_inaktiv

Guest

killerchicken_inaktiv

Guest

killerchicken_inaktiv

Guest

Wiseguy3

Guest

killerchicken_inaktiv

Guest

Wiseguy3

Guest

Wiseguy3

Guest

Wiseguy3

Guest

The_Company

Guest

The_Company

Guest

Wiseguy3

Guest

Wiseguy3

Guest

Sas~iN~LoVe

Guest

Sas~iN~LoVe

Guest

Sas~iN~LoVe

Guest