Beiträge von sketch.media

Man kann einzelne Elemente in einem Bild verlinken, wenn man eine Imagemap verwendet. Diese sind von Hand sehr fummelig zu schreiben, aber es gibt mittlerweile schon Generatoren und Editoren, die dir dabei helfen können.
http://imagemap-generator.dariodomi.de/ wäre ein Generator.

Dreamweaver und Photoshop können soweit ich weiß auch Image Maps erstellen

Einfach mal die betroffenen Elemente im Chrome oder Firefox dev tools via inspect anschauen, welche CSS-Regel greift. Diese Regel kann man mit einem genaueren Selektor überschreiben, wie bereits in der Antwort darüber erwähnt.

Falls !important verwendet wird, kann man das auch nur mit !important überschreiben.

Man kann via HTML5 Videos mit video-tag einbauen:

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
</video>

Width nur auf 100% setzen.
Ähnlich zum Videotag gibt es auch ein Autio-Tag. Hier einfach "autoplay" hinzufügen und zum verstecken, einfach das parent-div verstecken.

<audio controls autoplay>
  <source src="horse.mp3" type="audio/mpeg">
</audio>

Die border-width, die für die Schräge verantwortlich ist, wird in px festgelegt. Das ist ein fixer Wert der nicht in einem responsive Layout mitskaliert.

D.h. man muss diesen Wert entweder in % angeben, oder via media-Querys die px Werte in den verschiedenen Auflösungen anpassen.

Das Problem ist in diesem Fall nicht der Text oder die Inhalte, sondern der "Parent-Container" also einer der umschließenden Container des Textes.
Der Text sollte sich immer automatisch auf die Breite der Seite anpassen. Außer der Container hat einen fixen Breitenwert, dann würde dieser nicht mitskalieren. (z.B. width: 960px)

float funktioniert nur bei block elementen korrekt. Span ist default kein block.

d.h. span benötigt noch display: block. dann sollte es auch mit dem float klappen

Es gibt ein sehr praktisches jQuery Library names Datatables. Das bietet einen guten Funktionsumfang bzgl. Sortierung, Filterung etc.

Zu finden hier:
https://datatables.net/

Zitat von almenger

Hallo Zusammen,

könntet ihr mir vielleich weiterhelfen?

Habe das Problem das sich mein Menü entsprechend so darstellt:

Code

<li><a href="">Startseite</a>
  <ul>Unterseite1</ul>
  <ul>Unterseite2</ul>
</li>
<li><a href="">Obermenü2</a>
  <ul>Unterseite1</ul>
  <ul>Unterseite2</ul>
</li>

Nun wird aber alles untereinanter dargestellt, sprich:

Startseite
- Unterseite 1
- Unterseite 2
Obermenü
- Unterseite 1
- Unterseite 2

Kann ich dieses auch mit Css verwandeln, sodass es nebeneinander dargestellt wird?

Alles anzeigen

die Struktur der Liste ist einfach falsch.
das UL Element liegt um das LI element und nicht umgekehrt.

Anschließend kann man mit einer CSS Regel LI als "inline-block" setzen, dann werden die Listenpunkte nebeneinander dargestellt.

HTML korrekt:

<ul>
  <li><a href="">Startseite</a>
  <ul>
<li>Unterseite1</li>
  <li>Unterseite2</li>
</ul>
  </li>
<li><a href="">Obermenü2</a>
  <ul>
  <li>Unterseite1</li>
  <li>Unterseite2</li>
 </ul>
</li>
</ul>

Man kann mit CSS Hacks leider nur gezielt Browser ansteuern, jedoch nicht einzelne Funktionalitäten.

Das könnte man mit einem CSS-Hack lösen und nur Chrome ansteuern:

/* Chrome 42 (and Opera 29) */
@supports (-webkit-appearance:none) and (x:0)
  and (not (R:0)) {
    .selector { property:value; }  }

Die fertige CSS Datei enthält im Endeffekt alles aus den SCSS Dateien nach dem kompilieren. Falls jedoch Funktionen, Variablen oder ähnliches in den SCSS-Dateien verwendet wurden, ist es nicht möglich diese wiederherzustellen.

Es ist immer ratsam Dateien in einem Git zu haben. So kann nichts verloren gehen.

Ohne Code kann man nur Raten, wo der Fehler liegt.

Wenn du spezielle Layout-Positionen benötigst, die extakt an den gleichen Stellen bleiben sollen, dann eigent sich eine genaue Angabe in Pixeln für Breiten und Höhen.

Wenn du ein Layout benötigst, das auch auf Handies sich anpasst, dann solltest du mit %-Werten statt Pixeln arbeiten.
Hierrüber kann man aber ein Buch schreiben, ohne genaue Angaben. Hier wäre ein Überblick, wie man ein responsive Layout aufbauen kann: https://sketch.media/blog/ratgeber/…enstruktur.html

Hallo,

um dem Pfeil eigene Defintionen zu geben, kann man mit deinem CSS-Pseudo-Element arbeiten und den Pfeil rein über CSS-Einfügen
HTML wäre dann so

<a class="button arrow" href="#">SHOP NOW</a>

Anmerkung: Ich habe die "arrow" Klasse hinzugefügt, damit nur hier der Pfeil erscheint und nicht bei allen "button" Elementen.
CSS Code:

.button.arrow{
[COLOR=#333333]font-family: 'Martel Sans', sans-serif;[/COLOR]
[COLOR=#333333]font-size: 18px;[/COLOR]
[COLOR=#333333]padding-left: 20px; [/COLOR]
[COLOR=#333333]padding-top: 5px; [/COLOR]
[COLOR=#333333]padding-bottom: 5px; [/COLOR]
[COLOR=#333333]border-size: 1px;[/COLOR]
[COLOR=#333333]border-radius: 0;[/COLOR]
}
.button.arrow:after{
content:'>';
padding-left: 20px;
padding-right: 9px;
}

Anmerkung: Die Schriftart Martel Sans muss eingebunden sein, ansonsten wird nur die Standard sans-serif Schrift eingebunden.

Wir haben hier einen Beitrag, indem CSS-Pseudo-Elemente noch ein wenig erklärt werden, bzw in einem Beispiel dargestellt werden: https://sketch.media/blog/ratgeber/…rschoenern.html

Damit sich Bilder bei Geräten mit kleineren Displays korrekt darstellen und nicht über den Rand herausragen braucht man max-width: 100%; .
Gleichzeitig die height auf auto setzen, damit der Ratio korrekt bleibt.
Damit alle section-divs ihre Breite automatisch an das Gerät anpassen ist hier ebenfalls eine Width: 100%; nötig.
Das slider-div benötigt dann nur noch eine max-width und keine fixe width. Dann wird dieser ebenfalls mitskalieren.

Ein Slider der grundsätzlich responsive ist, ist z.b. der Flexslider.

.section img{
max-width: 100%;
height: auto;
}
.section{
width: 100%;
float: left;
clear: both;
}
.slider{
max-width: 800px;
}

Wir haben hier eine Artikelreihe, wie man eine responsive Seitenstruktur aufbaut: https://sketch.media/blog/web/372-e…r-aufbauen.html