Translate

ads

Showing posts with label CSS. Show all posts
Showing posts with label CSS. Show all posts

9 Jul 2019

CSS | Layout – Horizontal & Vertical Align

CSS ,
CSS | Layout – Horizontal & Vertical Align

CSS | Layout – Horizontal & Vertical Align




The Layout in CSS is used to manage the flow of part within another part. It sets the position of part within the web content. The position of part are often set by using horizontal and vertical alignment. There are many ways to line the position of part that ar listed below:
 Using Position Property: Use position property to guaranteed to set the align left and right.




Syntax of css :






<!DOCTYPE html>
<html>
          <head>
                   <title>
                             CSS Layout
                   </title>
         
                   <style>
                             body{
                                      width: 500px;
                                      height: 150px;
                                      border: 3px solid green;
                             }
                             #content{
                                      position: absolute;
                             }
                   </style>
          </head>
         
          <body>
                   <div id="content">
                             <h1 style = "color:green;" >
                                      Sayed 360
                             </h1>
                            
                             <h2>CSS Layout</h2>
                   </div>
          </body>
</html>                                                                      


 Output of css



Using text align property: Use text-align property to line the horizontal alignment of an element. The text-align property may be set to left, right or center.


Syntax of css :

<!DOCTYPE html>
<html>
          <head>
                   <title>
                             CSS Layout
                   </title>
         
                   <style>
                             body{
                                      width: 500px;
                                      height: 150px;
                                      border: 3px solid green;
                             }
                             #content{
                                      text-align: center;
                             }
                   </style>
          </head>
         
          <body>
                   <div id="content">
                             <h1 style = "color:green;" >
                                      Sayed 360
                             </h1>
                                     
                             <h2>CSS Layout</h2>
                   </div>
          </body>
</html>                     

 Output of css
  
           
 Using float property: Use float property to line the alignment of part. The float price are often set to left or right  

   Syntax of css :
                   
<!DOCTYPE html>
<html>
          <head>
                   <title>
                             CSS Layout
                   </title>
         
                   <style>
                             body{
                                      width: 500px;
                                      height: 150px;
                                      border: 3px solid green;
                             }
                             #content{
                                      float: right;
                             }
                   </style>
          </head>
         
          <body>
                   <div id="content">
                             <h1 style = "color:green;" >
                                      sayed 360
                             </h1>
                            
                             <h2>CSS Layout</h2>
                   </div>
          </body>
</html>                                                   

  Output of css

Use padding property Horizontally: padding property is employed to line the part align to Horizontally by using left and right padding.
Syntax of css :


<!DOCTYPE html>
<html>
          <head>
                   <title>
                             CSS Layout
                   </title>
         
                   <style>
                             body{
                                      width: 500px;
                                      height: 150px;
                                      border: 3px solid green;
                             }
                             #content{
                                      padding: 0 100px;
                             }
                   </style>
          </head>
         
          <body>
                   <div id="content">
                             <h1 style = "color:green;" >
                                      Sayed 360
                             </h1>
                            
                             <h2>CSS Layout</h2>
                   </div>
          </body>
</html>                                         

 Output of css


Use padding property Vertically: padding property is employed to line the part align to Vertically by using prime and bottom padding.
Syntax of css :



<!DOCTYPE html>

<html>
          <head>
                   <title>
                             CSS Layout
                   </title>
                  
                   <style>
                             body{
                                      width: 500px;
                                      height: 150px;
                                      border: 3px solid green;
                             }
                             #content{
                                      padding: 15px 0;
                                      text-align: center;
                             }
                   </style>
          </head>
         
          <body>
                   <div id="content">
                             <h1 style = "color:green;" >
                                      Sayed 360
                             </h1>
                                     
                             <h2>CSS Layout</h2>
                   </div>
          </body>
</html>   

                                       

Output of css


Line height property: Line height is employed to line the alignment vertically.
Syntax of css :


<!DOCTYPE html>

<html>
          <head>
                   <title>
                             CSS Layout
                   </title>

                   <style>
                             body {
                                      width: 500px;
                                      height: 150px;
                                      border: 3px solid green;
                             }
                             #content {
                                      line-height: 40px;
                             }
                   </style>
          </head>
         
          <body>
                   <div id="content">
                             <h1 style = "color:green;" >
                                      Sayed 360
                             </h1>
                            
                             <h2>CSS Layout</h2>
                   </div>
          </body>
</html>                                         

Output of css








Read more »
By on - No comments:
Tags

27 Jun 2019

CSS Float

CSS , HTML
CSS Float

CSS Float



Float could be a CSS property written in CSS file or directly within the sort of an element. The float property defines the flow of content. Below ar the categories of floating properties


FLOAT TYPE
USAGE
float: left
Element foats on left side of the container
float: right
Element floats on right side of container
float: inherit
Element inherits floating property of it’s parent (div, table etc…)
float: none
Element is displayed as it is (Default).


 
<!DOCTYPE html> 
<html> 
<head> 
            <title>Float</title> 
</head> 
<body> 
<div class = "SIS" style = "font-size:40px; 
color:#006400; float:left;"> 
            Sayed 360 
</div> 
</body> 
</html>  
         
float:right


<!DOCTYPE html> 
<html> 
<head> 
            <title>Float</title> 
</head> 
<body> 
<div class = "SIS" style = "font-size:40px; 
color:#006400; float:right;"> 
            Sayed 360 
</div> 
</body> 
</html> 

folat:none

<!DOCTYPE html> 
<html> 
<head> 
<title>Float</title> 
</head> 
<body> 
<div class = "SIS" style = "font-size:40px; 
color:#006400; float:none;"> 
Sayed 360  
</div> 
</body> 
</html>
 
float:inherit

<!DOCTYPE html>
<html>
<head>
            <title>Float</title>
</head>
<body>
<div style="float:right">
            <div class = "SIS" style = "font-size:40px;
            color:#006400; float:inherit;">
                        Sayed 360
            </div>
</div>
</body>
</html>



Read more »
By on - No comments:
Tags ,

23 May 2019

Css elements

CSS ,
Css elements


Css elements



Every now and then we are facing problems with centering an element in a web page. is it in reality so difficult? it isn't always too tough to center an element. there so many specific methods of doing it.
One issue we need to recognize is that, which method is for which motive. once you apprehend the trouble, picking up the first-class method may be a lot less complicated.

So let us see some situation and speak the first-rate technique to obtain the intention.

1.    Horizontally

 Inline factors


We are able to easily center an inline detail within a block stage element like this:


// Aligning text in center
.center
{
 text-align: center;
}


  • Block level elements



We will center a block-degree element with the aid of giving it margin-left and margin-proper of car (which has a known targeted width):

// Aligning an element of defined length in center
// Remember to define the width of the element otherwise it
//will be full width and 'auto' will not work
.center
{
 margin: 0 auto;
 width: 200px;

}



More than one block level elements

If we've  or greater block-degree factors that want to be targeted horizontally in a row, it may be higher served making them a exceptional display kind display: inline-block;

.parent
{
// Aligning the child of this parent in center
text-align: center;
}
.child
{
// set the display of child elements
display: inline-block;
text-align: left;

}


2.Vertically


Inline elements

We are able to without problems middle an inline element inside a block stage element like this:

   // Set the display of the parent class as table

.parent

{

display: table;

height: 250px;

background: white;

width: 240px;

margin: 20px;

}


// Set the display of the child class as table-cell

.child

{

display: table-cell;

margin: 0;

background: black;

color: white;

padding: 20px;

border: 10px solid white;

vertical-align: middle;

}


Block level elements of known height

We can easily center an inline element within a block degree detail like this:


// Set the position of the parent as relaive to other 
.parent
{
position: relative;
}

// Set position of child as absolute in its parent class
// so that it can be placed anywhere in the parent class
.child
{
position: absolute;
top: 50%;
height: 100px;

/* responsible for padding and border
if not using box-sizing: border-box; */
margin-top: -50px;


}

Block level elements of unknown height

We are able to easily center an inline element inside a block stage detail like this:


// Set position of child as absolute in its parent class 
.parent
{
position: relative;
}

// Set top of the child 50% of viewport
// Translat the child by 50% of its height about
// negative y axis
.child
{
position: absolute;
top: 50%;

transform: translateY(-50%);

 }

3.  Both Horizontally & Vertically

Element with fixed height and width

The usage of negative margins same to 1/2 of that width and peak, once you’ve truely located it at 50% / 50% will center it

// Set postion of parent class as relative
.parent
{
position: relative;
}

// Set top and left of an element of
// known height as 50%
.child
{
width: 300px;
height: 100px;
padding: 20px;

position: absolute;
top: 50%;
left: 50%;

margin: -70px 0 0 -170px;


}

Element with unknown height and width

Whilst we don’t know the width or peak, we can use the remodel assets and a negative translate of fifty parcent  in both guidelines to middle:

// Set position of parent as relative to other
.parent
{
position: relative;
}

// Set top and left of an element of
// known height as 50%. Translate the
// element 50% of its height and width
// about negative x-axis and negative y-axis
.child
{
position: absolute;
top: 50%; //
left: 50%;
transform: translate(-50%, -50%);


}

Note: the ‘.’ operator is utilized in css to discover a css class. within the above examples, the class determine is used to fashion the parent detail and the elegance baby is used for the child detail.


Read more »
By on - No comments:
Tags