css für Verschiedene bildschriemauflösungen

xzillen · 15.04.2016

Hallo zusammen

Ich weiss jetzt nicht ob ich in der rubirk mit meinem thema richtig bin falsch ich hier falsch bin bitte verschieben vielen dank

ich habe mal ne
Ich habe für joomla ein template erstellt
jetzt möchte ich für dieses Template eine bzw mehere css datein anlegen die für verschiedene Bildschirmauflösungen sind aber ohne das die haupt css datei überschrieben wird.

jetzt meine frage da ich nicht weiss wie ich das am besten machen kann ..

Wie lege ich die datei am besten an das einmal die haupt css geladen wird
und wenn die seite auf einen pc mit anderer bildschirm auflösung aufgerufen wird das die passende css datei dazugeladen wird .

hedoo · 15.04.2016

Moin, du brauchst nur die css-Datei für die anderen Auflösungen hinter deiner template css in der index.php deines Templates einzubinden:

Code:

<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/template.css" type="text/css" media="screen, projection" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/DEINENEUECSS.css" type="text/css"  media="screen" />

Fugel · 15.04.2016

xzillen schrieb:
Hallo zusammen

Ich weiss jetzt nicht ob ich in der rubirk mit meinem thema richtig bin falsch ich hier falsch bin bitte verschieben vielen dank

ich habe mal ne
Ich habe für joomla ein template erstellt
jetzt möchte ich für dieses Template eine bzw mehere css datein anlegen die für verschiedene Bildschirmauflösungen sind aber ohne das die haupt css datei überschrieben wird.

jetzt meine frage da ich nicht weiss wie ich das am besten machen kann ..

Wie lege ich die datei am besten an das einmal die haupt css geladen wird
und wenn die seite auf einen pc mit anderer bildschirm auflösung aufgerufen wird das die passende css datei dazugeladen wird .

Wieso verwendest du nicht einfach media queries?

Code:

@media (min-width: 700px) { ... }

Schaddi · 15.04.2016

Richtig. Damit kannst Du am bequemsten alles einstellen.
Z.b. Content ausblenden oder Größen ändern

Code:

@media screen and (max-width: 1550px){
div#pkcontent_right {
display:none;}
div#pkcontent_left{
width:468px;}}

xzillen · 16.04.2016

Vielen danke

Ich habe schon den vorschlag von
hedoo versucht hat aber nicht so ganz klappt .

wo musste ich die
media queries den eintragen ich bin nicht wirklich bewandert in dem bereich html und css .

Fugel · 16.04.2016

Einfach so wie es @Schaddi schon geschrieben hat am besten am Ende deiner CSS.

xzillen · 16.04.2016

ok ich werde das mal test
nur muss ich dann mal gucken welche px ich angeben muss bei
max-width damit das mit der auflösung des bildschrim passt.

Schaddi · 16.04.2016

xzillen schrieb:
(...)wo musste ich die
media queries den eintragen (...)

Gerade nochmals Deinen ersten Beitrag durchgelesen:
Das was Du suchst müßte sein:

Code:

<link rel="stylesheet" type="text/css" media="only screen and (max-device-width: 480px)" href="small.css" /">
<link rel="stylesheet" type="text/css" media="only screen and (max-device-width: 960px)" href="big.css" /">

usw.
bzw:
@media screen and (max-width: 550px){
href="small.css;}
}
@media screen and (min-width: 551px){
href="big.css;}
}

xzillen · 16.04.2016

ich habe das mal so mal ein getragen nur die css datei ausgetaucht
aber die datei werden nicht geladen

dn3d_fanboy · 17.04.2016

xzillen schrieb:
ich habe das mal so mal ein getragen nur die css datei ausgetaucht
aber die datei werden nicht geladen

Der Code ist auch etwas durcheinander. Du hast so gesehen zwei Möglichkeiten:

1. du lädst die CSS in seperaten Dateien im HTML-Header (also nach der bestehenden style.css, oder wie auch immer sie heißen mag)

HTML:

<link rel="stylesheet" type="text/css" media="only screen and (max-device-width: 480px)" href="small.css" />
<link rel="stylesheet" type="text/css" media="only screen and (max-device-width: 960px)" href="big.css" />

^^ Die Monitorbreiten und Dateinamen musst du dann entsprechend anpassen.

Diese Methode hat allerdings den Nachtteil, dass weitere Requests beim LAden der Seite auf dem Server ausgeführt werden müssen.

Da ist
2.) die Media-Queries direkt ans Ende der bestehenden CSS-Datei zu schreiben wesentlich besser (mMn):

CSS:

@media screen and (max-width: 550px){

deine CSS-Angaben

}

Da du ja in dieser Datei schon sämtliche Angaben für breitere Monitore hast, musst du in den Media-queries nur noch das angeben, was bei niedriger Auflösung anders aussehen soll.
Du kannst natürlich auch noch weitere Media Queries angeben.

xzillen · 17.04.2016

Vielen dank dn3d_fanboy,

Ich habe das mal mir der Media-Queries direkt ans Ende der bestehenden CSS-Datei getestet
ich weis nicht ob ich da was flasch gemacht habe.
es hat aber geklappt
ich habe diesen code von dir ans ende der css datei gepackt und den teill deine CSS-Angaben mit den angaben ersetzt die von den haupt werten abweichsen .
@media screen and (max-width: 550px){

deine CSS-Angaben

}
aber es hat nicht geklappt er hat die änderungen nicht an dem test pc mit anderer bildschrimauflösung (1366X768)nicht angezeigt.

Fugel · 17.04.2016

Zeig doch mal dein Code

dn3d_fanboy · 17.04.2016

Ja, bitte zeige uns mal deinen Code.

dn3d_fanboy · 17.04.2016

Da fehlen aber die Media-Queries. ;-)

xzillen · 17.04.2016

ich habe den wieder raus gelöscht da es ja nicht geklappt habt

aber der code sah so aus . aber nur mit anderen werten
@media screen and (max-width: 550px){
#nav{
height: 439px;
width: 9%;
margin-left: -0.0%;
margin-top: -71.1%;
list-style-type: none;
}
}

dn3d_fanboy · 17.04.2016

xzillen schrieb:
ich habe den wieder raus gelöscht da es ja nicht geklappt habt

aber der code sah so aus . aber nur mit anderen werten
@media screen and (max-width: 550px){
#nav{
height: 439px;
width: 9%;
margin-left: -0.0%;
margin-top: -71.1%;
list-style-type: none;
}
}

Hmm, also ich sehe da keine Änderungen zu der CSS in deinem Link:

CSS:

#nav{
    height: 439px;
    width: 9%;
    /* [disabled]border-left-color: #000000; */
    border-right: 1px solid #000000;
    border-bottom: 1px solid #000000;
    /* [disabled]border-top-color: #000000; */
    /* [disabled]border-left-style: solid; */
    /* [disabled]border-top-style: solid; */
    /* [disabled]border-left-width: 1px; */
    /* [disabled]border-top-width: 1px; */
    margin-left: -0.0%;
    margin-top: -71.1%;
    text-align: center;
    list-style-type: none;
    }

Was sollte sich denn da bei niedrigen Auflösungen ändern?

xzillen · 17.04.2016

ich habe doch geschrieben so sah der code aus den ich wieder raus gelöscht habe nur mit anderen werten
was ich ändern wollte ist ein mal die margin werte
und eventuell die höhe .

Fugel · 18.04.2016

xzillen schrieb:
ich habe den wieder raus gelöscht da es ja nicht geklappt habt

aber der code sah so aus . aber nur mit anderen werten
@media screen and (max-width: 550px){
#nav{
height: 439px;
width: 9%;
margin-left: -0.0%;
margin-top: -71.1%;
list-style-type: none;
}
}

Da kann sich auch nichts ändern, denn die Werte in deinem Query sind genau die selben wie in deiner CSS.

Anbei mal noch ein kleines Beispiel wie es richtig ist: https://jsfiddle.net/88md5v4r/#&togetherjs=LEyz3Ea8rm

xzillen · 18.04.2016

Ja das ist ja klar das die werte gleich sind

Ich habe aber oben geschrieben so sah der code aus den ich gelöscht habe nur mit anderen werten
Mir sind werte nicht mehr eingefallen

Ich habe da ihrgent was an % werten eingetragen um das zu testen .

Schaddi · 18.04.2016

Ich bin raus :confused: