When I minimize my HTML/CSS page it squishes all the pictures and texts and ruins the formatting

StackOverflow https://stackoverflow.com/questions/18371560

Frage 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta name="generator" content="HTML-Kit Tools HTML Tidy plugin">
    <link href="layout.css" rel="stylesheet" type="text/css">
    <title></title>
</head>
<body>
    <div class="square" font=10px>
        <p></p>
    </div>

    <div id="wrapper">
        <img class="A" src="download.jpg" alt="Solar Panels"/>
        <img class="B" src= "wind.jpg" alt="Windmills"  />
        <img class="C" src= "biomass.jpg" alt="Biomass"  />
        <img class="D" src= "renewable.jpg" alt="Renewable Energy"  />
    </div>  

    <hr>

    <div id = "bottom">
        <p>Contact:*********@gmail.com</p>
    </div>
</body>
</html>

Here is my css 

<style type="text/css">
p {
color:#f5f5dc;
font-size:50px;
text-align: center;
margin-top: 20px; 
}
body{
background-color:#fffacd;
font-size:100%;
min-width:800px;
}
.square{
    height: 100px;
    width: 100%;
    position:relative;
    left:-20px;
    border: 2px solid black;
    border-radius: 5px;
    background-color:#0066cc;
    font-size:1.0em;

}
#wrapper{
width:100%;
margin-top: 40px;
margin-bottom: 40px;
}
.A, .B, .C, .D{
width:300px;
height:200px;
float:left;
border:1px solid black;
margin-right:10px;
margin-bottom:40px; 
}
.D{
width:270px;
}
#bottom p{
 color:black;
 font-size:15px;
}
</style>

This is my code how can i minimize it without it squishing together? i have tried making containers. I have tried everything.

I added my css. When I say minimize, I mean when you make the page smaller. Everything gets squished together and the pictures go on top of each other and it looks horrible. It's fine when you maximize it.

War es hilfreich?

Lösung

You can use responsive CSS from bootstrap and can use its class when formatting. http://getbootstrap.com/2.3.2/

for example.

<div class="row-fluid">
  <div class="span4">...</div>
  <div class="span8">...</div>
</div>

Andere Tipps

A wild guess, set a min-width to the body.

INLINE

<body style="min-width: 800px;">

OR IN YOUR STYLESHEET

body {
    min-width: 800px;
}

Change the 800px to the required minimum width you want. Then when the browser resizes to a width smaller than that number, the scrollbars will appear.

Please refer the fiddle and update it,

I have updated small errors, with one closing div missing,

and that with strict DTD in the heading, is the main reason for ruin the formatting..

you may use transitional/loose DTD if still learning,

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">

I am sure this will do, but still if problem persist, please update fiddle and post back the new link, with all codes.

Thank you for updating code of CSS, now after looking at your CSS, I can say the problem was float and I have updated my fiddel for the same, that works fine with Google Chrome Browser, please let me know if any problem persist, with specification.

Your problem is yours tag are not responsive in your views. The easiest way is Download bootstrap css and link in your html.

 <!DOCTYPE html>
 <html>
   <head>
     <style> 
        <link rel="stylesheet" type="text/css" href="bootstrap.css"> 
        <link rel="stylesheet" type="text/css" href="bootstrap_responsive.css"> 
    </style>
   </head>
   <body>
    <p>hello world.</p>
   </body>
 </html>

and check

http://getbootstrap.com/2.3.2/scaffolding.html#fluidGridSystem for futher details.

If you dont want to use bootstrap there is purecss for second choice http://purecss.io/

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top