Jak ustawić gdzie ma znaleźć się obrazek? CSS

[pulpido]

Witam. Kiedyś uczyłem się samego html, dlatego wczoraj go sobie tylko przypomniałem i zacząłem uczyć się CSS. Korzystam z kursu "pl.html.net", ale szukałem też na "kurshtml.boo.pl" i nie mogę znaleźć, jak ustawia się, gdzie ma być dany obrazek? Jak ustawić żeby był np. 200px od góry i 100px od lewej?

[Jarek]

Sam uczyłem się z kurshtml.boo.pl za czasów kiedy jeszcze nie był tak rozbudowany jak teraz i polecam go.

Co do ustawienia obrazka to odstęp od lewej to margin-left: ??? px;

od góry: margin-top: ??? px; gdzie ??? to ilość pikseli.

[mervin]

<img style="position: relative; top: XXpx; left: XXpx;">

[pulpido]

Jarek, czyli ma to wyglądać tak:

#ramka1 {
background-image: url(images/ramka.png); 
width: 392px; 
height: 241px; 
margin-left: 950 px;
margin-ltop: 400 px;
}

?

[Jarek]

margin-left: 950 px;
margin-ltop: 400 px;

a czy obrazek ma się znajdować 950 pikseli od lewej i 400pikseli od góry?

Jeżeli tak to tak z tym, że przesunie Ci on całą zawartość strony.

Musisz pamiętać, że odstępy te brane są względem poprzedniego elementu.

i masz literówkę, top a nie ltop.

[pulpido]

Już sobie poradziłem. Dodałem

position: absolute;
right: XXpx;
top: XXpx;

do pliku .css

[mervin]

Już sobie poradziłem. Dodałem

position: absolute;
right: XXpx;
top: XXpx;

do pliku .css

przetestuj stronę w różnych przeglądarkach i rozdzielczościach i sprawdź czy wszystkie elementy wyświetlają się prawidłowo.

[pulpido]

Jak okno przeglądarki jest maksymalne to wszystko hasa, ale jak zmniejsze okno, to wszystko się przesuwa ;/

adres portfolio: pulpido.freecast.pl

Jak to naprawić?

[Jarek]

Daj stronie stałą szerokość.

Do body dodaj:

text-align: center;
margin:0;
padding:0;

Całość obejmij divem:

#strona {
width: 900px; /* czy ile tam masz tej szerokości */
margin:0 auto;
text-align:left;
overflow:hidden;
}

Nie rób position absolute.

Zamiast tego dopisz do tych swoich pól:

float:left; 

i odstępy od góry i dołu robisz względem poprzedniego elementu.

[pulpido]

Czyli teraz w CSS zamiast

left: 250px;
top: 250px;

co mam wstawić, żeby określić gdzie ma znajdować się dany obrazek?

Pierwszy raz koduje jakąś stronę i nie jestem jeszcze obeznany ze wszystkim, dlatego się pytam. Szukałem tego na różnych kursach html i css ale nie mogłem tego znaleźć.

[Jarek]

Podobnie jak masz div "omnie3".

Potem edytuj styl omnie3, wywal te odstępy i przenieś go do środka ramka1.

Nie może być tak, że jakiś div jest pusty.

Zrób

<div id="ramka1"><div id="omnie3">tresc</div></div> 

A co do kursu to prześledź tą część http://www.kurshtml.boo.pl/css/marginesy.html

[pulpido]

a jak ustawić gdzie ma się znajdować ramka1?

[Jarek]

a jak ustawić gdzie ma się znajdować ramka1?

#ramka1 {
background-image:url("images/ramka.png");
height:246px;
float:left;
margin-left:220px;
width:400px;
}

[stozek419]

<div style="position:relative; top:150px; left:445px;">

<IMG SRC="???.jpg" WIDTH="350" HEIGHT="320" BORDER="0">

/></a></div>