So I'm here trying to figure out to make my layout as wanted. I will start by tell you my idea before heading to the problem.
So i'm trying to make something like this right now:
and this is how it looks right now:
So we can say we are pretty close but as you guys can see so are the Title, vote release attributes pretty close to the image and I just want it to have a space between them, problem is it didn't work with margin, margin-left/right, positions and some few more and I just can't figure it out. I was thinking maybe my JS is doing this because I'm using this:
$('#title').html("Title: " + data.title);
where the Title: maybe cause it? However i'm not quite sure if I did the right things yet. I have done this in my CSS:
`#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 {
}`
So the things i'm not quite sure about is the Poster and the description. I'm not sure if its right to do it with float: left; maybe it will cause it for later on if a overview has really much information, I think the text would go below the picture which will look really bad. and the second is that I just want to make a space between the picture and the description as I describe before.
So if needing more code or information, just tell me and I will response quite fast.
EDIT:
I haven't done the Youtube embed yet since I haven't learned to do it yet. So this will probably be later on in my mini-project. But it would be nice to make a position already so I don't have to worry about it later.
EDIT 1.2:
<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>
CSS:
aside {
float : left;
margin-left: 20px;
}
EDIT 1.3:
<!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>
EDIT LAST:
Got it to work with this:
http://codepen.io/anon/pen/NGyNQY?editors=110
Thank you everyone!
You should look at your design like it is a table.
+--------------------------------+
| input | button |
+------------+-------------------+
| | |
| poster | content |
| | |
| | |
| | |
+------------+-------------------+
| |
| video |
| |
+--------------------------------+
If we only look at the rows, you see we have 3 rows.
In HTML we will have something like:
<div class="header"></div>
<div class="main"></div>
<div class="youtube"></div>
In header we have the input and button.
In main we get the image and content
And the youtube video is in the row below.
<div class="header">
<input class="input" />
<button class="button">button</button>
</div>
<div class="main">
<div class="poster"></div>
<div class="content"></div>
</div>
<div class="youtube"></div>
Include some CSS using floats to align the image and content and give the content a little margin as space between the image like so:
.poster {
float: left;
}
.content {
float: left;
margin-left: 10px;
}
You can see a working solution here: http://jsfiddle.net/ubrdxnuw/
Personally what I would do is adding all the content that is in the right of the poster (title, vote, release, etc) in a container that is floated left like the poster.
After that you can use margin-left: 20px (for example) for that container that holds those items. And this should work.
Wrap your #title, #vote, #release, and #overview in an <aside> tag and float it to the left:
HTML:
<aside>
<div id="title"</div>
<div id="vote"</div>
<div id="title"</div>
<div id="overview"</div>
</aside>
CSS:
aside {
float: left;
}
Then you can add a left margin to the <aside> container:
aside {
float : left;
margin-left: 20px; //Or how much do you actually want;
}
Here is a basic fix based on the code youve provided us, which is obviously not the code youve used as per your question - and was missing content so I have put some placeholder content into a working demo - http://codepen.io/anon/pen/JYpXeP?editors=110
Your CSS seemed ok , you just need to wrap the info in a div (I have created a div with class="info") that was on the same level as the <aside id="poster"> element - then target your floats against those two elements, and then the info , title etc are child elements inside the div.info
Related
Hello Stack Overflowians, I'm trying to float a form over a background image and I think I'm not doing it right. This is for our company gateway that I'm having to rebuild after many years in production. Below is what I have so far. The first image is my version of it. See how I got the background image to center? https://postimg.cc/nCmTfxVz Now that parts working good.
Next is the old site and the image is way to the left. https://postimg.cc/jn76T6b9
Not meaning to trick our clients, but they really like our old gateway right now, so I'm trying to style it as close as possible to the original one. As you can see, I've been successful in getting it close. (The rounded corners on the new input boxes are fine.) And the placement of the inputs are good with me too. It's just that, I don't believe I'm doing this right, as you can see in my HTML <div class="row" style="margin-top: -190px;"> that's what I'm having to do for now to push the whole form down.
I noticed here (How to place an Html form over an Image) about half-way down the page, #Scott added padding-top: 120px; to the form{} code. I tried adding his CSS but it pushed the form way down off the image.
Note: I still have to place a header up above with the "Registration" and "Forgot Password" links, but I'm not worried about that. I'll work that out myself. If you guys could just steer me in the right direction, or show me a better way to do this, I would be very appreciative. Thanks.
Oh, and here's what it looked like when I would go into responsive mode in Firefox like I was viewing it on a phone. https://postimg.cc/qtq30ccL So I added the media query stuff as you can see in the CSS. And now I have it looking like this. https://postimg.cc/m14q5G7D
Oh, and one more thing. Here's something else to keep in mind. Every now and then, we will be putting a message bar at the top of the page that says something like "Gateway will be down for maintenance over the weekend." or something similar. I will probably just put a Bootstrap banner up there since its so easy and quick to do. So it would be nice to just be able to float everything down while I do that. Just something extra to keep in mind. (-: So below is all of my code.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no" />
<title>Gateway Reboot v.3.0</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto+Condensed">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
<!--link rel="stylesheet" href="Contact-Form-Clean.css"/-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>
body{
font-family: 'Roboto Condensed', Arial, sans-serif;
}
.coolbox { /* this is a hold-over from the old web application */
display: block;
font-family: 'Roboto Condensed', Arial, sans-serif;
font-size: 12px;/* was 12.87px */
line-height: 16px;
border: 2px #708090 solid;
height: 22px;
width: 155px;
padding-left: 6px;/* because Bootstrap was putting too much padding on the left */
}
label{
margin-bottom: 0;
}
form{
margin-left: 200px;
}
#media only screen and (min-width: 768px) {
form{
margin-left: 25%;
}
/*img {
opacity: 0.6;
}*/
}
#media only screen and (max-width: 600px) {
form{
margin-left: 25%;
margin-top: 15%;
}
img {
opacity: 0.1;
}
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-12">
<img src="bigbackKey.png" class="img-fluid d-block mx-auto" alt="Sample Image" />
<!--section class="contact-clean"-->
<div class="row" style="margin-top: -190px;"><!--Just doing this for now to push the "form" row down. I know it's probably not the right way to do it.-->
<div class="col-md-6"></div>
<div class="col-md-6">
<form method="post">
<div class="form-group">
<label for="username">Username</label>
<input type="text" class="form-control coolbox" id="username" name="username" />
<!--/div-->
<!--By combining these 2 divs, it removed a big gap between the username box/label and password box/label.-->
<!--div class="form-group"-->
<label for="password">Password</label>
<input type="password" class="form-control coolbox" id="password" name="password" />
</div>
<div class="form-group"><button class="coolbox" type="submit">Login</button></div>
</form>
</div>
</div>
<!--/section-->
</div>
</div>
</div>
</body>
</html>
I just started a basic MVC 4 application and I'm having a hard time trying to figure out how to make two divs appear in blocks instead of next to each other. In my _Layout.cshtml file, I have the following code for the body tag:
<body>
<div style="width: 60%; margin: 0 auto; display: block">
<div id="header">
<div class="headerImage" style="height: 200px; width: 150px; float: left"></div>
</div>
<div id="body" style="display: block">
#RenderBody()
</div>
</div>
#Scripts.Render("~/bundles/jquery")
#RenderSection("scripts", required: false)
</body>
And the headerImage class:
.headerImage
{
background: url('#Url.Content("~/Content/Images/foo.jpg")');
background-repeat:no-repeat;
background-size:100%;
}
Now in my Index.cshtml view, which gets rendered as part of #RenderBody(), I have a simple button:
<div>
#using (Html.BeginForm("action", "controller"))
{
<input type="submit" value="hello world" />
}
</div>
When I run this, the button is placed right next to the image, even though they are in different divs:
I even tried setting display:block on the divs but that didn't help either. Any idea how to do this?
Looks like you need to clear your second <div>, as follows:
#body {
clear: both;
}
More information on clearing your floats can be found at CSS Tricks
Hello I have created two divs, one is floated to the left (button), and has 120px width, and another one is for textarea, textarea should be margin-left: 20px and take rest of the width. How much ever I try, I am not able to achieve this. Guys, do you know the solution?
<div id="button" style="float: left; width: 120px; height: 80px;">
<input type="button" id="button" value="something" />
</div>
<div id="textarea" style="margin-left: 20px;">
<textarea id="message"></textarea>
</div>
(For IE8 use #ID named DIVs instead of nth-child)
DEMO
|-------- 120 --------| 20 |------ available space ----------------------------------------------------------->
<div id="formArea">
<div>
<input type="button" value="something" />
</div>
<div>
<textarea></textarea>
</div>
</div>
#formArea{
display:table;
width:100%;
}
#formArea>div{
display:table-cell;
vertical-align: top;
}
#formArea>div:nth-child(1){
width:120px;
}
#formArea>div:nth-child(2){
padding-left:20px; /* instead of margin */
}
#formArea textarea{
border:0;
width:100%;
}
And remember, ID must be unique-per-page.
Try this:
CSS
.left{
float:left;
width:120px;
}
.right{
overflow:hidden;
margin-left:20px;
}
#message{
width:100%;
}
HTML
<div class="left">
<input type="button" id="button" value="something" />
</div>
<div class="right">
<textarea id="message"></textarea>
</div>
fiddle
Let's give this one a try... Below is the code you have given us but with a few enhancements:
<div id="container">
<div class="left">
<input type="button" id="button" value="something" />
</div>
<div class="right">
<textarea id="message"></textarea>
</div>
</div>
And the following is the CSS I have attached:
.left {
width: 120px;
float:left;
}
.right {
float:right;
}
#message{
width:400px;
}
#container {
display:inline-block;
}
Now, what I have done is set all of your current divs into one main div, which can hold everything together. I implemented a display:inline-block to help keep everything on one line along with maintaining the text area to be on the right and the button on he left with the cushion you have asked for in-between. To get a better idea of what this does, I have recreated an already done JsFiddle, which can accurately depict what I am describing.
A few things to note, remember that "textarea" can have the values of "rows" and "cols" which will determine how many rows and columns the text area will be, so you really do not need to have width in this aspect, especially if you need more rows vs columns.
Another thing, if you want to learn a bit more conceptually about some CSS tricks, the Almanac is one of the better tools out there to help you understand "why this does that".
Last, I encourage you to play with everybody's JsFiddle to get a better understanding of exactly what you want to see in your own code, every answer that has been presented has their own unique JsFiddle.
If this does not work or you have questions, comment below and we can figure something else out :)
Good luck with your future HTML/CSS coding adventures :)
I've been having a lot of trouble trying to center an external script and I was hoping SO could help me out. I'm designing a page to use a Google widget that uses Google Maps to give directions to an office. Here is my code:
<asp:Content ID="Content1" ContentPlaceHolderID="page_content" runat="server">
<div class="centered">
<span class="header_large_bold">Directions to our office:</span><br /><br />
<span class="header_bold">Please type your address in the top bar and click "Go".</span><br />
<script src="[link to the widget here]"</script>
</div>
</asp:Content>
And here is the CSS for it:
.centered {
width: 100%;
margin: 0 auto;
text-align: center;
}
As it is, the text is centered perfectly fine, but the widget from the is left aligned. I can fix this using a tag, but I'm trying to avoid using it as best I can. Any idea what I'm doing wrong?
You can insert the tag in a div
<div id="parent">
<script src='...'></script>
</div>
and then center the div..
#parent {
width: 30%;
margin: 0 auto;
}
But it might depend on the script content
Easily put your code between
<div align=center>
and
</div>
:)
User fa7d0 has the exact solution, but maybe a little unclear for the beginner:
Step 1 - Use a div with a "parent" ID to encapsulate your script as follows:
<div id="parent">
<script src='...'></script>
</div>
Step 2 - Go up to the top of your code, probably inside the area where you are defining the header information, and in the style section place the definitions:
<style>
#parent {
width: 30%;
margin: 0 auto;
}
</style>
I find it helpful to put all the div styling stuff in one area, all the p styling stuff in one area, etc.
I'm doing a website for a school work, but when I resize the screen and make it a little wider, the div elements are getting out of their place.
How can I prevent this?
most of the divs are:
.menu {
padding-top:120px;
position:absolute;
color:white;
font-size:28pt;
font-weight:Bolder;
}
My html:
<body id="BODY" class="BDNL" onResize="MOSTRA()">
<div id="resizing" class="">
<div id="intro" class="divintro">
<p id="p" class="comeco">Trabalho Interdisciplinar Orientado:</p>
<p id="texto" class="txtcomum">
Trabalho no qual um grupo deve elaborar um site que <br />
relacione todas as matérias técnicas estudadas.
</p>
</div>
<form>
<div id="menu" class="menu">
<label>RECO</label>
|
<label>LOCO</label>
|
<label> LP1</label>
|
<label> LP2</label>
|
<label> INFO</label>
</div>
</form>
</div>
</body>
You might want to look into the min-width and width properties of CSS.
Okay. Your HTML looks quite messy.
First of all, please start indending your code for the sake of your own eyes.
<html>
<head>
<title>Page title</title>
</head>
<body class="BDNL" onResize="MOSTRA()">
<div id="resizing">
<div class="menu">
RECO|
LOCO|
[--]
</div>
<div id="intro">
<p>
<h1>Trabalho Interdisciplinar Orientado</h1>
[..]
</p>
</div>
</div>
</body>
</html>
This is the minimal HTML-source you need to achieve the structure you desire.
Why exactly are you using position:absolute; on the .menu, I guess you want it to be positioned on top of the actual content?
I moved the .menu above the #intro container.
Use the following CSS to achieve the result you may want:
.menu {
margin: 0 0 30px 0; /* bottom margin 30px */
}
.menu a {
margin: 0 20px; /* left, right margin 20px; top, bottom 0 */
}
Also
please decide wether you want to use classes or IDs on your elements, in most cases you won't need both,
get rid of redundant classes and IDs (<p class="p"> or <p id="p"> do not make sense),
use the propper html elements for your content. Use <h1> - .. tags for headlines instead of differently styled paragraphs.
Make yourself familiar with CSS Margins and get rid of multiple .
As mentioned in your other question, you might want to give your elements (for example .menu) a fixed (min-)width which prevents the element from getting too narrow:
.menu {
min-width: 300px;
}