Originariamente inviata da
Vincent.Zeno
evidentemente non è "uguale".
linka una demo al tuo lavoro così potremo capire le differenze.
Il codice da me utilizzato è:
codice:
<!DOCTYPE html>
<html>
<title>W3.CSS Template</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body,h1 {font-family: "Montserrat", sans-serif}
img {margin-bottom: -7px}
.w3-row-padding img {margin-bottom: 12px}
</style>
<body>
<!-- Sidebar
<nav class="w3-sidebar w3-black w3-animate-top w3-xxlarge" style="display:none;padding-top:150px" id="mySidebar">
<a href="javascript:void(0)" onclick="w3_close()" class="w3-button w3-black w3-xxlarge w3-padding w3-display-topright" style="padding:6px 24px">
<i class="fa fa-remove"></i>
</a>
<div class="w3-bar-block w3-center">
<a href="#" class="w3-bar-item w3-button w3-text-grey w3-hover-black">About</a>
<a href="#" class="w3-bar-item w3-button w3-text-grey w3-hover-black">Photos</a>
<a href="#" class="w3-bar-item w3-button w3-text-grey w3-hover-black">Shop</a>
<a href="#" class="w3-bar-item w3-button w3-text-grey w3-hover-black">Contact</a>
</div>
</nav> -->
<!-- !PAGE CONTENT! -->
<div class="w3-content" style="max-width:1500px">
<!-- Header -->
<div class="w3-opacity">
<!-- <span class="w3-button w3-xxlarge w3-white w3-right" onclick="w3_open()"><i class="fa fa-bars"></i></span> -->
<div class="w3-clear"></div>
<header class="w3-center w3-margin-bottom" style="margin-top:128px">
<h1><b>Nome utente</b></h1>
<p><b>Creative Specialist</b></p>
<p class="w3-padding-16"><button class="w3-button w3-black" onclick="myFunction()">Toggle Grid Padding</button></p>
<p>Lorem ipsum dolor sit amet, consectetur adipisci elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</header>
</div>
<!-- Photo Grid -->
<div class="w3-row" id="myGrid" style="margin-bottom:128px">
<div class="w3-third">
<img src="img/a.jpg" style="width:100%">
<img src="img/b.jpg" style="width:100%">
<img src="img/l.jpg" style="width:100%">
<img src="img/d.jpg" style="width:100%">
<img src="img/e.jpg" style="width:100%">
<img src="img/h.jpg" style="width:100%">
</div>
<div class="w3-third">
<img src="img/g.jpg" style="width:100%">
<img src="img/c.jpg" style="width:100%">
<img src="img/e.jpg" style="width:100%">
<img src="img/d.jpg" style="width:100%">
<img src="img/e.jpg" style="width:100%">
<img src="img/f.jpg" style="width:100%">
</div>
<div class="w3-third">
<img src="img/f.jpg" style="width:100%">
<img src="img/b.jpg" style="width:100%">
<img src="img/c.jpg" style="width:100%">
<img src="img/g.jpg" style="width:100%">
<img src="img/e.jpg" style="width:100%">
<img src="img/b.jpg" style="width:100%">
</div>
</div>
<!-- End Page Content -->
</div>
<!-- Footer -->
<footer class="w3-container w3-padding-64 w3-light-grey w3-center w3-opacity w3-xlarge" style="margin-top:128px">
<i class="fa fa-behance w3-hover-opacity"></i>
<i class="fa fa-linkedin w3-hover-opacity"></i>
<i class="fa fa-envelope-o w3-hover-opacity"></i>
<!-- <i class="fa fa-pinterest-p w3-hover-opacity"></i>
<i class="fa fa-twitter w3-hover-opacity"></i> -->
<p class="w3-medium">Filippo Rocchetta ©</a></p>
</footer>
<script>
// Toggle grid padding
function myFunction() {
var x = document.getElementById("myGrid");
if (x.className === "w3-row") {
x.className = "w3-row-padding";
} else {
x.className = x.className.replace("w3-row-padding", "w3-row");
}
}
// Open and close sidebar
/* function w3_open() {
document.getElementById("mySidebar").style.width = "100%";
document.getElementById("mySidebar").style.display = "block";
}
function w3_close() {
document.getElementById("mySidebar").style.display = "none";
} */
</script>
</body>
</html>
Che come risultato mi da:
schermata1.gifschermata2.gif
Permessi di invio
Rispondi quotando
