• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Einfaches Problem CSS/HTML

S

Sinthu

Neues Mitglied
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:

<!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">
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type" />
<title>Formular</title>
<link type="text/css" href="style.css" rel="stylesheet" />
</head>

<body>

<h1> Formular<h1>
<div class="box1">

</body>

</html>


CSS:

body

{background-color: '#0000FF'; }

box1

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

}



Danke
 
- Klassen spricht man im CSS mit einem vorangestellten Punkt an, also: ".box1"
- Tippfehler bei der Border-Definition: solid statt sold
- <h1> wird nicht geschlossen, sondern wieder aufgemacht
- <div class="box1"> wird nicht geschlossen
 
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;

}



 
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;
}
 
margin:auto;
width:1100px;
height: 600px;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
border: 1px solid;


 
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.
 
Sinthu schrieb:
ok, und die lösung wäre ? :)
Zum Vergrößern anklicken....

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/
 
Tronjer schrieb:
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.
Zum Vergrößern anklicken....

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 :)
 
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.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben