zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Anfänger hat ein paar Probleme

Antwort
 
LinkBack Themen-Optionen Ansicht
  #21 (permalink)  
Alt 14.08.2011, 20:09
Standardkatze
XHTMLforum-Kenner
 
Registriert seit: 06.02.2007
Beiträge: 1.820
gato ist einfach richtig nettgato ist einfach richtig nettgato ist einfach richtig nettgato ist einfach richtig nettgato ist einfach richtig nett
Standard

Zitat:
Zitat von fricca Beitrag anzeigen
Doch, ist es. Ein relativ positionierter (breitenbeschränkter) Body lässt kein abs. pos. Element mehr zu, das den Viewport als Containing Block hat.
Das ist definitiv eine Limitierung der Möglichkeiten von CSS.
Stimmt, ich hatte nicht bedacht, dass du dich genau auf diesen Fall beziehst.
Davon abgesehen sehe ich nicht viele Schwierigkeiten.
Mit Zitat antworten
Sponsored Links
  #22 (permalink)  
Alt 14.08.2011, 20:26
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 13.08.2011
Beiträge: 29
kletterida befindet sich auf einem aufstrebenden Ast
Standard

So ich habe mal am Code gebastelt:

Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Startseite - Moba-Technik.de</title>
<style type="text/css">

  body {
    margin:0px auto;
    width: 1000px;
    font: normal 14pt Arial, Verdana, Tahoma;
    color: black; background-color: #585858;
  }
  
  div#header {
    margin: 0;
  }
  
  div#menu {
    background-color: #B8B8B8;
    height: 43px;
    margin: 0;
  }

  div#inhalt {
    background-color: #E8E8E8;
    margin: 0;
  }
  
  div#footer {
    background-color: #B8B8B8;
    margin: 0;
  }
  
  ul#Navigation {
    margin: 0; padding: 0;
    text-align: center;
  }

  ul#Navigation li {
    list-style: none;
    float: left; 
    position: relative;
    margin: 0.4em; padding: 0;
  }

  ul#Navigation li ul {
    margin: 0; padding: 0;
    position: absolute;
    top: 1.6em; left: -0.4em;
    display: none;
  }
  ul#Navigation li:hover ul {
    display: block; 
    background-color: #B8B8B8;
  }
  
  ul#Navigation li ul li {
    float: none;
    display: block;
  }
  
  ul#Navigation a, ul#Navigation span {
    display: block;
    width: 120px;
    padding: 2px;
    text-decoration: none;
    color: black; background-color: #B8B8B8;
    border: 1px solid black;
    border-color: #B8B8B8;
  }

  ul#Navigation a:hover, ul#Navigation span, li a#aktuell {
    border: 1px solid black;
    border-color: white;
    border-left-color: black; border-top-color: black;
    color: black; background-color: #B8B8B8;
  }
  
  a#aktuell { 
    color: black; background-color: #B8B8B8;
  }
  
</style>
<body>
<div id="header"><img src="logo.png" alt="Logo"></div>
<div id="menu"><ul id="Navigation">
    <li><a id="aktuell" href="index.html">Startseite</a></li>
    <li><a href="aktuelles.html">Aktuelles</a></li>
    <li><a href="#Artikel">Artikel</a>
      <ul>
        <li><a style="font-size: 10pt" href="hausbeleuchtung_richtig.html">Hausbeleuchtung, aber richtig</a></li>
        <li><a style="font-size: 10pt" href="beste_roco_zentrale.html">Das Beste aus Ihrer Roco-Zentrale herausholen</a></li>  
        <li><a style="font-size: 10pt" href="anlagenverdrahtung_hilfreiche_kabel.html">Alagenverdrahrung und hilfreiche Kabel</a></li>
        <li><a style="font-size: 10pt" href="ausgestaltung_gleise.html">Ausgestaltung ihrer Gleise</a></li>
        <li><a style="font-size: 10pt" href="hilfreiches_zubehoer.html">Hilfreiches Zubeh&ouml;r</a></li>
        <li><a style="font-size: 10pt" href="individuelle_innenbeleuchtung.html">Individuelle Innenbeleuchtung</a></li>
        <li><a style="font-size: 10pt" href="sonderposten_einzelstuecke.html">Sonderposten und Einzelst&uuml;cke</a></li>
      </ul>
    </li>
    <li><a href="bestellen.html">Bestellen</a></li>
    <li><a href="#Versand">Versand</a>
      <ul>
        <li><a style="font-size: 12pt" href="versandkosten.html">Versandkosten</a></li>
        <li><a style="font-size: 12pt" href="agb.html">AGB</a></li>
      </ul>
    </li>
    <li><a href="ueber_uns.html">&Uuml;ber uns</a></li>
    <li><a href="impressum.html">Impressum</a></li>
  </ul></div>
  <div id="inhalt">
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
    <p style="white-space: pre; color: rgb(7, 93, 167); text-align: center;">
      <span style="font-size: 32pt;">Moba-Technik.de - Feine L&ouml;sungen </span>
      <span style="font-size: 32pt;">f&uuml;r den anspruchsvollen Modellbahner</span> 
      <br>
      <br>
      <br>
      <span style="font-size: 20pt;">Digitaltechnik, individuelle Beleuchtung</span> 
      <span style="font-size: 20pt;">von Waggons und H&auml;usern in Kleinserie</span>
      <br>
      <br>
      <br>
      <br>
    </p>
    </div>
<div id="footer">
<p style="text-align: center; white-space: pre; padding: 10px"><span style="font-size: 15pt">Copyright &copy; 2011 Oliver M&uuml;hlenbein</span>
<span style="font-size: 9pt">Website-Layout by Denis Heinen</span>
</p>
</div>
</body>
</html>
Leider bleibt zwischen dem Header (Logo) und dem Menü & zwischen dem Inhalt und Folter Platz dazwischen...
Mit Zitat antworten
Sponsored Links
  #23 (permalink)  
Alt 14.08.2011, 20:32
Standardkatze
XHTMLforum-Kenner
 
Registriert seit: 06.02.2007
Beiträge: 1.820
gato ist einfach richtig nettgato ist einfach richtig nettgato ist einfach richtig nettgato ist einfach richtig nettgato ist einfach richtig nett
Standard

Zitat:
Zitat von kletterida Beitrag anzeigen
Leider bleibt zwischen dem Header (Logo) und dem Menü & zwischen dem Inhalt und Folter Platz dazwischen...
Das liegt an den zusammenfallenden Außenabständen der div- und der p-Elemente.

Das ist normales Verhalten von Blockelementen. Dem kannst du z.B. entgegenwirken wenn du den div-Elementen einen Rahmen oder padding gibst (dann kannst du dir auch das padding in den p-Elementen sparen ).
__________________
Über Internet Explorer 8:
Noch bis 8. April 2014 wird der Internet Explorer 6 mit Sicherheitsupdates versorgt.
Bereits jetzt kann dieser Browser aber vollständig durch den IE8 ersetzt werden. Ältere Betriebssysteme und Browserversionen werden von Microsoft nicht mehr unterstützt.
Auch Programme, die den IE7 benötigen, sind kein Argument gegen IE8, da dieser über entsprechende Kompatibilitätsschichten verfügt.
Ab sofort gilt daher der Internet Explorer 8 als vorausgesetzer Mindeststandard.
Mit Zitat antworten
  #24 (permalink)  
Alt 14.08.2011, 20:32
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.775
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

Der Link ist nicht aktualisiert.
Abstände: Lies bitte in den [FAQ]FAQ[/FAQ] zum CSS-Prolog.
Außerdem: DOCTYPE-Switch: Unerklärliche Lücken zwischen Elementen

pt ist eine ungeeignete Einheit für Bildschirmdarstellung. Oder würdest du auf die Idee kommen, etwas in Millimeter anzugeben?
Nimm em- oder Prozentwerte.

Allgemein: Lies dich doch erstmal grundsätzlich ein, sonst fischst du weiter im Trüben. Empfehlung: LB Teil 1 (von 2009) kostenlos online lesen - Little Boxes - Webseiten gestalten mit HTML und CSS (von Peter Müller)
Mit Zitat antworten
  #25 (permalink)  
Alt 16.08.2011, 15:34
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 13.08.2011
Beiträge: 29
kletterida befindet sich auf einem aufstrebenden Ast
Standard

So habe mal einen kompletten neuen Code geschrieben:

Code:
<!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" lang="de" xml:lang="de"> 
<head> 
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Startseite - Moba-technik.de</title>
  
