zurück zur Startseite
  

Registrieren Hilfe Benutzerliste Heutige Beiträge

Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Flexbox wirkt auf den generierten Text nicht

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 05.07.2014, 20:40
Neuer Benutzer
neuer user
Thread-Ersteller
  
Registriert seit: 05.07.2014
Beiträge: 2
MOCKBA2008 befindet sich auf einem aufstrebenden Ast
Standard Flexbox wirkt auf den generierten Text nicht
Servus

Leute ich hoffe ihr könnt mir helfen.

Ich habe auf mein Geschmack ein Text generieren lassen ,den ich späte mit Hilfe von Flexbox auf meiner Seite positionieren wollte.
Nur es gibt ein Problem mit positionieren , das Text lässt sich nicht bewegen.
HTML-Code:
      <div id="warped">
					<span class='w0'>i</span>
					<span class='w1'>c</span>
					<span class='w2'>h</span>
					<span class='w3'> </span>
					<span class='w4'>l</span>
					<span class='w5'>i</span>
					<span class='w6'>e</span>
					<span class='w7'>b</span>
					<span class='w8'>e</span>
					<span class='w9'> </span>
					<span class='w10'>e</span>
					<span class='w11'>u</span>
					<span class='w12'>c</span>
					<span class='w13'>h</span>
					<span class='w14'> </span>
					<span class='w15'>l</span>
					<span class='w16'>e</span>
					<span class='w17'>u</span>
					<span class='w18'>t</span>
					<span class='w19'>e</span>
				</div>


