mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Fr 29.03.2024 16:24 Benutzername: Passwort: Auto-Login

Thema: Dreamweaver - Responsive CSS vom 07.09.2015


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Allgemeines - Nonprint -> Dreamweaver - Responsive CSS
Autor Nachricht
patrickk83
Threadersteller

Dabei seit: 25.08.2015
Ort: -
Alter: -
Geschlecht: -
Verfasst Mo 07.09.2015 20:43
Titel

Dreamweaver - Responsive CSS

Antworten mit Zitat Zum Seitenanfang

Hallo Leute!

Ich habe mich ein wenig mit HTML und CSS beschäftigt (oder besser wieder mal) und
ein fertiges Template ein wenig abgeändert um mich wieder ein wenig einzuarbeiten.

Das Grundgerüst hätte ich meinen Wünschen entsprechend fertig. Jetzt möchte ich allerdings
die Seite für die mobilen Geräte (Smartphone, Tablet) abändern.

Dafür habe ich mir nun einige Tutorials angesehen und im Grunde verstehe ich, was ich
zu tun habe. Nur mit der Umsetzung will es noch nicht so ganz.

Hier mal die Seite:

Testseite

CSS

In der CSS ganz am Ende möchte ich jetzt eine andere CSS-Datei zuweisen. Wie funktioniert das?
<link rel="stylesheet" type="text/css" href="anderer_style.css" media="screen" /> oder nimmt man keine
neue Datei sondern gibt hier die einzelnen Formatierungen etc. für die Elemente einzeln ein?

Kann ich an dieser Stelle auch eine andere Seite zum Testen verlinken (z.B. index2.html)?

Sind sicher ganz blöde Anfängerfragen aber ich komme hier irgendwie nicht weiter.

Vielen Dank für eure Antworten,

lG Patrick
  View user's profile Private Nachricht senden
flavio

Dabei seit: 14.04.2003
Ort: MUC
Alter: 44
Geschlecht: Männlich
Verfasst Mo 07.09.2015 21:52
Titel

Antworten mit Zitat Zum Seitenanfang

nope
Code:

/* Smartphone */
@media screen and (max-width: 320px) {

<link rel="stylesheet" type="text/css" href="style.css" media="screen" />

   
}


da kommt kein weiterer Sheet rein

stattdessen schreibst du die css neu
Code:

/* Smartphone */
@media screen and (max-width: 320px) {

#mainnav {

   width: 500px;

}
   
}


Zuletzt bearbeitet von flavio am Mo 07.09.2015 21:53, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Anzeige
Anzeige
Struwwelpeter

Dabei seit: 25.08.2005
Ort: Stuttgart
Alter: 37
Geschlecht: Männlich
Verfasst Mo 07.09.2015 22:04
Titel

Antworten mit Zitat Zum Seitenanfang

Die korrekte Syntax für das Importieren eines Stylesheets findest du z.B. hier: https://developer.mozilla.org/de/docs/Web/CSS/@import
  View user's profile Private Nachricht senden
patrickk83
Threadersteller

Dabei seit: 25.08.2015
Ort: -
Alter: -
Geschlecht: -
Verfasst Di 08.09.2015 05:28
Titel

Antworten mit Zitat Zum Seitenanfang

Danke für eure Antworten!

Noch eine Frage: Wenn ich die hier verwendeten Bilder, egal ob jetzt im Header oder die
Slideshow, automatisch an die verkleinerte Seite anpassen möchte (z.B. 320px) muss ich
doch mit % Werten arbeiten oder habe ich da was falsch verstanden?

Wie gehört das bei meiner Seite korrekt eingestellt? Muss ich bereits beim wrapper mit Prozent
anfangen?

Danke nochmals,

lG Patrick
  View user's profile Private Nachricht senden
flavio

Dabei seit: 14.04.2003
Ort: MUC
Alter: 44
Geschlecht: Männlich
Verfasst Di 08.09.2015 07:00
Titel

Antworten mit Zitat Zum Seitenanfang

kurz gesagt besitzt der wrapper eine feste breite. andere elemente wie bilder, linke und rechte spalten etc. prozentuale.
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
patrickk83
Threadersteller

Dabei seit: 25.08.2015
Ort: -
Alter: -
Geschlecht: -
Verfasst Di 08.09.2015 09:49
Titel

Antworten mit Zitat Zum Seitenanfang

Vielen Dank!
  View user's profile Private Nachricht senden
patrickk83
Threadersteller

Dabei seit: 25.08.2015
Ort: -
Alter: -
Geschlecht: -
Verfasst Di 08.09.2015 11:24
Titel

Antworten mit Zitat Zum Seitenanfang

Was muss ich bei der Slideshow beachten um die Bilder entsprechend der
Bildschirmgröße anzupassen? Wenn ich hier width und height auf auto stelle
so ändert sich leider bei mir nichts.
  View user's profile Private Nachricht senden
m
Moderator

Dabei seit: 18.11.2004
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Mi 09.09.2015 09:38
Titel

Antworten mit Zitat Zum Seitenanfang

Code:
    img {
      height: auto;
      max-width: 100%;
    }
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
 
Ähnliche Themen Responsive Image Map
responsive layout
RESPONSIVE WEBDESIGN?
Responsive Webdesign
Responsive Webdesign
Responsive Tester
Neues Thema eröffnen   Neue Antwort erstellen
MGi Foren-Übersicht -> Allgemeines - Nonprint


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.