zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Layout: Tabelle -> CSS | ohne Schönheitsfehler?

Antwort
 
LinkBack Themen-Optionen Ansicht
  #11 (permalink)  
Alt 03.08.2006, 12:12
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 11.01.2005
Ort: Berlin
Beiträge: 2.152
mazzo wird schon bald berühmt werden
Standard

Zitat:
Zitat von Knickedi
Der IE addiert ja padding zu width...
das entspricht ja auch dem Boxmodell.
Mit Zitat antworten
Sponsored Links
  #12 (permalink)  
Alt 03.08.2006, 12:20
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.779
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Zitat:
Zitat von Knickedi
Wie soll ich das dann regeln? Der IE addiert ja padding zu width...
Im Standards-Mode ja. Das soll er auch!
Informier dich bitte über das Box-Model und den Box-Model-Bug des IE 5 (und IE6 im Quirks-Modus).
Du kannst deine gewünschten Abstände mit den Elementen regeln, die dann den Inhalt bekommen. Zusätzliche divs brauchst du (fast) nie. Und schon gar nicht prophylaktisch überall.
Zudem spielt das ganze keine Rolle, wenn keine Breiten-/Höhenangaben mit padding/border beim selben Element vorkommen.
Außerdem gibt es auch noch Box-Modell-Hacks oder Conditional Comments.

Zitat:
Ist es ratsam <!--[if IE]> zu benutzen?
Wenn es denn nötig ist, ja.

edit: auch mit float (nicht flaot!) und clear solltest du nicht unkontrolliert um dich werfen. Nimm das bitte überall raus, wo nicht wirklich etwas nebeneinander stehen soll.

Geändert von fricca (03.08.2006 um 12:23 Uhr)
Mit Zitat antworten
Sponsored Links
  #13 (permalink)  
Alt 03.08.2006, 14:20
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 02.08.2006
Beiträge: 26
Knickedi befindet sich auf einem aufstrebenden Ast
Standard

Damit ich mir nicht wieder etwas Falsches beibringe:
Ist die Taktik mit 2 divs in diesem Beispiel die Richtige oder sollte ich da anders herangehen?

www.knickedi.m00.de/beispiele/box-model.html

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
	
<html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">

  <head>
    <title>IE-Box-Model</title>
    <meta http-equiv="content-type" content="charset=ISO-8859-1" />
    <style type="text/css">
    <!--
      body{
          margin: 0;
          padding: 0;
          width: 100%;
          height: 100%;
      }
      p{
          font-weight: bold; 
          display: inline;
      }
      #vergleichscontainer{
          margin: 20px auto;
          width: 50%;
          padding: 10px 0;
          text-align: center;
          background-color: #00cc00;
      }
      #aussen{
          margin: 10px auto;
          width: 50%;
      }
      #innen{
          border: 20px solid #cc0000;
          padding: 20px;
      }
    //-->
    </style>
  </head>
  
  <body>
    <div id="vergleichscontainer">
      <p>Dieser Kontainer liegt in der Mitte und hat die Weite 50%</p>
    </div>
    <div id="aussen">
      <div id="innen">
        <p>DER INHALT</p>
      </div>
    <div>
  </body>
  
</html>
EDIT: hättest du vielleicht einen Artikel in dem ich erfahre, wie ich dem IE min-width "beibringe"?


MfG Knickedi

Geändert von Knickedi (03.08.2006 um 14:31 Uhr)
Mit Zitat antworten
  #14 (permalink)  
Alt 03.08.2006, 16:04
Benutzerbild von kadees
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 22.06.2004
Ort: in Baden (nicht Schwaben)
Beiträge: 792
kadees wird schon bald berühmt werden
Standard

damit das ganze auch im IE 5.x zentriert angezeigt wird, solltest du noch folgendes ergänzen:
Code:
body{
          margin: 0;
          padding: 0;
          width: 100%;
          height: 100%;
          text-align: center; /* zentriert im IE 5.x */
}
und
Code:
#innen{
          border: 20px solid #cc0000;
          padding: 20px;
          text-align: left;  /* hebt Zentrierung aus "body" wieder auf */
}
die IE-Versionen bis 5.x kennen "margin: XXpx auto;" nicht und richten daher automatisch links aus
__________________
Gruss Dieter

Vegetarier essen meinem Essen das Essen weg.
Und unsere Norweger sind reine Karnivoren.

selfhtml | css4you | jendryschik | styleworks | Webdesign mit XHTML und CSS

Geändert von kadees (03.08.2006 um 16:09 Uhr)
Mit Zitat antworten
  #15 (permalink)  
Alt 03.08.2006, 16:18
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 02.08.2006
Beiträge: 26
Knickedi befindet sich auf einem aufstrebenden Ast
Standard

Jep danke... das kannte ich bereits und war erstaunt, dass es bei mir ging. Ich habe zwar v6, aber sonst wollte er diese ergänzung auch haben! Hab ise dann einfach weggelassen gehabt...

Danke dir
MfG knickedi
Mit Zitat antworten
  #16 (permalink)  
Alt 03.08.2006, 17:30
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.779
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Zitat:
Zitat von Knickedi
Ist die Taktik mit 2 divs in diesem Beispiel die Richtige oder sollte ich da anders herangehen?
Dazu gibt es keine Pauschalaussage. Wenn du ein zentriertes Layout willst, dann setz ein div-Element um alles herum und gib ihm eine Breite. Die darin liegenden weiteren Blockelemente brauchen keine Breitenangabe mehr und das Problem stellt sich somit nicht. Du brauchst so gut wie nie zusätzliche Elemente für sowas. Bitte beiß dich daran jetzt nicht fest.
Zitat:
hättest du vielleicht einen Artikel in dem ich erfahre, wie ich dem IE min-width beibringe?
Das geht mit IE-eigenen Expressions oder mit einer von Stu Nicholls scriptlosen Varianten (damit das funktioniert sind diesmal wirklich zusätzliche Verschachtelungen nötig).
Ein ausführlicher Artikel zu Expressions: http://www.gunlaug.no/contents/wd_additions_14.html

Ich bin trotzdem der Meinung, dass du dir erst die Grundlagen erarbeiten solltest, bevor du dich darauf stürzt.
Zitat:
[zentrieren im IE] das kannte ich bereits und war erstaunt, dass es bei mir ging.
Der IE 6 kennt margin:0 auto nur im Quirks-Modus nicht, im Standard-Modus hingegen schon.
Lies bitte mal: http://www.carsten-protsch.de/zwisch...ype/index.html

Geändert von fricca (03.08.2006 um 17:34 Uhr)
Mit Zitat antworten
  #17 (permalink)  
Alt 03.08.2006, 20:00
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 02.08.2006
Beiträge: 26
Knickedi befindet sich auf einem aufstrebenden Ast
Standard

Was verstehst du jetzt unter Grundlagen:
Verhalten von flaot und clear?

Ich hab jetzt ein paar Seiten durchgelesen, aber ein paar Sachen sind mir immer noch unklar:
Wie kriege ich zwei Spalten in dieser Form hin: Die Linke mit fester Breite und die Rechte füllt den Rest aus... Das ist doch das mit dem border-left und dem negativen margin. Wie ich die beiden Spalten unabhängig vom Inhalt dynamisch gleich lang bekomme, weiß ich immer noch nicht.
Außerdem habe ich bis jetzt keinen Artikel zu negativen Angaben gesehen, außer Footer und das war etwas anderes.

EDIT: Ich sehe ein, dass ich penetrant bin! Ich werde mir jetzt einfach mal die Zeit nehmen und die Seiten, die du mir gegeben hast, lesen!
Ich will alles auf einmal und das ist mein Fehler. Ich hoffe, dass ich dir nicht zu sehr auf den Geist gegangen bin!
(Werde mich vorerst zusammenreißen und keine doofen Fragen stellen!)

Ich danke dir vielmals für deine Zeit und Hilfe
Nicht überall wird man so nett behandelt... DICKES LOB!

MfG Knickedi

Geändert von Knickedi (03.08.2006 um 21:31 Uhr)
Mit Zitat antworten
  #18 (permalink)  
Alt 04.08.2006, 12:37
Benutzer
neuer user
 
Registriert seit: 19.07.2006
Ort: Köln
Beiträge: 72
prosac257 befindet sich auf einem aufstrebenden Ast
Standard

Eine einfache Lösung ein zweispaltiges, css-basiertes Layout hinzubekommen ist doch das mit float.
Im xHTML-Grundgerüst zwei divs (Fragean die anderen: geht hier auch eine Definitionsliste?) mit der entsprechenden Klasse oder ID. Den div der das float beinhaltet als erstes notieren.
Im Stylesheet dem ersten div das float und eine eine gewünschte Breite (soll in CSS2.1 nicht mehr nötig sein) zuweisen. Damit sich der zweite div nicht mit dem ersten überlappt hier noch den linken bzw. rechten Abstand zum ersten div bestimmen (mind. margin-left/right div2 = width im div1).
Willst noch einen Footer drunter setzen, dann div3 im xHTML-Grundgerüst nach div2 notieren und im CSS für diesen dann clear:both/left/right (je nachdem was man vorher notiert hat) angeben.
That's it.

Kann man aber auch recht häufig auf den verschiedensten Seiten nachlesen.
ich kann hier auf jedenfall neben diesem Forum noch http://jendryschik.de und http://de.selfhtml.org empfehlen.
Dort gibts viel zu lesen, aber alles recht einfach zu verstehen und nachvollziehbar.
Ich denke mal, dass einige deiner Unverständlichkeiten danach verschwunden sind. Viel Spaß damit.
Mit Zitat antworten
  #19 (permalink)  
Alt 05.08.2006, 01:20
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 02.08.2006
Beiträge: 26
Knickedi befindet sich auf einem aufstrebenden Ast
Standard

Jetzt habe ich es galub ich tatsächlich geschafft und wollte euch mal fragen, ob das so in Ordnung geht oder immer noch sehr grobe Fehler drin sind.
Es scheint so zu funktionieren.
Noch nichts mit Innenabständen und das drumherum. Ist eben nur das Grundgerüst...

http://www.knickedi.m00.de/beispiele...olumn-css.html

(Ich wollte mir das Thema "Easy Cleaning ohne zusätzliches Murkup" anschauen, aber die seite ist gerade offline)

MfG Knickedi
Mit Zitat antworten
Sponsored Links
  #20 (permalink)  
Alt 05.08.2006, 01:47
Benutzer
neuer user
 
Registriert seit: 19.07.2006
Ort: Köln
Beiträge: 72
prosac257 befindet sich auf einem aufstrebenden Ast
Standard

Na, das schaut ja schonmal ganz gut aus!

Wenn ich das richtig erkenne, dient div "faux-column" einzig und allein dem min-width. Oder? Falls ja, dann kannst den auch weglassen.
Du hast schon im div "content" mit min-width:550px die minimale Breite realisiert. Addierst dazu noch die fixe Breite des "navigation"-div, dann hast auch schon deine 800px.
Das float in "navigation" hebst ja im #footer schon auf.
--> Für was ist der div "clearfix" ?

Bis auf, aus meiner Sicht, zweimal doppelt gemoppelt, ist alles schonmal recht gut geworden!


Funktioniert das so mit den Conditional Clauses?
Ich hab mich mit dem Thema noch recht wenig auseinander gesetzt. Kann man die auch so verwenden?
An deiner Stelle würd ich allerdings vorsichtig sein mit [if IE]. Der IE7 unterstützt endlich max-/min-width! Somit könntest in absehbarer Zeit Probleme kriegen.
Wenn du deine Seite allerdings optimal gestaltest, dann brauchst das min-width eigentlich auch gar nicht, da sich sowieso alles schön der Fenstergröße anpasst
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Frage zu CSS Layout ignore CSS 1 07.05.2007 17:02
Mein erstes CSS Layout Sonriente CSS 0 03.04.2007 01:01
CSS layout was 'mit geht' Iceman* CSS 2 30.12.2005 08:36
includes bei css layout dan CSS 2 10.03.2004 18:21
Tabelle mit CSS zentrieren to.ni CSS 8 27.02.2004 10:33


Alle Zeitangaben in WEZ +2. Es ist jetzt 11:43 Uhr.