1. #1
    Avatar von Snees
    Registriert seit
    18.11.2011
    Beiträge
    1.001
    Thanked 590 Times in 319 Posts

    Standard CSS bewerten + Verbesserungsvorschläge

    Hey, ich habe angefangen CSS zu lernen und mache nun mein erstes "ernsthaftes" Projekt und wollte fragen wie euch das Design gefällt & was ich noch besser machen kann. Es geht dabei um einen Itemshop für Onlinegames wie z.B. Minecraft.

    LG


  2. #2

    Registriert seit
    19.11.2011
    Beiträge
    229
    Thanked 102 Times in 64 Posts

    Standard AW: CSS bewerten + Verbesserungsvorschläge

    Interessanter fände ich den Code. Dann kann man auch sagen was du besser machen kannst..


  3. #3
    Avatar von Snees
    Registriert seit
    18.11.2011
    Beiträge
    1.001
    Thanked 590 Times in 319 Posts

    Standard AW: CSS bewerten + Verbesserungsvorschläge

    CSS:
    Code:
    body {
    	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    	background-color:#EDEDED;
    }
    .a1 {
    	background-color: black;
    	width:800px;
    	margin:auto;
    	border: 1px solid black;
    	margin-top:10px;
    	border-top-left-radius:5px;
    	border-top-right-radius:5px;
    	height:5px;
    }
    .a2 {
    	background-color: black;
    	width:800px;
    	margin:auto;
    	border: 1px solid black;
    	border-bottom-left-radius:5px;
    	border-bottom-right-radius:5px;
    	height:5px;
    	margin-bottom:10px;
    }
    #top {
    	width:800px;
    	background-color:white;
    	border:1px solid black;
    	height:auto;
    	text-align:center;
    	margin:auto;
    	color:black;
    	padding:10px 10px 10px 10px;
    	border-radius:5px;
    	font-size:22px;
    }
    .content {
    	width:800px;
    	background-color:white;
    	height:auto;
    	margin:auto;
    	text-align:center;
    	border:1px solid black;
    	padding:10px 10px 10px 10px;
    	border-radius:5px;
    }
    #footer {
    	width:800px;
    	background-color:white;
    	border:1px solid black;
    	height:auto;
    	text-align:center;
    	margin:auto;
    	color:black;
    	padding:5px 10px 5px 10px;
    	border-radius:5px;
    	font-size:12px;
    }
    table {
          width:600px;
          border-collapse: collapse;
          margin: auto;
        }  
        th,td {
          border:none;
        }
        th {
          background-color: black;
          color: #fff;
        }
        tr:nth-of-type(even) {
          background-color: #F3F3F3;
        }
        tr:nth-of-type(odd) {
          background-color: #ddd;
        }
        td:nth-child(n+2) {
          text-align: right;
        }
        td:nth-child(1) {
          text-align: left;
        }
        tr:last-child {
          font-weight: bolder;
        }
        td:last-child {
          font-weight: bolder;
        }
        tr:last-child td:last-child {
          font-size: 24px;
        }
        tr:nth-last-child(3) {
          color: green;
        }
        tr:nth-last-child(1) {
          color: green;
        }
        tr:nth-last-child(-n+3) td {
          text-align: right;
        }
    HTML:
    Code:
    <!DOCTYPE html>
    	<head>
    		<link rel="stylesheet" type="text/css" href="style.css" />
    		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    		<title>ItemShop v0.1</title>
    	</head>
    	<body>
    		<div class="a1"></div>
    		<div id="top">
    			ItemShop v0.1
    		</div>
    		<div class="a2"></div>
    		
    		<div class="a1"></div>
    		<div class="content">
    			Deine Einkäufe:
    		</div>
    		<div class="a2"></div>
    		
    		<div class="a1"></div>
    		<div class="content">
    			<table>
          <tr>
            <th>Produkt</th>
            <th>Preis</th>
            <th>Anzahl</th>
            <th>Gesamt</th>
          </tr>
          <tr>
            <td>1000 Gold</td>
            <td>10.00$</td>
            <td>5</td>
            <td>50.00$</td>
          </tr>
           <tr>
            <td>1 Monat Premium</td>
            <td>5.00$</td>
            <td>1</td>
            <td>5.00$</td>
          </tr>
           <tr>
            <td>1 Monat Fly-Modus</td>
            <td>5.00$</td>
            <td>1</td>
            <td>5.00$</td>
          </tr>
          <tr>
            <td colspan="3">Zwischensumme</td>
            <td>60.00$</td>
          </tr>
          <tr>
            <td colspan="3">Gebühren</td>
            <td>1.50$</td>
          </tr>
          <tr>
            <td colspan="3">Gesamt</td>
            <td>61.50$</td>
          </tr>
        </table>
    		</div>
    		<div class="a2"></div>
    		
    		<div class="a1"></div>
    		<div id="footer">
    			&copy; ItemShop v0.1 2012
    		</div>
    		<div class="a2"></div>
    	</body>
    </html>

  4. #4
    Avatar von Mr Amari
    Registriert seit
    19.11.2011
    Beiträge
    150
    Thanked 132 Times in 70 Posts

    Standard AW: CSS bewerten + Verbesserungsvorschläge

    Also!

    Code:
    height:auto;
    Musst du nicht machen, da er automatisch auto nimmt.

    Code:
    background-color: black;
    Hier kannst du das -color eigentlich wegnehmen und statt black, #000 nehmen.

    HTML-Code:
    <div id="top">
    ItemShop v0.1
    </div>
    Wäre mit <span> schöner, dann kannst du die im CSS mit #divname span, ansprechen.

    mfg.

  5. The Following User Says Thank You to Mr Amari For This Useful Post:

    Snees (16.08.2012)

Ähnliche Themen

  1. [Diskussion] Verbesserungsvorschläge für UH?!
    Von Cube!X im Forum Diskussion
    Antworten: 50
    Letzter Beitrag: 17.07.2012, 12:05
  2. Sig Bewerten
    Von x failstar im Forum Showroom
    Antworten: 7
    Letzter Beitrag: 25.05.2012, 21:56
  3. [S]: Verbesserungsvorschläge.
    Von Bossgen im Forum Angebot & Nachfrage
    Antworten: 2
    Letzter Beitrag: 24.05.2012, 15:58
  4. Test bewerten.
    Von Shane im Forum Showroom
    Antworten: 14
    Letzter Beitrag: 07.05.2012, 17:58
  5. Channel Hintergrundbild bewerten
    Von x failstar im Forum Darstellung
    Antworten: 10
    Letzter Beitrag: 13.04.2012, 16:27
Diese Seite nutzt Cookies, um das Nutzererlebnis zu verbessern. Klicken Sie hier, um das Cookie-Tracking zu deaktivieren.