CSS Standardpadding?

Push-Nachrichten von MacTechNews.de

Würden Sie gerne aktuelle Nachrichten aus der Apple-Welt direkt über Push-Nachrichten erhalten?

Forum>Entwickler>CSS Standardpadding?

Pineapps23.12.1221:20

Hallo,
ich habe mich mal gestern und heute an die Arbeit gemacht, ein neues Design für meine Website www.pineapps.de zu machen. So schön, so gut habe jetzt eine 7 Seitige PDF mit dem genauen Design. Schon ein paar Leuten gezeigt, alle fanden es super... ok dann mach ich mich mal an die Arbeit.
Mit dem Hintergedanken, alles schön sauber programmieren zu versuchen, schreibe ich mir eine index.php Datei und gleich auch einen Stylesheet, welchen ich gleich einbinde.
Nun, soll meine Seite für alle Anzeigegeräte eine Breite von 960 Pixeln haben, also denke ich, ok ich mach einfach in den Body einen Div, den ich mit Margin mittig plaziere und dann den Hintergrund mit einem Farbverlauf färbe (habe ich wegen dem Fehler zur besseren Sichtbarkeit aber nochmal herausgenommen).
Nun habe ich aber folgendes Problem: Die Box (rot gefärbt, Breite 960px, Höhe 100%) wird egal was ich mache an allen Seiten um ca 10 Pixel beschnitten. Das ganze könnte man mit negativen Margins wieder ausgleichen, was aber extrem unsauber wäre. Hat jemand eine Ahnung woran das liegen könnte?
Ich teste übrigens auf beta.pineapps.de/index2.php
Die Dateien:
index2.php:

<?php
?>
<html><head>

<!DOCTYPE html>

<link rel='stylesheet' type='text/css' href='code/Style.css'><!- CSS-Stylesheet ->

<body><div id="Inhalt">
<div class="Titel"><img src='images/Grafiken/Logo.png'>Pineapps</div>

</div>
</body></html>

Style.css:

#Inhalt{
height:100%;
position: relative;
    width:960px;
    margin-left: auto;
    margin-right: auto;

    background: red;
}

.Titel{
}
.Titel img{
top:5px;
left:5px;
width:120px;
height:120px;
}

„Click. Boom. Amazing! - Steve Jobs“

Kommentare

shivaZ23.12.1221:33

Ich bin mir nicht sicher, ob ich dich genau verstehe, aber setze mal:

body {margin: 0; padding: 0;}

... dann brauchst du deinen roten Kasten nicht mehr mit negativ-margins durch die Browser zu quälen. Du kannst statt "body" auch einen "*" setzen, dann schaltest du für alles ab

Gruß

„ɔɐɯ ɔɐɯ ɔɐɯ - sometimes I sit and think, and sometimes I just sit“

shivaZ23.12.1221:47

Ich habe gerade deinen wilden CSS-Versuchen etwas live zugeschaut, kennst du diese Seite .. kann vielleicht nix schaden

Viel Erfolg!

„ɔɐɯ ɔɐɯ ɔɐɯ - sometimes I sit and think, and sometimes I just sit“

Pineapps23.12.1222:13

shivaZ

Ich bin mir nicht sicher, ob ich dich genau verstehe, aber setze mal:

body {margin: 0; padding: 0;}

... dann brauchst du deinen roten Kasten nicht mehr mit negativ-margins durch die Browser zu quälen. Du kannst statt "body" auch einen "*" setzen, dann schaltest du für alles ab

Gruß

Habe ich beides gesetzt...

shivaZ

Ich habe gerade deinen wilden CSS-Versuchen etwas live zugeschaut, kennst du diese Seite .. kann vielleicht nix schaden

Viel Erfolg!

so schlimm ist mein CSS jetzt auch wieder nicht
Ich habe es jetzt gelöst... wenn auch nicht sonderlich sauber...
Die neue Testseite heißt jetzt nur noch beta.pineapps.de

„Click. Boom. Amazing! - Steve Jobs“

shivaZ23.12.1222:30

Hallo ...

