HomeОбразованиеRelated VideosMore From: EJ Media

CSS Layout Tutorial - 19 - Adding a logo to the layout

281 ratings | 63430 views
In this video we take a further look at the fixed layout. HTML: http://pastebin.com/k81ThkkN CSS: http://pastebin.com/qAtpmS2B
Html code for embedding videos on your blog
Text Comments (49)
wajid hussain (1 month ago)
please give this html layout code in soft form
Nikhils Revolution# (5 months ago)
Hello sir, thanks for the code but how to add this in blogger sir?
ANAMIKA GUPTA (5 months ago)
You are too good.
LinnErellie haha (6 months ago)
Hello. Quick question. I'm supposed to make a "online magazine with five pages with links to the new pages, but I'm not sure what that means. Your help would be appreciated
AndroidGamer111 (7 months ago)
How can I add logo and some text in header?
KARTHICKRAJA M (8 months ago)
In 3m 10 sec max-wdyh ans max-height propert trick is Awesome
Akshay Lakhera (10 months ago)
not working in liquid layout
dani80 able (1 year ago)
Please help, when i put the logo in to the left side of the header, the text title in it, is no more aligned to the center, it is pushed right and down by the image. How can i put the image without influence the header's title postion? (i use the fluid layout)
Lewis Knell (1 year ago)
Make the logo image float: left and position:relative; To make the text stay centrally aligned in your header, you need to make it a display: block; Then you can use auto on margin-right and margin-left
ndifreke umoren (1 year ago)
Thanks for these wonderful videos! But I can seem to be able to align my img logo and text logo in the header section. Can you please guide me?
vikasreddy Mukku (1 year ago)
very usefull
lisa dasmohapatra (1 year ago)
How can we add 2 logos in one website one is image logo and another one is text..will you please help me..
lisa dasmohapatra (1 year ago)
EJ Media ur teaching style is awesome
lisa dasmohapatra (1 year ago)
EJ Media ok Sir Will u please make a vedio for this
EJ Media (1 year ago)
I think I have some code for that in my library - I will let you know
go lo (1 year ago)
Waqas Ahmed (1 year ago)
Quick and precise! Thanks man
Sanjoy Das (1 year ago)
Can you plz. make a single tutorial video on max-width, max-height.... min-width, min-height property explaining it neatly ..
carl rummenge (1 year ago)
this is awesome wow!
Fairex (1 year ago)
I myself am not a big fan of fixed layouts, I prefer hybrid ones, where all the elements are fluid, but we still have that container. in my opinion they look the best. Amazing video as always.
Prakhar Gupta (1 year ago)
Great video, thanks for tutorials. i have one question : how can i shift the header section left or right, how can i move it??
loco13 (1 year ago)
sorry what i meant to say if i use this text-align: center; on the header and it aligns is that good 2
loco13 (1 year ago)
why if i does the logo align center win i use text-align: center; on the header is this a way good 2
Smart Design (1 year ago)
Question: when you set up the logo property: (Max-width =100% ) why this did not expand the logo image across all the width of the header, from the far right to the far left ? as it is 100%. (the same like the height)
Abhinav Malhotra (1 month ago)
same question
IslamApologist (1 year ago)
you are awesome
Carl Morris (1 year ago)
Thanks again.
Anupam Roy (1 year ago)
I was wondering about the "Img Element selector". As Img is an element selector so if we create a rule in CSS for this "img element selector", it will affect all the "img element" that we have got in our html page. you have two Img elements i.e. rome.png and logo.jpg. When you floated the logo.jpg to left, the other one, rome.png was also floated to the left. It's the general rule as you have said in your earlier videos. But max-width:100%; max-height:100%; these two properties were also included in the img property rules with the fload property. img { float: right; max-width: 100%; max-height: 100%; }. So why wasn't the size of rome.png affected by this size properties when the size of logo.jpg was changed (both were under img element) ?
Abu Talha (2 years ago)
how to add link in to main content
Ivan Lee (2 years ago)
Hi EJ Media, I love your tutorials and I have watched all of the CSS lectures. On some of the lectures, you mentioned that you will teach us how to make a drop down menu/list. is that something that we will see in your channel in the near future?
EJ Media (2 years ago)
Sure I can look into that - also I added a lecture on drop downs in the jquery series
Alvin Miles (2 years ago)
Thank you for all the CSS video. I would love to see a video on (@media screen) on the website you created on the first 14 video. That way I can resized my browser and the website will fix no matter what.
Alvin Miles (2 years ago)
I finally got this HistoryDen.com to resizes no matter how small I move the browser down. at least until 350px. I had the most problem with having a logo and a H1 heading inside my header. I realize then that the H1 heading was a block element and that I had to put a width on it for it to line up next to the logo. I also had to use position: absolute to put it in the middle. thanks for all the video. I guess what I also did was use the @media screen rule and made it responsive.
EJ Media (2 years ago)
Sure I can look into that
Alvin Miles (2 years ago)
the website will resizes no matter what is what I meant.
vishu sampigethaya (2 years ago)
Observe that the image below also moved when you changed the css code for LOGO. How to seperate it.?
Darkmiep (2 years ago)
+vishu sampigethaya, I think that's because in the video he uses "img" as selector instead of a class or id. So because of that the previously written code for the image below gets overwritten by the new set of rules. To seperate those two you just need to specify an id or class. Hopefully I was able to help. Note; It's just my guess, so it could be wrong.
vishu sampigethaya (2 years ago)
+EJ Media okay, thank you.
EJ Media (2 years ago)
interesting ill look into that
SEM (2 years ago)
sir,, what should i do next after learning css to be a pro web designer....???
Adetayo Adeleke (1 year ago)
i would include PHP.
SEM (2 years ago)
thank you sir... i got my answer...
EJ Media (2 years ago)
I would learn JavaScript and jQuery
Phong Nguyen (2 years ago)
Can you do Objective c Please Because I really like your channel and I want to learn Objective C So please do a tutorial on it.
Zsutzi (2 years ago)
Lets say I wanted the logo not exactly in the middle but not all the way to the right either, like in between the middle and the very right, how would I accomplish that? Once again great job like always!
Zsutzi (2 years ago)
Thanks for the advice, makes sense, yea would be a good video topic :)
EJ Media (2 years ago)
The best way to do that is center the image and then use margin-left or margin-right. So for instance you might might do the following: margin-left: -10px; I probably should do a video on this subject.
John Boyd (2 years ago)
I would be very interested in seeing a video on the creation of your logo. Thanks!
EJ Media (2 years ago)
I will look into it - I have to remember how I madethat lol

Would you like to comment?

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