Hilfe HTML/CSS

Qweqweqwe

Sehr geehrte Damen und Herren,
ich besuche dieses Jahr die Fachoberschule für Technik, Praktikum bei einer IT Firma.

Nun habe ich einige HTML/CSS Grundkenntnisse erlernt, und bereits eine Aufgabe bekommen.
Ich soll eine Website mit Vorlage (http://i.imgur.com/XDrCrUi.jpg) nachbauen zum üben, jedoch habe ich keine Ahnung wie ich Anfangen soll genau, bzw mit was ich genau starten soll.

Habe auch Photoshop Grundkenntnisse erhalten, um die Grafiken aus dem Bild zu übernehmen.
Natürlich möchte ich es selber lernen, aber ich bräuchte einen Anfang bzw ein Beispiel wie ich zu starten habe, da es meine "erste" eigene Website ist,
vorher nur mit kleinen Übungen gearbeitet bzw. kleine eigene Ideen verwirklicht.

Mfg.
David

Surenamba

Welche der Elemente hast du denn bekommen? wenn garnichts würde ich mal als erstes das bild versuchen zu reproduzieren^^. sonst einfach mal divs platzieren und deine elemente einsetzten und mit css ordnen

Qweqweqwe

Hallo Surenamba,
habe nun schon begonnen, jedoch ein Problem.

HTML CODE:

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>INFORMA® Medienagentur</title>
    <link href="style.css" type="text/css" rel="stylesheet" />
</head>
<body>


<header>
   <h1>Portfolio</h1>


   <figure>
        <img src="Informa Logo.png" alt="Informa Logo">
        <figcaption>
            <span>Informa</span>
            <span>&reg;</span>
            <br>
            <span>Medienagentur</span>
        </figcaption>
   </figure>
</header>




<div class="content">

    <nav>
        <ul>
            <li><a href="Portfolio.html">Portfolio</a></li>
            <li><a href="Team.html">Team</a></li>
            <li><a href="KARED.html">KARED</a></li>
            <li><a href="Wir denken voraus.html">Wir denken voraus</a></li>
        </ul>
    </nav>
</div>    




<main>
    <a href="">Grafik & Gestaltung</a>
    <a href="">Internet</a>
    <a href="">Druck</a>
    <a href="">Fotografie</a>
</main>


</body>
</html>

Alles anzeigen

CSS:

Code

* {
                    box-sizing: border-box;
                    margin: 0;
                    padding: 0;
}


header {
                    border-top: 0.4rem solid #FFA500;
                    height: 400px;
                    width: 100%;
                    background-color: #f5f5f5;
                    background-image: url(tasse.png);
                    background-repeat: no-repeat;
                    background-position: center;


}


h1 {
                    font-size: 60px;
                    font-family: Calibri;
                    color: #282828;
                    font-weight: lighter;
                    padding: 9rem 10%;


}






figure {
                    padding: -3rem;
                    text-align: right;
}


header figcaption {
                    text-align: center;

}


.content {
                    width: 100%;
                    height: 900px;
                    background-color: #f5f5f5;
                    position: relative;
}


nav {
                    background-color: #282828;
                    overflow: auto;
                    display: inline-block;
                    transform: rotate(90deg);
                    position: absolute;
                    top: 170px;
                    left: -175px;
                    box-shadow: 0px -5px 5px -2px #999;
}


nav ul {
                    list-style: none;

}


nav ul li {
                    padding: 9px;
                    background-color: #282828;
                    float: left;
                    margin-left: 9px;

}


a:link {
    color: white;
    text-decoration: none;
    }

a:visited {
    color: white;
    text-decoration: none;
    }

a:active{
    color: white;
    background-color: none;
    }

Alles anzeigen

So schauts aus: http://imgur.com/lEuyb1I

DIe Nav-Leiste müsste weiter nach unten gezogen werden, jedoch weiß ich nicht wie.
Und das kleine Logo rechts oben müsste ebenfalls fast central-rechts sein, mit Schrift darunter.

djheke

Hab dir mal ein kleines Beispiel erstellt zum Probieren und lernen.
http://www.gipspferd.de/forumhilfe/portfolio/test.html

JakeStyler

Jetzt bin ich aber schwer enttäuscht von dir.. Crossposting..

Tags