Jump to content

SUBIECTE NOI
« 1 / 5 »
RSS
A fost lansata Fedora 40

Samsung S24 plus

Imi iau un Dell? (Vostro vs others)

Abonati Qobuz?
 transport -tren

Platforma electronica de eviden&#...

Cot cu talpa montat stramb in per...

Sfat achizitie sistem audio pentr...
 tavan fals rigips

Ce preferați: produse mai scumpe ...

Demagnetizare (minimala) ori ba?

Cum pot sa vad pe un proiector pr...
 Joc Drone

Dropshipping

Sfat achizitie AC Gree Fairy vs P...

MONITOR LG fara sonor !
 

Dilema HTML + CSS

- - - - -
Last Updated: Dec 02 2014 22:34, Started by Fiorello2009softpedia , Nov 21 2014 18:07  
  ·  
  • Please log in to reply
3 replies to this topic

#1
Fiorello2009softpedia
Posted 21 November 2014 - 18:07

Fiorello2009softpedia

    Member

  • Grup: Members
  • Posts: 498
  • Î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
Posted 21 November 2014 - 18:24

Mizu

    moroșan

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

#3
Fiorello2009softpedia
Posted 22 November 2014 - 11:37

Fiorello2009softpedia

    Member

  • Grup: Members
  • Posts: 498
  • Î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
Posted 02 December 2014 - 22:34

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

Chirurgia cranio-cerebrală minim invazivă Chirurgia cranio-cerebrală minim invazivă

Tehnicile minim invazive impun utilizarea unei tehnologii ultramoderne.

Endoscoapele operatorii de diverse tipuri, microscopul operator dedicat, neuronavigația, neuroelectrofiziologia, tehnicile avansate de anestezie, chirurgia cu pacientul treaz reprezintă armamentarium fără de care neurochirurgia prin "gaura cheii" nu ar fi posibilă. Folosind tehnicile de mai sus, tratăm un spectru larg de patologii cranio-cerebrale.

www.neurohope.ro
Back to Markup Languages

▶ 0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users

  1. Forumul Softpedia
  2. → Professional Zone
  3. → Programming
  4. → Markup Languages
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