How to create a flexible web page?

  • (2 Pages)
  • +
  • 1
  • 2

15 Replies - 2215 Views - Last Post: 14 May 2013 - 10:59 AM

#1 brerallia  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 146
  • Joined: 21-January 13

How to create a flexible web page?

Posted 04 May 2013 - 04:58 AM

Hi everyone.. i am new to html and css and i had a problem...

i created a web page...a home page that has a log in and a header above also a footer below... the log in is placed in the center and has a transparent background and buttons etc..the header is has a padding on the left set 8em... footer is placed in the center...

i save my web page in my flash drive so when i take a look at my web page in other computers having different size of monitors, really the elements are distorted...its really annoying. the web page looks nice here in my laptop but imagine that when i implement my web page, people in the world have different sizes of monitor so my web page will look very NOT PLEASING IN THE EYES... this is my very problem and also.. i use div for my left my other page and when looking at it in the other monitors the two divs which are on the left and right side, they will override...

any help will be appreciated... :)

Is This A Good Question/Topic? 0
  • +

Replies To: How to create a flexible web page?

#2 geohhot  Icon User is offline

  • New D.I.C Head

Reputation: 8
  • View blog
  • Posts: 33
  • Joined: 22-December 12

Re: How to create a flexible web page?

Posted 04 May 2013 - 05:14 AM

Use %'s instead of pixels? I mean if you're about to set width of any element set it with %. i.e.
#login {
    width: 25%;
}


I think this may help in some cases. But that may not work good for text sizes I think.
Was This Post Helpful? 0
  • +
  • -

#3 andrewsw  Icon User is offline

  • Fire giant boob nipple gun!
  • member icon

Reputation: 3177
  • View blog
  • Posts: 10,638
  • Joined: 12-December 12

Re: How to create a flexible web page?

Posted 04 May 2013 - 05:32 AM

What HTML and CSS tutorials are you studying?
Was This Post Helpful? 0
  • +
  • -

#4 brerallia  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 146
  • Joined: 21-January 13

Re: How to create a flexible web page?

Posted 04 May 2013 - 07:36 PM

View Postandrewsw, on 04 May 2013 - 05:32 AM, said:

What HTML and CSS tutorials are you studying?


i think its html5 and css3 im doing.. does it matter? if it matters then please tell me what i need to do or something i can compare.?
Was This Post Helpful? 0
  • +
  • -

#5 brerallia  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 146
  • Joined: 21-January 13

Re: How to create a flexible web page?

Posted 04 May 2013 - 09:00 PM

View Postgeohhot, on 04 May 2013 - 05:14 AM, said:

Use %'s instead of pixels? I mean if you're about to set width of any element set it with %. i.e.
#login {
    width: 25%;
}


I think this may help in some cases. But that may not work good for text sizes I think.


Its still distorted..

This post has been edited by brerallia: 04 May 2013 - 09:04 PM

Was This Post Helpful? 0
  • +
  • -

#6 megabit  Icon User is offline

  • D.I.C Head

Reputation: 17
  • View blog
  • Posts: 79
  • Joined: 03-May 13

Re: How to create a flexible web page?

Posted 05 May 2013 - 08:20 PM

Hello.
When setting the width of div I like to have one container div for the whole page, and then use smaller divs and resize them in comparison to the container div.

Have a look at http://www.w3schools...html_layout.asp in regards to layouts and using divs to position a page. Pull apart the template and have a play with it. You can move all styling from that template to your CSS for ease of use.

Example of what I mean.

<html>
 <body>
  <div id="container'>

   <div id="heading">
    <h1>This is heading</h1>
   </div>

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



In your CSS

#container{
width: 100%;
}

#heading{
width: 50%;
background-color: green;
margin-left: 25%;
margin-right: 25%;



This will scale with any browser or screen size.

Also make sure to link the css to the html.

This post has been edited by Dormilich: 08 May 2013 - 05:06 AM

Was This Post Helpful? 0
  • +
  • -

#7 brerallia  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 146
  • Joined: 21-January 13

Re: How to create a flexible web page?

Posted 08 May 2013 - 02:00 AM

ohh!!! so that means when i view my web page in any other monitor sizes, the div heading will not be distorted because of the div container?
the div container will be responsible for sizing the width? like that?

This post has been edited by Dormilich: 08 May 2013 - 05:06 AM

Was This Post Helpful? 0
  • +
  • -

#8 Atli  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 3710
  • View blog
  • Posts: 5,958
  • Joined: 08-June 10

Re: How to create a flexible web page?

Posted 08 May 2013 - 11:26 AM

Actually, no. Not the way megabit did it, at least. Block elements, like <div> and <body> default to 100% of the width of their parent elements. So doing
<body>
    <div style="width: 100%;">
        <h1>The header</h1>
    </div>
</body>


Is identical to:
<body>
    <h1>The header</h1>
</body>


In both cases, the <h1> element will stretch the full width of the page.

Using a container element only really makes sense if you are planing to force a width smaller (or larger) than the page size. Like:
<body>
    <div style="width: 900px; margin: 0 auto;">
        <h1>The header</h1>
    </div>
</body>


This will restrict the contents of the <div> to 900px width, no matter how large the screen size is.

