CSS Layout Tutorial - 16 - The Fixed Layout

preview_player
Показать описание
In this video we take a look at the fixed layout.

  1. EJ Media
  2. CSS
  3. beginner
  4. CSS Layout Tutorial for Beginners
  5. layout
  6. Introduction to CSS
Рекомендации по теме
CSS Layout Tutorial 0:03:56

CSS Layout Tutorial - 16 - The Fixed Layout

HTML & CSS 0:39:21

HTML & CSS Crash Course Tutorial #8 - CSS Layout & Position

#37 CSS Grid 0:43:12

#37 CSS Grid Tutorial [Complete Guide] - CSS Full Tutorial

Learn Flexbox CSS 0:08:16

Learn Flexbox CSS in 8 minutes

CSS Layout Tutorial 0:05:28

CSS Layout Tutorial - 14 - Working in the footer

CSS Layout Tutorial 0:03:34

CSS Layout Tutorial - 21 - Media queries Part 2

Responsive CSS Grid 0:17:14

Responsive CSS Grid Tutorial

10 CSS Pro 0:09:39

10 CSS Pro Tips - Code this, NOT that!

Figma Navigation Component 0:23:25

Figma Navigation Component To HTML CSS (Beginners Tutorial)

CSS Layout Tutorial 0:03:48

CSS Layout Tutorial - 12 - Finishing the buttons

CSS Layout Tutorial 0:03:44

CSS Layout Tutorial - 17 - The Fixed Layout Part 2

Learn How to 0:04:37

Learn How to Make a Responsive CSS Grid Layout

You won’t believe 0:00:25

You won’t believe this navigation menu in CSS!

CSS Layout Tutorial 0:04:57

CSS Layout Tutorial - 20 - Media queries

CSS Grid Intro 0:25:38

CSS Grid Intro and Basic Layout Tutorial for Beginners

Learn Basic CSS 0:01:36

Learn Basic CSS by Building a Cafe Menu - Step 16

SASS Tutorial (build 0:14:50

SASS Tutorial (build your own CSS library) #16 - Making a Grid System (part 1)

Modal Window: CSS 0:13:41

Modal Window: CSS Tutorial (Day 16 of CSS3 in 30 Days)

How to create 0:36:46

How to create Website Page Layout in HTML CSS | using Float - Web Layout Design Tutorial 01

CSS Layout Tutorial 0:03:54

CSS Layout Tutorial - 09 - Adding the footer

CSS Layout Tutorial 0:00:40

CSS Layout Tutorial - 24 - The next step

10 modern layouts 0:21:39

10 modern layouts in 1 line of CSS

This New CSS 0:00:55

This New CSS Property Gets Perfect Aspect Ratios Every Time

Solar System | 0:01:00

Solar System | HTML CSS

Комментарии
Автор

CSS Code: 

body
{  
    margin: 0px; 
}

#container
{
  width: 968px;
  margin: 0px auto;

}

/* HEADER section */

.header
{  
  background:#5c755e; 
  height:75px; 
  width: 964px; 
  border: solid 2px #000; 
  color:white;
}

/* NAVIGATION section */

#nav
{  
  background:black; 
  height:30px; 
  width: 964px; 
  border: solid 2px #000;  
  font-weight:bold;
}

/* SIDEBAR */

.sidebar
{  
  float:left; 
  width:176px; 
  height:9500px; 
  background: #9c9f84; 
  border-left: solid 2px #000; 
  border-bottom: solid 2px #000;
 
}



/* MAIN */

.main
{
    float: left;
    width: 786px;
    height: 9500px;
    background: #e5e4d7; 
    border-right: solid 2px #000;  
    border-left: solid 2px #000; 
    border-bottom: solid 2px #000;
    solid;      font-family: Arial;
    font-size: 16px;
    overflow: auto ;
   
    
}

EJMedia
Автор

HTML Code: <!DOCTYPE html>

<html>

<head>
    <link type="text/css" rel="stylesheet" href="style.css">
</head>
  
<body>
        <div id="container">

              <div class="header">
      
              </div>
           
    
              <div id="nav"> 
       
           
              </div>          
        

              <div class="sidebar">
      
</div>


              <div class="main">


              </div> 
       

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

EJMedia
Автор

I've come across a lot of the videos but, yours stands out. Thanks to your expertise i'm on the road to become a better programmer.

nitishk
Автор

You are amazing and kind person, to teach me CSS. Finally I learned CSS most of the part and try to improve my skills. Thanks for your kind posting.

ghostrecog
Автор

Fantastic tutorials, would recommend to anyone else I know wanting to learn this, your time and effort to make these is very much appreciated and full respect to you :)

EvilYouNight
Автор

Best css tutorials Ive come across on youtube. When will you come out with the remainder of this series?

ljbigbull
Автор

Good job, you are the best on youtube, I have been following several chanels, abd you are the best ..keep going .

imout
Автор

Thanks you sir, i have been following many video, all of them perfect, keep going
:)

quangtrung
Автор

i dont know what can i
you are amazing really many thanks for you..
i was going to get FF in my web prog class without you

tinablack
Автор

thank you for the tutorials they helped a lot. can we have the introductory videos on the fixed layout explained

liliosakurwara
Автор

Thank you so much i learn more code from EJ media.
very helpful for me

devopscloudsync
Автор

yours tutorials are really innovative pls keep it

md.abusayedshipon
Автор

Enjoy watching your tutorials, is there any calculation to set the width of container div to 968px? Would you please explain a bit....

arbazkhan
Автор

can't even thank enough to you. Youre great

benjaminkimmang
Автор

Awesome tutorials! Can you tell me what is the best way to become a good programmer in a little time of period?

zecxixo
Автор

Thanks but i need to add a drop down menu how do i do it?

davtechs
Автор

Hey, what if you just change the width in the body instead of creating a container div?

shubhamgupta
Автор

Can you please provide the link for the code?

TAJ
Автор

There are missing the css data about .sidebar and .main, they are not visible in your movie, i mean you forgot to scroll down to make them visible in the left window of editor.

stefanmarius
Автор

where is the code you are talking about sir..

ayushagrawal