EJ Media I'm being serious about this. Probably THE best tutorial that shows the logic of the sidebar in CSS. The tutorial makes since and is easily explained. Good job once again and looking forward to the next vids!
HTML Code for the sidebar: Lecture Dates 11/07 - Lecture on Caesar 11/14 - Lecture on Hannibal 11/21 - Lecture on Alexander 11/28 - Lecture on Napolean 12/05 - Lecture on Scipio
Your tutorials are the best! I've tried codecademy and w3schools but have found your videos to be more informative and easier to follow. Thanks very much
if anyone wants to clean up a few lines from the code, then you can declare all the margins on one line. If you declare just one number: margin: 10px; (it will apply to all 4 sides) if you declare just two numbers: margin: 10px 5px; (it will apply 10 to the top and bottom, and 5 to the left and right); if you declare all four numbers: margin: 10px 5px 0px 15px; (it will apply 10 to the top, 5 to the right, 0 to the bottom and 15 to the left. (starts at top and goes clockwise)) Thanks for the tut, starting to feel comfortable with selectors and the various properties, still don't fully understand floating and relative positioning, but im sure that will come with practice.
***** Thanks for that. Floating is only really used if you want to pin something to the side (left or right) of your web page. So no floating in the center - just left and right. Relative positioning is the hardest to explain - I might do a series just on that but to be honest I rarely use relative positioning except for a few things such as vertically aligning text. Part of the problem with relative positioning is you can get highly unpredicatble results especially in terms of cross-browser support. I prefer floating or absolute position first ... but to be honest I really try not to used fixed widths - I much prefer to let the browser naturally expand everything out.
can you also use inline-block for the sidebar and content together as one div? so its horizontally equal? and if i would use this do i still have to use float?
hey!if i give position to sidebar div as "absolute" and place it beside the main div after giving margin right to main div,Will it effect the liquidity if the page?
What about the -tag? can you use the nav-tag instead of ? So for example: Four cities to visit in Europe London, United Kingdom Venice, Italy Copenhagen, Denmark Bilbao, Spain Or should that be embedded in a div-tag?
great video. It seems like the the upper gap of sidebar would not cut in half because sideright is in float, but the gap between the main class and sideright actually cut in half. Could you tell me what difference between them? thanks
Dude I have a question why can't we nest an div inside the main div and give the nested one a specific width so only that one would have a width so that the sidebar would fit please respond
Hi EJ. I should admit your tutorials are best so far. I have gone through many but I personally found your the be very crystal clear. Can you please tell when are you planning to upload remaining tutorials for CSS layout, I am eagerly waiting for it. Thanks DM
+EJ Media Hello, such a nice video! But I met a little problem. I need to have two sidebars on both sides. I tried to do it, but on the left side I saw two sidebars on bottom of the page and that's the problem.
Dont know if questions are ever answered here but here goes mine....... Ive been trying to produce another website, roughly in the same format; ive been watching your videos to become acquainted with features. And ive been having problems with a float on the page im building: a float ive got to the right of my screen is interfering with the text on the "flow", i think people call it. Thats to say it only interferes with the text; ive got the text under the ,class= main, and i have main in white. So whenever i insert this float who, by parameters dosent conflict, it pushes all the text down but keeps the its container , thats in white, at the same height. This is all pertinent code, html and css, respectively: Lecture Dates adhfdsfhdh jsdaads , .main{ background-color:#FDFEFE; margin:5px; Height:100%; Width:80%; Margin-right:20%; border-radius:5px; font-size.siderightex{ float:right; float:top; background-color:#FDFEFE; width:150px; margin:0px; margin-top:0px; margin-left:85%; overflow:auto;:95%; font-family:"Times New Roman"; line-height:1.5em; padding:0px; text-anchor:top;, ..........I know this is a bit of a jumble but if you could help that woould be great. Thank You.
Ive been working on this for a while not sure why but i cant seem to get the side bar show on the webpage, ive looked up all the parts on the actual html code and css, everything is in place lol cant understand why this is happening apparently theres is no issue to fix, even tried reloading and reopening the browser window... jeeez! it doesnt wana show grrrr OMG: I was using a notepad that wasnt part of this, wondering how the heck that happened, i did prepare everything when playing the vid... grrrrr... SOLVED
EJ, you probably the best i have ever encountered on CSS concepts, I just don't get it how 320px made space, its shouldn't move elements on the right of it 320px ? , like move the float 320px from the paragraph? ., I am having really bad time with CSS on those concepts hope you can help me
+EJ Media Hello. Helpful video. Can I get all the codes from the - Adding the sidebar episode ??. I have done all I see on the video but the sidebar will only be at top or bottom of the content box.
what if the width is in % instead of pixels? % will help to keep width at constant ratio instead of giving perfect margin for only one of it... will use of % instead of px in width would work?
+Neel Khalade Yep you can certainly do that but generally you will want all your div's as one or the other. Also you will want to resize your test page to make sure everything looks ok.
+Neel Khalade Also the general rule is if you have a lot of sections you probably want more precision with pixels ... if you have just a few sections % works better
Same problem... again. Had things like that with margin in early beginner tutorial. That's how it looks for me: imgur.com/a/JNubzQ0 In stylesheet margin above div main is still 10px like in tutorial. I have no idea whats going on with that. To make sidebar inline with main I had to set margin top to 27px instead of 0.
bro i solved that by rewriting the same code which he gave in the comment section i still dont know why or how it got solved by rewriting the same code
Hello, all my code has been working fine following your tutorials.Btw they are great. But the sidebar is not inheriting its class. Like its colors and size. Can you plz help me solve this issue.
Mc_John Here is the HTML: HANNIBAL - THE BATTLE OF CANNAE After defeating the Romans at the Battle of Lake Trasimene, Hannibal now moved his forces down south. There was panic in Rome and Quintus Fabius Maximus was appointed dictator to deal with Hannibal. Fabius, however, refused to meet Hannibal in the open field and this strategy became highly unpopular in Rome. Romans were used to attacking, not hiding. The Romans were forced to go on the offensive after Hannibal positioned his forces betweeen Rome and it's vital grain supply. This setup the epic Battle of Cannae. Here Hannibal defeated the Romans inflicting the worst single day defeat in Rome's history. AFTERMATH OF THE BATTLE OF CANNAE After the horrific defeat at the Battle of Cannae, the Romans reinstituted Fabius' avoidance strategy. The Romans no longer refused to meet Hannibal in head on collisons. Rather the Roman army kept a watchful eye on Hannibal, but always at a close distance. The avoidance strategy worked but it took forever. It took almost two long decades to drive Hannibal out of Italy. And even then Hannibal was never defeated in Italy. The Romans, adopting a tactic out of Hannibal's playbook, launched an attack against Carthage itself. This forced Hannibal to travel back to Africa to defend the city. Here he was defeated at the Battle of Zama. Lecture Dates 11/07 - Lecture on Caesar 11/14 - Lecture on Hannibal 11/21 - Lecture on Alexander 11/28 - Lecture on Napolean 12/05 - Lecture on Scipio
sir, i exactly copied your coding but it shows sidebar on left instead of right , can you help me ? .sideright{ background-color: darkgrey; margin: 10px; border-radius: 5px; padding: 20px; font-size: 105% float: right; width:260px; }
Hi ! I am stuck at this point, my half of the css file is not working i mean it is working for body,navbar,main and h1 selectors but browser is not showing any header section. I have checked the syntax twice , no problem there.Please Help!
aman khan Hi Aman - please paste all your code - in one message paste your HTML and in another message please paste your CSS - that way I can look it here - thanks
EJ Media HTML Code(without sidebar)(i think it's same as yours previous code) HANNIBAL - THE BATTLE OF CANNAE After defeating the Romans at the Battle of Lake Trasimene, Hannibal now moved his forces down south. There was panic in Rome and Quintus Fabius Maximus was appointed dictator to deal with Hannibal. Fabius, however, refused to meet Hannibal in the open field and this strategy became highly unpopular in Rome. Romans were used to attacking, not hiding. The Romans were forced to go on the offensive after Hannibal positioned his forces betweeen Rome and it's vital grain supply. This setup the epic Battle of Cannae. Here Hannibal defeated the Romans inflicting the worst single day defeat in Rome's history. AFTERMATH OF THE BATTLE OF CANNAE After the horrific defeat at the Battle of Cannae, the Romans reinstituted Fabius' avoidance strategy. The Romans no longer refused to meet Hannibal in head on collisons. Rather the Roman army kept a watchful eye on Hannibal, but always at a close distance. The avoidance strategy worked but it took forever. It took almost two long decades to drive Hannibal out of Italy. And even then Hannibal was never defeated in Italy. The Romans, adopting a tactic out of Hannibal's playbook, launched an attack against Carthage itself. This forced Hannibal to travel back to Africa to defend the city. Here he was defeated at the Battle of Zama.
Turns out problem is strangely solved by retyping in the file. Probably something weird with the encoding. =========== Great video's! Thanks for that. Running into a problem though. Main pane is pushed down a bit when I float the sideright. What am I doing wrong? Here is the stripped down code. Thanks very much! stylesheet2.css ============= body { background-color: #9c9f84; margin: 0px; font-family: Verdana, Georgia, serif; font-size: 14px; } .main { background-color: #e5e4d7; margin-left: 10px; margin-right: 320px; margin-top: 0px; margin-bottom: 10px; border-radius: 5px; padding: 20px; font-size: 110%; } .sideright2 { background-color: #e5e4d7; margin-left: 0px; margin-right: 10px; margin-top: 0px; margin-bottom: 10px; border-radius: 5px; padding: 20px; font-size: 105%; width: 260px; float: right; } index2.html =============
Sir I cant get my sideright and main tops to level out. Instead of having what you have at min 6:57, I have the inverse of it. Can you send me your code? this is what i Have: body{ background-color: #666699; margin: 0px; font-family: Verdana, Georgia, serif; font-size: 14px; } #header{ background-color: #ff3333; margin: 10px; height: 90px; border-radius: 5px; } #navbar{ background-color:#ff3333; margin: 10px; height: 35px; border-radius: 5px; } .main{ background-color: #bfbfbf; margin-left: 10px; margin-right: 320px; margin-top: 10px; margin-bottom: 10px; border-radius: 5px; padding: 20px; font-size: 110%; /* 110% of the inherit 14px */ } h1{ font-size: 120%; color: #ff5050; } h2{ font-size: 120%; color: darkblue; } .sideright{ background-color: #bfbfbf; margin: 10px; border-radius: 5px; padding: 20px; font-size: 105%; /* 105% of the inherit 14px */ float: right; width: 260px; } and HTML:
Lecture Dates 11/07 - Lecture on Caesar 11/14 - Lecture on Hannibal 11/21 - Lecture on Alexander 11/28 - Lecture on Napolean 12/05 - Lecture on Scipio
Koenigsegg One:1 - WORLD´S FIRST MEGACAR The One:1 was introduced in 2014. Seven examples, including one prototype, were built during 2014 and 2015. This was one of the most exclusive production car programs ever envisaged in the car industry.The hp-to-kg curb weight ratio is an astonishing 1:1. This is the “dream” equation, previously thought impossible when it comes to fully road legal and usable sports cars. The One:1 is the first homologated production car in the world with one Megawatt of power, thereby making it the world´s first series produced Megacar. The name One:1 The One:1 truly raised the performance bar. The One:1 featured new, unique solutions that enhance track performance without compromising top speed or everyday usability, with a stunning visual appearance to go with it.
Hi EJ, i was wondering if you could help me. Right above the main body of text on the website, I see this: . I can't seem to find anything in the html or css code, so I was hoping you could help me solve this problem. Thanks. Btw, great videos, these are the best css tutorials I've seen on youtube!
Hey mate, I am done all of the page, good job, i'm following you already, but when i see the page, right just above the navigation, before main i see this  What the heck is that and how I can get rid of that code ?
+Robert Reimann I have seen that oh so many times ... nasty little bug ... best way to handle that is open up your html or css document with notepad and remove that bit of code.
EJ Media
I'm being serious about this. Probably THE best tutorial that shows the logic of the sidebar in CSS. The tutorial makes since and is easily explained. Good job once again and looking forward to the next vids!
Mark Shrigley Thanks so much!
HTML Code for the sidebar:
Lecture Dates
11/07 - Lecture on Caesar
11/14 - Lecture on Hannibal
11/21 - Lecture on Alexander
11/28 - Lecture on Napolean
12/05 - Lecture on Scipio
+EJ Media Thanks.
EJ Media You know how to explain this. thanks !
Your tutorials are the best! I've tried codecademy and w3schools but have found your videos to be more informative and easier to follow. Thanks very much
Amazing teacher... made it so easy to understand for literally anyone coming with any set of knowledge on their belt.
Man, this is so good to have you explaining this! You're so clear! Thank you for your time!
if anyone wants to clean up a few lines from the code, then you can declare all the margins on one line.
If you declare just one number: margin: 10px; (it will apply to all 4 sides)
if you declare just two numbers: margin: 10px 5px; (it will apply 10 to the top and bottom, and 5 to the left and right);
if you declare all four numbers: margin: 10px 5px 0px 15px; (it will apply 10 to the top, 5 to the right, 0 to the bottom and 15 to the left. (starts at top and goes clockwise))
Thanks for the tut, starting to feel comfortable with selectors and the various properties, still don't fully understand floating and relative positioning, but im sure that will come with practice.
***** Thanks for that. Floating is only really used if you want to pin something to the side (left or right) of your web page. So no floating in the center - just left and right. Relative positioning is the hardest to explain - I might do a series just on that but to be honest I rarely use relative positioning except for a few things such as vertically aligning text. Part of the problem with relative positioning is you can get highly unpredicatble results especially in terms of cross-browser support. I prefer floating or absolute position first ... but to be honest I really try not to used fixed widths - I much prefer to let the browser naturally expand everything out.
Thank u for all the tutorials! already feeling comfortable making simple html/css static websites!
Gregory Bedford Great to hear
Awesome; this is very clear and easily understandable.
Literally i am enjoying his videos
Excellent videos man!!!No crap like other youtubers.Keep it up!!!
great tutorial, very well simplified, and clear. Thank you!
This is great! Easier and very well explained. Thank you very much.
Learned SO Much! Thank you so much!
Excellent tutorial!
amazing work. thanks a lot
Your are the a full on life saver
at last, a serious video about creating a sidebar!
Video is impressive to me! Thanks 'guru'-CSS. :)
best tutorials ever. you should consider being a teacher ur so good!
wow thanks for this, this was always so complicated for me but this is so much more simple and effective
Glad to be of help ... I think books tend to over complicate this stuff when it's really easy in many respects
Very good tutorial! Muito obrigado!
fantastic tutorial
great explaining thanks much, I just didn't entirely get the idea of how the margin size works with floats.
Hey @EJ Media,
Your tutorial is great. I have one question. Why we need to place side-bar above main div
can you also use inline-block for the sidebar and content together as one div? so its horizontally equal? and if i would use this do i still have to use float?
amazing channel thank you so much
hey!if i give position to sidebar div as "absolute" and place it beside the main div after giving margin right to main div,Will it effect the liquidity if the page?
what we will do if we have to add just another sidebar below the one you added
What about the -tag? can you use the nav-tag instead of ? So for example:
Four cities to visit in Europe
London, United Kingdom
Venice, Italy
Copenhagen, Denmark
Bilbao, Spain
Or should that be embedded in a div-tag?
Why you don't use all column as float:left; ?
My question: Which syntax would put it to the side of the main panel, and not above or below
do h1 selector and h2 selector conflict with each other?
cux my h1 color applies to h2 and it's the # color
rather than color name
great video. It seems like the the upper gap of sidebar would not cut in half because sideright is in float, but the gap between the main class and sideright actually cut in half. Could you tell me what difference between them? thanks
Dude I have a question why can't we nest an div inside the main div and give the nested one a specific width so only that one would have a width so that the sidebar would fit please respond
Hi EJ. I should admit your tutorials are best so far. I have gone through many but I personally found your the be very crystal clear. Can you please tell when are you planning to upload remaining tutorials for CSS layout, I am eagerly waiting for it.
Thanks
DM
Darshit Mehta Thanks much. I will put up some more videos this week for sure - at least 2-3.
Thats Great EJ
Gratitude!
+EJ Media Hello, such a nice video! But I met a little problem. I need to have two sidebars on both sides. I tried to do it, but on the left side I saw two sidebars on bottom of the page and that's the problem.
yup making it into a class works
simple to understand
I would like to buy you a drink if you ever come to my country :)
+Matija Stefanović Why thank you )
can i make the H1 heading a class?
will that help or should i make it into a div class?
+WALKING DEAD You can but since H1 is unique you can probably just specify the type selector
Sorry, but where is this message board you keep referring to?
Dont know if questions are ever answered here but here goes mine.......
Ive been trying to produce another website, roughly in the same format; ive been watching your videos to become acquainted with features. And ive been having problems with a float on the page im building: a float ive got to the right of my screen is interfering with the text on the "flow", i think people call it. Thats to say it only interferes with the text; ive got the text under the ,class= main, and i have main in white. So whenever i insert this float who, by parameters dosent conflict, it pushes all the text down but keeps the its container , thats in white, at the same height.
This is all pertinent code, html and css, respectively: Lecture Dates adhfdsfhdh jsdaads , .main{ background-color:#FDFEFE; margin:5px; Height:100%; Width:80%; Margin-right:20%; border-radius:5px; font-size.siderightex{ float:right; float:top; background-color:#FDFEFE; width:150px; margin:0px; margin-top:0px; margin-left:85%; overflow:auto;:95%; font-family:"Times New Roman"; line-height:1.5em; padding:0px; text-anchor:top;, ..........I know this is a bit of a jumble but if you could help that woould be great. Thank You.
the moment I saw how you got 320px for the main section, I quickly rushed to calculate mine. 😂😂😂
I copy too much much..
Love your videos..
thanks brother
why is my sidebar coming towards right side ?? how to change it to left??
Nice
Ive been working on this for a while not sure why but i cant seem to get the side bar show on the webpage, ive looked up all the parts on the actual html code and css, everything is in place lol cant understand why this is happening apparently theres is no issue to fix, even tried reloading and reopening the browser window... jeeez! it doesnt wana show grrrr
OMG: I was using a notepad that wasnt part of this, wondering how the heck that happened, i did prepare everything when playing the vid... grrrrr... SOLVED
EJ, you probably the best i have ever encountered on CSS concepts, I just don't get it how 320px made space, its shouldn't move elements on the right of it 320px ? , like move the float 320px from the paragraph? ., I am having really bad time with CSS on those concepts hope you can help me
+NoPTic S (Dersus) Sure but can you paste the code so I can take a look at it? I need to refresh my memory lol
+EJ Media
Hello. Helpful video.
Can I get all the codes from the - Adding the sidebar episode ??. I have done all I see on the video but the sidebar will only be at top or bottom of the content box.
+Fredoen sure just need your email
+EJ Media Ok thanks. My email is gameweb-fr@hotmail.no
He is a Pro
Hi, I was wondering if I could download the css and html. . I am T having trouble typing the typing it in. Tbnk you bvery mucy
+RayF1948 I will try and find the source ..
what if the width is in % instead of pixels? % will help to keep width at constant ratio instead of giving perfect margin for only one of it... will use of % instead of px in width would work?
+Neel Khalade Yep you can certainly do that but generally you will want all your div's as one or the other. Also you will want to resize your test page to make sure everything looks ok.
EJ Media Thanks for quick reply! It will help me in making apps in HTML and CSS
+Neel Khalade Also the general rule is if you have a lot of sections you probably want more precision with pixels ... if you have just a few sections % works better
sir, i have problem with my margin. I have copied the same code but my sidebar margin shown in webpage is different. Can you please help me sir.
same problem i am getting extra margin from the top
Same problem... again. Had things like that with margin in early beginner tutorial. That's how it looks for me: imgur.com/a/JNubzQ0 In stylesheet margin above div main is still 10px like in tutorial. I have no idea whats going on with that. To make sidebar inline with main I had to set margin top to 27px instead of 0.
bro i solved that by rewriting the same code which he gave in the comment section i still dont know why or how it got solved by rewriting the same code
WTH, it worked O.o thx bro, but still - I would love to understand what just happened.
Hello, all my code has been working fine following your tutorials.Btw they are great. But the sidebar is not inheriting its class. Like its colors and size. Can you plz help me solve this issue.
Mc_John Here is the HTML:
HANNIBAL - THE BATTLE OF CANNAE
After defeating the Romans at the Battle of Lake Trasimene, Hannibal now moved his forces down south. There was panic in Rome and Quintus Fabius Maximus was appointed dictator to deal with Hannibal. Fabius, however, refused to meet Hannibal in the open field and this strategy became highly unpopular in Rome. Romans were used to attacking, not hiding. The Romans were forced to go on the offensive after Hannibal positioned his forces betweeen Rome and it's vital grain supply. This setup the epic Battle of Cannae. Here Hannibal
defeated the Romans inflicting the worst single day defeat in Rome's history.
AFTERMATH OF THE BATTLE OF CANNAE
After the horrific defeat at the Battle of Cannae, the Romans reinstituted Fabius' avoidance strategy. The Romans no longer refused to meet Hannibal in head on collisons. Rather the Roman army kept a watchful eye on Hannibal, but always at a close distance.
The avoidance strategy worked but it took forever. It took almost two long decades to drive Hannibal out of Italy. And even then Hannibal was never defeated in Italy. The Romans, adopting a tactic out of Hannibal's playbook, launched an attack against Carthage itself. This forced Hannibal to travel back to Africa to defend the city. Here he was defeated at the Battle of Zama.
Lecture Dates
11/07 - Lecture on Caesar
11/14 - Lecture on Hannibal
11/21 - Lecture on Alexander
11/28 - Lecture on Napolean
12/05 - Lecture on Scipio
Mc_John Here is the CSS:
body {
background-color: #9c9f84;
margin: 0px;
font-family: Verdana, Georgia, serif;
font-size: 14px;
}
#header {
background-color: #5c755e;
margin: 10px;
height: 90px;
border-radius: 5px;
}
#navbar {
background-color: #5c755e;
margin: 10px;
height: 35px;
border-radius: 5px;
}
.main {
background-color: #e5e4d7;
margin: 10px;
border-radius: 5px;
padding: 20px;
font-size: 110%;
}
h1 {
font-size: 120%;
color: #ce282e;
}
.sideright {
background-color: #e5e4d7;
margin: 10px;
border-radius: 5px;
padding: 20px;
font-size: 105%;
float: right;
width:260px;
}
Mc_John Please try this code and let me know if it works - thanks
Thank you for replying. I am unable to access my computer ATM. I will test out your code tommorrow morning and get back to you
Thank you. Your code worked but i cant analyze why mine did not.
sir, i exactly copied your coding but it shows sidebar on left instead of right , can you help me ?
.sideright{
background-color: darkgrey;
margin: 10px;
border-radius: 5px;
padding: 20px;
font-size: 105%
float: right;
width:260px;
}
same is happening do you have a solution
i just make wonder ful web site with ur help
Hi ! I am stuck at this point, my half of the css file is not working i mean it is working for body,navbar,main and h1 selectors but browser is not showing any header section. I have checked the syntax twice , no problem there.Please Help!
aman khan Hi Aman - please paste all your code - in one message paste your HTML and in another message please paste your CSS - that way I can look it here - thanks
EJ Media HTML Code(without sidebar)(i think it's same as yours previous code)
HANNIBAL - THE BATTLE OF CANNAE
After defeating the Romans at the Battle of Lake Trasimene, Hannibal now moved his forces down south. There was panic in Rome and Quintus Fabius Maximus was appointed dictator to deal with Hannibal. Fabius, however, refused to meet Hannibal in the open field and this strategy became highly unpopular in Rome. Romans were used to attacking, not hiding. The Romans were forced to go on the offensive after Hannibal positioned his forces betweeen Rome and it's vital grain supply. This setup the epic Battle of Cannae. Here Hannibal
defeated the Romans inflicting the worst single day defeat in Rome's history.
AFTERMATH OF THE BATTLE OF CANNAE
After the horrific defeat at the Battle of Cannae, the Romans reinstituted Fabius' avoidance strategy. The Romans no longer refused to meet Hannibal in head on collisons. Rather the Roman army kept a watchful eye on Hannibal, but always at a close distance.
The avoidance strategy worked but it took forever. It took almost two long decades to drive Hannibal out of Italy. And even then Hannibal was never defeated in Italy. The Romans, adopting a tactic out of Hannibal's playbook, launched an attack against Carthage itself. This forced Hannibal to travel back to Africa to defend the city. Here he was defeated at the Battle of Zama.
EJ Media
CSS code
body {
background-color: #9c9f84;
margin: 0px;
font-family: Verdana, Georgia, serif;
font-size: 14px;
}
#header {
background-color: #5c755e;
margin: 10px;
height: 90px;
border-radius: 5px;
}
#navbar {
background-color: #5c755e;
margin: 10px;
height: 35px;
border-radius: 5px;
}
.main {
background-color: #e5e4d7;
margin: 10px;
border-radius: 5px;
padding: 20px;
font-size: 110%;
}
h1 {
font-size: 120%;
color: #ce282e;
}
aman khan I will look it and let you know what I find
aman khan Your right it is doing that - do you have an email address where I can send you some of my code?
oh my god how did you do the math on sidebar padding and margin?
+WALKING DEAD A lot of that is just trying numbers until they finally match - now maybe I could have done an outline but nahhh
Turns out problem is strangely solved by retyping in the file. Probably something weird with the encoding.
===========
Great video's! Thanks for that. Running into a problem though. Main pane is pushed down a bit when I float the sideright. What am I doing wrong? Here is the stripped down code. Thanks very much!
stylesheet2.css
=============
body {
background-color: #9c9f84;
margin: 0px;
font-family: Verdana, Georgia, serif;
font-size: 14px;
}
.main {
background-color: #e5e4d7;
margin-left: 10px;
margin-right: 320px;
margin-top: 0px;
margin-bottom: 10px;
border-radius: 5px;
padding: 20px;
font-size: 110%;
}
.sideright2 {
background-color: #e5e4d7;
margin-left: 0px;
margin-right: 10px;
margin-top: 0px;
margin-bottom: 10px;
border-radius: 5px;
padding: 20px;
font-size: 105%;
width: 260px;
float: right;
}
index2.html
=============
Hello. I can't make the sidebar ant the main tex at the same level:
Where is my mistake?
Stylesheet:
body {
background-color: #9c9f84;
margin: 0px;
font-family: Verdana, Georgia, Serif;
font-size: 14px;
}
#header {
background-color: #5c755e;
margin: 10px;
height: 90px;
border-radius: 5px;
}
#navbar {
background-color: #5c755e;
margin: 10px;
height: 35px;
border-radius: 5px;
}
.main {
background-color: #e5e4d7;
margin-left: 10px;
margin-right: 320px;
margin-top: 0px;
margin-bottom: 10px;
border-radius: 5px;
padding: 20px;
font-size: 110%;
}
h1 {
font-size: 120%;
color: #ce282e;
}
h2 {font-size: 120%;
color: darkblue;
}
.sideright {
background-color: #e5e4d7;
margin-left: 10px;
margin-right: 10px;
margin-top: 0px;
margin-bottom: 10px;
border-radius: 5px;
padding: 20px;
font-size: 105%;
float: right;
width: 260px;
}
so do I and i try ..margin-top: -16px; using minus....on class .main for same level .main and .sideright
have you put the sidebar div code inside the the main div? I hope that might be the problem of yours.
Sir I cant get my sideright and main tops to level out. Instead of having what you have at min 6:57, I have the inverse of it. Can you send me your code? this is what i Have:
body{
background-color: #666699;
margin: 0px;
font-family: Verdana, Georgia, serif;
font-size: 14px;
}
#header{
background-color: #ff3333;
margin: 10px;
height: 90px;
border-radius: 5px;
}
#navbar{
background-color:#ff3333;
margin: 10px;
height: 35px;
border-radius: 5px;
}
.main{
background-color: #bfbfbf;
margin-left: 10px;
margin-right: 320px;
margin-top: 10px;
margin-bottom: 10px;
border-radius: 5px;
padding: 20px;
font-size: 110%; /* 110% of the inherit 14px */
}
h1{
font-size: 120%;
color: #ff5050;
}
h2{
font-size: 120%;
color: darkblue;
}
.sideright{
background-color: #bfbfbf;
margin: 10px;
border-radius: 5px;
padding: 20px;
font-size: 105%; /* 105% of the inherit 14px */
float: right;
width: 260px;
}
and HTML:
Lecture Dates
11/07 - Lecture on Caesar
11/14 - Lecture on Hannibal
11/21 - Lecture on Alexander
11/28 - Lecture on Napolean
12/05 - Lecture on Scipio
Koenigsegg One:1 - WORLD´S FIRST MEGACAR
The One:1 was introduced in 2014.
Seven examples, including one prototype, were built during 2014 and 2015.
This was one of the most exclusive production car programs ever envisaged
in the car industry.The hp-to-kg curb weight ratio is an astonishing 1:1.
This is the “dream” equation, previously thought impossible when it
comes to fully road legal and usable sports cars. The One:1 is the first
homologated production car in the world with one Megawatt of power, thereby
making it the world´s first series produced Megacar.
The name One:1
The One:1 truly raised the performance bar. The One:1 featured new, unique
solutions that enhance track performance without compromising top speed or everyday
usability, with a stunning visual appearance to go with it.
Sure what is your email?
Hi EJ, i was wondering if you could help me. Right above the main body of text on the website, I see this: . I can't seem to find anything in the html or css code, so I was hoping you could help me solve this problem. Thanks.
Btw, great videos, these are the best css tutorials I've seen on youtube!
Nevermind, I figured it out. It was something with copying over the div tags to notepad. All I had to do was re-type the div tags.
Brandon Lynch Good to hear - I was just about to email back too lol
You solved my problem. Thanks 2015 Brandon
Hey mate, I am done all of the page, good job, i'm following you already, but when i see the page, right just above the navigation, before main i see this 
What the heck is that and how I can get rid of that code ?
I have seen that before - usually you have to just delete that and add back the characters
add this into your part
body {
background:#9C9F84;
margin:0;
font-family:verdana,georgia,helevetica,sans-serif;
font-size:14px;
}
#header {
background:#5C755E;
margin:10px;
height:90px;
border-radius:6px;
}
#navbar {
background:#5C755E;
margin:10px;
height:35px;
border-radius:6px;
}
.main {
background:#E5E4D7;
margin-left:10px;
margin-right:320px;
margin-top:10px;
margin-bottom:10px;
border-radius:6px;
padding:20px;
font-size:110%;
}
h1 {
font-size:120%;
color:#CE282E;
}
h2 {
font-size:120%;
color:darkblue;
}
/* sideright not in the flow */
.sideright {
background:#E5E4D7;
margin-left:10px;/* add left and right 10px + 10px + 300px = 320px */
margin-right:10px;
margin-top:0px;
margin-bottom:10px;
border-radius:6px;
border-radius:6px;
padding:20px;/* add right and left = 40px + width = 300px; */
font-size:105%;
float:right; /* when floating always give it a width */
width:260px;/* add */
}
Blah Randomness Dates
11/07 - Lecture on Randomness
11/08 - Lecture on Randomness2
11/09 - Lecture on Randomness3
11/10 - Lecture on Randomness4
11/11 - Lecture on Randomness5
Random - The Blah Text
fdsa fsa fds f dsa fd saf dsa fdsa fdsa fdsa fdsa far-lef
f dsa f dsa fdsa fdsa fdsaf dsa fdsa fdsa fdsa fdsa fdsa
f dsaf dsa fdsa fsa fdsa fdsa fdsa fdsa fdsa fdsa fsda fsa
f dsa fdsa fdsa fds fdsa fdsa fdsa fdsa fdsa fds af dsa fdsa
f dsa fdsa fdsa fdsa fds afdsa fds fdsa fds fdsa dsf fdsaf saf
f dsa fdsa fsda fds fdsa fdsa fdsa fsa fdsa fdsa fds af sda
f dsa fdsaf dsa fsda fdsa fsda fsda fdsa fdsa fdsa fsda fsa fdsa
f dsa fdsa fdsa fdsa fsda fdsa fsda fsda fsda fdsaf dsaf ds fsa
f dsa fdsa fdsa fdsa fdsa fdsaf dsa fsda fdsa fdsa fdsa fds
fdsaf dsa fdsa fdsa fdsaf dsa fdsa fdsa fdsa fdsa fdsa
f dsa fdsaf dsa fdsa fdsa fdsa fdsa fdsa fdsaf sa fsda fas fsa
fdsa fdsa fdsa fdsa fdsa fdsa fdsa fdsa fdsa fdsa fdsaf dsa
sir, i exactly copied your coding but it does not workind, can you help me if i send you screenshots
can i get your email - i can send you my files
EJ Media tr.jakhara019@gmail.com
can i get the css
+The Aman
body {
background-color: #9c9f84;
margin: 0px;
font-family: Verdana, Georgia, serif;
font-size: 14px;
}
#header {
background-color: #5c755e;
margin: 10px;
height: 90px;
border-radius: 5px;
}
#navbar {
background-color: #5c755e;
margin: 10px;
height: 35px;
border-radius: 5px;
}
.main {
background-color: #e5e4d7;
margin-left: 10px;
margin-right: 320px;
margin-top: 10px;
margin-bottom: 10px;
border-radius: 5px;
padding: 20px;
font-size: 110%;
}
.sideright {
background-color: #e5e4d7;
font-size: 105%;
padding: 20px;
width:260px;
float: right;
border-radius: 5px;
margin-left:10px; margin-right:10px; margin-top:0px; margin-bottom:10px;
}
h1 {
font-size: 120%;
color: #ce282e;
}
h2 {
font-size: 120%;
color: darkblue;
}
I'm doing everything 1:1 as you do and i'm getting some strange symbols: ""
Wtf is this?? :D
+Robert Reimann I have seen that oh so many times ... nasty little bug ... best way to handle that is open up your html or css document with notepad and remove that bit of code.
+EJ Media Thanks, but I did not write it. How can I delete it??
You might have to edit it in notepad and delete the line and then rewrite it. Maybe you could send me the web folder?
+EJ Media Thank you. It worked :D
+EJ Media The was just made bold.
margin: 10px 320px 10px 10px; (short Hand)
GreenPandauk Thanks for that - I hope I explained that somewhere in the series but cant remember
Mine has spaces idk why :(
I can send you my code if i can get your email
Alrighty my email is leagueofkaneki123@gmail.com
Can i like add you on skype or something please :)
4;06
this is what i am using i hope its not causing conflict