CSS-Fragen @CODEKICKER

4

CSS Textumbrüche / Text abschneiden

Hallo, ich habe aktuell vor, einen Text innerhalb eines Containers (DIV) bei Überlänge abzuschneiden. Um zu symbolisieren das der eigentlich Text noch länger ist, soll dieser mit drei Punkten am Ende gekennzeichnet sein. In dem Beispiel (Container 1) habe ich das für 1-zeiligen Content bereits hinbekommen, jedoch schaffe ich es nicht das ganze so zu gestallten, dass bei ...

Es gibt einen kleinen Trick den du verwenden kannst: Beispiel .containerIn2 { position: relative; ... } .containerIn2:after { content: "..."; text-align: right; position: absolute; bottom: -2px; right: 0; width: 1em; height: 1.2em; background: white; } Könnte man auch mit linear-gradient kombinieren um "auszufaden".

01.07.2014 | 134 2

Slashi 364

01.07.2014

1

CSS-Pseudoklasse für Verschachtelungstiefe?

Hallo, gibt es eigentlich eine css -pseudoklasse, die die Verschachtelungstiefe berücksichtigt? Ich hab z.B. beliebig viele verschachtelte Listen und möchte dass jede zweite Verschachtelungsebene eine andere ... weil nth-child ja nicht die Verschachtelungstiefe beachtet. Ich würde das ganze gerne ohne jQuery und JavaScript, also rein in CSS lösen. Hat jemand eine Idee?

20.03.2014 | 229 1

Smartin 15

20.03.2014

3

Probleme mit einem CSS Layout

... ich, ich entwerfe kurz ein simples CSS Layout. Leider scheint mein Anliegen entweder gar nicht so ... Wald nicht mehr. Ich möchte ein CSS Layout in 3 Teilen aufbauen. http://ftp.slxdev.net/layout.png Ich bekomme zwar ... allerdings kann ich diesen durch die CSS Property "position:absolute" nicht mehr richtig gestallten. Die 100% Breite ... wie man ein solches Layout via CSS umsetzt.

HTML: div class "OUTER" div class "LEFT" LEFT /div div class "TOP" TOP /div div class "BOTTOM" BOTTOM /div /div CSS : .OUTER{ width:100%; height:600px; } .OUTER, .OUTER DIV{ -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; } .LEFT{ background:#f00; width:20%; height:100%; float:left; } .TOP{ background:yellow; width:80%; ...

27.01.2014 | 271 1

Slashi 364

27.01.2014

1

Mobile: Wie Zoll abfragen?

Hallo Problem: Responsive Website. Ich muss heraus bekommen wie viel Zoll der Bildschirm hat. 7 Zoll oder 10 Zoll. Klar, kann ich mit Media Queries arbeiten, über Pixel & PPI, erscheint mir jedoch nicht so wirklich praktikabel. Da müsste ich ja dutzende erstellen. Die Maße unterscheiden sich ja immer etwas und auch die PPI... wie würdet ihr das lösen, nur die 7 Zoll Geräte ...

13.11.2013 | 427 2

meone 79

13.11.2013

1

Liste mit Bildern und Rahmen - Rahmen drehen, Bild fixieren

... gedreht. Das Bild allerdings auch mit. Wie kann ich nun also die Bilder zentrieren und zusätzlich dafür sorgen, dass diese nicht mit gedreht werden. Geht hier eventuell noch was mit CSS oder kann ich die selbe Liste nochmal nachbilden und die andere überlagern? Ich hoffe auf eure Hilfe und bedanke mich im Voraus PS Da ich nicht soo der HTML/CSS-Experte bin, könntet ihr mir ...

... ) eingefügt. Die Animation selbst wird dann über folgenden CSS -Code definiert: /* Animation beim hover/mouseover */ .border:hover { ... Element fährt. Mit der :hover-Pseudoklasse definierst du, dass der CSS -Code nur gelten soll, wenn der Mauszeiger auf dem ... steht. Ich würde auch das ! bei Erfolg mit CSS anhängen, statt mit JavaScript #erfolg:hover:after { content: '!'; } Mit ...

23.08.2013 | 424 2

MRae 259

23.08.2013

5

Javascript CCS-Popup "wegklicken"

Hallo, welche Möglichkeiten gibt es ein CSS -Popup durch klicken in einen anderen Bereich zu schließen? Ich benutze jquery um bei onclick einen Info Bereich zu öffnen der aber neben einen X auch per "wegklicken" geschlossen werden sollte. MFG Skiller

body{ width:100%; height:100%; min-height:1000px; } ('body').click(function(){ alert('close Popup'); }); Demo: jsfiddle.net/SWUYs/1// Edit: Wenn man das klicken aufs PopUp und die Child's davon ignorieren will geht das zum Beispiel so: ('body').click(function(event){ if( (event.target).parents('.popUp').addBack().is('.popUp')) return; alert('close ...

29.04.2013 | 495 1

skiller 90

29.04.2013

1

Redesign osclass template

Moin, hat jemand Lust ein Redesign des Real-Estate Templates für Osclass zu übernehmen? Technologie: HTML5/CSS/JQuery Kriterien: Flexibles (z.B. 2-stufiges) Layout zur Anzeige im Browser mit etwa 1024px Breite und zur Anzeige auf dem Smartphone mit etwa 360px Breite. Einen Link zum bisherigen Entwicklungsstand schicke ich gerne per PM zu. Gruß Stefan

22.03.2013 | 487 0

stefanhej 1

22.03.2013

1

Ein Problem mit einer jquery Animation

... sie nur in dieser box zu sehen ist. Es ist eine einfache Bewegung von rechts nach links von Köpfen, Spiele ich die Animation ab laufen die Köpfe über meine gesamte Seite von rechts nach links ich möchte das sie aber nur in der bestimmten Box zu sehen sind. Muss ich eine CSS -Eigenschaft hinzufügen oder einen jQuery-Befehl eingeben? Oder muss ich was anderes verändern? bitte um Hilfe

20.02.2013 | 463 1

SVD 1

20.02.2013

1

hintergrundfarbe in tabelle wenn 2 datensätze gleiche nummer haben

Hi, ich stehe vor einem Problem, ich habe einen Datensatz aus einer MYSQL Tabelle diese tabelle muss ich abbilden so sieht das ergebnis im beispiel aus: id nummer text 1 115 ss 2 115 sf 3 116 fsd 4 116 fs 5 116 sf 6 117 fs 7 117 sf ich möchte nun alle zeilen die die gleiche nummer haben (115,116,117) farblich zusammenfassen, sprich ihnen die gleiche hintergrundfarbe geben, das ganze ...

... einfach die Nummern und CSS -Klassen über ein assoziatives Array verwalten, ... die Menge definierter CSS -Klassen beschränkt. Das würde dann in etwa so aussehen: css Array array(); // ... foreach( rows ... nummer row['nummer']; if( css Array[ nummer] null) { css Array[ nummer] "farbe-" . count( css Array); } css Klasse css Array[ nummer]; //... ? tr class " ?php echo css Klasse; ? ... Bei ...

23.01.2013 | 474 3

RoqueM 3

23.01.2013

1

Legend (Formular) beim IE7 ohne Zeilenumbruch?

Hallo Habe ein Problem... nutze Contao... das Formular gibt für die Feldbeschreibung ein Legend vor. Doch der Inhalt ist relativ lang und beim IE7 geschieht am Ende kein Zeilenumbruch??? Jemand eine Idee? legend{display:inline...} hat nichts gebracht. Eine feste Breite ist angegeben.

21.01.2013 | 534 1

meone 79

21.01.2013

2

Mobil - HTML Darstellen Breite erzwingen?

Hallo Habe ein Problem mit einem HTML Newsletter, wobei ähnlich tritt es auch einfach nur in der Online HTML Version im Browser: Ich habe eine feste Breite von 650 PX (dem Wrapper margin:0 auto zum zenrieren). Und Font-Size: 11px. Auf mobilen Geräten ist es nun so, dass das Verhältnis von Schrift zum Wrapper nicht mehr gleich ist. Also die Schrift bricht viel früher um, der Wrapper ...

13.12.2012 | 716 1

meone 79

13.12.2012

2

Bootstrap Navigation in Mobiler Ansicht

Hallo, ich erstelle zurzeit ein Template mit Bootstrap, ich verwende das Standard Dropdown Menü. Sobald ich das Browser Fenster verkleinere bzw. das Design auf einem Mobilen Gerät ansehe bekomme ich einen Button auf den ich klicken muss um die Navigation darzustellen. Wie funktioniert es das in der Mobilen Ansicht die Navigation sofort sichtbar ist und nicht erst auf klick ? ...

02.12.2012 | 749 1

tom_means 1

02.12.2012

2

Checkbox - Label 2 Zeilig daneben

... id "opt_776_5" class "checkbox" type "checkbox" value "selbständige/r Unternehmer/in" name "aktuelleBeschaeftigung[]" label id "lbl_776_5" for "opt_776_5" selbständige/r Unternehmer/in /label /span CSS : span{ width:200px; } input{ margin:0px; clear:left; float:left; } .checkbox{ } label{ margin:0px; width:130px; float:left; } Problem: Aktuell ist das label ...

01.12.2012 | 760 2

meone 79

01.12.2012

2

per JQuery div-maße auslesen und anderem DIV zuweisen

... ich ...) Die Höhe des HotDeal-Divs variiert aber immer, also dachte ich ich lese die maße aus und verpasse dem div der darüber liegen soll dessen werte. Nur ist meine synthax irgendwie falsch ?-? ... hoffe jemand kann mir da nen tipp geben. Zusammengefasst: Die maße eines div's sollen per jquery ausgelesen werden und einem weiteren div per css zugewiesen werden :) gruß GioCece

