Jump to content

SUBIECTE NOI
« 1 / 5 »
RSS
Info Coronavirus/Vaccinare vs Fake News

Probleme mufa incarcare HP Pavilion

Sfaturi achiziție pentru inc...

Inocuitor dioda redresoare smd ha...
 Problema cu tuia, se usuca

2 invertoare la acelasi banc de b...

Stocare ieftina si consistenta pe...

Cu masina spre Portugalia
 Acoperis mansarda - am nevoie de ...

Bmw seria 3 zgomot in sarcina

Samsung S21 FE - nou cu poze in el

Smart Meter pt Easun?
 Problema infiltratie apa

Elon Musk prezinta robotul Optimu...

La multi ani @laurstef!

Plita gaz Arctic ARNGN64127SB
 

Dilema HTML + CSS

- - - - -
  • Please log in to reply
3 replies to this topic

#1
Fiorello2009softpedia

Fiorello2009softpedia

    Member

  • Grup: Members
  • Posts: 495
  • Înscris: 27.12.2009
Am creat o galerie de imaginii adaptabila (responsive) insa nu se intampla nimic. Va rog daca se poate sa ma imi spunetii unde gresesc:

Codul HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
<meta content="text/html; charset=windows-1252" http-equiv="Content-Type">
<title>GALLERY ONE</title>
<link rel="Shortcut icon" href="images/favicon.png">
<link rel="stylesheet" href="css/style.css" type="text/css">
<!-- Separate CSS File -->
  </head>
  <body>
<div align="center"><br>
  <a class="logo"><img src="images/logo.png" alt="" border="0" height="100" width="400"></a>
<center>
  <section id="content">
<ul>
  <li><a class="tabs" target="_blank" href="assets/img1.jpg"><img src="assets/img1.jpg" alt="" border="0" height="150" width="200"></a></li>
  <li><a class="tabs" target="_blank" href="assets/img2.jpg"><img src="assets/img2.jpg" alt="" border="0" height="150" width="200"></a></li>
<li><a class="tabs" target="_blank" href="assets/img3.jpg"><img src="assets/img3.jpg" alt="" border="0" height="150" width="200"></a></li>
</ul>
<ul>
<li><a class="tabs" target="_blank" href="assets/img4.jpg"><img src="assets/img4.jpg" alt="" border="0" height="150" width="200"></a></li>
  <li><a class="tabs" target="_blank" href="assets/img5.jpg"><img src="assets/img5.jpg" alt="" border="0" height="150" width="200"></a></li>
  <li><a class="tabs" target="_blank" href="assets/img6.jpg"><img src="assets/img6.jpg" alt="" border="0" height="150" width="200"></a></li>
</ul>
<ul>

<li><a class="tabs" target="_blank" href="assets/img7.jpg"><img src="assets/img7.jpg" alt="" border="0" height="150" width="200"></a></li>
<li><a class="tabs" target="_blank" href="assets/img8.jpg"><img src="assets/img8.jpg" alt="" border="0" height="150" width="200"></a></li>
  <li><a class="tabs" target="_blank" href="assets/img9.jpg"><img src="assets/img9.jpg" alt="" border="0" height="150" width="200"></a></li>

</ul>
   <ul>
  <li><a class="tabs" target="_blank" href="assets/img10.jpg"><img src="assets/img10.jpg" alt="" border="0" height="150" width="200"></a></li>
<li><a class="tabs" target="_blank" href="assets/img11.jpg"><img src="assets/img11.jpg" alt="" border="0" height="150" width="200"></a></li>
<li><a class="tabs" target="_blank" href="assets/img12.jpg"><img src="assets/img12.jpg" alt="" border="0" height="150" width="200"></a></li>
</ul>
  </section>
   </center>
  <div id="footer">
<p><big><big>Copyright © 2013 - 2014. All rights reserved</big></big></p>
  </div>
</div>
  </body>
</html>

Codul CSS

