Auf Thema antworten 2026

Beitrag

<blockquote data-quote="shadownight" data-source="post: 2648949" data-attributes="member: 493413">Hallo liebe Community!Ich habe schon lange nichts mehr im Bereich Webdesign bzw Web-Programmierung gemacht und brauch deshalb mal eure Hilfe.Derzeit versuche ich mich an responsive Webseiten, dazu habe ich mir mittels CSS jetzt ein Gridview mit 12 Spalten erstellt.Nun möchte ich ein Element innerhalb einer Spalte, die eine breite von 50% hat, positionieren. Leider weiß ich nicht mit welchen CSS Eigenschaften ich das bewerkstelligen soll. Da wenn ich die Eigenschaft position: fixed oder relative benutze, dass Element außerhalb der Spalte gerät.Also sollte ich dazu lieber padding oder margin verwenden?Oder gibt es noch bessere Lösungen das zu bewerkstelligen?Hier mal das Html-Dokument:[HTML]&lt;!doctype html&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset=&quot;utf-8&quot;&gt;&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot; /&gt;&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;responsive.css&quot;&gt;&lt;title&gt;resposnive&lt;/title&gt;&lt;/head&gt;&lt;body&gt;&lt;div class=&quot;row&quot;&gt;&nbsp; &nbsp; &lt;div class=&quot;col-6&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;div id=&quot;data&quot;&gt;Tel: +49 (0) 123 4567865 &amp;ensp; Mobil: +49 (0) 123 45678936&lt;/div&gt;&nbsp; &nbsp; &lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;row&quot;&gt;&nbsp; &nbsp; &lt;div class=&quot;col-6&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;div class=&quot;center-image&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;img src=&quot;img/logo_neu.png&quot; id=&quot;logo&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt;&nbsp; &nbsp; &lt;/div&gt;&nbsp; &nbsp; &lt;div class=&quot;col-6&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;ul class=&quot;menu&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;li&gt;Home&lt;/li&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;li&gt;Coaching&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;ul class=&quot;submenu&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/ul&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/li&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;li&gt;Über Mich&lt;/li&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;li&gt;Kontakt&lt;/li&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;li&gt;Flyer&lt;/li&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;/ul&gt;&nbsp; &nbsp; &lt;/div&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;[/HTML]Und das CSS-Dokument[CODE]@charset &quot;utf-8&quot;;*{&nbsp; &nbsp; box-sizing: border-box;&nbsp; &nbsp; margin: 0 auto;}#logo{&nbsp; &nbsp; max-width: 100%;&nbsp; &nbsp; height: auto;&nbsp; &nbsp; display: inline-block;&nbsp; &nbsp; vertical-align: middle;}.center-object{}.center-image{&nbsp; &nbsp; text-align: center;&nbsp; &nbsp; font: 0/0 a; }.center-image:before {&nbsp; &nbsp; content: &#039; &#039;;&nbsp; &nbsp; display: inline-block;&nbsp; &nbsp; vertical-align: middle;&nbsp; &nbsp; height: 100%;}#data{}.menu{&nbsp; &nbsp; display: table;&nbsp; &nbsp; list-style: none;&nbsp; &nbsp; max-width:&nbsp; 100%;&nbsp; &nbsp; height: auto;&nbsp; &nbsp; vertical-align: middle;}.menu li{&nbsp; &nbsp; float: left;&nbsp; &nbsp; padding-left: 0.983em;&nbsp; &nbsp; max-width:&nbsp; 100%;&nbsp; &nbsp; height: auto;}.row:after{&nbsp; &nbsp; content: &quot;&quot;;&nbsp; &nbsp; clear: both;&nbsp; &nbsp; display: table;}[class*=&quot;col-&quot;]{&nbsp; &nbsp; float: left;&nbsp; &nbsp; padding: 15px;}.col-1 {width: 8.33%;}.col-2 {width: 16.66%;}.col-3 {width: 25%;}.col-4 {width: 33.33%;}.col-5 {width: 41.66%;}.col-6 {width: 50%;}.col-7 {width: 58.33%;}.col-8 {width: 66.66%;}.col-9 {width: 75%;}.col-10 {width: 83.33%;}.col-11 {width: 91.66%;}.col-12 {width: 100%;}[/CODE]Schon mal vielen Dank für die Hilfe im voraus!</blockquote>

[QUOTE="shadownight, post: 2648949, member: 493413"] Hallo liebe Community! Ich habe schon lange nichts mehr im Bereich Webdesign bzw Web-Programmierung gemacht und brauch deshalb mal eure Hilfe. Derzeit versuche ich mich an responsive Webseiten, dazu habe ich mir mittels CSS jetzt ein Gridview mit 12 Spalten erstellt. Nun möchte ich ein Element innerhalb einer Spalte, die eine breite von 50% hat, positionieren. Leider weiß ich nicht mit welchen CSS Eigenschaften ich das bewerkstelligen soll. Da wenn ich die Eigenschaft position: fixed oder relative benutze, dass Element außerhalb der Spalte gerät. Also sollte ich dazu lieber padding oder margin verwenden? Oder gibt es noch bessere Lösungen das zu bewerkstelligen? Hier mal das Html-Dokument: [HTML]<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1" /> <link rel="stylesheet" type="text/css" href="responsive.css"> <title>resposnive</title> </head> <body> <div class="row"> <div class="col-6"> <div id="data">Tel: +49 (0) 123 4567865 &ensp; Mobil: +49 (0) 123 45678936</div> </div> </div> <div class="row"> <div class="col-6"> <div class="center-image"> <img src="img/logo_neu.png" id="logo"> </div> </div> <div class="col-6"> <ul class="menu"> <li>Home</li> <li>Coaching <ul class="submenu"> </ul> </li> <li>Über Mich</li> <li>Kontakt</li> <li>Flyer</li> </ul> </div> </div> </body> </html> [/HTML] Und das CSS-Dokument [CODE]@charset "utf-8"; *{ box-sizing: border-box; margin: 0 auto; } #logo{ max-width: 100%; height: auto; display: inline-block; vertical-align: middle; } .center-object{ } .center-image{ text-align: center; font: 0/0 a; } .center-image:before { content: ' '; display: inline-block; vertical-align: middle; height: 100%; } #data{ } .menu{ display: table; list-style: none; max-width: 100%; height: auto; vertical-align: middle; } .menu li{ float: left; padding-left: 0.983em; max-width: 100%; height: auto; } .row:after{ content: ""; clear: both; display: table; } [class*="col-"]{ float: left; padding: 15px; } .col-1 {width: 8.33%;} .col-2 {width: 16.66%;} .col-3 {width: 25%;} .col-4 {width: 33.33%;} .col-5 {width: 41.66%;} .col-6 {width: 50%;} .col-7 {width: 58.33%;} .col-8 {width: 66.66%;} .col-9 {width: 75%;} .col-10 {width: 83.33%;} .col-11 {width: 91.66%;} .col-12 {width: 100%;}[/CODE] Schon mal vielen Dank für die Hilfe im voraus! [/QUOTE]

Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.

Authentifizierung

Wenn ★ = 12, ◇ = 4 und die Hälfte von ★ zu ◇ addiert wird, was ist das Ergebnis?