Neues Design gesucht

Beitrag von **Patrick** » Sa 12. Feb 2011, 13:09

moni hat geschrieben:Hallo Patrick...

Schön das du damit klar kommst ,der Übung macht der Meister,freue mich für dich )

Man kann auf 650 px die Seite machen aber dann muss auch die leiste schmaler machen Balken footer usw...
.und wenn du für deine Rechts Bilder ca 180 px hast da hast dann nur noch ca 470px übrig....
kannst versuchen wie es dann aussieht ...

Da hab ich wohl was falsch erklärt. Sorry! Ich meine damit die höhe, nicht die breite!

Die rammen Farbe kannst ändern bei h4 in CSS.. border : solid 1px gold;
nehme das Gold raus und gebe das andere rein....oder wenn du keine Farbe haben willst da mache transparent.. das H4 habe ich extra für den Box Bilder rechts gemacht ...man köbnnte auch dien ganzen bereich wo die bilder sind auch ein andere farb hintergund geben....soll so sein da bearbeite das #navirechts {

Die Klapp Navi kannst auch bearbeiten und auch andre Farbe oder Hintergrund Grafik zugeben ...

moni hat geschrieben: was ich dir als Tipp geben könnte..du hast oben in Logo eine Waren Liste....
es wäre schick wenn man sie direkt verlinken würde mit den Seiten wo die Ware vorhanden sind....(Falls so ne Seiten auch existieren )

Die obere Grafik (Header) ist nur als fiktiver Platzhalter gedacht. Es kommt da eine ganz andere Grafik rein als jetzt

.
Aber danke für diesen Tip!

moni hat geschrieben: was ich nicht verstehe es sind bei mir auf dem Bildschirm zwei Abstände.1 zwischen Logo und Navi leiste und 2 zwischen Inhalt und footer ...ist da absichtlich so gemacht ???

hmm, zwischen Logo und Navileiste ist kein abstand

. Wenn du jetzt den braunen streifen meinst, der gehört zur grafik vom header.
Der Abstand zwischen Inhalt und footer ist absicht. Im Footer will ich nochmal wichtige infos einbinden wie Kontakt, AGB's, Impressum.

PS.: Wie komme ich denn jetzt an dem code heran, den du zuletzt verlinkt hast? Kannst du den evtl. einstellen?

LG
Patrick

Beitrag von **moni** » Sa 12. Feb 2011, 16:42

@Patrick

Habe dir das Skript auch schon zu gesendet(PN) aber lass den auch hier...
mag wohl sein das auch andere Mitglieder auch was mal selbst machen wollen ...
Übrigens einen lieben Dank an den Peter ,der hat mir den mal geschrieben , ich habe nur die klapp leiste oben eingebaut...

Viel Spaß beim Basteln !

Code: Alles auswählen

                                  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>

   <meta name="keywords" content="">
<meta name="description" content="">
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>


         <style type="text/css">
    <!--



            a:link {font-family: Arial;color:#000000;font-size:18px;text-decoration:none}
     a:visited {font-family: Arial, Helvetica, sans-serif;color:#000000;font-size:18px;text-decoration:none}
     a:active {font-family: Arial, Helvetica, sans-serif;color:#000000;font-size:18px;text-decoration:none}
     a:hover {font-family: Arial, Helvetica, sans-serif;color:#9b1515;font-size:18px;text-decoration:none}

 textarea {color:#000000;font-size:14px;font-family:verdana;background-color:#FC9191;border:solid 2px #FF0000}

 h1 {
 color:#00008B;
 font-weight:none;
 font-size:20px;
 text-align:left;
 text-decoration:none;
 }
 h2 {
 color:maroon;
 font-weight:none;
 font-size:16px;
 text-align:left;
 }

  h3 {
 color:Maroon;
 font-weight:none;
 font-size:14px;
 text-align:left;
 }

 h4 {
 color:Maroon;
 font-weight:none;
 font-size:14px;
 text-align:left;
    background-color:transparent ;
  background-image: url();
   background-repeat: repeat;
   border : solid 1px darkred;
 }


 body {
   background-color: ;
   background-image: url( URL Bod Grafik);
   background-attachment: fixed;
   background-repeat: repeat;
   background-position: center center;
   font-family: verdana;
   font-size: 18px;
   font-weight: normal;
   color:#7C0000;
 }


 #aussen {
   width: 900px;
   margin-right: auto;
   margin-left: auto;
   background-color: transparent;
   background-image: url();         /*hier kommt das  URL Grafik  hintergrund vom der koplete Mitte */
   background-attachment: fixed;
   background-repeat: repeat;
   background-position: center center;
   border : ridge 1px darkred;
 }
 #header {
   width: 900px;
   height: 210px;
   background-color: transparent;  /*LOGO HIER*/
   background-image: url();
   padding: 0px;
 }
 #balken {
   width: 900px;
   background-color:transparent;
   height: 50px;
   padding: 0px;
 }


    /*NAVI LEISTE*/
    .suckertreemenu ul{
    margin: 0;
    padding: 0;
    list-style-type: none;
    }

    /*Top level list items*/
    .suckertreemenu ul li{
    position: relative;
    display: inline;
    float: left;
    background-color: #F3F3F3; /*overall menu background color*/
    }

    /*Top level menu link items style*/
    .suckertreemenu ul li a{
    display: block;
    width: 133px; /*Width of top level menu link items*/
    padding: 1px 8px;
    border: 1px solid black;
    border-left-width: 0;
    text-decoration: none;
    color: navy;
    }

    /*1. Sub Level-Menü*/
    .suckertreemenu ul li ul{
    left: 0;
    position: absolute;
    top: 1em; /* no need to change, as true value set by script */
    display: block;
    visibility: hidden;
    }

    /*Sub Level-Menü Listenelemente (rückgängig Stil von Top-Level-Listenelemente)*/
    .suckertreemenu ul li ul li{
    display: list-item;
    float: none;
    }

    /*Alle nachfolgenden Untermenü Ebenen nach dem 1. Ebene Untermenü Offset */
    .suckertreemenu ul li ul li ul{
    left: 159px; /* no need to change, as true value set by script */
    top: 0;
    }

    /* Sub Level-Menü-Links-Stil */
    .suckertreemenu ul li ul li a{
    display: block;
    width: 160px; /*width of sub menu levels*/
    color: navy;
    text-decoration: none;
    padding: 1px 5px;
    border: 1px solid #ccc;
    }

    .suckertreemenu ul li a:hover{
    background-color: black;
    color: white;
    }

    /*Hintergrund für Top-Level-Menü-Liste Links */
    .suckertreemenu .mainfoldericon{
    background: #F3F3F3 url(media/arrow-down.gif) no-repeat center right;
    }

    /*Hintergrundbild für nachfolgende Menüebene Liste Links*/

    .suckertreemenu .subfoldericon{
    background: #F3F3F3 url(media/arrow-right.gif) no-repeat center right;
    }


      /*Für einen Absatz (falls vorhanden), der unmittelbar folgt suckertree Fügen Sie im Menü oben 1em Abstand zwischen den beiden im IE-*/
    * html p#iepara{
    padding-top: 1em;
    }

    /* Holly Hack für IE \-*/


    * html .suckertreemenu ul li { float: left; height: 1%; }
    * html .suckertreemenu ul li a { height: 1%; }


    /* Ende Angaben für die Navi LEISTE */












 /*BOX  rechts*/
   #navi {
  float:right;
  width: 180px;

 border-top:solid 0px Darkred;
 border-right:solid 0px Darkred;
 border-bottom:solid 0px Darkred;

  padding-top: 0px;
  padding-right: 0px;
  padding-bottom: 0px;
  padding-left: 0px;
  margin-left: 0px;
       background-color: transparent;
      background-image: url();
  background-repeat: repeat;
}





 #inhalt {
   float: left;
   width: 700px;
   background-color: transparent;
 }


 #footer {
   float: right;
   width: 900px;
   height: 50px;
   color:#FFFF44;
   background-color:transparent;
 }
 .clear {
   clear: both;
 }









    <!--[if IE]>
        <style type="text/css" media="screen">
        #menu ul li {float: left; width: 100%;}
        </style>
        <![endif]-->

        <!--[if lt IE 7]>
        <style type="text/css" media="screen">
        body {behavior: url(karsten.bplaced.net/htc/csshover.htc); font-size: 100%;}
        #menu ul li a {height: 1%;}
        }
        </style>
        <![endif]-->

      </style>

         <script type="text/javascript">

    //SuckerTree Horizontal Menu (Sept 14th, 06)
    //By Dynamic Drive: http://www.dynamicdrive.com/style/

    var menuids=["treemenu1"] //Enter id(s) of SuckerTree UL menus, separated by commas

    function buildsubmenus_horizontal(){
    for (var i=0; i<menuids.length; i++){
      var ultags=document.getElementById(menuids[i]).getElementsByTagName("ul")
        for (var t=0; t<ultags.length; t++){
                    if (ultags[t].parentNode.parentNode.id==menuids[i]){ //if this is a first level submenu
                            ultags[t].style.top=ultags[t].parentNode.offsetHeight+"px" //dynamically position first level submenus to be height of main menu item
                            ultags[t].parentNode.getElementsByTagName("a")[0].className="mainfoldericon"
                    }
                    else{ //else if this is a sub level menu (ul)
                      ultags[t].style.left=ultags[t-1].getElementsByTagName("a")[0].offsetWidth+"px" //position menu to the right of menu item that activated it
                ultags[t].parentNode.getElementsByTagName("a")[0].className="subfoldericon"
                    }
        ultags[t].parentNode.onmouseover=function(){
        this.getElementsByTagName("ul")[0].style.visibility="visible"
        }
        ultags[t].parentNode.onmouseout=function(){
        this.getElementsByTagName("ul")[0].style.visibility="hidden"
        }
        }
      }
    }

    if (window.addEventListener)
    window.addEventListener("load", buildsubmenus_horizontal, false)
    else if (window.attachEvent)
    window.attachEvent("onload", buildsubmenus_horizontal)

    </script>


    </head>

    <body>
    <!-- Anfang des kompletten Container aussen-->
    <div id="aussen"> <a name="top"></a>
    <div id="header"></div>
    <div id="balken"> <div class="suckertreemenu">
                                 <ul id="treemenu1">
                                 <li><a href="http://denkmalerei.oyla.de/cgi-bin/hpm_homepage.cgi">Home</a>

                                 <ul>

                                 </ul>




                                 <li><a href="#">Artikel</a>

                                 <ul>
                                 <li><a href="#">Reduziert</a></li>
                                 <li><a href="#">Bekleidung</a>
                                 <ul>
                                 <li><a href="#">Damen</a></li>
                                 <li><a href="#">Herren</a></li>
                                 <li><a href="#">Mädchen</a></li>
                                 <li><a href="#">Jungen</a></li>
                                 <li><a href="#">Baby</a></li>
                                 </ul>
                                 </li>

                                 <li><a href="#">Tierzubehör</a>
                                 <ul>
                                 <li><a href="#">Hundebekleidung</a></li>
                                 <li><a href="#">Halsbänder</a></li>
                                 <li><a href="#">Geschirre</a></li>
                                 <li><a href="#">Kleintierzubehör</a></li>
                                 <li><a href="#">Spielzeug</a></li>
                                 </ul>
                                 </li>


                                 <li><a href="#">Dekoration</a>
                                 <ul>
                                 <li><a href="#">Ostern</a></li>
                                 <li><a href="#">Weihnachten</a></li>
                                 <li><a href="#">Halloween</a></li>
                                 <li><a href="#">Herbst</a></li>
                                 <li><a href="#">Sonstiges</a></li>
                                 </ul>
                                 </li>


                                 <li><a href="#">Accessoires</a>
                                 <ul>
                                 <li><a href="#">Taschen</a></li>
                                 <li><a href="#">Schaals/Tücher</a></li>
                                 </ul>
                                 </li>


                                 <li><a href="#">Wohnen</a>
                                 <ul>
                                 <li><a href="#">Tischdecken</a>
                                                    <ul>
                                                    <li><a href="#">Rechteckig</a></li>
                                                    <li><a href="#">Quadratisch</a></li>
                                                    <li><a href="#">Rund</a></li>
                                                    <li><a href="#">Oval</a></li>
                                                    <li><a href="#">Tischläufer</a></li>
                                                    </ul>
                                                    </li>


                                 <li><a href="#">Vorhänge</a></li>
                                 </ul>
                                 </li>


                                 <li><a href="#">Sub Item 1.3</a></li>
                                 <li><a href="#">Sub Item 1.4</a></li>
                                 </ul>




                                 <li><a href="#">Menü 3</a>
                                 <ul>
                                 <li><a href="#">Sub Item 1.1</a></li>
                                 <li><a href="#">Sub Item 1.2</a></li>

                                 <li><a href="#">Sub Item 1.3</a></li>
                                 <li><a href="#">Sub Item 1.4</a></li>
                                 <li><a href="#">Sub Item 1.1</a></li>
                                 <li><a href="#">Sub Item 1.2</a></li>

                                 <li><a href="#">Sub Item 1.3</a></li>
                                 <li><a href="#">Sub Item 1.4</a></li>
                                 </ul>
                                 </li>




                                 <li><a href="#">Menü 4</a>
                                 <ul>
                                 <li><a href="#">Sub Item 1.1</a></li>
                                 <li><a href="#">Sub Item 1.2</a>
                                 <ul>
                                 <li><a href="#">Sub Item 2.1.1</a></li>
                                 <li><a href="#">Sub Item 2.1.2</a></li>
                                 <li><a href="#">Sub Item 2.1.3</a></li>
                                 <li><a href="#">Sub Item 2.1.4</a></li>
                                 </ul>
                                 </li>


                                 <li><a href="#">Sub Item 1.3</a></li>
                                 <li><a href="#">Sub Item 1.4</a></li>
                                 <li><a href="#">Sub Item 1.1</a></li>
                                 <li><a href="#">Sub Item 1.2</a></li>
                                 <li><a href="#">Sub Item 1.3</a></li>
                                 <li><a href="#">Sub Item 1.4</a></li>
                                 </ul>




                                 <li><a href="#">Menü 5</a>
                                 <ul>
                                 <li><a href="#">Sub Item 2.1</a></li>
                                 <li><a href="#">Folder 2.1</a>
                                 <ul>
                                 <li><a href="#">Sub Item 2.1.1</a></li>
                                 <li><a href="#">Sub Item 2.1.2</a></li>
                                 <li><a href="#">Sub Item 2.1.3</a></li>
                                 <li><a href="#">Sub Item 2.1.4</a></li>
                                 </ul>
                                 </li>
                                 </ul>
                                 </a>
                                 </li>




                                 <li><a href="#">Menü 6</a></li>
                                 </ul>

                                                                      <br style="clear: left;" />
                                                                      </div> </div>


    <div id="navi">
    <div id="menu">  </div>

    <div id="navi">
   <div id="navi"> <h4><img src=""width="170"></h4>
                    <h4><img src=""width="170"></h4>
                     <h4><img src=""width="170"></h4>
                     <h4><img src=""width="170"></h4>
                      <h4><img src=""width="170"></h4>
                      <h4><img src=""width="170"></h4>


</div>
  <!-- Ende Container Navi-->
</div>
    <!--Klappbare Navi-->



    </div>

    <div id="inhalt">

       </div>


    <div id="footer"><div align="center"><span class="schrift" style="font-size: medium"><span style="font-family: Impact">Design by</span><span style="font-family: Impact"></span></span> <a target="_blank" href="http://npage-hilfe.de"><span style="font-size: medium"><span style="font-family: Impact">Npage-Hilfe.de</span></span></a><span class="schrift" style="font-size:  medium"><span style="font-family: Impact"> and </span></span><a target="_blank" href="http://npage-freunde.npage.eu/designteam_61474355.html"><span style="font-size: medium"><span style="font-family: Impact">© Hinweise &  TEAM</span></span></a></div></div>

    <br class="clear" />

    </div>
    </body>
    </html>

HomepageHelfer.org

Neues Design gesucht

Re: Neues Design gesucht

Re: Neues Design gesucht

Wer ist online?