Du musst beim zweiten Parameter die Anführungsstriche weg lassen: ("DIV.out-of-date").css( "width", dealWidth ); ("DIV.out-of-date").css( "height", dealHeight ); Anmerkungen: Ein paar Verbesserungen an deinem Code (z.B. Object-Referenz-Caching): script (document).ready(function() { var #divHotDeal ("#hot-deal"); ("DIV.out-of-date").css({ width: ...

26.11.2012 | 2228 1

GioCece 114

26.11.2012

2

LESS CSS - Variablen an Klasse binden?

Hallo Statt einfaches CSS finde ich LESS (http://www.lesscss.de/) viel angenehmer zum programmieren. Dort habe ich am Anfang der "Css " Datei alle meine Farben definiert (Bsp): @lila_light:#111; @blau_kraeftig: #222; @blau_dunkel: #333; Danach mein ganzes CSS aufgebaut. Nun gibt es eine zweite ... Nur die Farben anders. Hunderte Zeilen CSS Code durchgehen und die Farben zB in ...

... brauchst in LESS ja nur die Variablen ändern, das CSS -Gerüst bleibt davon ja unberührt. Alternativ halt ganz umständlich, ... die Variablen wieder in zwei Dateien und das CSS -Gerüst in einer dritten und je nach aufgerufender Seite, ... entsprechende farben*.less mit der .less vom CSS -Gerüst und gibst der PHP noch einen header mit, ... vorgaukelt, es würde sich um eine CSS -Datei handeln.

16.11.2012 | 647 2

meone 79

16.11.2012

1

DIV animate zu fixed

Hallo hier wird ja echt immer super geholfen, danke dafür :) aside id "right" div class "inside" div id "warenkorb_inhalt" /div /div /aside #right{ position: relative; top:-1.2em; } Soweit läuft alles. Nun soll sobald man 350PX runter scrollt... der div fixiert werden. Dass er immer oben am Browserfenster recht ist. Aktuell habe ich dafür die unten aufgeführte Funktion. Was ...

13.11.2012 | 535 1

meone 79

13.11.2012

2

Layout Mittig - links/rechts davon bis zum Browser Rand eine Spalte

Hallo Aktuell: #wrapper{ width:1200px; margin:0 auto; div id "wrapper" div id "top" /div div id "left" /div div id "main" /div div id "right" /div div id "footer" /div /div Klappt soweit. So ist die eigentliche Seite. Nun soll dieses "verschönert" werden mit 2 Divs, die die Flächte links und rechts davon unterschiedlich füllen. Die Flächte soll immer vom Browser Rand bis zum ...

So als Ansatz würde ich folgendes CSS verwenden: #wrapper{ min-width:1000px; /* #wrapper will mindestens 1000px */ max-width:1200px; /* und maximal 1200px vom Browser */ margin:0 auto; /* Damit die äußeren Spalte auch hinter #wrapper verschwinden */ position: relative; z-index: 100; } #left-outer { width: 50%; /* damit die Hintergrundfarbe von #left-outer hinter ...

12.11.2012 | 688 3

meone 79

12.11.2012

6

Relative Div soll sich der Höhe vom absoluten DIV anpassen

Hallo Eltern Div ist relativ positioniert. Dadrin sind 3 absolut positionierte Divs mit unterschiedlichen Höhen, anfangen tun sie alle aber an exakt der gleichen Stelle. Es ist immer nur ein Div davon eingeblendet (wechselt per JavaScript). Nun soll sich die Höhe vom übergeordneten Div aber immer automatisch der Höhe des absoluten Divs anpassen... ohne das ich eine feste Höhe ...

So, wie Du es Dir vorstellst, geht es nicht. Absolut positionierte Elemente werden für die Berechnung der Größe ihres Containers nicht berücksichtigt, da beißt die Maus keinen Faden ab. Choose your poison: Auf floating und relative Positionierung ausweichen, siehe dazu z.B. diesen Thread bei stackoverflow. Die Container-Höhe per Javascript berechnen und setzen. Auch ...

29.10.2012 | 992 3

meone 79

29.10.2012

2

Performance von LESS

Hey Leute, wollte mal fragen ob jemand von euch schon Erfahrungen mit LESS machen konnte. Ich würde es gerne für ein Projekt verwenden, da ich aber nicht weiß wie Client-Performance-Lastig das ganze Framework ist, wollte ich mal hören was ihr davon haltet, bzw. ob ihr einen unterschied merkt. Viele Grüße Paul

... sehr stark vom der Art und Version des JavaScript-Inpreters abhängig. Die beste Lösung ist es eh, spätestens im Zuge des Deployments, LESS in CSS übersetzten zu lassen. Dazu kann man entweder den integrieten LESS-Compiler verwenden, oder einen für Windows: http://winless.org/ http://wearekiss.com/simpless Oder, wenn du ASP.Net benutzt: http://www.dotlesscss.org/

01.10.2012 | 616 1

spiike 160

01.10.2012

3

CSS-Problem im IE mit float und :before

... die ich bei SO keine Antwort bekommen habe. Wer weiß, vielleicht ist ja hier ein CSS -Experte dabei... Für das Problem, einen Container vertikal auf einer HTML-Seite zu zentrieren, aber so, ... Also würde ich das gerne eliminieren und dachte mir, das müßte doch auch mit einer CSS -:before-Anweisung gehen. Also habe ich den oben verlinkten Code leicht umgebaut. Das Ergebnis kann hier ...

18.07.2012 | 1045 0

Matthias Hlawatsch 13020

18.07.2012

1

Farbverlauf in Schriften einer Website

Mit einem transparenten Bild und CSS war es bislang möglich, Texte in Webseiten mit einem Farbverlauf zu vershen (siehe http://www.medienstammtisch.info/2011/09/05/verlauf-im-text-mit-css-und-transparentem-png). Kann man sowas in CSS 3 auch direkt machen oder muss man sich auch unter HTML5/CSS3 mit besagtem Trick weiterhelfen?

22.06.2012 | 536 1

Haytham Al-Absi 11

22.06.2012

3

Hintergrundfarbverläufe im Internet Explorer 9

Mit CSS (Cascading Style Sheets) kann ich in den meisten Browsern einen Hintergundfarbverlauf zuweisen und zwar in der folgenden Form: background-image: -browser-linear-gradient(top left, farbwert1-stop, farbwert2-stop); Im Internet Explorer 9 funktioniert das allerdings nicht. Wie kann ich hier den Hintergundfarbverlauf realisieren?

19.06.2012 | 750 2

RomeoX 11

19.06.2012

2

Der Präfix-Wahnsinn – muss das sein?

Nachdem die Webentwickler Jahre lang unter dem Browser-Krieg gelitten haben, scheint sich jetzt im CSS -Bereich wieder eine neue Katastrophe anzubahnen. Die verschiedenen Browserhersteller verwenden unterschiedliche Präfixe für sonst gleiche Wertzuweisungen, beispielsweise: background-image:-webkit-linear-gradient(#ff,#000); ...

02.05.2012 | 581 1

reeky_15 11

02.05.2012

3

Zentriertes Wasserzeichen

Für einige Seiten meiner Website möchte ich als Hintergrund eine Abbildung verwenden, die wie ein Wasserzeichen wirkt. Sie soll immer genau in der Mitte der Seite erscheinen, egal wie das Anwendungsfenster aufgezogen ist. Lässt sich das mit CSS irgendwie erreichen?

01.05.2012 | 774 2

umeshMCA 11

01.05.2012

1

Webdesign für Touchscreens

Wenn immer mehr Geräte Webseiten auf Touchscreens anzeigen, sind wir als Webdesigner herausgefordert, unsere Seiten möglichst von vornherein so anzulegen, dass sie auch auf Touchscreens leicht zu navigieren sind. Kennt jemand irgendwelche Frameworks, die beispielsweise leicht anpassbare Schaltflächen für mobile Seiten anbieten?