0

このページを液体ではなく固定しようとしています。ブラウザのサイズを変更すると、何も移動したくありません。ブラウザのサイズを変更すると、テキストが折りたたまれるようになりました。何が間違っているのかわかりません。助けてください！

<!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:paws+claws@gmail.com">paws+claws@gmail.com</a></p><!--end p footer_contact-->
    </div><!--end div footer_inner-->
</div><!--end div footer-->

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

3 に答える 3

2

試す：

body {min-width: 750px;}

値はお好みで変更してください。

于 2012-09-08T19:18:26.647 に答える
0

痛い！ちょっと痛々しいレイアウトです。

id の代わりに class を使用して区別することで、css スタイルをより多く再利用できます。表示しているすべての要素をわざわざ追加しませんでした (フッターにあるものと、フッターにあるはずのボタン)

あなたのページは 303 行のテキストでした。この例は 93 です。また、ブラウザーにある開発者ツールを確認する必要があります。これらのツールを使用すると、要素のバウンディング rect を確認したり、スタイルを動的に変更したりできます。この 2 つの点が役立つかもしれません。:)

Chrome の Ctrl+Shift+I キーと IE の Opera キー F12 キーの組み合わせ

または、多くの場合、要素を右クリックして [要素の検査] を選択します。

楽しみ！

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

編集: ! を忘れた !DOCTYPE で

于 2012-09-08T20:06:24.093 に答える
0

幅:50% は相対的です。コンテナーのサイズは、常にブラウザー ウィンドウのサイズの 50% になります。

固定したい場合は、 width:500px; を使用してください。または類似。

于 2012-09-08T19:18:47.330 に答える