^^So this boys no sabi css and they want to jump to rwd? Hmn. .

*dhtml:
^^So this boys no sabi css and they want to jump to rwd? Hmn. .

Let's behave maturely and allow this tutorial follow smoothly.

BOYZ feel free to ask ur Questions one day u will become MEN.


Thumbs up Gplus.

Sooo is me that am not acting maturely? Abeg waka pass jor small boy like you, awaiting G-plus next post. . .

@Dhtml

Pls Don't Derail this Thread.. Newbies have rights to ask questions..

@G+

Nice Tuts..

I apologize for thinking i am derailing the thread (G-plus is still my oga in layout and css mind-you), i was trying to be as silent as possible, because i am learnin on this thread to.
Lets keep it quiet here, thanks mister class-captain, i will return to the backseat quietly. .

GraphicsPlus: ^Ok. The class of .noRight cannot work elsewhere unless u place it under class of .our_process and the class of .footer_details. The class of noRight is simply overwriting something, which is margin-right given to the above two divs. In css, the second styling is more important than the first except on few occasions. So the last always overwrites the first.

I wil explain the css styling line by line before we go on with rwd proper.

OK got it! Carry on....

Ok. Let's continue. Here, I will try to explain the css styling line by line.

body{
margin:0;
padding:0;
font-family:sans-serif;
}

Nothing much is happening here. I just stripped the body its margin and padding. This is important since we want the nav and footer to stretch from the left to the right of the entire body. Then we set the font family to sans-serif because serif is the deafult font family.


.clear{clear:both}

Clear:both will help us to clear the parents of all our floated elements. We created an empty div with the class name of clear. In css, we have clear:left, clear:right and clear:both. Clear left is used when you have floated elements only to the left. Same with when you have floated to right, you use clear right. But in our case, we floated to both left and right, so we will use clear both.

header, nav{
width:100%;
display:block
}

Here we set the header and nav to 100% and display them block because they are html5 elements and in order for older browsers not to display them as inline, we set them to block.

nav{
background-color:#003366;
}

Here we set that blue color to the nav.

.nav{
width:1000px;
margin:0 auto;
padding:10px 0;
}

This is the div class of nav that is a child to the html5 tag of nav. We set the width to 1000px. This is the width we will be using throughout the design. It's our base width. As long as we will go responsive, it doesnt matter. We can even start with 1200px or 1400px. But if you know you will not go responsive, it's always good to start with maximum of 960px. We set the margin to 0 auto in order to center it. We gave it a top and bottom padding of 10px and no padding to the left and right. Remember that if you give padding to the left or right, the width will increase.

.logo{
display:block;
float:left;
}

Our logo is just an anchor tag. By default, anchor tag is an inline element. So here, we set it to block and we floated it left.

.nav ul{
float:right;
list-style:none;
margin:10px 0 0;
padding:0;
}

Here, we floated the ul to right and applied other styling stuff to it.

.nav li{
display:inline-block;
margin:0 0 0 10px;
}

Here we displayed the li to inline-block. This will make it to be on a single line. You can also choose to display it inline. I gave it margin-left of 10px in order to give space between the lists.

.nav li a{
text-decoration:none;
color:#fff;
text-transform:uppercase
}


