Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [HTML][CSS]Pozycjonowanie elementów
Eldiane
post 29.04.2013, 11:58:37
Post #1





Grupa: Zarejestrowani
Postów: 34
Pomógł: 0
Dołączył: 6.01.2011
Skąd: Sosnowiec

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

Witam, mam taką oto stronę:

[HTML] pobierz, plaintext 
  1. <html>
  2. <head>
  3. 	<title>Baza danych biblioteki</title>
  4. 	<meta http-equiv="Content-type" content="text/html; charset=utf-8">
  5. 	<style type="text/css">
  6. 		body{
  7. 			background-color: #C4E1E6;
  8. 			margin: 0px;
  9. 		}
  10. 		a{
  11. 			color: black;
  12. 			font-size: 15px;
  13. 		}
  14. 		.menu{
  15. 			background-color: white;
  16. 			width: 10%;
  17. 			height: 60%;
  18. 			position: absolute;
  19. 			top: 20%;
  20. 			left: 7%;
  21. 		}
  22. 		.image{
  23. 			float: left;
  24. 		}
  25. 		.image1{
  26. 			position: relative;
  27. 			top: 15px;
  28. 		}
  29.  
  30. 	</style>
  31. </head>
  32. <body>
  33. <?php
  34. session_start();
  35. if(!isset($_SESSION['prawid_uzyt'])){
  36. 	include 'wylog.php';
  37. }
  38. else{
  39. 	?>
  40. 		<div class="image">
  41. 			<img src="images/book_elem/UpLeftCorn.png"></img>
  42. 		</div>
  43. 		<div class="image1">
  44. 			<img src="images/book_elem/Up.png"></img>
  45. 		</div>
  46. 		<div class="menu">
  47. 			<a href="wylog.php">Wylogowanie</a>
  48. 		</div>
  49. 	<?php
  50. }
  51. ?>
  52. </body>
  53. </html>
[HTML] pobierz, plaintext


I tutaj pojawia się moje pytanie, jeżeli ustawie dwa elementy a mianowicie div'a "image" i div'a "image1" to pomiędzy nimi tworzy się uporczywa przerwa, próbowałem ustawić atrybut padding na 0 px, ale bez efektu.



Można prosić o jakąś poradę?
Z góry dziękuje

Eldiane


--------------------
"Nie ważne by być lepszym od innych, ważne by być lepszym niż było się wczoraj"
Go to the top of the page
+Quote Post
lobopol
post 29.04.2013, 12:06:50
Post #2





Grupa: Zarejestrowani
Postów: 1 729
Pomógł: 346
Dołączył: 4.04.2009

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

Jakbyś dał to online byłoby łatwiej, a tak to obstawiam białe znaki między img w tych divach daj img w nich float left, albo lepiej wywal te znaczniki i daj tła tym divom


--------------------
pehap.pl - moje portfolio
Go to the top of the page
+Quote Post
Eldiane
post 29.04.2013, 12:28:17
Post #3





Grupa: Zarejestrowani
Postów: 34
Pomógł: 0
Dołączył: 6.01.2011
Skąd: Sosnowiec

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

oto link do strony http://kolonaukowejazz.hitowy.pl/

Twoje rozwiązania sprawdzę jak będę miał chwilkę, no chyba że jeszcze jesteś w stanie coś wyczarować i podpowiedzieć oneeyedsmiley02.png


--------------------
"Nie ważne by być lepszym od innych, ważne by być lepszym niż było się wczoraj"
Go to the top of the page
+Quote Post
in5ane
post 29.04.2013, 12:51:22
Post #4





Grupa: Zarejestrowani
Postów: 1 335
Pomógł: 34
Dołączył: 9.11.2005
Skąd: Wrocław

Ostrzeżenie: (10%)
X----

Nie coś takiego:
[HTML] pobierz, plaintext 
  1. 		<div class="image">
  2. 			<img src="images/book_elem/UpLeftCorn.png"></img>
  3. 		</div>
  4. 		<div class="image1">
  5. 			<img src="images/book_elem/Up.png"></img>
  6. 		</div>
[HTML] pobierz, plaintext

Tylko coś na wzór tego:
[HTML] pobierz, plaintext 
  1. <img src="upleftcorn.png" style="float: left;" /><img src="up.png" />
[HTML] pobierz, plaintext

