Wo kommt die reset.css hin?

Tease · 18.02.2009

Hallo Leute,

ich habe nun mal meine erste Seite mit Dreamweaver CS4 erstellt, stoße aber immer wieder auf neue Probleme, die mich zur Weißglut treiben.

Erstes ( und vor allem wichtigstes!) Problem:

Jeder Browser stellt die Seite anders da, und ja ich weiß, dass das an den verschiedenen Browser Default-Einstellungen für CSS liegt.
Nun hat mich ein super netter Kollege hier im Forum mit einer reset.css Datei ausgestattet und mittlerweile habe ich auch rausgefunden, dass es da z.B eines von Eric Meyer gibt.
Aber wo muss ich das einbauen in meiner Seite?
So sieht die Seite momentan aus: Christian Ortner
Unter Firefox sieht sie so aus, wie ich mir das in etwa vorstelle, aber die anderen Browser machen ja was sie wollen.

Zweites Problem:

Meine Menu-Leiste "eiert" so komisch rum. Die Untermenü-Einträge rutschen nach unten wenn ich quer mit der Maus drübergehe. Und die Untermenüs "zittern" wie wild, wenn ich mi der Maus zwischen 2 Einträge fahre.
Was muss man denn da ändern?

Hier der Quellcode meiner Index-Seite:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Christian Ortner</title>
<style type="text/css">

</style>
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="wrapper">
<div id="header">
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a href="bio.html">Kurzbiografie</a> </li>
<li><a href="projekte.html" class="MenuBarItemSubmenu">Projekte</a>
<ul>
<li><a href="push.html">Push'n Pull</a></li>
<li><a href="jazz.html">Jazpiano</a></li>
<li><a href="savor.html">Savor</a></li>
<li><a href="bar.html">Barpiano</a></li>
</ul>
</li>
<li><a class="MenuBarItemSubmenu" href="medien.html">Medien</a>
<ul>
<li><a href="videos.html">Videos</a> </li>
<li><a href="fotos.html">Fotos</a></li>
<li><a href="musik.html">Musik</a></li>
</ul>
</li>
<li><a href="termine.html">Termine</a></li>
<li><a href="kontakt.html">Kontakt</a></li>
</ul>
</div>
<div id="mainContent">
<div id="headline">
<h3>Christian Ortner </h3>
</div>
<div id="text">
<p>Willkommen auf der Homepage von Christian Ortner!<br />
Auf dieser Seite finden sie neben interessanten Infos zur Person auch alle aktuellen Termine, Fotos, Mediendownloads und Kontaktdaten. </p>
<p> <img src="Images/CO-Portrait.jpg" alt="Christian Ortner" width="300" height="225" hspace="130" /></p>
</div>
</div>
<div id="footer"> © 2009 by <a href="http://www.media-powerplant.de" title="Link zu media-powerplant.de" target="_blank">media powerplant</a> ? Impressum ? Kontakt</div>
</div>
<script type="text/javascript">

</script>
</body>
</html>

Bin euch für eure Hilfe sehr dankbar!

Tease

michaeld · 18.02.2009

AW: Wo kommt die reset.css hin?

Hallo Tease, wie soll denn diese resset.css aussehen, davon habe ich noch nie etwas gehört. ich setze grundsätzlich in meine externe CSS-Datei
*{ margin: 0; padding: 0 }
Bisher habe ich damit die Browserunterschiede gelöst.

Zu dem "eiern" der Navi kenn ich leider keine Lösung.

Gruss
Michael

Tease · 18.02.2009

AW: Wo kommt die reset.css hin?

Eric Meyer's reset.css ist scheinbar eine der populärsten dieser Sorte und sieht folgendermaßen aus:

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
body {
line-height: 1;
color: black;
background: white;
}
ol, ul {
list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: separate;
border-spacing: 0;
}
caption, th, td {
text-align: left;
font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: "";
}
blockquote, q {
quotes: "" "";
}

Link: Eric's Archived Thoughts: Reset Reloaded

Dies soll scheinbar alle Browser Voreinstellungen deaktivieren.

Zu deinem Tip, Michael:
Ich habe doch eigentlich auch die margins und paddings auf 0, sollte doch dann passen, oder? Das machts aber irgendwie nicht...

sokie · 18.02.2009

AW: Wo kommt die reset.css hin?

ob die reset.css dein Problem löst denke ich nicht.

am einfachsten ist es die CSS Dateien über

Code:

<link rel="stylesheet" type="text/css" href="pfad/zur/datei.css" />

im head bereich zu laden.
das solltest du mit den style Angaben im Dokument auch machen.

