Jak wpisać komendy, żeby obrazek z Hitmanem przesunąć w miejsce pokazane na rysunku, a pod tym obrazkiem kolejny, inny rysunek
Link do schematu:
http://www.fooh.pl/obrazek/4652622517.bmp
Kod xHTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
<head>
<meta http-equiv="Content-type" content="text/html; charset=ISO-8859-2" />
<title>Recenzownia</title>
<center><img src="Tekstury/nowelogo.bmp"/></center>
<style type="text/css">
* ‹ margin: 0; padding: 0; ›
body ‹
max-width: 1050px;
min-width: 790px;
margin: 0 auto;
background-image: url(http://st.gdefon.ru/wallpapers_original/148891_%28www.GdeFon.ru%29.jpg);
font: 15px Arial, Helvetica, sans-serif;
›
#header ‹
width: 100%;
height: 100px;
background: #575757;
›
#content ‹
height: auto;
margin-center: 200px;
›
#footer ‹
width: 100%;
height: 30px;
clear: both;
text-align: center;
›
p, h2 ‹ padding: 10px; ›
p ‹text-align: justify; ›
</style>
</head>
<body>
<link href="cssmenua/menu_assets/styles.css" rel="stylesheet" type="text/css">
<div id='cssmenu'>
<center>
<ul>
<li class='active '><a href='proba.html'><span>Strona glówna</span></a></li>
<li><a href='ranking.html'><span>Ranking</span></a></li>
<li><a href='video.html'><span>Pliki video</span></a></li>
<li><a href='kontakt.html'><span>Kontakt</span></a></li>
</center>
</ul>
</div>
<br><br>
<div id="content">
<font face='pascal' size='5,5' color="#3399FF"</font>
<br>
<font face='arial' size='4' color="white"</font>
<b>
<img src="Loganaglowna/Deus_Ex.bmp" alt="pozdro"/>
<img src="Loganaglowna/Hitman.bmp" alt="pozdro"/>
<br> <br>
<font face='pascal' size='5' color="#33FFFF"</font>
</div>
<body>
<body style="background-image: url(Tekstury/tekstura.bmp)" />
</body>
<br><br><br><br><br>
<div id="footer">Copyright © 2013 by Damian Mrozek</div>
</body>
</html>
co za generator ci to wygenerowal?
Niepozamykane tagi, za duzo body itp. Popraw strukture bo i tak co przegladarka to inaczej to "naprawi". Potem mozna bawic sie stylami.
daj lewemu obrazkoi styl float:left a pod drugim diva z clear:both i powinno wystarczyc. Jednak ladniej byloby zamknac te dwa obrazki w dwa kontenery i wzgledem siebie je floatami ustawic.
Dzięki za poradę, ale strona jest w fazie prac, dlatego pewne rzeczy są niewykończone.. Może wiesz coś na temat, który powyżej napisałem?
Edit: Mógłbyś podać komendy do tych modyfikacji, które podałeś?
tak jak napisalem, ale jak sie to zachowa na tej strukturze gdzie zaraz potem jest body i to podwojnie zamkniete - kto wie.
najprosciej
<img ... style="float:left;">
<img ...>
<div style="clear:both"></div>
lapiej zadzaila :
<div style="float:left;width:49%;"><img ... ></div>
<div style="float:right;width:49%;text-align:left;"><img ...></div>
<div style="clear:both"></div>
Dzięki chłopie, ale mam jeszcze jedno ale... Czy może być odstęp pomiędzy tymi dwoma obrazkami, taki minimalny...
w stylach divow dodaj padding:5px; - dodasz wewnetrzny margines divom
wartosc wg uznania
ewentualnie zmien 49% na mniej - odsuniesz divy od siebie
mozesz tez dodac do img styl margin:0 5px; - dodasz zewnetrzny boczny margines obrazkom - to bedzie nalepsze
a, i te 49% dziela po pol, mozesz to ustawic wg woli, zreszta mozliwosci sa szerokie, zalezy co tam ma ostatecznie byc
Jest nice! Dzięki, jakbym miał jakiś problem, mam nadzieję, że na Ciebie trafię! Przejrzyście napisana odpowiedź. Wielkie dzięki! Zaangażowanie, jakiego u większości brakuje... Spoko gość!
Mam jeszcze jedno pytanie jak walnąć takie małe tło pod te obrazki?
Schemat wykonania:
http://www.fooh.pl/obrazek/1708106196.bmp
Możesz w CCS ustawić warstwy i wypozycjonować element. Więcej tutaj: http://pl.html.net/tutorials/css/introduction.php
Mógłbyś zastosować to, co napisałeś używając kodu, który wcześniej napisałem?
chcesz pod wszystkimi obrazkami jedno inne tlo ?
jesli tak to najlepiej zbudowac kontener z tlem, idealnie byloby znac jego wymiary
<div style="width:XXpx;height:XXpx;background:url('link-do-tla') top left no-repeat;">
<div style="float:left;width:49%;"><img ... ></div>
<div style="float:right;width:49%;text-align:left;"><img ...></div>
<div style="clear:both"></div>
</div>
najlepiej byloby powiazac kontener w wewnetrznymi elementami przez position (relative, absolute) ale to juz bez prob sie nie obejdzie. Z glowy pisane wiec nie obejdzie sie bez jakiegos kwasu.
Dobrze to wykonałem? :
<div style="width:1100px;height:800px;background-image: url(tloodgrafike.bmp); top left no-repeat;">
<div style="float:left;width:50%;"><img src="Loganaglowna/Deus_Ex.bmp" alt="pozdro" ></div>
<div style="float:right;width:50%;text-align:left;"><img src="Loganaglowna/Hitman.bmp" alt="pozdro"></div>
<div style="clear:both"></div>
___________________________________________________________
Jeszcze jeden kod z poleceniem postion:
body ‹;
position:relive;
max-width: 1050px;
min-width: 790px;
margin: 0 auto;
background-image: url(tloodgrafike.bmp);
font: 15px Arial, Helvetica, sans-serif;
›;
O to chodziło?
nie
url(tloodgrafike.bmp); top left no-repeat
tylko
url(tloodgrafike.bmp) top left no-repeat
na koncu jeden zamykajacy </div> ci umknal, w tym wypadku plik bmp musisz miec na tej samej galezi, (bmp - bad idea)
<div style="width:1100px;height:800px;background: url(tloodgrafike.bmp) top left no-repeat;">
<div style="float:left;width:50%;"><img src="Loganaglowna/Deus_Ex.bmp" alt="pozdro" ></div>
<div style="float:right;width:50%;text-align:left;"><img src="Loganaglowna/Hitman.bmp" alt="pozdro"></div>
<div style="clear:both"></div>
</div>
sprobuj tego
Nic nie zmieniło się, nadal tak samo
Podam cały kod:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
<head>
<meta http-equiv="Content-type" content="text/html; charset=ISO-8859-2" />
<title>Recenzownia</title>
<center><img src="Tekstury/nowelogo.bmp"/></center>
<style type="text/css">
* ‹; margin: 0; padding: 0; ›;
body ‹;
max-width: 1050px;
min-width: 790px;
margin: 0 auto;
background-image: url(http://st.gdefon.ru/wallpapers_original/148891_%28www.GdeFon.ru%29.jpg);
font: 15px Arial, Helvetica, sans-serif;
›;
#header ‹;
width: 100%;
height: 100px;
background: #575757;
›;
#content ‹;
height: auto;
margin-center: 200px;
›;
#footer ‹;
width: 100%;
height: 30px;
clear: both;
text-align: center;
›;
p, h2 ‹; padding: 10px; ›;
p ‹;text-align: justify; ›;
</style>
</head>
<body>
<link href="cssmenua/menu_assets/styles.css" rel="stylesheet" type="text/css">
<div id='cssmenu'>
<center>
<ul>
<li class='active '><a href='proba.html'><span>Strona glówna</span></a></li>
<li><a href='ranking.html'><span>Ranking</span></a></li>
<li><a href='video.html'><span>Pliki video</span></a></li>
<li><a href='kontakt.html'><span>Kontakt</span></a></li>
<li><a href='omnie.html'><span>O mnie</span></a></li>
</center>
</ul>
</div>
<br><br>
<div id="content">
<font face='pascal' size='5,5' color="#3399FF"</font>
<br>
<font face='arial' size='4' color="white"</font>
<b>
<div style="width:1100px;height:800px;background: url(tloodgrafike.bmp) top left no-repeat;">
<div style="float:left;width:50%;"><img src="Loganaglowna/Deus_Ex.bmp" alt="pozdro" ></div>
<div style="float:right;width:50%;text-align:left;"><img src="Loganaglowna/Hitman.bmp" alt="pozdro"></div>
<div style="clear:both"></div>
</div>
<br> <br>
<font face='pascal' size='5' color="#33FFFF"</font>
</div>
<body>
<body style="background-image: url(Tekstury/tekstura.bmp)" />
</body>
<br><br><br><br><br>
<div id="footer">Copyright © 2013 by Damian Mrozek</div>
</html>
Dzięki za chęć niesienia pomocy, i znoszenia takiego nieuka, jak ja ;)
_________________________________________________________
Może coś zrobiłem źle z pozycjonowaniem?
Po 1 radziłbym poprawić te znaczniki body! Ma być 1 znacznik otwierający body(po zamknięciu head w twoim przypadku) i zamknięty przed zamknięciem HTML.
Po 2 znacznik center nie jest już wspierany przez HTML i xHTML więc może nie działać/powodować błędy na stronie, tego też bym się pozbył. Żeby coś wyśrodkować bez center wystarczy w stylu podać:
padding 0px auto; margin 0px auto.
Przykro mi, ale jest dla Ciebie dużo za wcześnie na tworzenie stron WWW, przede wszystkim zacznij od HTML5 a nie XHTML (jest 2013 a nie 2000 rok).
Napisałbym co jest nie tak, ale chyba nie warto, bo nic nie jest tak jak powinno.
Masz kilka tagów body (jak żyję czegoś takiego nie widziałem), w tym jeden jest samozamykający się (to już mistrzostwo), używasz <br> do stylowania, masz jakieś puste tagi font (po co?), obrazki masz w .bmp, dużo styli inline bez sensu, do tego wymyślasz własne właściwości CSS (margin-center nigdy nie istniało).
Ogólnie o HTML najbardziej kultowy kurs napisał Paweł Wimmer: http://webmaster.helion.pl/index.php/kurs-html
Kursów HTML5 nie znam, ale ten wydaje mi się w miarę, linkuję od razu do tego jak powinien wyglądać szkielet WWW (wywal te przeklęte !DOCTYPE): http://www.kurshtml.edu.pl/html/skladnia_html5,html5.html
Jak już coś przeczytasz i wystrugasz to daj znać. Kilka dni nauki i będziesz 100x lepszy, niż jesteś dziś. W razie czego pytaj tutaj lub w kąciku webmasterskim.
I jak już zbudujesz stronę na szkielecie, którym Ci wyżej wysłałem to pamiętaj, że tagi head, body oraz html mogą być użyte tylko jeden raz, dokładnie tak jak masz w źródle. W wielkim skrócie i uproszczeniu head to głowa dokumentu czyli informacje dla przeglądarki a body to ciało czyli to co Ci się wyświetla. Wyobraź sobie, że Twoja WWW to człowiek. Jedna głowa i jedno ciało. Nigdy inaczej.
Od siebie dodam ze style inline sa do testow, potem sie je ladnie pakuje w arkusz a w kodzie strony zostaja same klasy. Normalna sprawa.
poltar: Spoko, dzięki za pomoc, na którą mogłem ZAWSZE liczyć - pełen profesjonalizm! Mógłbym się z Tobą skontaktować poza forum, jakbym miał pewne pytania? Wyrozumiałość, której (na Twoim miejscu, by mi zabrakło) zadziwiła mnie. Jeszcze raz, dzięki
pisuar: Skorzystam, dzięki ;) Co do kącika, podasz do niego link?
