Evan: Webseite mit HTML und CSS umsetzten

Beitrag lesen

Hallo,

hab ein wenig gebastelt, wie findest du mein erster Aufbau? Damit habe ich a) das Grundgerüst und b) den Header abgeschlossen.

<!doctype html>
  <html lang="de">
    <head>
        <meta charset="utf-8">
	<meta name="description" content="" />
	<meta name="keywords" content="" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0"/>

	<link rel="icon" href="/design/icons/favicon.ico" type="image/x-icon">
	<link rel="stylesheet" type="text/css" href="/design/css/style.css">
	    
	<!--[if lt IE 9]>
	<script src="/js/html5.js"></script>
	<script src="/js/respond.js"></script>
	<![endif]-->

	<title></title>
    </head>
    
    <body>

    	<header>
    		<h1>Shop Design</h1>
    		<ul>
    		   <li><a href="#">Hilfe & Service</a></li>
    		   <li><a href="#">Mein Konto</a></li>
    		   <li><a href="#">Anmelden</a></li>
    		</ul>
    	</header>

    	<script src="/js/jquery-2.1.0.min.js"></script>
    	
    	<script>
	   $(document).ready(function(){
           });
	</script>
    </body>
</html>

Jetzt geht es an die Navigation, den Content sowie den rechten Bereich. Da habe ich an folgendes gedacht:

<main>
  <nav>
    <ul>
     <li>Home</li>
     <li>Nav 1</li>
     <li>Nav 2</li>
     <li>Nav 3</li>
     <li>Nav 4</li>
     <li>Nav 5</li>
     <li>Nav 6</li>
   </ul>
 </nav>
</main>

<aside>
  <nav>
    <ul>
      <li>Merkzettel</li>
      <li>Warenkorb</li>
    </ul>
 </nav>
</aside>

Jetzt ist die Frage, wo packe ich meinen Inhalt rein? In ein DIV bzw. in zwei DIVs der linke grauen Kasten für die Subnavigation und der rechte Kasten für den Content? eine <section></section> ist hier nicht richtig, oder?

Zum Schluss habe ich unterhalb von der Navigation noch den großen blauen Bereich, wie würdest du diesen anordnen bzw. in welchen Bereich sollte dieser gepackt werden? Das gleiche habe ich auf der rechten Seite im aside - Bereich nochmals.

0 130

Webseite mit HTML und CSS umsetzten

Evan
  • css
  • html
  • meinung
  1. 0
    da-vid
  2. 0
    MrMurphy1
    1. 0
      Evan
      1. 0
        Matthias Apsel
        1. 0
          Evan
          1. 0
            Matthias Apsel
            1. 0
              Evan
              1. 0
                Christian Kruse
                1. 0
                  Evan
      2. 0
        MrMurphy1
        1. 0
          Evan
          1. 0
            Der Martin
            1. 0
              Evan
              1. 0
                marctrix
              2. 0
                Matthias Apsel
                1. 0
                  Evan
                  1. 2
                    Julius
        2. 0
          marctrix
          1. 0
            Matthias Scharwies
            1. 0
              Gunnar Bittersmann
              • html
              1. 0
                marctrix
                1. 0
                  MrMurphy1
                  1. 0
                    marctrix
            2. 1
              marctrix
      3. 0
        Gunnar Bittersmann
        • html
        1. 0
          Evan
          1. 0
            Gunnar Bittersmann
            1. 0
              Matthias Apsel
              1. 0
                Gunnar Bittersmann
    2. 0
      marctrix
      1. 0
        Evan
        1. 0
          JürgenB
          1. 0
            Evan
          2. 0
            marctrix
            1. 0
              Camping_RIDER
              1. 1
                marctrix
        2. 0
          marctrix
      2. 0
        MrMurphy1
        1. 0
          marctrix
          1. 0
            Gunnar Bittersmann
            1. 1
              marctrix
      3. 0
        Gunnar Bittersmann
        1. 0
          marctrix
          1. 1
            Gunnar Bittersmann
            1. 0
              marctrix
        2. 0
          Evan
          1. 2
            Tabellenkalk
  3. 0
    Gunnar Bittersmann
    • design/layout
    • ux
    1. 0
      Evan
      1. 0
        Gunnar Bittersmann
  4. 0

    Seiten-Element gestaltet

    Evan
    1. 0
      Matthias Apsel
      1. 0
        Camping_RIDER
        1. 0
          Gunnar Bittersmann
          1. 0
            Camping_RIDER
            1. 0
              Auge
              • menschelei
    2. 0
      Auge
    3. 0
      MrMurphy1
      1. 0
        MrMurphy1
        1. 0
          Gunnar Bittersmann
          • html
          • rdf
          • semantik
        2. 1
          Tabellenkalk
          1. 0
            Gunnar Bittersmann
            • typografie
            1. 0
              Tabellenkalk
        3. 0
          Evan
          1. 0
            Evan
            1. 0
              Auge
              • css
              • html
          2. 0
            MrMurphy1
            1. 0
              Evan
              1. 0
                MrMurphy1
                1. 0
                  Evan
                  1. 0
                    Tabellenkalk
                    1. 0
                      Evan
                      1. 0
                        Tabellenkalk
                        1. 0
                          Evan
                          1. 0
                            Gunnar Bittersmann
                            • typografie
                            1. 0
                              Evan
                              1. 2
                                Gunnar Bittersmann
                                • meinung
                                1. 0
                                  Evan
                            2. 0
                              Tabellenkalk
                              1. 0
                                Gunnar Bittersmann
                                1. 0
                                  Tabellenkalk
                                  1. 0
                                    Der Martin
                                    1. 0
                                      Tabellenkalk
            2. 0
              Gunnar Bittersmann
              • css
              • svg
              1. 0
                Evan
                1. 0
                  Gunnar Bittersmann
                2. 0
                  Gunnar Bittersmann
    4. 0
      MudGuard
      1. 0
        Evan
    5. 0

      Seiten-Element gestaltet - Problem mit Border Radius

      Evan
      1. 0
        Tabellenkalk
        1. 0

          Seiten-Element gestaltet - Fertige Box

          Evan
          1. 0

            Seiten-Element gestaltet - Border Länge

            Evan
            1. 0
              Auge
              • css
              • html
              1. 0
                Evan
                1. 0

                  Seiten-Element gestaltet - Border Länge - Erledigt

                  Evan
                  1. 1
                    MrMurphy1
                    1. 0
                      Evan
                      1. 0
                        Gunnar Bittersmann
                        1. 0
                          Evan
                          1. 0
                            Gunnar Bittersmann
                            1. 0
                              Evan
                              1. 1
                                Gunnar Bittersmann
                                1. 0
                                  Der Martin
                                  1. 0
                                    Auge
                                  2. 0
                                    Gunnar Bittersmann
                                    • mobile
                          2. 0
                            marctrix
                      2. 0
                        Gunnar Bittersmann
                        1. 0
                          Evan
                  2. 0
                    Gunnar Bittersmann
                    • css
                    1. 0
                      Evan
                      1. 0
                        Gunnar Bittersmann
              2. 0
                Matthias Apsel
  5. 0

    Danke für die Hilfe

    Evan
    1. 0
      MrMurphy1
      1. -1
        Evan
        1. 0
          Gunnar Bittersmann
          1. 0
            Christian Kruse
          2. 0
            Evan
            1. 0
              Gunnar Bittersmann
              • meinung
      2. 0
        Matthias Apsel
        1. 0
          Evan
          1. 0
            Matthias Apsel
            1. 0
              JürgenB
              1. 0
                Camping_RIDER
                1. 0
                  JürgenB
                2. 0
                  Gunnar Bittersmann
                  • menschelei
                  1. 0
                    Camping_RIDER
                    1. 0
                      Tabellenkalk