How can we have image in new line and h2 in other line keeping all style in h2
we can see that both image and h2 are float together
we want to have both in different line
please give proper clarification so all other programmer also refer and use in there code
question is very simple have to use float and clear property but dont know where perfectly so please check it and reply as soon as possible
we have seen such issue many times
#back-to-top {
position: fixed;
bottom: 20px;
right: 20px;
}
h1, h2
{
background-color: black;
color: white;}
h1{
text-align: center;
}
h2{display:inline-block;
clear: both;}
img{
clear:both;
}
<!doctype html>
<html lang= "en">
<head>
<meta charset= "UTF-8">
<title>Recipe project - Module 1</title>
</head>
<body>
<h1 id = "top">My favorite Recipes: </h1>
<nav>
<ul>
<li><a href=#first>Panipuri</a></li>
<li><a href=#second>Handvo</a></li>
<li><a href=#third>Dosa</a></li>
</ul>
</nav>
<article>
<h2 id="first">Panipuri</h2>
<img src= "https://qph.ec.quoracdn.net/main-qimg-14f6bc4a3b89ae33a33107a9b56b38e7" alt="delicious pani puri plate" width= 350 title="once you have it you will forget all the items">
<br>
<br>
<span><strong>List of Ingredients:</strong></span>
<ul>
<li>Kothamir Pani</li>
<li>Dates Pani</li>
<li>Puri</li>
<li>Masala Ragda</li>
</ul>
<q>Have it and forget everthing</q>
<p><strong>Steps:</strong></p>
<ol>
<li>Make Masal Ragda</li>
<li>make Kothmir pani</li>
<li>make Dates pani</li>
<li>take Puri and start eating</li>
</ol></article>
<br>
<article>
<h2 id="second">Handvo</h2>
<img src="http://somethingscookingwithalpa.com/wp-content/uploads/2017/11/handvo-WEB.jpg" alt = "handvo plate" width=350 title="handvo really teasty have it">
<br>
<br>
<span><strong>List of Ingredients:</strong></span>
<ul>
<li>1 cup rice</li>
<li>1 cup yellow moong dal</li>
<li>3 cups buttermilk</li>
<li>3-4 green chillies finely chopped</li>
<li>3 Tbsp coriander chopped</li>
</ul>
<p> Follow the step to have <q> A traditional Gujarati savoury cake. It is made with a combinations of lentils, rice and buttermilk</q></p>
<p><strong>Steps:</strong></p>
<ol>
<li>Take butter milk Add salt, soda and flour, mix well,Keep it aside for 6-7 hours.</li>
<li>Grate bottle gourd and squeeze out excess water,add gourd,coriander,green chillies</li>
<li>Heat oil in a pan,urad & channa dals and seeds,Allow to splutter,pouin the batter and mix it thoroughly.</li>
<li>Check by inserting a skewer,which should come out clean. Slice into wedges and serve hot.</li>
</ol>
</article>
<article>
<h2 id="third">Dosa</h2>
<img src="https://cdn.vox-cdn.com/thumbor/oRMz04HKckdj5s4aPAImXQHJ1d0=/0x0:2808x1872/1200x800/filters:focal(1180x712:1628x1160)/cdn.vox-cdn.com/uploads/chorus_image/image/56417501/Dosa2.1504026967.jpg" alt= "dosa in plate for dinner with chatni" width=350>
<br>
<br>
<span><strong>List of Ingredients:</strong></span>
<ul>
<li>3/4 cup Parboiled and 3/4 cup Regular Rice</li>
<li>1/2 cup Urad Dal and 1/2 tablespoon Chana Dal</li>
<li>1/4 teaspoon Fenugreek Seeds (methi dana)</li>
<li>Water as needed ,Salt to taste,Oil for shallow frying</li>
<li>3 Tbsp coriander chopped</li>
</ul>
<p> try it <q> All you need is love. But a little dosa doesn’t hurt.</q></p>
<p><strong>Steps:</strong></p>
<ol>
<li> The batter should be fluffy and not very thick. Transfer it to a large container</li>
<li> Take all the ingredients to prepare the dosa batter. Rice, urad dal and fenugreek seeds are the main ingredients.</li>
<li> Apply 1-teaspoon oil around the edges of dosa .</li>
<li> Cook until the bottom surface turns light brown and the edges start to come upward.
</li>
</ol>
</article>
<a href=#top > <img id="back-to-top" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSKESsqyheQZhgMM0UMtRe39dEkePwmEL0TPgTwMnpFTZfSLxJh" alt= "back to top image" width=30></a>
</body>
</html>
Maybe you just want to change
h2{display:inline-block;
clear: both;}
img{
clear:both;
}
to
img{
display:block;
}
and remove those <br> tags instead?
I don't see any float property in your CSS. clear: both only works with float. The issue you have is because of the display:inline-block; set on the h2, so delete it and everything should work properly. You don't need the clear: both:
#back-to-top {
position: fixed;
bottom: 20px;
right: 20px;
}
h1,
h2 {
background-color: black;
color: white;
}
h1 {
text-align: center;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Recipe project - Module 1</title>
</head>
<body>
<h1 id="top">My favorite Recipes: </h1>
<nav>
<ul>
<li><a href=#first>Panipuri</a></li>
<li><a href=#second>Handvo</a></li>
<li><a href=#third>Dosa</a></li>
</ul>
</nav>
<article>
<h2 id="first">Panipuri</h2>
<img src= "https://qph.ec.quoracdn.net/main-qimg-14f6bc4a3b89ae33a33107a9b56b38e7" alt="delicious pani puri plate" width= 350 title="once you have it you will forget all the items">
<br>
<br>
<span><strong>List of Ingredients:</strong></span>
<ul>
<li>Kothamir Pani</li>
<li>Dates Pani</li>
<li>Puri</li>
<li>Masala Ragda</li>
</ul>
<q>Have it and forget everthing</q>
<p><strong>Steps:</strong></p>
<ol>
<li>Make Masal Ragda</li>
<li>make Kothmir pani</li>
<li>make Dates pani</li>
<li>take Puri and start eating</li>
</ol>
</article>
<br>
<article>
<h2 id="second">Handvo</h2>
<img src="http://somethingscookingwithalpa.com/wp-content/uploads/2017/11/handvo-WEB.jpg" alt="handvo plate" width=350 title="handvo really teasty have it">
<br>
<br>
<span><strong>List of Ingredients:</strong></span>
<ul>
<li>1 cup rice</li>
<li>1 cup yellow moong dal</li>
<li>3 cups buttermilk</li>
<li>3-4 green chillies finely chopped</li>
<li>3 Tbsp coriander chopped</li>
</ul>
<p> Follow the step to have <q> A traditional Gujarati savoury cake. It is made with a combinations of lentils, rice and buttermilk</q></p>
<p><strong>Steps:</strong></p>
<ol>
<li>Take butter milk Add salt, soda and flour, mix well,Keep it aside for 6-7 hours.</li>
<li>Grate bottle gourd and squeeze out excess water,add gourd,coriander,green chillies</li>
<li>Heat oil in a pan,urad & channa dals and seeds,Allow to splutter,pouin the batter and mix it thoroughly.</li>
<li>Check by inserting a skewer,which should come out clean. Slice into wedges and serve hot.</li>
</ol>
</article>
<article>
<h2 id="third">Dosa</h2>
<img src="https://cdn.vox-cdn.com/thumbor/oRMz04HKckdj5s4aPAImXQHJ1d0=/0x0:2808x1872/1200x800/filters:focal(1180x712:1628x1160)/cdn.vox-cdn.com/uploads/chorus_image/image/56417501/Dosa2.1504026967.jpg" alt="dosa in plate for dinner with chatni" width=350>
<br>
<br>
<span><strong>List of Ingredients:</strong></span>
<ul>
<li>3/4 cup Parboiled and 3/4 cup Regular Rice</li>
<li>1/2 cup Urad Dal and 1/2 tablespoon Chana Dal</li>
<li>1/4 teaspoon Fenugreek Seeds (methi dana)</li>
<li>Water as needed ,Salt to taste,Oil for shallow frying</li>
<li>3 Tbsp coriander chopped</li>
</ul>
<p> try it <q> All you need is love. But a little dosa doesn’t hurt.</q></p>
<p><strong>Steps:</strong></p>
<ol>
<li> The batter should be fluffy and not very thick. Transfer it to a large container</li>
<li> Take all the ingredients to prepare the dosa batter. Rice, urad dal and fenugreek seeds are the main ingredients.</li>
<li> Apply 1-teaspoon oil around the edges of dosa .</li>
<li> Cook until the bottom surface turns light brown and the edges start to come upward.
</li>
</ol>
</article>
<a href=#top> <img id="back-to-top" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSKESsqyheQZhgMM0UMtRe39dEkePwmEL0TPgTwMnpFTZfSLxJh" alt="back to top image" width=30></a>
</body>
</html>
add width: 100%; to h2 tag
#back-to-top {
position: fixed;
bottom: 20px;
right: 20px;
}
h1, h2
{
background-color: black;
color: white;}
h1{
text-align: center;
}
h2{display:inline-block;
clear: both;
width: 100%;}
img{
clear:both;
}
<!doctype html>
<html lang= "en">
<head>
<meta charset= "UTF-8">
<title>Recipe project - Module 1</title>
</head>
<body>
<h1 id = "top">My favorite Recipes: </h1>
<nav>
<ul>
<li><a href=#first>Panipuri</a></li>
<li><a href=#second>Handvo</a></li>
<li><a href=#third>Dosa</a></li>
</ul>
</nav>
<article>
<h2 id="first">Panipuri</h2>
<img src= "https://qph.ec.quoracdn.net/main-qimg-14f6bc4a3b89ae33a33107a9b56b38e7" alt="delicious pani puri plate" width= 350 title="once you have it you will forget all the items">
<br>
<br>
<span><strong>List of Ingredients:</strong></span>
<ul>
<li>Kothamir Pani</li>
<li>Dates Pani</li>
<li>Puri</li>
<li>Masala Ragda</li>
</ul>
<q>Have it and forget everthing</q>
<p><strong>Steps:</strong></p>
<ol>
<li>Make Masal Ragda</li>
<li>make Kothmir pani</li>
<li>make Dates pani</li>
<li>take Puri and start eating</li>
</ol></article>
<br>
<article>
<h2 id="second">Handvo</h2>
<img src="http://somethingscookingwithalpa.com/wp-content/uploads/2017/11/handvo-WEB.jpg" alt = "handvo plate" width=350 title="handvo really teasty have it">
<br>
<br>
<span><strong>List of Ingredients:</strong></span>
<ul>
<li>1 cup rice</li>
<li>1 cup yellow moong dal</li>
<li>3 cups buttermilk</li>
<li>3-4 green chillies finely chopped</li>
<li>3 Tbsp coriander chopped</li>
</ul>
<p> Follow the step to have <q> A traditional Gujarati savoury cake. It is made with a combinations of lentils, rice and buttermilk</q></p>
<p><strong>Steps:</strong></p>
<ol>
<li>Take butter milk Add salt, soda and flour, mix well,Keep it aside for 6-7 hours.</li>
<li>Grate bottle gourd and squeeze out excess water,add gourd,coriander,green chillies</li>
<li>Heat oil in a pan,urad & channa dals and seeds,Allow to splutter,pouin the batter and mix it thoroughly.</li>
<li>Check by inserting a skewer,which should come out clean. Slice into wedges and serve hot.</li>
</ol>
</article>
<article>
<h2 id="third">Dosa</h2>
<img src="https://cdn.vox-cdn.com/thumbor/oRMz04HKckdj5s4aPAImXQHJ1d0=/0x0:2808x1872/1200x800/filters:focal(1180x712:1628x1160)/cdn.vox-cdn.com/uploads/chorus_image/image/56417501/Dosa2.1504026967.jpg" alt= "dosa in plate for dinner with chatni" width=350>
<br>
<br>
<span><strong>List of Ingredients:</strong></span>
<ul>
<li>3/4 cup Parboiled and 3/4 cup Regular Rice</li>
<li>1/2 cup Urad Dal and 1/2 tablespoon Chana Dal</li>
<li>1/4 teaspoon Fenugreek Seeds (methi dana)</li>
<li>Water as needed ,Salt to taste,Oil for shallow frying</li>
<li>3 Tbsp coriander chopped</li>
</ul>
<p> try it <q> All you need is love. But a little dosa doesn’t hurt.</q></p>
<p><strong>Steps:</strong></p>
<ol>
<li> The batter should be fluffy and not very thick. Transfer it to a large container</li>
<li> Take all the ingredients to prepare the dosa batter. Rice, urad dal and fenugreek seeds are the main ingredients.</li>
<li> Apply 1-teaspoon oil around the edges of dosa .</li>
<li> Cook until the bottom surface turns light brown and the edges start to come upward.
</li>
</ol>
</article>
<a href=#top > <img id="back-to-top" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSKESsqyheQZhgMM0UMtRe39dEkePwmEL0TPgTwMnpFTZfSLxJh" alt= "back to top image" width=30></a>
</body>
</html>
Related
This is about body mass index classification and each bmi grade have a suggest diet.
How can I create a function whether the div element is same with constant's object, while the constant have multiple object. If the element inside div is same as specific constant's object, then toggleClass(). I tried to use a if else and is() function but it doesn't work. The example is below:
$(document).ready(function(){
const grade = {
"underweight": "underweight",
"healthy": "healthy",
"overweight": "overweight",
"obese": "obesity",
"obeseI": "obese Grade I",
"obeseII": "obese Grade II",
"obeseIII": "obese Grade III"
};
if ($(".Classification").is(grade.underweight)){
$(".underweight").toggleClass('show');
} else if ($(".Classification").is(grade.normalweight)){
$(".normalweight").toggleClass('show');
} else if ($(".Classification").is(grade.overweight)){
$(".overweight").toggleClass('show');
} else if ($(".Classification").is(grade.obese)){
$(".overweight").toggleClass('show');
} else if ($(".Classification").is(grade.obeseI)){
$(".overweight").toggleClass('show');
} else if ($(".Classification").is(grade.obeseII)){
$(".overweight").toggleClass('show');
} else if ($(".Classification").is(grade.obeseIII)){
$(".overweight").toggleClass('show');
} else {
$(".underweight").toggleClass('hide');
$(".normalweight").toggleClass('hide');
$(".overweight").toggleClass('hide');
}
});
.underweight, .normalweight, .overweight{
display: none;
}
.show{
display: block;
}
.hide{
display: none;
}
<div class="gred">
<span>You are classified as</span>
<span class="Classification">unknown</span>
</div>
<div class="breakfast">
<div class="title"><i class="fas fa-bread-slice"></i> Breakfast</div>
<ul class="underweight">
<li>2 sandwich</li>
<li>Green chutney</li>
<li>1 cup milk</li>
<li>3 cashews</li>
<li>4 almonds</li>
<li>2 walnuts</li>
</ul>
<ul class="normalweight">
<li>1.5c whole grain</li>
<li>1/8 cup walnuts</li>
<li>1 packet Stevia</li>
</ul>
<ul class="overweight">
<li>3 egg whites</li>
<li>1 toasted bread</li>
<li>1/2 low fat milk</li>
</ul>
</div>
<div class="lunch">
<div class="title"><i class="fas fa-pizza-slice"></i> Lunch</div>
<ul class="underweight">
<li>1 cup arhar dal</li>
<li>1 cup potato curry</li>
<li>3 chapatti</li>
<li>1/2 cup rice</li>
<li>1/2 cup low fat curd</li>
</ul>
<ul class="normalweight">
<li>Sunshine salad</li>
</ul>
<ul class="overweight">
<li>1 cup arhar dal</li>
<li>1 chapatti</li>
<li>1/2 low fat curd</li>
<li>salad</li>
</ul>
</div>
<div class="dinner">
<div class="title"><i class="fas fa-fish"></i> Dinner</div>
<ul class="underweight">
<li>1.5 cup chicken curry</li>
<li>3 chapatti</li>
<li>Salad</li>
</ul>
<ul class="normalweight">
<li>Baked buffalo wings</li>
<li>5 stalks celery</li>
<li>2T light bleu cheese dressing</li>
</ul>
<ul class="overweight">
<li>1 cup pumpkin</li>
<li>1 chapatti</li>
<li>Salad</li>
</ul>
</div>
There were a few problems with the code. .is() is not the same as ===. You are doing string comparisons, so you need to be using ===.
Also, the classes were not necessary. jQuery comes with a prebuilt show() and hide() that take care of that for you. Plus, using toggleClass like this can be problematic when all you really want to do is either show it or hide it.
$(document).ready(function() {
const grade = {
"underweight": "underweight",
"healthy": "healthy",
"overweight": "overweight",
"obese": "obesity",
"obeseI": "obese Grade I",
"obeseII": "obese Grade II",
"obeseIII": "obese Grade III"
};
$(".underweight, .normalweight, .overweight").hide(); // hide everything to start
let c = $(".Classification").text().trim(); // get the text in the .Classification span
if (c !== 'underweight' && c !== 'normalweight') c = 'overweight'; // if its not underweight or normalweight it's considered overweight
c = `.${c}`; // turn it into a className
if ($(c).length > 0) $(c).show() // if the classname exists (like .underweight) show it
});
Example with buttons for testing
In the example below, I added buttons so you could see how the layout changes depending on the classification.
$(document).ready(function() {
const grade = {
"underweight": "underweight",
"healthy": "healthy",
"overweight": "overweight",
"obese": "obesity",
"obeseI": "obese Grade I",
"obeseII": "obese Grade II",
"obeseIII": "obese Grade III"
};
populateMenu();
})
function populateMenu() {
$(".underweight, .normalweight, .overweight").hide(); // hide everything to start
let c = $(".Classification").text().trim(); // get the text in the .Classification span
if (c !== 'underweight' && c !== 'normalweight') c = 'overweight'; // if its not underweight or normalweight it's considered overweight
c = `.${c}`; // turn it into a className
if ($(c).length > 0) $(c).show() // if the classname exists (like .underweight) show it
};
// development function, can be removed
function changeto(v) {
$(".Classification").text(v);
populateMenu()
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="gred">
<span>You are classified as</span>
<span class="Classification">unknown</span>
</div>
<!-- Development only for testing - can be removed -->
<div>
Change to <button onclick='changeto("underweight")'>underweight</button> <button onclick='changeto("normalweight")'>normalweight</button> <button onclick='changeto("overweight")'>overweight</button>
</div>
<div class="breakfast">
<div class="title"><i class="fas fa-bread-slice"></i> Breakfast</div>
<ul class="underweight">
<li>2 sandwich</li>
<li>Green chutney</li>
<li>1 cup milk</li>
<li>3 cashews</li>
<li>4 almonds</li>
<li>2 walnuts</li>
</ul>
<ul class="normalweight">
<li>1.5c whole grain</li>
<li>1/8 cup walnuts</li>
<li>1 packet Stevia</li>
</ul>
<ul class="overweight">
<li>3 egg whites</li>
<li>1 toasted bread</li>
<li>1/2 low fat milk</li>
</ul>
</div>
<div class="lunch">
<div class="title"><i class="fas fa-pizza-slice"></i> Lunch</div>
<ul class="underweight">
<li>1 cup arhar dal</li>
<li>1 cup potato curry</li>
<li>3 chapatti</li>
<li>1/2 cup rice</li>
<li>1/2 cup low fat curd</li>
</ul>
<ul class="normalweight">
<li>Sunshine salad</li>
</ul>
<ul class="overweight">
<li>1 cup arhar dal</li>
<li>1 chapatti</li>
<li>1/2 low fat curd</li>
<li>salad</li>
</ul>
</div>
<div class="dinner">
<div class="title"><i class="fas fa-fish"></i> Dinner</div>
<ul class="underweight">
<li>1.5 cup chicken curry</li>
<li>3 chapatti</li>
<li>Salad</li>
</ul>
<ul class="normalweight">
<li>Baked buffalo wings</li>
<li>5 stalks celery</li>
<li>2T light bleu cheese dressing</li>
</ul>
<ul class="overweight">
<li>1 cup pumpkin</li>
<li>1 chapatti</li>
<li>Salad</li>
</ul>
</div>
is .Classification a div which has the value representing a grade?
something like this, I presume:
<div class="Classification">underweight</div>
if that is the case, I believe you must access the text content inside of that div, and not only select it as an object.
if ($(".Classification").text().is(grade.underweight)){
$(".underweight").toggleClass('show');
try it with one statement and let's see what happens.
I'm learning HTML online through my community college and is hard.
"In this assignment you will create an HTML document that includes the div element to showcase your favorite movie. You will include the movie title, the year the movie was released, the main star or stars and their character(s) name. The div element will render on the right side of the page. See below for an example of what your .html should look like.
this is my code so far. I need some guidance on who to accomplish shifting the text with the border to the right without CSS
<div align="right" style="border: 1px solid black" hj>
<h1><span>Inception</span></h1>
<h2><span> Release year: 2010 </span></h2>
<h3><span> Leonardo DiCaprio as Dom Cobb </span></h3>
</div>
<h2> My Three Favorite musical acts are: </h2>
<ul>
<li>Korn</li>
<li>Bring Me the Horizon </li>
<li> Linkin Park </li>
</ul>
<h2> My Three Favorite Foods are: </h2>
<ol type="i">
<li>Pizza</li>
<li>Ceviche</li>
<li>Burger</li>
</ol>
<h2> My dream Vacation is: </h2>
<p> Europe </p>
<dl> My dream vacation would be to visit europe and it's major cities. Paria, London, Berlin just to name a few. </dl>
It seems to work like this.
I also improved your <dl> element, which was not correctly written, by adding the <dt> and <dd> tags inside.
Cheers
<!DOCTYPE html>
<html>
<head>
<title>Page title</title>
</head>
<body>
<div style="border: 1px solid black;float:right;width:300px;padding:10px;">
<h1><span>Inception</span></h1>
<h2><span> Release year: 2010 </span></h2>
<h3><span> Leonardo DiCaprio as Dom Cobb </span></h3>
</div>
<div style="float:left;margin-left: 10px;">
<h2> My Three Favorite musical acts are: </h2>
<ul>
<li>Korn</li>
<li>Bring Me the Horizon </li>
<li> Linkin Park </li>
</ul>
<h2> My Three Favorite Foods are: </h2>
<ol type="i">
<li>Pizza</li>
<li>Ceviche</li>
<li>Burger</li>
</ol>
<h2> My dream Vacation is: </h2>
<dl>
<dt>Europe</dt>
<dd>My dream vacation would be to visit europe and it's major cities. Paria, London, Berlin just to name a few.</dd>
</dl>
</div>
</body>
</html>
try this :
<div align="right" style="border: 1px solid black;float:right;width:300px" hj>
<h1><span>Inception</span></h1>
<h2><span> Release year: 2010 </span></h2>
<h3><span> Leonardo DiCaprio as Dom Cobb </span></h3>
</div>
<div style=" float:left;">
<h2> My Three Favorite musical acts are: </h2>
<ul>
<li>Korn</li>
<li>Bring Me the Horizon </li>
<li> Linkin Park </li>
</ul>
<h2> My Three Favorite Foods are: </h2>
<ol type="i">
<li>Pizza</li>
<li>Ceviche</li>
<li>Burger</li>
</ol>
</div>
<h2> My dream Vacation is: </h2>
<p> Europe </p>
<dl> My dream vacation would be to visit europe and it's major cities. Paria, London,
Berlin just to name a few. </dl>
I am trying to connect wrapper to my css but I have no idea what I am doing wrong...here is the html index page:
<div id="wrapper">
<header><h1>Path of Light Yoga Studio</h1></header>
<nav><ul>
<li>Home</li>
<li>Classes</li>
<li>Schedule</li>
<li>Contact</li>
</ul></nav>
<div id="main">
<img src="http://marielaguereca.info/1510/yoga/yogadoor.jpg" alt="Yoga Door" height="300" width="225" class="floatleft">
<h2>Find Your Inner Light</h2>
<p> <span class="studio">Path of Life Yoga Studio</span> provides all levels of yoga pratice in a tranquil, peaceful environment. Whether you are new to yoga or an experienced practitioner, our dedicated instructors can develop a practice to meet your needs. Let your inner light shine at the <span class="studio">Path of Light Yoga Studio.</span></p>
<ul>
<li>Hatha, Vinyasa, and Resorative Yoga classes</li>
<li>Drop-ins welcome</li>
<li>Mats, blocks, and blankets provided</li>
<li>Relax in our Serenity Lounge before or after your class</li>
</ul>
<div class="clear"><span class="studio">Path of Light Yoga Studio</span>
<br>612 Serenity Way
<br>El Dorado, CA 96162
<br>
<br>888-555-5555</div>
<br>
<footer>
Copyright © 2019 Path of Light Yoga Studio
<br>mariela#guereca.com
</footer>
</div> <!---Main end --->
</div> <!---Wrapper end --->
Try this -
#wrapper {background-color: #F5F5F5;max-width: 1200px;width:100%;margin:0 auto;}
Change max-width to whatever you need. Hope this helps!
I have been trying to figure this out for awhile now and I have not been able to get this issue fixed. I am trying to figure out if this is a known issue or I am simply doing something wrong! :/
I am trying to get the page to break into a new page (when printing) on the last <h2> of the page. However it seems that it breaks after the first <h2> every time even though it shouldn't break until the last <h2> that fits on the page.
CSS Code:
#media print{
html, body {
width: 8.5in;
height: 11in;
margin: 0.5in;
}
h2:last-child {
page-break-after:always;
}
}
HTML CODE:
<meta charset="UTF-8" />
<title>Apple Bavarian Torte</title>
<script src="modernizr-1.5.js"></script>
<link href="dwbase.css" rel="stylesheet" />
<link href="dwlayout.css" rel="stylesheet" media="only screen"/>
<link href="dweffects.css" rel="stylesheet" media="only screen" />
<link href="dwprint.css" rel="stylesheet" media="only print" />
<header>
<div id="div1">
Recipes | Ingredients | Articles <br />
<input type="search" id="sbox" name="sfield" />
<input type="button" id="sbutton" value="Search" placeholder="search term" />
</div>
<div id="div2">
Password <br />
<input type="text" id="pwd" name="pwd" placeholder="password" />
<input type="button" id="lbutton" value="Log In" />
</div>
<div id="div3">
User Name <br />
<input type="text" id="user" name="user" placeholder="username" />
</div>
<h1>dessertWeb</h1>
<nav class="horizontal">
<ul>
<li>recipes</li>
<li>menus</li>
<li>holidays</li>
<li>market</li>
<li>shopping</li>
<li>columns</li>
<li>messages</li>
</ul>
</nav>
</header>
<section id="left">
<nav class="vertical">
<h1>Categories</h1>
<ul>
<li>Cakes</li>
<li>Candies</li>
<li>Chocolate</li>
<li>Cookies</li>
<li>Crisps</li>
<li>Crumbles</li>
<li>Custards</li>
<li>Frozen Treats</li>
<li>Gelatins</li>
<li>Liqueur Desserts</li>
<li>Marshmallows</li>
<li>Meringues</li>
<li>Mousse</li>
<li>Pies</li>
<li>Pralines</li>
<li>Sauces</li>
<li>Truffles</li>
</ul>
</nav>
<nav class="vertical">
<h1>Related Recipes</h1>
<ul>
<li>Apple Crisp</li>
<li>Apple Fingers</li>
<li>Apple Streudel</li>
<li>Cherry Torte</li>
<li>Fruit Pie</li>
<li>Parfait</li>
<li>Strawberry Torte</li>
</ul>
</nav>
</section>
<section id="center">
<article>
<hgroup>
<h1>Apple Bavarian Torte
<img src="star.png" alt="3 1/2 stars" />
<img src="star.png" alt="" />
<img src="star.png" alt=""" />
<img src="halfstar.png" alt="" />
</h1>
<h2>by Lemking</h2>
</hgroup>
<img id="dishimg" src="torte.jpg" alt="Torte image" width="250" />
<p>A classic European torte baked in a springform pan. Cream cheese,
sliced almonds, and apples make this the perfect holiday treat
(12 servings).
</p>
<p>Rate/Review | Review Page</p>
</article>
<aside>
<h1>Recipe Box</h1>
<ul>
<li>Add to Recipe Box</li>
<li>Add to Shopping List</li>
<li>Share Recipe</li>
<li>Add to Menu</li>
<li>Customize Recipe</li>
<li>Share/Email</li>
</ul>
</aside>
<h2>Ingredients</h2>
<ul>
<li>1/2 cup butter</li>
<li>1/3 cup white sugar</li>
<li>1/4 teaspoon vanilla extract</li>
<li>1 cup all-purpose flour</li>
<li>1 (8 ounce) package cream cheese</li>
<li>1/4 cup white sugar</li>
<li>1 egg</li>
<li>1/2 teaspoon vanilla extract</li>
<li>6 apples - peeled, cored, and sliced</li>
<li>1/3 cup white sugar</li>
<li>1/2 teaspoon ground cinnamon</li>
<li>1/4 cup sliced almonds</li>
</ul>
<h2>Directions</h2>
<ol>
<li>Preheat oven to 450° F (230° C).</li>
<li>Cream together butter, sugar, vanilla, and flour.</li>
<li>Press crust mixture into the flat bottom of a 9-inch springform pan.
Set aside.</li>
<li>In a medium bowl, blend cream cheese and sugar. Beat in egg and vanilla.
Pour cheese mixture over crust.</li>
<li>Toss apples with sugar and cinnamon. Spread apple
mixture over all.</li>
<li>Bake for 10 minutes. Reduce heat to 400° F (200° C) and continue
baking for 25 minutes.</li>
<li>Sprinkle almonds over top of torte. Continue baking until lightly browned.
Cool before removing from pan.</li>
</ol>
</section>
<section id="right">
<h1>Reviews</h1>
<blockquote>
<p>
<img src="star.png" alt="4 stars" /> <img src="star.png" alt="" />
<img src="star.png" alt="" /> <img src="star.png" alt="" />
</p>
<p>I loved the buttery taste of the crust which complements the apples
very nicely.</p>
<p>
— Reviewed on Sep. 22, 2014 by MMASON.
</p>
</blockquote>
<blockquote>
<p>
<img src="star.png" alt="2 stars" /> <img src="star.png" alt="" />
</p>
<p>Nothing special. I like the crust, but there was a little too much
of it for my taste, and I liked the filling but there was too little
of it. I thought the crunchy apples combined with the sliced almonds
detracted from the overall flavor.</p>
<p>
— Reviewed on Sep. 1, 2014 by GLENDACHEF.
</p>
</blockquote>
<blockquote>
<p>
<img src="star.png" alt="3 1/2 stars" /> <img src="star.png" alt="" />
<img src="star.png" alt="" /> <img src="halfstar.png" alt="" />
</p>
<p>Delicious!! I recommend microwaving the apples for 3 minutes
before baking, to soften them. Great dessert - I'll be making it again
for the holidays.</p>
<p>
— Reviewed on August 28, 2014 by BBABS.
</p>
</blockquote>
</section>
<footer>
dessertWeb © 2014 English (US)
<span>
About
Developers
Privacy
Terms
Help
</span>
</footer>
What you're looking for is "SECTION > H2:last-of-type", not "H2:last-child", because the OL after the H2 is the last child of their parent.
I had to specifically name the one due to myself not being able to grab the last < h2> so I used this code:
h2:nth-last-child(2) {
page-break-before:always;
}
Here's my code:
<!DOCTYPE html>
<html>
<head><title>name</title></head>
<body background="bg.jpg">
<h1 align=center>About me</h1>
<center><img src="barons.jpg" height="300" width="450" vspace="20"/></center>
<h3>Basic Info</h3>
<ul type="circle">
<li>I love to play baseball</li>
<li>I go to - High School</li>
<li>My favorite type of music is -</li>
<li>I love writing computer programs</li>
</ul>
<h3>Educational Background</h3>
<ul type="circle">
<li>I attended -</li>
<li>I maintained a - GPA while I was there</li>
<li>I attended - School for 6th grade</li>
<li>I attended - school for 7th and 8th grade</li>
<li>I now attend - School</li>
</ul>
<h3>Favorite Sports Teams</h3>
<ul type="circle">
<li>-(Baseball)</li>
<li>-(Football)</li>
<li>-(Football and Baseball)</li>
<li>-(Football and Basketball)</li>
</ul>
</body>
</html>
I'm trying to have all three unordered lists and their headers be at the same height on the page as my image, but to the left of it. I tried <br clear="left"/> in many places, but it didn't work.
You'll need to wrap both the text and the image into one div that you can then center. eg.
<div style="margin:0 auto; width:500px">
<img src="xxx" style="float:right; width:200px;" />
<div style="width:300px float:left;">
Insert text here...
</div>
</div>
Obviously, you would use classes instead of inline style.
Check the jsbin over here http://jsbin.com/zatetu/1/edit
Check the output at http://jsbin.com/zatetu/1
HTML CODE
<!DOCTYPE html>
<html>
<head><title>Jeff Koppenhoefer</title></head>
<body background="bg.jpg">
<style type="text/css">
.floatDiv{
float:left;
margin:10px;
}
</style>
<h1 align=center>About me</h1>
<div class="floatDiv">
<img src="barons.jpg" height="300" width="450" vspace="20"/>
</div>
<div class="floatDiv">
<h3>Basic Info</h3>
<ul type="circle">
<li>I love to play baseball</li>
<li>I go to Hilliard Davidson High School</li>
<li>My favorite type of music is rap</li>
<li>I love writing computer programs</li>
</ul>
</div>
<div class="floatDiv">
<h3>Educational Background</h3>
<ul type="circle">
<li>I attended Cypress Christian School through 5th grade</li>
<li>I maintained a 4.0 GPA while I was there</li>
<li>I attended Tharp 6th Grade School for 6th grade</li>
<li>I attended Weaver Middle School for 7th and 8th grade</li>
<li>I now attend Hilliard Davidson High School</li>
</ul>
</div>
<div class="floatDiv">
<h3>Favorite Sports Teams</h3>
<ul type="circle">
<li>St. Louis Cardinals (Baseball)</li>
<li>Pittsburgh Steelers (Football)</li>
<li>Davidson Wildcats (Football and Baseball)</li>
<li>OSU Buckeyes (Football and Basketball)</li>
</ul>
</div>
</body>
</html>
You could use a table and adjust the pictures size and cell sizelike we learned in programming class. Hit me up if you're interested in some programming activities at school. You should know who I am.
<!DOCTYPE html>
<html>
<head><title>Jeff Koppenhoefer</title></head>
<body background="bg.jpg">
<h1 align=center>About me</h1>
<table>
<tr>
<td><h3>Basic Info</h3>
<ul type="circle">
<li>I love to play baseball</li>
<li>I go to Hilliard Davidson High School</li>
<li>My favorite type of music is rap</li>
<li>I love writing computer programs</li>
</ul>
</td>
<td><img src="barons.jpg"/></td>
</table>
<h3>Educational Background</h3>
<ul type="circle">
<li>I attended Cypress Christian School through 5th grade</li>
<li>I maintained a 4.0 GPA while I was there</li>
<li>I attended Tharp 6th Grade School for 6th grade</li>
<li>I attended Weaver Middle School for 7th and 8th grade</li>
<li>I now attend Hilliard Davidson High School</li>
</ul>
<h3>Favorite Sports Teams</h3>
<ul type="circle">
<li>St. Louis Cardinals (Baseball)</li>
<li>Pittsburgh Steelers (Football)</li>
<li>Davidson Wildcats (Football and Baseball)</li>
<li>OSU Buckeyes (Football and Basketball)</li>
</ul>
</body>
</html>