<style type="text/css">
body { background-color: #585858 }
div#wrapper { width: 1000px; margin: auto; font: normal 14pt Arial, Verdana, Tahoma; color: black; }
div#menu { background-color: #B8B8B8; height: 43px; margin: 0 }
ul#Navigation { margin: 0; padding: 0; text-align: center }
ul#Navigation li { list-style: none; float: left; position: relative; margin: 0.4em; padding: 0 }
ul#Navigation li ul { margin: 0; padding: 0; position: absolute; top: 1.6em; left: -0.4em; display: none } 
ul#Navigation li:hover ul { display: block; background-color: #B8B8B8 }
ul#Navigation li ul li { float: none; display: block }
ul#Navigation a, ul#Navigation span { display: block; width: 120px; padding: 2px; text-decoration: none; color: black; background-color: #B8B8B8; border: 1px solid black; border-color: #B8B8B8 }
ul#Navigation a:hover, ul#Navigation span, li a#aktuell { border: 1px solid black; border-color: white; border-left-color: black; border-top-color: black; color: black; background-color: #B8B8B8 }
a#aktuell { color: black; background-color: #B8B8B8;}
div#inhalt { background-color: #E8E8E8; white-space: pre; color: #075DA7 ; text-align: center; }
div#footer { background-color: #B8B8B8; text-align: center; white-space: pre }
</style>

</head>

<body id="startseite">
<div id="wrapper">

<div id="header"> 
<img src="logo.png" alt="Logo">
</div>

<div id="menu"> 
 <ul id="Navigation">
    <li><a id="aktuell" href="index.html">Startseite</a></li>
    <li><a href="aktuelles.html">Aktuelles</a></li>
    <li><a href="#Artikel">Artikel</a>
      <ul>
        <li><a style="font-size: 10pt" href="hausbeleuchtung_richtig.html">Hausbeleuchtung, aber richtig</a></li>
        <li><a style="font-size: 10pt" href="beste_roco_zentrale.html">Das Beste aus Ihrer Roco-Zentrale herausholen</a></li>  
        <li><a style="font-size: 10pt" href="anlagenverdrahtung_hilfreiche_kabel.html">Alagenverdrahrung und hilfreiche Kabel</a></li>
        <li><a style="font-size: 10pt" href="ausgestaltung_gleise.html">Ausgestaltung ihrer Gleise</a></li>
        <li><a style="font-size: 10pt" href="hilfreiches_zubehoer.html">Hilfreiches Zubeh&ouml;r</a></li>
        <li><a style="font-size: 10pt" href="individuelle_innenbeleuchtung.html">Individuelle Innenbeleuchtung</a></li>
        <li><a style="font-size: 10pt" href="sonderposten_einzelstuecke.html">Sonderposten und Einzelst&uuml;cke</a></li>
      </ul>
    </li>
    <li><a href="bestellen.html">Bestellen</a></li>
    <li><a href="#Versand">Versand</a>
      <ul>
        <li><a style="font-size: 12pt" href="versandkosten.html">Versandkosten</a></li>
        <li><a style="font-size: 12pt" href="agb.html">AGB</a></li>
      </ul>
    </li>
    <li><a href="ueber_uns.html">&Uuml;ber uns</a></li>
    <li><a href="impressum.html">Impressum</a></li>
  </ul>
</div>

<div id="inhalt"> 
<br>
<br>
<br>
<br>
<br>
<br>
<span style="font-size: 32pt;">Moba-Technik.de - Feine Lösungen
für den anspruchsvollen Modellbahner</span> 
<br>
<br>
<br>
<span style="font-size: 20pt;">Digitaltechnik, individuelle Beleuchtung
von Waggons und Häusern in Kleinserie</span>
<br>
<br>
<br>
<br>
<br>
<br>
</div>
<div id="footer"> 
<span style="font-size: 15pt">Copyright &copy; 2011 Oliver M&uuml;hlenbein</span>
<span style="font-size: 9pt">Website-Layout by Denis Heinen</span></p>
</div>

</div>
</body>
</html>
Und keine feste Höhe benutzt
Mit Zitat antworten
  #26 (permalink)  
Alt 16.08.2011, 16:32
body.ie {display: grotte}
XHTMLforum-Mitglied
 
Registriert seit: 09.01.2011
Beiträge: 841
take_a_7 sorgt für eine eindrucksvolle Atmosphäretake_a_7 sorgt für eine eindrucksvolle Atmosphäre
Standard

Moin,

ein paar Anmerkungen:
  • pt ist keine geeignete Maßeinheit für das Web, nimm lieber px (Pixel), em oder %.
  • Du gibtst als Charset utf-8 an, dann musst du soetwas wie &ouml; nicht benutzen, sondern kannst einfach ö schreiben (vorausgesetzt die Datei ist auch in UTF-8 kodiert).
  • Das CSS solltest du komplett auslagern, damit es nicht bei jeden Seitenaufruf mitgeladen werden muss
  • style-Attribute solltest du komplett rauslassen. Wie du siehst, hast du bei allen Menüpunkten das gleiche Stehen, das kannst du umgehen, indem du mit dem Nachfahrenselektor und/oder mit Klassen arbeitest.
  • <br> sollte nicht als Abstandshalter missbraucht werden, nimm dafür lieber margin/padding
  • Wenn du mit XHTML arbeitest, musst du <br /> verwenden, <br> ist HTML (ohne X)
  • Das Logo sollte in eine <h1> und gegebenenfalls mit Image-Replacement eingebunden werden (kommt drauf an, ob auf dem Logo nur Schrift zu sehen ist). EDIT: Ach, die Seite ist ja auch Online... Dieses Logo würde ich per Image-Replacement umsetzen
  • Auf jeden Fall sollte das Logo einen besseren Alternativtext bekommen
  • Du solltest dir überlegen, ob es für die <span>s im Inhaltsbereich nicht bessere Elemente (<p>, <h#>) gibt

gruß,
take
Mit Zitat antworten
  #27 (permalink)  
Alt 16.08.2011, 18:21
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 13.08.2011
Beiträge: 29
kletterida befindet sich auf einem aufstrebenden Ast
Standard

Danke für die Tipps:

-Benutze pt nur für die Schriftgröße da ich die von Word, usw kenne, sonst nur px.
-Die &ouml; kommen noch von den alten Dateien, hatte keine Lust die wieder in ö umzuändern.
- Wie CSS auslagern ? Eine .css Datei erstellen ?
- Logo mit Image-Remplacement umsetzen ? Wie geht das denn ?
Mit Zitat antworten
  #28 (permalink)  
Alt 16.08.2011, 18:28
body.ie {display: grotte}
XHTMLforum-Mitglied
 
Registriert seit: 09.01.2011
Beiträge: 841
take_a_7 sorgt für eine eindrucksvolle Atmosphäretake_a_7 sorgt für eine eindrucksvolle Atmosphäre
Standard

Zitat:
Zitat von kletterida Beitrag anzeigen
Danke für die Tipps:

-Benutze pt nur für die Schriftgröße da ich die von Word, usw kenne, sonst nur px.
Auch für die Schriftgröße lieber was anderes nehmen. pt ist eine Einheit aus dem Printbereich, die hat im Web nichts verloren.
Zitat:
Zitat von kletterida Beitrag anzeigen
- Wie CSS auslagern ? Eine .css Datei erstellen ?
Jup. Und dann per
HTML-Code:
<link rel="stylesheet" type="text/css" href="/pfad/zur/css/datei.css" />
einbinden.
Zitat:
Zitat von kletterida Beitrag anzeigen
- Logo mit Image-Remplacement umsetzen ? Wie geht das denn ?
http://meiert.com/de/publications/articles/20050513/

gruß,
take
Mit Zitat antworten
  #29 (permalink)  
Alt 16.08.2011, 18:40
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 13.08.2011
Beiträge: 29
kletterida befindet sich auf einem aufstrebenden Ast
Standard

Welche Einheit soll ich denn für die Schriftgröße nehmen ?

Danke hat funktioniert mit der .css Datei.

Das Image-Remplacement hat leider nicht funktioniert...Muss das denn so gemacht werden ?
Mit Zitat antworten
Sponsored Links
  #30 (permalink)  
Alt 16.08.2011, 18:43
body.ie {display: grotte}
XHTMLforum-Mitglied
 
Registriert seit: 09.01.2011
Beiträge: 841
take_a_7 sorgt für eine eindrucksvolle Atmosphäretake_a_7 sorgt für eine eindrucksvolle Atmosphäre
Standard

Zitat:
Zitat von kletterida Beitrag anzeigen
Welche Einheit soll ich denn für die Schriftgröße nehmen ?
Ich nehme immer Pixel (px), obwohl empfohlen wird (und es ist auch wirklich besser, ich bin nur zu faul und IE ist mir sowieso egal ) em zu nehmen. Denn Pixel kann der IE nicht skalieren (keine Ahnung bis zu welcher Version, die neuen könnens glaub ich).

Was funktioniert denn nicht, beim Image-Replacement? Welche Methode hast du genommen, und wie sieht dein Code aus?

gruß,
take
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
paar Probleme mit dem CSS Layout SimonK. CSS 6 05.10.2008 15:57
ein paar css probleme... Krebskasper CSS 1 09.07.2006 14:54
Anfänger erbittet ein paar Tips. Dr.Crow (X)HTML 5 20.06.2006 12:47
Ein paar Probleme: (Hintergrundbild <div>Grösse) arkanis CSS 5 29.09.2004 15:13
CSS anfänger will nen paar Tips / Antworten :> koDiacc CSS 23 20.09.2004 13:33


Alle Zeitangaben in WEZ +2. Es ist jetzt 07:21 Uhr.