How do I align a list of links/picture on the right side of the page, and stop them from overlapping?How to align a <div> to the middle (horizontally/width) of the pageHow to align 3 divs (left/center/right) inside another div?Zend Framework layout or view lagHow do I right align div elements?CSS - align element to the right of a centered div without overlapping/absolute positioning?How to Right-align flex item?Divs arrangement in the pageCannot display HTML stringInsert array connected to foreach loop into databaseInsert array into relational-database only work with data in the array that already exist in the database
Why is there not a willingness from the world to step in between Pakistan and India?
Many many thanks
Fan speed and power consumption
Are strlen optimizations really needed in glibc?
rationalizing sieges in a modern/near-future setting
Can I take a boxed bicycle on a German train?
Does NASA use any type of office/groupware software and which is that?
Multiple delayed triggers from Massacre Girl interaction
Why does Windows store Wi-Fi passwords in a reversible format?
Notice period 60 days but I need to join in 45 days
What stops you from using fixed income in developing countries?
Will removing shelving screws from studs damage the studs?
What is the name of this plot that has rows with two connected dots?
Force SQL Server to use fragmented indexes?
To what extent should we fear giving offense?
Talk interpreter
What is this fighter jet at Weymouth NAS?
74S vs 74LS ICs
According to UK government, Parliament cannot stop a no-deal Brexit: Could this also be used to push through the agreement agreed by Theresa May?
What's the point of fighting monsters in Zelda BoTW?
Could the UK amend the European Withdrawal Act and revoke the Article 50 invocation?
Is the internet in Madagascar faster than in UK?
Cooking Scrambled Eggs ends up with excess liquid
Shift lens vs move body?
How do I align a list of links/picture on the right side of the page, and stop them from overlapping?
How to align a <div> to the middle (horizontally/width) of the pageHow to align 3 divs (left/center/right) inside another div?Zend Framework layout or view lagHow do I right align div elements?CSS - align element to the right of a centered div without overlapping/absolute positioning?How to Right-align flex item?Divs arrangement in the pageCannot display HTML stringInsert array connected to foreach loop into databaseInsert array into relational-database only work with data in the array that already exist in the database
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty margin-bottom:0;
0
I want to generate a list of links to other pages for my website (using a mix of PHP/HTML/CSS) and align them on the right side of the page without them overlapping. I am able to generate the links/pictures, but the problem I am having is they overlap on top of each other when I try to use position absolute.
<style>
body
background: lightblue;
margin: 25px;
.title
font-size: 20px;
.recipe
width: 60%;
.related
position: absolute;
float: right;
right: 10px;
width: 25%;
list-style-position: inside;
.a
float: right;
right: 5px;
.relatedImages
img
width: 15%;
height: 17%;
</style>
<title><?php $recipeInfo['title']; ?></title>
<body>
<br>
<?php
//Title and image of recipe
echo '<br><br><div class="title">' .$recipeInfo['title']. '</div><br>
<div class="mainImage"><image src="' . $recipeInfo['image']. '"> </div>
<br><h2> Ingredients </h2>';
//Unfinished (Needs to be styled correctly)
//Generating related links with clickable images
for($r = 0; $r < $relatedLinks[$r]; $r++)
echo '<div class = "related">
<a href = "recipeInfo.php?id='.$relatedLinks[$r]['id']. '">'.$relatedLinks[$r]['title'].'<br>
<image src = "https://spoonacular.com/recipeImages/' . $relatedLinks[$r]['image'] . '"></a>
<br>
</div>';
;
;
//Loop that generates a list of the ingredients used
for($i = 0; $i < $recipeInfo['extendedIngredients'][$i]; $i++)
$amount = $recipeInfo['extendedIngredients'][$i]['amount'];
$unit = $recipeInfo['extendedIngredients'][$i]['unit'];
$ingrName = $recipeInfo['extendedIngredients'][$i]['name'];
echo '<div class = "ingredients">' . $amount , " " , $unit , " " , $ingrName .' </div>';
//Instructions with error handling for no instructions found
$instructions = $recipeInfo['instructions'];
if($instructions == "")
$instructions = "Whoops, there are no available instructions for this recipe.";
echo '<br><h2> Insructions </h2>
<div class="recipe">' . $instructions . '</div><br>';
//Unfinished, but will hopefully print a better list of instructions than just a dense paragraph
//for($j = 0; $j < sizeOf($recipeInstr); $j++)
// echo '<h3>' .$recipeInstr[$j]['name'].'</h3>';
// for($n = 0; $n < $recipeInstr[$j]['steps']; $n++)
// echo '<div class="instruction">'. $n , " " , $recipeInstr[$j]['steps'][$n]['step'] . '<div>';
//
//
?>
</body>
</html>
The intended effect I am going for is one similar to how youtube has related videos on the right side of the page.
php html css api
asked Mar 27 at 20:28
David LiottaDavid Liotta
105 bronze badges
add a comment |
0
I want to generate a list of links to other pages for my website (using a mix of PHP/HTML/CSS) and align them on the right side of the page without them overlapping. I am able to generate the links/pictures, but the problem I am having is they overlap on top of each other when I try to use position absolute.
<style>
body
background: lightblue;
margin: 25px;
.title
font-size: 20px;
.recipe
width: 60%;
.related
position: absolute;
float: right;
right: 10px;
width: 25%;
list-style-position: inside;
.a
float: right;
right: 5px;
.relatedImages
img
width: 15%;
height: 17%;
</style>
<title><?php $recipeInfo['title']; ?></title>
<body>
<br>
<?php
//Title and image of recipe
echo '<br><br><div class="title">' .$recipeInfo['title']. '</div><br>
<div class="mainImage"><image src="' . $recipeInfo['image']. '"> </div>
<br><h2> Ingredients </h2>';
//Unfinished (Needs to be styled correctly)
//Generating related links with clickable images
for($r = 0; $r < $relatedLinks[$r]; $r++)
echo '<div class = "related">
<a href = "recipeInfo.php?id='.$relatedLinks[$r]['id']. '">'.$relatedLinks[$r]['title'].'<br>
<image src = "https://spoonacular.com/recipeImages/' . $relatedLinks[$r]['image'] . '"></a>
<br>
</div>';
;
;
//Loop that generates a list of the ingredients used
for($i = 0; $i < $recipeInfo['extendedIngredients'][$i]; $i++)
$amount = $recipeInfo['extendedIngredients'][$i]['amount'];
$unit = $recipeInfo['extendedIngredients'][$i]['unit'];
$ingrName = $recipeInfo['extendedIngredients'][$i]['name'];
echo '<div class = "ingredients">' . $amount , " " , $unit , " " , $ingrName .' </div>';
//Instructions with error handling for no instructions found
$instructions = $recipeInfo['instructions'];
if($instructions == "")
$instructions = "Whoops, there are no available instructions for this recipe.";
echo '<br><h2> Insructions </h2>
<div class="recipe">' . $instructions . '</div><br>';
//Unfinished, but will hopefully print a better list of instructions than just a dense paragraph
//for($j = 0; $j < sizeOf($recipeInstr); $j++)
// echo '<h3>' .$recipeInstr[$j]['name'].'</h3>';
// for($n = 0; $n < $recipeInstr[$j]['steps']; $n++)
// echo '<div class="instruction">'. $n , " " , $recipeInstr[$j]['steps'][$n]['step'] . '<div>';
//
//
?>
</body>
</html>
The intended effect I am going for is one similar to how youtube has related videos on the right side of the page.
php html css api
asked Mar 27 at 20:28
David LiottaDavid Liotta
105 bronze badges
show me please all of your code then i am able to help you
– Ifaruki
Mar 27 at 20:31
I added the rest of the CSS, but the other parts of the code are stable and not relevant to the question.
– David Liotta
Mar 27 at 20:35
its relevant because i want to know your HTML strucutre how your webpage is build so i know what kind of css wil work
– Ifaruki
Mar 27 at 20:39
Okay, I added more but left out some api information since they are not in the HTML portion
– David Liotta
Mar 27 at 20:42
add a comment |
0
0
0
I want to generate a list of links to other pages for my website (using a mix of PHP/HTML/CSS) and align them on the right side of the page without them overlapping. I am able to generate the links/pictures, but the problem I am having is they overlap on top of each other when I try to use position absolute.
<style>
body
background: lightblue;
margin: 25px;
.title
font-size: 20px;
.recipe
width: 60%;
.related
position: absolute;
float: right;
right: 10px;
width: 25%;
list-style-position: inside;
.a
float: right;
right: 5px;
.relatedImages
img
width: 15%;
height: 17%;
</style>
<title><?php $recipeInfo['title']; ?></title>
<body>
<br>
<?php
//Title and image of recipe
echo '<br><br><div class="title">' .$recipeInfo['title']. '</div><br>
<div class="mainImage"><image src="' . $recipeInfo['image']. '"> </div>
<br><h2> Ingredients </h2>';
//Unfinished (Needs to be styled correctly)
//Generating related links with clickable images
for($r = 0; $r < $relatedLinks[$r]; $r++)
echo '<div class = "related">
<a href = "recipeInfo.php?id='.$relatedLinks[$r]['id']. '">'.$relatedLinks[$r]['title'].'<br>
<image src = "https://spoonacular.com/recipeImages/' . $relatedLinks[$r]['image'] . '"></a>
<br>
</div>';
;
;
//Loop that generates a list of the ingredients used
for($i = 0; $i < $recipeInfo['extendedIngredients'][$i]; $i++)
$amount = $recipeInfo['extendedIngredients'][$i]['amount'];
$unit = $recipeInfo['extendedIngredients'][$i]['unit'];
$ingrName = $recipeInfo['extendedIngredients'][$i]['name'];
echo '<div class = "ingredients">' . $amount , " " , $unit , " " , $ingrName .' </div>';
//Instructions with error handling for no instructions found
$instructions = $recipeInfo['instructions'];
if($instructions == "")
$instructions = "Whoops, there are no available instructions for this recipe.";
echo '<br><h2> Insructions </h2>
<div class="recipe">' . $instructions . '</div><br>';
//Unfinished, but will hopefully print a better list of instructions than just a dense paragraph
//for($j = 0; $j < sizeOf($recipeInstr); $j++)
// echo '<h3>' .$recipeInstr[$j]['name'].'</h3>';
// for($n = 0; $n < $recipeInstr[$j]['steps']; $n++)
// echo '<div class="instruction">'. $n , " " , $recipeInstr[$j]['steps'][$n]['step'] . '<div>';
//
//
?>
</body>
</html>
The intended effect I am going for is one similar to how youtube has related videos on the right side of the page.
php html css api
asked Mar 27 at 20:28
David LiottaDavid Liotta
105 bronze badges
I want to generate a list of links to other pages for my website (using a mix of PHP/HTML/CSS) and align them on the right side of the page without them overlapping. I am able to generate the links/pictures, but the problem I am having is they overlap on top of each other when I try to use position absolute.
<style>
body
background: lightblue;
margin: 25px;
.title
font-size: 20px;
.recipe
width: 60%;
.related
position: absolute;
float: right;
right: 10px;
width: 25%;
list-style-position: inside;
.a
float: right;
right: 5px;
.relatedImages
img
width: 15%;
height: 17%;
</style>
<title><?php $recipeInfo['title']; ?></title>
<body>
<br>
<?php
//Title and image of recipe
echo '<br><br><div class="title">' .$recipeInfo['title']. '</div><br>
<div class="mainImage"><image src="' . $recipeInfo['image']. '"> </div>
<br><h2> Ingredients </h2>';
//Unfinished (Needs to be styled correctly)
//Generating related links with clickable images
for($r = 0; $r < $relatedLinks[$r]; $r++)
echo '<div class = "related">
<a href = "recipeInfo.php?id='.$relatedLinks[$r]['id']. '">'.$relatedLinks[$r]['title'].'<br>
<image src = "https://spoonacular.com/recipeImages/' . $relatedLinks[$r]['image'] . '"></a>
<br>
</div>';
;
;
//Loop that generates a list of the ingredients used
for($i = 0; $i < $recipeInfo['extendedIngredients'][$i]; $i++)
$amount = $recipeInfo['extendedIngredients'][$i]['amount'];
$unit = $recipeInfo['extendedIngredients'][$i]['unit'];
$ingrName = $recipeInfo['extendedIngredients'][$i]['name'];
echo '<div class = "ingredients">' . $amount , " " , $unit , " " , $ingrName .' </div>';
//Instructions with error handling for no instructions found
$instructions = $recipeInfo['instructions'];
if($instructions == "")
$instructions = "Whoops, there are no available instructions for this recipe.";
echo '<br><h2> Insructions </h2>
<div class="recipe">' . $instructions . '</div><br>';
//Unfinished, but will hopefully print a better list of instructions than just a dense paragraph
//for($j = 0; $j < sizeOf($recipeInstr); $j++)
// echo '<h3>' .$recipeInstr[$j]['name'].'</h3>';
// for($n = 0; $n < $recipeInstr[$j]['steps']; $n++)
// echo '<div class="instruction">'. $n , " " , $recipeInstr[$j]['steps'][$n]['step'] . '<div>';
//
//
?>
</body>
</html>
The intended effect I am going for is one similar to how youtube has related videos on the right side of the page.
php html css api
php html css api
asked Mar 27 at 20:28
David LiottaDavid Liotta
105 bronze badges
asked Mar 27 at 20:28
David LiottaDavid Liotta
105 bronze badges
edited Mar 27 at 20:39
David Liotta
asked Mar 27 at 20:28
David LiottaDavid Liotta
105 bronze badges
asked Mar 27 at 20:28
David LiottaDavid Liotta
105 bronze badges
asked Mar 27 at 20:28
David LiottaDavid Liotta
105 bronze badges
105 bronze badges
show me please all of your code then i am able to help you
– Ifaruki
Mar 27 at 20:31
I added the rest of the CSS, but the other parts of the code are stable and not relevant to the question.
– David Liotta
Mar 27 at 20:35
its relevant because i want to know your HTML strucutre how your webpage is build so i know what kind of css wil work
– Ifaruki
Mar 27 at 20:39
Okay, I added more but left out some api information since they are not in the HTML portion
– David Liotta
Mar 27 at 20:42
add a comment |
show me please all of your code then i am able to help you
– Ifaruki
Mar 27 at 20:31
I added the rest of the CSS, but the other parts of the code are stable and not relevant to the question.
– David Liotta
Mar 27 at 20:35
its relevant because i want to know your HTML strucutre how your webpage is build so i know what kind of css wil work
– Ifaruki
Mar 27 at 20:39
Okay, I added more but left out some api information since they are not in the HTML portion
– David Liotta
Mar 27 at 20:42
show me please all of your code then i am able to help you
– Ifaruki
Mar 27 at 20:31
show me please all of your code then i am able to help you
– Ifaruki
Mar 27 at 20:31
I added the rest of the CSS, but the other parts of the code are stable and not relevant to the question.
– David Liotta
Mar 27 at 20:35
I added the rest of the CSS, but the other parts of the code are stable and not relevant to the question.
– David Liotta
Mar 27 at 20:35
its relevant because i want to know your HTML strucutre how your webpage is build so i know what kind of css wil work
– Ifaruki
Mar 27 at 20:39
its relevant because i want to know your HTML strucutre how your webpage is build so i know what kind of css wil work
– Ifaruki
Mar 27 at 20:39
Okay, I added more but left out some api information since they are not in the HTML portion
– David Liotta
Mar 27 at 20:42
Okay, I added more but left out some api information since they are not in the HTML portion
– David Liotta
Mar 27 at 20:42
add a comment |
1 Answer
1
active
oldest
votes
0
Well cou could try this code:
<body>
<br>
<div class="maincontent">
<div class="main">
<?php
//Title and image of recipe
echo '<br><br><div class="title">' .$recipeInfo['title']. '</div><br>
<div class="mainImage"><image src="' . $recipeInfo['image']. '"> </div>
<br><h2> Ingredients </h2>';
//Loop that generates a list of the ingredients used
for($i = 0; $i < $recipeInfo['extendedIngredients'][$i]; $i++)
$amount = $recipeInfo['extendedIngredients'][$i]['amount'];
$unit = $recipeInfo['extendedIngredients'][$i]['unit'];
$ingrName = $recipeInfo['extendedIngredients'][$i]['name'];
echo '<div class = "ingredients">' . $amount , " " , $unit , " " , $ingrName .' </div>';
//Instructions with error handling for no instructions found
$instructions = $recipeInfo['instructions'];
if($instructions == "")
$instructions = "Whoops, there are no available instructions for this recipe.";
echo '<br><h2> Insructions </h2>
<div class="recipe">' . $instructions . '</div><br>';
//Unfinished, but will hopefully print a better list of instructions than just a dense paragraph
//for($j = 0; $j < sizeOf($recipeInstr); $j++)
// echo '<h3>' .$recipeInstr[$j]['name'].'</h3>';
// for($n = 0; $n < $recipeInstr[$j]['steps']; $n++)
// echo '<div class="instruction">'. $n , " " , $recipeInstr[$j]['steps'][$n]['step'] . '<div>';
//
//
?>
</div>
<div class="sidelinks">
<?php
//Unfinished (Needs to be styled correctly)
//Generating related links with clickable images
for($r = 0; $r < $relatedLinks[$r]; $r++)
echo '<div class = "related">
<a href = "recipeInfo.php?id='.$relatedLinks[$r]['id']. '">'.$relatedLinks[$r]['title'].'<br>
<image src = "https://spoonacular.com/recipeImages/' . $relatedLinks[$r]['image'] . '"></a>
<br>
</div>';
;
;
</div>
</div>
</body>
</html>
and css code:
<style>
.maincontent
display: grid;
grid-template-columns: 70% 30%;
body
background: lightblue;
margin: 25px;
.title
font-size: 20px;
.recipe
width: 60%;
.related
list-style-position: inside;
.a
float: right;
right: 5px;
.relatedImages
img
width: 15%;
height: 17%;
</style>
this should work, i couldnt test it
answered Mar 27 at 20:54
IfarukiIfaruki
2991 silver badge5 bronze badges
That worked! Sort of, the links are now on the right side and not overlapping but the pictures are missing now.
– David Liotta
Mar 27 at 21:02
Fixed them, thanks for your help
– David Liotta
Mar 27 at 21:11
no problem, thats why i am here to help
– Ifaruki
Mar 28 at 1:13
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55385911%2fhow-do-i-align-a-list-of-links-picture-on-the-right-side-of-the-page-and-stop-t%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
0
Well cou could try this code:
<body>
<br>
<div class="maincontent">
<div class="main">
<?php
//Title and image of recipe
echo '<br><br><div class="title">' .$recipeInfo['title']. '</div><br>
<div class="mainImage"><image src="' . $recipeInfo['image']. '"> </div>
<br><h2> Ingredients </h2>';
//Loop that generates a list of the ingredients used
for($i = 0; $i < $recipeInfo['extendedIngredients'][$i]; $i++)
$amount = $recipeInfo['extendedIngredients'][$i]['amount'];
$unit = $recipeInfo['extendedIngredients'][$i]['unit'];
$ingrName = $recipeInfo['extendedIngredients'][$i]['name'];
echo '<div class = "ingredients">' . $amount , " " , $unit , " " , $ingrName .' </div>';
//Instructions with error handling for no instructions found
$instructions = $recipeInfo['instructions'];
if($instructions == "")
$instructions = "Whoops, there are no available instructions for this recipe.";
echo '<br><h2> Insructions </h2>
<div class="recipe">' . $instructions . '</div><br>';
//Unfinished, but will hopefully print a better list of instructions than just a dense paragraph
//for($j = 0; $j < sizeOf($recipeInstr); $j++)
// echo '<h3>' .$recipeInstr[$j]['name'].'</h3>';
// for($n = 0; $n < $recipeInstr[$j]['steps']; $n++)
// echo '<div class="instruction">'. $n , " " , $recipeInstr[$j]['steps'][$n]['step'] . '<div>';
//
//
?>
</div>
<div class="sidelinks">
<?php
//Unfinished (Needs to be styled correctly)
//Generating related links with clickable images
for($r = 0; $r < $relatedLinks[$r]; $r++)
echo '<div class = "related">
<a href = "recipeInfo.php?id='.$relatedLinks[$r]['id']. '">'.$relatedLinks[$r]['title'].'<br>
<image src = "https://spoonacular.com/recipeImages/' . $relatedLinks[$r]['image'] . '"></a>
<br>
</div>';
;
;
</div>
</div>
</body>
</html>
and css code:
<style>
.maincontent
display: grid;
grid-template-columns: 70% 30%;
body
background: lightblue;
margin: 25px;
.title
font-size: 20px;
.recipe
width: 60%;
.related
list-style-position: inside;
.a
float: right;
right: 5px;
.relatedImages
img
width: 15%;
height: 17%;
</style>
this should work, i couldnt test it
answered Mar 27 at 20:54
IfarukiIfaruki
2991 silver badge5 bronze badges
That worked! Sort of, the links are now on the right side and not overlapping but the pictures are missing now.
– David Liotta
Mar 27 at 21:02
Fixed them, thanks for your help
– David Liotta
Mar 27 at 21:11
no problem, thats why i am here to help
– Ifaruki
Mar 28 at 1:13
add a comment |
0
Well cou could try this code:
<body>
<br>
<div class="maincontent">
<div class="main">
<?php
//Title and image of recipe
echo '<br><br><div class="title">' .$recipeInfo['title']. '</div><br>
<div class="mainImage"><image src="' . $recipeInfo['image']. '"> </div>
<br><h2> Ingredients </h2>';
//Loop that generates a list of the ingredients used
for($i = 0; $i < $recipeInfo['extendedIngredients'][$i]; $i++)
$amount = $recipeInfo['extendedIngredients'][$i]['amount'];
$unit = $recipeInfo['extendedIngredients'][$i]['unit'];
$ingrName = $recipeInfo['extendedIngredients'][$i]['name'];
echo '<div class = "ingredients">' . $amount , " " , $unit , " " , $ingrName .' </div>';
//Instructions with error handling for no instructions found
$instructions = $recipeInfo['instructions'];
if($instructions == "")
$instructions = "Whoops, there are no available instructions for this recipe.";
echo '<br><h2> Insructions </h2>
<div class="recipe">' . $instructions . '</div><br>';
//Unfinished, but will hopefully print a better list of instructions than just a dense paragraph
//for($j = 0; $j < sizeOf($recipeInstr); $j++)
// echo '<h3>' .$recipeInstr[$j]['name'].'</h3>';
// for($n = 0; $n < $recipeInstr[$j]['steps']; $n++)
// echo '<div class="instruction">'. $n , " " , $recipeInstr[$j]['steps'][$n]['step'] . '<div>';
//
//
?>
</div>
<div class="sidelinks">
<?php
//Unfinished (Needs to be styled correctly)
//Generating related links with clickable images
for($r = 0; $r < $relatedLinks[$r]; $r++)
echo '<div class = "related">
<a href = "recipeInfo.php?id='.$relatedLinks[$r]['id']. '">'.$relatedLinks[$r]['title'].'<br>
<image src = "https://spoonacular.com/recipeImages/' . $relatedLinks[$r]['image'] . '"></a>
<br>
</div>';
;
;
</div>
</div>
</body>
</html>
and css code:
<style>
.maincontent
display: grid;
grid-template-columns: 70% 30%;
body
background: lightblue;
margin: 25px;
.title
font-size: 20px;
.recipe
width: 60%;
.related
list-style-position: inside;
.a
float: right;
right: 5px;
.relatedImages
img
width: 15%;
height: 17%;
</style>
this should work, i couldnt test it
answered Mar 27 at 20:54
IfarukiIfaruki
2991 silver badge5 bronze badges
That worked! Sort of, the links are now on the right side and not overlapping but the pictures are missing now.
– David Liotta
Mar 27 at 21:02
Fixed them, thanks for your help
– David Liotta
Mar 27 at 21:11
no problem, thats why i am here to help
– Ifaruki
Mar 28 at 1:13
add a comment |
0
0
0
Well cou could try this code:
<body>
<br>
<div class="maincontent">
<div class="main">
<?php
//Title and image of recipe
echo '<br><br><div class="title">' .$recipeInfo['title']. '</div><br>
<div class="mainImage"><image src="' . $recipeInfo['image']. '"> </div>
<br><h2> Ingredients </h2>';
//Loop that generates a list of the ingredients used
for($i = 0; $i < $recipeInfo['extendedIngredients'][$i]; $i++)
$amount = $recipeInfo['extendedIngredients'][$i]['amount'];
$unit = $recipeInfo['extendedIngredients'][$i]['unit'];
$ingrName = $recipeInfo['extendedIngredients'][$i]['name'];
echo '<div class = "ingredients">' . $amount , " " , $unit , " " , $ingrName .' </div>';
//Instructions with error handling for no instructions found
$instructions = $recipeInfo['instructions'];
if($instructions == "")
$instructions = "Whoops, there are no available instructions for this recipe.";
echo '<br><h2> Insructions </h2>
<div class="recipe">' . $instructions . '</div><br>';
//Unfinished, but will hopefully print a better list of instructions than just a dense paragraph
//for($j = 0; $j < sizeOf($recipeInstr); $j++)
// echo '<h3>' .$recipeInstr[$j]['name'].'</h3>';
// for($n = 0; $n < $recipeInstr[$j]['steps']; $n++)
// echo '<div class="instruction">'. $n , " " , $recipeInstr[$j]['steps'][$n]['step'] . '<div>';
//
//
?>
</div>
<div class="sidelinks">
<?php
//Unfinished (Needs to be styled correctly)
//Generating related links with clickable images
for($r = 0; $r < $relatedLinks[$r]; $r++)
echo '<div class = "related">
<a href = "recipeInfo.php?id='.$relatedLinks[$r]['id']. '">'.$relatedLinks[$r]['title'].'<br>
<image src = "https://spoonacular.com/recipeImages/' . $relatedLinks[$r]['image'] . '"></a>
<br>
</div>';
;
;
</div>
</div>
</body>
</html>
and css code:
<style>
.maincontent
display: grid;
grid-template-columns: 70% 30%;
body
background: lightblue;
margin: 25px;
.title
font-size: 20px;
.recipe
width: 60%;
.related
list-style-position: inside;
.a
float: right;
right: 5px;
.relatedImages
img
width: 15%;
height: 17%;
</style>
this should work, i couldnt test it
answered Mar 27 at 20:54
IfarukiIfaruki
2991 silver badge5 bronze badges
Well cou could try this code:
<body>
<br>
<div class="maincontent">
<div class="main">
<?php
//Title and image of recipe
echo '<br><br><div class="title">' .$recipeInfo['title']. '</div><br>
<div class="mainImage"><image src="' . $recipeInfo['image']. '"> </div>
<br><h2> Ingredients </h2>';
//Loop that generates a list of the ingredients used
for($i = 0; $i < $recipeInfo['extendedIngredients'][$i]; $i++)
$amount = $recipeInfo['extendedIngredients'][$i]['amount'];
$unit = $recipeInfo['extendedIngredients'][$i]['unit'];
$ingrName = $recipeInfo['extendedIngredients'][$i]['name'];
echo '<div class = "ingredients">' . $amount , " " , $unit , " " , $ingrName .' </div>';
//Instructions with error handling for no instructions found
$instructions = $recipeInfo['instructions'];
if($instructions == "")
$instructions = "Whoops, there are no available instructions for this recipe.";
echo '<br><h2> Insructions </h2>
<div class="recipe">' . $instructions . '</div><br>';
//Unfinished, but will hopefully print a better list of instructions than just a dense paragraph
//for($j = 0; $j < sizeOf($recipeInstr); $j++)
// echo '<h3>' .$recipeInstr[$j]['name'].'</h3>';
// for($n = 0; $n < $recipeInstr[$j]['steps']; $n++)
// echo '<div class="instruction">'. $n , " " , $recipeInstr[$j]['steps'][$n]['step'] . '<div>';
//
//
?>
</div>
<div class="sidelinks">
<?php
//Unfinished (Needs to be styled correctly)
//Generating related links with clickable images
for($r = 0; $r < $relatedLinks[$r]; $r++)
echo '<div class = "related">
<a href = "recipeInfo.php?id='.$relatedLinks[$r]['id']. '">'.$relatedLinks[$r]['title'].'<br>
<image src = "https://spoonacular.com/recipeImages/' . $relatedLinks[$r]['image'] . '"></a>
<br>
</div>';
;
;
</div>
</div>
</body>
</html>
and css code:
<style>
.maincontent
display: grid;
grid-template-columns: 70% 30%;
body
background: lightblue;
margin: 25px;
.title
font-size: 20px;
.recipe
width: 60%;
.related
list-style-position: inside;
.a
float: right;
right: 5px;
.relatedImages
img
width: 15%;
height: 17%;
</style>
this should work, i couldnt test it
answered Mar 27 at 20:54
IfarukiIfaruki
2991 silver badge5 bronze badges
answered Mar 27 at 20:54
IfarukiIfaruki
2991 silver badge5 bronze badges
answered Mar 27 at 20:54
IfarukiIfaruki
2991 silver badge5 bronze badges
answered Mar 27 at 20:54
IfarukiIfaruki
2991 silver badge5 bronze badges
2991 silver badge5 bronze badges
That worked! Sort of, the links are now on the right side and not overlapping but the pictures are missing now.
– David Liotta
Mar 27 at 21:02
Fixed them, thanks for your help
– David Liotta
Mar 27 at 21:11
no problem, thats why i am here to help
– Ifaruki
Mar 28 at 1:13
add a comment |
That worked! Sort of, the links are now on the right side and not overlapping but the pictures are missing now.
– David Liotta
Mar 27 at 21:02
Fixed them, thanks for your help
– David Liotta
Mar 27 at 21:11
no problem, thats why i am here to help
– Ifaruki
Mar 28 at 1:13
That worked! Sort of, the links are now on the right side and not overlapping but the pictures are missing now.
– David Liotta
Mar 27 at 21:02
That worked! Sort of, the links are now on the right side and not overlapping but the pictures are missing now.
– David Liotta
Mar 27 at 21:02
Fixed them, thanks for your help
– David Liotta
Mar 27 at 21:11
Fixed them, thanks for your help
– David Liotta
Mar 27 at 21:11
no problem, thats why i am here to help
– Ifaruki
Mar 28 at 1:13
no problem, thats why i am here to help
– Ifaruki
Mar 28 at 1:13
add a comment |
Got a question that you can’t ask on public Stack Overflow? Learn more about sharing private information with Stack Overflow for Teams.
Got a question that you can’t ask on public Stack Overflow? Learn more about sharing private information with Stack Overflow for Teams.
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55385911%2fhow-do-i-align-a-list-of-links-picture-on-the-right-side-of-the-page-and-stop-t%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
show me please all of your code then i am able to help you
– Ifaruki
Mar 27 at 20:31
I added the rest of the CSS, but the other parts of the code are stable and not relevant to the question.
– David Liotta
Mar 27 at 20:35
its relevant because i want to know your HTML strucutre how your webpage is build so i know what kind of css wil work
– Ifaruki
Mar 27 at 20:39
Okay, I added more but left out some api information since they are not in the HTML portion
– David Liotta
Mar 27 at 20:42