Danke für das coden. Flexbox scheint ja ideale lösung dafür zu sein !
Beiträge von d4rkdr4g0n1
-
-
Nun wollte zuerst eben nicht responsiv die Seite aufstellen und dann die selbe mit bootstrap-grid. Die Seite soll nicht ausgereift sein, soll nur ledeglich zum üben da sein.
-
Uff wie ich sehe habe ich das von Grund an falsch gemacht und verstanden.
Meine Idee war das ich einen .wrapper erstelle denn in die Mitte setze. Der soll 80% der ganzen Fläche füllen und mittig stehen. Diesen .wrapper wollte ich in 2 hälften teilen. Eine Hälfte soll ein Bild füllen und die 2 Hälfte ist für ein Content gedacht. Und in dieser rechten Content hälfte sollte ein Contact-Formular wieder mittig gesetzt werden.Jetzt ist meine Frage in Bezug auf deine Antwort. Wie erkenne ich einen Dokumentenfluß ?
Den .wrapper habe ich nur eine höhe gesetzt um zu sehen wie es sich verhält.
sonst würde ich das so programmieren:HTML.wrapper { border: 1px solid #665544; overflow: auto; width: 80%; margin: 80px auto; -
Hallo liebes Forum,
Ich habe folgendes Problem das ich leider nicht lösen kann. Ich würde gerne die zwei Inline-Blocks(Name und Email) in einem übergeordneten Div zentrieren. Ein Foto zur Problemstellung habe ich unten angefügt. Ich habe versucht die 2 Blöcke mit margin-right: 50%; und margin-left: 50; zu zentrieren aber jedoch ohne Erfolg. text-align: center; funktioniert auch nicht, sowie left: 50%;
Bin schon echt verzweifelt das ich an so etwas vermutlich leichtem scheitere. Die borders habe ich nur zur meinem Verstädnis angehängt um das Problem zu lösen.HTML
Alles anzeigen<head> <style> body { font-family: Verdana, Arial, sans-serif; color: #666666; background-color: #F7F9F9; margin: 0px; } .wrapper { width: 80%; height: 80%; margin: 80px auto; border: 1px solid black; } .side-content { width: 50%; float: right; border: 1px solid black; } .side-content .form-group { width: 25%; display: inline-block; padding: 10px; border: 1px solid black; } .form-control { } </style> </head> <body> <div class="wrapper"> <div class="side-content"> <div class="form-group"> <label for="name">Name:</label> <input type="text" class="form-control" id="name"> </div> <div class="form-group"> <label for="email">Email:</label> <input type="text" class="form-control" id="email"> </div> </div> </div> </body>
danke,
Gregor