Frage von dmida, 49

HTML Website für alle Bildschrimgrößen anpassen?

Guten Tag.

Ich habe ein Problem bei der HTML programmierung, für ein Projekt, dass ich für meine Schule mache.

Ich habe soweit die HTML Website fertig, jedoch muss ich diese noch an alle Bildschrimgrößen anpassen. (siehe Bilder wie es z.B. auf Smartphone Größe aussieht)

Ich kopiere euch mal den Style Bereich, für die verschiedenen DIV Bereiche, rein, ich schätze mal man muss dort Sachen verändern damit es sich anpasst.

Danke im Vorraus.

Links

{

width:15%;
height:50%;
float:left;



}

Links a

{

font-size:20px;
line-height:150%;
font-family: 'Oswald', sans-serif;
color:black;


}

Banner

{

width:15%;
height:50%;
float:right;



}

Banner a

{

font-size:20px;
line-height:150%;
font-family: 'Oswald', sans-serif;
color:white;


}

Links p

{

font-size:25px;
line-height:100%;
color:black;
font-family: 'Oswald', sans-serif;


}

center

{
font-family: 'Oswald', sans-serif;
height:25%;



}

center p

{
color:black;

font-size:22px;

}

center h1

{
color:black;
font-family: 'Oswald', sans-serif;
}

Tabelle

{

height:25%;


}

Tabelle iframe

{
align:center;   
}

Giveaway1

{
width:30%;
height:49%;
float:left;

    }

Giveaway1 a

{

font-size:20px;
line-height:150%;
font-family:Arial Black;


}

Giveaway1 p

{

font-size:22px;
line-height:150%;
font-family:Arial Black;
color:white;

}

Giveaway1 h2

{


color:white;

}

Giveaway2

{
width:30%;
height:49%;
float:right;

}

Giveaway2 a

{

font-size:20px;
line-height:150%;
font-family:Arial Black;


}

Giveaway2 p

{

font-size:22px;
line-height:150%;
font-family:Arial Black;
color:white;

}

Giveaway2 h2

{


color:white;

}

Giveaway3

{
width:40%;
height:40%;
float:left;

}

Giveaway3 p

{

font-size:22px;
line-height:150%;
font-family:Arial Black;
color:white;
font-family: 'Oswald', sans-serif;
}

Antwort
von medmonk, 12

Ich habe soweit die HTML Website fertig, jedoch muss ich diese noch an alle Bildschrimgrößen anpassen. (siehe Bilder wie es z.B. auf Smartphone Größe aussieht)

Das dein Layout nicht auf Geräten mit kleinerem Viewport dargestellt werden kann, sollte eigentlich klar sein. Dein Ansatz ist an sich schon falsch. Freunde dich daher mit Media Queries und allgemein  mit (mobile oder middle-first) responsive Webdesign an. Auch wenn ich dein Markup nicht kenne, eine Tabelle da nichts zu suchen hat. Tabellen sollten ausschließlich zur Darstellung tabellarischer Daten, jedoch nicht zum Layouten einer Website genutzt werden. Dir auch gleich vieles leichter fallen wird, wenn du ein Grid-System verwendest. Sei es ein Framework wie Bootstrap oder Foundation, oder lediglich ein Grid wie Skeleton. 

Was jetzt deine Website angeht, erst einmal dein Layout überarbeiten solltest. Mach dir Gedanken wie beispielsweise die Navigation auf mobilen Endgeräten dargestellt werden soll. Sofort sichtbar oder als Off-Canvas mit Toggle. Ebenso überlegen solltest, wie der Inhalt sich verhalten soll. Sprich neben und/oder untereinander. Dich also mit dem CSS Box-Model und Flexbox-Model beschäftigen solltest. Wenn du das mit Media Queries kombinierst, auf einem guten Weg bist. Ohne essentielles HTML und CSS Grundlagenwissen da nicht viel geht. Eigentlich sollten Frameworks nur genutzt werden, wenn man auch weiß und versteht, wie sie funktionieren und warum dieses oder jenes so oder so gelöst wurde. Dir aber mal Bootstrap, Skeleton oder ein anderes Framework/Grid-System anschauen solltest. 

LG medmonk 

Kommentar von medmonk ,

So nebenbei auch dein Stylesheet ein Paar Fehler hat und an manchen Stellen gekürzt werden kann. Wenn du überwiegend die selbe Schrift verwendest, diese global zuweisen solltest und nur bei all jenen Elementen überschreibst, deren Schrift davon abweicht.

Ebenso dir zur kurzen Schreibweise rate. Du sparst dir einerseits einiges an Schreibarbeit und anderseits alles etwas übersichtlicher bleibt. font-family, font-size und line-height wie folgt zusammenfassen kannst. 

/* long */
selector {
 font-size: 22px;
 font-family: 'Oswald', sans-serif;
 line-height: 150%;
}
/* short */
selector {
 font: 22px/150% 'Oswald', sans-serif;

LG medmonk 

Antwort
von surbahar53, 22

Der gewählte Ansatz ist einer von vielen möglichen. Grundsätzlich in Ordnung, weil alle Angaben für Breite und Höhe in % angegeben werden. Dass sich am Ende die einzelnen Bereiche dennoch überlappen, liegt am Font. Weil dieser fest vorgegeben ist, macht der Browser das zugrunde liegende Element mindestens so breit wie den umbrochenen Text. Abhilfe schafft wie bereits erwähnt das Stichwort "Media Queries" (googlen). Damit könnte man die Schriftgrösse schrittweise an den Viewport anpassen.

Allerdings bringt das auch nicht in allen Fällen die erwünschte Lösung, weil man nie weiss, wieviel Pixel eine Schrift in der Breite benötigt. Es kann dann sein, dass es abhängig vom Zielgerät und Zielbrowser bei bestimmten Grenzfällen wieder zu Überlappungen kommt.

Die Schriftgrösse würde ich noch in "em" angeben statt in "px", aber das Problem bleibt dasselbe.

Antwort
von eddiepoole, 14

du legst besser gleich 2 css dateien an. eine für große, eine für kleine auflösung angepasst. und dann fügst du in den head-abschnitt...

link rel="stylesheet" media="all and (min-device-width: 900px)" href="workstation.css"

link rel="stylesheet" media="all and (max-device-width: 900px)" href="mobile.css"

aber die spitzen klammern nicht vergessen. die separate mobile.css gibt dir die möglichkeit, deine divs oder articles nicht nur unterschiedlich breit, sondern auch untereinander statt nebeneinander anzuordnen.

Kommentar von medmonk ,

du legst besser gleich 2 css dateien an. eine für große, eine für kleine auflösung angepasst. und dann fügst du in den head-abschnitt...

Besser ist es nicht wirklich. Mobile ist ja nicht gleich mobil, da gibt es ja auch unterschiedlichste Geräte und Viewports. Ebenso es genügend Formatierungen gibt, die sowohl auf kleinen als auch auf großen Geräten verwendet werden. Man also wenigstens drei, eher bis fünf Stylesheets anlegen sollte.

- global.css
- mobile.css - phablet.css
- tablet.css - desktop.css

Statt für jedes Device ein eigenes CSS zu schreiben, man auch gleich eines verwenden kann und lediglich mit Hilfe der Media Queries einzelne Formatierungen überschreibt. Das spart einerseits unnötige Schreiberei und HTTP-Requests und bleibt im Ganzen übersichtlicher. 

/* -| Mobile-first queries |----- */ 

/* Global and mobile formatting */
* {attribut: value;}

/* Override for phablet */
@media (min-width: 34.375em) { }
/* Override for tablet */
@media (min-width: 46.875em) { }
/* Override for desktop */
@media (min-width: 62.500em) { }

Neben den Geräte-spezifischen Queries auch noch weitere Layout-bezogene Breakpoints hinzukommen können. z.B. für Elemente bei denen das Gruppieren mit oben genannten Queries nicht ausreicht. Diese jedoch hier mal außen vor lasse. 

LG medmonk 

Kommentar von eddiepoole ,

2 ist natürlich besser als 1. ob es gut genug ist, ist was anderes.

Antwort
von Xandoo94, 23

Media Queries ist hier das Stichwort ich empfehle aber hielt liberalen direkt auf ein fontendframework zurück zu greifen Bootstrap eignet sich da hervorragend

Antwort
von Ifm001, 15

Kennst Du schon das "responsive Webdesign"?

https://de.wikipedia.org/wiki/Responsive_Webdesign

Antwort
von kuechentiger, 12

Das schiebt sich alles einfach zusammen. Du musst das so machen, dass die einzelnen Blöcke (Links, Mitte, Rechts) eine Mindestbreite zugewiesen bekommen, ab der sie sich dann untereinander anordnen, statt immer schmäler nebeneinander zu bleiben.
https://blog.kulturbanause.de/2013/01/starre-layouts-in-flussige-layouts-umwande...

Keine passende Antwort gefunden?

Fragen Sie die Community