I have looked online and tried different things to make the contact form be centered when the screen is or gets smaller. The header and navbar are responsive, the contact form is not. Also, my code was in two separate sheets on here and then the website randomly combined them. You can break them apart if you know how.
body {
margin: 0;
padding: 0;
font-family: 'arial', serif;
}
.nav {
background-color: #ffb6c1;
color: #ffffff list-style: none;
text-align: center;
padding: 20px 0 20px 0;
}
img {
max-width: auto max-height: auto;
}
.nav>li {
display: inline-block;
padding-right: 50px;
font-size: 16px;
}
.nav>li>a {
text-decoration: none;
color: #ffffff
}
.nav>li>a:hover {
color: #C0C0C0
}
.banner {
width: 100;
display: block;
}
.banner>.bannerimage {
width: 100;
height: 100;
display: block;
}
ul.nav {
margin: 0;
}
.cognito {
margin: 0 auto;
width: 100px;
}
<!DOCTYPE>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="Events.css">
<link rel="stylesheet" type="text/css" href="contactusmobile.css" media="screen and (max-width: 900px)">
</head>
<body>
<div class="header">
<img class="banner-image" src="ccc.png" width="100%" height="150px">
</div>
<ul class="nav">
<li>Home</li>
<li>About Us</li>
<li>Menu</li>
<li>Enter to Win</li>
<li>Merchandise</li>
<li>Events</li>
<li>Contact Us</li>
</ul>
<style>
.cognito {
position: absolute;
margin-top: 20px;
margin-left: 450px;
}
body {
background: url('heartcoffee.jpeg');
background-repeat: no-repeat;
background-size: 2000px 1000px;
}
</style>
<div class="cognito">
<script src="https://services.cognitoforms.com/s/q8sF4QFeokuqNI1bQZm3vg">
</script>
<script>
Cognito.load("forms", {
id: "1"
});
</script>
</div>
</body>
</html>
It’s useless post all code of your problem request.
However, for center a form inside a div container you can use:
.center{
margin:0 auto;
}
Else inside a position:relative; container:
.center{
position:absolute;
left:50%;
transform:translateX(-50%);
top:0;
}
Related
I have tried changing the display and getting rid of some code? probably erased the wrong thing or some code is overlapping? Im new to web development so if you can explain what I did wrong that will be great thanks. Check out Code on this JSFiddle link. https://jsfiddle.net/galbruh/htsrmy0L/2/#&togetherjs=PjjPVg1cOR
.toc-nav {
float: left;
/*list-style: none;*/
margin-top: 2%;
/*margin-left: 10%;
margin-right: 0%;*/
width: 100%;
text-align: center;
}
.toc-nav li {
display: incline;
list-style-type: none;
}
.toc-nav li a {
color: white;
text-decoration: none;
padding: 10px 70px;
font-family: "Roboto", sans-serif;
font-size: 16px;
}
.toc-liv li.active a {
border: 1px solid white;
}
.toc-nav li a:hover {
border: 1px solid white;
}
#media screen and (max-width: 500px) {
.toc-nav li a {
float: left;
/*display: none;*/
width: 100%;
text-align: left;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv='content-type' content='text/html; charset=UTF-8' />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Welcome</title>
<link rel="stylesheet" type="text/css" href="css/mystyle.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<script src="js/classie.js"></script>
<style>
body,html {
height: 100%;
margin: 0;
background-color: #2f3036;
}
b {
color: black;
font-family: "Teodor";
font-size: 25px;
}
.bg {
/* The image used */
background-image: url("images/logo.png");
/* Full height */
height: 100%;
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
label {
color: white;
}
</style>
</head>
<body>
<header id="top"></header>
<nav role="navigation">
<ul class="toc-nav">
<li>About</li>
<li>Albums</li>
<li>Music</li>
<li>Contact</li>
</ul>
</nav>
<div class="bg"></div>
You have a spelling error in display: incline, it's actually spelled inline. That fixes it.
I am currently creating a website for my friend, but I ran into an issue. A very irritating one. I have a header (a div with the id of header) and an ul inside of it. I added my <img src="filename.extension" id="logo"> into my header div, but it appears underneath the actual header. I did float: right; thinking it would appear inside the header but it doesn't. And I added a border of 1px around the ul to see if it took up to much space, but there were enough space left for the logo to fit.
Here's my code:
(HTML)
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="header">
<div id="headercon">
<ul>
<li>Home</li>
<li>About</li>
<li>Vote</li>
<li>Rules</li>
<li>Discord</li>
<li>Status</li>
</ul>
</div>
<img id="logo" src="vglogo.png">
</div>
</body>
</html>
(CSS):
#header {
width: 100%;
height: 60px;
position: absolute;
top: 0;
background-color: #ededed;
border-bottom: 5px solid #dddddd;
}
body {
margin: 0;
padding: 0;
}
#header>#headercon>ul {
display: flex;
line-height: 10px;
font-size: 25px;
}
#headercon {
display: block;
width: 60%;
height: auto;
margin-right: 500px;
margin-left: 100px;
}
li {
list-style-type: none;
}
a {
text-decoration: none;
color: black;
padding: 0 10px;
}
#logo {
float: right;
}
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="style.css"> </head>
<body>
<div id="header">
<div id="headercon">
<ul>
<li>Home</li>
<li>About</li>
<li>Vote</li>
<li>Rules</li>
<li>Discord</li>
<li>Status</li>
</ul>
</div> <img id="logo" src="vglogo.png"> </div>
</body>
</html>
You may expected it like this?
body {
margin: 0;
padding: 0;
}
#header {
width: 100%;
height: 60px;
position: fixed;
top: 0;
left:0;
background-color: #ededed;
border-bottom: 5px solid #dddddd;
}
#header>ul>li {
float:left;
list-style-type: none;
}
#header>ul>li>a {
font-size: 25px;
text-decoration: none;
color: black;
padding: 0 10px;
}
.logo {
float: right!important;
right:40px;
position: relative;
top: -10px;
}
.logo img{
height:50px
}
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="header">
<ul>
<li>Home</li>
<li>About</li>
<li>Vote</li>
<li>Rules</li>
<li>Discord</li>
<li>Status</li>
<li class="logo"><img id="logo" src="https://static1.squarespace.com/static/579d30036a49638cd66ee855/57a69cadb3db2b8908f27da1/57a69d90e6f2e1f140d7bcfa/1470542795812/Intel_logo.png"></li>
</ul>
</div>
</body>
</html>
I am having some problems with floated nav. As can be seen in the first image below, I use position in my code and the result is that the nav is floated above the logo when I scaled the browser.
But I want the nav and the logo to be separated (like the second image) whenever I scale the browser. What should I do?
Are there any other ways to do that without using float?
This my my code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.css">
<style>
.wrapper{
max-width: 1600px;
margin: 0 auto;
}
header{
background-color: lightgray;
overflow: hidden;
padding: 20px;
position: relative;
}
header .logo{
float: left;
}
header nav{
float: right;
position: absolute;
}
header li{
float: left;
margin: 0px 5px 0px 5px;
}
header a{
text-decoration: none;
font-weight: bold;
color: white;
padding: 10px;
}
</style>
</head>
<body>
<div class="wrapper">
<header>
<div class="logo">
<img src="images\logo.png" alt="logo">
</div>
<nav>
<ul>
<li>HOMEPAGE</li>
<li>INTRODUCTION</li>
<li>PRODUCTS</li>
<li>PRICING</li>
<li>CONTACT</li>
</ul>
</nav>
</header>
</div>
</body>
</html>
There are many ways to do that. Here's one:
Add this to your style:
nav {margin-left: 50px;}
Here is one version where nav floats right: jsfiddle
CSS:
.wrapper{
max-width: 1600px;
margin: 0 auto;
}
header{
background-color: lightgray;
overflow: hidden;
padding: 20px;
position: relative;
}
header .logo{
float: left;
margin-left: 50px;
}
/* width is set to 80% and nav floats right, no pos absolute */
header nav{
float: right;
width: 80%;
}
header li{
float: left;
margin: 0px 5px 0px 5px;
}
header a{
text-decoration: none;
font-weight: bold;
color: white;
padding: 10px;
}
This is other method using display:flex.
.wrapper{
max-width: 1600px;
margin: 0 auto;
}
header{
background-color: lightgray;
overflow: hidden;
padding: 20px;
position: relative;
}
header {
display: flex !important;
justify-content: space-between;
}
.logo img {
height: auto;
max-height: 100%;
max-width: 100%;
width: auto;
}
header li{
float: left;
margin: 0px 5px 0px 5px;
}
header a{
text-decoration: none;
font-weight: bold;
color: white;
padding: 10px;
}
#media screen and (max-width:1024px){
.logo {
width: 20%;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.css">
</head>
<body>
<div class="wrapper">
<header>
<div class="logo">
<img src="https://dummyimage.com/250x150/000/fff&text=logo" alt="logo">
</div>
<nav>
<ul>
<li>HOMEPAGE</li>
<li>INTRODUCTION</li>
<li>PRODUCTS</li>
<li>PRICING</li>
<li>CONTACT</li>
</ul>
</nav>
</header>
</div>
</body>
</html>
You might need to adjust the widths a little bit. You can add max-width and min-with to both your logo and nav too.
.wrapper{
max-width: 1600px;
margin: 0 auto;
}
header{
background-color: lightgray;
overflow: hidden;
padding: 20px;
position: relative;
}
/* add the width and margin to your logo class*/
header .logo{
float: left;
margin-right:2%;
width:26%;
}
/* make sure your image has a width */
header .logo img{
width:100%;
}
/* add the width to your nav class */
header nav{
float: right;
width:70%;
padding-top:5%;
}
header li{
float: left;
margin: 0px 5px 0px 5px;
}
header a{
text-decoration: none;
font-weight: bold;
color: white;
padding: 10px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.css">
</head>
<body>
<div class="wrapper">
<header>
<div class="logo">
<img src="https://dummyimage.com/350x183/000/fff&text=logo" alt="logo">
</div>
<nav>
<ul>
<li>HOMEPAGE</li>
<li>INTRODUCTION</li>
<li>PRODUCTS</li>
<li>PRICING</li>
<li>CONTACT</li>
</ul>
</nav>
</header>
</div>
</body>
</html>
This is one method using float:
.wrapper{
max-width: 1600px;
margin: 0 auto;
}
header{
background-color: lightgray;
overflow: hidden;
padding: 20px;
position: relative;
}
header .logo{
float: left;
}
header nav {
float: right;
position: relative;
margin-top: 35px;
}
header li{
float: left;
margin: 0px 5px 0px 5px;
}
header a{
text-decoration: none;
font-weight: bold;
color: white;
padding: 10px;
}
img {
height: auto;
max-height: 100%;
max-width: 100%;
width: auto;
}
#media screen and (max-width:1169px){
header .logo {
width: 19%;
}
}
#media screen and (max-width:767px){
header .logo {
width: 15%;
}
header a {
padding: 5px;
font-size: 14px;
}
header nav {
margin-top: 15px;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.css">
</head>
<body>
<div class="wrapper">
<header>
<div class="logo">
<img src="https://dummyimage.com/350x183/000/fff&text=logo" alt="logo">
</div>
<nav>
<ul>
<li>HOMEPAGE</li>
<li>INTRODUCTION</li>
<li>PRODUCTS</li>
<li>PRICING</li>
<li>CONTACT</li>
</ul>
</nav>
</header>
</div>
</body>
</html>
I know that multiple questions has been discussed on this subject, I coped and pasted every suggestion/answers.. None of them work, please help!
Remember I would like the content, when scrolled to not overlap the menubar.
My Problem
Here is the image.
When ever I scroll the center div(the one that says "this website is dedicated to games") overlaps the menu bar.
How do I prevent this from happening?
Here's another image
Code Id(s)
Center div that is colored black. id="divCenter".
Element that is being overlapped("menu bar). id="NavDivef"
Code, html
<!DOCTYPE html>
<html>
<head>
<title>Home:</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="icon" href="http://hdwallpaperbackgrounds.net/wp-content/uploads/2015/07/Video-Game-Wallpapers-and-Backgrounds-0.jpg">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<nav id="nav">
<div id="maindic">
<div id="NavDivef">
<ul>
<h1>CPG</h1>
<li>Contact</li>
<li>Find out more</li>
<li>Contact</li>
<li>Find out more</li>
</ul>
</div>
</div>
</nav>
<center>
<div id="divCenter">
<p>
This website is dedicated to games.
</p>
</div>
</center>
<img alt="" id="gameImage" src="http://hdwallpaperbackgrounds.net/wp-content/uploads/2015/07/Video-Game-Wallpapers-and-Backgrounds-0.jpg"/>
</body>
</html>
Code, css
body{
font-family: arial, sens-serif;
background-size: cover;
}
*{
padding: 0px;
margin: 0px;
}
#NavDivef ul{
width: 100%;
height: 80px;
background-color: black;
line-height: 80px;
position: fixed;
line-height: 80px;
opacity: 0.8;
}
#NavDivef ul li{
list-style-type: none;
display: inline-block;
float: right;
}
#NavDivef ul a{
text-decoration: none;
padding: 30px;
color:White;
}
#NavDivef ul li:hover{
background: orangered;
color: #cc0000;
}
#NavDivef h1{
color:red;
width: 300px;
float: left;
font-size: 480%;
margin-left: 15px;
}
#divCenter{
position: absolute;
width: 50%;
height: 54%;
background-color: black;
margin-top: 280px;
margin-left: 350px;
}
#divCenter p{
color:red;
margin-top: 30px;
margin-left: 30px;
font-size: 40px;
}
#divExample{
width: 600px;
height: 700px
}
Thank you in advance.
As the title says I seem to be encountering issues with my css and I cant for the life of me figure out why. Everything looks correct to me, so I decided to bring it to stack overflow to get some help. Here is my code below
header {
height: 70px;
width: 100%;
background: url("../img/header.svg");
background-size: cover; }
header #logo {
float: left;
display: inline-block;
margin: 10px 0 0 50px;
width: 112px;
height: 50%; }
header nav {
float: right;
margin-right: 50px;
display: inline-block;
height: 70px;
width: 435px; }
header nav a#pull {
display: none; }
header nav ul {
padding: 0;
margin: 0 auto;
width: 600px;
height: 70px; }
header nav ul li {
line-height: 70px;
margin: 0 15px;
display: inline;
list-style: none; }
header nav ul li a {
text-decoration: none;
text-transform: capitalize;
font-family: Helvetica;
font-size: 20px;
color: #ffffff;
line-height: 35px; }
#media (max-width: 584px) {
header {
height: 200px; }
header #logo {
display: block; }
header nav {
width: 100%;
height: 80px;
margin: auto; }
header nav ul {
width: 100%;
display: block;
height: auto;
margin: auto; }
}
and this is my html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" href="css/normalize.css"/>
<link rel="stylesheet" href="css/style.css"/>
<title></title>
</head>
<body>
<Header>
<img id="logo" src="img/caseywoelfle.svg" alt="Logo"/>
<nav class="clearfix">
<ul class="clearfix">
<li>home</li>
<li>about me</li>
<li>portfolio</li>
<li>contact</li>
</ul>
Menu
</nav>
</Header>
<div id="homepage">
<div id="banner">
<img id="bannerLogo" src="img/caseywoelfle.svg" alt=""/>
<p id="wd">web development</p>
<a id="fomLink" style="display:block" href="about.html">
<div id="fom">
<p>find out more</p>
</div>
</a>
</div>
<footer>
</footer>
</body>
</html>
The main issue I am facing is my media query is not happen at the amount of pixels I specified. On some browsers it happens before, and on others it happens to late after.
You need to add media type like print or screen. Read more here, about media query here.
#media screen and (max-width: 584px)
You need to make sure that you are providing the mediatype as part of the query. This describes the selected output which could be screen or print for instance.
So in your code you need to add the following: #media screen and (max-width: 584px) {
I created a fiddle here:
http://jsfiddle.net/2rgxfmak/