This question already has an answer here:
How to get images side by side
(1 answer)
Closed last year.
I'm trying to move my images over so they are at the center of the page. If you look at the image you can see that they are to the left of my page and they are overlapping each other. Right now they are overlapping each other so how do I get them to not overlap and that they are side by side in the center of the page below my text? Any help will be greatly appreciated!
body {
margin: 0;
padding: 0;
font-family: "Open+Sans", sans-serif;
}
.navbar {
border-bottom: 2px solid #0C133C;
}
#nav {
background-color: #fff;
color: white;
width: 100%;
}
.nav {
float: right;
text-align: left;
margin: 0;
}
.nav>li {
display: Inline-block;
padding: 20px 50px 10px 9px;
}
.nav>li a {
text-decoration: none;
color: #0C133C;
font-size: 18px;
border-bottom: 3px solid transparent;
}
.clearer {
clear: both;
}
.subnav class {
margin: 0;
position: relative;
}
.subnav>div a {
text-decoration: none;
color: #0C133C;
font-size: 18px;
padding: 20px 30px 10px 9px;
}
.logo {
margin-top: 1rem;
}
.subnav {
display: flex;
justify-content: space-between;
align-items: center;
margin-right: 1rem;
}
.flex-container {
display: flex;
}
.split {
width: 50%;
z-index: 1;
overflow-x: hidden;
padding-top: 20px;
}
.centered {
text-align: center;
}
.left {
left: 0;
background-color: #282C41;
color: white;
margin-top: .5rem;
}
h1 {
line-height: 1.2;
font-size: 35px;
bottom: 20px;
}
p1 {
font-size: 30;
}
.row {
display: flex;
justify-content: center;
left: 100px;
}
.row .column img {
width: 100px;
left: 50px;
}
.right {
right: 0;
background-color: #CDCDCD;
margin-top: .5rem;
font-size: 18px;
}
input,
select {
position: relative;
left: 140px;
width: 50%;
height: 30px;
padding: 12px 20px;
margin: 3px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
.button {
background-color: #282C41;
border: none;
color: white;
padding: 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin-left: 225px;
border-radius: 12px;
}
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Navbar</title>
<link rel="stylesheet" href="styles.css" </head>
<body>
<div class="navbar">
<ul class="nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Contact Us</a>
</li>
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Sign In</a>
</li>
</ul>
<div class="clearer"></div>
</div>
<subnav class="subnav subnav-light bg-light">
<img src="universallogo.jpg" class="logo" />
<div class="container-fluid">
<a class="subnav=brand" href="#">
<a class="nav-link active" aria-current="page" href="#">Bonds</a>
</a>
<a class="nav-link active" aria-current="page" href="#">Report a Claim</a>
<a class="nav-link active" aria-current="page" href="#">About Us</a>
<a class="nav-link active" aria-current="page" href="#">Search</a>
</div>
</subnav>
<div class="flex-container">
<div class="split left">
<div class="centered">
<h1>GET YOUR LICENSE & PERMIT BONDS FAST & EASY</h1>
<p1>We provide our Customers with a fast, easy, and secure way to get bonded. Get your Free Quote in minutes.
</p1>
</div>
<div class="row">
<div class="column">
<img src="Demotech.png" alt="rating" style="width:150%">
</div>
<div class="column">
<img src="USTreasury.png" alt="treas" style="width:40%">
</div>
</div>
</div>
<div class="split right">
<form name="form1" id="form1" action="/action_page.php">
<select name="subject" id="subject">
<option value="" selected="selected">Select Your State</option>
<option value="California">California</option>
<option value="California">Illinois</option>
<option value="California">Michigan</option>
<option value="California">Ohio</option>
</select>
<br><br>
<select name="topic" id="topic">
<option value="" selected="selected">Who is requring the bond</option>
</select>
<br><br>
<select name="chapter" id="chapter">
<option value="" selected="selected">What jurisdiction is requring the bond</option>
</select>
<br><br>
<select name="chapter" id="chapter">
<option value="" selected="selected">Select Your Bond</option>
</select>
<br><br>
</form>
<form action="/action_page.php">
<input type="text" id="date" name="startdate" placeholder="Effective Start Date">
<br><br>
<input type="text" id="email" name="typeemail" placeholder=" Type E-mail">
</form>
<br><br>
<button class="button button4">GET QUOTE NOW</button>
<p> Don’t see your Bond? Click Here to Submit Request</p>
</div>
</div>
</body>
</html>
I would suggest having the width of your column class set to 50% since you have two items and then have them display inline or inline-block.
I hope that you are intended to center the images of 'row' div inside 'split left' div.
<div class="row">
<div class="column">
<img src="ss.png" alt="rating" s̶t̶y̶l̶e̶=̶"̶w̶i̶d̶t̶h̶:̶ ̶1̶5̶0̶%̶"̶ />
</div>
<div class="column">
<img src="ss.png" alt="treas" s̶t̶y̶l̶e̶=̶"̶w̶i̶d̶t̶h̶:̶ ̶4̶0̶%̶"̶ />
</div>
</div>
Remove those inline style for image.
.row {
display: flex;
justify-content: space-around;
j̶u̶s̶t̶i̶f̶y̶-̶c̶o̶n̶t̶e̶n̶t̶:̶ ̶c̶e̶n̶t̶e̶r̶;̶
l̶e̶f̶t̶:̶ ̶1̶0̶0̶p̶x̶;̶
}
.row .column img {
height: 100px; /*height you needed for the image*/
width: 100px; /*width you needed for the image*/
l̶e̶f̶t̶:̶ ̶5̶0̶p̶x̶;̶
}
Do the above modification in your styles.css. Hope now the image will not be overlapped.
Related
We are only concerned with the following snippet:
<nav>
<ul>
<li><a accesskey="s" href="#student-info">INFO</a></li>
<li><a accesskey="h" href="#html-questions">HTML</a></li>
<li><a accesskey="c" href="#css-questions">CSS</a></li>
</ul>
</nav>
I added the access keys/ shortcuts s, h, and, c to the three list items in our navigation bar. However, when I press s, h, or c, nothing happens. Isn't something supposed to happen? To elaborate, in the output, if I click on any of INFO, HTML, and CSS in the navigation bar, I will go straight to that section. Similarly, shouldn't the same thing happen if I press 's' instead of clicking on INFO in the navigation bar?
Disclaimer: Just ignore the CSS file. We are only concerned with the accesskey attribute in the anchor elements nested in the nav element.
These are my html and css files:
#media (prefers-reduced-motion: no-preference) {
* {
scroll-behavior: smooth;
}
}
body {
background: #f5f6f7;
color: #1b1b32;
font-family: Helvetica;
margin: 0;
}
header {
width: 100%;
height: 50px;
background-color: #1b1b32;
display: flex;
justify-content: space-between;
align-items: center;
position: fixed;
top: 0;
}
#logo {
width: max(100px, 18vw);
background-color: #0a0a23;
aspect-ratio: 35 / 4;
padding: 0.4rem;
}
h1 {
color: #f1be32;
font-size: min(5vw, 1.2em);
text-align: center;
}
nav {
width: 50%;
max-width: 300px;
height: 50px;
}
nav > ul {
display: flex;
justify-content: space-evenly;
flex-wrap: wrap;
align-items: center;
padding-inline-start: 0;
margin-block: 0;
height: 100%;
}
nav > ul > li {
color: #dfdfe2;
margin: 0 0.2rem;
padding: 0.2rem;
display: block;
}
nav > ul > li:hover {
background-color: #dfdfe2;
color: #1b1b32;
cursor: pointer;
}
li > a {
color: inherit;
text-decoration: none;
}
main {
padding-top: 50px;
}
section {
width: 80%;
margin: 0 auto 10px auto;
max-width: 600px;
}
h1,
h2 {
font-family: Verdana, Tahoma;
}
h2 {
border-bottom: 4px solid #dfdfe2;
margin-top: 0px;
padding-top: 60px;
}
.info {
padding: 10px 0 0 5px;
}
.formrow {
margin-top: 30px;
padding: 0px 15px;
}
input {
font-size: 16px;
}
.info label, .info input {
display: inline-block;
text-align: right;
}
.info input {
width: 50%;
text-align: left;
}
.info label {
width: 10%;
min-width: 55px;
}
.question-block {
text-align: left;
display: block;
width: 100%;
margin-top: 20px;
padding-top: 5px;
}
p {
margin-top: 5px;
padding-left: 15px;
font-size: 20px;
}
p::before {
content: "Question #";
}
.question {
border: none;
padding-bottom: 0;
}
.answers-list {
list-style: none;
padding: 0;
}
button {
display: block;
margin: 40px auto;
width: 40%;
padding: 15px;
font-size: 23px;
background: #d0d0d5;
border: 3px solid #3b3b4f;
}
footer {
background-color: #2a2a40;
display: flex;
justify-content: center;
}
footer,
footer a {
color: #dfdfe2;
}
address {
text-align: center;
padding: 0.3em;
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
<title>Accessibility Quiz</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<header>
<img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
<h1>HTML/CSS Quiz</h1>
<nav>
<ul>
<li><a accesskey="s" href="#student-info">INFO</a></li>
<li><a accesskey="h" href="#html-questions">HTML</a></li>
<li><a accesskey="c" href="#css-questions">CSS</a></li>
</ul>
</nav>
</header>
<main>
<form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
<section role="region" aria-labelledby="student-info">
<h2 id="student-info">Student Info</h2>
<div class="info">
<label for="student-name">Name:</label>
<input type="text" name="student-name" id="student-name" />
</div>
<div class="info">
<label for="student-email">Email:</label>
<input type="email" name="student-email" id="student-email" />
</div>
<div class="info">
<label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
<input type="date" name="birth-date" id="birth-date" />
</div>
</section>
<section role="region" aria-labelledby="html-questions">
<h2 id="html-questions">HTML</h2>
<div class="question-block">
<p>1</p>
<fieldset class="question" name="html-question-one">
<legend>
The legend element represents a caption for the content of its
parent fieldset element
</legend>
<ul class="answers-list">
<li>
<label for="q1-a1">
<input type="radio" id="q1-a1" name="q1" value="true" />
True
</label>
</li>
<li>
<label for="q1-a2">
<input type="radio" id="q1-a2" name="q1" value="false" />
False
</label>
</li>
</ul>
</fieldset>
</div>
<div class="question-block">
<p>2</p>
<fieldset class="question" name="html-question-two">
<legend>
A label element nesting an input element is required to have a
for attribute with the same value as the input's id
</legend>
<ul class="answers-list">
<li>
<label for="q2-a1">
<input type="radio" id="q2-a1" name="q2" value="true" />
True
</label>
</li>
<li>
<label for="q2-a2">
<input type="radio" id="q2-a2" name="q2" value="false" />
False
</label>
</li>
</ul>
</fieldset>
</div>
</section>
<section role="region" aria-labelledby="css-questions">
<h2 id="css-questions">CSS</h2>
<div class="formrow">
<div class="question-block">
<label for="customer">Are you a frontend developer?</label>
</div>
<div class="answer">
<select name="customer" id="customer" required>
<option value="">Select an option</option>
<option value="yes">Yes</option>
<option value="no">No</option>
</select>
</div>
<div class="question-block">
<label for="css-questions">Do you have any questions:</label>
</div>
<div class="answer">
<textarea id="css-questions" name="css-questions" rows="5" cols="24" placeholder="Who is flexbox..."></textarea>
</div>
</div>
</section>
<button type="submit">Submit</button>
</form>
</main>
<footer>
<address>
freeCodeCamp<br />
San Francisco<br />
California<br />
USA
</address>
</footer>
</body>
</html>
It does work, but it depends on the browser which combination is necessary to activate the access key.
Single characters keys are not a good idea, since they conflict with controls for the browser and screen readers. Hence, browsers typically require a key combination:
On Windows, it’s most likely Alt+Shift+key
And on Mac Control + Option + key
In general, there are some accessibility caveats with the accesskey attribute. See Accesskey on WebAIM
Due to numerous problems with implementation, accesskey is typically best avoided.
For some discussion on how to communicate the access keys to sighted users, see How to highlight accesskeys in a WCAG valid way?
I am checking my website different resolutions and browsers using Dev Tools and www.responsinator. in the web site I have used the owl Carousel, but in iPhone XR (414896) or iphone 12 pro (390844) or samsung galaxy (412 * 912) it is messed up.
in real it is like this
but on those resolution it is like this
this is the code for this part:
.cart-col {
width: 100%;
padding: 10px;
border: 1px solid #e2efef;
box-shadow: 0 0 7px 0 rgba(0, 0, 0, 0.29);
position: relative;
display: inline-block;
background: #fff;
border-radius: 10px;
margin-bottom: 15px;
}
.cart-title {
font-size: 13px;
font-family: IRANSans;
font-weight: bold;
padding-right: 7px;
display: inline-block;
}
.btn-filter {
background-color: #ffffff;
font-size: 14px;
outline: none;
cursor: pointer;
border: 1px solid #ccc;
vertical-align: middle;
width: 100px !important;
float: right;
margin-right: 15px;
margin-top: 15px;
}
.btn-filter>a {
color: #ccc;
display: flex;
align-items: center;
justify-content: center;
margin: 10px;
}
.btn-filter>a:hover {
color: black;
}
.img-filter {
position: absolute;
bottom: 0;
width: 100%;
text-align: center;
}
.filter-title {
font-size: 12px;
font-family: IRANSans;
padding-right: 7px;
display: inline-block;
margin-top: 20px;
}
.filter-option {
font-size: 12px;
font-family: IRANSans;
padding-right: 7px;
}
<!-- ----- Bootstrap-4 ----- -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<!-- ----- Body ------------ -->
<div class="col-lg-2 col-md-2 col-sm-12 mr-1 ml-2 cart-col fixed" style="height:650px;">
<div class="cart-title">Filter </div>
<div>
<hr /> </div>
<div class="filter-title">Select the options </div>
<div>
<div class="btn-filter">
<a asp-controller="" asp-action="">0-2 </a>
</div>
<div class="btn-filter">
<a asp-controller="" asp-action="">3-5 </a>
</div>
</div>
<div>
<div class="btn-filter">
<a asp-controller="" asp-action="">6-8</a>
</div>
<div class="btn-filter">
<a asp-controller="" asp-action="">8-12 </a>
</div>
</div>
<div>
<div class="filter-title">Select the type </div>
<div>
<select class="form-control filter-option" id="BookType" asp-items="#ViewBag.BookType">
<option value="">vocal </option>
</select>
</div>
</div>
<div>
<div class="filter-title">select the subject </div>
<div>
<select class="form-control filter-option" id="BookSubject" asp-items="#ViewBag.BookSubject">
<option value="">comic</option>
</select>
</div>
</div>
<div class="img-filter"><img src="~/images/filter.jpg" /> </div>
how can I make adjustable for this resolution
Update
=============================
I checked my code and I found that I have search input in my layout
<form asp-action="Index" asp-controller="Products" method="get" class="form-inlineflex">
<input type="search" class="header-search-input d-inline-flex" name="SearchKey">
<div class="action-btns d-inline-flex ">
<button class="btn btn-search" type="submit">
<i class="bi bi-search "></i>
</button>
</div>
</form>
with CSS:
.header-search-input {
background: #f0f0f0;
font-size: 12px;
height: 24px;
padding: 0;
outline: none;
}
if I remove this class from input box, so everything will be ok in any resolution and browser, but things will be messy in a few resolution as soon as I set that class to the inputbox
can anyone give me a clue for the reason?
I'm trying to move my text up so that it's not in the center of the page. I would like to move the text "GET YOUR LICENSE & PERMIT BONDS FAST & EASY" up a little bit on my split-screen. I tried top and bottom px but that isn't working. I just would like it to move up a little bit. Any help will be greatly appreciated!
body {
margin:0;
padding: 0;
font-family: "Open+Sans", sans-serif;
}
.navbar {
border-bottom: 2px solid #0C133C;
}
#nav {
background-color: #fff;
color: white;
width: 100%;
}
.nav {
float: right;
text-align: left;
margin: 0;
}
.nav > li {
display:Inline-block;
padding: 20px 50px 10px 9px;
}
.nav > li a {
text-decoration: none;
color: #0C133C;
font-size: 18px;
border-bottom: 3px solid transparent;
}
.clearer {
clear:both;
}
.subnav class{
margin: 0;
position:relative;
}
.subnav > div a {
text-decoration: none;
color: #0C133C;
font-size: 18px;
padding: 20px 30px 10px 9px;
}
.logo {
margin-top: 1rem;
}
.subnav {
display: flex;
justify-content: space-between;
align-items: center;
margin-right: 1rem;
}
.split {
height: 70%;
width: 50%;
position: fixed;
z-index: 1;
top: -50;
overflow-x: hidden;
padding-top: 20px;
}
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
.left {
left: 0;
background-color: #282C41;
color: white;
margin-top: .5rem;
font-size: 15px;
}
h1 {
line-height: 1.2;
font-size: 40px;
bottom: 20px;
}
.right {
right: 0;
background-color: #CDCDCD;
margin-top: .5rem;
font-size: 18px;
}
input[type=text], select {
position: relative;
left: 140px;
width: 50%;
padding: 12px 20px;
margin: 3px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
.button: {
position: relative;
left: 140px;
}
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Navbar</title>
<link rel="stylesheet" href="styles.css"
</head>
<body>
<div class="navbar">
<ul class="nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Contact Us</a>
</li>
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Sign In</a>
</li>
</ul>
<div class="clearer"></div>
</div>
<subnav class="subnav subnav-light bg-light">
<img src="universallogo.jpg" class="logo"/>
<div class="container-fluid">
<a class="subnav=brand" href="#">
<a class="nav-link active" aria-current="page" href="#">Bonds</a>
</a>
<a class="nav-link active" aria-current="page" href="#">Report a Claim</a>
<a class="nav-link active" aria-current="page" href="#">About Us</a>
<a class="nav-link active" aria-current="page" href="#">Search</a>
</div>
</subnav>
<div class="split left">
<div class="centered">
<h1>GET YOUR LICENSE & PERMIT BONDS FAST & EASY</h1>
<p>We provide our Customers with a fast, easy, and secure way to get bonded. Get your Free Quote in minutes.
</p>
</div>
</div>
<div class="split right">
<form name="form1" id="form1" action="/action_page.php">
<select name="subject" id="subject">
<option value="" selected="selected">Select Your State</option>
<option value="California">California</option>
<option value="California">Illinois</option>
<option value="California">Michigan</option>
<option value="California">Ohio</option>
</select>
<br><br>
<select name="topic" id="topic">
<option value="" selected="selected">Who is requring the bond</option>
</select>
<br><br>
<select name="chapter" id="chapter">
<option value="" selected="selected">What jurisdiction is requring the bond</option>
</select>
<br><br>
<select name="chapter" id="chapter">
<option value="" selected="selected">Select Your Bond</option>
</select>
<br><br>
</form>
<form action="/action_page.php">
<input type="text" id="date" name="startdate" placeholder="Effective Start Date">
<br><br>
<input type="text" id="email" name="typeemail" placeholder=" Type E-mail">
</form>
<button type="button">Click Me!</button>
</div>
</body>
</html>
You are having this issue because of the top: 50% style applied to the centered class style applied to the parent container of the <h1> element. I've applied the following changes to avoid this issue and allow you to apply the manual margin-top style.
.centered{
position: absolute;
/* I disabled the style below. */
/* top: 50%; */
/* Added the following style for spacing from above. */
margin-top: 125px;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
Change the margin-top value defined in the centered class style to set the position of the corresponding <h1> element. Below is the executable snippet.
body {
margin: 0;
padding: 0;
font-family: "Open+Sans", sans-serif;
}
.navbar {
border-bottom: 2px solid #0C133C;
}
#nav {
background-color: #fff;
color: white;
width: 100%;
}
.nav {
float: right;
text-align: left;
margin: 0;
}
.nav>li {
display: Inline-block;
padding: 20px 50px 10px 9px;
}
.nav>li a {
text-decoration: none;
color: #0C133C;
font-size: 18px;
border-bottom: 3px solid transparent;
}
.clearer {
clear: both;
}
.subnav class {
margin: 0;
position: relative;
}
.subnav>div a {
text-decoration: none;
color: #0C133C;
font-size: 18px;
padding: 20px 30px 10px 9px;
}
.logo {
margin-top: 1rem;
}
.subnav {
display: flex;
justify-content: space-between;
align-items: center;
margin-right: 1rem;
}
.split {
height: 70%;
width: 50%;
position: fixed;
z-index: 1;
top: -50;
overflow-x: hidden;
padding-top: 20px;
}
.centered{
position: absolute;
/* I disabled the style below. */
/* top: 50%; */
/* Added the following style for spacing from above. */
margin-top: 125px;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
.left {
left: 0;
background-color: #282C41;
color: white;
margin-top: .5rem;
font-size: 15px;
}
h1 {
line-height: 1.2;
font-size: 40px;
bottom: 20px;
}
.right {
right: 0;
background-color: #CDCDCD;
margin-top: .5rem;
font-size: 18px;
}
input[type=text],
select {
position: relative;
left: 140px;
width: 50%;
padding: 12px 20px;
margin: 3px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
.button: {
position: relative;
left: 140px;
}
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Navbar</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="navbar">
<ul class="nav">
<li class="nav-item"><a class="nav-link active" aria-current="page" href="#">Contact Us</a></li>
<li class="nav-item"><a class="nav-link active" aria-current="page" href="#">Sign In</a></li>
</ul>
<div class="clearer"></div>
</div>
<subnav class="subnav subnav-light bg-light"><img src="universallogo.jpg" class="logo" />
<div class="container-fluid"><a class="subnav=brand" href="#"><a class="nav-link active" aria-current="page" href="#">Bonds</a></a><a class="nav-link active" aria-current="page" href="#">Report a Claim</a><a class="nav-link active" aria-current="page" href="#">About Us</a><a class="nav-link active" aria-current="page" href="#">Search</a></div>
</subnav>
<div class="split left">
<div class="centered">
<h1>GET YOUR LICENSE & PERMIT BONDS FAST & EASY</h1>
<p>We provide our Customers with a fast, easy, and secure way to get bonded. Get your Free Quote in minutes. </p>
</div>
</div>
<div class="split right">
<form name="form1" id="form1" action="/action_page.php"><select name="subject" id="subject">
<option value="" selected="selected">Select Your State</option>
<option value="California">California</option>
<option value="California">Illinois</option>
<option value="California">Michigan</option>
<option value="California">Ohio</option>
</select><br><br><select name="topic" id="topic">
<option value="" selected="selected">Who is requring the bond</option>
</select><br><br><select name="chapter" id="chapter">
<option value="" selected="selected">What jurisdiction is requring the bond</option>
</select><br><br><select name="chapter" id="chapter">
<option value="" selected="selected">Select Your Bond</option>
</select><br><br></form>
<form action="/action_page.php"><input type="text" id="date" name="startdate" placeholder="Effective Start Date"><br><br><input type="text" id="email" name="typeemail" placeholder=" Type E-mail"></form><button type="button">Click Me!</button>
</div>
</body>
</html>
I have this simple html page, with css it is working good except when I scroll the page down, the input form is above the header. I would like the header to always be above the content When I scroll.
Can anyone help ?
.sticky {
position: sticky;
top: 0;
}
#i ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: blue;
}
#i li {
float: left;
}
#i li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
#i li a:hover {
border-radius: 0px 0px 10px 10px;
background-color: rgb(43, 137, 226);
}
.active {
background-color: rgb(43, 137, 226);
}
#footer-id {
background-color: blue;
}
#MyForm .contact-form {
background: #fff;
margin-top: 10%;
margin-bottom: 5%;
width: 70%;
}
#MyForm .fixed-header {
width: 100%;
margin: 0 auto;
position: fixed;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
z-index: 999;
}
#MyForm .contact-form .form-control {
border-radius: 1rem;
}
#MyForm .contact-image {
text-align: center;
}
#MyForm .contact-image img {
border-radius: 6rem;
width: 11%;
margin-top: -3%;
transform: rotate(29deg);
}
#MyForm .contact-form form {
padding: 14%;
}
#MyForm .contact-form form .row {
margin-bottom: -7%;
}
#MyForm .contact-form h3 {
margin-bottom: 8%;
/* margin-top: -10%; */
text-align: center;
color: #0062cc;
}
#MyForm .contact-form .btnContact {
width: 50%;
border: none;
border-radius: 1rem;
padding: 1.5%;
background: #dc3545;
font-weight: 600;
color: #fff;
cursor: pointer;
}
#MyForm .btnContactSubmit {
width: 50%;
border-radius: 1rem;
padding: 1.5%;
color: #fff;
background-color: #0062cc;
border: none;
cursor: pointer;
}
.input-group {
position: relative;
width: 100%;
}
.input-group input {
position: relative;
height: 45px;
border-radius: 30px;
min-width: 500px;
box-shadow: none;
/* border: 1px solid #eaeaea; */
padding-left: 100px;
}
.input-group label {
position: absolute;
left: 0;
height: 48px;
background: #55ccf2;
padding: 0px 25px;
border-radius: 30px;
line-height: 48px;
font-size: 18px;
color: #fff;
top: 0;
width: 100px;
font-weight: 100;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<!--The content below is only a placeholder and can be replaced.-->
<span id="i">
<ul class="sticky">
<li>
<a
href="#"
>Home</a
>
</li>
<li>
<a
href="#news"
>News</a
>
</li>
<li>
<a
href="#contact"
>Contact</a
>
</li>
<li>
<a
href="#about"
>About</a
>
</li>
<li>
<a
href="#test"
>Test</a
>
</li>
<ul class="nav navbar-nav pull-right">
<li class="nav">Contact</li>
</ul>
<ul class="nav navbar-nav pull-right">
<li class="nav">
Target
</li>
</ul>
</ul>
</span>
<div #con class="fixed-header">
<br />
<br />
<!-- <div class="input-group">
<input type="text">
<label>Some Text</label>
</div> -->
<div id="MyForm">
<div class="container contact-form">
<div class="contact-image">
<img src="assets/rocket_contact.png" alt="rocket_contact" />
</div>
<form
[formGroup]="productForm"
(ngSubmit)="sendMail(productForm.value)"
>
<h3>Merci de nous laisser un message</h3>
<!-- <div class="row"> -->
<div class="col-md-12">
<div class="form-group" id="your_name">
<input
formControlName="name"
type="text"
name="txtName"
class="form-control"
placeholder="Your Name *"
value=""
/>
</div>
<div class="form-group">
<input
formControlName="email"
type="text"
name="txtEmail"
class="form-control"
placeholder="Your Email *"
value=""
/>
</div>
<div class="form-group">
<input
formControlName="number"
type="text"
name="txtPhone"
class="form-control"
placeholder="Your Phone Number *"
value=""
/>
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<textarea
formControlName="message"
name="txtMsg"
class="form-control"
placeholder="Your Message *"
style="width: 100%; height: 150px;"
></textarea>
</div>
<div class="form-group">
<input
type="submit"
name="btnSubmit"
class="btnContact"
value="Send Message"
/>
</div>
</div>
<!-- </div> -->
</form>
</div>
</div>
</div>
</body>
</html>
When an element has position: absolute or position: fixed, it happens that it can overlap with other elements. When it happens, the container that will be rendered above will be the one that has the higher z-index value. If the z-index isn't set, then it's the lowest possible.
For this reason, you can just add:
z-index: 1;
to your sticky class:
.sticky {
position: sticky;
top: 0;
z-index: 1;
}
#i ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: blue;
}
#i li {
float: left;
}
#i li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
#i li a:hover {
border-radius: 0px 0px 10px 10px;
background-color: rgb(43, 137, 226);
}
.active {
background-color: rgb(43, 137, 226);
}
#footer-id {
background-color: blue;
}
#MyForm .contact-form {
background: #fff;
margin-top: 10%;
margin-bottom: 5%;
width: 70%;
}
#MyForm .fixed-header {
width: 100%;
margin: 0 auto;
position: fixed;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
z-index: 999;
}
#MyForm .contact-form .form-control {
border-radius: 1rem;
}
#MyForm .contact-image {
text-align: center;
}
#MyForm .contact-image img {
border-radius: 6rem;
width: 11%;
margin-top: -3%;
transform: rotate(29deg);
}
#MyForm .contact-form form {
padding: 14%;
}
#MyForm .contact-form form .row {
margin-bottom: -7%;
}
#MyForm .contact-form h3 {
margin-bottom: 8%;
/* margin-top: -10%; */
text-align: center;
color: #0062cc;
}
#MyForm .contact-form .btnContact {
width: 50%;
border: none;
border-radius: 1rem;
padding: 1.5%;
background: #dc3545;
font-weight: 600;
color: #fff;
cursor: pointer;
}
#MyForm .btnContactSubmit {
width: 50%;
border-radius: 1rem;
padding: 1.5%;
color: #fff;
background-color: #0062cc;
border: none;
cursor: pointer;
}
.input-group {
position: relative;
width: 100%;
}
.input-group input {
position: relative;
height: 45px;
border-radius: 30px;
min-width: 500px;
box-shadow: none;
/* border: 1px solid #eaeaea; */
padding-left: 100px;
}
.input-group label {
position: absolute;
left: 0;
height: 48px;
background: #55ccf2;
padding: 0px 25px;
border-radius: 30px;
line-height: 48px;
font-size: 18px;
color: #fff;
top: 0;
width: 100px;
font-weight: 100;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<!--The content below is only a placeholder and can be replaced.-->
<span id="i">
<ul class="sticky">
<li>
<a
href="#"
>Home</a
>
</li>
<li>
<a
href="#news"
>News</a
>
</li>
<li>
<a
href="#contact"
>Contact</a
>
</li>
<li>
<a
href="#about"
>About</a
>
</li>
<li>
<a
href="#test"
>Test</a
>
</li>
<ul class="nav navbar-nav pull-right">
<li class="nav">Contact</li>
</ul>
<ul class="nav navbar-nav pull-right">
<li class="nav">
Target
</li>
</ul>
</ul>
</span>
<div #con class="fixed-header">
<br />
<br />
<!-- <div class="input-group">
<input type="text">
<label>Some Text</label>
</div> -->
<div id="MyForm">
<div class="container contact-form">
<div class="contact-image">
<img src="assets/rocket_contact.png" alt="rocket_contact" />
</div>
<form
[formGroup]="productForm"
(ngSubmit)="sendMail(productForm.value)"
>
<h3>Merci de nous laisser un message</h3>
<!-- <div class="row"> -->
<div class="col-md-12">
<div class="form-group" id="your_name">
<input
formControlName="name"
type="text"
name="txtName"
class="form-control"
placeholder="Your Name *"
value=""
/>
</div>
<div class="form-group">
<input
formControlName="email"
type="text"
name="txtEmail"
class="form-control"
placeholder="Your Email *"
value=""
/>
</div>
<div class="form-group">
<input
formControlName="number"
type="text"
name="txtPhone"
class="form-control"
placeholder="Your Phone Number *"
value=""
/>
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<textarea
formControlName="message"
name="txtMsg"
class="form-control"
placeholder="Your Message *"
style="width: 100%; height: 150px;"
></textarea>
</div>
<div class="form-group">
<input
type="submit"
name="btnSubmit"
class="btnContact"
value="Send Message"
/>
</div>
</div>
<!-- </div> -->
</form>
</div>
</div>
</div>
</body>
</html>
I have these blocks of code that I want to stay center the entire time. But I am not sure how. I am hoping you guys could help me out here.
Here is the code
main {
width: 70%;
float: left;
clear: both;
border-right: 1px solid #331a00;
}
main ul {
margin-top: 1em;
margin: auto;
width: 100%;
margin: auto
}
.index {
float: left;
border: 3px solid #b88f61;
margin-top: 1em;
margin-right: 2em;
list-style: none;
}
main ul {
margin-left: 3em
}
.index:hover {
box-shadow: 1px 2px 3px 4px grey;
border: 3px solid #331a00;
}
.index a div h3 {
background-color: #331a00;
padding: .5em;
color: white;
text-decoration: none;
font-weight: bold;
font-size: 100%;
text-align: center;
text-decoration: underline
}
.index a {
text-decoration: none;
}
.index a div img {
width: 150px;
height: 150px;
margin-bottom: -5px
}
#mobile_index {
display: none;
}
#medusa {
background-color: white;
;
}
#intro {
width: 70%;
margin: auto;
margin-bottom: 4em;
clear: both;
font-size: 120%
}
#intro h4 {
text-align: center;
padding: 1em 0;
font-size: 150%;
}
#intro h1 a {
text-decoration: none;
}
#intro h1 {
text-align: center;
}
/*ASIDE*/
aside figure {
width: 100%
}
aside {
width: 24%;
float: right;
margin-top: 1.5em;
}
aside h3 {
font-family: "Times New Roman", serif;
font-size: 1.5em;
font-weight: bolder;
padding-bottom: .5em;
text-align: center;
}
.popular {
display: block;
background-color: #331a00;
color: white;
padding: .5em;
margin-bottom: .3em;
margin-right: .1em;
margin-left: 0;
font-weight: bold;
}
aside figure figcaption {
margin-bottom: 1em;
width: 100%;
background-color: #331a00;
color: white;
font-weight: bold;
padding: .5em 0;
font-size: 1.2vw
}
form {
width: 100%
}
input[type="submit"] {
margin: auto
}
<main>
<h1 id="page_title">The Compendium of Greek Mythology</h1>
<ul>
<li class="index">
<a href="Compendium Gods.html">
<div>
<img src="images/The Gods.jpg" alt="Gods">
<h3>Gods</h3>
</div>
</a>
</li>
<li class="index">
<a href="#" alt="Heroes">
<div>
<img src="images/The Heroes.JPG">
<h3>Heroes</h3>
</div>
</a>
</li>
<li class="index">
<a href="#">
<div>
<img src="images/The Monsters.png" id="medusa" alt="Monsters">
<h3>Beasts</h3>
</div>
</a>
</li>
<li class="index">
<a href="#">
<div>
<img src="images/The Titans.jpg" alt="The_Titans">
<h3>Titans</h3>
</div>
</a>
</li>
<li class="index">
<a href="#">
<div>
<img src="images/The Titans.jpg" alt="The_Giants">
<h3>Giants</h3>
</div>
</a>
</li>
<li class="index">
<a href="#">
<div>
<img src="images/The Gods.jpg" alt="The_Giants">
<h3>Nymphs</h3>
</div>
</a>
</li>
<li class="index">
<a href="#">
<div>
<img src="images/The Gods.jpg" alt="The_Giants">
<h3>Constellations</h3>
</div>
</a>
</li>
</ul>
</main>
<aside>
<div>
<form method="get" action="http://www.google.com/search">
<h3>Search the Compendium</h3>
<input type="search" name="q" size="" maxlength="" placeholder="Google Search">
<input type="hidden" name="domains" value="http://christiaanblom.coolpage.biz">
<input type="hidden" name="sitesearch" value="http://christiaanblom.coolpage.biz"><br>
<input type="submit" name="search" value="Search">
</form>
</div>
<div>
<h3>Popular</h3>
<p class="popular">Zeus</p>
<p class="popular">Poseidon</p>
<p class="popular">Hercules</p>
<p class="popular">Dragon</p>
<p class="popular">Cyclops</p>
<p class="popular">Ares</p>
<p class="popular">Kronos</p>
<p class="popular">Perseus</p>
<p class="popular">Giants</p>
<p class="popular">Gaia</p>
<p class="popular">Oranos</p>
</div>
</aside>
Right now, the .index list items are staying on the left hand side of the main element. I've tried various things, but none of them worked out, which is why I am coming to you guys.
Remove padding and margin from <ul>, add text-align:center;
Remove the float:left; from .index and add display:inline-block;
main {
width: 70%;
float: left;
clear: both;
border-right: 1px solid #331a00;
}
main ul {
margin-top: 1em;
margin: auto;
width: 100%;
margin: auto;
}
/* Remove the float: left; from .index and add display: inline-block; */
.index {
display: inline-block;
border: 3px solid #b88f61;
margin-top: 1em;
margin-right: 2em;
list-style: none;
}
/* Remove padding and margin from UL, add text-align:center; */
main ul {
margin-left: 0;
padding-left: 0;
text-align: center;
}
.index:hover {
box-shadow: 1px 2px 3px 4px grey;
border: 3px solid #331a00;
}
.index a div h3 {
background-color: #331a00;
padding: .5em;
color: white;
text-decoration: none;
font-weight: bold;
font-size: 100%;
text-align: center;
text-decoration: underline;
}
.index a {
text-decoration: none;
}
.index a div img {
width: 150px;
height: 150px;
margin-bottom: -5px
}
#mobile_index {
display: none;
}
#medusa {
background-color: white; /* Removed extra ; */
}
#intro {
width: 70%;
margin: auto;
margin-bottom: 4em;
clear: both;
font-size: 120%;
}
#intro h4 {
text-align: center;
padding: 1em 0;
font-size: 150%;
}
#intro h1 a {
text-decoration: none;
}
#intro h1 {
text-align: center;
}
/*ASIDE*/
aside figure {
width: 100%
}
aside {
width: 24%;
float: right;
margin-top: 1.5em;
}
aside h3 {
font-family: "Times New Roman", serif;
font-size: 1.5em;
font-weight: bolder;
padding-bottom: .5em;
text-align: center;
}
.popular {
display: block;
background-color: #331a00;
color: white;
padding: .5em;
margin-bottom: .3em;
margin-right: .1em;
margin-left: 0;
font-weight: bold;
}
aside figure figcaption {
margin-bottom: 1em;
width: 100%;
background-color: #331a00;
color: white;
font-weight: bold;
padding: .5em 0;
font-size: 1.2vw
}
form {
width: 100%
}
input[type="submit"] {
margin: auto
}
<main>
<h1 id="page_title">The Compendium of Greek Mythology</h1>
<ul>
<li class="index">
<a href="Compendium Gods.html">
<div>
<img src="images/The Gods.jpg" alt="Gods">
<h3>Gods</h3>
</div>
</a>
</li>
<li class="index">
<a href="#" alt="Heroes">
<div>
<img src="images/The Heroes.JPG">
<h3>Heroes</h3>
</div>
</a>
</li>
<li class="index">
<a href="#">
<div>
<img src="images/The Monsters.png" id="medusa" alt="Monsters">
<h3>Beasts</h3>
</div>
</a>
</li>
<li class="index">
<a href="#">
<div>
<img src="images/The Titans.jpg" alt="The_Titans">
<h3>Titans</h3>
</div>
</a>
</li>
<li class="index">
<a href="#">
<div>
<img src="images/The Titans.jpg" alt="The_Giants">
<h3>Giants</h3>
</div>
</a>
</li>
<li class="index">
<a href="#">
<div>
<img src="images/The Gods.jpg" alt="The_Giants">
<h3>Nymphs</h3>
</div>
</a>
</li>
<li class="index">
<a href="#">
<div>
<img src="images/The Gods.jpg" alt="The_Giants">
<h3>Constellations</h3>
</div>
</a>
</li>
</ul>
</main>
<aside>
<div>
<form method="get" action="http://www.google.com/search">
<h3>Search the Compendium</h3>
<input type="search" name="q" size="" maxlength="" placeholder="Google Search">
<input type="hidden" name="domains" value="http://christiaanblom.coolpage.biz">
<input type="hidden" name="sitesearch" value="http://christiaanblom.coolpage.biz"><br>
<input type="submit" name="search" value="Search">
</form>
</div>
<div>
<h3>Popular</h3>
<p class="popular">Zeus</p>
<p class="popular">Poseidon</p>
<p class="popular">Hercules</p>
<p class="popular">Dragon</p>
<p class="popular">Cyclops</p>
<p class="popular">Ares</p>
<p class="popular">Kronos</p>
<p class="popular">Perseus</p>
<p class="popular">Giants</p>
<p class="popular">Gaia</p>
<p class="popular">Oranos</p>
</div>
</aside>