Divs in Css nicht überlappen?
Hallo leute, wie schafft man es das sich in html/css 2 divs nicht überlappen können und auch z.b kein text dahinter kann damit auf smartphones textumbrüche gemacht werden und nicht 3 divs ineinander sind sondern alle 3 untereinander aufgelistet sind LG
3 Antworten
Du machst erstmal einen "Container DIV". Du legst die Größe fest usw. fest. Die position: lässt du bei static
In diesem Container DIV stehen dann die 3 DIV's(A, B und C). Alle ABC haben die Eigenschaft "position: relative". Da sie untereinander gelistet werden sollen, gibst du jedem DIV width: 100% und die Höhe kannst du beliebig entscheiden.
Meine Antwort muss aber nicht stimmen da ich mir deine Seite genauer ansehen müsste.
Das sind keine Textboxen sondern auch DIV's xD.
Jo, das geht easy. Du erstellst zwei CSS-Klassen: einmal wie der DIV(A) "ungezoomt" aussehen soll und ein zweites wie der DIV(B)"gezoomt" aussehen soll. Hier ist es wichtig, dass am Anfang im HTML Code nur DIV A vertreten ist und nicht DIV B!
Mit einem Javascript überprüfst du dann ob DIV (A) angeklickt wurde. Falls ja, kannst du mit JS die Klassen ganz einfach austauschen. Um mehrere Textboxen zu erstellen, müsstest du auch noch überprüfen, ob weggeklickt wird damit sich die Textbox wieder "unzoomt"
Gibt bestimmt viele Beispiele im Inet
Das macht man mit breakpoints und media queries. Bei großen Bildschirmen width:30% - drei Boxen nebeneinander. Bei mittlerer Größe width:50% - zwei Boxen. Bei kleinen Geräten with:100% - nur eine Box. Brauchst dir ja nur den Style deiner Beispielseite anzeigen lassen, dann siehst du, wie das geht.
Erklärung hier
https://www.mediaevent.de/css/media-query.html
Du müsstest das Problem etwas genauer formulieren. Absolute Positionierung ohne Überlappung erreichst du damit:
selector {
position: relative;
}
Automatische Zeilenumbrüche klappen so:
selector {
word-wrap: break-word;
}
Zeig uns doch mal deine Website, damit man sich hier ein Bild vom Problem machen kann.
Mit position: absolute überlappen sich die DIV's.
Er sucht bestimmt nach dem Default(static) oder position: relative.
Entschuldigung für die unklare formulierung, es geht darum wie man boxen dazu bringt sich so zu verhalten wie z.b die "IMac Pro" oder App Store box auf dieser seite https://www.apple.com/at/ beim zoomen verändert sich die anordnung
Realtive hat bei mir gerade nicht funktioniert... wäre auch davon ausgegangen der text hat sich allerdings hinter die box geschoben
Danke das hilft mir bereits weiter :) weißt du auch vl wie man die weite solcher textboxen auch beliebig machen kann wie z.b auf dieser wesite https://www.apple.com/at/ die unteren kästchen welche sich neu anordnen beim zoomen Danke für die Antwort