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

CSS Tutorial for Beginners - 39 - Text and images

342 ratings | 68474 views
In this video we go over aligning text and images in the same div.
Html code for embedding videos on your blog
Text Comments (30)
Anil Kopramani (23 days ago)
when we use background color for text after using float it apply to both image and text.solution please!
Ikrar Khan (4 months ago)
I'm trying to make a border around the text and want to keep the image out of the box.But i don't know why the image is keep on merging inside border with text?
Natnael Teshome (4 months ago)
2018
Gaming Unlimited (5 months ago)
Can anyone tell me why there is extra space on the right side of my body?? HTML Code <html> <head> <link rel="stylesheet" type="text/css" href="stylesheet.css"> </head> <body> <H1> CALL OF DUTY</H1> <p class="paragraph"> Call of Duty is a first-person shooter video game franchise. The series began on Microsoft Windows, and later expanded to consoles and handhelds. Several spin-off games have been released. The earlier games in the series are set primarily in World War II, but later games like Call of Duty 4: Modern Warfare are set in modern times or in futuristic settings. The most recent game, Call of Duty: WWII, was released on November 3, 2017. An upcoming title, Call of Duty: Black Ops 4, is in development and to be released on October 12, 2018.</p> <div class="div1"> <p class="paragraph1">The Call of Duty games are published and owned by Activision. While Infinity Ward is still a developer, Treyarch and Sledgehammer Games also develop several of the titles with the release of the studios' games alternating with each other. Some games have been developed by Gray Matter Interactive, Nokia, Exakt Entertainment, Spark Unlimited, Amaze Entertainment, n-Space, Aspyr, Rebellion Developments, Ideaworks Game Studio, and nStigate Games. The games use a variety of engines, including the id Tech 3, the Treyarch NGL, and the IW engine.</p> </div> <div class="div2"> <p class="paragraph2">As of February 2016, the Call of Duty series has sold over 250 million copies.[1] Sales of all Call of Duty games topped US$15 billion.[1] Other products in the franchise include a line of action figures designed by Plan-B Toys, a card game created by Upper Deck Company, Mega bloks sets by Mega Brands, and a comic book mini-series published by WildStorm Productions.</p> </div> <div> <h2 class="bo4">Call Of Duty Black Ops 4</h2> </div> </body> </html> CSS Code: body{font-family:Geneva,Comic Sans MS,Arial; font-weight:bold; background-color:#ffcf79; font-size:25px; border-color:aquamarine; border-width:4px; border-style:solid; padding:20px; padding-top:10px; padding-bottom:10px; } p.blue{ color:blue;} #Para1homepage{ color:purple;} h1{text-decoration: underline; color: #DC143C; font-size:150%; text-align:center;} h2.GTA{text-decoration: underline; color: rgb(154,205,200); font-size:1.2em; text-align:center;} p.Paragraph{color: #EE82EE; line-height:1.5em; background-color:#e5e4d7; padding:20px; border-color:black; border-width:5px; border-style:solid; border-radius:10px; background-image:url(Clouds.gif); } #Para4homepage{color: black; line-height:1.5em; background-color:#e5e4d7; padding:20px; padding-right: 40px; border-color:#296A64; border-width:5px; border-style:dashed; margin-left:400px; margin-top:40px; border-left-color:red; height:250px; overflow:scroll; cursor:URL("Cursor1.ico");} img.image1{height:400px; width:800px; background-color:silver; padding:5px; border-color:black; border-width:5px; border-style:solid; margin-left:40px; position:relative; left:40px;} img.image2{height:400px; width:800px; background-color:silver; padding:5px; border-color:black; border-width:5px; border-style:solid; margin-left:100px; position:relative; right:40px;} .highlight{background-color:#ffff00;} span.red{color:red;} h3{color:Darkblue; text-decoration:underline; margin-top:100px;} .link{color:#8B008B;} a:link{color:Green; text-decoration:none;} a:hover{color:Yellow; text-decoration:underline; font-style:italic; cursor:crosshair; } a:visited{color:Purple;} div.div1{width:50%; height:300px; float:left;} div.div2{width:50%; float:right; height:400px;} p.Paragraph1{color: green; line-height:1.5em; background-color:#e5e4d7; padding:20px; border-color:black; border-width:5px; border-style:solid; border-radius:10px; background-image:url(Clouds.gif);} h2.bo4{position:relative; left:25%; top:200px; color:purple; text-align:center; float:none; text-decoration:underline;} p.Paragraph2{color: green; line-height:1.5em; background-color:#e5e4d7; padding:20px; height:333px; border-color:black; border-width:5px; border-style:solid; border-radius:10px; background-image:url(Clouds.gif);}
Getting trickier - subtle diffs with that img inside and outside the p.
Khalilur Rahman (1 year ago)
I'm amazed watching all of the videos on HTML-CSS. Thanks. :)
張羿訢 (1 year ago)
helpful , very good
Jim Williams (1 year ago)
I saw no difference between when the image was placed before the paragraph on the style sheet and when it was placed after it. They looked identical, so what was I missing?
Joseph Bates (1 year ago)
I'm diggin your lessons dude but you say hover [hah-ver] wrong lol! It's Hoover. ;)
Bobby Day (1 year ago)
Dude chill, Joseph is simply pointing out a mispronounced word, everyone does it.
Dev Computer Academy (1 year ago)
who are you to judge him????? bhenchod he works very hard to make video you did not take a minute to judge him you make videos you will come to know what is hardwork. he is the very best teacher in web-designing i love his teaching the way he teaches
Kelsey W (1 year ago)
Question. I have an image that I want to line up with some text as in the video. I've assigned the image element float: left and while it is positioned to the left of the text, it's not perfectly in line with the text- it's positioned a bit lower. How do I fix this?
Kelsey W (1 year ago)
Nevermind. A combination of absolute (for the image) and relative (for the text/text box) positioning did the trick.
Omar B. (1 year ago)
Really clear, simplified, and well structured lessons. I am learning a lot. Thank you!
saurabhvats007 (2 years ago)
thanks boss this series is awesome
Jupitoryoutobe (2 years ago)
your tutorials are very much effective, efficient, and informative.. in a word...Perfect... appreciate it to you Sir.
pooja gupta (2 years ago)
you are a great mentor !!thanks for such wonderful series on CSS
Dexter Wong (2 years ago)
I am doing my part by liking the video as I did not do it earlier for the video. It is just my thank you for just a great series for learning css. Thank you......................
EJ Media (2 years ago)
Thank you sir :)
Abubakar Mushtaq Rizvi (2 years ago)
thanks sir your videos are very helpfull.....
Benjamin Wilde (3 years ago)
Question: If I put an image inside a <p> tag, will I be able to treat the image as a block element (by editing p in css)? also, in the same scenario, will I be able to center the image with: p {text-align: center;} ?
Benjamin Wilde (3 years ago)
Ok, thanks. I loved your video about relative position, by the way.
EJ Media (3 years ago)
+Benjamin Wilde I think the best thing to do is give the IMG element a display: block
Vishnupriya Sitaram (3 years ago)
amazing tutorials!!
Fatthy Sherif (4 years ago)
thanks a lot for your amazing tutorial videos, it was so helpful :D
EJ Media (4 years ago)
+Fatthy Sherif Thanks much - glad to be of help
amit amanna (4 years ago)
cheers to the greatest tutor on youtube.. Thank you
EJ Media (4 years ago)
+amit amanna Thanks for all the support!
EJ Media (4 years ago)
CSS code: body { background-color: #9c9f84; margin:0px; } #main { background-color: #e5e4d7; border-radius: 5px; padding:10px; margin:20px; } .image { float: left; margin-right: 30px; margin-bottom: 300px; }
EJ Media (4 years ago)
HTML:  <!DOCTYPE html> <html> <head> <title></title> <link type="text/css" rel="stylesheet" href="stylesheet.css"> </head> <body> <div id="main"> <p> <img class="image" src="caesar.jpg"  />  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.  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.  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.  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. </p> </div> </body> </html>

Would you like to comment?

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