Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> Float left w przypadku canvas
finito
post 10.10.2013, 17:53:25
Post #1





Grupa: Zarejestrowani
Postów: 110
Pomógł: 0
Dołączył: 16.12.2012

Ostrzeżenie: (0%)
-----

Chcę, żeby prawy div przylegał z prawej strony canvas'a. Oczywiście moge to zrobić, ale tylko w taki sposób, że w canvas daję float:left a potem temu prawemu divowi daje margin-left:"taki sam jak width canvasa" i wtedy faktycznie ten div przylega z prawej strony. Uważam jednak, że jest to dość amatorskie rozwiązanie. Nie wiem jednak jak to inczej uzyskać tzn. bez właściwości margin-left.
Ma ktoś jakiś pomysł?
Kod html:
[HTML] pobierz, plaintext 
  1. <!DOCTYPE html>
  2. <meta charset="utf-8">
  3.   <meta name="Description" content=" [wstaw tu opis strony] ">
  4.   <meta name="Keywords" content=" [wstaw tu slowa kluczowe] ">
  5.   <meta name="Author" content=" [dane autora] ">
  6.   <meta name="Generator" content="kED2">
  7. <head>
  8. <title></title>
  9. <link rel="stylesheet" href="style.css" type="text/css" />
  10. <script type="text/javascript">
  11. window.onload= function(){
  12. var canvas = document.getElementById("canvas");
  13. var context = canvas.getContext("2d");
  14. context.lineJoin="level";
  15. context.moveTo(29,50);
  16. context.lineTo(50,280);
  17. context.lineTo(450,50);
  18. context.closePath();
  19.  
  20. context.lineWidth = 20;
  21. context.strokeStyle = "red";
  22. context.lineCap = "bull";
  23.  
  24. context.stroke();
  25. context.closePath();
  26. context.fillStyle = "blue";
  27. };
  28. </script>
  29. </head>
  30. <body>
  31. <canvas width="700" height="500" id="canvas">
  32. Tresc alternatywna
  33. </canvas>
  34.  
  35.  
  36. <div id="prawy"></div>
  37.  
  38.  
  39. </body>
  40. </html>
[HTML] pobierz, plaintext

Kod css: 
[CSS] pobierz, plaintext 
  1. canvas {
  2.  
  3. 	display:block;
  4. 	float:left;
  5.         width:700px;
  6. 	height:500px;
  7. 	border:1px solid black;
  8.  
  9. }
  10. #prawy {
  11. 		width:100px;
  12. 		height:300px;
  13. 		background-color:green;
  14.                 margin-left:700px;
  15.  
  16. }
[CSS] pobierz, plaintext


Serio?? Naprawdę nie ma na to rady?

Ten post edytował finito 10.10.2013, 17:54:07
Go to the top of the page
+Quote Post
com
post 10.10.2013, 18:15:41
Post #2





Grupa: Zarejestrowani
Postów: 3 033
Pomógł: 366
Dołączył: 24.05.2012

Ostrzeżenie: (0%)
-----

co to robi w tym dziale? css ziom wink.gif

http://jsfiddle.net/gBnsP/ i efekt http://jsfiddle.net/gBnsP/show/

podstawy css się kłaniają wink.gif
Go to the top of the page
+Quote Post
« Następny starszy · HTML \ XHTML · Następny nowszy »
 

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Standardowy · Przełącz na: Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Wersja Lo-Fi Aktualny czas: 23.04.2024 - 08:10
Powered By IP.Board © 2024  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn