☰

» »

Kako narediti to stran "resposive"?

Kako narediti to stran "resposive"?

zzbil ::

Zdravo!
Izdelujem spletno stran, bolj hobi, in sem se znašel pred oviro. STran bi rad naredil "resposive" torej da bo izgledala dobro na katerikoli velikosti ekrana. Navigation bar je izdelan tako, da je prilagojen na manjše naprave, vendar me zanima kako bi lahko naredil naslovnico resposive? Želim, da bi bila na vsakem ekranu čez cel ekran, torej da se ne vidi spodnjega sklopa "about" in da se pri povečanju in zmanjšanju strani ohranijo razmerja.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mrox</title>
<style>

.w3-third {
  opacity: 1;
  display: block;
  width: 100%;
  height: auto;
  transition: .3s ease;
  backface-visibility: hidden;
}

.w3-third:hover {opacity: 0.3;}

.downloads {text-align: center;
        color: #333;
		max-width: 100%;
		font-family: Lucida Sans Unicode;
		font-size: 50px;
		
		}
.title {text-align: center;
        color: white;
		max-width: 100%;
		font-family: Trebuchet MS;
		font-size: 200px;}
.hlink {text-align: center;
  color: white;
  border: 2px solid white;
  text-decoration: none;
  background-color: #333;
  padding: 15px;  }
.hlink:hover {background-color: white;
  color: #333;
  }

 
  
ul.topnav li a:hover {background-color: rgb(210,210,210);
  color: black;
  
                      }
body {margin:0;
     background-image: url("images/background.jpg");
	 background-repeat: repeat;}
ul.topnav {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
  
}



ul.topnav li {float: left;
              font-family: Lucida Sans Unicode;
			  }

ul.topnav li a {
  display: inline-block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  transition: 0.3s;
  font-size: 17px;
}




ul.topnav li.icon {display: none;}

@media screen and (max-width:680px) {
  ul.topnav li:not(:first-child) {display: none;}
  ul.topnav li.icon {
    float: right;
    display: inline-block;
  }
  
  
}

@media screen and (max-width:680px) {
  ul.topnav.responsive {position: relative;}
  ul.topnav.responsive li.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  ul.topnav.responsive li {
    float: none;
    display: inline;
  }
  ul.topnav.responsive li a {
    display: block;
    text-align: left;
  }
}
ul {
    position: fixed;
    top: 0;
    width: 100%;
	z-index: 3;
}

* {
    box-sizing: border-box;
}


</style>

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="icon" type="image/gif/png" href="images/ico.png">
</head>

<body>
<div id="home">
</div>



<ul class="topnav" id="myTopnav">
  
  <li class="link"><a href="#home">Home</a></li>
  <li class="link"><a href="#downloads">Downloads</a></li>
  <li class="link"><a href="#about">About</a></li>
  
  
  <li class="icon">
    <a href="javascript:void(0);" style="font-size:15px;" onclick="myFunction()">&#9776;</a>
  </li>
</ul>
<script>
function myFunction() {
    var x = document.getElementById("myTopnav");
    if (x.className === "topnav") {
        x.className += " responsive";
    } else {
        x.className = "topnav";
    }
}
</script>
<br> <br>
<header  style="background-color: #333; opacity: 0.9; width: 100%; height: 100%; margin: auto; margin-top: 230px; margin-bottom: 225px; text-align: center; padding: 40px;" >
<h1 class="title">MROX</h1>
<a class="hlink" href="#downloads"><strong>Downloads</strong></a>
</header>








</body>
</html>

ima kdo kakšno idejo?

petrus ::

Kot prvo vrži ven vse štiri link rel="stylesheet" href= linke, za primer najbolj responsive strani na svetu pa glej ta blog.
stati inu obstati

zzbil ::

petrus hvala za hiter odgovor! Zakaj pa stylesheeti motijo?
Morda imaš kakšen link v angleščini, nemščina mi načeloma ni ravno ljuba ;)

petrus ::

Ne glej vsebine, to je samo kot primer zelo odzivne domače strani, malo za hec malo zares.
stati inu obstati

smacker ::

Petrus te trolla, ponudil ti je stran brez oblike, ki ima samo text.
Najlažje je kak bootstrap gor počit, naštudiraš njihov grid sistem pa si zmagal. http://getbootstrap.com/css/

zzbil ::

petrus mi kar ni kapnilo :)) :))
Pa so morda takšni tuturiali za kaj?

Vredno ogleda ...

TemaSporočilaOglediZadnje sporočilo
TemaSporočilaOglediZadnje sporočilo
!

Vse, kar ste si želeli vprašati o CSS, pa si niste upali. (strani: 1 2 3 4 … 23 24 25 26 )

Oddelek: Izdelava spletišč		1297330437 (54586) htmltroubles
»

Prikaz strani na različni resoluciji-Joomla

Oddelek: Izdelava spletišč		151797 (1525) kr?en
»

meni razporejen po celotni dolžini

Oddelek: Izdelava spletišč		71990 (1858) XzupanX
»

Wampserver in Firefox

Oddelek: Izdelava spletišč		61704 (1584) jonystar
»

CSS problemi (strani: 1 2 )

Oddelek: Izdelava spletišč		519299 (7098) nuuush

Več podobnih tem