How to create a static website

Asked

Viewed 318 times

0

I am developing a site with only HTML and CSS. I want the static size to be this:

#tudo{
    width: 1024px;
    margin: 0 auto;
    text-align: left; /* "remédio" para o hack do IE */  
}

The problem is when the screen is smaller the site defaults instead of staying the same at 1024px. What to do?

When it’s on a screen smaller than 1024px it looks like this:

inserir a descrição da imagem aqui

  • Can you explain better what you mean by static?

  • David, I would take a look at the idea of responsive layouts. Maybe good old bootstrap can help you ;)

  • I appreciate your tip. Right now I am practicing with old school techniques. Only then on another site will I approach this area.

  • 3

    @David advises to study about CSS Media Queries!

  • Did Oce define the properties of buttons(<code>width, margin and padding</code>) in pixels as well or in percentage? Are you using float left on the buttons? <br> It would be nice to show their html and css too, otherwise it is difficult to orient you on something.

  • 1

    Add a min-width:1024px causes it to show a horizontal bar instead of mess.

  • Bacco you solved my problem thank you :)

Show 2 more comments

2 answers

3

when the "screen" (screen for en) is smaller than the width of your div #tudo, change the CSS property width for max-width and so the content will adjust to smaller widths.

https://jsfiddle.net/4nnkfuLt/

#tudo {
  max-width: 1024px;
  margin: 0 auto;
}
  • It didn’t solve my problem. I thought I had solved it but it didn’t. The solution has already been stated here - I must add the 1024px min-width. The way you are indicating would have to create width for the box in css. But thanks for the help even :) Thanks!

  • I don’t think it’s good to have a horizontal bar for your users, um... if you’re just studying all right, but if it’s for other people to access you can’t leave that bar there, the best thing is that the container adapts to the content and when the screen is smaller, content squeezed but does not create horizontal bar

  • Leandro you’re absolutely right. I’m taking the first steps in practice. I’ll take it easy. The important thing for now is that he :)

0

Try to overflow your browser window. In case on your body and do the test,

body{ overflow: scroll; }

Browser other questions tagged

You are not signed in. Login or sign up in order to post.