Welcome, Guest: Register On Nairaland / LOGIN! / Trending / Recent / New
Stats: 3,158,442 members, 7,836,775 topics. Date: Wednesday, 22 May 2024 at 12:31 PM

Css Help - Webmasters - Nairaland

Nairaland Forum / Science/Technology / Webmasters / Css Help (1223 Views)

Write HTML And CSS Codes On Android Devices / How To: Create A Simple Hover Button With Html And Css / How Is My **Free** Css Ebook? (2) (3) (4)

(1) (Reply) (Go Down)

Css Help by learnerboy: 2:12pm On Feb 05, 2011
Hello fellow Nairaland memebers, i am new to web designing and the truth is that i am still learning,i have successfully designed a website but my problem is that i want it to open in all resolutions so that when i finally host it,people with different resolutions can open it without it shifting to the right leaving enough blank space on the left,i know i am not a professional yet but it does not mean that i should design an unprofessional website. i tried using a css code i saw online but it is still the same, the moment i change my screen resolution to 800 x 600 it will no longer fit on the screen.Please please help a learning boy,abeg my naija people help me, i don google and i don try most of the stuffs i saw in forums to no avail,but i believe that my fellow naija people go fit help me,so i am back home to ask for ur favors.
Re: Css Help by utimatedes(m): 3:16pm On Feb 05, 2011
To achieve that, you make the wide to be 100%
this means that when someone is viewing from a smaller screen or any resolution, it will fit to the screen.

When using this method, you will have to make sure all the wide of your div, table, layout are in % instead of pixel.

Sample CSS 

<style type="text/css">
.header{width:100%;}
.bodySection{width:100%;}
.sidebar{width:20%;}
.mainContent{width:75%;}
</style>


Sample HTML Code

<html>
<head><title>Fit my website to any screen resolution</title></title>
<body>
      <div class="header>Head content including the logo goes here</div>
       <div class="bodySection">
            <div class="sidebar">sidebar content goes here</div>
             <div class="mainContent">Main content goes here</div>
       </div>
</body>
</html>


If you look at the css, you will see that I give sidebar 20% and mainContent 75%. The remaining 5% should be for margins between the side of the div if you create room for margin.

You have to calculate the wide of all your div well if not, there will overflow i.e shoot out

You can also add overflow:hidden to the mainContent css to prevent overflow

If you are using table as your layout, you will make the wide to be 100%, and divide the TD to what ever wide you like in % instead of pixel

I hope this help.

If you need more help, don't hesitate to reply, others can also help
Re: Css Help by learnerboy: 4:49pm On Feb 05, 2011
thanks so so much, i will try it out later at night when i am sure of constant power supply,thank u very much for ur assistance so far. i said it that nairaland is far better than most of all these yankee forums.
Re: Css Help by utimatedes(m): 5:01pm On Feb 05, 2011
You are always welcome!
Re: Css Help by learnerboy: 11:17pm On Feb 05, 2011
so sorry, but am i to copy and paste the css code?
<style type="text/css">
.header{width:100%;}
.bodySection{width:100%;}
.sidebar{width:20%;}
.mainContent{width:75%;}
</style>

because i jus did but didn't get what i want, i guess that is jus a sample for me to follow, so for every AP Div that i use i should make the width 100%?
Re: Css Help by bug24(m): 11:43pm On Feb 05, 2011
Learnerboy, u be truueeee learner boy. ok, lemme contribute to this.

Usually your css starts with:

body {
width=100%;
}

This is might be the only place you will have to specify the 100% as other aspects of the site are going to be divided into numerous other parts based on what you planned the site out to be.


If you wish to have a left side and and right side on the site which means you have to float, you should have something like this:

#left-side {
width=30%;
}

#right-side {
width=60%;
}

(i;m only trying to further expantiate on what ultimedes gave you)
If you notice, 60 + 30 = 90
meanwhile we are headed to 100 (meaning 10 is missen) this missen 10 is the one Ultimedes said you need to use for margins. Margins in this case means the gaps between one DIV and the other so they dont all look clumsy.

i no no weda dis my grama make sense at all.

but the idea is, once you use % instead of the normal px, your entire layout fulls up the page and will be same on all resolutions.

Abeg, if this one no work, just start using containers and constrict your layouts to 900px.

(i don too talk grama sef)
Re: Css Help by learnerboy: 10:28am On Feb 06, 2011
Chei, thank u oooooooooo,i don't know how to thank u, i think the best i can do is to thank u and utimatedes on facebook. i really understand better now, kai, thank u. Nairaland for life.

(1) (Reply)

Nigeria Adsense Payment Delayed / Help Uploading A Elgg Plugin / Live Lesson - Free Web Promotion & Digital Marketing Lesson For SMEs

(Go Up)

Sections: politics (1) business autos (1) jobs (1) career education (1) romance computers phones travel sports fashion health
religion celebs tv-movies music-radio literature webmasters programming techmarket

Links: (1) (2) (3) (4) (5) (6) (7) (8) (9) (10)

Nairaland - Copyright © 2005 - 2024 Oluwaseun Osewa. All rights reserved. See How To Advertise. 26
Disclaimer: Every Nairaland member is solely responsible for anything that he/she posts or uploads on Nairaland.