Nie potrzebnie ładujesz to w DIV'y, po drugie znacznik <img> nie ma zamknięcia, dlatego domyka się go slash'em na końcu (albo bez tego slash'a), ale coś takiego, jak </img> nie istnieje.


--------------------
> > > Tworzenie stron < < <
Go to the top of the page
+Quote Post
Arcioch
post 29.04.2013, 12:52:49
Post #5





Grupa: Zarejestrowani
Postów: 324
Pomógł: 110
Dołączył: 18.09.2012

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

To nie jest powodowane przez CSS tylko przez to że masz źle wycięte zdjęcie UpLeftCorn.png smile.gif
Go to the top of the page
+Quote Post
in5ane
post 29.04.2013, 13:07:17
Post #6





Grupa: Zarejestrowani
Postów: 1 335
Pomógł: 34
Dołączył: 9.11.2005
Skąd: Wrocław

Ostrzeżenie: (10%)
X----

Cytat(Arcioch @ 29.04.2013, 13:52:49 ) *
To nie jest powodowane przez CSS tylko przez to że masz źle wycięte zdjęcie UpLeftCorn.png smile.gif

Ja nie zerknąłem na to, ale tak czy siak, źle pisze. Trzeba go troszkę nakierować.


--------------------
> > > Tworzenie stron < < <
Go to the top of the page
+Quote Post
viking
post 29.04.2013, 13:12:51
Post #7





Grupa: Zarejestrowani
Postów: 6 377
Pomógł: 1116
Dołączył: 30.08.2006

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

Ty też źle piszesz smile.gif Zamykanie w takie sposób img, link i br było kiedyś zwykłym hackiem. Natmiast w XML self-closing tag jest czymś oczywistym i nic nie boni zapisywać mi np
<div id="test"/>


--------------------
Odpowiedzi na często zadawane pytania:
Konfiguracja serwera Apache + PHP 7 pod Windows | Kodowanie znaków na stronach www | PHPTAL w Zend Framework | Programowanie obiektowe w PHP | PDO uniwersalnym sposobem na obsługę baz danych | Kurs PHP (część 1): Podstawowy opis języka
Go to the top of the page
+Quote Post
Eldiane
post 29.04.2013, 13:16:21
Post #8





Grupa: Zarejestrowani
Postów: 34
Pomógł: 0
Dołączył: 6.01.2011
Skąd: Sosnowiec

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

Zastosowałem się do rad i poprawiłem znaczniki <img>, ale jak już jestem przy temacie pozycjonowania to może zapytam o jeszcze jedną rzecz, a mianowicie jak rozciągnąć pasek "up.png" na całą szerokość strony bez powiększania jego rozmiarów, bo jeżeli dam właściwości width atrybut 100% to obrazek rozciągnie się i powiększy a nie o taki efekt chodzi, czy może lepiej zająć się samym obrazkiem i dopasować go do strony?

http://kolonaukowejazz.hitowy.pl/

Cytat(Arcioch)
To nie jest powodowane przez CSS tylko przez to że masz źle wycięte zdjęcie UpLeftCorn.png


Faktycznie jeden mały pikselik a wiele potrafi zmienić, dzięki za to że w ogóle ktoś to zauważył smile.gif


--------------------
"Nie ważne by być lepszym od innych, ważne by być lepszym niż było się wczoraj"
Go to the top of the page
+Quote Post
in5ane
post 29.04.2013, 13:24:13
Post #9





Grupa: Zarejestrowani
Postów: 1 335
Pomógł: 34
Dołączył: 9.11.2005
Skąd: Wrocław

Ostrzeżenie: (10%)
X----

Zrób sobie w takim wypadku coś innego. Zrób DIV'a i daj mu background img z repeatem w poziomie. Obrazek zrób normalnej wysokości i szerokości 1px. Nadaj szerokość dla DIV'a (czyli na width: 100%). Voila.

Ten post edytował in5ane 29.04.2013, 13:24:30


--------------------
> > > Tworzenie stron < < <
Go to the top of the page
+Quote Post
Eldiane
post 29.04.2013, 13:34:07
Post #10





Grupa: Zarejestrowani
Postów: 34
Pomógł: 0
Dołączył: 6.01.2011
Skąd: Sosnowiec

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

Cytat(in5ane @ 29.04.2013, 14:24:13 ) *
Zrób sobie w takim wypadku coś innego. Zrób DIV'a i daj mu background img z repeatem w poziomie. Obrazek zrób normalnej wysokości i szerokości 1px. Nadaj szerokość dla DIV'a (czyli na width: 100%). Voila.



Zastosowałem się do rad ale niestety pewnie znów coś źle napisałem, zawsze pojawiają się problemy przy pozycjonowaniu a chciałbym w końcu zamknąć sprawę i porządnie się tego nauczyć.

Oto strona : http://kolonaukowejazz.hitowy.pl/

dodałem pustego Diva, nadałem mu atrybuty takie jakie powinny być
[CSS] pobierz, plaintext 
  1. .images{
  2. 	background-image:url('images/book_elem/Up.png')
  3. 	background-repeat:repeat-x;
  4. 	width:100%;
  5. 	height:1px;
  6. }
[CSS] pobierz, plaintext


oraz sam Div:
[HTML] pobierz, plaintext 
  1. <div class="images">	
  2. </div>
[HTML] pobierz, plaintext


--------------------
"Nie ważne by być lepszym od innych, ważne by być lepszym niż było się wczoraj"
Go to the top of the page
+Quote Post
in5ane
post 29.04.2013, 13:37:00
Post #11





Grupa: Zarejestrowani
Postów: 1 335
Pomógł: 34
Dołączył: 9.11.2005
Skąd: Wrocław

Ostrzeżenie: (10%)
X----

Atrybut height nie 1px, a tyle ile ma rzeczywiście wysokość pixeli. Ale tak czy siak ja w ogóle przestałem rozumieć, co Ty chcesz osiągnąć.


--------------------
> > > Tworzenie stron < < <
Go to the top of the page
+Quote Post
Eldiane
post 29.04.2013, 13:46:11
Post #12





Grupa: Zarejestrowani
Postów: 34
Pomógł: 0
Dołączył: 6.01.2011
Skąd: Sosnowiec

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

Dzięki twoim radom w końcu się udało a efekt o jaki chodzi wygląda tak:
http://kolonaukowejazz.hitowy.pl/

Teraz pomęczę się nad resztą obramowania, ale chyba mniej więcej jeśli chodzi o pozycjonowanie to tak ma to wyglądać? Te div'y mają zostać puste?


--------------------
"Nie ważne by być lepszym od innych, ważne by być lepszym niż było się wczoraj"
Go to the top of the page
+Quote Post
« Następny starszy · Przedszkole · 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: 13.06.2025 - 03:47
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn