Neues Design gesucht

Beitrag von **goefi-chiangmai** » Do 10. Feb 2011, 21:55

Hallo Patrik,

wenn Du das Muster 1 unserer Vorlagenseite meinnst, http://npage-hilfe-vorlagen.npage.de/de ... 06738.html könntest Du das eigentlich schon haben, muss das script allerdings neu machen, weil das zimmlich alt ist und einige fehler hat, werde das aber am Wochenende machen

Beitrag von **Patrick** » Do 10. Feb 2011, 23:11

huhu cheffe

Ja genau dieses meine ich. es ist vom Aufbau sehr gut. was meinst du mit ich müste scripts ändern?
Da werde ich vermutlich schon wieder auf dem schlauch stehen. Zur zeit habe ich das von Moni, was
ich irgendwie versuche meinen wünschen anzupassen. Das von Moni mit dem aus dem toolshop kombi-
niert, wäre das obertollste

.

Ich würde dann die navie oben haben wollen, und den bereich, wo die navie vom Muster 001 ist für
kleine bildchen nutzen. Das vielleicht noch auf die rechte seite. Hier mal ein beispiel, was ich mit den
Kleinen Bildchen meine http://www.oyla.de/cgi-bin/designs/rose ... d=10883843

Wie komme ich denn an diesen code ran? Ich kenne es nur mit dem rechtsklick, aber dies scheint nicht
zu gehen

LG
Patrick

Beitrag von **Patrick** » Fr 11. Feb 2011, 01:37

Oh man ey, jetzt habe ich es endlich geschnallt mit dem verflixten klappmenü *boing*.
Kennt Ihr dass, wenn eine Aufgabe schwierig ausschaut und im entdefekt kinderleicht
ist, dass man erst denkt es sei extrem schwer? Nun bin ich glücklich mit dem Menü

.
Jetzt kommt die farbe der Menüleiste dran

.

lg und gute nacht!

@ Moni,

Du kannst den kompletten code von meiner seite ruhig löschen, wenn du etwas versuchst!
Ich habe den code gespeichert

LG
Patrick

Beitrag von **moni** » Fr 11. Feb 2011, 12:54

Hallo Patrick...

Wie ich das verstanden habe da willst ein Desing mit einen oder mehreren boxen links und die klapp leiste oben...
so wie das hier
http://blicke1.npage.de/box_links_un_au ... 97383.html

Habe mir auch angeschaut was du geschafft hast .. Du hast ein paar Fehler gemacht ..aber egal deine frage(PN) war Ob ich ich das auch schaffe bis WE..
kann gern da basteln aber leider schaffe nicht die Tage ...wenn der Peter dir das auch machen würde ist doch auch sehr gut der ist viel fitter als ich ..
ich brauche immer sehr lange bis ich was zu ende bringe ..
hier ist das Code mit leiste oben und boxen links

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="Blicke">
<meta name="description" content="Blicke">
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Blicke</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:gold ;
  background-image: url();
   background-repeat: repeat;
   border : solid 2px darkred;
 }


 body {
   background-color: ;
   background-image: url( );
   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();
   background-attachment: fixed;
   background-repeat: repeat-x;
   background-position: center center;
   border : ridge 5px 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;
 }

   /*Credits: Dynamic Drive CSS Library */
    /*URL: http://www.dynamicdrive.com/style/ */

    /*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  LINKS*/
   #navi {
  float:top;
  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: right;
   width: 700px;
   background-color: transparent;
 }


 #footer {
   float: right;
   width: 900px;
   height: 50px;
   color:#FFFF44;
   background-color:darkred;
 }
 .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>BOX Platz für bild usw </h4>
            <h4>BOX Platz für bild usw </h4>
             <h4>BOX Platz für bild usw </h4>
             <h4>BOX Platz für bild usw </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>

Beitrag von **Patrick** » Fr 11. Feb 2011, 13:05

huhu moni,

im grunde habe ich es fast soweit geschfft. Die Anordnung muss noch etwas verändert werden.
Aber wie erkläre ich das am besten *grübel*

Ich erkläre es mal in bildern

Aktuell sieht es ja so aus.

aktuell.JPG

Dann würd ich gerne in diesen bereich soetwas haben (vertikale trennlinie und daneben kleine Bilder einfügen)

minibild.JPG

Und hier mal meine vorstellung, wo was hin sollte (rot markiert)

minibild1.JPG

Das ist das einzige, was ich nicht hinbekomme

.

Alles andere dürfte kein Problem darstellen.

Aber wo hast du denn die fehler entdeckt?

LG

Beitrag von **goefi-chiangmai** » Fr 11. Feb 2011, 16:38

@Patrik,

werde Dir am WE den Code zusenden

Beitrag von **Patrick** » Fr 11. Feb 2011, 17:20

So, ich habe mir meine Designvorstellung mal aus dem Muster zrecht geschnibbelt.

Und so sollte das ergebnis des Aufbaus aussehen.
http://i53.tinypic.com/fkwbaf.jpg

Natürlich mit Klappmenü

LG

Beitrag von **moni** » Fr 11. Feb 2011, 19:10

Soll so etwa das sein ? http://blicke.npage.de/patrick_563304.html

Beitrag von **Patrick** » Fr 11. Feb 2011, 21:27

huhu moni,

das ist es! Bilder werde ich dann austauschen, aber genau so soll es sein

Nur noch die Rahmenfarben mit dem Farbcode "#785339" versehen und gut
ist es

. Das würde ich aber auch selber hinbekommen

.

Kann man eigentlich den Hintergrund der eigentlichen seite auf 650 Px festsetzen?

Da sagst du, dass du es nicht so gut hinbekomst *tztztz*.

Vielen Dank für deine mühe

LG

Beitrag von **moni** » Sa 12. Feb 2011, 08:29

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 ...

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 ...

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 )

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 ???

HomepageHelfer.org

Neues Design gesucht

Re: Neues Design gesucht

Re: Neues Design gesucht

Re: Neues Design gesucht

Re: Neues Design gesucht

Re: Neues Design gesucht

Re: Neues Design gesucht

Re: Neues Design gesucht

Re: Neues Design gesucht

Re: Neues Design gesucht

Re: Neues Design gesucht

Wer ist online?