HomepageHelfer.org

Webseitenbau - Designvorlagen - Grafik Shop - Hilfe Lexikon und vieles mehr
https://homepagehelfer.org:443/

Neues Design gesucht

https://homepagehelfer.org:443/viewtopic.php?t=1674

Seite 2 von 3

Re: Neues Design gesucht

Verfasst: Do 10. Feb 2011, 21:55
von goefi-chiangmai
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

Re: Neues Design gesucht

Verfasst: Do 10. Feb 2011, 23:11
von Patrick
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 :E

LG
Patrick

Re: Neues Design gesucht

Verfasst: Fr 11. Feb 2011, 01:37
von Patrick
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

Re: Neues Design gesucht

Verfasst: Fr 11. Feb 2011, 12:54
von moni
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>

Re: Neues Design gesucht

Verfasst: Fr 11. Feb 2011, 13:05
von Patrick
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

Re: Neues Design gesucht

Verfasst: Fr 11. Feb 2011, 16:38
von goefi-chiangmai
@Patrik,

werde Dir am WE den Code zusenden

Re: Neues Design gesucht

Verfasst: Fr 11. Feb 2011, 17:20
von Patrick
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

Re: Neues Design gesucht

Verfasst: Fr 11. Feb 2011, 19:10
von moni
Soll so etwa das sein ? http://blicke.npage.de/patrick_563304.html

Re: Neues Design gesucht

Verfasst: Fr 11. Feb 2011, 21:27
von Patrick
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 :DA

LG

Re: Neues Design gesucht

Verfasst: Sa 12. Feb 2011, 08:29
von moni
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 ???
Alle Zeiten sind UTC+01:00
Seite 2 von 3

Powered by phpBB® Forum Software © phpBB Limited

Deutsche Übersetzung durch phpBB.de