I want to ask something that related about CSS and HTML.
I have a travel blog and I want to add new like a related post on Time.com on my article post, but I have a problem.
What do I need?
A new section like a related post on Time.
Screenshot: Time.com.
My problem: The text can't flatten the content.
How can I make that text/article like Time.com?
Thanks
My HTML code:
<div class="resources">
<h4>Other facts</h4>
<ul>
<li>United Arab Emirates Facts</li>
<li>Venice Facts</li>
<li>Great Wall of China Facts</li>
<li>Dead Sea Facts</li>
<li>Grand Canyon Facts</li>
</ul>
</div>
My CSS:
.resources }
width: 30%;
float: left;
}
What you would need is add float to the image, so that the text nicely wraps around your image. i think that answers your question.
it's work for <p> like this:
.resources > ul {
width: 30%;
float: left;
margin-left: -30px;
}
.resources p {
margin-top: -30px;
}
.resources h4 {
margin-bottom: -5px;`
}
<h2 style="text-align: center;">30 Fun and Interesting Facts about Germany</h2>
<div class="resources">
<h4>Other facts</h4>
<ul>
<li>United Arab Emirates Facts</li>
<li>Venice Facts</li>
<li>Great Wall of China Facts</li>
<li>Dead Sea Facts</li>
<li>Grand Canyon Facts</li>
</ul>
<p><strong>Interesting Facts about Germany</strong> - Interested in spending some time in Germany during for your vacation? Well, it’s a good idea for you to know about some facts about Germany as mentioned below.</p>
<p>Those facts can be helpful for you to understand this country better and thus, you can enjoy your vacation more. So, here they are 30 interesting and fun facts about Germany.</p>
</div>
<ol>
<li><p><strong>The Second Beer Consumer in the Europe</strong> - With the love of drinking beer, (to be honest, Germany is known as the Europe’s second beer consumer), it’s legal to drink anywhere you want. The laws regarding boozing are always loose. It’s even possible for teenagers to buy and drink alcohol freely by the age of 14! The first beer consumer in the EU is Ireland. What cool facts about Germany.</p></li>
<li><p><strong>College Education Is Free for Everyone!</strong> - Good news for you who want to go to Germany to college and studies in Germany. It’s among the facts about Germany that college education is free even for non-Germans. The government thinks that it’s entirely unjust to ask for tuitions from the students of higher education. So, do you have more urge to get a scholarship there and studies in Germany?</p></li>
But, if the element contains the other <ol> and <li>, that should not work.
And how about if I used the HTML element like this?
<p><strong>Interesting Facts about Germany</strong> - Interested in spending some time in Germany during for your vacation? Well, it’s a good idea for you to know about some facts about Germany as mentioned below.</p>
<p>Those facts can be helpful for you to understand this country better and thus, you can enjoy your vacation more. So, here they are 30 interesting and fun facts about Germany.</p>
<div class="resources">
<h4>Other facts</h4>
<ul>
<li>United Arab Emirates Facts</li>
<li>Venice Facts</li>
<li>Great Wall of China Facts</li>
<li>Dead Sea Facts</li>
<li>Grand Canyon Facts</li>
</ul>
</div>
<ol>
<li><p><strong>The Second Beer Consumer in the Europe</strong> - With the love of drinking beer, (to be honest, Germany is known as the Europe’s second beer consumer), it’s legal to drink anywhere you want. The laws regarding boozing are always loose. It’s even possible for teenagers to buy and drink alcohol freely by the age of 14! The first beer consumer in the EU is Ireland. What cool facts about Germany.</p></li>
<li><p><strong>College Education Is Free for Everyone!</strong> - Good news for you who want to go to Germany to college and studies in Germany. It’s among the facts about Germany that college education is free even for non-Germans. The government thinks that it’s entirely unjust to ask for tuitions from the students of higher education. So, do you have more urge to get a scholarship there and studies in Germany?</p></li>
Did you try to give the ul the class .resources?
<div class="resources">
<h4>Other facts</h4>
<ul class ="resources">
<li>United Arab Emirates Facts</li>
<li>Venice Facts</li>
<li>Great Wall of China Facts</li>
<li>Dead Sea Facts</li>
<li>Grand Canyon Facts</li>
</ul>
</div>
Related
I'm a beginner in HTML&CSS and now I'm coding my first project. But I'm kind of struggling with narrowing unordered lists. I attached photos that show how it must look like and how it actually looks like. If you can help me, I would be really happy.
How it must look like:
#tribute-info {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
#tribute-description {
font-size: 18px;
}
li {
font-size: 16px;
}
<div id="tribute-info">
<h3 id="tribute-description">
Here's a time line of Dr. Borlaug's life:
</h3>
<ul>
<li><strong>1914</strong> - Born in Cresco, Iowa</li>
<li>
<strong>1933</strong> - Leaves his family's farm to attend the University of Minnesota, thanks to a Depression era program known as the "National Youth Administration"
</li>
<li>
<strong>1935</strong> - Has to stop school and save up more money. Works in the Civilian Conservation Corps, helping starving Americans. "I saw how food changed them", he said. "All of this left scars on me."
</li>
<li>
<strong>1937</strong> - Finishes university and takes a job in the US Forestry Service
</li>
<li>
<strong>1938</strong> - Marries wife of 69 years Margret Gibson. Gets laid off due to budget cuts. Inspired by Elvin Charles Stakman, he returns to school study under Stakman, who teaches him about breeding pest-resistent plants.
</li>
<li>
<strong>1941</strong> - Tries to enroll in the military after the Pearl Harbor attack, but is rejected. Instead, the military asked his lab to work on waterproof glue, DDT to control malaria, disinfectants, and other applied science.
</li>
<li>
<strong>1942</strong> - Receives a Ph.D. in Genetics and Plant Pathology
</li>
<li>
<strong>1944</strong> - Rejects a 100% salary increase from Dupont, leaves behind his pregnant wife, and flies to Mexico to head a new plant pathology program. Over the next 16 years, his team breeds 6,000 different strains of disease resistent
wheat - including different varieties for each major climate on Earth.
</li>
<li>
<strong>1945</strong> - Discovers a way to grown wheat twice each season, doubling wheat yields
</li>
<li>
<strong>1953</strong> - crosses a short, sturdy dwarf breed of wheat with a high-yeidling American breed, creating a strain that responds well to fertilizer. It goes on to provide 95% of Mexico's wheat.
</li>
<li>
<strong>1962</strong> - Visits Delhi and brings his high-yielding strains of wheat to the Indian subcontinent in time to help mitigate mass starvation due to a rapidly expanding population
</li>
<li><strong>1970</strong> - receives the Nobel Peace Prize</li>
<li>
<strong>1983</strong> - helps seven African countries dramatically increase their maize and sorghum yields
</li>
<li>
<strong>1984</strong> - becomes a distinguished professor at Texas A&M University
</li>
<li>
<strong>2005</strong> - states "we will have to double the world food supply by 2050." Argues that genetically modified crops are the only way we can meet the demand, as we run out of arable land. Says that GM crops are not inherently dangerous
because "we've been genetically modifying plants and animals for a long time. Long before we called it science, people were selecting the best breeds."
</li>
<li><strong>2009</strong> - dies at the age of 95.</li>
</ul>
</div>
You can wrap your <ul> in a <div> and center it like this:
.list {
max-width: 700px;
margin: 0 auto;
}
.list li {
margin-bottom: 1em;
}
<div class="list">
<ul>
<li>Your list here</li>
<li>Your list here</li>
<li>Your list here</li>
<li>Your list here</li>
<li>Your list here</li>
</ul>
</div>
Just add a CSS rule that limits the width of that ul. You can either use a class or ID on the ul for that or use a child selector like this:
#tribute-info > ul {
max-width: 400px;
}
(This applies to any ul which is a direct child ot the #tribute-info element - in your case only one, i.e. that list)
#tribute-info {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
#tribute-description {
font-size: 18px;
}
li {
font-size: 16px;
}
#tribute-info > ul {
max-width: 400px;
}
<div id="tribute-info">
<h3 id="tribute-description">
Here's a time line of Dr. Borlaug's life:
</h3>
<ul>
<li><strong>1914</strong> - Born in Cresco, Iowa</li>
<li>
<strong>1933</strong> - Leaves his family's farm to attend the University of Minnesota, thanks to a Depression era program known as the "National Youth Administration"
</li>
<li>
<strong>1935</strong> - Has to stop school and save up more money. Works in the Civilian Conservation Corps, helping starving Americans. "I saw how food changed them", he said. "All of this left scars on me."
</li>
<li>
<strong>1937</strong> - Finishes university and takes a job in the US Forestry Service
</li>
<li>
<strong>1938</strong> - Marries wife of 69 years Margret Gibson. Gets laid off due to budget cuts. Inspired by Elvin Charles Stakman, he returns to school study under Stakman, who teaches him about breeding pest-resistent plants.
</li>
<li>
<strong>1941</strong> - Tries to enroll in the military after the Pearl Harbor attack, but is rejected. Instead, the military asked his lab to work on waterproof glue, DDT to control malaria, disinfectants, and other applied science.
</li>
<li>
<strong>1942</strong> - Receives a Ph.D. in Genetics and Plant Pathology
</li>
<li>
<strong>1944</strong> - Rejects a 100% salary increase from Dupont, leaves behind his pregnant wife, and flies to Mexico to head a new plant pathology program. Over the next 16 years, his team breeds 6,000 different strains of disease resistent
wheat - including different varieties for each major climate on Earth.
</li>
<li>
<strong>1945</strong> - Discovers a way to grown wheat twice each season, doubling wheat yields
</li>
<li>
<strong>1953</strong> - crosses a short, sturdy dwarf breed of wheat with a high-yeidling American breed, creating a strain that responds well to fertilizer. It goes on to provide 95% of Mexico's wheat.
</li>
<li>
<strong>1962</strong> - Visits Delhi and brings his high-yielding strains of wheat to the Indian subcontinent in time to help mitigate mass starvation due to a rapidly expanding population
</li>
<li><strong>1970</strong> - receives the Nobel Peace Prize</li>
<li>
<strong>1983</strong> - helps seven African countries dramatically increase their maize and sorghum yields
</li>
<li>
<strong>1984</strong> - becomes a distinguished professor at Texas A&M University
</li>
<li>
<strong>2005</strong> - states "we will have to double the world food supply by 2050." Argues that genetically modified crops are the only way we can meet the demand, as we run out of arable land. Says that GM crops are not inherently dangerous
because "we've been genetically modifying plants and animals for a long time. Long before we called it science, people were selecting the best breeds."
</li>
<li><strong>2009</strong> - dies at the age of 95.</li>
</ul>
</div>
Michael, answer by Lee Taylor is a nice one, in case you do not want a div element wrapping the list you can directly apply the "list" class to the element:
<ul class="list">
<li>Your list here</li>
<li>Your list here</li>
<li>Your list here</li>
<li>Your list here</li>
<li>Your list here</li>
</ul>
As well you must be sure that the unordered list is wrapped inside a container wider in size than element.
How do you fix the size of the image in this code?
If you see it in my project,this is coming just in the middle of my footer,between the instagram icon nd my h6.
I also would like to ask some tips for the title,I find it bit boring,could you help me with this please guys!
How do you fix the size of the image in this code?
If you see it in my project,this is coming just in the middle of my footer,between the instagram icon nd my h6.
I also would like to ask some tips for the title,I find it bit boring,could you help me with this please guys!
<!DOCTYPE html>
<html>
<head>
<title>This is London</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<link href="https://fonts.googleapis.com/css?family=ZCOOL+XiaoWei&display=swap" rel="stylesheet">
</head>
<body>
<div id="nav">
<ul>
<li><a class="active" href="#home">Home</a></li>
<li>Getting around</li>
<li>About</li>
<li>Contact</li>
</ul>
</div> <!-- End of nav -->
<div id="header">
<div id="header-text">
<h2>
Visiting London has never been easier with these ideas.
</h2>
<p>The capital of the United Kingdom is a thriving multicultural metropolis. The contrast between the spectacular historic sights and the lively cultural scene makes a visit to London an interesting and exciting adventure. </p>
</div> <!-- End of header-text -->
</div> <!-- End of header -->
<div id="middle">
<div id="mid-text">
<h1>- Getting around in London -</h1>
<h5>One of the world's most visited cities, London has something for everyone: from history and culture to fine food and good times.</h5>
<p>Immersed in history, London's rich seams of eye-opening antiquity are everywhere. The city's buildings are striking milestones in a unique and beguiling biography, and a great many of them – the Tower of London, Westminster Abbey, Big Ben – are instantly recognisable landmarks. There’s more than enough innovation (the Shard, the Tate Modern extension, the Sky Garden) to put a crackle in the air, but it never drowns out London’s seasoned, centuries-old narrative. Architectural grandeur rises up all around you in the West End, ancient remains dot the City and charming pubs punctuate the historic quarters, leafy suburbs and river banks. Take your pick.
Art & Culture
A tireless innovator of art and culture, London is a city of ideas and the imagination. Londoners have always been fiercely independent thinkers (and critics), but until not so long ago people were suspicious of anything they considered avant-garde. That’s in the past now, and the city’s creative milieu is streaked with left-field attitude, whether it's theatrical innovation, contemporary art, pioneering music, writing, poetry, architecture or design. Food is another creative arena that has become a tireless obsession in certain circles.
Diversity
This city is deeply multicultural, with one in three Londoners foreign-born, representing 270 nationalities and 300 tongues. The UK may have voted for Brexit (although the majority of Londoners didn't), but for now London remains one of the world's most cosmopolitan cities, and diversity infuses daily life, food, music and fashion. It even penetrates intrinsically British institutions; the British Museum and Victoria & Albert Museum have collections as varied as they are magnificent, while the flavours at centuries-old Borough Market run the full global gourmet spectrum.
A Tale of Two Cities
London is as much about wide-open vistas and leafy landscape escapes as it is high-density, sight-packed urban exploration. Central London is where the major museums, galleries and most iconic sights congregate, but visit Hampstead Heath or the Queen Elizabeth Olympic Park to flee the crowds and frolic in wide open green expanses. You can also venture further out to Kew Gardens, Richmond or Hampton Court Palace for beautiful panoramas of riverside London followed by a pint in a quiet waterside pub.</p>
<div id="img-mid">
<a href="https://goo.gl/maps/PSDhvQ25fRZBqWHC8" target="_blank">
<img src="images/Feature-images.jpg" alt="Map">
</a>
</div><!-- End of img-mid -->
</div> <!-- End of mid-text -->
</div> <!-- End of middle -->
<div id="footer">
<div class="credits">
<div class="credits_left">
<h6> Designed by Alba Heidari</h6>
</div>
<div class="credits_right"><img src="https://www.arct.cam.ac.uk/images/instagram-icon/image" class="social_icon">
</div>
</div> <!-- End of footer -->
</body>
</html>
Add this to your css file:
#img-mid{
height: 300px;
width: 300px;
}
#img-mid img{
max-width: 100%;
max-height: 100%;
min-height: 100%;
min-width: 100%;
object-fit: cover;
}
I add two titles: "Education" & "My Hobbies"
Why are they not aligned?
I have went thru the code and managed to fix some nesting list issues but that did not fix above problem.
<body>
<h1>Vlad Myshchuk</h1>
<p><em><strong>Software Engineer</strong><br>Full Stack Developer</em></p>
<p>I am self-taught student of programming. My focus as a Software Engineer is primarily on Full Stack Software & Web Development. I hold a degree in Accounting A.A.S. as well as Computer Information Systems A.A.S.</p>
<hr>
<h3>Education</h3>
<ul>
<li>Hudson Valley Community College</li>
<li>State University of New York College at Oneonta</li>
<li>Recent courses at Udemy:
<ul>
<li>The Complete 2019 Web Development Bootcamp with Professor Angela Yu</li>
</ul>
</li>
<li>Books
<ul>
<li>Pragmatic Thinking and Learning by Andy Hunt</li>
<li>Code: The Hidden Language of Computer Hardware and Software by Charles Petzold</li>
<li>Code Complete: A Practical Handbook of Software Construction by Steve McConell</li>
<li>Clean Code: A Handbook of Agile Software Cragsmanship by Robert C. Martin</li>
</ul>
</li>
<h3>My Hobbies</h3>
<ol>
<li>Completing algorithms on codechef.com and codingame.com</li>
<li>Practice a variety of meditation and yoga.</li>
<li>Weight training and high intensity interval training (HIIT).</li>
<li>Reading books on psychology as well as philosophy.</li>
<li>Listening to educational podcasts and recorded lectures.</li>
</ol>
</body>
I expect both headers to be positioned to the very left.
You did a silly mistake dear. You have to just complete
</ul>
tag before
<h3>My Hobbies</h3>
after correct it your problem will be solve.
Just a typo i expect, there was an unescaped h3 tag. There's a handy tool you can use to check: https://www.aliciaramirez.com/closing-tags-checker/
<body>
<h1>Vlad Myshchuk</h1>
<p><em><strong>Software Engineer</strong><br>Full Stack Developer</em></p>
<p>I am self-taught student of programming. My focus as a Software Engineer is primarily on Full Stack Software & Web Development. I hold a degree in Accounting A.A.S. as well as Computer Information Systems A.A.S.</p>
<hr>
<h3>Education</h3>
<ul>
<li>Hudson Valley Community College</li>
<li>State University of New York College at Oneonta</li>
<li>Recent courses at Udemy:
<ul>
<li>The Complete 2019 Web Development Bootcamp with Professor Angela Yu</li>
</ul>
</li>
<li>Books
<ul>
<li>Pragmatic Thinking and Learning by Andy Hunt</li>
<li>Code: The Hidden Language of Computer Hardware and Software by Charles Petzold</li>
<li>Code Complete: A Practical Handbook of Software Construction by Steve McConell</li>
<li>Clean Code: A Handbook of Agile Software Cragsmanship by Robert C. Martin</li>
</ul>
</li>
</ul>
<h3>My Hobbies</h3>
<ol>
<li>Completing algorithms on codechef.com and codingame.com</li>
<li>Practice a variety of meditation and yoga.</li>
<li>Weight training and high intensity interval training (HIIT).</li>
<li>Reading books on psychology as well as philosophy.</li>
<li>Listening to educational podcasts and recorded lectures.</li>
</ol>
</body>
how can I make a paragraph format look like this
using this code?
Thank you! :)
<div class="col-sm-6 col-md-7 col-lg-7 sec-about-text">
<p> Healthy Endings came to life with the best intentions to create all natural snacks, organic when possible, raw and vegan with absolutely no preservatives. We love to snack periodically through out the day and we're always working on creating the most delicious and nutritious snacks to satisfy those cravings. "What fun is snacking if the snacks donít taste orgasmically good!"</p>
<p> Cherie Spencer, the founder and creator
of Healthy Endings snacks received her
certification as a Health Educator from
the world renowned Hippocrates Health
Institute in West Palm Beach, Florida and holds a Bachelors in Healthcare Administration from Florida Atlantic University. She also received a culinary certification from Atlantic County VoTech and holds a SafeServ Food Manager Certification/License. She is a holistic chef specializing in raw, living foods and loves to prepare and share healthy food with family and friends.</p>
</div>
Here is a jsfiddle showing the basic process: https://jsfiddle.net/jq16sfjg/
.floated {
margin: 10px;
float: right;
}
I will leave it up to you to style the font, whitespace, and colors.
Basically, you just need to float the text that breaks the paragraph to the right.
i have the following content
<div class="venue-description">
<h4>Description</h4>
Nandi Hills are currently undergoing a multi-crore development, including a one crore renovation of the Tipu Fort, via private-public partnership to transform the hills into a tourist hub. The Department of Horticulture is setting up a food court modeled after one in Singapore at a cost of nearly one crore at the hill station.Various varieties of vegetarian and continental food, beverages, bakery products, ice-creams and fresh fruit juices will be available.
view more
</div>
I want to move the a tag to a new line. Using display: block will create a full width link which is bad for usability.
i do not want to use a <br/> tag
DEMO
a::before {
content:'';
display:block;
}
Why dont you just put
<br/>
after
<h4>Description</h4>
Nandi Hills are currently undergoing a multi-crore development, including a one crore renovation of the Tipu Fort, via private-public partnership to transform the hills into a tourist hub. The Department of Horticulture is setting up a food court modeled after one in Singapore at a cost of nearly one crore at the hill station.Various varieties of vegetarian and continental food, beverages, bakery products, ice-creams and fresh fruit juices will be available.