De faire mon site à l'échelle de la résolution de tailles dans le css

C'est ma première semaine de programmation en CSS, HTML et PHP. J'ai réalisé au début de mon site quand j'ai redimensionné mon site par la taille de la fenêtre que tout le texte serait commencent à se chevaucher, à l'origine de problèmes et de look terrible.

Je me demandais si je pouvais obtenir une réponse claire sur ce que je fais horriblement mal. J'ai essayé des méthodes telles que les requêtes de média, mais je ne comprends toujours pas à tous.

Voici mon code:

CSS:

/* Reset body padding and margins */
body {
margin: 0px;
padding: 0px;
}
/* Make Header Sticky */
#header_container {
background: black;
border: 1px solid #666;
height: 40px;
left: 0;
position: fixed;
width: 100%;
top: 0;
}
#header {
line-height: 5px;
margin: 10px;
auto: width:940px;
text-align: left;
}
#headertext {
font-family: "sans-serif";
size: 20px;
padding: 2px;
font-size: 120%;
text-decoration: none;
}
/* CSS for the content of page. I am giving top and bottom padding of 80px to make sure the header and footer do not overlap the content.*/
#container {
margin: auto;
overflow: auto;
padding: 80px;
width: 100%;
height: auto;
}
#content {}
/* CSS FOR HOME PAGE CONTENTS */
#hometext {
font-family: "arial";
padding: 1px;
font-size: 100%;
text-decoration: none;
position: absolute;
top: 5em;
left: 4em;
color: #585858;
margin-right: 850px;
}
#hometext2 {
font-family: "arial";
padding: 10px;
font-size: 80%;
text-decoration: none;
position: absolute;
top: 7em;
left: 4.24em;
color: #585858;
margin-right: 1200px;
}
#hometext3 {
font-family: "arial";
padding: 1px;
font-size: 100%;
text-decoration: none;
position: absolute;
top: 5m;
left: 65em;
color: #585858;
margin-right: 0;
}
#hometext4 {
font-family: "arial";
padding: 18px;
font-size: 80%;
text-decoration: none;
position: absolute;
top: 10m;
left: 80em;
color: #585858;
margin-right: 0;
}
#home_container

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<html>
<head>
<link rel="stylesheet" type="text/css" href="style/style.css" />
<title>replay.sc</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
a:link {
color: grey;
}
a:visited {
color: grey;
}
a:hover {
color: white;
}
a:active {
color: grey;
}
text-decoration: none;
}
}
</style>
</head>
<body font="sans-serif" id="container">
<!--- BEGIN: STICKY HEADER -->
<div id="header_container">
<div id="header">
<p><a id="headertext" a href="replay.sc"> replay.sc </a>
<p>
</div>
</div>
<!-- END: STICKY HEADER -->
<!-- BEGIN: Sticky Footer -->
<div id="footer_container">
<div id="footer">
</div>
</div>
<!-- END: Sticky Footer -->
<div id="home_container">
<h1 id="hometext"> Upload your replay here to generate a page containing a download link and various information on the replay. </h1>
<p id="hometext2"> When the page is generated you will have the option to select which information on the replay you want to display to the public, if you are logged in you will be able to edit this in the future.</p>
<h1 id="hometext3"> Upload a replay pack here to generate a page containing download links for every replay or for a .rar file of every replay. </h1>
<p id="hometext4"> Only basic information for each replay will be made to conserve server load. </p>
</div>
</body>
</html>

Qu'entendez-vous par "mise à l'échelle par la taille de la fenêtre"? Voulez-vous dire que vous êtes un zoom in/out de votre site web?
votre "css" est juste un duplicata de votre "html"...
CSS affichage est fixe, quand je dis à l'échelle par la taille de la fenêtre que je veux dire, par exemple, si ma fenêtre est en 1920x1080 alors que tout est parfaitement bien, mais si je devais faire la fenêtre plus petite, tout commence à se chevauchent et de créer des marges que je ne veux pas. Je me rends compte de mon CSS peut paraître jolie, moche, donc toutes les suggestions sont les grands.
Ne pas utiliser le positionnement absolu.

InformationsquelleAutor user3317455 | 2014-02-17

6

Vous êtes de mélange absolue et relative des mesures de manière incorrecte. Si vous êtes débutants, je vous conseille de coller à un modèle de mesures de la première et, progressivement, apprendre à utiliser les autres.

Par exemple, le Dépassement de Pile est en position absolue; si vous redimensionnez la fenêtre du navigateur, rien ne pourra les redimensionner. Une position relative de la page web peut adapter le contenu à la taille de la fenêtre. Le JSFiddle site est relativement placé; il est toujours utilise la totalité de la taille de la fenêtre.

À la fois modèle de mesures peuvent produire un bon site web, mais pour produire un site web à succès, vous devez être intimement familier avec les deux méthodes de positionnement et de la façon de les mélanger pour produire des effets différents quand utilisé dans la même page.

Beaucoup de gens considèrent le positionnement absolu pour être plus facile à visualiser pour les débutants, même si elle a ses limites si vous voulez créer des mises en page plus sophistiquées qui fonctionne bien sur largement différentes tailles d'écran.

Si vous souhaitez commencer avec un positionnement absolu, vous devez d'abord commencer par déterminer une certaine largeur de l'ensemble de la page. Beaucoup de gens utilise assez étroite, nombre de pixels qui ont un grand nombre de divisibilité comme 960px ou de 800px. Pour faire un simple positionnement absolu site, vous devez:
1. Ensemble position: absolute sur la plupart des choses.
2. Ensemble toutes les deux: en haut, en bas, ou de la hauteur.
3. Ensemble toutes les deux: à gauche, à droite, ou de la largeur.
4. Tout sur la page devrait utiliser la même unité de mesure (par exemple, px)
Par exemple (edit sur jsfiddle ou plein écran):
```
#hometext{
font-family: "arial";
font-size: 100%; 
text-decoration: none;
color: #585858;
position: absolute;
top: 80px; 
left: 60px; 
width: 335px;
height: 60px;
line-height: 20px; /* this ensure that 3 lines of text sums up to 3*20px=60px */
}
```
L'inconvénient de positionnement absolu site apparaît lorsque vous essayez de zoomer sur le site ou si vos utilisateurs utilisent les différentes dimensions de la fenêtre (soit ils vont avoir beaucoup d'espace perdu ou d'avoir à faire défiler horizontalement. Avec pure positionnement absolu, le site devient essentiellement comme une image statique.

Un plus moderne, la meilleure pratique consiste à utiliser flottait positionnement de produire un réactif ou un élastique site internet. Pour cela, vous avez besoin de comprendre comment float éléments et les différents algorithmes de disposition. Pour produire un élastique site internet, vous aurez besoin de:
1. utilisation pour cent de l'unité pour la plupart des choses
2. utiliser les marges externes et internes judicieusement
3. d'utiliser les différentes mise en page algoritms
Par exemple (modifier dans jsfiddle ou plein écran). Comprendre les différentes algorithme de mise en page, certes, peut être assez difficile, mais vous finirez par l'obtenir naturellement, si vous continuer à l'utiliser pour les différentes mises en page.
- Merci beaucoup! c'est la réponse que j'attendais!
InformationsquelleAutor Lie Ryan

Essayer mon css .. utiliser un récipient pour contenir tous les éléments lors de la réorganisation de la taille du conteneur fera l'affaire.. essayez de copier mes codes, il a un récipient css .. et il contrôle le chevauchement voir .
Le containe la plupart des être par rapport à il l'habitude de chevauchement;; espère que ça aide
voir comment la #publicité css id de faire le tour

                        <html>
<body>
<div id = "container">
<div id="advertisement">
<img src="Desert.jpg" width="200px" height="200px">
</div>
<div id="transparent">
<img src="black.jpg" width="200px" height="200px">
</div>
<div id="regularborder">
<img src="Desert.jpg" width="200px" height="200px">
<img src="Desert.jpg" width="200px" height="200px">
<img src="Desert.jpg" width="200px" height="200px">
</div>
</div>
</body>
</html>
<style>
#container{
position:relative;
}
#advertisement{
z-index:-1;
border-left: solid;
}
#transparent
{
opacity:0.4;
filter:alpha(opacity=40);
position:absolute;
left:0px;
top:0px;
}
#regularborder{
border-style:solid;
}
</style>

Ce n'aide pas réellement à tous, j'ai essayé des choses similaires.

InformationsquelleAutor Joseph Christopher Pimentel

0

Essayer quelque chose comme ceci dans votre CSS.
```
#wholepage { position:absolute; margin:0px; width:100%; }
```
- Et où la hauteur de appartient à de position absolue ?
- Comment cela fonctionne exactement?
InformationsquelleAutor d1rtyw0rm

si vous voulez sensible alors essayez comme ceci

CSS

.header{background-color:#000;color:#fff;width:100%;min-height:40px;}
a{color:#fff;font-size:120%;line-height:2em;margin:10px;}
h1{ color: #585858; font-family: "arial";font-size: 100%;line-height: 20px;}
p{margin-top:1em;font-family: "arial";font-size:80%;color:#585858;}
.table{display:table;width:55%;margin:0 auto;}
.row{display:table-row;}
.cell{display:table-cell;padding:2em;width:50%;}

HTML

<div class="header">
<a href="/" id="headertext"> replay.sc </a>
</div>
<div class="table">
<div class="row">
<div class="cell">
<h1> Upload your replay here to generate a page containing a download link and various information on the replay. </h1>
<p> When the page is generated you will have the option to select which information on the replay you want to display to the public, if you are logged in you will be able to edit this in the future.</p>
</div>
<div class="cell">
<h1> Upload your replay here to generate a page containing a download link and various information on the replay. </h1>
<p> Only basic information for each replay will be made to conserve server load. </p>
</div>
</div>
</div>

De contenu d'ensemble de la marge,rembourrage que vous le souhaitez

InformationsquelleAutor user3302090

Vous pouvez utiliser vw et vh unités:

font-size: 1vw /* = 1% of viewport width */
font-size: 1vh /* = 1% of viewport height */
font-size: 1vmin /* = 1vw or 1vh, whichever is smaller */
font-size: 1vmax  /* = 1vw or 1vh, whichever is larger */

Référence:

Fenêtre D'Affichage De La Taille De La Typographie

InformationsquelleAutor Luis Aguiar

0

Réactivité réelle ne peut vraiment être atteint que si vous voulez que le comportement de votre contenu à être prévisible. Ainsi, vous pouvez appliquer des requêtes de média à votre site web pour certaines dimensions de l'écran. @media screen et {max-width:400px}{.....} cela signifie tout simplement à une largeur maximale de 400px, de traiter le contenu de ce genre. Si le contenu de votre comportement sera inclus dans le {....}. Qui aura un effet de levier vous le temps d'essayer plusieurs navigateurs en dehors de Internet Explorer et il y a une solution pour cela:

IE8 - je pense ne prend pas en charge les requêtes des médias, de sorte que vous aurez juste à ajouter un fichier JavaScript appelé respond.js de leur développeur de site web.

Référence:

W3C questions des médias et de leurs normes
- Googles développeur de site web, j'meantt
InformationsquelleAutor user2903934

Vous devez vous connecter pour publier un commentaire.