HomeОбразованиеRelated VideosMore From: Adam Khoury

CSS Auto Adjusting Stretch Fit Web Site Layout Tutorial HTML5 Template

429 ratings | 98277 views
Lesson Code: http://www.developphp.com/video/CSS/Auto-Adjusting-Stretch-Fit-Website-Layout-Tutorial Learn to code auto adjusting stretch fit web site layouts. You can use all of the space in the window if you like using CSS that has been around for years. You can also apply the same stretchy effect to your graphics and images.
Html code for embedding videos on your blog
Text Comments (29)
comptrgk (7 days ago)
If you're going to provide a tutorial, I don't need to hear that you're not going to do something because it's going to take too much time! Either do it or don't do the tutorial at all! You never know where your tutorial is being caught from.
Orion D. Hunter (19 days ago)
Your file was not found It may have been moved or deleted. ERR_FILE_NOT_FOUND
Senzokuhle S Dlomo (4 months ago)
Thank you brother!
Francis Anthony Villarin (5 months ago)
Thank you so much sir. God bless you
PatriotAct (8 months ago)
I'm having trouble getting this to work properly, any advice for my code? I'm making a sort of parody news site for a project. <html> <head> <title>Starlight Central</title> <link rel="stylesheet" type="text/css" href="stylesheet.css"/> <script type="text/javascript" src="script.js"></script> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Bree+Serif" rel="stylesheet"> </head> <body></body> </html> <div><h>STARLIGHT CENTRAL<h></div> <style> ul { list-style-type: none; overflow: hidden; background-color: black; } li { float: left; } li a { display: block; color: white; padding: 14px 16px; text-decoration: none; } p { color: white; } h1 { font-family: Bree Serif; text-align: center; } h { text-align: center; position: static; font-size: 150px; font-family: Bree Serif; } div { width: 100%; height: 100%; min-width: 1000px; min-height: 1000px; } </style> <ul> <li><a href="index.html">Home</a></li> <li><a href="video.html">Video</a></i> <li><a href="articles.html">Articles</a></li> <li><a href="broadcastinglive.html">Broadcasting Live</a></li> <p>CATEGORIES:</p> <li><a href="politics.html">Politics</a></li> <li><a href="science.html">Science</a></li> <li><a href="environment.html">Environment</a></li> <li><a href="entertainment.html">Entertainment</a></li> <li><a href="concpiracycorner.html">Conspiracy Corner</a></li> </ul> <h1>No Left, No Right, Only the facts.</h1> <div><img src="https://upload.wikimedia.org/wikipedia/commons/b/bc/Wikinews_Breaking_News.png" alt="Top Story" width=600 height=250> <img src="https://upload.wikimedia.org/wikipedia/commons/d/db/Article_1.png" alt="Latest Article" width=250 height=250></div>
Sauer Voussoir (11 months ago)
Thank you :D
OfficeTrainingLady (1 year ago)
Thanks for the video. Your presentation is fabulous. One question. I imagine the #middle #top #bottom are all in your CSS correct? If so, what does it look like? I am still new at CSS but my html is fair. I used to write it a long time ago to make all of my web pages used Hot Dog and notepad in the 90's) until FrontPage came out. Now I am using Expression Web 4.
Ptmp727 (1 year ago)
Width is easy, I need to learn how to adjust it according to the height of the page, to avoid scrolling at 1024px.
Amit Paul (1 year ago)
width tag
Amit Paul (1 year ago)
tag please
sweetangel0467 (2 years ago)
My portfolio page will forever be thankful
vishnu rama (2 years ago)
THANK YOU SOOOO MUCH!!!!! YOU SAVED MY LIFE...HAHAHHA , THANKS BRO!!
Sonia Rockett (3 years ago)
Hi Adam. Nice video - really well explained. If your original images had different aspect ratios and sizes, but you still want to maintain the uniform display which scales. Any idea how to go about that?
Deepak Kumar (4 years ago)
you are the killer coder bro.
Junel Dela Cuadra (4 years ago)
Thanks a lot.. Youre my Idol
Manish Arora (4 years ago)
Hi Adam, Thanks for the excellent tutorial; I tried the mentioned steps they worked prefectly but as soon as I convert the example image into a link button the auto adjusting nature of the image is gone. Can you please suggest a work around as I wish to use a png file as a button with auto adjusting stretch fit.
M46c (5 years ago)
Hi Adam Have you made a video on building Msql-PHP nav menus. And if so have you a ebook on the subject i could buy. Great videos
Syazwan Ryzo (5 years ago)
adam , please come to Malaysia la cibai ..it hard ti me make this one .. u come and teach me how to do it
sidmar23323 (5 years ago)
Hello. you have great tutorials. But i still havent't figured out how to build a website just like this (avaduvernay [dot] com/) where the images become vertical and not disappear as the window shrink.
Ramzy Elias (5 years ago)
Thank you . i hope make site for my videos
OneMoreStory (5 years ago)
I wish Some guy teaches us asp.Net Social networking . . Like him . He is just perfect
Oj Obasi (6 years ago)
Adam What about a php slidow that gets images from the database and displays the images in order of the time uploaded?
ED EkoDrive (6 years ago)
clear left thank youuur!! and in css i don't know child future :) its very cool :) Your master!
Oj Obasi (6 years ago)
Just what I wanted
PatchThat (6 years ago)
I think you are the best tutorial teacher on YouTube.
sashaprsheer (6 years ago)
amazing!
Arpit Garg (6 years ago)
cool
Viswanath Keerthi (6 years ago)
Crazy Adam :P 7:49
PJ Jamio (6 years ago)
Cool.

Would you like to comment?

Join YouTube for a free account, or sign in if you are already a member.