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

[Witzigerkiller]

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

[Kropff]

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

[Witzigerkiller]

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.

[jahlives]

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.

[Kropff]

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

*
{
  margin: 0;
  padding: 0;
} 

gruß
peter

[Witzigerkiller]

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

  #suche  { background-image: url(suche_background.jpg);
            background-repeat: no-repeat;
            width: 532px;
            height: 68px;
            margin-top: 0px;
            margin-left: auto;
            margin-right: auto;
            margin-bottom: 35px;
            text-align: right;
          }
         
  #suche_input  { width: 430px;
                  border: 2px;
                  border-style: inset;
                  border-color: #cccccc;
                } 

HTML abschnitt:

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

[jahlives]

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

[Kropff]

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

[Witzigerkiller]

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:

  #suche  { background-image: url(suche_background.jpg);
            background-repeat: no-repeat;
            width: 532px;
            height: 68px;
            margin-top: 0px;
            margin-left: auto;
            margin-right: auto;
            margin-bottom: 35px;
            text-align: left;
          }
          
  #suche_input  { width: 430px;
                  border: 2px;
                  border-style: inset;
                  border-color: #cccccc;
                  margin-left: 10px;
                  margin-top: 16px;
                  margin-right: 10px;
                } 

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:

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

[jahlives]

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

[Witzigerkiller]

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

[jahlives]

Stichwort float:left bei suche_input

Gruss

tobi

[Witzigerkiller]

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

[jahlives]

Lerne Grundlagen Link hast du bereits erhalten

Gute Nacht

tobi

[Kropff]

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