As I work on refining my layout to achieve the desired look, let me share my initial idea before delving into the issue at hand.
Currently, I am attempting to create something similar to this: https://i.stack.imgur.com/rtXwm.png
This is how it appears at the moment:
https://i.stack.imgur.com/FUNN3.png
We are almost there, but as you can see, the Title, vote, and release attributes are too close to the image. I wish to introduce some spacing between them. Unfortunately, I have tried various methods like margin, positioning, and more without success. I suspect that my JavaScript may be responsible due to the line:
$('#title').html("Title: " + data.title);I'm uncertain if the addition of 'Title:' might be causing the issue. While in CSS, I have implemented the following styling:
#title{
margin: 15px;
font-size:15px;
padding: 5px;
}
#release {
font-size:15px;
padding: 5px;
}
#vote {
font-size:15px;
padding: 5px;
}
#overview {
font-size:15px;
padding: 5px;
}
#poster {
float: left;
width: 250px;
height: 450px;
}
#trailer {
}The aspects concerning the poster and description worry me. Using 'float: left;' for the poster might cause issues when handling lengthy descriptions where the text could end up below the picture. Moreover, achieving a space between the picture and the description remains a challenge.
If more code or information is required, do not hesitate to ask, and I will respond promptly.
A Youtube embed has yet to be incorporated since I haven't mastered the process. However, establishing a tentative position now would eliminate concerns later on.
The ID declarations should ideally be nested within aside elements:
<aside id="title"></aside>
<aside id="release"></aside>
<aside id="vote"></aside>
<aside id="overview"></aside>
<aside id="resultsDiv"></aside>
<aside id="poster"></aside>
<aside id="trailer"></aside>In the CSS section:
aside {
float : left;
margin-left: 20px;
}If further modifications are necessary, here's an update with additional HTML markup:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>MovieTrailerbase</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<div id="page">
<h1>Movie Search</h1>
<form id="searchForm" method="post">
<fieldset>
<input id="s" type="text" />
<input type="submit" value="Submit" id="submitButton" />
<div id="searchInContainer">
<input type="radio" name="check" value="site" id="searchSite" checked />
<label for="searchSite" id="siteNameLabel">Search movie</label>
<input type="radio" name="check" value="web" id="searchWeb" />
<label for="searchWeb">Search series</label>
</div>
</fieldset>
</form>
<aside id="title"></aside>
<aside id="release"></aside>
<aside id="vote"></aside>
<aside id="overview"></aside>
<aside id="resultsDiv"></div>
<aside id="poster"></aside>
<aside id="trailer"></aside>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="script.js"></script>
</html>
Finally, after resolving the issue using the provided link, I want to express my gratitude to everyone who contributed!