zentriertes Div mit variabler breite ohne JS
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
anpassen
buchstabe
code
dank
effekt
eigenschaft
erweitern
funktionieren
grad
http
links setzen
paar
position
sagen
setzen
tabelle
tag
text
vergessen
zeile
-
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
das funktioniert aber nur bei einer festen breitenangabe und ohne position angabe ;)
-
Ohne JS wird schwierig.... Denn zur Zentrierung würdest du es mit left: 50% und margin-left: -(breite/2) positionieren. Und sobald sich der Text ändern würde hätte die DIV Box eine andere Breite.
Was du probieren könntest wäre eine einzeilige Tabelle auf 100% Breite und absolut zu setzen. Die TD auf text-align:center setzen und dann da drin dein DIV definieren. Ich bin mir nicht sicher ob das den gewünschten Effekt erzeugt, aber ausprobieren hat noch nie geschadet.
Beitrag zuletzt geändert: 26.8.2009 9:23:36 von evil-devil -
Könntest du vielleicht eine Anwendung sagen, möglicherweise gibt es eine Lösung, aber im Moment bin ich mir nicht sicher!
Schau dir mal das an:
<div class="nowrap"> <div>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div> </div>
div.nowrap div {display:inline-block; white-space:nowrap;border:1px solid;}
Das Problem mit "an die Breite des Textes" anpassen ist, dass ich ja dann alles in eine Zeile schreibe, denn dann ist es so breit wie der Text?! -
kann sein, das ich das alles falsch verstehe, aber du kannst es doch einfach so machem:
<center> <div style="width:50%">textextextexte</div> </center>
wenn ich falsch liege, bitte ich um entschuldigung!
-
okay, sehe grad das ich vergessen habe zu sagen, dass ich um das zentrierte div ein weiteres div hab das 800px breit ist und position absolute hat.
darin soll jtz das andere Div zentriert sein, sich dem Text anpassen, und !! position absolut oder relativ haben !!
Leider funktionieren die Lösungsansätze von euch nicht so wircklich. Trotzdem Danke =) -
freezinger schrieb:
okay, sehe grad das ich vergessen habe zu sagen, dass ich um das zentrierte div ein weiteres div hab das 800px breit ist und position absolute hat.
darin soll jtz das andere Div zentriert sein, sich dem Text anpassen, und !! position absolut oder relativ haben !!
Leider funktionieren die Lösungsansätze von euch nicht so wircklich. Trotzdem Danke =)
dann mach es so: du gibst einfach die position an, keine breite, dann müsste es sich eigentlich an den text anpassen. und außen, um den div-tag setzt du einen <center>-tag. da musst du dann nur die text-alignment vom div-tag in css wieder auf links setzen -
dynamic-designs schrieb:
freezinger schrieb:
okay, sehe grad das ich vergessen habe zu sagen, dass ich um das zentrierte div ein weiteres div hab das 800px breit ist und position absolute hat.
darin soll jtz das andere Div zentriert sein, sich dem Text anpassen, und !! position absolut oder relativ haben !!
Leider funktionieren die Lösungsansätze von euch nicht so wircklich. Trotzdem Danke =)
dann mach es so: du gibst einfach die position an, keine breite, dann müsste es sich eigentlich an den text anpassen. und außen, um den div-tag setzt du einen <center>-tag. da musst du dann nur die text-alignment vom div-tag in css wieder auf links setzen
bei deinem Vorschlag wird das Div nicht zentriert ;)
bei position:absolute is es einfach links und bei position:relative passt es sich nicht dem text an sondern is genauso groß wie das äußere div -
dynamic-designs schrieb: dann mach es so: du gibst einfach die position an, keine breite, dann müsste es sich eigentlich an den text anpassen. und außen, um den div-tag setzt du einen <center>-tag. da musst du dann nur die text-alignment vom div-tag in css wieder auf links setzen
Das center-Tag ist veraltet und sollte nicht benutzt werden!
Ich habe es zwar schon in meinem Post geschrieben, aber du hast es anscheinend überlesen oder mir nicht konkret genug geschildert:
Was bedeutet den, dass div soll sich dem Text anpassen!
Wie genau soll sich das div verhalten, wenn der Text größer wird, oder kleiner, über eine Zeile, was auch immer. Vielleicht stehe ich ja auch dem Schlauch, aber klar ist mir das nicht! -
ich erklärs nochmal genauer ^^
also das div, sollt, wenn kein text drinnen is 0x0 px groß sein
schreib ich dann ein paar buchstaben rein soll es eben genau so groß sein wie dir buchstaben drinnen,
mach ich jtz ne 2te zeile sollt sich die höhe um eben die eine zeile erweitern ^^
hoff, das war jtz genau genug ;) -
Hab was gefunden das klappt. Nutzt zwar eine Tabelle und das align Attribut selbiger, aber ich denke das ist für den Fall legitim :)
<?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Insert title here</title> </head> <body> <div style="position: absolute; width: 800px; text-align: center; background: #CECECE;"> <br /> <table align="center"><tr><td style="text-align: left;">„Lorem ipsum dolor sit amet,<br />consectetuer sadipscing elitr,<br />sed diam nonumy eirmod tempor invidunt ut<br />labore et dolore magna aliquyam erat,<br />sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.<br />Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum<br />dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr,<br />sed diam nonumy eirmod tempor<br />invidunt ut labore et dolore magna aliquyam<br />erat, sed diam voluptua.</td></tr></table> <br /> </div> </body> </html> -
freezinger schrieb: also das div, sollt, wenn kein text drinnen is 0x0 px groß sein
schreib ich dann ein paar buchstaben rein soll es eben genau so groß sein wie dir buchstaben drinnen,
mach ich jtz ne 2te zeile sollt sich die höhe um eben die eine zeile erweitern ^^
hoff, das war jtz genau genug ;)
Alles klar, wenn du dem div ne border gibst, kann es auch wenn gar kein Inhalt drin ist, nicht 0x0 Ausmaße haben, wegen Boxmodell.
Alles andere hört sich stark nach einem Inline-Element an (wie span). Überlegenswert wäre wohl:
<div class="nowrap"><div>Text</div></div>
div {text-align:center; width:100%:} div.nowrap div {display:inline-block; }
Edit: position kannste auch noch festlegen
Beitrag zuletzt geändert: 26.8.2009 13:23:03 von werktags -
ohne Tabelle wird das nicht umsetzbar sein oder?
edit: @werktags das Div passt sich aber nicht an die textbreite an, es is 800px so wie das äußerste div
Beitrag zuletzt geändert: 26.8.2009 13:38:43 von freezinger -
Wenn dich die Tabelle nicht stört, würde ich es damit machen. Leider versteht kaum ein Browser die Table CSS Eigenschaft. Sonst hätte man dem DIV Table Eigenschaften mitgeben können ^^
-
nagut, dann werd ich mich wohl mit der tabelle zufrieden geben müssen ^^
Vielen Dank @ all -
freezinger schrieb: also das div, sollt, wenn kein text drinnen is 0x0 px groß sein
schreib ich dann ein paar buchstaben rein soll es eben genau so groß sein wie dir buchstaben drinnen,
mach ich jtz ne 2te zeile sollt sich die höhe um eben die eine zeile erweitern ^^
hoff, das war jtz genau genug ;)
siehe Beispiel!
Meines Erachtens nach funktioniert das - oder soll da noch etwas anderes geleistet werden? -
Mit inline hatte ich auch herumprobiert, da ist aber das Problem, dass jenes DIV keine Border mehr haben kann und Text automatisch zentriert ist, nicht gerade schön der Effekt vor allem keinen Border zu haben kann ein Nachteil sein.
-
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage