Ergebnis 1 bis 3 von 3

Thema: frage an erfahrene webdesigner

  1. #1
    Youngster
    Registriert seit
    18.11.2014
    Beiträge
    12
    Danke
    5
    Bekam 0 mal "Danke" in 0 Postings

    Standard frage an erfahrene webdesigner

    hallo


    ich habe eine webseite erstellt jedoch habe ich ein paar fragen hier einmal der code


    html code:
    Code:
    <!DOCTYPE html>
    <html>
    
    <head>
    
    
        <meta charset="UTF-8">
        <meta name="description" content="">
        <meta name="keywords" content="">
        <meta name="author" content="rudi" />
        <meta name="publisher" content="lostchild" />
        <meta name="copyright" content="lostchild" />
        <meta http-equiv="content-language" content="de" />
        <meta name="robots" content="INDEX, FOLLOW" />
    
    
        <link href="styles/apokalypse.css" type="text/css" rel="stylesheet">
        <link href="images/redes8.png" type="image/x-icon" rel="shortcut icon">
    
             <title>Apokalypse</title>
            <!--[if lt IE 9]>
        <script src="bower_components/html5shiv/dist/html5shiv.js"></script>
    <![endif]-->
    
    
    </head>
    
    <body>
    
       <div id="links"></div>
          <div id="background"> <img id="back" src="images/zombie.jpg" alt="Startseite"  title="Zombie"  />
          <div id="seitenformat">
           <div id="header" align="center"><img id="headerbild" src="images/header.jpg" alt="Startseite"  title="Apokalypse" /></div>
    
          <div id="nav">
          <ul>
          <li><a href="index.html"><span></span>Startseite</a></li>
          <li><a href="kontakt.html"><span></span>Kontakt</a></li>
          <li><a href="information.html"><span></span>Informationen</a></li>
           <li><a href="apokalypse.html"><span></span>Apokalypse</a>
           <ul>
    
    
          <li class="zombie"><a href="zombie.html">Zombieapokalypse</a></li>
          <li class="strom"><a href="strom.html">Stromkatastrophe</a></li>
          <li class="fallout"><a href="fallout.html">Atomkatastrophe</a></li>
          <li class="alien"><a href="alien.html">Angriffskatastrophe</a></li>
          </ul>
        </li>
    </ul>
    </div>
             <div id="inhaltmitte">
        <div id="inhalt">  <h1 id="h">Apokalypse</h1>
         <blockquote><p>Apokalypsen sind immer schrecklich und bedeuten schwere Zeiten f&uuml;r die Menschen.
         Es gibt verschiedene Arten der Apokalypsen wie zb: eine Apokalypse durch einen Fallout,
          eine Naturkatastrophe,einen Elektrizit&auml;tsausfall,einen Angriff durch Aliens
         oder eine der beliebtesten Apokalypsenszenarios ist die <span class="span"> Zombie Apokalypse</span>.</p>
    
    
    
         <img src="images/apokalypse.jpg" border="2" height="150" width="350" alt="apokalypse" />
    
    
         <p>Bei jeder Art von Apokalypse muss man vorbereitet sein und sich mit bestimmten Gagdets und
         Ausr&uuml;stungsgegenst&auml;nden eindecken.Hier werdet Ihr erfahren welche Hilfsmittel es gibt
         und wie man Sie benutzt oder herstellt und wie man in so einer Zeit &uuml;berleben kann.Also macht euch bereit ...</p>
       </blockquote>
         </br>
    
    
             <p id="liste">Was darf ich nicht sein:</p>
             <ul style="disc" >
             <li class="punkte">&auml;ngstlich</li>
             <li class="punkte">langsam</li>
             <li class="punkte">laut</li>
             <li class="punkte">noch ein punkt</li>
             <li class="punkte">und noch ein punkt</li>
             </ul>
                 <img id="sign" src="images/redes4.png" align="right"  alt="vorsicht zombie" />
    
          </div>
        </div>
    
       <div id="fusszeile">Wir helfen dir zu &Uuml;berleben</div>
      </div>
    
    </body>
    </html>








    hier der css code:


    Code:
    #headerbild{
           width: 1190px;
           height: 105px;
           border-radius:6px;
           margin: 0 auto;
    
    
    
    }
    #back{
        float: right;
        width: 346px;
        height: 1100px ;
    
    }
    #header{
        background-image: url(image/bg_list.gif) ;
        border-radius:5px;
        height: 110px;
    
    }
    #links{
        background-color: #000000;
        color: #FFFFFF;
       float: left;
        width: 346px;
        height: 1100px;
    
    }
    
    
    #background{
         height: auto;
          background-color: #4A4A4A;
    
    }
    
    #seitenformat{
        width: 1200px;
        margin: 0 auto;
    }
    
    #nav{
        width: 170px;
         float: left;
    
    }
    
    #nav ul{
        list-style: none;
    
    }
    
    
    #nav li{
    
        width: 150px;
        text-align: left;
        font-family: fantasy;
        font-size: small;
        font-style: italic;
        background-image: url(image/bg_menu.gif);
        padding-top: 10px;
        padding-left: 10px;
        margin-right: 10px;
        margin-bottom: 5px;
        padding-bottom: 8px;
        margin-left: -40px;
        border-left: 25px orange solid;
        border-radius:8px;
    
    }
    
       /*Span-Elemente*/
    #nav span {
    border-color: transparent #aaa transparent transparent; /*Dreieckfarbe */
    border-style:solid; /*Randstyle*/
    border-width:7px; /*Dreiecksgrösse*/
    width:0; /*Breite (muss 0 sein)*/
    height:0; /* Höhe (muss 0 sein*/
    display:inline-block; /* Anzeigeart */
    float:right; /* rechtsbündig */
    margin-right:7px; /* Rand rechts */
    position:relative; /* Positionierung */
    transition:all 0.5s; /* Transition */
    -moz-transition:all 0.5s;
    -o-transition:all 0.5s;
    -webkit-transition:all 0.5s;
    }
    /*Span im Hoverzustand */
    #nav a:hover span {
    border-color: transparent #fff transparent transparent ; /* Dreieckfarbe */
    transform:rotate(180deg); /* Rotation 180° */
    -moz-transform:rotate(180deg);
    -webkit-transform:rotate(180deg);
    }
      /* Links Submenu */
    #nav ul ul li a {
    color:#476EA8; /* Schriftfarbe */
    font-size:15px; /* Schriftgrösse */
    }
    /* Links Submenu Hoverzustand */
    #nav ul ul li a:hover {
    color:#153363; /*Schriftfarbe */
    letter-spacing: 1px; /*Buchstabenabstand*/
    background: #F0F4FA; /*Hintergrundfarbe */
    }
     #nav ul ul li {
    width:170px; /* Breite */
    background:#DCE1E8; /*Hintergrundfarbe*/
    border:1px solid #D5D7DB; /*Rand*/
    border-top:0; /*Rand oben*/
    }
    /*Verhalten der Unterlisten bei Hover */
    #nav ul li:hover ul {
    display:block; /* Blockanzeige der Unterlisten */
    }
    /*Submenulisten*/
    #nav ul ul {
     margin-left:-20px;
    position:absolute; /* Absolute Positionierung */
    left:180px; /*Abstand Links (breite des Hauptmenüs) */
    top:0; /*Abstand oben */
    border-top:1px solid #e9e9e9; /* oberer Rand */
    display:none; /* Keine Anzeige, wenn li nicht gehovert */
    }
     /* Links Hoverzustand */
    #nav a:hover {
        background: RGBA(255,255,255,0.05); /* Hintergrundfarbe */
        color:#153363; /* Schrifrfarbe */
        font-style: italic;  /* Kursiv */
    }
    #nav a {
        color:#476EA8; /* Schriftfarbe */
        display:block; /* Block-Anzeige, jedes Element neue Zeile */
        text-decoration:none; /*keine Unterstreichung*/
        transition:1s; /* Fliessende Bewegung */
        -moz-transition:1s;
        -webkit-transition:1s;
        -o-transition:1s;
        font-family:Playfair Display; /* Schriftart */
        font-weight: bold; /* Fett */
        font-size:16px; /* Schriftgrösse */
        padding-left:10px; /* Abstand links */
    }
      #nav ul li {
        position:relative; /*relative Positionierung der
                            Listenpunkte, damit Unterpunkte
                            absolut positioniert werden können.*/
    }
    
    
    
    
    #inhaltmitte{
            color: #FF0000;
            margin-bottom: 20px;
          text-align: center;
    
    
    }
    
    #h{
        color: #FF0000;
    
    }
    
    
    #inhalt{
        margin-top: 20px;
        text-align: center;
    
        width: 850px;
        height: 100%;
        margin-left: 200px;
        padding-top: 0px;
        color: #FFFFFF;
        font-style: italic;
        font-family: monospace;
        background-color: #575757;
        border-radius:8px;
        border: 2px #0D97DC solid;
    
    }
    
    
    .span{
        color: #FF0000;
    }
    
    #liste{
        color: #CCCCCC;
        font-size: large;
        font-family: Verdana;
        font-style: italic;
    }
    
    #punkte{
        text-align: center;
          margin: 0 auto;
    }
    
    #sign{
       height: 100px;
       width: 100px;
       margin-top: -120px;
       margin-right: 50px;
    }
    
    
    #fusszeile{
        z-index: 1;
        text-align: center;
        color: #FF0000;
        background-color: #000000;
        border-radius:5px;
    }



    hier ein link zu meiner seite:
    http://www.rudi83.lima-city.de/





    wie ihr seht habe ich auf der liinken seite einen schwarzen balken bzw hintergrund....den ich mit der kennzeichnungs id : links erstellt habe
    und rechts davon habe ich ein bild mit den zombiehänden mit der kennzeichnungs id back

    das problem ist das ich bei beiden eine height erstellt habe ich es aber lieber mit height 100% benutzen würde.
    das leider aber nicht geht weil es keinen inhalt hat.

    das in der mitte mit dem blauen border hat die kennzeichnungs id inhalt und das ist auf height 100%
    und das dahinter ist mit kennzeichnungs id inhaltmitte


    ich weiß mein code ist ein bisschen unübersichtlich aber bitte trotzdem um hilfe das ist meine erste seite.

    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
    König(in)
    Registriert seit
    07.02.2009
    Ort
    Leipzig
    Beiträge
    1.393
    Danke
    2
    Bekam 21 mal "Danke" in 20 Postings

    Standard AW: frage an erfahrene webdesigner

    Für das was Du da vom Layout erreichen willst, reicht es wenn Du auf einige Elemente verzichtest und den Style per CSS löst.

    Also #links weg, ebenso dieses img-zombie-Bild. Danach setzt Du für body die Hintergrundfarbe schwarz ein und das Zombie-Bild als Hintergrundbild, welches Du rechts positionierst. Fertig.

  3. Folgende User finden die Antwort von threadi gut:


  4. #3
    Youngster
    Themenstarter

    Registriert seit
    18.11.2014
    Beiträge
    12
    Danke
    5
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: frage an erfahrene webdesigner

    danke für deine antwort ich werde es gleich mal probieren thx

Ähnliche Themen

  1. [biete] Webdesigner (m/w)
    Von enfinitemedia im Forum Job Forum - Jobs für Grafiker, Programmierer und Webmaster
    Antworten: 0
    Letzter Beitrag: 30.12.2009, 12:18
  2. Frage an Webdesigner..
    Von Rambo_87 im Forum Forum für Grafiken und Bildbearbeitung
    Antworten: 2
    Letzter Beitrag: 02.06.2008, 16:20
  3. Webdesigner(in) gesucht
    Von roppert im Forum Job Forum - Jobs für Grafiker, Programmierer und Webmaster
    Antworten: 0
    Letzter Beitrag: 17.04.2008, 13:00
  4. M!nle$$ Clan sucht Erfahrene Liga und Public Spieler [BF2]
    Von Raykonboss im Forum Computer - Internet Forum
    Antworten: 3
    Letzter Beitrag: 30.12.2007, 14:48
  5. Webdesigner
    Von Sl3sh im Forum Sponsor gesucht !
    Antworten: 0
    Letzter Beitrag: 27.03.2007, 21:21

Stichworte

Berechtigungen

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