0
Je suis relativement nouveau dans le monde css/html. J'essaie de créer un site web. J'ai remarqué cependant que même si tout semble bien sur mon écran lorsque j'essaie de le voir sur des écrans à basse résolution, tout est foiré. Y at-il un moyen de le faire afficher correctement via css?CSS/HTML s'adapte à toutes les résolutions
Voici une image de ce que je suis en train de réaliser et de permettre à des résolutions inférieures ainsi:. image voici mon css jusqu'à présent (la première partie est un Reseter je l'ai eu comme il est de regarder un tutoriel sur youtube):
html,body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
display: block;
}
nav ul {
list-style: none;
}
blockquote,
q {
quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
content: '';
content: none;
}
a {
margin: 0;
padding: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
/* change colours to suit your needs */
ins {
background-color: #ff9;
color: #000;
text-decoration: none;
}
/* change colours to suit your needs */
mark {
background-color: #ff9;
color: #000;
font-style: italic;
font-weight: bold;
}
del {
text-decoration: line-through;
}
abbr[title],
dfn[title] {
border-bottom: 1px dotted;
cursor: help;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/* change border colour to suit your needs */
hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid #cccccc;
margin: 1em 0;
padding: 0;
}
input,
select {
vertical-align: middle;
}
/*!!!!!END OF RESET!!!!!*/
/*MY CSS*/
body {
width: 100%;
height: 100%;
}
#logo1 {
padding-left: 25px;
}
#logo2 {
padding-left: 260px;
}
#eternal {
padding-top: 15px;
display: block;
position: absolute;
left: 0;
}
#prwtoetis {
padding-top: 20px;
float: right;
position: absolute;
bottom: 0%;
left: 0;
}
#akyri {
padding-top: 5px;
display: block;
position: absolute;
right: 0%;
}
#akyri2 {
padding-top: 5px;
display: block;
bottom: 0%;
right: 0%;
position: absolute;
}
#quote {
text-align: center;
padding: 13%;
font-family: Calibri;
font-size: 35px;
}
a {
color: #000;
text-decoration: none;
}
body {
background-color: #e1e8ea;
width: 100%;
min-width: 600px;
max-width: 2000px
}
header {
background-color: #b5c4c9;
padding-top: 8px;
padding-bottom: 10px;
width: 100%;
height: 159px;
}
header img {
float: left;
}
nav {
float: left;
}
nav ul {
margin-top: 86px;
margin-left: 200px;
}
nav ul li {
display: inline-block;
margin-left: 20px;
}
nav ul li a {
font-family: Calibri;
font-size: 22px;
}
a.ex5:hover,
a.ex5:active {
text-decoration: underline;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>RateYourProfessor</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div id="site-wrapper">
<header>
<div>
<img id="logo1" src="images/logo.png">
<nav>
<ul>
<li><a class="ex5" href="index.php">HOME</a></li>
<li><a class="ex5" href="create.php">CREATE PROFESSOR</a></li>
<li><a class="ex5" href="rate.php">RATE PROFESSOR</a></li>
<li><a class="ex5" href="scoreboard.php">SCOREBOARD</a></li>
<li><a class="ex5" href="top5.php">TOP 5</a></li>
</ul>
</nav>
<img id="logo2" src="images/logo.png">
</div>
</header>
<section>
<div>
<img id="eternal" src="images/eternal.png">
<img id="prwtoetis" src="images/prwtoetis.png">
<img id="akyri" src="images/akyri.png">
<img id="akyri2" src="images/akyri2.png">
</div>
<div id="quote"><br> There is no end to education. <br>It is not that you read a book, pass an examination, and finish with education. <br>The whole of life, from the moment you are born to the moment you die, is a process of learning.
<br>- <i>Jiddu Krishnamurti</i>
</div>
</section>
</div>
</body>
</html>
vous pouvez utiliser http://getbootstrap.com/getting-started/ c'est l'aide de batteur pour rendre le site web et réactif –