Schriftgröße Webseite

mingorius

mingorius

Mitglied
Thread Starter
Dabei seit
20.08.2007
Beiträge
65
Reaktionspunkte
3
Hallo,

ich bin dabei, eine Internetseite für mein Tonstudio zu bauen.

Ich hab dabei gerade ein Problem: ich benutze ein Template für ein "fluid Design".
Die Schriftgröße sollte eigentlich in allen div-Boxen auf allen Endgeräten gleich groß sein.
In Safari wird alles richtig dargestellt, auf dem Smartphone ist die Schrift in "main-content" größer.

Ich hab unten den relevanten CSS- und html-Code angefügt - vielen Dank schonmal vorab für die Unterstützung!

Vielleicht kann mir jemand helfen!

CSS:
HTML: 
body
{
    font-size: 62.5%;
    background-image: url(img/hintergrund.jpg);
}

p, li
{
    font: 1.2em/1.8em Verdana, sans-serif;
    margin-bottom: 10px;
}

#page-wrap
{
    background: white;
    min-width: 780px;
    max-width: 1000px;
    margin: 30px auto;
    box-shadow: 5px 5px 5px grey;
}

   
#header
{
    background-color: white;
    height: 100px;
    padding-top: 20px;
}

#navi
{
    background-color: white;
    height: 52px;
    text-align: center;
    margin-top: 30px;
    border-bottom: #999999 1px solid;
}

#main-content
{
    background: url(images/left-sidebar.gif) repeat-y grey;
    padding-left: 230px;
    padding-top: 20px;
    background-color: white;
    margin-bottom: 10px;
}

#left-sidebar
{
    width: 150px;
    float: left;
    padding-left: 15px;
    padding-top: 20px;
    background-color: aqua;
}


HTML:
HTML: 
<body>

    <div id="page-wrap">
          
            <div id="header">
            </div>
         <div id="navi">
            <ul id="menu">
            </ul>  
          </div>
          
            <div id="left-sidebar">
            </div>
  
            <div id="main-content">
                <p>Beispieltext</p>
            </div>
          
            <div style="clear: both;"></div>
          
            <div id="footer">
                <p>Footer stuff.</p>
            </div>
      
        </div>
      
        <div style="clear: both;">
 
        </div>
  
</body>
 
Zuletzt bearbeitet von einem Moderator:
Wenn das Smartphone ein iPhone ist, kannst du dir im Inspector die CSS-Regeln anzeigen lassen, die angewendet werden (an den Mac hängen und auf dem iPhone und dem Mac die Entwickler-Einstellungen aktivieren).
Vielleicht ist eine Media-Query aktiv, die die Schriftgröße für kleinere Bildschirmgrößen ändert.
 
Vielen Dank für die Antwort.
Es ist kein iPhone, aber ich schau mal nach dem Media-query.
 
Bei Android-Geräten kannst du über adb mit Chrome debuggen/inspizieren.
 
Also zunächst:

IDs in HTML-Dokumenten sind nicht zwingend einmalig. Es ist eine Art "best practice" sie eineindeutig zu verwenden. Eine id darf aber mehrfach vorkommen in HTML-Dokumenten. Teils ist das sogar so gewollt um klassenübergreifende Aktionen zu ermöglichen. Sich also darauf zu verlassen das CSS-Selektoren mit #-Zeichen einmalig sind, bedeutet auch die Selektoren von includierten Stylesheets zu kennen. Sprich: das kann zufällig in anderen Dokumenten überschrieben worden sein.
Hier ist die Reihenfolge des Einbindens wichtig, Deine Datei zu letzt und setze die Font Eigenschaften explizit und markiere sie als important.

Grundsätzlich: Das Browserübergreifend sauber hinzubekommen ist nicht trivial. Es gibt fertige Lösungen die das gut können. Bootstrap3/4 ist da eine Lösung. Was spricht dagegen so etwas einzusetzen und einfach anzupassen?
 
wegus schrieb:
Also zunächst:

IDs in HTML-Dokumenten sind nicht zwingend einmalig. Es ist eine Art "best practice" sie eineindeutig zu verwenden. Eine id darf aber mehrfach vorkommen in HTML-Dokumenten. Teils ist das sogar so gewollt um klassenübergreifende Aktionen zu ermöglichen.
Zum Vergrößern anklicken....
Das hat nichts mit "best practice" zu tun, sondern das ist tatsächlich so.

Nicht umsonst gibt es .getElementById() (Singular), aber bspw. .getElementsByClassName() (Plural).

Das soll schon so sein und selbst wenn einige Browser das korrigieren, würde ein Browser nichts falsch machen, wenn er nur das erste Element, was er mit einer gegebenen ID findet, selektiert.
 
gelöscht
 
medeman schrieb:
Das hat nichts mit "best practice" zu tun, sondern das ist tatsächlich so.
Zum Vergrößern anklicken....

Ich wollte gerade widersprechen, denn ich habe es mal anders gehört. Tatsächlich habe ich solche Methoden der jquery-Nutzung schon bei anderen gesehen. Deine Aussage hat mich aber nochmal zum nachlesen gebracht und Du hast recht, man tut das nicht nur nicht - es ist auch definitiv gegen die Spezifikation:

http://www.edition-w3.de/TR/1999/REC-html401-19991224/struct/global.html#adef-id

Auch unter HTML heißt es aber getElementById() gibt das erste Element mit der ID zurück:
https://dom.spec.whatwg.org/#dom-nonelementparentnode-getelementbyid

Das führt vermutlich zu der Annahme es eben anders machen zu können. Aber wie gesagt: sollte man nicht, macht man nicht und ist auch meist nicht zielführend. Mehr dazu findet sich auch bei stackoverflows:
https://stackoverflow.com/questions...ts-have-the-same-id-if-theyre-different-eleme


Im konrekte Fall ging es mir nur darum sicherzustellen, dass hier nicht das "Template-System" vielleicht sein CSS überchreibt bei solch geläufigen ID-Bezeichnern.
 
Vielen Dank für die Antworten - das Attribut important hat mich bereits weiter gebracht!
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben Unten