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

CSS Vererbungs Problem

H

halifax123

Neues Mitglied
Guten Morgen,

ich habe hier folgenden HTML und CSS Code :

HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Strinz-Aube.de</title>
<meta name="author" content="Wagner1m">
<meta name="editor" content="html-editor phase 5">
<link rel="stylesheet" type="text/css" href="../style/nav.css">
<link rel="stylesheet" type="text/css" href="../style/cont.css">
</head>
<body>
<img src="../img/header_img.jpg" alt="" border="0" width="100%" height="200em"><?php include('../html/de_nav_activitys.html'); ?>
<div id = "navigation">
      <ul id = "nav">
         <li><a href = "../../index.php">Aktuell</a></li>
         <li  id = "active"><a href = "../php/de_about.php"  id = "current">Wir über uns</a></li>
         <li><a href = "../php/de_activitys.php">Aktivitäten</a></li>
         <li><a href = "../php/de_galerie.php">Galerie</a></li>
         <li><a href = "../php/de_region.php">Region</a></li>
     </ul>
     <ul id = "subnav" style="margin-left: 10.2%;" >
         <li id = "active"><a href = "" id = "current">Der Verein</a></li>
         <li><a href = "">Chronik</a></li>
         <li><a href = "">Anmeldung</a></li>
     </ul>
     </div></body>
</html>

Code: 
#nav {
   list-style : none;
   margin     : 0;
   padding    : 0;
   margin-top : 0.5em;
}
#nav li {
   display : inline;
}
#nav a {
   float            : left;
   position         : relative;
   width            : 11%;
   height           : 1.25em;
   text-align       : center;
   text-decoration  : none;
   font-family      : Arial;
   font-size        : 1em;
   Color            : #000;
   background-color : #C3C3C3;
   }
#nav a:hover {
   background-color : #949494;
   text-decoration  : underline;
}
#nav li a#current {
   text-decoration : underline;
}

#subnav {
   list-style : none;
   margin     : 0;
   padding    : 0;
   margin-top : 2em;
   margin-left : 11%;
}
#subnav li {
   display : inline;
}
#subnav a {
   float            : left;
   position         : relative;
   width            : 11%;
   height           : 1.25em;
   text-align       : center;
   text-decoration  : none;
   font-family      : Arial;
   font-size        : 1em;
   Color            : #000;
   background-color : #C3C3C3;
   }
#subnav a:hover {
   background-color : #949494;
   text-decoration  : underline;
}
#subnav li a#current {
   text-decoration : underline;
}

Wie man an dem HTML Code erkennen kann, habe ich eine verschachtelte Liste, welche ich mit CSS versuche zu formatieren. Damit meine HP möglichst mit allen Auflösungen kompatibel ist, arbeite ich mit Prozentangaben.

Die Breite der Links habe ich auf 11%. Meine Navigation ist horizontal eingerichtet. Die Menüpunkte des Submenüs sollen unter dem jeweiligen Hauptmenüpunkt erscheinen. Darum muss ich margin-left auf 11%, 22% etc. setzen.

Das Problem ist jedoch, dass sich dadurch die Breite der Links ändert.

HINWEIS : Ich kann die Website momentan nicht ins Netz stellen.

mfg halifax123
 
halifax123 schrieb:
Damit meine HP möglichst mit allen Auflösungen kompatibel ist, arbeite ich mit Prozentangaben.
Zum Vergrößern anklicken....
Die Auflösung hat für Websites keinerlei Bedeutung und die Prozentangaben beziehen sich auch nicht auf die Auflösung!

Deine Links haben sowohl float, als auch position. Das ist sinnfrei. Entweder das eine oder das andere.
Und das li außen rum wird noch dazu auf inline gesetzt. Das setzt allem noch die Krone auf :-)

Die Menüpunkte des Submenüs sollen unter dem jeweiligen Hauptmenüpunkt erscheinen. Darum muss ich margin-left auf 11%, 22% etc. setzen.
Zum Vergrößern anklicken....
Nein, da ist der Denkfehler. Die Submenüs solltest Du als Liste in einer Liste definieren.
Code: 
<ul>
  <li>Punkt 1
    <ul>
      <li>Punkt 1.1</li>
      <li>Punkt 1.2</li>
    </ul>
  </li>
  <li>Punkt 2</li>
  <li>Punkt 3
    <ul>
      <li>Punkt 3.1</li>
    </ul>
  </li>
