Themabewertung:
  • 0 Bewertung(en) - 0 im Durchschnitt
  • 1
  • 2
  • 3
  • 4
  • 5
Prozentangaben werden im IE falsch dargestellt
#1
Hallo und schönen Nachmittag.
Ich bin neu hier und sagen wir mal so: Ich kenn mich ein wenig mit html und css aus aber halt leider nicht so besonders gut. Ich versuche mich nun erstmals an einer "responsiven" Seite, also alles nur mit Prozentangaben, aber damit habe ich so meine Schwierigkeiten.

Ich habe 3 runde Bilder in einer Tabelle. Diese werden per css von der Größe her beschränkt. Firefox zeigt mir die 3 Bilder gleich groß an, im IE sehen sie unterschiedlich groß aus.
Hier das Beispiel: http://www.gunther.biz
Zitieren
#2
Man macht heutzutage keine Tabellenlayouts mehr.
Schau dir mal z.B. das an: https://www.w3schools.com/css/css_rwd_grid.asp

Oder die modernere Variante:
https://css-tricks.com/snippets/css/comp...uide-grid/
Allround Webdesign Freelancer | Design, HTML5, CSS3, JS, PHP, mySQL
Zitieren
#3
ah, okay, daran lag es also. Hab jetzt mal alles mit divs gemacht und jetzt funktioniert auch die Bildgröße.
Jetzt hat sich bei mir aber noch eine andere Frage aufgetan:
Mit responsive hab ich mich bisher wie gesagt noch nie beschäftigt, aber ich hab da jetzt doch noch eine Verständnisfrage dazu.
Kann das sein, dass ich sogut wie jedem Element eine Prozentangabe zuordnen muss, also auch den Schriften, damit das dann auf allen Auflösungen funktioniert??
Und kann man für responsive dann überhaupt noch Überschriften, also h1 und sowas verwenden, wenn man da ja keine genaue Größe weiß davon?
Sonst schafft man dass doch nie, dass die Website auf Tablet, Desktop und Handy gleich aussieht:
Oder hab ich da jetzt nen totalen Denkfehler drin.
Zitieren
#4
Lightbulb 
Hallo djsky,

Prozentangaben für alle Elemente sind nicht zwingend nötig.
Füge im HTML-Kopf folgende Zeile ein:
Code:
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
...
</head>

Du kannst die CSS-Angaben für unterschiedliche Anzeigebreiten mit Media Queries anpassen statt Prozentangaben:
Code:
<style>
/* Anpassung der Bilder an die maximal verfügbare Breite */
img,embed,video,.scale{max-width:100%;height:auto;vertical-align:middle;border:0;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
/* Formatierung der Überschrift für alle Anzeigebreiten */
h1{font-size:24px;}
/* Überschreiben der Formatierung der Überschrift für Anzeigebreiten unter 770px */
@media(max-width:769px){
    h1{font-size:16px;}
}
</style>

Best Practice wäre 'em' oder 'rem' statt 'px'...

Viele Grüße,
Chris
CE WebDesign München - Professionelle Webseiten | WebShops | eCommerce | Responsive Design | SEO
Zitieren


Gehe zu:


Benutzer, die gerade dieses Thema anschauen: 1 Gast/Gäste