Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> [HTML][CSS] Problem z oplywajacym tekstem obrazka
dante90
post
Post #1





Grupa: Zarejestrowani
Postów: 21
Pomógł: 1
Dołączył: 5.04.2009

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

Witam, na wstępie powiem że zaczynam swoją przygodę z webmasteringiem, jesli moge tak nazwac (IMG:http://forum.php.pl/style_emoticons/default/tongue.gif) ,

do rzeczy, mam w divie trzy obrazki w poziomie które chcem otoczyc tekstem z kazdej strony, gdy robie, i gdy dam tekst to tekst dokladnie jest nienaruszony i jest pod obrazkami, a nic nie robie z "z-index" tu troche kodu :

[HTML] pobierz, plaintext 
  1. <body id="body">
  2. <div id="baner"><h1 id="napis_baner"> Baner </h1></div>
  3. <div id="menu">
  4.  <p style ="font-weight:900">Menu</p>
  5.  <p><a href="./zdjecia.html">Zdjęcia</a></p>
  6.  <p><a href="./index.html">Link 2</a></p>
  7.  <p><a href="./index.html">Link 3</a></p>
  8.  <p><a href="./index.html">Link 4</a></p>
  9.  <p><a href="./index.html">Link 5</a></p>
  10. </div>
  11. <div id="glowna">
  12.  <div id="zdjecia_gora"><p> Moim skromnym zdaniem uważam, że przyczyn wypadków na Polskich drogach jest bardzo dużo. Jedną z tych przyczyn jest nie przestrzeganie przepisów  ruchu drogowego np: nadmierna prędkość,  wymuszanie pierwszeństwa, przejazd na czerwonym świetle,drugą taką przyczyną  wypadku jest kolizja na drodze bo inne pojazdy mogą najechać jeden na drugi .Następną przyczyną wypadków jest też rozmawianie w aucie przez telefon,bo jeżeli się rozmawia przez telefon to trzeba się zatrzymać na poboczu.</p>
  13.  	<img id="img_1" src="./media/1.jpg" alt="pierwszy obrazek" width="150" height="100" />
  14.  	<img id="img_2" src="./media/2.gif" alt="drugi obrazek" width="150" height="100" />
  15.  	<img id="img_3" src="./media/3.gif" alt="trzeci obrazek" width="150" height="100" />
  16.  </div>
  17.  
  18. </div>
  19. </body>
[HTML] pobierz, plaintext
no i CSS

Kod
#baner
{
 position : absolute;
 height : 14%;
 top : 1%;
 left : 1%;
 right : 1%;
 border : 2px dotted;
 border-color : lime;
}

#menu
{
 position:absolute;
 width:20%;
 top:16%;
 left : 1%;
 border: dotted 2px;
 border-color : lime;
 text-align: center;
 color: white;
 font-family: "times new roman";
}

#glowna
{
 position: absolute;
 left: 25%;
 top: 16%;
 right: 1%;
 bottom: 1%;
 border: dotted 2px;
 border-color : lime;
 padding: 25px;
 font-family: "times new roman";
 color: white;
 
}

#img_1
{
 position: absolute;
 top: 15%;
 left : 5%;
 width: 150px;
 height:100px;
 border: dashed;
 border-color:     #c2c2c2;
}

#img_2
{
 position: absolute;
 top: 15%;
 left : 40%;
 width:150px;
 height:100px;
 border: dashed;
 border-color:     #c2c2c2;
}

#img_3
{
 position: absolute;
 top: 15%;
 right : 5%;
 width:150px;
 height:100px;
 border: dashed;
 border-color:     #c2c2c2;
 
}


graficznie to tak ma wygladac, mozna zobaczyc Tutaj

jesli zauwazycie jakies bledy to rady mile widziane (IMG:http://forum.php.pl/style_emoticons/default/biggrin.gif)

Ten post edytował dante90 5.04.2009, 22:44:03
Go to the top of the page
+Quote Post
 
 Start new topic
Odpowiedzi
hiszpanespaniol
post
Post #2





Grupa: Zarejestrowani
Postów: 213
Pomógł: 39
Dołączył: 7.04.2008
Skąd: 3city

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

nie da się z więcej niż jednym obrazkiem. <p> to element blokowy. Jeżeli do tego wypozycjonujesz obrazki absolutnie to tym bardziej nie będą się one "liczyć" dla tekstu.

Możesz zrobić tak: umieść fragmenty tekstu łącznie z obrazkiem wokół którego mają opływać w divie. czyli otrzymasz 3 div'y, każdy z obrazkiem i tekstem wewnątrz. W każdym z tych div'ów nadaj obrazkowi zwyczajne "float" css'owe. Jeżeli otrzymasz to co chciałeś (tekst opływający obrazki), to dopiero wtedy zajmij się float'owaniem divów, żeby były obok siebie.

Niestety nie uda się zrobić 3 obrazków które będą opływane przez tekst w sposób jaki pokazałeś na obrazku.
Go to the top of the page
+Quote Post

Posty w temacie
- dante90   [HTML][CSS] Problem z oplywajacym tekstem obrazka   5.04.2009, 22:40:32
- - kartun11   Ja bym radził się zastanowić czy position: absolut...   6.04.2009, 20:27:48
- - dante90   Tak czytałem głownie o ten kurs sie opierom, ale ...   6.04.2009, 20:30:41
- - kartun11   Chodzi mi o to, że ogólnie nie spotkałem...   6.04.2009, 20:37:14
- - dante90   a no to fajnie bo my mamy to zrobic akurat na wymi...   6.04.2009, 20:43:32
- - kartun11   Spróbuj jeszcze umieścić te obrazki w di...   6.04.2009, 20:54:12
- - dante90   oki sproboje , z innym position bo to tez probowa...   6.04.2009, 20:56:06
- - hiszpanespaniol   nie da się z więcej niż jednym obrazkiem. <p...   6.04.2009, 22:47:44
- - dante90   Wielkie dzieki za odpowiedzi, zrobiłem tak ze wszy...   7.04.2009, 01:38:33

« Następny starszy · Przedszkole · Następny nowszy »
 

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

 

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

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

RSS Aktualny czas: 13.10.2025 - 06:11
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn