Anzeige

Problem mit CSS

Problem mit CSS | PSD-Tutorials.de

Erstellt von dn3d_fanboy, 26.06.2013.

  1. dn3d_fanboy

    dn3d_fanboy Aktives Mitglied

    Dabei seit:
    04.11.2011
    Beiträge:
    775
    Geschlecht:
    männlich
    Ort:
    Eitorf
    Software:
    VS Code, Notepad++, PS CC, Mapster32
    Kameratyp:
    Dat Teil im Häändy
    Problem mit CSS
    Hallo allerseits,
    ich wieder mal ein Problem mit CSS. Und zwar geht es um folgende Seite:
    http://www.mod-job.com/radicalmind/index.html

    Dort habe ich im Content unten eine dreispaltige Übersicht mit float eingebaut. Das funktioniert auch einwandfrei. Das Problem sind die Überschriften darin. Diese habe ich zunächst in ein eigenes DIV gesteckt, da die Überschriften sonst das Logo bedecken (gibt es da auch eine bessere Lösung, ohne eine zusätzliche verschachtelte DIV Box?).

    Code (Text):
    1.  
    2. #column1-header, #column2-header, #column3-header {width: 235px;
    3.                                                   height: 85px;
    4.                                                   padding: 0px 0px 0px 85px;}
    5.  
    DAS funktioniert ja problemlos. Nun kommt der Haken. Die Überschriften (h2) habe ich auch zusammengefasst:
    Code (Text):
    1.  
    2. #column1-header, #column2-header, #column3-header h2    {font-family: SourceSansPro-Regular, Arial, sans-serif;
    3.                                                     font-size: 20px;
    4.                                                     color: #1d1d1b;
    5.                                                     font-style: italic;}
    Die Überschrift rechts wird in der korrekten Größe dargestellt. In der Mitte und links ist die Überschrift allerdings viel zu groß. Ich komme nicht drauf warum. Denn es wird die richtige Schriftart genommen und auch der font-style wird richtig dargestellt, nur die Größe halt nicht.

    Weiß irgendwer was da los ist?

    Es wäre echt nett, wenn mir jemand helfen könnte.

    Besten Dank im Voraus.
     
    #1      
  2. patrick_l

    patrick_l Stereotyp(e)

    22
    Dabei seit:
    11.05.2008
    Beiträge:
    7.629
    Geschlecht:
    männlich
    Ort:
    NRW
    Software:
    CS6/CC2017, Affinity, Atom, Brackets, PHPStorm, Pug, Sass, Wacom
    Kameratyp:
    Canon DSLR [...]
    Problem mit CSS
    AW: Problem mit CSS

    Wieso sprichst du nicht einfach die einzelnen Überschriften an und formatierst diese, so wie du sie haben willst. Das geht doch schon ganz ohne unnötige Divs. Davon abgesehen würde ich die Website »zukunftsorientiert« mit HTML5 umsetzen.

    Edit:
    HTML:
    1.  
    2. <div id="wrapper">
    3.       <section>
    4.         <div id="box1">
    5.           <h2>title</h2>
    6.         <p>text</p>
    7.       </div>
    8.       <div id="box2">
    9.           <h2>title</h2>
    10.         <p>text</p>
    11.       </div>
    12.     </section>
    13. </div>
    14.  
    In CSS nach Wunsch formatieren.

    Liebe Grüße, Patrick
     
    Zuletzt bearbeitet: 27.06.2013
    #2      
  3. mwxx

    mwxx Nicht mehr ganz neu hier

    Dabei seit:
    16.04.2008
    Beiträge:
    108
    Geschlecht:
    männlich
    Problem mit CSS
    AW: Problem mit CSS

    Oha, du sprichst auch nur die rechte Überschrift an !
    Du musst also statt
    "#column1-header, #column2-header, #column3-header h2" folgendes schreiben:
    #column1-header h2, #column2-header h2, #column3-header h2"
    um alle 3 anzusprechen.
     
    #3      
  4. znaxi

    znaxi Noch nicht viel geschrieben

    Dabei seit:
    22.08.2011
    Beiträge:
    3
    Geschlecht:
    männlich
    Problem mit CSS
    AW: Problem mit CSS

    da hat mwxx recht.
    Ich würde schon, bevor ich sie drei mal anspreche, eine Klasse für die h2 machen...ist aber Geschmackssache
     
    #4      
  5. deha

    deha Noch nicht viel geschrieben

    Dabei seit:
    19.11.2010
    Beiträge:
    19
    Geschlecht:
    männlich
    Ort:
    MVP
    Software:
    Photoshop, Illustrator, Rhino 3D, Bryce
    Problem mit CSS
    AW: Problem mit CSS

    Ich sehe keine float-Angaben in deinem css.
    Aber wenn du alle h2 in den colums per css formatieren möchtest, musst du auch alle IDs selektieren:

    #column1-header h2, #column2-header h2, #column3-header h2 {
    ...
    }
     
    #5      
x
×
×