How to make this Layout Responsive CSS?

HTML & CSS
1

Hi there

this is my jsfiddle.net
http://jsfiddle.net/vngx/phbmf3zd/

What I want is
1)There is a Id section topLeft I want that section should always be inside of “mainpara” when width or height of a browser windows will increase or decrease then that should also change

2)Like When I contract Height and width of browser window then List Items(under “header” section) are also getting out or main div I also want them to be align inside the “mainpara” div

How do I acheive this?

Thanks

2

Is this any nearer to your requirements? It is responsive.

<?php 
$title="Title goes here";//

?><!doctype html>
<html lang="en-us">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type='text/css'> 
html {height: 100%;}
body {height:100%; background-color: olive;}
#mainpara {width:70%; height:590px; margin:0 auto; padding:0; border-radius:10px;
           background-color: gray;}

#header,
#topleft      {list-style:none; text-align:center;}
#header  li a,
#topleft li a {text-decoration:none; padding:0 1em;}

#topleft      {float:left;} 
              
#topleft li   {float:left; margin:0 1em 0 0; 
               background-color:lightgray; 
              }  
#header       {display:inline-block;}
#header li    {display: inline-block; margin: 0% 20px 5px 0;	font-size: 120%;
               background-color: lime;}
#header  li a:hover {background-color: red;}
</style>
<title> <?=$title;?> </title>
</head>
<body>

<div id="mainpara">
	<ul id="topleft">
	    <li><a href="#">Login</a></li>
	    <li><a href="html/signup.html">SignUp</a></li>
 	</ul>
	
	<ul id="header" >
		  <li><a href="#">About Us</a></li>
		  <li><a href="#">Services</a></li>
		  <li><a href="#">Courses</a></li>
		  <li><a href="#">Contact Us</a></li>
	</ul>
</div>
</body>
</html>

Notes:

  1. I think it is best to rarely use width and to let the items float.
  2. notice how I grouped the list-style:none;
  3. dispensed with a couple of divs and applied the IDs to the block level un-ordered lists.
  4. used padding, margin and text-align:center
3

@John_Betong

This is cool,100%
that I was looking for
Thanks

one question you have used in your code
“padding:0 1em;”
“margin: 0% 20px 5px 0;”
“margin:0 1em 0 0;”

can you explain there general use and purpose in this code?

4

Glad I was able to help.

@vngx
one question you have used in your code
“padding:0 1em;”
“margin: 0% 20px 5px 0;”
“margin:0 1em 0 0;”

can you explain there general use and purpose in this code?

padding:0 1em;

margin: 0% 20px 5px 0;

margin:0 1em 0 0;

They are shortcut and well worth remembering and using.

Case: One parameter

**Shortcut**
   padding: 10px;
**Verbose**
   padding-top:    10px; 
   padding-left:   10px; 
   padding-bottom: 10px; 
   padding-right:  10px;

Case: Two parameters

**Shortcut**
   padding: 10px 20px; 
**Verbose**
   padding-top:    10px; 
   padding-left:   20px; 
   padding-bottom: 10px; 
   padding-right : 20px;

Case: Three parameters

**Shortcut**
   padding: 10px 20px 30px; 
**Verbose**
   padding-top:    10px; 
   padding-left:   20px; 
   padding-bottom: 30px; 
   padding-right : 20px;

Case: Four parameters

**Shortcut**
   padding: 10px 20px 30px 40px; 
**Verbose**
   padding-top:    10px; 
   padding-left:   20px; 
   padding-bottom: 30px; 
   padding-right : 40px;
5

Your case 4 is incorrect John. It’s top/right/bottom/left.

You can simply remember it like a clock.

2 Likes
6

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.