body{
width:auto;
background: #ffffff; /* Old browsers */
background: -moz-linear-gradient(-45deg, #ffffff 0%, #f1f1f1 50%, #e1e1e1 51%, #f6f6f6 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#ffffff), color-stop(50%,#f1f1f1), color-stop(51%,#e1e1e1), color-stop(100%,#f6f6f6)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(-45deg, #ffffff 0%,#f1f1f1 50%,#e1e1e1 51%,#f6f6f6 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg, #ffffff 0%,#f1f1f1 50%,#e1e1e1 51%,#f6f6f6 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(-45deg, #ffffff 0%,#f1f1f1 50%,#e1e1e1 51%,#f6f6f6 100%); /* IE10+ */
background: linear-gradient(135deg, #ffffff 0%,#f1f1f1 50%,#e1e1e1 51%,#f6f6f6 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f6f6f6',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
background-position: center;
}
.logo img {
   background: rgb(243,226,199); /* Old browsers */
background: -moz-linear-gradient(-45deg, rgba(243,226,199,1) 0%, rgba(182,141,76,1) 51%, rgba(233,212,179,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(243,226,199,1)), color-stop(51%,rgba(182,141,76,1)), color-stop(100%,rgba(233,212,179,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(-45deg, rgba(243,226,199,1) 0%,rgba(182,141,76,1) 51%,rgba(233,212,179,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg, rgba(243,226,199,1) 0%,rgba(182,141,76,1) 51%,rgba(233,212,179,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(-45deg, rgba(243,226,199,1) 0%,rgba(182,141,76,1) 51%,rgba(233,212,179,1) 100%); /* IE10+ */
background: linear-gradient(135deg, rgba(243,226,199,1) 0%,rgba(182,141,76,1) 51%,rgba(233,212,179,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f3e2c7', endColorstr='#e9d4b3',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
position:absolute;
top:0px;
left:300px;
border-bottom-right-radius:25px;
border-bottom-left-radius:25px;
}
#content {
width:85%;
position:absolute;
left:60px;
top:140px;
box-shadow: 0px 0px 10px 10px #990000;
overflow:hidden;
border-top-right-radius:50px;
border-bottom-right-radius:50px;
border-top-left-radius:50px;
border-bottom-left-radius:50px;
}
#content ul {
list-style:none;
}
#content li {
float:left;
margin:5%;
}
.tabs img {
padding: 10px;
margin:20%;
box-shadow: 0px 0px 10px 10px #990000;
border-bottom-right-radius:25px;
border-top-left-radius:25px;
}
.tabs img:hover {
background: #000066;
}
/* FOOTER */
/*********************************************************************/
#footer { width: 100%; .background:url('../images/bg-footer.png'); background: #990000; /* Old browsers */
background: -moz-linear-gradient(-45deg,  #990000 0%, #990000 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#990000), color-stop(100%,#990000)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(-45deg,  #990000 0%,#990000 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg,  #990000 0%,#990000 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(-45deg,  #990000 0%,#990000 100%); /* IE10+ */
background: linear-gradient(135deg,  #990000 0%,#990000 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#990000', endColorstr='#990000',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
border-top-right-radius:50px;
border-top-left-radius:50px;
position:absolute;
top:1100px;
left:0px;
#footer p { font-weight: bold; width: 85%; padding: 4px 50px; margin: 0 auto; font-size: 18px; text-align: center; color: #ffff33; text-shadow:1px 1px 2px #80B50E; -moz-border-radius: 1em 4em 1em 4em;
border-radius: 1em 4em 1em 4em; } }#footer p { font-weight: bold; width: 85%; padding: 4px 50px; margin: 0 auto; font-size: 18px; text-align: center; color: #ffff33; text-shadow:1px 1px 2px #80B50E; }

Am incercat sa pun la
body {auto; 768 sau 1024}

Aceasta galerie a fost creata in scop educativ si nu va fi publicata pe un site.
Va multumesc.

Edited by Fiorello2009softpedia, 21 November 2014 - 18:10.


#2
Mizu

Mizu

    moroșan

  • Grup: Senior Members
  • Posts: 17,454
  • Înscris: 10.12.2006
Pune-o intre taguri [code]

#3
Fiorello2009softpedia

Fiorello2009softpedia

    Member

  • Grup: Members
  • Posts: 495
  • Înscris: 27.12.2009

View PostMizu, on 21 noiembrie 2014 - 18:24, said:

Pune-o intre taguri [code]
Nu se poate pune intre taguri [code] se pune cand scri pe forumuri insa eu am uitat.
Multumesc.

Edited by Fiorello2009softpedia, 22 November 2014 - 11:37.


#4
masterclas

masterclas

    New Member

  • Grup: Members
  • Posts: 12
  • Înscris: 12.09.2009
Nu prea vad nimic "responsive" la galeria postata de tine. Aceasta este mai degraba "fluid" pentru a o putea face "responsive" trebuie sa folosest "media queries".

Edited by masterclas, 02 December 2014 - 22:35.


Anunturi

Bun venit pe Forumul Softpedia!

0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users

Forumul Softpedia foloseste "cookies" pentru a imbunatati experienta utilizatorilor Accept
Pentru detalii si optiuni legate de cookies si datele personale, consultati Politica de utilizare cookies si Politica de confidentialitate