[HTML] [CSS] Umsetzung von Design und Div containern

Einklappen
X
 
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • [HTML] [CSS] Umsetzung von Design und Div containern

    Hallo,

    ich habe nun wirklich 2 Tage rumprobiert und mein Design einigermaßen umsetzen können mit diesen modernen div containern.

    Nur leider komm ich jetzt überhaupt nichtmehr weiter und mach eigentlich immer mehr kaputt als schön....

    Die Files: Klick zum Download

    So, dann hab ich noch ein bild, wo ich draufgeschrieben habe was nicht passt und wies gehört... Wäre schön wenn mir welche ein wenig weiterhelfen könnten, ich hab heute schon das 3te mal neu angefangen... aber irgendwo ist immer ein wurm....

    Mfg Tobias Dosch

  • #2
    und was erwartest du jetzt? dass das jemand für dich erledigt? und bitte hinterleg die daten nicht dort, wo man irgendwelche werbeseiten um die ohren gehauen bekommt. vielleicht solltest du dir mal diese tutorials zu gemüte führen. und auch die entsprechende theorie zu css

    gruß
    peter
    Nukular, das Wort ist N-u-k-u-l-a-r (Homer Simpson)
    Meine Seite

    Kommentar


    • #3
      Ich will nur ein wenig hilfe.. erzähl mir nix von theorie oder sonstiges, wenn du dir den source nichtmal angeguckt hast und keine ahnung hast was schief läuft. Ich will nicht das man mir alles hilft.. nur das mit dem Anmeldebutton ist das was ich absolut nicht hinbekomme, ich hab auch bei css4you diese browserweichen angeguckt, aber das scheint garnicht zu funktionieren.

      so far.

      edit: Damit wollt ich dich jetzt nicht persönlich angreifen... Ich kanns nur nicht auf mein Space laden, weil sonst jeder wüsste was ich machen will und es zick kopien geben würde und das innerhalb kürzester zeit nur weil ich das doofe design nicht umgesetzt kriege mit diesen neumodischen div dingern.
      Mfg Tobias Dosch

      Kommentar


      • #4
        Keiner mag sich gerne Files downloaden. Kopier doch mal die Zeilen rund um den Button im HTML Quellcode hier rein und die entsprechenden CSS Klassen.
        Und versuch mal etwas zu spezifizieren was das Problem ist und was du bereits versucht hast, um es zu lösen.
        Gutes Tutorial | PHP Manual | MySql Manual | PHP FAQ | Apache | Suchfunktion für eigene Seiten

        [color=red]"An error does not become truth by reason of multiplied propagation, nor does truth become error because nobody sees it."[/color]
        Mohandas Karamchand Gandhi (Mahatma Gandhi) (Source)

        Kommentar


        • #5
          wenn du dir den source nichtmal angeguckt hast
          doch, habe ich.
          weil sonst jeder wüsste was ich machen will und es zick kopien geben würde
          angst, das dir DAS jemand klaut?
          mit diesen neumodischen div dingern.
          neumodisch, das ist zwei bis drei jahre alt!
          nur das mit dem Anmeldebutton ist das was ich absolut nicht hinbekomme
          was für ein anmeldebutton? ich sehe nur suche. also stell das bitte bei dir online, ggf. htaccess-geschützt, aber zwinge keinen, sich das so umständlich herunter zu laden.
          erzähl mir nix von theorie oder sonstiges
          doch tue ich, da scheint es bei dir nämlich zu hapern. css ist ein klein wenig mehr als klickibunti. dahinter steckt ein konzept.

          btw: kennst du
          PHP-Code:
          *
          {
            
          margin0;
            
          padding0;

          gruß
          peter
          Nukular, das Wort ist N-u-k-u-l-a-r (Homer Simpson)
          Meine Seite

          Kommentar


          • #6
            Hallo,

            alles Klar, versuchen wir es doch mal mit der Positionierung der Elemente im Suchbereich:

            Ich möchte gerne das Inputfeld, so positionieren, dass es erstmal 16px von oben und 10px von links entfernt ist.. also vom rand dieser roten suchbox.. Und hinter dem Inputfeld sollen nochmal 10 pixel platz sein, bevor der Suchen button kommt(welcher ebenfalls 16 pixel) von oben abstand haben soll.

            CSS
            PHP-Code:
              #suche  { background-image: url(suche_background.jpg);
                        
            background-repeatno-repeat;
                        
            width532px;
                        
            height68px;
                        
            margin-top0px;
                        
            margin-leftauto;
                        
            margin-rightauto;
                        
            margin-bottom35px;
                        
            text-alignright;
                      }
                     
              
            #suche_input  { width: 430px;
                              
            border2px;
                              
            border-styleinset;
                              
            border-color#cccccc;
                            

            HTML abschnitt:
            PHP-Code:
            <div id="suche"><input type="text" name="#" id="suche_input" /><img src="suchen_button.gif" /><br />Erweiterte Suche</div
            Weiter als so komm ich leider nicht.


            edit: Also doch klar, ich hatte es beim #suche mit margin-top: 16px usw versucht, ging aber nicht..

            und der Anmeldebutton ist auf der rechten seite im bild ca. 60 pixel von oben.
            Zuletzt geändert von Witzigerkiller; 06.02.2008, 22:10.
            Mfg Tobias Dosch

            Kommentar


            • #7
              Ähm margin-left und margin-top vielleicht...
              Also doch klar, ich hatte es beim #suche mit margin-top: 16px usw versucht, ging aber nicht..
              Abr du willst doch suche_input positionieren, oder?
              Gutes Tutorial | PHP Manual | MySql Manual | PHP FAQ | Apache | Suchfunktion für eigene Seiten

              [color=red]"An error does not become truth by reason of multiplied propagation, nor does truth become error because nobody sees it."[/color]
              Mohandas Karamchand Gandhi (Mahatma Gandhi) (Source)

              Kommentar


              • #8
                das meinte ich mit theorie! mal mit padding bei #suche gearbeitet? oder mit text-align: right? denn was sind input- und img-tags? genau! inline-elemente. und wie reagieren die?

                gruß
                peter
                Nukular, das Wort ist N-u-k-u-l-a-r (Homer Simpson)
                Meine Seite

                Kommentar


                • #9
                  stellt mir doch keine fragen, sondern helft ganz einfach.. ich hab keinen schimmer.. mehr wie das css was ich in den files drinne habe, kann ich nicht... und mit padding und text-align hatte ich es versucht... bei beiden sogar... ich krieg aber nix zusammen.. entweder ist alles links, oder rechts.. oder eins ist links und das andere rechts... oder auf einmal ist alles verschoben, aber so wie ich das will, gehts einfach nicht.

                  edit:

                  ich hab folgendes jetzt geändert:

                  PHP-Code:
                    #suche  { background-image: url(suche_background.jpg);
                              
                  background-repeatno-repeat;
                              
                  width532px;
                              
                  height68px;
                              
                  margin-top0px;
                              
                  margin-leftauto;
                              
                  margin-rightauto;
                              
                  margin-bottom35px;
                              
                  text-alignleft;
                            }
                            
                    
                  #suche_input  { width: 430px;
                                    
                  border2px;
                                    
                  border-styleinset;
                                    
                  border-color#cccccc;
                                    
                  margin-left10px;
                                    
                  margin-top16px;
                                    
                  margin-right10px;
                                  } 
                  Nun muss nurnoch der Text mit dem Erweitert Suchen richtig hin und der Button muss noch bisschen weiter runter.. aber das schaff ich gerade ums verrecken nicht... (Also der button)... Am text versuch ich es mit einem <span und margin...

                  edit 2:

                  Meine Variante mit dem Span:

                  PHP-Code:
                  <div id="suche"><input type="text" name="#" id="suche_input" /><img src="suchen_button.gif" /><br />
                  <
                  span style="margin-left:345px;">Erweiterte Suche</span></div
                  Fehlt nurnoch der Button weiter unten... Rechts der Anmeldebutton muss noch genau an rand.. FF und IE kompatibel.. (Ich schaffs nur bei eine der beiden versionen)... und Im footer muss noch der text 2-3px weiter runter...
                  Zuletzt geändert von jahlives; 07.02.2008, 00:21.
                  Mfg Tobias Dosch

                  Kommentar


                  • #10
                    Soll denn jetzt der Button auf gleicher Höhe sein wie das Inputfeld oder soll der Button noch tiefer stehen als die Oberkante des Feldes?
                    Falls ersteres dann müsste ein padding-top bei #suchen ausreichen.
                    Falls zweiteres dann kommst du nicht umher dem Button selber CSS Eigenschaften zu geben, weil er hat keine orientiert sich daher an der oberen Kante von #suchen
                    Gutes Tutorial | PHP Manual | MySql Manual | PHP FAQ | Apache | Suchfunktion für eigene Seiten

                    [color=red]"An error does not become truth by reason of multiplied propagation, nor does truth become error because nobody sees it."[/color]
                    Mohandas Karamchand Gandhi (Mahatma Gandhi) (Source)

                    Kommentar


                    • #11
                      Hallo,

                      ich habe 2teres versucht, aber wenn ich dem button eine id gebe und diese mit margin- oder padding-bottom:16px; belege, geht nicht nur der button tiefer sondern auch das inputfeld... das ist dann genau das, was ich nicht wollte...
                      Mfg Tobias Dosch

                      Kommentar


                      • #12
                        Stichwort float:left bei suche_input

                        Gruss

                        tobi
                        Gutes Tutorial | PHP Manual | MySql Manual | PHP FAQ | Apache | Suchfunktion für eigene Seiten

                        [color=red]"An error does not become truth by reason of multiplied propagation, nor does truth become error because nobody sees it."[/color]
                        Mohandas Karamchand Gandhi (Mahatma Gandhi) (Source)

                        Kommentar


                        • #13
                          genial... und wie krieg ich den text beim footer noch so ungefähr in die mitte? wenn ich margin benutze, passiehrt garnix und wenn ich padding benutze verzieht es mir mein komplettes design..
                          Mfg Tobias Dosch

                          Kommentar


                          • #14
                            Lerne Grundlagen Link hast du bereits erhalten

                            Gute Nacht

                            tobi
                            Gutes Tutorial | PHP Manual | MySql Manual | PHP FAQ | Apache | Suchfunktion für eigene Seiten

                            [color=red]"An error does not become truth by reason of multiplied propagation, nor does truth become error because nobody sees it."[/color]
                            Mohandas Karamchand Gandhi (Mahatma Gandhi) (Source)

                            Kommentar


                            • #15
                              außerdem muss man bei formularen viel rumprobieren, da dabei jeder browser so seine eigenheiten hat. also spiel mal mit margin,padding, float, etc. herum.

                              gruß
                              peter
                              Nukular, das Wort ist N-u-k-u-l-a-r (Homer Simpson)
                              Meine Seite

                              Kommentar

                              Lädt...
                              X