ps:
alle margins und paddings und setzt du einfach mit dem universalselektor * auf 0:

Code:

*{
  margin: 0;
  padding: 0;
}

wie michaeld schon schrieb

Tease · 18.02.2009

AW: Wo kommt die reset.css hin?

Okay, vielen Dank.
Aber gebracht hat das leider auch nichts.

Was könnte man da noch machen?

Irgendwie verstehe ich nicht, warum dieses Problem nicht leichter zu beheben ist. Ich mein klar, ich bin Anfänger, aber das ist doch wohl so ungefähr das Wichtigste was ein Webauftritt benötigt und Sicherstellen muss, dass die Seite überall gleich aussieht.

Meine CSS-Datei sieht übrignes folgendermaßen aus:

*{
margin: 0;
padding: 0;
}

@charset "UTF-8";
body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
background: #666666;
margin: 0; /* Es empfiehlt sich, margin (Rand) und padding (Auffüllung) des Body-Elements auf 0 einzustellen, um unterschiedlichen Browser-Standardeinstellungen Rechnung zu tragen. */
padding: 0;
text-align: center; /* Hierdurch wird der Container in IE 5*-Browsern zentriert. Dem Text wird dann im #container-Selektor die Standardausrichtung left (links) zugewiesen. */
color: #000000;
}
.oneColElsCtr #container {
width: 46em;
background: #FFFFFF;
margin: 0 auto; /* Durch automatische Ränder (in Verbindung mit einer Breite) wird die Seite zentriert. */
border: 1px solid #000000;
text-align: left; /* Hierdurch wird die Einstellung text-align: center im Body-Element überschrieben. */
}
.oneColElsCtr #mainContent {
padding: 0 20px; /* padding (Auffüllung) bezeichnet den Innenabstand und margin (Rand) den Außenabstand der div-Box. */
}

jens260181 · 18.02.2009

AW: Wo kommt die reset.css hin?

hast du die reste css wie sokie geschrieben hat eingebunden?
sie muss vor deinen anderen css dateien stehen.

Code:

*{
margin:0;
padding: 0;
}

ist die einfachste variante. allerdings bekommst du bei formularfeldern probleme (dropdown, ...). daher ist die reset css der bessere weg.

hast du noch styles im head geschrieben oder bindest du nur exteren css dateien ein?

Tease · 18.02.2009

AW: Wo kommt die reset.css hin?

Naja, das habe ich leider Gottes etwas blöd angelegt alles. Wie gesagt, ist meine erste Seite und deswegen stell ich mich so an.
Habe die css in jede einzelne HTML Seite reingeschrieben und nicht in eine externe Datei. :rolleyes:

Werd ich bei Zeit mal ändern, aber momentan wär's mir nur wichtig, dass die Seite so schnell wie's geht onlinegeht und dort erst mal einigermaßen gut auf allen Browser ausschaut...

Muss ich dass dann am anfang jeder html seite eintragen?

DesignDude · 18.02.2009

AW: Wo kommt die reset.css hin?

Ja, diesen link-Tag musst du in den head-bereich von jeder html-datei einfügen.

wewin · 18.02.2009

AW: Wo kommt die reset.css hin?

Lohnt sich aber, weil du dann bei Änderungen am Style der Seite auch nur noch in einer Datei Änderungen vornehmen musst und nicht mehr in mehreren.

Tease · 19.02.2009

AW: Wo kommt die reset.css hin?

DesignDude schrieb:
Ja, diesen link-Tag musst du in den head-bereich von jeder html-datei einfügen.

Aber, wo genau? Oder ist das egal, Hauptsache er steht irgendwo drin?

T'schuldigung, aber könnte mir vielleicht jemand anhand meines oben geposteten Code, den "Reset".css-Teil an die richtige Stelle einfügen?

Wär echt toll!

Top_Gun · 19.02.2009

AW: Wo kommt die reset.css hin?

Code:

<title>Christian Ortner</title>
[B]<link rel="stylesheet" type="text/css" href="pfad/zur/datei.css" />[/B]
<style type="text/css">

Tease · 19.02.2009

AW: Wo kommt die reset.css hin?

Ja, super, das sheint zumindest mal eine Auswirkung zu haben. Jetzt ist zwar meine "Firefox" Veersion abgeändert, aber das pass ich halt noch an.

Aber wie bekomme ich denn nun hin, dass meine Menü-Leiste im IE nicht mehr gelb ist? Ich seh bei mir keinen Eintrag, von dem IE die gelbe Farbe herbekommt?