</ul>
Ach, und mit Vererbung hat das auch nichts zu tun. Du änderst die Größe eines Links mit Deinem margin, mehr nicht. Du änderst an einem Element was, was Auswirkung auf das selbe Element hat. Bei Vererbung gehts um Eigenschaften, die von Elternelementen auf deren Nachfahren übertragen werden.
 
Die Auflösung hat für Websites keinerlei Bedeutung und die Prozentangaben beziehen sich auch nicht auf die Auflösung!
Zum Vergrößern anklicken....

Wenn ich die Auflösung verändere meiner Homepage, und keine % nutze, ist das Layout futsch.... Ich weiß echt net was ich falsch mache :O Wies scheint hat die Probleme keiner hier =(
 
Wenn Du die Bildschirmauflösung veränderst, verändert sich oft auch der Viewport mit. Der Viewport hat aber keine direkte Abhängigkeit zur Auflösung. Auch CSS kennt die Bildschirmauflösung nicht.

Der Viewport ist aber nahezu immer kleiner als das, was die Auflösung hergibt, selbst bei maximiertem Fenster. Das Fenster hat Rahmen, der Browser hat Menüleisten, Toolbars und Sidebars. Was übrig bleibt, ist der Platz, in dem Du Deine Website anzeigen darfst, das nennt sich der Viewport. Prozentuale Größen beziehen sich nur auf die Größe des Viewports, nie auf die Auflösung. Dazu kommt ja, dass Du ein Fenster nicht maximieren musst, wenn Du es kleiner schiebst, wird auch die Pixelzahl von "100%" kleiner, und das ohne dass Du die Auflösung ändern müsstest.
 
Mit welchen CSS Eigenschaften sollte ich denn arbeiten, damit die Website bei jedem Viewport gleich angezeigt wird?
Also em , px, oder % oder anderen angaben ?

mfg halifax123
 
Das kommt immer mit drauf an, wie sich der Inhalt verändern soll, wenn der Viewport geändert wird. Sollen sich die Elemente mit verändern, brauchst du %, sollen sie sich nicht verändern, brauchst du em und px.

Schriftgrößen solltest du in em angeben, Breite und Höhe ebenfalls, damit die Elemente sich dem Inhalt anpassen können, wenn jemand die Schriftgröße verändert. Abstände wie margin und padding kannst du in px angeben.
 
Jetzt ist die Frage, was du mit anpassen meinst.

Sollen sie sich in der Größe anpassen oder ihre Position im Browser verändern um horizontale Scrollbalken zu vermeiden?

Natürlich sollte eine Seite nicht auf z.B. 1600px Breite festgelegt sein, da man sonst mit einem Viewport von 1000px sehr viel scrollen müsste, aber Buttons z.B. sollten ihre Größe behalten, wenn der Viewport verändert wird.

Das Verhalten lässt sich also nicht einheitlich für alle Elemente festlegen.
 
Ich habe mal ein Foto dem Beitrag angehängt der mein Layout darstellt. Bei meinen vorherigen versuchen wurde das Layout vernichtet :-D wenn der Viewport sich geändert hatte, da ich die Website mit einem anderen Viewport erstellt hatte. Hast du evtl Vorschläge, mit welcher positionierungsmethode bzw mit welchen Größeneinheiten ich das realisieren könnte ?



danke im vorraus
halifax123
 
Als Positionierungemethoden wirst du float: left und float: right brauchen, Größenangaben px, em und %, min-width ist auch sehr nützlich, damit sich die Elemente nicht auf 5px Breite verkleinern.
 
Die Eigenschaften sind die gleichen, egal wie groß der Viewport ist.
Aber eine Website sollte nie in jedem Viewport gleich angezeigt werden. In einem größeren ist mehr Platz als in einem kleineren.
Wenn die Website in jedem Viewport gleich aussehen würde, würde man im kleinen Viewport nichts erkennen und im großen sähe es aus, als wäre man Schlechtsichtig.

Als Einheiten ist eine gesunde Mischung aus "em", "%" und "px" wohl das beste. Kommt immer darauf an. Wenn ich ein kleines Feld habe, das Text enthält, dann werde ich das mit "em" einstellen, damit der Text nicht bei einmaliger Vergrößerung sofort aus seinem Rahmen springt. Will ich den Viewport in zwei Teile aufteilen, dann kommt "%" ins Spiel. Und wenn ich irgendwo nur einen kleinen Abstand will oder einen Rahmen, dann kommt meist "px" zum Tragen.

halifax123 schrieb:
eigentlich sollten sich doch alle Elemente der Page anpassen oder seh ich das falsch?
Zum Vergrößern anklicken....
Na, aber auf gar keinen Fall. Dann würde die Schrift der Seite immer kleiner werden, je kleiner mein Viewport ist. Das heißt, Sehbehinderte nutzen am besten einen 120cm-Monitor und Leute mit Handy können sowieso nichts lesen.
 
ok ich mache mich da mal ran ... Die Angabe height kann man doch ganz normal mit px machen oder? nur wenns um width geht sollte man % nutzen

mfg halifax123
 
Es kommt doch immer auf den Einzelfall an! Deine Aussage entbehrt jeglicher Logik:

Wenn ich ein Element habe, dem eine height in px zuweise, und in dem Element steht ein Text und jetzt jemand die Schriftgröße ändert. Dann würde der Text größer werden und über die Grenzen des Elements hinausgehen. Hier wäre auch height in em angebracht! Und widht genauso in em und nicht in %.
 
Es tut mir leid, aber ich weiß noch immer nicht genau wie das funktionieren soll. Ich frage einfach konkret, wie man eine Website erstellt, welche sich dem Viewport anpasst. Nehmen wir mal diese Seite hier selbst. Wenn ich die Auflösung ändere, verändert sich der Viewport aber die Seite wird trotzdem in ihrem Layout korrekt (eben etwas vergrößert) angezeigt. Ich will doch niemandem auf die nerven gehen, jeder hat schließlich mal klein angefangen...

mfg halifax123
 
Du gehst auch keinem auf die Nerven, wenn das so wäre, würden wir hier nicht antworten.

Da du schon diese Seite als Beispiel nimmst, veränder mal die Größe deines Browserfensters und schau dir das Verhalten der Elemente an. Du wirst sehen, einige verändern ihre Größe, andere nicht. Auf deiner Seite musst du jetzt entscheiden, wie sich deine Elemente verhalten sollen. Das kannst nur du festlegen.
 
halifax123 schrieb:
Es tut mir leid, aber ich weiß noch immer nicht genau wie das funktionieren soll.
Zum Vergrößern anklicken....
Nimm Dein Browserfenster und experimentiere damit rum, damit Du weißt, was möglich ist.
Nimm Deine Elemente und experimentiere mit verschiedenen Einheiten, damit Du siehst, wie sie sich verhalten.

Ich frage einfach konkret, wie man eine Website erstellt, welche sich dem Viewport anpasst.
Zum Vergrößern anklicken....
Die Frage mag einfach sein, die Umsetzung aber nicht immer :-)
Wie schon gesagt, es ist nicht immer sinnvoll, dass sich alles am Viewport orientiert. Schrift z.B. sollte sich nicht daran orientieren. Die sollte man immer in "em" angeben, Fließtextsollte immer "1em" groß sein.

Wenn ich die Auflösung ändere, verändert sich der Viewport
Zum Vergrößern anklicken....
Nicht zwingend. Wenn ich ein Browserfenster der Größe 772x981px habe, die Auflösung 1280x1024 ist, und ich dann die Auflösung auf 1600x1200 ändere, verändert sich die Größe des Browserfensters und die des Viewports nicht.
Aber wenn ich eine zusätzliche Toolbar installiere, verändert sich die Größe des Viewports, ohne dass sich die Auflösung oder die Browserfenstergröße ändert.

aber die Seite wird trotzdem in ihrem Layout korrekt (eben etwas vergrößert) angezeigt.
Zum Vergrößern anklicken....
Das Vergrößern erscheint Dir nur so, weil die Dichte der Pixel sich verändert (dpi). Die Größe in px hat sich nicht verändert (es sei denn, Du hast ein maximiertes Fenster und verkleinerst die Auflösung).

Ich will doch niemandem auf die nerven gehen, jeder hat schließlich mal klein angefangen.
Zum Vergrößern anklicken....
Niemand fühlt sich genervt, außer Du Dich selber wahrscheinlich :-)
Aber niemand hat behauptet, dass alles ganz einfach wäre.

Ganz wichtig für Dich ist als erstes, dass Du verstehst, dass die Bildschirmauflösung nicht relevant ist! Wenn man das nicht versteht, kann einen die Thematik in den Wahnsinn treiben.
 
Ok ;-) ich werd mal ein bissl experimentieren jetzt. Danke für die Ratschläge und Hinweise Efchen und _Thor_.

Falls es zu Problemen kommt, melde ich mich .

Mfg halifax123
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben