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

100%-1px

mam885

Neues Mitglied
Hallo

Ich habe ein Grundgerüst erstellt, wobei ich sozusagen immer einen Pixel zu viel auf dem Bildschirm hatte. Wenn ich bei den Divs die Eigenschaft "width:100%-1px" gebe, funktioniert alles bestens, auf allen Browsern, auf allen Geräten. Aber ist das ein erlaubtes Statement?

Vielen Dank,
mam
 
Werbung:
Hallo,

wenn es funktioniert ist es zulässig. Hast du das auch in älteren Browsern getestet? Und mit Smartphones und Tablets?

Das Problem ist eher, das du so eine Angabe überhaupt benötigst. Das deutet darauf hin, das der übrige Quelltext eventuell Fehler enthält, die du mit dieser eher unüblichen Angabe korrigieren willst.

Gruss

MrMurphy
 
Du müsstest schreiben

Code:
width: calc(100% - 1px);

dann klappt es auch in allen modernen Browser, egal auf welchem Endgerät.
 
Werbung:
Hast du das auch in älteren Browsern getestet? Und mit Smartphones und Tablets?
ja, ich habe mit einem browseremulator bis zu fossilen browsern getestet, hat überall super funktioniert. Auch iPad und Android Smartphone....

Das Problem ist eher, das du so eine Angabe überhaupt benötigst. Das deutet darauf hin, das der übrige Quelltext eventuell Fehler enthält, die du mit dieser eher unüblichen Angabe korrigieren willst.

Würdest du einen Blick auf meinen Code werfen? :oops:

Link:
http://ammaenner.ch/diverses/webfrage/index.php

index.php
PHP:
<!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=ISO-8859-1">
    <meta name="robots" content="index,follow">
    <meta name="description" content="Beschreibung der Seite">
    <meta name="keywords" content="wichtige Stichworte, Homepage, Test">
    <meta name="language" content="de">
   
        <link rel="stylesheet" type="text/css" href="general.css">
    <link rel="stylesheet" type="text/css" href="index.css">
   
        <title>
            Startseite - Vorlage
        </title>
    </head>
    <?php
        include 'banner.php';
        include 'menu.php';
  ?>
                <div class="textdiv">
                    <h1>
                        Herzlich willkommen
                    </h1>
                    <p>
                        Dies ist ein beliebiger Text, der eigentlich ruhig noch etwas l&auml;nger ausfallen d&uuml;rfte, doch aufgrund meiner mangelnden Phantasie m&uuml;ssen wir hier mal Schluss machen - leider.<br />
          </p>
                    <div class="framediv">
            <img src="pics/mini.jpg" alt="Platzhalter" style="" />                           
                    </div>
                    <div class="framediv">
            <img src="pics/mini.jpg" alt="Platzhalter" style="" />                           
                    </div>
                    <div class="framediv">
                        <img src="pics/mini.jpg" alt="Platzhalter" style="" />   
                       
                    </div>       
                </div>
  <?php   
    include 'footer.php';
    ?>
</html>

banner.php
PHP:
    <body>
        <div id="aussenwrapper">

                <a class="bannera" href="index.php">
          <div class="bannerdiv">
                    <p class="bannerp1"> Banner <br /></p>
            <p class="bannerp2">Mit einem schönen Spruch</p>
                  </div>
        </a>


menu.php
PHP:
                <table class="menutable">
                    <tr>
                        <td class="menutd">                           
                            <a class="menua" href="index.php">
                <table style="width:100%;height:100%;border-spacing:0px;">
                  <tr>
                    <td>
                      <nobr>
                                        Startseite
                      </nobr>
                    </td>
                  </tr>
                </table>
                            </a>
                           
                        </td>
                        <td class="menutd">
                            <a class="menua" href="index.php">
                <table style="width:100%;height:100%;border-spacing:0px;">
                  <tr>
                    <td>
                      <nobr>
                                        Menu 1
                      </nobr>
                    </td>
                  </tr>
                </table>
                            </a>
                        </td>
                        <td class="menutd">
                            <a class="menua" href="index.php">
                <table style="width:100%;height:100%;border-spacing:0px;">
                  <tr>
                    <td>
                      <nobr>
                                        Menu 2
                      </nobr>
                    </td>
                  </tr>
                </table>
                            </a>
                        </td>
                        <td class="menutd">
                            <a class="menua" href="index.php">
                <table style="width:100%;height:100%;border-spacing:0px;">
                  <tr>
                    <td>
                      <nobr>
                                        Menu 3
                      </nobr>
                    </td>
                  </tr>
                </table>
                            </a>
                        </td>
                        <td class="menutd" style="border-right-width:1px;">
                            <a class="menua" href="index.php">
                <table style="width:100%;height:100%;border-spacing:0px;">
                  <tr>
                    <td>
                      <nobr>
                                        Menu 4
                      </nobr>
                    </td>
                  </tr>
                </table>
                             </a>
                        </td>
                    </tr>
                </table>

footer.php
PHP:
        <div class="footer">
                    Copyright&copy; oder Impressum
                </div>

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


general.css
Code:
html        {
        height:100%;
        }


body        {
        text-align:left;
        height:98%;
        margin:0 auto;
        padding:0px;
        overflow:scroll;
        font-family:arial, tahoma;
        background-color:#bfd9ff;
        }


h1        {
        font-size:120%;
        }


p        {
        font-size:11pt;
        }


a:link        {
        color:black;
        text-decoration:none;
        }


a:visited    {
        color:black;
        text-decoration:none;
        }


a:hover        {
        color:black;
        text-decoration:underline;
        }


a:active    {
        color:black;
        text-decoration:none;
        }


  
.bannerdiv    {
        width:100%-1px;
        height:100px;
        border:1px solid black;
        text-align:right;
    background-image:url(pics/banner.jpg);
    background-repeat:no repeat;
    background-position:-50px 0px;
        background-color:gainsboro;
    color:white;
    font-size:17pt; 
        }
   
.bannera:hover  {text-decoration:none;}
 

.bannerp1         {
                  padding-right:150px;
                  font-size:17pt;
                  margin:0px;
                  margin-top:20px;
                  }
                 
.bannerp1:hover   {
                  text-decoration:none;
                  }
                 
             
.bannerp2         {padding-right:150px;
                  margin:0px;
                  margin-top:10px;}
   
   
.bannerp1:hover   {
                  text-decoration:none;
                  }
                 
                     
.bannerdiv:hover  {
                  text-decoration:none;
                  }


.menutable    {
        height:45px;
        border-spacing:0px;
        width:100%;
        padding-right:0px;
        padding-top:4px;
        padding-bottom:4px;
        margin:0px;
        }


.menutd        {
        margin:0px;
        padding:0px;
        width:20%;
        height:100%;
        border:1px solid black;
        border-right-width:0px;
        font-family:arial, tahoma;
        font-size:15pt;
        background-color:#ffffcc;
        }


.menutd:hover    {
        background-color:#ffff99;
        }


.menua        {
        display:block;
    height:100%;
    padding-bottom:0px;
    border:0px solid red;
        }
   
.menua:hover  {
              color:black;
              }


.textdiv    {
        text-align:center;
        min-height:300px;
        width:100%-1px;
        border:1px solid black;
        padding:10px;
        overflow:auto;
        margin:0 auto;
        background-color:#ffffcc;
        }


#aussenwrapper    {
        min-height:80%;
        width:80%;
        margin:0 auto;
        margin-top:10px;
        margin-bottom:10px;
        text-align:center;
        border:0px solid black;
        position:relative;
        overflow:hidden;
        }

.footer        {
        width:100%-1px;
        border:1px solid black;
        padding:15px;
        margin:0 auto;
        margin-top:4px;
    margin-bottom:10px;
        background-color:#ffffcc;
        font-size:8pt;
        }


index.css
Code:
.framediv    {
        height:192px;
        width:300px;
        border:1px solid black;
        padding:0;
        margin:15px;
        display:inline-block;
        }
 
Hallo mam85

Ich habe (nur) Deine index.php durch den Validator http://validator.w3.org/
geschickt und doch einige Fehlermeldungen im Code bekommen. Ich würde die mal so oder so beheben.

Zudem (bzw. vorher) würde ich in jedem Fall von HTML 4.01 irgendwas auf HTML 5 wechseln, wenn Du ohnehin an der Seite herumbastelst.

Lg X.
 
Ich würde das gesamte Markup löschen. ;)

Menüs werden als UL geschrieben, Tabellen nicht als Layouthilfe missbraucht und <nobr> geht gar nicht.
 
Werbung:
Ich würde das gesamte Markup löschen. ;)
Ich habe auch schon mit dem Gedanken gespielt... ist eigentlich aufgewärmter kaffee, ist wohl wirklich eine Überlegung wert...

Menüs werden als UL geschrieben,
Ich werde mich einlesen, ich kannte UL gar nicht..... danke

Tabellen nicht als Layouthilfe missbraucht
ich weiss, dass das nicht schön ist, aber es ist so einfach :-D Ich werde deinen Rat befolgen. Aber gibt es denn Nachteile, eine Tabelle zu verwenden?

und <nobr> geht gar nicht.
aja? Wie verhindert man denn einen Zeilenumbruch, eben gerade beispielsweise in einem Menü?
 
Hallo mam85

Ich habe (nur) Deine index.php durch den Validator http://validator.w3.org/
geschickt und doch einige Fehlermeldungen im Code bekommen. Ich würde die mal so oder so beheben.

Zudem (bzw. vorher) würde ich in jedem Fall von HTML 4.01 irgendwas auf HTML 5 wechseln, wenn Du ohnehin an der Seite herumbastelst.

Lg X.
Das wird wohl keine schlechte Idee sein... kannst du mir ein Tutorial empfehlen? Ich weiss, es gibt dutzende, aber vielleicht kennst du ja ein besonders empfehlenswertes...?
 
ich weiss, dass das nicht schön ist, aber es ist so einfach :-D Ich werde deinen Rat befolgen. Aber gibt es denn Nachteile, eine Tabelle zu verwenden?

Schau dir deine Seite mal auf dem Smartphone an, fällt dir da etwas auf? ;)
Wie verhindert man denn einen Zeilenumbruch, eben gerade beispielsweise in einem Menü?

Dafür gibt es in CSS das Attribut whitespace, und wenn du einem Container die Eigenschaft box-sizing: border-box verpasst, kannst du dir auch das calc(100% - 1px) ersparen.
 
Werbung:
Schau dir deine Seite mal auf dem Smartphone an, fällt dir da etwas auf? ;)
hm, meinst du die teilweise fehlenden vertikalen Linien im Menü, bzw. im "Platzhalter"? Passiert das nur bei Tabellen?

Dafür gibt es in CSS das Attribut whitespace, und wenn du einem Container die Eigenschaft box-sizing: border-box verpasst, kannst du dir auch das calc(100% - 1px) ersparen.
diese Möglichkeit (box-sizing) suche ich schon seit meinen ersten Schritten mit HTML! Super, vielen Dank! Ab welcher Version ist das denn hinzugekommen? Auf selfhtml ist box-sizing auch nicht aufgeführt :(
 
hm, meinst du die teilweise fehlenden vertikalen Linien im Menü, bzw. im "Platzhalter"? Passiert das nur bei Tabellen?

Was würde passieren, wenn jetzt noch zwei oder drei weitere Menüpunkte hinzukommen?

Tabellenlayout stammt aus einer Zeit, als CSS Neuland war und Webseiten ausschließlich auf PC Monitoren angezeigt wurden. Bei modernen, responsiven Seiten führt es hingegen zu Darstellungsproblemen. Das wird spätestens dann sichtbar, wenn der Inhalt einer Tabellenzelle breiter ist als die Zelle selber.

Selfhtml bewegt sich auf dem Stand von vor 10 Jahren. Als gelegentliche Referenz lässt es sich noch verwenden, aber wenn du HTML und CSS erlernen willst, wäre MDN die bessere Adresse:
https://developer.mozilla.org/de/
 
Was würde passieren, wenn jetzt noch zwei oder drei weitere Menüpunkte hinzukommen?
ich dachte mir, ich würde dann das Menü aus einer DB auslesen und die Breite von der Anzahl der Menüpunkte abhängig machen :-D

Selfhtml bewegt sich auf dem Stand von vor 10 Jahren. Als gelegentliche Referenz lässt es sich noch verwenden, aber wenn du HTML und CSS erlernen willst, wäre MDN die bessere Adresse:
https://developer.mozilla.org/de/
passt, ich habe meine ersten Gehversuche mit HTML vor 12 Jahren gemacht ;-)

vielen dank für den Link
 
Werbung:
ich dachte mir, ich würde dann das Menü aus einer DB auslesen und die Breite von der Anzahl der Menüpunkte abhängig machen :-D

Ob statisch oder aus der Datenbank ist egal; das Styling übernimmt immer CSS und gegebenenfalls JavaScript. Lade diese Seite mal auf dem Smartphone oder verringere die Breite des Browsers und schau was mit der Navigation passiert.
http://getbootstrap.com/components/#navbar
 
Das wird wohl keine schlechte Idee sein... kannst du mir ein Tutorial empfehlen? Ich weiss, es gibt dutzende, aber vielleicht kennst du ja ein besonders empfehlenswertes...?

Die Hinweise oben von Tronjer dürften genügen. Da ich eher der Bücher-Mensch bin, habe ich mehr aus Büchern gelernt als aus Online-Tutorials, aber das ist Geschmackssache. Als Einstieg in zeitgemässes HTML und CSS empfehle ich bei den Büchern Peter Müllers "Das grosse little boxes Buch" vom Verlag Markt + Technik. Wie die meisten Fachbücher nicht ganz billig, meiner Meinung nach aber das Geld wert. Der Tipp ist völlig subjektiv. Ich arbeite nicht bei diesem Verlag und habe auch keine Provision von denen ;-)

Lg X.
 
verringere die Breite des Browsers und schau was mit der Navigation passiert.
http://getbootstrap.com/components/#navbar
OK, ich denke ich sehe das Problem.... Bei mir verschwindet ein Teil der Tabelle. Aber bei der von dir gelinkten Seite wird ja UL verwendet. Wenn dort die Mindestbreite unterschritten wird, wird das komplette Menü ausgeblendet. Ist das einfach nicht optimal umgesetzt? Oder ist das der "Haken" an UL?
 
Werbung:
OK, ich denke ich sehe das Problem.... Bei mir verschwindet ein Teil der Tabelle. Aber bei der von dir gelinkten Seite wird ja UL verwendet. Wenn dort die Mindestbreite unterschritten wird, wird das komplette Menü ausgeblendet. Ist das einfach nicht optimal umgesetzt? Oder ist das der "Haken" an UL?

Das ist so gewollt. Wenn die Breite des Viewports nicht mehr ausreicht, um die Navigation in einer Reihe darzustellen, verschwindet sie unter dem Button, der die Menüpunkte beim Klick untereinander anzeigt.
 
Das ist so gewollt. Wenn die Breite des Viewports nicht mehr ausreicht, um die Navigation in einer Reihe darzustellen, verschwindet sie unter dem Button, der die Menüpunkte beim Klick untereinander anzeigt.
oh, das habe ich nicht bemerkt - wirklich chic gelöst! Ich bin dann mal wieder beim HTML5-Tutorial, bis das Buch eintrifft ;-)
 
Peter Müllers "Das grosse little boxes Buch" vom Verlag Markt + Technik.
das schaut sehr gut aus. bei büchern habe ich einfach immer etwas Angst, dass es bereits veraltet ist, deshalb bin ich sehr froh um Empfehlungen. Und wie du schon gesagt hast, Fachliteratur ist teuer, die 35€ für >800 Seiten finde ich da bereits günstig bei einem gebundenen Buch, das werde ich mir besorgen.

Vielen Dank an alle, die mir bisher schon geholfen haben. Ich vermute, ihr seht mich in ein paar Tagen/Wochen wieder mit mehr Fragen :-D
 
Werbung:
Hallo

dass es bereits veraltet ist,

Das Buch "Little Boxes" ist veraltet. Es ist meiner Ansicht nach eines der besten HTML4 / CSS2 Bücher. Aber mit HTML5 / CSS3 hat es nun gar nichts am Hut.

Aktuell empfehle ich das Nachfolgebuch (?) von Peter Müller: "Flexible Boxes".

Gruss

MrMurphy
 
Hallo



Das Buch "Little Boxes" ist veraltet. Es ist meiner Ansicht nach eines der besten HTML4 / CSS2 Bücher. Aber mit HTML5 / CSS3 hat es nun gar nichts am Hut.

Aktuell empfehle ich das Nachfolgebuch (?) von Peter Müller: "Flexible Boxes".

Gruss

MrMurphy

Das stimmt nun bezüglich der von mir verwendeten Auflage (2011 erschienen) wirklich ganz und gar überhaupt nicht! Das Buch ist durchgehend auf HTML 5 und CSS 3 ausgerichtet! Das Buch gibt sich ja gerade permanent Mühe die veralteten Sachen aus HTML 4 und CSS 2 "abzugewöhnen". Das beginnt beim Doctype und geht weiter zu Themen wie "tabellenfreie Layouts mit CSS".

Falls es bereits wieder eine neuere Auflage gibt - drei Jahre sind in dem Bereich ja dann doch wieder recht viel Zeit - ist die natürlich dennoch vorzuziehen, das ist völlig klar. Es gibt in der 2011er-Auflage ab und zu Dinge, die 2014 keiner mehr braucht, etwa Kompatibilitätsfragen zum unsäglichen IE 6 (das ist aber auch in der 2011er-Ausgabe bereits nicht mehr ein besonderes Schwergewicht). Das würde ich Einsteigern dringend ersparen, weil heute überflüssig wie ein Kropf für eine neue Homepage in Mitteleuropa.

Lg X.
 
Zurück
Oben