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

Calc() funktioniert nicht

J

juergen

Neues Mitglied
Hallo alle,

ich bin Anfänger was CSS3 und HTML5 angeht und versuche nun im ersten Projekt eine relativ einfache Homepage aufzubauen.
Die Homepage soll links einen 220px breiten senkrechten Balken von oben bis unten haben. --> das funktioniert
Dann kommt ein zentraler Bereich von 830px, --> das funktioniert
der einen 140px hohen Titelbereich hat. --> das funktioniert
Darunter ist der nutzbare Bereich für Text, etc., welcher bis zum unteren Ende des Bildschirms gehen soll. --> das funktioniert nicht. Siehe unten.
Rechts neben dem zentralen Bereich soll alles mit einer Farbe eingefärbt werden, wofür ich einen Wrapper nutze. --> das funktioniert nicht so ganz, soll aber erst später gelöst werden.

Mein Problem ist, dass ich die Höhe des zentralen Textbereiches dynamisch an die Bildschirmhöhe (- 140px für den Titelbereich) anpassen möchte. Das sollte eigentlich ganz einfach sein, zumal es mittlerweile die Funktion calc() gibt. Leider wird in meiner CSS-Datei in diesem Block

#MainArea {
background-color: #F2F232;
margin-left: 220px;
width: 820px;
height: calc(100% - 140px);
overflow: visible;
padding-left: 5px;
padding-right: 5px;
}

Die Zeile mit der height-Eigenschaft und der daran anschließenden Berechnung in calc() wird immer ignoriert und ich habe keine Schimmer warum. Der mit MainArea bezeichnete zentrale Textbereich wird immer nur 40px hoch gemacht, da ich in der HTML-Datei zwei <br> für diesen Bereich stehen habe.

Da ich in mehreren Ansätzen schon x Stunden mit der Aufteilung des Bildschirms und der dynamischen Anpassung verbracht habe, um immer wieder festzustellen, dass ich immer mehr oder weniger scharf an der Lösung vorbei arbeite, bitte ich euch hier um Hilfe. Ich habe die html- und CSS-Datei angehangen, falls jemand mir helfen möchte.

Vorab: Ja, ich habe schon im Forum und im www gesucht, aber nach den Beispielen sah meine Zeile korrekt aus - oder ich habe mal wieder ein Brett vor dem Kopf, was auch nicht das erste Mal wäre. Auch meine beiden HTML5/CSS-Bücher haben mir hier leider nicht geholfen.

Ich möchte das gerne lernen und verstehen, deswegen wäre ich für eine Erklärung, was ich falsch gemacht habe, dankbar. Ein Verweis auf ein Framework, wie ich es schon in anderen Artikeln gelesen habe, fände ich nicht so toll, weil ich daraus nichts lerne.


Vielen Dank im Voraus,

Neuling Jürgen
 

Anhänge

height: calc(100% - 140px);

Das ist syntaktisch in Ordnung. Die Frage wäre allerdings, worauf sich die 100% beziehen. Wenn du position: absolute verwendest, muss das nicht der direkte Elterncontainer sein.

Bevor du an deiner Seite weiterstrickst, solltest du dir erst einmal die CSS Basics aneignen. Dazu gehören z.B. der Umgang mit Floats und die Positionierung von Elementen per Margin, ohne Einsatz von position: relative/absolute/fixed.
 
Tronjer schrieb:
height: calc(100% - 140px);

Das ist syntaktisch in Ordnung. Die Frage wäre allerdings, worauf sich die 100% beziehen. Wenn du position: absolute verwendest, muss das nicht der direkte Elterncontainer sein.

Bevor du an deiner Seite weiterstrickst, solltest du dir erst einmal die CSS Basics aneignen. Dazu gehören z.B. der Umgang mit Floats und die Positionierung von Elementen per Margin, ohne Einsatz von position: relative/absolute/fixed.
Zum Vergrößern anklicken....


Ein "position: absolute;" habe ich für den zentralen Textbereich nicht definiert - oder habe ich da etwas übersehen?
Die "position: absolute;", die ich verwende sollen auch genau das machen: Elemente an eine fixe Position unabhängig vom Bildschirmformat setzen. Es ist mir klar, das User mit einem kleinen Bildschirm, z. B. Smartphone, dann viel scrollen müssen.
Ich versuche gerade mit dem Projekt nach dem Lesen zweier Bücher das Thema HTML5 und CSS praktisch anzugehen. Ich sofern bin ich weiterhin für jeden Tip dankbar!

VG, Jürgen
 
Ich habe nur kurz in das CSS File geschaut. Wenn du willst, dass man sich Seite insgesamt betrachtet, musst du sie schon online stellen.

Tipp: Erstelle eine Date mit zwei verschachtelten Div-Containern und gib dem inneren dein CSS calc().
 
Danke für den Tipp. Ich vermute mal, dass mit "Erstelle eine Date" eine Seite gemeint ist, oder?
Sorry, dass ich so dumm frage, aber ich bin mit dem Jargon nicht so vertraut.

Die Seite wollte ich erst online stellen, wenn sie fertig ist. Aber wenn es hilft, werde ich das als nächstes angehen. Kann aber ein paar Tage dauern.

Zuerst einmal vielen Dank für eure Hilfe!!!! Ich melde mich wieder, wenn die Seite online ist.

VG, Jürgen

Ergänzung um 10:14 am 18.7.: Die Seite ist jetzt hochgeladen: http://www,utemoors.de
Die erste Seite ist noch OK, sobald man auf Kontakt klickt, sieht man das Desaster. Nicht an den seltsamen Farben auf der Kontakt-, Impressum- und Datenschutz-Seite stören. Das habe ich gemacht, im die DIV-Bereiche besser unterscheiden zu können.
Wenn man bei kontakt/impressum nach unten scrollt, erkennt man schnell mein Problem...
 
Zuletzt bearbeitet:
Wie oben schon geschrieben solltest Du auf absolute Positionierung verzichten. Dann sieht die Seite auch schon deutlich besser aus.
 
Überall? Oder welche genau? Irgendwas verstehe ich da nicht. Ich brauche die absolute Positionierung (meiner Meinung nach), um

- die Box für die Links (home, Malerei, etc.) an die richtige Position zu setzen
- die Links in der Box richtig zu setzen
- den "Fleck" (künstlerische Eingabe meiner Frau) am rechten Rand der oben erwähnten Box richtig zu setzen

Welche Alternative gibt es dazu? Wie positioniere ich ein Element pixelgenau an eine Stelle ohne "Position: absolute" zu verwenden?
Ich habe testweise die absolute Positionierung rausgenommen, und da war die Seite natürlich zerschossen. Irgendetwas habe ich da noch nicht verstanden.

Ich experimentiere gerade wieder mit einer lokalen Kopie. Irgendwie bekomme ich es nicht hin, dass sich die mit div definierten Spalten an der längsten Spalte der Seite orientieren, aber jedoch mindestens die Bildschirmhöhe ausfüllen. Wenn jemand einen Tipp hat...

Das Layout ist relativ einfach: Eine Seite mit 3 Spalten, wobei die linke 220px, die mittlere 830px und die rechte den restlichen Bildschirm ausfüllen soll. Die Linke Spalte ist vertikal in den Header- und den Inhalts-Bereich unterteilt, wobei dieser eine variabel Länge hat und der Header-Bereich 140px hoch ist.

Ich habe da noch eine Frage: Bei HTML V4 konnte man mit "width:*" oder so ähnlich dem Browser sagen, dass ein Element einen Bereich bis zum Ende ausfüllen soll. Gibt es dafür einen Ersatz in HTML5?

Nachtrag 18.7.2014, 17:39
Ich habe die "position: absolute" überall rausgeschmissen bis auf die Positionierung für die Links (home, malerei, ...), da die einzelnen Links sich jedesmal verschieben, wenn ich mit der Maus über einen links davon stehenden Link gehe, da dann ein "a:hover { font-weight: bold; }" ausgelöst wird und die fette Schrift mehr Platz braucht und somit die dahinter stehenden Links verschiebt.
Die neue Site ist hochgeladen: http://www.utemoors.de/kontakt.html. Es ist aber noch alles im Aufbau.
Besser als mit dem "position: absolute" sieht es aber auch nicht aus.

VG, Jürgen
 
Zuletzt bearbeitet:
juergen schrieb:
Nachtrag 18.7.2014, 17:39
Ich habe die "position: absolute" überall rausgeschmissen bis auf die Positionierung für die Links (home, malerei, ...), da die einzelnen Links sich jedesmal verschieben, wenn ich mit der Maus über einen links davon stehenden Link gehe, da dann ein "a:hover { font-weight: bold; }" ausgelöst wird und die fette Schrift mehr Platz braucht und somit die dahinter stehenden Links verschiebt.
Zum Vergrößern anklicken....

Wenn du deine Links richtig auszeichnest (als Liste), dann verschiebt sich da auch nichts wenn du mit der Maus über einen Link gehst.
Position: absolute ist bei deinem Design absolut unnötig.

Ausserdem solltest du die Möglichkeiten von HTML5 nutzen und die unnötigen div durch semantisch sinnvolle Tags ersetzen.

Gruss
Elroy
 
@threadi: Hätte ich gewusst, dass meine Beschreibung unzureichend ist, hätte ich schon eher meine Vorlagen hochgeladen. Ich habe Screenshots von den Entwürfen in die Dropbox gelegt. Ich hoffe, der Link funktioniert: https://www.dropbox.com/sh/1wuvo8pnbsqp3zw/AACfDitf251RwaXuzBIsDF7xa

Kann man hier eigentlich keine Bilder direkt vom PC einfügen?


@Elroy: Sorry, dass ich soooo doof bin, aber ich mache meine ersten Gehversuche mit diesem Projekt. Die Links als Liste versuche ich nachher mal. Was meinst Du mit deiner Aussage "Außerdem solltest du die Möglichkeiten von HTML5 nutzen und die unnötigen div durch semantisch sinnvolle Tags ersetzen."? Ich dachte, divs sind das Mittel der Wahl um Seiten zu strukturieren. Welche "semantisch sinnvolle" Tags meinst Du? Ich bin für jeden Tipp wirklich dankbar!


LG, Jürgen
 
Um diese Seite (in HTML5) zu bauen braust Du eigentlich nur ganz wenige Elemente. Grobes Beispiel (Maße und Farben ungenau, nicht getestet):

HTML: 
<header>
<p id="title">Ute Moors</p>
<nav>
  <ul>
   <li><a href="#">Home</a></li>
  <li><a href="#">Malerei</a></li>
  <li><a href="#">Biografie</a></li>
  <li><a href="#">Workshop</a></li>
  <li><a href="#">Kontakt</a></li>
  </ul>
</nav>
</header>
<main>
  <img src="bild.jpg" alt="">
  <table>
   <tr>
    <td>...</td>
    <td>..</td>
   </tr>
  </table>
</main>

Beispiel für CSS dazu:
Code: 
header, main {
margin: 0 auto;
width: 900px;
}

p#title {
float: left;
margin: 30px 0;
width: 200px;
}

nav {
background-color: red;
float: left;
padding: 30px 0;
width: 700px;
}

nav ul { display: inline; }

nav li {
display: inline;
}

nav a {
color: yellow;
}

main { margin: 40px 0 0; }

main > img { float: left; }
 
juergen schrieb:
@Elroy: Sorry, dass ich soooo doof bin,
Zum Vergrößern anklicken....
So war das nicht gemeint. Tut mir leid wenn das falsch rüber gekommen ist.

juergen schrieb:
Was meinst Du mit deiner Aussage "Außerdem solltest du die Möglichkeiten von HTML5 nutzen und die unnötigen div durch semantisch sinnvolle Tags ersetzen."? Ich dachte, divs sind das Mittel der Wahl um Seiten zu strukturieren. Welche "semantisch sinnvolle" Tags meinst Du? Ich bin für jeden Tipp wirklich dankbar
Zum Vergrößern anklicken....

Siehe den Code von threadi. Semantisch sinnvolle Auszeichnungen anstatt divs.
 
@Elroy: Alles gut. Ich bin nicht eingeschnappt! :) Ich wundere mich immer über die Geduld von den Profis in solchen Foren, Anfängern wie mir solche Basics immer und immer wieder zu erklären. Danke dafür!

Wo ich mir threadis Lösungsweg anschaue: Erst einmal vielen Dank dafür! Ihr seit echt klasse, mir zu helfen! :cool: Das man die Positionierung mit Tabellen lösen kann, ist mir klar gewesen, aber in einem meiner Bücher stand jedoch, dass man bei HMTL V5 keine Tabellen mehr dafür verwenden soll da dieses mehr HTML4-Style ist. In HTML4 habe ich das vor langer Zeit (13 Jahren?) auch so gemacht. Gibt es dafür keine HTML5-konforme Lösung? Oder hat der Autor Unsinn geschrieben? Wie seht ihr das? Bekanntlich hat nicht jeder, der Bücher schreibt auch Ahnung, wovon er schreibt.

Gibt es eigentlich Bücher zu HTML5 und CSS, die eine Art "Best Practices" vermitteln oder an konkreten Projekten zeigen, wie man eine Webseite mit welchen Befehlen aufbaut? An meinem Beispiel sieht man, dass es viele Wege nach Rom gibt, die mehr oder weniger zu einem gewollten Ergebnis führen. Die Bücher, die ich bis jetzt dazu gelesen habe

- "SelfHTML" - eher eine sehr gute Referenz, wie ein Lexikon
- "HTML5" von Markt und Technik, auch eher ein Nachschlagewerk mit Einweisung, aber gut gemacht
- "(jetzt lerne ich) CSS" auch von Markt und Technik, leider ein klein wenig veraltet

...liefern einen guten Überblick, aber keine oder nur begrenzte Übersichten, wie man am besten welches Problem löst. Mit Javascript kann man die Höhen einfach abfragen und dann festlegen, aber ich dachte, dass sollte mit HTML V5 mittlerweile auch so möglich sein.

Nochmal zu meiner Frage von oben: Gibt es für den Stern, z. B. bei "width:*" aus HTML4 einen Ersatz in HTML5, um Inhaltsgrößen flexibel zu bestimmen?

Generell: Schon einmal vielen Dank für eure Hilfe bis hierhin!:cool: Ich werde versuchen, das umzusetzen und das Ergebnis wieder zur Diskussion stellen.


Nachtrag: 20.07.2014, 15:04 Uhr

Bei der Hitze hat man ja nichts anderes zu tun...
Ich habe die Kontaktseite (http://utemoors.de/kontakt.html) neu aufgesetzt. Bitte schaut sie euch mal an und sagt mir, was ich falsch gemacht habe oder anders machen sollte.

Ich habe nicht verstanden, wofür ich aus dem obigen Beispiel die ul brauche. Ich habe die Formatierung des Menüs mit der Tabelle gemacht. Allerdings habe ich jetzt das Problem, dass die Schriftfarben der Menüpunkte und die Eigenschaft "text-decoration: none;" nicht mehr funktionieren. Ich habe das "text-decoration: none;" in den Abschnitten des einzelnen Menüpunktes als auch in der Definition der Tabelle getestet - leider ohne Erfolg. Vielleicht kann mir jemand einen Tipp geben, was ich ändern muss.


LG, Jürgen
 
Zuletzt bearbeitet:
Die Tabelle habe ich nur verwendet, weil man die Inhalte der einen Seite als tabellarische Inhalte interpretieren kann. Wenn Du keine solche "Auflistungen" hast, solltest Du natürlich entsprechend andere Elemente verwenden die semantisch die korrekte Bedeutung für die Inhalte haben.

Eine Eigenschaft
Code: 
width: *;
gibt es nicht - das hat zudem mit keinem HTML-Standard zu tun sondern ist CSS. Breitenangaben macht man nämlich nicht in HTML sondern in CSS, welches für die Gestaltung gedacht ist.
 
Danke für die Antworten! Da sich meine Eingabe des Textes mit der von Threadi überschnitten hat, habe ich meínen Beitrag hier noch einmal angehangen:


Bei der Hitze hat man ja nichts anderes zu tun...
Ich habe die Kontaktseite (http://utemoors.de/kontakt.html) neu aufgesetzt. Bitte schaut sie euch mal an und sagt mir, was ich falsch gemacht habe oder anders machen sollte.

Ich habe nicht verstanden, wofür ich aus dem obigen Beispiel die ul brauche. Ich habe die Formatierung des Menüs mit der Tabelle gemacht. Allerdings habe ich jetzt das Problem, dass die Schriftfarben der Menüpunkte und die Eigenschaft "text-decoration: none;" nicht mehr funktionieren. Ich habe das "text-decoration: none;" in den Abschnitten des einzelnen Menüpunktes als auch in der Definition der Tabelle getestet - leider ohne Erfolg. Vielleicht kann mir jemand einen Tipp geben, was ich ändern muss.


LG, Jürgen
 
Ein Menü beinhaltet keine tabellarischen Inhalte. Es wäre somit semantisch falsch ausgezeichnet. Hinzu kommt, dass man Elemente mit Tabelleneigenschaften nur anders und gleichzeitig schwerer gestalten kann. Ein Menü sollte in jedem Fall aus einer <ul>-Liste bestehen, da dies die semantisch korrekte Auszeichnung wäre.

Die Eigenschaft
Code: 
text-decoration: none;
musst Du an den Link hängen, nicht an ein den Link umgebendes Element.
 
Meinst Du so:

<td id="Link_home"><a style:"text-decoration: none;" href="index.html">home</a></td> ?

Das ergibt bei Netbeans 8 eine Fehlermeldung. Im Browser hat das so auch keine Auswirkung.
Die Links zum Impressum und zur Seite über Datenschutz lassen sich auch nicht formatieren. Wahrscheinlich das gleiche Problem, bei dem ich die Ursache nicht kenne.

Wenn Du dazu einen anderen Tipp hast - oder habe ich etwas falsch verstanden?

Dann werde ich versuchen, das Ganze auf ul umzubauen.

VG, Juergen
 
Wieso fängst du jetzt plötzlich mit inline styles an?

Und wenn dann müsste es style="text-decoration: none;" sein
 
Nein, das meinte ich nicht. Korrekt wäre es so wie von mir oben geschrieben:

HTML: 
<li><a href="#">Home</a></li>

mit diesem CSS dazu:

Code: 
nav a { text-decoration: none; }
nav a:hover { text-decoration: underline; }
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben