Wie mache ich ein gutes bzw. passendes Design?

    wieso ahst du grade das bild genommen wo der bug ist? -.-.
    also ich hab die homepage eingeteilt.
    body ist der hintergrund,
    seite das ganze kästchen
    und dann noch navi und inhalt.



    wenn du den rand meinst dann das:
    border:1px ridge silver;

    nichts mit boxenmodul du machst z.B.


    body
    {
    text-align:center;
    }


    div#seite {
    width:1000px;
    height:100%;
    border:1px ridge silver;
    }


    und dann mit html:


    <div id="seite" >
    hier kommt der inhalt
    </div>





    und was mienst du mit wie man mit gimp ein design macht? Dort machst du nur die Bilder, hintergründe und mit css das layout.

    Danke schön...
    Foster ... aber wie soll ich den Üben wenn ich nicht weiss wie ich anfangen soll??



    und deathfighter bei mir klappt das nicht wieder mit style type???
    pls mach das mal in einem befehl sonst mache ich wieder ne andere kacke


    was kommt hier vor und dannach
    body
    {
    text-align:center;
    }


    div#seite {
    width:1000px;
    height:100%;
    border:1px ridge silver;
    }


    und dann mit html:


    <div id="seite" >
    hier kommt der inhalt
    </div>
    ????

    ??? meinst du

    Zitat

    ch wollte euch jetzt einmal ein img von meiner Hp schicken nur wie speicher ich das nnochmal auf meinem PC?

    ???


    Von deinem PC aus gar nicht, da es hier keine Möglichkeit zu einem Upload gibt. Könntest also nur Dateien einlinken, die auf irgend einem Server gespeichert sind

    wie fertig willst du es denn noch haben?


    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>Layout mit grafischer Spaltenaufteilung</title>
    <style type="text/css">
    body {
    color: black; background-color: white;
    font-size: 100.01%;
    font-family: Helvetica,Arial,sans-serif;
    margin: 0; padding: 1em 0;
    text-align: center; /* Zentrierung im Internet Explorer */
    }


    div#Seite {
    text-align: left; /* Seiteninhalt wieder links ausrichten */
    margin: 0 auto; /* standardkonforme horizontale Zentrierung */
    width: 760px;
    padding: 0;
    background: #ffffe0 url(hintergrund.gif) repeat-y;
    border: 2px ridge silver;
    }


    h1 {
    font-size: 1.5em;
    margin: 0; padding: 0.3em;
    text-align: center;
    background: #fed url(../../../src/logo.gif) no-repeat 100% 45%;
    border-bottom: 1px solid silver;
    }


    ul#Navigation {
    font-size: 0.83em;
    float: left; width: 200px;
    margin: 0 0 1.2em; padding: 0;
    }
    ul#Navigation li {
    list-style: none;
    margin: 0; padding: 0.5em;
    }
    ul#Navigation a {
    display: block;
    padding: 0.2em;
    font-weight: bold;
    }
    ul#Navigation a:link {
    color: black; background-color: white;
    }
    ul#Navigation a:visited {
    color: #666; background-color: white;
    }
    ul#Navigation a:hover {
    color: black; background-color: #eee;
    }
    ul#Navigation a:active {
    color: white; background-color: gray;
    }


    div#Inhalt {
    margin: 0 0 1em 220px;
    padding: 0 1em;
    }
    * html div#Inhalt {
    height: 1em; /* Workaround gegen den 3-Pixel-Bug des Internet Explorer bis Version 6 */
    margin-bottom: 0;
    }
    div#Inhalt h2 {
    font-size: 1.2em;
    margin: 0.2em 0;
    color: navy;
    }
    div#Inhalt p {
    font-size: 1em;
    margin: 1em 0;
    }


    p#Fusszeile {
    clear: both;
    font-size: 0.83em;
    margin: 0; padding: 0.1em;
    text-align: center;
    background-color: #fed;
    border-top: 1px solid silver;
    }
    </style>
    </head>
    <body>


    <div id="Seite">
    <h1>CSS-basierte Layouts</h1>


    <ul id="Navigation">
    <li><a href="einfuehrung.htm">Einführung in CSS-basierte Layouts</a></li>
    <li><a href="mehrspaltige.htm">Mehrspaltige CSS-basierte Layouts</a></li>
    <li><a href="fixbereiche.htm">Fixe Bereiche mit CSS-basierten Layouts</a></li>
    <li><a href="navigationsleisten.htm">CSS-basierte Navigationsleisten</a></li>
    <li><a href="browserweichen.htm">CSS-Browserweichen</a></li>
    </ul>


    <div id="Inhalt">
    <h2>2-spaltiges Layout mit Hintergrundgrafik</h2>
    <p>In diesem Beispiel wird eine Hintergrundgrafik
    zur optischen Trennung der Spalten verwendet.</p>
    <p>Dies erfordert leider, dass die Breite der links stehenden Navigation
    passend zur Hintergrundgrafik in 'px' angegeben wird.
    Dadurch kann sich die Breite dieser Box einer Änderung des Schriftgrades
    nicht anpassen.</p>
    <p>Wie die links graue Hintergrundgrafik ist auch die gelbe Hintergrundfarbe
    des Inhaltsbereichs dem die Seitenelemente umschließenden DIV zugewiesen.
    Sowohl für die Navigation als auch für diese Inhaltsbox ist selbst
    kein Hintergrund angegeben.<br>
    Die durchgehende Trennung der Boxen wird somit lediglich optisch simuliert
    und ist unabhängig von deren Höhe.</p>
    <p>Der Kopf- und der Fußzeile wurde eine Hintergrundfarbe zugewiesen,
    damit sich die optische Trennung nicht auf diese Bereiche ausdehnt.</p>
    </div>


    <p id="Fusszeile">Diese Fußzeile stellt innerhalb des umschließenden DIVs
    den Elementenfluss wieder her.</p>
    </div>


    </body>
    </html>






    Das hier ist nun ganz ferig und du kannst nichts mehr falsch machen

    so
    ich habe es damit so weit gebracht...
    <!-- m --><a class="postlink" href="http://img3.imagebanana.com/img/vz78zk7z/tim.jpg">http://img3.imagebanana.com/img/vz78zk7z/tim.jpg</a><!-- m -->
    mit diesen befehlen


    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>Layout mit grafischer Spaltenaufteilung</title>
    <style type="text/css">
    body {
    color: black; background-color: white;
    font-size: 100.01%;
    font-family: Helvetica,Arial,sans-serif;
    margin: 0; padding: 1em 0;
    text-align: center; /* Zentrierung im Internet Explorer */
    }


    div#Seite {
    text-align: left; /* Seiteninhalt wieder links ausrichten */
    margin: 0 auto; /* standardkonforme horizontale Zentrierung */
    width: 760px;
    padding: 0;
    background: #0099FF url(hintergrund.gif) repeat-y;
    border: 2px ridge silver;
    }


    h1 {
    font-size: 1.5em;
    margin: 0; padding: 0.3em;
    text-align: center;
    background: #fed url(../../../src/logo.gif) no-repeat 100% 45%;
    border-bottom: 1px solid silver;
    }


    ul#Navigation {
    font-size: 0.83em;
    float: left; width: 200px;
    margin: 0 0 1.2em; padding: 0;
    }
    ul#Navigation li {
    list-style: none;
    margin: 0; padding: 0.5em;
    }
    ul#Navigation a {
    background-color:#0099FF;
    display: block;
    padding: 0.2em;
    font-weight: bold;
    }
    ul#Navigation a:link {
    color: black; background-color: #0099FF;
    }
    ul#Navigation a:visited {
    color: #666; background-color: #0099FF;
    }
    ul#Navigation a:hover {
    color: black; background-color: #eee;
    }
    ul#Navigation a:active {
    color: white; background-color: gray;
    }


    div#Inhalt {
    margin: 0 0 1em 220px;
    padding: 0 1em;
    }
    * html div#Inhalt {
    height: 1em; /* Workaround gegen den 3-Pixel-Bug des Internet Explorer bis Version 6 */
    margin-bottom: 0;
    }
    div#Inhalt h2 {
    font-size: 1.2em;
    margin: 0.2em 0;
    color: navy;
    }
    div#Inhalt p {
    font-size: 1em;
    margin: 1em 0;
    }


    p#Fusszeile {
    clear: both;
    font-size: 0.83em;
    margin: 0; padding: 0.1em;
    text-align: center;
    background-color: #fed;
    border-top: 1px solid silver;
    }
    </style>
    </head>
    <body>


    <div id="Seite">
    <h1>Tim's Zauberkiste</h1>


    <ul id="Navigation">
    <h4>Aktuell</h2>
    <li><a href="index.htm">News</a></li>
    <li><a href="index.htm">Termine</a></li>
    <h4>Bundesliga</h2>
    <li><a href="index.htm">Tabelle</a></li>
    <li><a href="navigationsleisten.htm">CSS-basierte Navigationsleisten</a></li>
    <li><a href="browserweichen.htm">CSS-Browserweichen</a></li>
    </ul>


    <div id="Inhalt">
    <h2>2-spaltiges Layout mit Hintergrundgrafik</h2>
    <p>In diesem Beispiel wird eine Hintergrundgrafik
    zur optischen Trennung der Spalten verwendet.</p>
    <p>Dies erfordert leider, dass die Breite der links stehenden Navigation
    passend zur Hintergrundgrafik in 'px' angegeben wird.
    Dadurch kann sich die Breite dieser Box einer Änderung des Schriftgrades
    nicht anpassen.</p>
    <p>Wie die links graue Hintergrundgrafik ist auch die gelbe Hintergrundfarbe
    des Inhaltsbereichs dem die Seitenelemente umschließenden DIV zugewiesen.
    Sowohl für die Navigation als auch für diese Inhaltsbox ist selbst
    kein Hintergrund angegeben.<br>
    Die durchgehende Trennung der Boxen wird somit lediglich optisch simuliert
    und ist unabhängig von deren Höhe.</p>
    <p>Der Kopf- und der Fußzeile wurde eine Hintergrundfarbe zugewiesen,
    damit sich die optische Trennung nicht auf diese Bereiche ausdehnt.</p>
    </div>


    <p id="Fusszeile">Diese Fußzeile stellt innerhalb des umschließenden DIVs
    den Elementenfluss wieder her.</p>
    </div>


    </body>
    </html>



    und da wo jetzt News und so steht da möchte ich
    eine navi leiste wie hier haben
    <!-- m --><a class="postlink" href="http://img3.imagebanana.com/img/dmubcyg8/tim2.jpg">http://img3.imagebanana.com/img/dmubcyg8/tim2.jpg</a><!-- m -->


    so


    jetzt ist meine Frage wie füge ich es dprt hinein???


    BITTE Helft mir


    hatte ich doch bereits drauf geantwortet :!:

    Und nimm bitte noch nicht meine seite als vorschau denn die ist nicht ohne grund durch die normale domain nicht erreichbar. Mir ist es nicht wohl dabei weil ich auf der seite nur was ausprobiere und manchmal noch das ein oder andere copyright fehlen könnte

    Wie mach ich das wenn ich in meine navi leiste auf ein button klicken das es noch unterteilt ist das heißt wenn ich jetzt zB auf News klicke das da drücken noch 2 Links drauf stehen mit zb Altnews und Neunews Zum Besipiel



    Wie geht das denn?
    Pls Poste mit Befehl

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!

Benutzerkonto erstellen Anmelden