Hello people, i need a code so when someone join my site, the site resize after the size of the screen on the coputer joining.
cause i have seen my site on a small screen and big screen but they look different...
så if the site could resize so it would be same in every screen that see it, i would be happy.

Recommended Answers

All 9 Replies

Do you use percentages? As in

<table width="80%">

You might want to use absolute..

<table width="800px">
Member Avatar for diafol

Use CSS to create a fluid (%) based solution as suggested above - but unless you specify min-width/max-width you could end up with terrible looking pages in large and small resolutions.

e.g. use a wrapper div to encapsulate the entire page

#wrapper{
  width: 80%;
  min-width: 500px;
  max-width: 900px;
}

The other 'child' elements will be relative to the wrapper div:

#column1{
  width:49%;
  padding:5px;
  float:left;
}
#column2{
  width:49%;
  padding:5px;
  float:right;
}

I haven't tried the above, but I think it should work. The problem will arise when inline elements push each other "over the edge". Certain floated elements may also end in a float drop, if not careful.

Older websites used to have a 'choose resolution' option, which usually stored a cookie or a DB entry for the user. This value was then used to call a specific CSS file. This has, for obvious reasons, died a virtual death.

Javascript could be used to dynamically resize page elements, but you may as well use CSS.

JS (or sometimes server-side scripts) are still used to resize text, although this has been pretty much superseded by browser-based text resizing.

If you are using a mobile for perusing the site, you could have a handheld specific CSS file:

<link href="main.css" rel="stylesheet" rev="stylesheet" type="text/css" media="screen" />
<link href="print.css" rel="stylesheet" rev="stylesheet" type="text/css" media="print" />
<link href="hh.css" rel="stylesheet" rev="stylesheet" type="text/css" media="handheld" />

You could have all the above in the head section, but the browser will decide which CSS file to use.

Sorry if you're aware of all this, but that's about as much as I can suggest.

So i just need to use that code and everything on my site will change size depending on the size og the screen?

1.
      #wrapper{
   2.
      width: 80%;
   3.
      min-width: 500px;
   4.
      max-width: 900px;
   5.
      }
Member Avatar for diafol

I think so, just remember to have your widths as %ages. They'll take the containing element as 100% and make themselves a %age of that. However, you have to be careful at larger/smaller resolutions w.r.t setting something like 49% + 49% as above. At smaller sizes, the "space" between columns may be too small and at larger sizes, it may be quite big. You should also have a 'clear:both' attribute on the next non-floated element, otherwise that element (especially if text) may decide to live in that gap.

i dont really understand what you are saying...
can you maybe explain it on another way?
the site is in danish (but that dont matter) take a look on the site and see what i mean cause i made it on a 21 inches screen (widescreen) but many visitors dont have same size screen so it look too different...
i just need a code that make it look like the same.
link: http://hltrock.dk

Member Avatar for diafol

<p class="style6">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<span class="style10">NY</span><span class="style9"> SINGLE&nbsp; </span>
Control? Klik <a href="Control.html">her</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </p>

OK, I see your problem. You've done the above. You've come to the wrong forum. Try the HTML and CSS. However, CSS probably won't help if you've stuffed your page with &nbsp;. I suggest you learn HTML first - plenty of online tutorials available. Next try CSS. You may be some time ...

i have learned html.....
and i wont try learn css....
and ofc i can fix that, but im just using a program that makes the codes for me. (microsoft expression web)
but i try to move it.

Member Avatar for diafol

OK, but CSS is the root of your display options. Unless you learn some CSS syntax (not difficult), you may struggle to deal with that horrible html code that MS Expression spits out. Those &nbsp; will really make you hurt when trying to style. It's the rough equivalent of using a spacebar to indent text as opposed to using the centre alignment on a word processor.

If you want this moved, I think you can "flag bad post" and in the reason ask for a request to move it to another forum. However, it'd probably be best to just start a new thread there.

i have just started another thread in html/css.
and the most of the &nbsp have been deleted (it was to many space i did have seen).
and now im using "%" instead of "px" and hope it work.
so i want to close this now

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.