Correctly positioning things for multiple screen sizes can be tricky. For PC and Laptop screens, you can usually get away with using the above technique. Around 1000px width is a good starting point. - By doing this you are giving yourself a base with an absolute width, which simplifies all positioning. If you are planing on doing more "dynamic" scaling of things, based on the screen size, you really need to understand the box model a lot better; know when to use absolute and relative positioning, and the difference between how each of the units of measurement work. There aren't complex concepts, but can take a lot of practice to get right. It's an art :)
Was This Post Helpful? 1
  • +
  • -

#9 noahwilson  Icon User is offline

  • New D.I.C Head

Reputation: -8
  • View blog
  • Posts: 26
  • Joined: 06-May 13

Re: How to create a flexible web page?

Posted 09 May 2013 - 03:06 AM

i think you need css and js code for flexibility.
Was This Post Helpful? 0
  • +
  • -

#10 brerallia  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 146
  • Joined: 21-January 13

Re: How to create a flexible web page?

Posted 09 May 2013 - 08:08 PM

View PostAtli, on 08 May 2013 - 11:26 AM, said:

[snip]

Correctly positioning things for multiple screen sizes can be tricky. For PC and Laptop screens, you can usually get away with using the above technique. Around 1000px width is a good starting point. - By doing this you are giving yourself a base with an absolute width, which simplifies all positioning. If you are planing on doing more "dynamic" scaling of things, based on the screen size, you really need to understand the box model a lot better; know when to use absolute and relative positioning, and the difference between how each of the units of measurement work. There aren't complex concepts, but can take a lot of practice to get right. It's an art :)/>/>


so does that mean.. it wont function the way i want it to be?
there are two div in my page... they are placed side by side... the width of the other one is about 350 px and the other one is larger.. but it has a margin.. on the outside... on both side... so when i open my web page in other monitor, the two div's override... you know like overlaps? so it isnt function-able and it isnt readable..

View Postnoahwilson, on 09 May 2013 - 03:06 AM, said:

i think you need css and js code for flexibility.


that's it... what i want to hear... i already have a css in my web page but i dont know how to do flexibility in my page using java script.... i dont know java script...

This post has been edited by Dormilich: 14 May 2013 - 02:19 AM

Was This Post Helpful? 0
  • +
  • -

#11 Atli  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 3710
  • View blog
  • Posts: 5,958
  • Joined: 08-June 10

Re: How to create a flexible web page?

Posted 10 May 2013 - 07:33 AM

View Postnoahwilson, on 09 May 2013 - 03:06 AM, said:

i think you need css and js code for flexibility.

You'll obviously need CSS for styling, but whether or not you'll need Javascript depends on what you mean by "flexibility".

View Postbrerallia, on 10 May 2013 - 03:08 AM, said:

so does that mean.. it wont function the way i want it to be?
there are two div in my page... they are placed side by side... the width of the other one is about 350 px and the other one is larger.. but it has a margin.. on the outside... on both side... so when i open my web page in other monitor, the two div's override... you know like overlaps? so it isnt function-able and it isnt readable..

It can function the way you want, but it's not going to until you understand how the box model works. There are a number of different ways to position elements using CSS, and the method I showed you before is the simplest one to use.

If you use that method, you set up a "container" div with a fixed with of around, say, 1000px. Then inside that div you put your two side-by-side divs, giving each of them a fixed width (350px and 650xp, approx.), and put a float: left; on them both. That will position them side by side inside the container div.

A slight modification of that can let you scale the two divs across the whole screen, by removing the container div and using 35% and 65% instead of the pixel widths, but depending on what will be inside those two divs, that can be harder to manage. - Flexible layouts are harder to manage, which is why you should have a greater understanding of the box model before you attempt them.
Was This Post Helpful? 1
  • +
  • -

#12 brerallia  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 146
  • Joined: 21-January 13

Re: How to create a flexible web page?

Posted 11 May 2013 - 04:30 AM

Okay...so thank you for spending your time trying for me to understand.. i appreciate it.. i will try the method you gave me and i will comment back to tell you if it works or not.. anyway, i will give you a thumbs up for your reputation.. thank you again... you are an expert programmer..

This post has been edited by Atli: 11 May 2013 - 09:03 PM
Reason for edit:: Removed unnecessary quote.

Was This Post Helpful? 0
  • +
  • -

#13 brerallia  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 146
  • Joined: 21-January 13

Re: How to create a flexible web page?

Posted 11 May 2013 - 07:08 PM

hey... i tried to use the technique you gave me... it works... when i open my web page to other monitor the header is not distorted.... but i have another question... i saw a website that has a header which is very long but when i open the website to another browser the long header will be an abbreviation only... is it java script?

This post has been edited by Atli: 11 May 2013 - 09:03 PM
Reason for edit:: Removed unnecessary quote.

Was This Post Helpful? 0
  • +
  • -

#14 Atli  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 3710
  • View blog
  • Posts: 5,958
  • Joined: 08-June 10

Re: How to create a flexible web page?

Posted 11 May 2013 - 09:05 PM

Could be Javascript, or it could be CSS. Using CSS media queries, you can create different styles based on various different criteria, like screen size. It's what we call "responsive design". Worth looking up if you are interested in developing for mobile platforms.
Was This Post Helpful? 0
  • +
  • -

#15 brerallia  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 146
  • Joined: 21-January 13

Re: How to create a flexible web page?

Posted 13 May 2013 - 11:19 PM

so ill try to use the media queries... which is hard to develop? the java script or the css media queries?

This post has been edited by Dormilich: 14 May 2013 - 02:18 AM

Was This Post Helpful? 0
  • +
  • -

  • (2 Pages)
  • +
  • 1
  • 2