+- Forum Webmastera, HTML, CSS, PHP, MySQL, Hosting, Domeny - Forum dla Webmasterów (https://www.webmastertalk.pl)
+-- Dział: Technologie internetowe - tworzenie stron WWW (https://www.webmastertalk.pl/forum-technologie-internetowe-tworzenie-stron-www)
+--- Dział: Początkujący webmaster (https://www.webmastertalk.pl/forum-poczatkujacy-webmaster)
+--- Wątek: Zdjęcia obok siebie na stronie. Problem. (/thread-zdjecia-obok-siebie-na-stronie-problem)
Zdjęcia obok siebie na stronie. Problem. - moczo - 24-03-2011
Witam. Chciałem zrobić sobie galerię i chciałbym żeby zdjęcia były wyświetlane obok siebie a nie pod sobą. I chciałbym tak nawet kilkadziesiąt foto umieścić.
galeria.html wygląda tak
Kod:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!--
Design by Free CSS Templates
http://www.freecsstemplates.org
Released for free under a Creative Commons Attribution 2.5 License
-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>CzarneNaBialym.com</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link href="default.css" rel="stylesheet" type="text/css" />
<link rel="shortcut icon" href="/cnb.jpg" type="image/x-icon">
<link rel="icon" href="/favicon.ico" type="image/x-icon">
</head>
<body>
<div id="header">
</div>
<!-- end #header -->
<div id="menu">
<ul>
<li class="first"><a href="http://www.czarnenabialym.com" accesskey="1" title="">HOME </a></li>
<li><a href="http://www.czarnenabialym.com/onas.html" accesskey="2" title="">O Nas </a></li>
<li><a href="http://www.czarnenabialym.com" accesskey="3" title="">Blog </a></li>
<li><a href="http://www.czarnenabialym.com/galeria.html" accesskey="4" title="">Galeria</a></li>
<li><a href="http://www.czarnenabialym.com/oferta.html" accesskey="4" title="">Oferta</a></li>
<li><a href="http://www.czarnenabialym.com/kontakt.php" accesskey="5" title="">Kontakt</a></li>
</ul>
</div>
<!-- end #menu -->
<img src="http://www.czarnenabialym.com/foto/cnb203.jpg" width="530" height="768">
<img src="http://www.czarnenabialym.com/foto/HASSAN.jpg" width="1155" height="768">
<div style="clear: both;"> </div>
</div>
<!-- end #content -->
<div id="footer">
<p id="legal">Copyright © 2011 CzarneNaBialym.com <a href="http://www.czarnenabialym.com/">Foto&Video</a></a></p>
</div>
<!-- end #footer -->
</body>
</html>css wygląda tak
Kod:
/*
Design by Free CSS Templates
http://www.freecsstemplates.org
Released for free under a Creative Commons Attribution 2.5 License
*/
body {
height: 0px;
padding: 0px;
background: url(images/gg.jpg) repeat-x;
font: normal 11px Tahoma, Arial, Helvetica, sans-serif;
color: #666666;
}
h1, h2, h3 {
margin: 0;
padding: 0;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
color: #F49500;
}
h2 {
text-transform: uppercase;
font-size: 18px;
}
h3 {
text-transform: uppercase;
letter-spacing: 2px;
font-size: 11px;
}
p, blockquote, ul, ol {
line-height: 18px;
text-align: justify;
}
blockquote {
padding-left: 20px;
background: url(images/img05.gif) repeat-y;
}
a {
color: #F49500;
}
a:hover {
text-decoration: none;
}
/* Header */
#header {
width: 830px;
height: 180px;
margin: 0 auto;
background: url(images/logo.jpg);
}
#header h1, #header h2 {
text-transform: lowercase;
font-weight: normal;
color: #FFFFFF;
}
#header h1 {
float: left;
padding: 120px 0 0 20px;
font-size: 36px;
}
#header h2 {
float: right;
padding: 134px 20px 0 0;
font-size: 22px;
}
/* Menu */
#menu {
width: 760px;
height: 60px;
margin: 0 auto;
}
#menu ul {
margin: 0;
padding: 0;
list-style: none;
}
#menu li {
display: inline;
}
#menu a {
display: block;
float: left;
padding: 17px 50px 0 20px;
text-transform: uppercase;
text-decoration: none;
font: bold 15px "Trebuchet MS", Arial, Helvetica, sans-serif;
color: #D8D8D8;
}
#menu a:hover {
color: #FFFFFF;
}
#menu .first a {
background: none;
}
/* Content */
#content {
width: 720px;
margin: 0 auto 20px auto;
padding: 20px;
background: #FFFFFF url(images/img04.jpg) repeat-x left bottom;
}
/* Posts */
#posts {
float: left;
width: 480px;
}
/* Links */
#links {
float: right;
width: 200px;
padding-left: 20px;
background: url(images/img05.gif) repeat-y;
}
#links ul {
margin: 0;
padding: 0;
list-style: none;
}
#links li ul {
padding: 5px 0 30px 0;
}
#links li li {
padding: 7px 10px;
background: url(images/img06.gif) repeat-x left bottom;
}
#links li a {
text-decoration: none;
}
#links li a:hover {
text-decoration: underline;
}
#links li i {
font-style: normal;
font-size: 9px;
}
#links li h2 {
font-size: 14px;
}
/* Footer */
#footer {
height: 100px;
padding: 20px;
background: #000000 url(images/img07.gif) repeat-x;
}
#footer p {
text-align: center;
color: #999999;
}Dopiero zaczynam więc proszę o wyrozumiałość
RE: Zdjęcia obok siebie na stronie. Problem. - Kartofelek - 24-03-2011
1) diva zgubiłeś
</div>
<!-- end #menu -->
.....
2) Miniaturki umieść w liście, jej LI floatuj do lewej ustawiając im odpowiednie wymiary + marginesy.
RE: Zdjęcia obok siebie na stronie. Problem. - moczo - 24-03-2011
dzięki za odpowiedz.
1) Ale ten div chyba jest. chyba że w innym miejscu jeszcze ma być.
2) nie rozumiem nic
RE: Zdjęcia obok siebie na stronie. Problem. - Ancik - 24-03-2011
Musisz ustalić szerokość obrazków, a znacznikowi <img> wklepać float: left. Nawet w tym wypadku, jeżeli tak zrobisz, to obrazek który będzie miał szerokość całego kontenera w którym się znajduje, będzie spychał inne na dół.
Pozdrawiam.
RE: Zdjęcia obok siebie na stronie. Problem. - Kartofelek - 24-03-2011
zgubiles div
RE: Zdjęcia obok siebie na stronie. Problem. - moczo - 24-03-2011
Ok dzięki za odpowiedzi
A może ktoś pomoże rak zrobić suwak żeby wszystko stało a foto bym sobie przewijał
RE: Zdjęcia obok siebie na stronie. Problem. - Kartofelek - 24-03-2011
2) Miniaturki umieść w liście, jej LI floatuj do lewej ustawiając im odpowiednie wymiary + marginesy.
Taki powtarzany temat.
Listę ustawiasz na stały rozmiar np 500x500, dajesz jej overflow:auto, w niej umieszczasz LI w których masz miniaturki. Takie LI mają np 120x120 i float left. I tyle.