Einfaches Problem CSS/HTML

html.de-Forum HTML, XHTML & CSS
1

Hallo,
langsam bin ich am verzweifeln, ich erstelle einfache Seiten via XHTML und CSS.

Doch manchmal klappt das mit dem verlinken auf CSS und manchmal nicht, ich weiss echt nicht was ich falsch mache.

Ich zeig euch mal hier am besten den Code, das einzige was ich will das es die Codes von CSS übernimmt aber nichts geschieht, habe jetz ein border gemacht damit ich sehe welche Grösse ect… aber leider nichts:

HTML:

Formular

Formular

CSS:

body

{background-color: ‚#0000FF‘; }

box1

{
width: 500px;
height: 500px;
border: 1px sold;

}

Danke

2
  • Klassen spricht man im CSS mit einem vorangestellten Punkt an, also: „.box1“
  • Tippfehler bei der Border-Definition: solid statt sold

  • wird nicht geschlossen, sondern wieder aufgemacht

  • wird nicht geschlossen
3

wow so viele fehler danke hatt jetz geklappt!!

4

noch eine kurze frage wieso wird die mittelere tabelle nicht zentriert?

{

width:1100px;
height: 600px;
border: 1px solid;
margin-right: auto;
margin-left: auto;
margin-top: auto;
margin-bottom: auto;

}

http://abload.de/thumb/unbenanntibfa4.png

5

Wenn du es mit margin: auto; machen willst, geht es so:

[CODE].deineKlasse {
margin: auto;
width: 1100px;
height: 600px;

position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;

}[/CODE]

6

warum denn jetzt eine absolute Positionierung?

7

margin:auto;
width:1100px;
height: 600px;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
border: 1px solid;

http://abload.de/thumb/unbenann2tllsk9.png

8

Weil er es zentriert haben wollte. Andere Möglichkeiten mit negativen margins usw. kommen mir nicht in den Quelltext :slight_smile:

Aber ich lass mich gerne belehren :wink:

9

position: absolute ist die Quelle aller Probleme (siehe oben).

Eine einfache Webseite kommt komplett ohne das Attribut position aus und bei einer komplexeren, auf Bootstrap basierenden, ist es im mitgelieferten CSS bereits vorgegeben. Ich weiß nicht mehr, wann ich dieses Wort das letzte Mal geschrieben habe.

10

ok, und die lösung wäre ? :slight_smile:

11

Die Lösung ist jedenfalls nicht, dass Andere für dich hier fertigen copy & paste Code posten, der nicht funktioniert, weil dir die notwendigen Grundlagenkenntnisse fehlen, um ihn deinen Anforderungen entsprechend anzupassen.

Was das Thema horizontale und vertikale Zentrierung betrifft: Wenn du cutting-edge sein willst und auf ältere Browser verzichten kannst, nimm display: flex. Ansonsten finden sich hier einige herkömmliche Techniken - mit und ohne position: absolute.

http://coding.smashingmagazine.com/2013/08/09/absolute-horizontal-vertical-centering-css/

12

Interessant. Wusste nicht dass margin: auto in verbindung mit einer absoluten Position möglich ist! Danke dafür :slight_smile:

13

Man muss natürlich wissen wie. Bei größeren Projekten setze ich es hier und da mal ein.
Layout-Elemente sollte man damit natürlich nicht ausrichten.

Aber dein Link zeigt ja auch schöne alternativen :slight_smile:

14

Das Attribut position hat natürlich seine Berechtigung, aber man sollte vor dem Einsatz schon um die damit einhergehenden Probleme (herausheben von Elementen aus dem Textfluss) wissen. In der Regel wird es allerdings gerade von Einsteigern dazu verwendet, um Container im Viewport irgendwie passend zu machen. Das war bereits problematisch, als Responsivität noch als Fremdwort galt und man unter Crossbrowser-Kompatibilität die halbwegs korrekte Darstellung im IE 7/8 verstand.

Heutzutage gehen 50% der User mit mobile Devices ins Netz, was zur Folge hat, dass eine Seite unter iOS, WP8 und Android mit allen dort gängigen Browsern funktionieren muss. Guter Stil bedeutet hier, 90% mit dem Standard-Layout abzudecken und höchstens 10% der Zeit in plattformspezifische Anpassung und Media Queries zu stecken. Schlechter Stil ist es, 90% der Arbeitszeit in die Nachbearbeitung investieren zu müssen, um die Positionen der Elemente auf kleinen Displays mit unterschiedlich hohen Auflösungen zu platzieren.