.nav li a:hover{color:#f3fc07}

.nav li .active{
color:#f3fc07;
font-weight:bold;
}

Here, we applied some basic styling to the main navigation anchor links, its hover and the active link.

.header{
width:1000px;
margin:50px auto;
}

Again, we set the header to the width of 1000px and centered it by giving it margin of auto left and right and 50px top and bottom.

.main{
width:1000px;
margin:0 auto;
}

Same here. We applied 1000px width to the div class of main and centered it.


.process{
width:1000px;
}

.process h1{
font-weight:normal;
text-align:center;
margin:50px 0;
}

.process .bold{font-weight:bold}

.our_process{
width:300px;
float:left;
margin:0 50px 0 0;
text-align:center;
}

This is the div that is carrying the three columns of Design, Develop and Deploy. We gave width of 300px to each. Now, 300 times 3 will give us 900. Remaining 100 from our base width of 1000px. We now gave them margin-right of 50px. They have three right sides. So 50 times 3 is 150 plus 900 will be 1050. This will be more than our base width of 1000. So we have to get rid of one of the 50. So I gave a class name of noRight to the third one so that we can set it to margin-right of zero.

.section{
width:1000px;
margin:50px 0 0;
}

This is normal. Just setting it to 1000px and giving it a margin-top of 50px.

.article{
width:660px;
float:left;
margin:0 50px 0 0;
padding:20px;
background:#003366;
color:#fff;
}

This is the big div at the left. So we gave it 700px width. But since padding increases width of an element, we minused 40px from the width and now gave it width of 660px which is 700px in actual fact. Remember that top and bottom dont count in terms of width calculations. We floated it left and gave it margin right of 50px. Now, remember that its parent width is 1000px. So we now have 700px plus 50px, which is 750px. Remaining 250px.

.article img{
float:left;
margin:0 20px 0 0;
border:1px solid #f3fc07;
padding:5px 5px 0 0;
}

This is normal. We floated the image inside the div class of article to left in order to force the paragraph after it to wrap around it. We gave it margin-right so that there will be a space between it and the paragraph. We also gave it a border, but the border was touching too much on the image, so we gave it some padding. But we dont want the bottom padding so that the hand image will not appear to be hanging, and the left side of the image has enough gap, so we only gave padding to top and right.

.article h1{
margin-top:0;
color:#f3fc07
}

.sidebar{
width:250px;
float:right;
}

Remember the remaining 250px from the div class of article? We now gave it to the div class o sidebar and floated it right.

.clients{
width:930px;
padding:35px;
border-bottom:1px solid #ddd
}

Here we have 6 images inside the div class of clients. Each image is 155px in width. So 155 times 6 is 930px. Remember that our base width is 1000px. So we now have 70px left. So we gave it padding of 35px, which is 70px left to right which will now make the width of the div 1000px.

.clients img{float:left}

Whereas image is an inline element, which means the six images will line up on one line naturally, but we needed to float the images so to get rid of any default space that will not allow them to accept their parent width of 930px. Without floating them, the images will not agree to be on one line.

#testimonial{
width:1000px;
margin:50px auto;
}

This is normal. We just gave the div a width of 1000px and centered it left and rght with margin top and bottom of 50px.

#testimonial h2, .clients h2{
margin-top:0;
text-align:center;
letter-spacing:25px;
font-weight:normal
}

This is basic. I wanted the h2 tag of div id of testimonial and the h2 of the div class of clients to be same.

.testimonial{
width:475px;
float:left;
margin:0 50px 0 0;
}

This div is two. We have two testimonials. So we gave each of them a width of 475px, which when multiplied into two, we have 950px. Remaining 50px. Then we gave them margin-right of 50px which when multiplied will become 100px plus 950px equals to 1050px. So we used the class name of noRight to get rid of the margin-right on the last div of testimonial.

.testimonial img{
float:left;
margin-right:10px
}

Here we floated the image inside the div class of testimonial to left.

.testimonial p{
float:right;
width:365px;
margin:0;
}

Here we also floated the paragraph inside the div class of testimonial to right. Ordinarily, it suppose to wrap around the image, but we dont want that, so we floated it to the right. We want both of them to sit side by side.

.testimonial .testifier{font-weight:bold}
.testimonial .company{font-style:italic}

#footer{
width:100%;
background:#003366;
}

This is just normal styling. We gave the footer width of 100% and a dark blue background.

.footer{
width:1000px;
margin:0 auto;
padding:10px 0;
}

This is a child of the div id of footer. This will now carry all the stuff inside the footer. It's not always good to use a div with a width of 100% as a direct parent. This is necessary because a div with a width of 100% will ignore margin:0 auto when applied to it.

.footer_details{
width:300px;
float:left;
margin:0 50px 20px 0;
color:#f3fc07;
}

Here, what happened when we styled the three div of our_process also applied here.

.noRight{margin-right:0}

So this div class of noRight must come after the divs class of our_process, testimonial and footer_details for it to do its work. In css, the last overwrites the first.

.footer_details h2{
color:#fff;
margin:0 0 5px;
font-weight:normal
}

.footer_details p{margin:0}

.copyright{
clear:left;
padding:20px 0 0;
border-top:1px solid white
}

Since this div class of copyright is following div class of footer_details, we used it to clear the float so that it will not attempt wrapping the divs.

.copyright p{
float:left;
color:#fff;
font-size:12px;
margin:0
}

I floated the paragraph inside the div class of copyright to left.

.social{
float:right;
}

And floated the div carrying the social icons to right.

This is it. We now have a good looking web page. But if you try resizing your browser or try viewing it online with mobile device, you will be greeted with a horizontal scrollbar which shows that it's not responsive. But making it to be responsive is a piece of cake. Next, we will dive into RWD proper and show us how we can make the web page to display perfectly on every mobile device no matter how small the device is. I will teach us the concept behind RWD. Fortunately for us, the concept is pretty simple.

Cheers.

Astute and very clear too. Gracias

Just as we await RWD being applied on the project, I viewed the project (www.ctrlshiftstudios.com/RWD) on ma IPAD and everything was just screwed and messed up website!
Now, let’s see how RWD will fix that up!

For those wey no get Iphone, IpAD, or SmartPhones you can try viewing the project (www.ctrlshiftstudios.com/RWD) using these online IPhone and IPAD testers….
iphonetester.com
ipadpeek.com
quirktools.com/screenfly

So you will appreciate RWD latter!

Mister Joomla, we have not reached the end of the class, why are you jumping the gun nao?

*dhtml:
Mister Joomla, we have not reached the end of the class, why are you jumping the gun nao?

He meant no harm, just trying to say the site is not yet responsive and awaits to see it when its fully responsive.

I think he just want to make it clear to those who might think Gplus is done.

Oh i see, that is true, g plus started from a non-responsive layout and is gradually making it responsive step by step (from my own understanding)

@adewasco2k,
You got my message clearly! Loading the url on a mobile device, it appear toooooooo wide and some layouts crossing/overlapping each other.

Waiting for G+, to start applying RWD so all that will be fixed up on all devices including ma "Tecno Phanthom IPad"

So there is a device called that? Na wa o, rwd people get work to do o.
Chai, the rwd site must work on all devices including china devices?

RWD oro ta n balo......

'trollin

I have written the codes in my system,so how do i combine css and html? Cos i wrote the code differently .css and .html extension.

emmyw: I have written the codes in my system,so how do i combine css and html? Cos i wrote the code differently .css and .html extension.

All you need is already in the head tag:

<link rel="stylesheet" href="css/style.css"/>


This is linking to the css file irrespective of where is is, in the above your index.html will be in a folder which has another folder name css then your css file named style.css will be inside.

I think you should already know this if not please go learn html and css basics first.

men you guys are way above me, please advice me, am a novice in computer programming, which programme or how can i start my programming career, because i wanna tow that line please.

adewasco2k:

All you need is already in the head tag:

<link rel="stylesheet" href="css/style.css"/>


This is linking to the css file irrespective of where is is, in the above your index.html will be in a folder which has another folder name css then your css file named style.css will be inside.

I think you should already know this if not please go learn html and css basics first.

Ok thanks bro,i have seen it

Who knows the codes of gurusreeps(dot)com,i want to design the site exaltly.please reply asap.

Ok. Let's go on and finish this tutorial. Before we dive into RWD, I want us to remember that our base web page width is 1000px. This means that devices with width of 1000px and above will display our web page perfectly. Our problem now is how to accommodate devices with width of 999px and below. To deal with that, we are going to comfortably do it with css3 @media query.

Let's get started. First, we will add the meta viewport below to the head of our html document.

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>

This is important because most mobile browsers scale html pages to a wide viewport width so it fits on the screen. We use the viewport meta tag to reset this. The viewport tag above tells the browser to use the device width as the viewport width and disable the initial scale.

After adding the viewport meta tag to the head, we now go back to our css file. I want you to copy all the css codes to paste them on another blank page of your text editor. This is how I work so I will not have to scroll up and down checking the codes. Paste the codes in another tab and dont save it. After applying the @media query, we will then highlight the codes and cut and then go back and paste them inside our style.css.

Let me at this point tell us the whole concept of media query. CSS @media query is like writing a conditional statement. It's like writing if yes, do this thing, else do another thing. Again, media query codes come at the bottom of our main styling. This is important because what media query is doing is actually overwriting the main styling to serve other devices.

In applying rwd to this web page, we will be dealing with these device widths:
0 to 480px
481px to 800px
801px to 1050px (we will add extra 50px to give it good breathing space)

So we will be dealing with these three sets of @media query.

Let's start with 0 to 480px.
At the very to of the stylesheet we copied and pasted on a new tab, let's write this:

@media all and (max-width:480px){ cut the stylesheet again and paste it inside this curly bracket}

Now, we will start the manipulations.
First, we need to be aware that the things that are in our main stylesheet which we will like to retain, should be deleted. This means that what we dont need to restyle should be deleted.

For instance, we have no business with the body tag and other stuff like background color that we dont need to change, and so we will just delete them from our media query to minimize file weight.

Again, @media query works with percentage instead of pixel. Pixel is rigid while percentage is flexible.

So in dealing with the max-width of 480px, we have to overwrite the div we floated to left and right. You know in css, we have float of left, right and none. We will be using float:none to overwrite the float:left or float:right we did earlier.

Before we go on, I want you to add this line of code: img{max-width:100%}

This is important. It will make the images to scale proportionally. This means that the images will never be more than their parent containers. Therefore, our header image that is 1000px in width will be forced to display normally at the screen width of 480px.

We will start from top and walk our way down. We will begin from .nav
Those ones that come before the class of nav dont have anything that will disturb us. So we will retain their styling as it is in the main styling above and to tell css that we are comfortable with the way they are, we will not touch them. This is why we deleted them from our @media query max-width of 480px.

So let's start from the div class of nav. I will explain the codes line by line.

@media all and (max-width:480px){
.nav{
width:90%;
margin:0 auto;
padding:5%;
text-align:center;
}

The div class of nav was 1000px. Now it's 90% plus padding of 5% on the left and right, which makes it 100%. Text-align of center will center every inline element inside it.


.logo{
display:inline-block;
float:none;
margin:10px 0;
}

Logo was displayed block before. Now we display it inline-block. And instead of floating it left, we floated it none. We set display to inline-block so that the logo will be centered by the text-align center on the div class of nav. A block element cannot be centered by text-align center.

.nav ul{
float:none;
list-style:none;
margin:10px 0 0;
padding:0;
}

He we reversed the floated ul to none. We dont want it to float again to the right.

.nav li{
display:block;
margin:0 0 0 10px;
}

Her we set the li to display block. We did this so that the list will be vertical instead of horizontal.


.nav li a{
text-decoration:none;
color:#003366;
text-transform:uppercase;
display:block;
background:#f3fc07;
padding:10px;
margin:5px 0 0;
-webkit-transition:all .5s ease-out;
-moz-transition:all .5s ease-out;
transition:all .5s ease-out;
}

We also set the navigation anchor links to display block. This will make the entire background of the anchor link to be a link. This means you dont have to hover the link text for the link to have effect. I also added transition effect to the link.

.nav li a:hover{
color:#003366;
background:#fff;
}

.nav li .active{
color:#003366;
background:#fff;
font-weight:bold;
}


.header{
width:90%;
padding:5%;
margin:auto;
}

Our div class of header is now 90% with 5% padding on the left and right. This means the div is now 100%.

.main{
width:100%;
margin:0 auto;
}

Same thing is going on here.

.process{
width:90%;
padding:0 5%
}

The same thing is also here.

.process h1{
font-weight:normal;
text-align:center;
margin:30px 0 0;
}

Nothing much here. I just reduced the margin-top of 50px to 30px.


.our_process{
width:100%;
float:none;
margin:0 50px 0 0;
text-align:center;
}

This div class of our_process had 300pc width and it was floated left. Now we set the width to 100% and we floated it none. We simply want the three divs to be vertical instead of horizontal.

.our_process p{font-size:1.2em}

We increased the paragraph font size.

.section{
width:100%;
margin:50px 0 0;
}

We changed the 1000px to 100%.

.article{
width:90%;
float:none;
margin:0;
padding:5%;
background:#003366;
color:#fff;
text-align:center;
}

This div class of article was 660px in width and was floated left. Now, we dont want it to be floated again. So we float it none. And we made the width 100%. We also added text-align center so that everything inside it will be centered.

.article p{text-align:left}

Since we dont want the paragraph inside the div class of article to be centered, we overwrite the text-align center above and set it to text-align left.



.article img{
float:none;
margin:0;
border:1px solid #f3fc07;
padding:5px 5px 0 0;
}

The image inside the div class of article was floated left and the paragraph wrapped around it. Now, we say no. We floated it none and removed the earlier margin-right.

.article h1{
margin-top:0;
color:#f3fc07
}

.sidebar{
width:90%;
float:none;
padding:5%;
text-align:center;
}

This div class of sidebar was 250px in width. Now, we set it to 100%. And centered the contents.

.sidebar p{text-align:left;}

Here, we dont want the paragraph to be centered.

.clients{
width:90%;
padding:5%;
text-align:center;
border-bottom:1px solid #ddd;
}

From 1000px, we now set this div class of clients to 100% and centered the contents.

.clients img{
float:none;
display:inline-block;
margin:10px 0 0
}

We floated the images inside div class of clients. Now, we floated it none and displayed it inline-block. This will help the images to change their arragement automatically.

#testimonial{
width:90%;
padding:5%;
margin:0 auto;
}

Here we set the div id of testimonial to 100%.

#testimonial h2, .clients h2{
margin-top:0;
text-align:center;
letter-spacing:0;
font-weight:normal
}

.testimonial{
width:100%;
float:none;
margin:0 0 30px;
text-align:center;
}

We floated the div class of testimonial. Now we float it none and we gave it a width of 100% and centered the contents.

.testimonial img{
float:none;
margin:0 0 10px 0
}

We initially floated the image. We removed the margin-right of 10px and gave it margin-bottom of 10px.

.testimonial p{
float:none;
width:100%;
margin:0;
text-align:left;
}

We also reversed the floated paragraph inside the div class of testimonial. We set the width to 100% so that it will be flexible. We dont want it to be centered so we aligned it to left.


We deleted the div id of footer because we dont have any issue with its styling.

.footer{
width:90%;
margin:0 auto;
padding:5%;
}


Here, we set the width of the div class of footer to 100%.

.footer_details{
width:100%;
float:none;
color:#f3fc07;
margin:0 0 30px;
}

Here, we reversed the floated div class of footer_details. And instead of the 300px width, we now gave it 100% width.

.footer_details h2{
color:#fff;
margin:0 0 5px;
font-weight:normal
}

.footer_details p{margin:0}

.copyright{
padding:20px 0 0;
border-top:1px solid white;
text-align:center;
}

I added text-align center so that the contents of the div class of copyright will be centered.

.copyright p{
float:none;
color:#fff;
font-size:12px;
margin:0 0 10px;
}

The paragraph was floated. Now we say no, so we floated it to none.

.social{
float:none;
display:inline-block
}

The same here. We floated it to none instead of right. Because a div is a block element and cannot be centered by text-align, and since we wanted the div class of social to obey the text-align center we applied on its parent, we now displayed it inline-block so that it will agree to be centered.

img{max-width:100%}

This is very important. It will force all the images to resize dynamically and proportionally without growing bigger than its parent container.

}

Download the @media query codes for 480px here: www.ctrlshiftstudios.com/query.txt

If you download the codes and add them under the last code in your style.css and refresh. If you view it with a mobile device from 480px down or you resize your desktop browser to 480px, you will get this layout as shown on the image below.



I will see you soonest. Please study the codes and try messing around with the whole thing.
Cheers.

^nice

emmyw: Who knows the codes of gurusreeps(dot)com,i want to design the site exaltly.please reply asap.

can someone answer me.

emmyw: can someone answer me.

As much as Ur Question derails the Thread, I'll like to answer u before u wreck further Havoc..

The site is an SMF site.. Google about Simple Machines Forum.. You Can't code that kinda ish cuz u gotta be advanced.. It only needs a Few Tweaking for you to start it running..

Djangocode:

As much as Ur Question derails the Thread, I'll like to answer u before u wreck further Havoc..

The site is an SMF site.. Google about Simple Machines Forum.. You Can't code that kinda ish cuz u gotta be advanced.. It only needs a Few Tweaking for you to start it running..

how do i set up site like that exaltly?

emmyw: how do i set up site like that exaltly?

He already told you that its running on smf.so if you can edit php scripts good.then you can edit them to your choice

Today, we conclude our tutorial on designing responsive web page from scratch. I have done the @media query that will take care of 481px to 800px and 801px to 1050px. The web page is completely responsive right now. You can view it with any mobile device and it will display perfectly without a horizontal scrollbar. Basically, we used max-width of 100% on all images. We used percentage instead of pixel for the width and we floated to none some of the elements we floated to either left and right initially. If you look at the @media query codes for 801px to 1050px, you will see that we maintained some of the floated divs, but we changed the width from pixel to percentage so that it will be fluid.

Download the @media query for 481px to 800px and 801px to 1050px here: http://www.ctrlshiftstudios.com/query2.txt

Paste it under the @media query of max-width of 480px we did previously. Save and refresh your browser. Then go ahead to resize your browser and see how responsive the web page has become.

Go on and study the codes and try playing around with the whole stuff.

You can see how the web page rendered on different mobile devices here: http://www.responsinator.com/?url=http%3A%2F%2Fctrlshiftstudios.com%2FR-W-D%2F

Or you can view the responsive web page directly here: http://www.ctrlshiftstudios.com/R-W-D

Cheers.

Thanks,What next?

emmyw: Thanks,What next?

Suis fini

emmyw: Thanks,What next?

newbie guys I guess
Css and html time. Is there a thread for those two?

NnamdiN: newbie guys I guess
Css and html time. Is there a thread for those two?

sometimes people will be looking for were they will exchange words with people,well NnamdiN,you can visit my forum below,and if you want me to design a site practically,i can do it,but you have to know that you likes people that brag and boast,i'm sure if they give you pc,you can't design a site without seeking for nairaland help.watch the way you talk,never talk too much cos you are a man.and lets this argument stop,i don't want it anymore.