Ergebnis 1 bis 4 von 4

Thema: CSS News-Rechteck

  1. #1
    Teeny
    Registriert seit
    25.03.2013
    Ort
    A, A
    Beiträge
    21
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Frage CSS News-Rechteck

    Hallo!
    Wie kann ich mit css ein rechteck machen in dem es eine überschrift gibt was ich als news benutzen kann wovon ich mehrere auch untereinander packen kann?
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    Bandit
    Gast

    Standard AW: CSS News-Rechteck

    Was hast du denn bisher versucht?? Mit einem div sollte ein Rechteck ja wohl kein Problem sein.

  3. #3
    Prinz(essin)
    Registriert seit
    26.03.2013
    Beiträge
    835
    Danke
    20
    Bekam 76 mal "Danke" in 75 Postings

    Standard AW: CSS News-Rechteck

    Anleitung:

    Du nimmst ein Container, also Div-Element zum Beispiel.
    HTML-Code:
    <div>
    </div>
    Dem gibst du eine klasse, damit du mehrere davon ansprechen kannst.

    HTML-Code:
    <div class="news">
    </div>
    Dann fügst du eine Überschrift hinzu, h1 und h2 werden meist schon benutzt h3 oder h4 bieten sich an. Rangfolge beachten! Hier mal beispielhaft mit h4.

    HTML-Code:
    <div class="news">
        <h4>wichtige News</h4>
    </div>
    Danach folgen die News, hier mal als ungeordnete Liste:

    HTML-Code:
    <div class="news">
        <h4>wichtige News</h4>
        <ul>
            <li>Reissack in China umgefallen</li>
            <li>Reissack doch nicht umgefallen</li>
            <li>Die 10 schnellsten Reissackumfälle (Video)</li>
        </ul>
    </div>
    Wenn du das hast folgt die Verschönerung mit CSS. Du musst also angeben, wie breit dein Newskasten sein soll, was passieren soll mit dem Text, wenn er nicht rein passt in die Breite des Newskastens und welche Schrift und Farbe alles haben soll.
    Breite soll mal 200 Pixel sein. Überschrift in Fett und immer gross geschrieben. Zudem soll die Überschrift einen Hintergrund in grau haben. Der Kasten soll oben abgerundete Ecken haben.
    Die News selbst sollen 0.9 em gross sein und blau.
    Textumbruch wenn der Text zu gross ist.

    CSS
    Code:
    /* Newsbox */
    
    .news {
        width: 200px;
        border: 1px solid black;
        border-radius: 6px 6px 0 0;
    } 
    .news h4 {
        display:block;
        text-transform:uppercase;
        text-align: center;
        margin: 0;
        padding: 2px;
        background: grey;
        font: bold 1em/1.5em verdana, sans-serif;
    }
    
    .news li{
        color:blue;
        font-size:0.9em;
        word-wrap:break-word;
    }
    Und schon haben wir eine Newsbox.
    Geändert von explanator (08.04.2013 um 23:50 Uhr)

  4. #4
    Teeny
    Themenstarter

    Registriert seit
    25.03.2013
    Ort
    A, A
    Beiträge
    21
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: CSS News-Rechteck

    thx, richtig geil ^^

Ähnliche Themen

  1. Abgerundetes Rechteck 3D [CSS3]
    Von fridi100 im Forum HTML & CSS Forum
    Antworten: 1
    Letzter Beitrag: 03.10.2012, 14:49
  2. C# Rechteck auf eine schiefen Linie verschieben
    Von raphaelgranig im Forum Forum für alle anderen Programmiersprachen
    Antworten: 0
    Letzter Beitrag: 30.01.2011, 20:53
  3. News (ältere News)
    Von mymaddin im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 9
    Letzter Beitrag: 13.07.2007, 23:13
  4. ovales-rechteck-werkzeug krümmen
    Von goodn8 im Forum Forum für Grafiken und Bildbearbeitung
    Antworten: 0
    Letzter Beitrag: 06.04.2007, 16:33
  5. visible news items im News Portlet
    Von dulldeidi im Forum Zope & Plone - das deutsche Hilfeforum
    Antworten: 4
    Letzter Beitrag: 19.12.2006, 22:35

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •