Make page fixed not liquide

J'essaie de faire que cette page ne soit pas liquide. Quand je redimensionne le navigateur, je ne veux rien bouger. La façon dont c'est maintenant quand je redimensionne le navigateur, le texte s'effondre. Je ne suis pas sûr de ce que je fais mal. Aidez-moi, s'il vous plaît!Make page fixed not liquide

<!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"> 

<head> 
<title>Happy Tails</title> 
<meta http-equiv="content-type" content="text/html;charset=utf-8"/> 
<style type="text/css"> 


/* body and wrapper */ 
* { 
margin: 0px 0px; 
padding: 0px 0px; 
} 

body { 
background-color: #C15D63; 
} 

#outer { 

} 

#container { 
width: 50%; 
//background-color: #C15D63; 
} 

/* header */ 

/* navigation */ 

/* main content section */ 
#dog, #cat, #other { 
float:left; 
width: 750px; 
height: 204px; 
margin-left: 50%; 
background-color: #E198B2; 
padding: 1em; 
} 

/* dog content */ 
#dog_float { 
position: absolute; 
top: 15px; 
right: 300px; 
//bottom: 30px; 
left: 376px; 
border: 2px solid #222222; 
width: 220px; 
height: 204px; 
} 

#dog_inner { 

} 

#dog h1 { 
position: absolute; 
top: 15px; 
left: 610px; 
font-weight: bold; 
font-family: Copperplate Gothic Light, sans-serif; 
font-size: 1.2em; 
text-transform: uppercase; 
} 

#dog_inner p.description { 
position: absolute; 
top: 34px; 
left: 610px; 
font-weight: bold; 
font-size: .8em; 
padding: 5px 0px 5px 0px; 
} 

#dog p { 
position: absolute; 
top: 60px; 
left: 610px; 
right: 320px; 
font-family: "Times New Roman", Times, serif; 
font-size: 15px; 
line-height: 20px; 
letter-spacing: 1.5px; 
} 


/* cat content */ 
#cat_float { 
position: absolute; 
top: 250px; 
//right: 30px; 
//bottom: 30px; 
left: 376px; 
border: 2px solid #222222; 
width: 220px; 
height: 204px; 
} 

#cat_inner { 

} 

#cat h1 { 
position: absolute; 
top: 250px; 
left: 610px; 
font-weight: bold; 
font-family: Copperplate Gothic Light, sans-serif; 
font-size: 1.2em; 
text-transform: uppercase; 
} 

#cat_inner p.description { 
position: absolute; 
top: 269px; 
left: 610px; 
font-weight: bold; 
font-size: .8em; 
padding: 5px 0px 5px 0px; 
} 

#cat p { 
position: absolute; 
top: 295px; 
left: 610px; 
right: 320px; 
font-family: "Times New Roman", Times, serif; 
font-size: 15px; 
line-height: 20px; 
letter-spacing: 1.5px; 
} 

/* other content */ 
#other_float { 
position: absolute; 
top: 485px; 
//right: 30px; 
//bottom: 30px; 
left: 376px; 
border: 2px solid #222222; 
width: 220px; 
height: 204px; 
} 

#other_inner { 

} 

#other h1 { 
position: absolute; 
top: 485px; 
left: 610px; 
font-weight: bold; 
font-family: Copperplate Gothic Light, sans-serif; 
font-size: 1.2em; 
text-transform: uppercase; 
} 

#other_inner p.description { 
position: absolute; 
top: 504px; 
left: 610px; 
font-weight: bold; 
font-size: .8em; 
padding: 5px 0px 5px 0px; 
} 

#other p { 
position: absolute; 
top: 530px; 
left: 610px; 
right: 320px; 
font-family: "Times New Roman", Times, serif; 
font-size: 15px; 
line-height: 20px; 
letter-spacing: 1.5px; 
} 

/* footer */ 
#footer { 
clear: both; 
border: 3px outset; 
background-color: #62587C; 
height: 60px; 
width: 776px; 
margin-left: 50%; 
} 

#footer_main { 
float: left; 
margin-left: 10px; 
} 

#footer_inner { 
font-family: "Times New Roman", Times, serif; 
font-size: 14px; 
letter-spacing: 1.5px; 
} 

.footer_location { 
float: left; 
font-size: .85em; 
text-align: left; 
padding: 14px 55px 15px 60px; 
} 

.footer_social { 
float: left; 
font-size: .85em; 
padding: 18px 5px 0px 35px; 
} 

#footer img { 
padding: 0px 5px 0px 0px; 
} 

.footer_contact { 
float: right; 
font-size: .85em; 
text-align: right; 
padding: 14px 60px 15px 55px; 
} 

#footer a:link { 
color: black; 
} 

#footer a:hoover { 
color: black; 
} 

</style> 
</head> 

<body> 
<div id="outer"> 
<div id="container"> 

    <div id="dog"> 

    <div id="dog_float"> 
    <img src="beanie.png" alt="Beanie, 10yrs" /> 
    </div><!--end div dog_float--> 

    <div id="dog_inner"> 
    <h1>Beanie Baby</h1> 
    <p class="description">Yorkshire Terrier, Female, 10 years, 5 lbs.</p><!--end p description--> 

    <p> 
    Beanie Baby was brought into our rescue from Lancaster, PA where she and her two siblings were born to a breeder. When she was born she was the size of an actual beanie baby, hence the name! She was adopted in 2008 to a family of three who loved and cared for her. With some good TLC, Beanie became an outgoing pup who loved everyone and every other animal, but she was a total momma's girl! She loved to snuggle under the blankets and was always there to greet you after a long day at work. Beanie passed away in 2011. 
    </p>  
    </div><!--end div dog_inner--> 
    </div><!--end div dog--> 

    <div id="cat_float"> 
    <img src="tink.png" alt="Tinkerbell, 18yrs" /> 
    </div><!--end div cat_float--> 

    <div id="cat"> 

    <div id="cat_inner"> 
    <h1>Tinkerbell</h1> 
    <p class="description">Tabby Short Hair, Male, 18 years, 12 lbs.</p><!--end p description--> 
    <p> 
    Tinkerbell first came into our rescue 18 years ago. He loved to spend his days outside soaking up the sun and the nights inside sleeping an the foot of someone's bed. Every time Tinkerbell heard a can opener, he came running assuming that he was going to get a helping of tuna. He was a cat that enjoyed his personal space, but had a daily routine to come visit someone for a good scratching. Tinkerbell passed away in 2012. 
    </p> 
    </div><!--end div cat_inner--> 
    </div><!--end div cat--> 

    <div id="other"> 
    <div id="other_float"> 
    <img src="sadie2.png" alt="Sadie, 1yrs" /> 
    </div><!--end div other_float--> 

    <div id="other_inner"> 
    <h1>Sadie</h1> 
    <p class="description">Hamster, Female, 1 year, 1 lbs.</p><!--end p description--> 
    <p> 
    Sadie is a beautiful tan/white hamster. She came into our rescue when her first family could not give her the attention she required. In 2010, a family adopted Sadie as their first family pet. The family recognized that just like any other animal, even small caged creatures need love and attention. Sadie loves to go on adventures through the house in her spinning ball and find new paths through her jungle tube maze, which the family constantly adds to. For Sadie, her second chance was the best thing that could have happened to her. 
    </p> 
    </div><!--end div other_inner--> 
    </div><!--end div other--> 



<div id="footer"> 
    <div id="footer_inner"> 
     <p class="footer_location">1234 Forbes Avenue<br /> 
     Pittsburgh, PA 15213</p><!--end p footer_location--> 

     <p class="footer_social"> 
     <a href="www.petfinder.com"><img src="finder.png" alt="See our animals on Petfinder" /></a> 
     <a href="www.facebook.com"><img src="Facebook.png" alt="Friend us on Facebook" /></a> 
     <a href="www.twitter.com"><img src="twitter.png" alt="Follow us on Twitter" /></a> 
     <a href="www.youtube.com"><img src="youtube.png" alt="Visit Our YouTube Channel" /></a></p><!--end p footer_social--> 

     <p class="footer_contact">Telephone: 512.341.8872<br /> 
     Email: <a href="mailto:[email protected]">[email protected]</a></p><!--end p footer_contact--> 
    </div><!--end div footer_inner--> 
</div><!--end div footer--> 

</div> 
</div> 
</body> 
</html>

Source

2012-09-08 user1657160

Utilisez 'min-width: [px];'. –

Bienvenue sur Stackoverflow. Cela aidera si vous faites un jsfiddle (http://jsfiddle.net) dans le futur. Vous obtiendriez de l'aide plus rapidement. – 11684

Essayez:

body {min-width: 750px;}

Modifiez la valeur à votre goût.

Source

2012-09-08 19:18:26

Largeur: 50% est relatif. Votre taille de conteneur sera toujours 50% de la taille de la fenêtre de votre navigateur.

Si vous voulez fixe, utilisez largeur: 500px; ou similaire.

Source

2012-09-08 19:18:47

Aïe! C'est une mise en page un peu douloureuse.

Vous pouvez réutiliser les styles css plus que vous, en utilisant la classe au lieu de l'id pour différencier. Je n'ai pas pris la peine d'ajouter tous les éléments que vous affichez (certains éléments dans le pied de page et les boutons qui semblent être dans le pied de page)

Votre page était de 303 lignes de texte. Cet exemple vaut 93. En outre, vous devriez jeter un coup d'oeil aux outils de développement des navigateurs - ils vous permettent de voir le rectangle de délimitation des éléments et de changer leur style de façon dynamique - deux choses que vous pourriez trouver utiles. :)

Ctrl-Merde-I - Chrome & Opera F12 - IE

Ou vous pouvez souvent un clic droit sur un élément puis sélectionnez "Inspecter l'élément"

Enjoy!

<!DOCTYPE html> 
<html> 
<head> 
<style> 
body 
{ 
    padding: 0; 
    margin: 0; 
    background-color: #C15D63; 
} 
.page 
{ 
    background-color: #E198B2; 
    margin: auto; 
    width: 800px; 
} 
.pageFooter 
{ 
    border: 3px outset; 
    background-color: #62587C; 
    height: 60px; 
    clear: both; 
} 
.item 
{ 
    margin: 16px; 
} 

.item img 
{ 
    float: left; 
    width: 220px; 
    height: 204px; 
    margin-left: 32px; 
    margin-right: 32px; 
    border: solid 2px black; 
} 

h1 
{ 
    font-weight: bold; 
    font-family: Copperplate Gothic Light, sans-serif; 
    font-size: 1.2em; 
    text-transform: uppercase; 
} 

p.description 
{ 
    font-weight: bold; 
    font-size: .8em; 
    padding: 5px 0px 5px 0px; 
} 
</style> 
</head> 
<body> 
    <div class='page'> 
     <br> 

     <div class='item'> 
      <img src='item1.png'> 
      <h1>Beanie Baby</h1 
      <p class="description">Yorkshire Terrier, Female, 10 years, 5 lbs.</p><!--end p description--> 
      <p> 
      Beanie Baby was brought into our rescue from Lancaster, PA where she and her two siblings were born to a breeder. When she was born she was the size of an actual beanie baby, hence the name! She was adopted in 2008 to a family of three who loved and cared for her. With some good TLC, Beanie became an outgoing pup who loved everyone and every other animal, but she was a total momma's girl! She loved to snuggle under the blankets and was always there to greet you after a long day at work. Beanie passed away in 2011. 
      </p>  
     </div> 

     <div class='item'> 
      <img src='item2.png'> 
      <h1>Tinkerbell</h1> 
      <p class="description">Tabby Short Hair, Male, 18 years, 12 lbs.</p><!--end p description--> 
      <p> 
      Tinkerbell first came into our rescue 18 years ago. He loved to spend his days outside soaking up the sun and the nights inside sleeping an the foot of someone's bed. Every time Tinkerbell heard a can opener, he came running assuming that he was going to get a helping of tuna. He was a cat that enjoyed his personal space, but had a daily routine to come visit someone for a good scratching. Tinkerbell passed away in 2012. 
      </p> 
     </div> 

     <div class='item'> 
      <img src='item3.png'> 
      <h1>Sadie</h1> 
      <p class="description">Hamster, Female, 1 year, 1 lbs.</p><!--end p description--> 
      <p> 
      Sadie is a beautiful tan/white hamster. She came into our rescue when her first family could not give her the attention she required. In 2010, a family adopted Sadie as their first family pet. The family recognized that just like any other animal, even small caged creatures need love and attention. Sadie loves to go on adventures through the house in her spinning ball and find new paths through her jungle tube maze, which the family constantly adds to. For Sadie, her second chance was the best thing that could have happened to her. 
      </p> 
     </div> 

     <div class='pageFooter'> 
      <p class="footer_location">1234 Forbes Avenue<br /> 
      Pittsburgh, PA 15213</p><!--end p footer_location--> 
     </div> 

    </div> 
</body> 
</html>

EDIT: J'ai oublié mon! dans! DOCTYPE

Source

2012-09-08 20:06:24 enhzflep

Doctype incorrect :) –

Vous ne devriez pas l'éditer ... – enhzflep

Non. Je corrige l'orthographe, la grammaire, la ponctuation et le formatage, mais je préfère ne pas corriger le code des utilisateurs. –

Make page fixed not liquide

Répondre

Questions connexes