... zur neuen Seite: der doctype gehört in die erste Zeile des Quelltextes, dein Analytics-Script gehört ans Ende vor /html, deine Liste ist falsch (richtig: 1x ul, dann kommen li's, dann /ul) etc .. ich meine es ja nicht böse, aber ein paar Grundlagen wären schon nicht schlecht. Du darfst nicht auf die Gutmütigkeit einiger Browser vertrauen .. dein Plan ist doch von Anfang an sauber zu arbeiten und das ist gut so, denn spätestens wenn die Inhalte komplexer werden kommst du sonst aus dem Gewurstel nicht mehr raus.

Gruß

„ɔɐɯ ɔɐɯ ɔɐɯ - sometimes I sit and think, and sometimes I just sit“

dom_beta23.12.1222:45

Errors found while checking this document as HTML 4.01 Transitional!

18 Errors, 4 warning(s)!

„...“

Pineapps23.12.1222:46

shivaZ

Mit dem Doctype hast du ja recht, aber der Head ist insgesamt noch ziemlich unbearbeitet (von meiner alten Seite kopiert)
mit dem ul hast du auch recht... habe ich nunmal wieder vergessen...
Das Problem ist, dass ich die Programmiersprachen nie richtig gelernt habe und es mir entweder zeigen hab lassen, oder etwas gegoogelt habe, und leider macht es so ziemlich jeder anders...

„Click. Boom. Amazing! - Steve Jobs“

shivaZ23.12.1223:00

... neben der oben schon verlinkten css4you-Seite, kann ich dir noch selfHTML ans Herz legen . Letztere ist zwar nicht top-aktuell, bietet aber trotzdem prima Grundlagenwissen .. es erscheint zwar vielen etwas mühsam viel zu lesen, weil man ja lieber etwas tut und Ergebnisse sehen will .. aber was nutzt das alles. Fehler, die sich anfangs einschleichen bekommt man später so schnell nicht wieder los. Nur solide Grundlagen machen dich startklar für die Masterclass

Gruß

„ɔɐɯ ɔɐɯ ɔɐɯ - sometimes I sit and think, and sometimes I just sit“

Pineapps23.12.1223:04

dom_beta

Errors found while checking this document as HTML 4.01 Transitional!

18 Errors, 4 warning(s)!

Habe es auf 2 Fehler und 2 Warnungen reduziert... die Frage ist nur wie lange das anhält...

„Click. Boom. Amazing! - Steve Jobs“

Pineapps23.12.1223:05

shivaZ

Danke, Selfhtml nutze ich oft und gerne...

„Click. Boom. Amazing! - Steve Jobs“

dom_beta24.12.1201:51

Der Validator bricht aber ab.

Er sagt:

Line 1, Column 22: cannot continue because of previous errors

„...“

shivaZ24.12.1209:00

Moin ihr wilden Webber ...

... der Validator sagt euch ganz klar, was falsch ist bzw. was fehlt:

Zum einen <!doctype html> genügt, das PUBLIC hat da nix verloren. Zum anderen vermisst er die Zeichenkodierung, die benutzt werden soll. Dafür innerhalb vom head ganz oben bspw. die Zeile <meta charset="utf-8" /> eintragen.

So .. und nun schöne Feiertage, vielleicht bringt das Christkind ja ein schönes HTML-Buch

Gruß

„ɔɐɯ ɔɐɯ ɔɐɯ - sometimes I sit and think, and sometimes I just sit“

dom_beta28.12.1222:17

Und, hast du die HTML-Fehler ausgebügelt?

„...“

Pineapps28.12.1222:44

dom_beta

Und, hast du die HTML-Fehler ausgebügelt?

Ich muss ehrlich sagen, dass ich vor gerade einmal einer Woche die Idee mit der Website-Umgestaltung hatte und immer wieder fleißig am programmieren bin und auch immer wieder Fehler finde, welche ich dann auch versuche irgendwie zu lösen. Ich habe mir vorgenommen die ganzen Feineinstellungen meta Infos und so erst am Ende richtig zu machen, wenn ich dann auch nochmal versuche den ganzen Code etwas kompakter und übersichtlicher zu strukturieren.
Aber wenn du mir einen Konkreten Fehler hast, kann ich diesen, soweit möglich, auch gerne beheben

„Click. Boom. Amazing! - Steve Jobs“

dom_beta02.01.1322:11

Ich glaube, jetzt passt es.

This document was successfully checked as HTML5!

„...“

_mäuschen02.01.1322:28

So. Und jetzt noch die Rechtschreibe-Fehler innerhalb der Texte korrigieren.

strathegische Stürmen
eleminieren
einstellung
onlinen
gemeinsamme
Insgesammt
Mommentan

et cetera et cetera et cetera

Pineapps05.01.1316:44

_mäuschen

So. Und jetzt noch die Rechtschreibe-Fehler innerhalb der Texte korrigieren.

strathegische Stürmen
eleminieren
einstellung
onlinen
gemeinsamme
Insgesammt
Mommentan

et cetera et cetera et cetera

danke, du hast bestimmt recht, ich werde mich bald mal darum kümmern.
Da Problem ist, das einige Texte schon ziemlich alt sind und ich diese z.T. sowieso aussortieren oder neu schreibe werde Anschließend kann ich mich dann um die Fehler kümmern

„Click. Boom. Amazing! - Steve Jobs“

_mäuschen05.01.1317:01

Pineapps

Anschließend kann ich mich dann um die Fehler kümmern

Pineapps05.01.1317:05

_mäuschen

Bis jetzt steht noch nichtmal ein Admin Bereich, bzw. nur über die alte Seite, sonst könnte ich die Fehler auch kurz beheben

„Click. Boom. Amazing! - Steve Jobs“

_mäuschen05.01.1317:12

to dot the i's and cross the t's

Kommentieren

Diese Diskussion ist bereits mehr als 3 Monate alt und kann daher nicht mehr kommentiert werden.

Apple aktualisiert Zubehör: Magic Mouse, Magic ...

Facebook & Instagram: Zuckerberg kündigt Aus de...

Mac OS X: 25 Jahre Aqua, 25 Jahre Dock

Apple Intelligence: Weiterhin Nonsens-Zusammenf...

Das MacBook Pro M4

Interview: Größte private Mac-Sammlung

Mac mini: Kontroverse Position des Einschalters...

Übersicht: Lieferzeiten für die neuen Macs