Skocz do zawartości

Pozycjonowanie obrazków- CSS


At1x

Recommended Posts

Witam, zacząłem uczyć się CSS i mam pytanie na sam start.

Zrobiłem coś takiego:

http://www15.speedyshare.com/files/25971698/download/strona.JPG

Wydaje mi się, że zrobiłem to dłuższą drogą, tzn. proszę o podanie sposobu i wyjaśnienie mi na czym polega mój błąd.

Myślę bowiem, że mój kod CSS jest niepotrzebnie taki długi i wydaje mi się, że idzie to zrobić jakoś prościej, krócej, z tym, że nie wiem jak.

Proszę więc o pomoc i porady.

Część mojego kodu html wygląda tak:



<div id="menu-menu"> 
			<img src="img/menu.jpg"> 		
	</div>

	<div id="menu-glowna">
			<img src="img/glowna.gif"> 
	</div>

	<div id="menu-omnie">
			<img src="img/o_mnie.gif"> 
	</div>	

	<div id="menu-mp3">
			<img src="img/mp3.gif"> 
	</div>

	<div id="menu-imprezy">
			<img src="img/imprezy.gif"> 
	</div>

	<div id="menu-galeria">
			<img src="img/galeria.gif"> 
	</div>	

	<div id="menu-kontakt">
			<img src="img/kontakt.gif"> 
	</div>	

Natomiast kodu CSS tak:


*======================MENU===================== */



#menu-menu
{

	float: left;
	margin-left: 91px;

	}

#menu-glowna
{

	float: left;

	}

#menu-omnie
{

	float: left;

	}


#menu-mp3
{

	float: left;

	}

#menu-imprezy
{

	float: left;

	}

#menu-galeria
{

	float: left;

	}	

#menu-kontakt
{

	float: left;

	}


Link do komentarza
Udostępnij na innych stronach

Ja bym to zrobił tak:

cały top bym dał jako background jednego diva. Czyli

<div id="top"></div>

, natomiast w css bym ustawił jego szerokość i wysokość oraz background:

background-image: url(images/top.png);

Napisy w menu (Główna, O mnie, Mp3, Imprezy, Galeria, Kontakt) bym wstawił jako zwykłe obrazki w divie top i je tam wypozycjonował. Do każdego obrazka przypisz id, a w css będziesz mógł ustawić jego pozycję. Np.:

<img src="images/glowna.png" id="glowna">

wyświetli obrazkek z napisem Glowna. Pozycję jego ustawisz poprzez:

    position:relative;
    top:XXpx;
    left:XXpx;

Link do komentarza
Udostępnij na innych stronach

Ok, dziękuję bardzo ;)

Pobawię się tym dziś.

Jednak napotkałem kolejny problem, przy tym moim 'starym' pozycjonowaniu. Gdy dodałem odnośniki do podstron w menu, rozlazło się... Czy można tego uniknąć jakoś, jakąś opcję w css do selektora a: ?

Link do komentarza
Udostępnij na innych stronach

Ok, dziękuję bardzo ;)

Pobawię się tym dziś.

Jednak napotkałem kolejny problem, przy tym moim 'starym' pozycjonowaniu. Gdy dodałem odnośniki do podstron w menu, rozlazło się... Czy można tego uniknąć jakoś, jakąś opcję w css do selektora a: ?

Sprawdz ponizszy kod. Usunie on obramowanie w obrazkach ktore pojawia sie przy dodaniu linka.

img{
    border:0px;
}

Link do komentarza
Udostępnij na innych stronach

Udało się ;)

Dziękuję serdecznie za szybką i konkretną pomoc.

Jeszcze pytanko, lepiej używać pozycjonowania relatywnego, czy poprzez float?

Float używaj kiedy chcesz aby elementy były przy lewej (lub prawej) krawędzi elementu w którym się znajdują. Natomiast korygować je lekko możesz używając pozycjonowania relatywnego. Lepiej jest dać float:left; niż left:700px;.

Link do komentarza
Udostępnij na innych stronach

Niestety, gdy w CSS dam

#bok
{
	background-image:url('img/bok.gif');
	position: relative;
	top: 0px;
	left: 91px;

	}

w ogóle nie wyświetla mi się obrazek.

W kodzie html mam coś takiego:

<div id="bok"> </div>

Link do komentarza
Udostępnij na innych stronach

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Gość
Odpowiedz...

×   Wkleiłeś treść z formatowaniem.   Usuń formatowanie

  Only 75 emoji are allowed.

×   Twój link będzie automatycznie osadzony.   Wyświetlać jako link

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Wczytywanie...
×
×
  • Utwórz nowe...