Float a form over an image and down to the right - html

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>

Related

Why won´t Atom read my first segment of CSS code but reads everything below it?

I have checked the file order and closed off tags. It seems whatever I put at the top of the CSS file will not be read, however, everything below the very top segment of cod ,in this case, #tribute-info will not be applied to the HTML. If I moved #title to the top and refreshed the browser #title will not have its CSS anymore. Same situation for #img-caption.
<style>
#tribute-info{ /* <-- anything I put at the top of the file is not getting read. If I moved #img-caption here, and #tribute-info below it, #img-caption will not work. */
color: blue;
}
#img-caption{
color: red;
}
#title{
text-align: center;
color: red;
}
</style>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style/design.css" />
<meta charset="utf-8">
</head>
<body>
<div id="main">
<h1 id="title">History´s First Programmer</h1>
<div id="img-div">
<div class="row">
<div class="column">
<img src="images/ada_lovelace_house_emblem.jpg" alt="Ada Lovelace depicted in an emblem" id="image">
</div>
</div>
<p id="img-caption">The Mother of computer programming</p>
<div id="tribute-info">
<p>“The more I study, the more insatiable do I feel my genius for it to be.”</p>
<p>“Your best and wisest refuge from all troubles is in your science.”</p>
<p>“Mathematical science shows what is. It is the language of unseen relations between things.
But to use and apply that language, we must be able to fully to appreciate, to feel, to seize the unseen, the unconscious.”</p> <!-- this segment of code is not changing -->
</div>
<a href="https://en.wikipedia.org/wiki/Ada_Lovelace" target="_blank" id="tribute-link">Click here to learn
more about Ada Ada_Lovelace</a>
</div>
</div>
</body>
</html>
The code works fine if you remove the <style> tag from your css file

CSS Elements working on actual page but not pulling from stylesheet

I am having some issues with some css stylings on my site and hoping you guys can help.
Heres my code:
<style>
.loginform {
text-align: center;
width: 300px;
margin: 0 auto;
color: black;
}
.memberslogin {
color: #404040;
text-align: center;
margin-bottom: 25px;
}
.btn.btn-primary.loginbutton {
margin-bottom: 80px;
}
</style>
<body style="background: none;">
<?php include('header.php') ?>
<div class="container">
<h4 class="memberslogin">Members Login:</h4>
<form class="loginform" action="login_create.php" method="post">
<div class="form-group">
<label for="username">Username:</label>
<input type="text" name="username" class="form-control" placeholder="Username..">
</div>
<div class="form-group">
<label for="password">Password:</label>
<input type="password" name="password" class="form-control" placeholder="Password..">
</div>
<input class=" btn btn-primary loginbutton" type="submit" name="submit" value="Login">
</form>
</div>
The styling works fine when styled within the page. However I have these exact same classes and styling within my style.css but when I remove the on page styling none of the effects take place.
<head>
<title>Title</title>
<link href="https://fonts.googleapis.com/css?family=Orbitron:400,700" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Titillium+Web:400,700" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="richmondcss.css">
As you can see I have linked my style sheet last which should override any bootstrap elements if I am not mistaken?
Any help is appreciated
Thanks
Try adding a class on the body tag which will represent your app.
e.g.
<body class="the-login-app">...
and then prefix all of your custom css with this class...
.the-login-app .btn.btn-primary.loginbutton{
margin-bottom: 80px;
}
This is called namespacing. It will not only work but help you with debugging as your project gets bigger. For example if you see an element in debugger hit by a class which starts with "the-login-app" you are confident that css code is yours :)
In the end, try to research and familiarize with the priority of the selectors... All things equal, in-file one will precede. If you want to override bootstrap you need to define more precise selector than bootstrap one, as explained above(which I don't recommend to start with)...
Try to learn bootstrap more. I am sure you will discover that you didn't need your intervention at all...

HTML CSS Header images not floating correctly

Afternoon all,
I'm trying to create a basic header
White space at top with an image that floats left and an image that floats right.
Then below this a grey background with some options and a button on left and some nav buttons on right.
The requirements are that the header will always be 100% width and that when you scroll down the page the header always stays at the top.
I have this working fine with my current HTML and CSS however when I reduce screen size e.g. snap right on my laptop 1368x768 resolution on laptop the image on the right floats below the buttons on the right hand side but inside the grey border?!
Left image size = 480x80
Right image size = 264x80
HTML
<div id="banner">
<img src="/images/img1.png" style="float:left"/>
<img src="/images/img2.png" style="float:right"/>
</div>
<div id="header">
<div id="header_left">
<form action= "<?php echo $_SERVER['PHP_SELF']; ?>" method ="POST">
<select name=dbselector>
<?php
echo '<option value="1"';
if ($_COOKIE[$cookie] == "x") {
echo ' selected="selected"';}
echo '>1</option>';
echo '<option value="2"';
if ($_COOKIE[$cookie] == "y")
{echo ' selected="selected"';}
echo '>2</option>';
?>
</select>
<input name="submit_button" type="submit" value="Submit"/>
</form>
</div>
<div id="header_right">
<?php date_default_timezone_set('Europe/London'); echo date('h:i:s');?>
<input type="button" value="Back" onclick="history.go(-1)">
<a href="www.google.co.uk" style="text-decoration: none">
<input type="button" value="Home">
</a>
<input type="button" value="Refresh" onClick="history.go(0)" >
<input type="button" value="Forward" onclick="history.go(1)">
</div>
</div>
CSS
#header
{
width: 100%;
position: fixed;
background:#58575b;
padding-top: 0px;
padding-bottom:0.5em;
margin: 0px
}
#banner
{
background:#fff;
width:100%;
height: 5em;
}
#header_left
{
float: left;
padding: 0em;
padding-left: 0.5em;
margin: 0em;
}
#header_right
{
float: right;
padding: 0em;
margin: 0em;
padding-right: 0.5em;
}
Any ideas why it is behaving like this?!
Thanks in advance
In a few comments of the starting post you say something about it not working properly in Internet explorer or Firefox.
It works in chrome right?
So it may be such a thing something isn't compatible with firefox or IE.
Not many use IE for the fact it is decommissioned by microsoft.
So, now let's focus just on Firefox and smaller screens as that also seems to be a issue.
Solution for small screens: Use viewports or media queries (either or should fix it)
<meta name="viewport" content="width=device-width, initial-scale=1">
For the issues with FireFox can you explain what it does? You just mention the issue for small screens exactly what it is doing but didn't explain the issues with Firefox (IE)
Thanks!
Solution was very basic...
The only thing different between the jsfiddle and my live code were the images.
I have checked the images and they have loads of whitespace in them hence why it moves down!
Took the images straight of our corporate site so I didn't even both to check for whitespace in the image itself.....
Argh!

CSS: How to make a right layout?

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

Twitter Bootstrap - How to build form in resized browzer window?

I'm using twitter bootstrap framework and I'm trying to build subscribe form.
<div style="text-align: center; margin: 35px auto;">
<form class="form-horizontal" action="" method="post">
<input type="text" class="input-large" id="" name="" placeholder="your#email.com">
<button type="submit" class="btn btn-large" style="background-color: #88d0b0; color: white;
border: 0;">
Subscribe</button>
</form>
</div>
I need to make my text input more higher(like button), so my CSS:
input.input-large[class=input-large] {
padding: 11px 19px;
font-size: 17.5px;
}
When browzer window is maximized, subscribe form looks good.
But when I'm trying to resize my screen it looks like:
In my project I'm using CSS:bootstrap.min.css and JS:bootstrap.min.js. Also my project has following construction:
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
....
</head>
<body>
<div class="container"> ..My subscribe form... </div>
</body>
What I'm doing wrong?
Based on your screen shots it looks like there might be a media query at work. .input-large has a set width of 210px so your input should not re-size like it does in your screenshot. Are you sure you're not using bootstrap-responsive.css or bootstrap-responsive.min.css? The order that you include your stylesheets will also affect the final outcome. Do you have a link to the page?
This is happening because when you shrink the window, there isn't enough space to fit both elements on the same line, so the button is moved down to the next line.
The way you can fix this is by implementing responsive design. This is done with media queries and different css stylesheets to create a different layout when the screen size changes. Alternatively, you can include bootstrap.responsive.css in your head and see if you like the look that gives you. Here's some information on responsive design:
http://tuftsdev.github.io/WebProgramming/lecture_notes/css3.html
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries