Frage von bautz93, 73

Wie kann man so eine CSS Box realisieren?

Kann mir jemand einen Ansatz zum realisieren dieser Boxen geben? Bin totaler Anfänger und komme einfach nicht mit dem Box Modell klar :/

Hilfreichste Antwort - ausgezeichnet vom Fragesteller
von LustenLu, 32

Ok Hallo nochmals ich habe dir hier mal den  HTML Code für eine "Box" (CSS ist im Head unter dem <style>-tag zu finden)

HTML:

<!DOCTYPE HTML>
<html>
   <head>
      <style>
         #box1{
            position:absolute;
            height: 8mm;
            width: 85mm;
            margin-top: 45mm;
            margin-left: 20mm;
            background-color: green;
            }
      </style>
   </head>
   <body>
      <div id="box1">
         Feld fuer Postanschrift des Absenders
      </div>
    </body>
</html>

Bei Fragen fragen :P

MFG

LuKas

Kommentar von bautz93 ,

Jou danke dir! Denke soweit bekomme ich das jetzt hin :)

Kommentar von LustenLu ,

No Problem - Hilfreichste Antwort und Danke Button gibt es sonst auch :P Dann musst du nicht immer einen Kommentar schreiben :)

Kommentar von LustenLu ,

Thx ü <3

Antwort
von mrhashpipeotto, 9

nimm am besten flexbox, das ist ein neues css model das für komplizierte responsive layouts entwickelt wurde. das kannst du auch für dein layout nehmen ohne sich die ganze altmodische frickelarbeit aus dem letzen jahrhundert mit floats, clearings, positions usw anzutun, das macht das ganze css layouten viel einfacher. mehr in dem link:


css-tricks.com/snippets/css/a-guide-to-flexbox/

Antwort
von medmonk, 39

Auf deiner Grafik sind doch die Breiten und Höhenangaben vorgegeben. Erstell in deinem Markup eine Division mit gleicher (fixer) Größe. In dieser erstellt du nun ein Formular und positionierst dieses an die gewünschte Stelle. 

Dafür lediglich der Division ein position: relative geben. Dem Formular hingegen ein position: absolute zuweisen und über top und left verschieben. Mehr ist es nicht und sollte schnell umgesetzt sein. 


 

Kommentar von bautz93 ,

Danke dir schonmal...allerdings hab ich zuvor nie so etwas gemacht...Die Theorie verstehe ich, an der Umsetzung holpert es allerdings stark. Ich weiß beispielsweise, wie ich ein Div mit fixer Größe bekomme (hat allerdings auch etwas gedauert), doch wie ich jetzt ein Formular einbaue, weiß ich nicht :/

Kommentar von medmonk ,

Du solltest dir auf jeden Fall entsprechendes Grundlagenwissen über HTML und CSS aneignen, wenn du solche Sachen umsetzen möchtest. 

Auf die Schnelle ein kleines Beispiel:

http://little-boxes.de/lb1/9.6.1-schritt-1-das-formular-im-html-quelltext.html

Dem Form-Element gibst du dann ein position absolute und positionierst es bie bereits beschrieben an die gewünschte Stelle. Im ganzen sind eigentlich relative wenige Angaben notwendig.  

Antwort
von perhp, 7

Haha du schon wieder :D

Hast du zufällig meine Antwort bei deiner anderen Frage gesehen? Wenn du dieses Template für den Email-Versand bzw. Newsletter machst, was ich stark vermute, dann gehst du das ganze falsch an, da du spätestens beim Testen draufkommen wirst, dass die meisten Befehle nicht funktionieren...

Antwort
von Ralph25, 32

Ich denke es wäre das beste, wenn du sie in kleine boxen unterteilst.

Im html- dokument: (div class="test") (p) test (p) (/div)

Css:
Div.test (geschweifteklammer)
Position: absolute; width: 100px; height: 50px; top:10%;

(Geschweifte klammer zu)

Warte aber bitte noch eine antwort ab, weil ich mich nicht als profi bezeichnen würde.

*am handy kann man keinen code hier rein schreiben.

Kommentar von Ralph25 ,

kann aber auch sein, dass ich komplett fasch liege!

Keine passende Antwort gefunden?

Fragen Sie die Community

Weitere Fragen mit Antworten