CSS-Fragen @CODEKICKER

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 | 153 1

Slashi 342

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 | 249 2

meone 77

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 | 278 2

MRae 198

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 | 381 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 | 330 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 | 371 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 | 391 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 | 436 1

meone 77

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 | 603 1

meone 77

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 | 635 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 | 606 2

meone 77

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 | 1535 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 | 556 2

meone 77

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 | 451 1

meone 77

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 | 589 3

meone 77

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 | 717 3

meone 77

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 | 519 1

spiike 158

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 | 912 0

Matthias Hlawatsch 12770

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 | 466 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 | 635 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 | 520 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 | 678 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?

27.04.2012 | 426 1

SaurabhJ 11

27.04.2012

5

Nahtlose Hintergrundmuster

Wenn man dezent damit umgeht, können Hintergrundmuster für eine Webseite manchmal gut ankommen. Das Problem ist nur, dass sich bei gekachelten Hintergründen häufig künstlich wirkende Effekte ergeben, wenn die Kacheln nicht gut anschließen. Was muss man beachten, um ein gutes Ergebnis sicherzustellen?

26.04.2012 | 562 0

Behseini 21

26.04.2012

2

Positionierung in Formularen

... Webseite mit mehreren Feldern, und ich versuche, die Beschriftung so ansprechend wie möglich zu gestalten. Alle Eingabefelder sollen den gleichen Abstand vom linken Rand haben und die Labels sollen rechtsbündig vor den Feldern erscheinen. Bei meinen ersten Versuchen wollen die Felder einfach nicht korrekt untereinander stehen. Wie kann ich das mit CSS am besten erreichen?