#warped {
    width:220px;
    height:220px;

    display: flex;
    display: -moz-flex;
    display: -webkit-flex;
    flex-direction: row;
    -moz-flex-direction: row;
    -webkit-flex-direction: row;
    justify-content: space-around;
    -moz-justify-content: space-around;
    -webkit-justify-content: space-around;
    }

	#warped>span[class^=w]:nth-of-type(n+0){
	 	display:block;
	    position:absolute;
	    -moz-transform-origin:50% 100%;
	    -webkit-transform-origin:50% 100%;
	    -o-transform-origin:50% 100%;
	    -ms-transform-origin:50% 100%;
	    transform-origin:50% 100%; 
	}

	#warped span{
	 	font-family:'ABeeZee';
	 	font-size:19px;
	 	font-weight:regular;
	 	font-style:normal;
	    line-height:0.6; 
	    white-space:pre;
	    overflow:visible;
	    padding:0px;
	}

	#warped .w0 {
	 	-moz-transform: rotate(-1.55rad);
	 	-webkit-transform: rotate(-1.55rad);
	 	-o-transform: rotate(-1.55rad);
	 	-ms-transform: rotate(-1.55rad);
	    transform: rotate(-1.55rad);
	    width: 5px; 
	    height: 11px; 
	    left: 311.54px; 
	    top: 246.77px;
	}

	#warped .w1 {
	 	-moz-transform: rotate(-1.4rad);
	 	-webkit-transform: rotate(-1.4rad);
	 	-o-transform:rotate(-1.4rad);
	 	-ms-transform: rotate(-1.4rad);
	    transform: rotate(-1.4rad);
	    width: 9px;
	    height: 11px;
	    left: 311.06px;
	    top: 231.86px;
	}

	#warped .w2 {
	 	-moz-transform: rotate(-1.23rad);
	 	-webkit-transform: rotate(-1.23rad);
	 	-o-transform: rotate(-1.23rad);
	 	-ms-transform: rotate(-1.23rad); 
	 	transform: rotate(-1.23rad);
	    width: 11px;
	    height: 11px;
	    left: 314.63px;
	    top: 214.47px;
	}

	#warped .w3 {
	  -moz-transform: rotate(-1.08rad);
	  -webkit-transform: rotate(-1.08rad);
	  -o-transform:rotate(-1.08rad);
	  -ms-transform: rotate(-1.08rad);
	  transform: rotate(-1.08rad);
	  width: 6px;
	  height: 11px;
	  left: 323.84px;
	  top: 199.41px;
	}

	#warped .w4 {
	 	-moz-transform: rotate(-0.94rad);
	 	-webkit-transform: rotate(-0.94rad);
	 	-o-transform: rotate(-0.94rad);
	 	-ms-transform: rotate(-0.94rad);
	 	transform: rotate(-0.94rad);
	    width: 7px;
	    height: 11px;
	    left: 331.11px;
	    top: 187.18px;
	}

	#warped .w5 {
		-moz-transform: rotate(-0.81rad);
		-webkit-transform: rotate(-0.81rad);
		-o-transform: rotate(-0.81rad);
		-ms-transform: rotate(-0.81rad);
		transform: rotate(-0.81rad);
	    width: 5px;
	    height: 11px;
	    left: 341.12px;
	    top: 176.49px;
	}

	#warped .w6 {
	 	-moz-transform: rotate(-0.66rad);
	 	-webkit-transform: rotate(-0.66rad);
	 	-o-transform: rotate(-0.66rad);
	 	-ms-transform: rotate(-0.66rad); 
	 	transform: rotate(-0.66rad);
	    width: 10px;
	    height: 11px;
	    left: 350.15px;
	    top: 166.14px;
	}

    #warped .w7 {
	 	-moz-transform: rotate(-0.49rad);
	 	-webkit-transform: rotate(-0.49rad);
	 	-o-transform: rotate(-0.49rad);
	 	-ms-transform: rotate(-0.49rad); 
	 	transform: rotate(-0.49rad);
	    width: 11px;
	    height: 11px;
	    left: 365.2px; 
	    top: 156.16px;
	}

	#warped .w8 {
	 	-moz-transform: rotate(-0.31rad);
	 	-webkit-transform: rotate(-0.31rad);
	 	-o-transform: rotate(-0.31rad);
	 	-ms-transform: rotate(-0.31rad);
	    transform: rotate(-0.31rad);
	    width: 10px; 
	    height: 11px;
	    left: 382.74px;
	    top: 149.02px;
	}

	#warped .w9 {
	 	-moz-transform: rotate(-0.16rad);
	 	-webkit-transform: rotate(-0.16rad);
	 	-o-transform: rotate(-0.16rad);
	 	-ms-transform: rotate(-0.16rad);
	    transform: rotate(-0.16rad);
	    width: 6px;
	    height: 11px;
	    left: 400.29px;
	    top: 145.32px;
	}

	#warped .w10 {
	 	-moz-transform: rotate(-0.01rad);
	 	-webkit-transform: rotate(-0.01rad);
	 	-o-transform: rotate(-0.01rad);
	 	-ms-transform: rotate(-0.01rad);
	    transform: rotate(-0.01rad);
	    width: 10px;
	    height: 11px;
	    left: 414.22px;
	    top: 144px;
	}

	#warped .w11 {
	 	-moz-transform: rotate(0.16rad);
	 	-webkit-transform: rotate(0.16rad);
	 	-o-transform: rotate(0.16rad);
	 	-ms-transform: rotate(0.16rad);
	 	transform: rotate(0.16rad);
	    width: 11px;
	    height: 11px;
	    left: 432.14px;
	    top: 145.47px;
	}

	#warped .w12 {
	 	-moz-transform: rotate(0.33rad);
	 	-webkit-transform: rotate(0.33rad);
	 	-o-transform: rotate(0.33rad);
	 	-ms-transform: rotate(0.33rad);
	    transform: rotate(0.33rad);
	    width: 9px;
	    height: 11px;
	    left: 450.55px;
	    top: 149.96px;
	}

	#warped .w13 {
	 	-moz-transform: rotate(0.5rad);
	 	-webkit-transform: rotate(0.5rad);
	 	-o-transform: rotate(0.5rad);
	 	-ms-transform: rotate(0.5rad);
	    transform: rotate(0.5rad);
	    width: 11px;
	    height: 11px;
	    left: 465.95px;
	    top: 157.32px;
	}

	#warped .w14 {
	 	-moz-transform: rotate(0.66rad);
	 	-webkit-transform: rotate(0.66rad);
	 	-o-transform: rotate(0.66rad);
	 	-ms-transform: rotate(0.66rad);
	 	transform: rotate(0.66rad);
	    width: 6px;
	    height: 11px;
	    left: 482.19px;
	    top: 166.42px;
	}

	#warped .w15 {
	 	-moz-transform: rotate(0.79rad);
	 	-webkit-transform: rotate(0.79rad);
	 	-o-transform: rotate(0.79rad);
	 	-ms-transform: rotate(0.79rad);
	 	transform: rotate(0.79rad);
	    width: 7px; 
	    height: 11px; 
	    left: 492.48px;
	    top: 176.09px;
	}


	#warped .w16 {
	 	-moz-transform: rotate(0.95rad);
	 	-webkit-transform: rotate(0.95rad);
	 	-o-transform: rotate(0.95rad);
	 	-ms-transform: rotate(0.95rad);
	 	transform: rotate(0.95rad);
	    width: 10px;
	    height: 11px;
	    left: 501.52px; 
        top: 188.76px;
	}

	#warped .w17 {
	 	-moz-transform: rotate(1.12rad);
	 	-webkit-transform: rotate(1.12rad);
	 	-o-transform: rotate(1.12rad);
	 	-ms-transform: rotate(1.12rad);
	 	transform: rotate(1.12rad);
	    width: 11px;
	    height: 11px;
	    left: 510.34px; 
	    top: 204.72px;
	  }

	#warped .w18 {
	 	-moz-transform: rotate(1.29rad);
	 	-webkit-transform: rotate(1.29rad);
	 	-o-transform: rotate(1.29rad);
	 	-ms-transform: rotate(1.29rad);
	 	transform: rotate(1.29rad);
	    width: 8px; 
	    height: 11px; 
	    left: 517.98px;
	    top: 221.09px;
	}


	#warped .w19 {
	 	-moz-transform: rotate(1.45rad);
	 	-webkit-transform: rotate(1.45rad);
	 	-o-transform: rotate(1.45rad);
	 	-ms-transform: rotate(1.45rad);
	 	transform: rotate(1.45rad);
	    width: 10px;
	    height: 11px;
	    left: 520.28px; 
	    top: 237.74px;
}
danke
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 05.07.2014, 22:58
?!?
XHTMLforum-Kenner
  
Registriert seit: 20.03.2013
Beiträge: 1.638
explanator sorgt für eine eindrucksvolle Atmosphäreexplanator sorgt für eine eindrucksvolle Atmosphäre
Standard
Bitte immer den vollständigen Code zeigen oder einen Link zur Seite.
Zudem ist deine Frage nicht eindeutig gestellt.
__________________
"Wieso ist der Code schrott, ich dachte hier seien Profis..."
Aus einem Forum.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 06.07.2014, 11:13
Neuer Benutzer
neuer user
Thread-Ersteller
  
Registriert seit: 05.07.2014
Beiträge: 2
MOCKBA2008 befindet sich auf einem aufstrebenden Ast
Standard
Morgen

Ich habe oben nur den Code von generierten Text eingegeben, damit es übersichtlicher wird.
Da wo ich mit Flexbox den Text positionieren möchte, dubliziere ich den Text und trage die beiden Texten in ein Hauptelement ein. Seinerseits bekommet der Hauptelement Flexbox Attribute:
HTML-Code:
<div id="Hauptelement">
                           <div id="warped">
					<span class='w0'>i</span>
					<span class='w1'>c</span>
					<span class='w2'>h</span>
					<span class='w3'> </span>
					<span class='w4'>l</span>
					<span class='w5'>i</span>
					<span class='w6'>e</span>
					<span class='w7'>b</span>
					<span class='w8'>e</span>
					<span class='w9'> </span>
					<span class='w10'>e</span>
					<span class='w11'>u</span>
					<span class='w12'>c</span>
					<span class='w13'>h</span>
					<span class='w14'> </span>
					<span class='w15'>l</span>
					<span class='w16'>e</span>
					<span class='w17'>u</span>
					<span class='w18'>t</span>
					<span class='w19'>e</span>
				</div>
                               <div id="warped">
					<span class='w0'>i</span>
					<span class='w1'>c</span>
					<span class='w2'>h</span>
					<span class='w3'> </span>
					<span class='w4'>l</span>
					<span class='w5'>i</span>
					<span class='w6'>e</span>
					<span class='w7'>b</span>
					<span class='w8'>e</span>
					<span class='w9'> </span>
					<span class='w10'>e</span>
					<span class='w11'>u</span>
					<span class='w12'>c</span>
					<span class='w13'>h</span>
					<span class='w14'> </span>
					<span class='w15'>l</span>
					<span class='w16'>e</span>
					<span class='w17'>u</span>
					<span class='w18'>t</span>
					<span class='w19'>e</span>
				</div>
</div>

#hauptelement{
        width: 500px;
	height: 300px;
	display: flex;
	flex-direction: row;
	justify-content: space- between;
	align-items: center;
}
#warped {
    width:220px;
    height:220px;

    display: flex;
    display: -moz-flex;
    display: -webkit-flex;
    flex-direction: row;
    -moz-flex-direction: row;
    -webkit-flex-direction: row;
    justify-content: space-around;
    -moz-justify-content: space-around;
    -webkit-justify-content: space-around;
    }

	#warped>span[class^=w]:nth-of-type(n+0){
	 	display:block;
	    position:absolute;
	    -moz-transform-origin:50% 100%;
	    -webkit-transform-origin:50% 100%;
	    -o-transform-origin:50% 100%;
	    -ms-transform-origin:50% 100%;
	    transform-origin:50% 100%; 
	}

	#warped span{
	 	font-family:'ABeeZee';
	 	font-size:19px;
	 	font-weight:regular;
	 	font-style:normal;
	    line-height:0.6; 
	    white-space:pre;
	    overflow:visible;
	    padding:0px;
	}

	#warped .w0 {
	 	-moz-transform: rotate(-1.55rad);
	 	-webkit-transform: rotate(-1.55rad);
	 	-o-transform: rotate(-1.55rad);
	 	-ms-transform: rotate(-1.55rad);
	    transform: rotate(-1.55rad);
	    width: 5px; 
	    height: 11px; 
	    left: 311.54px; 
	    top: 246.77px;
	}

	#warped .w1 {
	 	-moz-transform: rotate(-1.4rad);
	 	-webkit-transform: rotate(-1.4rad);
	 	-o-transform:rotate(-1.4rad);
	 	-ms-transform: rotate(-1.4rad);
	    transform: rotate(-1.4rad);
	    width: 9px;
	    height: 11px;
	    left: 311.06px;
	    top: 231.86px;
	}

	#warped .w2 {
	 	-moz-transform: rotate(-1.23rad);
	 	-webkit-transform: rotate(-1.23rad);
	 	-o-transform: rotate(-1.23rad);
	 	-ms-transform: rotate(-1.23rad); 
	 	transform: rotate(-1.23rad);
	    width: 11px;
	    height: 11px;
	    left: 314.63px;
	    top: 214.47px;
	}

	#warped .w3 {
	  -moz-transform: rotate(-1.08rad);
	  -webkit-transform: rotate(-1.08rad);
	  -o-transform:rotate(-1.08rad);
	  -ms-transform: rotate(-1.08rad);
	  transform: rotate(-1.08rad);
	  width: 6px;
	  height: 11px;
	  left: 323.84px;
	  top: 199.41px;
	}

	#warped .w4 {
	 	-moz-transform: rotate(-0.94rad);
	 	-webkit-transform: rotate(-0.94rad);
	 	-o-transform: rotate(-0.94rad);
	 	-ms-transform: rotate(-0.94rad);
	 	transform: rotate(-0.94rad);
	    width: 7px;
	    height: 11px;
	    left: 331.11px;
	    top: 187.18px;
	}

	#warped .w5 {
		-moz-transform: rotate(-0.81rad);
		-webkit-transform: rotate(-0.81rad);
		-o-transform: rotate(-0.81rad);
		-ms-transform: rotate(-0.81rad);
		transform: rotate(-0.81rad);
	    width: 5px;
	    height: 11px;
	    left: 341.12px;
	    top: 176.49px;
	}

	#warped .w6 {
	 	-moz-transform: rotate(-0.66rad);
	 	-webkit-transform: rotate(-0.66rad);
	 	-o-transform: rotate(-0.66rad);
	 	-ms-transform: rotate(-0.66rad); 
	 	transform: rotate(-0.66rad);
	    width: 10px;
	    height: 11px;
	    left: 350.15px;
	    top: 166.14px;
	}

    #warped .w7 {
	 	-moz-transform: rotate(-0.49rad);
	 	-webkit-transform: rotate(-0.49rad);
	 	-o-transform: rotate(-0.49rad);
	 	-ms-transform: rotate(-0.49rad); 
	 	transform: rotate(-0.49rad);
	    width: 11px;
	    height: 11px;
	    left: 365.2px; 
	    top: 156.16px;
	}

	#warped .w8 {
	 	-moz-transform: rotate(-0.31rad);
	 	-webkit-transform: rotate(-0.31rad);
	 	-o-transform: rotate(-0.31rad);
	 	-ms-transform: rotate(-0.31rad);
	    transform: rotate(-0.31rad);
	    width: 10px; 
	    height: 11px;
	    left: 382.74px;
	    top: 149.02px;
	}

	#warped .w9 {
	 	-moz-transform: rotate(-0.16rad);
	 	-webkit-transform: rotate(-0.16rad);
	 	-o-transform: rotate(-0.16rad);
	 	-ms-transform: rotate(-0.16rad);
	    transform: rotate(-0.16rad);
	    width: 6px;
	    height: 11px;
	    left: 400.29px;
	    top: 145.32px;
	}

	#warped .w10 {
	 	-moz-transform: rotate(-0.01rad);
	 	-webkit-transform: rotate(-0.01rad);
	 	-o-transform: rotate(-0.01rad);
	 	-ms-transform: rotate(-0.01rad);
	    transform: rotate(-0.01rad);
	    width: 10px;
	    height: 11px;
	    left: 414.22px;
	    top: 144px;
	}

	#warped .w11 {
	 	-moz-transform: rotate(0.16rad);
	 	-webkit-transform: rotate(0.16rad);
	 	-o-transform: rotate(0.16rad);
	 	-ms-transform: rotate(0.16rad);
	 	transform: rotate(0.16rad);
	    width: 11px;
	    height: 11px;
	    left: 432.14px;
	    top: 145.47px;
	}

	#warped .w12 {
	 	-moz-transform: rotate(0.33rad);
	 	-webkit-transform: rotate(0.33rad);
	 	-o-transform: rotate(0.33rad);
	 	-ms-transform: rotate(0.33rad);
	    transform: rotate(0.33rad);
	    width: 9px;
	    height: 11px;
	    left: 450.55px;
	    top: 149.96px;
	}

	#warped .w13 {
	 	-moz-transform: rotate(0.5rad);
	 	-webkit-transform: rotate(0.5rad);
	 	-o-transform: rotate(0.5rad);
	 	-ms-transform: rotate(0.5rad);
	    transform: rotate(0.5rad);
	    width: 11px;
	    height: 11px;
	    left: 465.95px;
	    top: 157.32px;
	}

	#warped .w14 {
	 	-moz-transform: rotate(0.66rad);
	 	-webkit-transform: rotate(0.66rad);
	 	-o-transform: rotate(0.66rad);
	 	-ms-transform: rotate(0.66rad);
	 	transform: rotate(0.66rad);
	    width: 6px;
	    height: 11px;
	    left: 482.19px;
	    top: 166.42px;
	}

	#warped .w15 {
	 	-moz-transform: rotate(0.79rad);
	 	-webkit-transform: rotate(0.79rad);
	 	-o-transform: rotate(0.79rad);
	 	-ms-transform: rotate(0.79rad);
	 	transform: rotate(0.79rad);
	    width: 7px; 
	    height: 11px; 
	    left: 492.48px;
	    top: 176.09px;
	}


	#warped .w16 {
	 	-moz-transform: rotate(0.95rad);
	 	-webkit-transform: rotate(0.95rad);
	 	-o-transform: rotate(0.95rad);
	 	-ms-transform: rotate(0.95rad);
	 	transform: rotate(0.95rad);
	    width: 10px;
	    height: 11px;
	    left: 501.52px; 
        top: 188.76px;
	}

	#warped .w17 {
	 	-moz-transform: rotate(1.12rad);
	 	-webkit-transform: rotate(1.12rad);
	 	-o-transform: rotate(1.12rad);
	 	-ms-transform: rotate(1.12rad);
	 	transform: rotate(1.12rad);
	    width: 11px;
	    height: 11px;
	    left: 510.34px; 
	    top: 204.72px;
	  }

	#warped .w18 {
	 	-moz-transform: rotate(1.29rad);
	 	-webkit-transform: rotate(1.29rad);
	 	-o-transform: rotate(1.29rad);
	 	-ms-transform: rotate(1.29rad);
	 	transform: rotate(1.29rad);
	    width: 8px; 
	    height: 11px; 
	    left: 517.98px;
	    top: 221.09px;
	}


	#warped .w19 {
	 	-moz-transform: rotate(1.45rad);
	 	-webkit-transform: rotate(1.45rad);
	 	-o-transform: rotate(1.45rad);
	 	-ms-transform: rotate(1.45rad);
	 	transform: rotate(1.45rad);
	    width: 10px;
	    height: 11px;
	    left: 520.28px; 
	    top: 237.74px;
}
Was ist meine Frage ?
Warum beide Texten lassen sich nicht innerhalb Hauptelement positionieren?
Mit Zitat antworten
  #4 (permalink)  
Alt 06.07.2014, 11:40
?!?
XHTMLforum-Kenner
  
Registriert seit: 20.03.2013
Beiträge: 1.638
explanator sorgt für eine eindrucksvolle Atmosphäreexplanator sorgt für eine eindrucksvolle Atmosphäre
Standard
Weil du hier
HTML-Code:
#hauptelement{
        width: 500px;
	height: 300px;
	display: flex;
	flex-direction: row;
	justify-content: space- between;
	align-items: center;
}
Mit display auf das flexbox-Modell umgestiegen bist. Du müsstest dort aber position:relative oder position:absolute drin stehen haben, damit du mit position:absolute die Nachfahren innerhalb positionieren kannst.

Siehe auch CSS Flexible Box Layout Module Level 1
und CSS Positioned Layout Module Level 3
__________________
"Wieso ist der Code schrott, ich dachte hier seien Profis..."
Aus einem Forum.
Mit Zitat antworten
Antwort

« Vorheriges Thema | Nächstes Thema »

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.
BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus

Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Wrapper wächst nicht mit, keine Floats maclady CSS 11 10.02.2010 17:30
Wachsende Container Andy CD CSS 13 10.02.2010 13:08
DIV bis GANZ unten burnZ CSS 5 27.07.2008 13:14
Helft mir. Ich habe voll die Leseschwäche nick CSS 12 15.01.2008 20:52
Problem mit div und Höhe deep4 CSS 2 13.11.2007 20:03


Alle Zeitangaben in WEZ +2. Es ist jetzt 09:55 Uhr.

Datenschutzerklärung - Impressum - Archiv - Nach oben

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2024, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2023