I try to put 2 divs next to eachother but somehow it places them under eachother.
I have looked it up on this forum and copied the css code for it but it still wont work, i think it has something to do with my php code i use in it.
<html>
<body>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header>
<nav>
<p><img src="img/handboeklogo.png"></p>
<ul>
<li>Home</li>
<li>Checklist
<ul>
<li>Desktops</li>
<li>Laptops</li>
<li>Monitoren</li>
</ul>
</li>
<li>Handboek
<ul>
<li>Desktops</li>
<li>Laptops</li>
<li>Monitoren</li>
<li>Printers</li>
<li>Mobiele Telefoons</li>
</ul>
</li>
<li>Classificatielijst<ul>
<li>Desktops</li>
<li>Laptops</li>
<li>Monitoren</li>
<li>Printers</li>
<li>Mobiele Telefoons</li>
</ul>
</li>
<form class='logout' method='POST' action=''>
<button type='submit' name='logoutSubmit'>Logout</button>
</form>
</nav>
</header>
<br><br>
<div id='maindiv'><div id='first'>
<form method='POST' action=''>
<input type='hidden' name='uid' value='1'>
<input type='hidden' name='date' value='2019-07-02'>
<textarea name='message'></textarea><br>
<button type='submit' name='commentSubmit'> Comment </button>
</form></div>
<div id='second'>
<form method='POST' action=''>
<input type='hidden' name='uid' value='1'>
<input type='hidden' name='date' value='2019-07-02'>
<textarea name='message'></textarea><br>
<button type='submit' name='Generalcommentsubmit'> Comment </button>
</form></div></div>
</body>
</html>
CSS code:
body {
background-color: #edf0f2;
}
textarea {
display: inline-block;
width: 630px;
height: 120px;
background-color: #fff;
border-color: #5bb112;
margin-top: 10px;
margin-left: 15px;
position: relative;
resize: none;
}
.Changelog {
margin-left: 15px;
width: 800px;
}
.logout {
display: inline-block;
float: right;
position: absolute;
margin-top: 27px;
margin-right: 20px;
margin-left: 680px;
}
.login {
display: inline-block;
float: right;
position: absolute;
margin-top: 27px;
margin-right: 20px;
margin-left: 330px;
}
/*
button {
width: 100px;
height: 30px;
background-color: #5bb112;
border: none;
color: #e2e2e2;
font-family: arial;
font-weight: 400;
cursor: pointer;
margin-bottom: 19px;
margin-left: 15px;
margin-top: 3px;
}
.comment-box {
width: 630px;
padding-top: 5px;
margin-bottom: 4px;
background-color: #fff;
border-radius: 1px;
position: absolute;
border: 1px solid #5bb112;
margin-top: 8px;
align-content: left;
}
.comment-box p {
font-family: arial;
font-size: 14px;
line-height: 16px;
color: #282828;
font-weight: 100;
margin-bottom: 10px;
margin-left: 5px;
}
.edit-form {
position: absolute;
top: 3px;
right: 3px;
}
.edit-form button {
width: 40px;
height: 20px;
color: #282828;
background-color: #fff;
opacity: 0.7;
}
.edit-form button:hover {
opacity: 1;
}
.delete-form {
position: absolute;
top: 3px;
right: 58px;
}
.delete-form button {
width: 40px;
height: 20px;
color: #282828;
background-color: #fff;
opacity: 0.7;
}
.delete-form button:hover {
opacity: 1;
}*/
* {
margin: 0;
padding: 0;
}
header nav {
width: 100%;
height: 80px;
background-color: #343131;
}
header nav p {
font-family: arial;
color: #b3b3b3;
font-size: 24px;
line-height: 55px;
float: left;
padding: 10px 20px;
}
header nav ul {
float: left;
z-index: 2;
}
header nav ul li {
float: left;
list-style: none;
position: relative;
margin-top: 15px;
margin-right: auto;
margin-left: 30px;
}
header nav ul li a {
display: block;
font-family: arial;
color: #b3b3b3;
font-size: 20px;
padding: 21px 14px;
text-decoration: none;
}
header nav ul li ul {
display: none;
position: absolute;
background-color: #343131;
border-radius: 0px 0px 4px 4px;
padding: 8px;
}
header nav ul li:hover ul {
display: block;
}
header nav ul li ul li {
width: 180px;
border-radius: 4px;
}
header nav ul li ul li a {
padding: 9px 14px;
}
header nav ul li ul li a:hover {
background-color: #343131;
}
header nav p img {
width: 210px;
height: 55px;
margin-top: 5px;
margin-bottom: 5px;
}
header nav ul li a:hover {opacity: 1}
header nav ul li a {
background-color: #343131;
border: none;
color: white;
opacity: 0.6;
transition: 0.3s;
}
.down {
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}
i {
border: solid white;
border-width: 0 3px 3px 0;
display: inline-block;
padding: 3px;
margin-left: 10px;
margin-bottom: 3px;
}
/*-------Changelog---------*/
#maindiv {
display: flex;
width: auto;
border: 1px solid black;
overflow: hidden;
}
#first {
width: auto;
float:left;
}
#second {
float: left;
}
I would like to place the divs next to eachother so i get 2 comment sections next to eachother.
To place 2 divs near eachother wrap them in another div and set display to 'flex'
<div id="maindiv'>
<div id='first'>
//content here
</div>
<div id='second'>
//content here
</div>
</div>
in css
#maindiv {
display: flex;
width: 500px;
border: 1px solid black;
overflow: hidden;
}
#first {
width: 300px;
}
#second {
}
From your current code I could just guess that problem is with display, try this
#maindiv {
display: inline-block;
width: 500px;
border: 1px solid black;
overflow: hidden;
}
You can use display:inline-block as div element display is set to block by default
.parent {
background: red;
height: 50px;
width: 50px;
margin: 10px;
display: inline-block
}
<div class="parent">
</div>
<div class="parent">
</div>
<div class="parent">
</div>
<div class="parent">
</div>
<div class="parent">
</div>
<div class="parent">
</div>
<div class="parent">
</div>
<div class="parent">
</div>
#first, #second, #maindiv{
display: inline-block;
}
#maindiv {
width: 500px;
}
#first {
width: 300px;
}
<div id='maindiv'>
<div id='first'>first</div>
<div id='second'>second</div>
</div>
Related
body {
background-image: url("pirat.jpg");
}
h1{
font-size :100px;
}
h3{
font-size :50px;
}
<style type="text">
*{
box-sizing: border-box;
outline: none;
}
body{
margin: 0;
padding: 0;
}
.container{
width: 100%;
height: 100px;
margin: 0;
padding: 0;
}
img{
width: 100%;
height: 100vh;
}
.container nav{
position: absolute;
width: 100%;
top: 0;
height: 60px;
background-color: #383838;
color: white;
}
nav ul{
float: right;
list-style: none;
margin: 0;
padding: 0;
width: 600px;
}
nav li{
display: inline-block;
line-height: 56px;
margin:0 25px;
}
nav li a{
display: block;
color: white;
text-decoration: none;
font-size: 13px;
transition: .5s all;
}
a:hover{
color:#808080;
border-bottom: 5px solid white;
}
#myInput{
position: relative;
margin-top: 10px;
padding: 5px 10px 5px 20px;
width: 2300x;
height: 25px;
border-bottom: 2px solid#006699;
font-size: 15px;
color: #006699;
border-radius: 50px;
align-items: center;
float: right;
z-index: 0;
}
#btn{
display: none;
}
.check{
font-size: 30px;
color: white;
float: right;
line-height: 60px;
margin-right: 20px;
margin-left: 10px;
cursor: pointer;
transform: rotate(-90deg);
display: none;
}
#media(max-width: 800px){
nav ul{
position: fixed;
width: 40%;
height: 100vh;
top: 60px;
left: 100%;
text-align: center;
background-color: #2c3e50;
transition: all .5s;
}
nav ul li{
display: block;
}
nav ul li a{
font-size: 20px;
color: white;
}
.check{
display: block;
}
#btn:checked ~ ul{
left: 60%;
}
#media(max-width: 500px){
}
#myUL {
list-style-type: none;
padding: 0;
margin: 0;
}
#myUL li a {
border: 1px solid #ddd;
margin-top: -1px;
background-color: #f6f6f6;
padding: 12px;
text-decoration: none;
font-size: 18px; color: black;
display: block;
}
#myUL li a:hover:not(.header) {
background-color: #eee; /* Add a hover effect to all links, except for headers */
}
.text input:focus + .hide {
display: block !important;
}
.hide {
display: none;
}
.container { position: relative; }
<html>
<head><title>Home</title>
<font color="white">
<center>
<h1></h1>
</center>
<link rel="stylesheet" type="text/css" href="Principala.css">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
</head>
<body>
<font color="white">
<div class="relative">
<font color = "blue">
<h3></h3>
<div class="container">
<nav>
<input type="checkbox" name="" id="btn">
<label for="btn" class="check">!!!</label>
<div class="search"><input type="text" id="myInput" onkeyup="myFunction()" placeholder="search engine"></div>
<ul>
<li>HOME</li>
<li>SERVICE</li>
<li>CONTACT</li>
<li>FAQ</li>
<li>ABOUT US</li>
</ul>
</nav>
<div class=hide>
<ul id="myUL">
<li>Adele</li>
<li>Agnes</li>
<li>Billy</li>
<li>Bob</li>
<li>Calvin</li>
<li>Christina</li>
<li>Cindy</li></ul></div>
<script src="Principala.js"></script>
</script>
</body>
</html>
What is wrong? The suggestions don't want to show when I write in the search box
I'm attempting to create a navbar with two dropdown menus and after lots of fiddling with the dropdown menu I've got it sorta working. But it's made the rest of the items out of order.
https://jsfiddle.net/o5pcs1y7/
body {
font-family: Arial;
background-color: #FAFAFA;
}
.container {
width: 960px;
position: relative;
margin-left: auto;
margin-right: auto;
background-color: #FAFAFA;
padding: 10px 10px 10px;
}
.header h1 {
border-bottom: solid 2px #2c3840;
text-transform: uppercase;
color: #2c3840;
}
.header img {
float: right;
position: relative;
width: 90px;
margin-top: -60px;
}
.nav {
background-color: #2c3840;
position: relative;
width: 100%;
float: left;
height: 41px;
margin-top: -22px;
}
.nav a {
font-family: Arial;
float: left;
display: inline-block;
color: #FAFAFA;
text-align: center;
padding: 10px 14px;
text-decoration: none;
font-size: 18px;
}
.nav a:hover {
background-color: #6d4b4f;
}
.projects {
position: relative;
display: inline-block;
}
.projects-content {
display: none;
position: absolute;
background-color: #FAFAFA;
min-width: 160px;
padding: 10px 14px;
z-index: 1;
text-decoration: none;
}
.projects:hover .projects-content {
display: block;
}
.services {
position: relative;
display: inline-block;
}
.services-content {
display: none;
position: absolute;
background-color: #FAFAFA;
min-width: 160px;
padding: 12px 16px;
z-index: 1;
text-decoration: none;
}
.services:hover .services-content {
display: block;
}
<!doctype html>
<title>Werribee Roadworthy Centre</title>
<link rel="shortcut icon" type="image/png" href="favicon.png" />
<body>
<div class="container">
<div class="header">
<h1>Werribee Roadworthy Centre</h1>
<img src="car.png">
</div>
<div class="nav">
Home
<div class="services">
Services
<div class="services-content">
1
2
3
</div>
</div>
<div class="projects">
Projects
<div class="projects-content">
1
2
3
</div>
</div>
Photo Gallery
Contact Us
</div>
<div class="section">
</div>
<div class="aside">
</div>
</div>
</body>
This is the code. The ordering of the navbar is correct in the HTML just not in the finished product. Also don't mind the broken dropdown.
Since the parent .nav could have a child of div or either a, you didn't float the div to left like you float a and that what was making the mess:
you just have to add:
.nav > div {
float: left;
}
body {
font-family: Arial;
background-color: #FAFAFA;
}
.container {
width: 960px;
position: relative;
margin-left: auto;
margin-right: auto;
background-color: #FAFAFA;
padding: 10px 10px 10px;
}
.header h1 {
border-bottom: solid 2px #2c3840;
text-transform: uppercase;
color: #2c3840;
}
.header img {
float: right;
position: relative;
width: 90px;
margin-top: -60px;
}
.nav {
background-color: #2c3840;
position: relative;
width: 100%;
float: left;
height: 41px;
margin-top: -22px;
}
.nav a {
font-family: Arial;
float: left;
display: inline-block;
color: #FAFAFA;
text-align: center;
padding: 10px 14px;
text-decoration: none;
font-size: 18px;
}
.nav > div {
float: left;
}
.nav a:hover {
background-color: #6d4b4f;
}
.projects {
position: relative;
display: inline-block;
}
.projects-content {
display: none;
position: absolute;
background-color: #FAFAFA;
min-width: 160px;
padding: 10px 14px;
z-index: 1;
text-decoration: none;
}
.projects:hover .projects-content {
display: block;
}
.services {
position: relative;
display: inline-block;
}
.services-content {
display: none;
position: absolute;
background-color: #FAFAFA;
min-width: 160px;
padding: 12px 16px;
z-index: 1;
text-decoration: none;
}
.services:hover .services-content {
display: block;
}
<!doctype html>
<title>Werribee Roadworthy Centre</title>
<link rel="shortcut icon" type="image/png" href="favicon.png" />
<body>
<div class="container">
<div class="header">
<h1>Werribee Roadworthy Centre</h1>
<img src="car.png">
</div>
<div class="nav">
Home
<div class="services">
Services
<div class="services-content">
1
2
3
</div>
</div>
<div class="projects">
Projects
<div class="projects-content">
1
2
3
</div>
</div>
Photo Gallery
Contact Us
</div>
<div class="section">
</div>
<div class="aside">
</div>
</div>
</body>
Hope this helps :)
I'm not sure how to ask this questions but I will try my best to explain what I'm trying to accomplish.I have a banner on my homepage and inside this banner I have a div that is overlapping it.
Now, by overlapping this item over the banner It creates a problem where all other content on my homepage is going behind this overlapped item.. Example: my footer (which is marked in red) is going behind this overlapped item and I want to stop this from happening, I want all contents to go below it.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
color: #444;
font-size: 13px;
background-color: #fafafa;
font-family: Arial, sans-serif;
}
.container {
height: auto;
width: 1200px;
margin: 0 auto;
overflow: hidden;
}
secion {
width: 100%;
height: auto;
background-color: #fff;
}
header {
width: 100%;
height: 168px;
overflow: hidden;
box-shadow: 0 2px 5px 0 rgba(0,0,0,.16);
}
.top-nav {
width: 100%;
height: 42px;
background-color: white;
}
.top-nav ul {
float: left;
line-height: 42px;
list-style-type: none;
}
.top-nav ul li {
display: inline-block;
}
.top-nav ul li a, a:visited {
color: #444;
padding: 42px 12px;
text-decoration: none;
}
.top-nav ul li a:hover {
background-color: #fafafa;
}
.center-console {
width: 100%;
height: 80px;
background-color: #f4f4f4;
}
header nav {
width: 100%;
height: 46px;
background-color: #fff;
}
header nav ul {
float: left;
line-height: 46px;
list-style-type: none;
}
header nav ul li {
margin: 0;
display: inline-block;
}
header nav ul li a, a:visited {
color: #444;
padding: 46px 12px;
text-decoration: none;
color: rgba(0,0,0,.54);
}
header nav ul li a:hover {
color: #15c;
background-color: #fff;
box-shadow: 0 4px 8px 0 #dcdcdc;
}
.logo {
float: left;
width: 200px;
height: 50px;
margin-top: 15px;
background-color: #fff;
}
.center-console form {
float: right;
width: 400px;
height: 40px;
padding: 0 15px;
margin-top: 20px;
border-radius: 3px;
background-color: #fff;
}
.search-icon-small {
width: 18px;
height: 19px;
float: right;
margin-top: 11px;
background-repeat: no-repeat;
background-image: url("../images/search-icon-small.png");
}
header form input[type=text] {
border: 0;
width: 342px;
height: 40px;
outline: none;
background-color: #fff;
}
.shopping-cart {
width: 38px;
height: 32px;
float: right;
margin-top: 7px;
font-size: 25px;
background-repeat: no-repeat;
background-image: url("../images/shopping-cart.png");
background-position:bottom;
}
.item-count {
color: #fff;
width: 18px;
height: 18px;
float: right;
font-size: 10px;
line-height: 19px;
font-weight: bold;
border-radius: 50%;
text-align: center;
background-color: #4683ea;
}
/*** Homepage ***/
.banner {
width: 100%;
height: 480px;
background-color: #4387fd;
}
.banner form {
width: 880px;
height: 50px;
margin: 0 auto;
padding: 0 15px;
margin-top: 228px;
border-radius: 3px;
background-color: #fff;
}
.search-icon {
width: 30px;
height: 30px;
float: right;
margin-top: 10px;
background-repeat: no-repeat;
background-image: url("../images/search-icon.png");
}
.banner form input[type=text] {
border: 0;
width: 805px;
height: 50px;
outline: none;
background-color: #fff;
}
.featured-items {
width: 1200px;
height: 358px;
padding: 21px;
margin-top: 100px;
border-radius: 6px;
position: absolute;
overflow: hidden;
background-color: #fff;
}
.featured-items ul {
list-style-type: none;
}
.featured-items ul li {
float: left;
width: 214px;
height: 214px;
margin-right: 22px;
background-color: #f5f5f5;
}
.featured-items ul li:last-child {
margin: 0;
float: right;
}
footer {
width: 100%;
height: 400px;
margin-top: 80px;
overflow: hidden;
background-color: red;
}
<!DOCTYPE html>
<html>
<head>
<title>BasicOffer</title>
<link rel="stylesheet" type="text/css"href="css/main.css">
<link rel="stylesheet" href="css/font-awesome/css/font-awesome.min.css">
</head>
<body>
<header>
<nav class="top-nav">
<div class="container">
<ul>
<li>Selling</li>
<li>Help</li>
</ul>
<ul style="float:right;">
<li>Account</li>
</ul>
</div>
</nav>
<div class="center-console">
<div class="container">
<div class="logo"></div>
<form>
<input type="text" placeholder="Search..">
<div class="search-icon-small"></div>
</form>
</div>
</div>
<nav>
<div class="container">
<ul>
<li>Health & Beauty</li>
<li>Household Supplies</li>
<li>Baby & Toddler</li>
<li>Home & Garden</li>
<li>Electronics</li>
<li>Pet Supplies</li>
</ul>
<div class="shopping-cart">
<div class="item-count">11</div>
</div>
</div>
</nav>
</header>
<div class="banner">
<div class="container">
<form>
<input type="text" placeholder="What are you looking for?">
<div class="search-icon"></div>
</form>
<div class="featured-items">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
</div>
<footer>This will be the footer</footer>
</body>
</html>
Design:
Thanks,
Richard.
Instead of using absolute position. you can try
margin-top: -150px;
position: relative;
working example
It's unclear why absolute positioning is needed in this example, but I recommend you look into using position: relative for the content block that follows the banner.
Relative positioning behaves mostly like the default (static) when it comes to layout flow, but it supports the z-index layering like absolute positioning. (Considering using relative position also on the banner if you don't really need it to be absolutely positioned.)
When hovering over the links in drop2 div, the entire drop2 div moves upward a few pixels. Same problem with drop3.
Any ideas why the div is shifting up when I hover over it? Thank you, any advice much appreciated.
#nav {
background-color: #373737;
float: left;
height: 30px;
padding: 0px 0px 0px 0px;
width: 970px;
}
.nav a {
display: block;
}
.nav ul li a {
position: relative;
}
a {
text-decoration: none;
}
a.item {
color: white;
}
.item {
position: relative;
}
a.item:hover {
background-color: #dcd0c0;
height: 30px;
color: #373737;
font-weight: bold;
}
.menu {
list-style-type: none;
margin: auto;
width: 970px;
text-align: center;
}
.nav .items {
display: inline;
float: left;
margin: 0px 100px 0px 100px;
padding: 0;
text-align: center;
width: 82px;
}
.drop2 {
display: none;
text-align: left;
width: 150px;
padding-left: 10px;
padding-top: 5px;
padding-bottom: 5px;
}
.items:hover .drop2 {
display: block;
width: 150px;
padding-left: 10px;
padding-top: 5px;
padding-bottom: 5px;
background-color: #f4f4f4;
position: relative;
z-index: 99;
}
.drop3 {
display: none;
text-align: left;
padding-left: 10px;
padding-top: 5px;
padding-bottom: 5px;
width: 150px;
}
.items:hover .drop3 {
display: block;
width: 150px;
padding-left: 10px;
padding-top: 5px;
padding-bottom: 5px;
background-color: #f4f4f4;
position: relative;
z-index: 99;
}
.drop2 > a {
color: #373737;
}
.drop3 > a {
color: #373737;
}
.drop2 > a:hover {
font-weight: bold;
}
.drop3 > a:hover {
font-weight: bold;
}
<div id="nav">
<div class="nav">
<ul class="menu">
<li class="items">
Photos
</li>
<li class="items">
Locations
<div class="drop2">
Bays
Lakes
Pacific Ocean
</div>
</li>
<li class="items">
Catches
<div class="drop3">
Bass
Other
</div>
</li>
</ul>
</div>
</div>
Add line-height: 30px; to your #nav tag in css.
jsfiddle
I am recreating the Google homepage for an assignment on TheOdinProject. I am almost finished, but the problem I am having is that I can't seem to get the hyperlink to be visible within the footer container. I tried changing the text color, and I checked the properties within the list item selector and I should be able to see the hyperlink "About Google" but I can't. What am I doing wrong?
body {
font-family: Arial;
}
#logo {
display: block;
width: 350px;
margin : 0 auto;
margin-top: 100px;
position: relative;
text-align: center;
}
input {
margin-top: -50;
margin-bottom: 0;
margin-left: auto;
margin-right: auto;
position: relative;
line-height: 2;
display: block;
width: 500px;
}
#logo img {
max-width: 100%;
}
.search_button {
margin-left: 800px;
margin-top: 5px;
display: inline;
float: left;
}
.feeling_lucky_button {
margin-right: 800px;
margin-top: 5px;
float: right;
display: inline;
}
#navbar {
background-color: #2d2d2d;
width: 100%;
height: 30px;
position: fixed;
left: 0;
top: 0;
}
#navbar ul {
margin-top: 5px;
padding-left: 8px;
}
li {
font-size: 13px;
padding: 5px 8px 5px 8px;
display: inline;
list-style-type: none;
}
#navbar ul li a {
font-weight: bold;
color: #BBBBBB;
text-decoration: none;
}
#navbar ul li a:hover {
color: white;
text-decoration: none;
}
#footer {
width: 100%;
height: 30px;
position: fixed;
border-top: 1px solid rgba(0, 0, 0, 0.1);
bottom: 0;
left: 0;
}
#footer li {
margin-bottom: 5px;
padding-left: 8px;
}
#footer ul li a {
font-weight: bold;
color: red;
text-decoration: none;
}
#footer ul li a:hover {
color: red;
font-weight: bold;
text-decoration: none;
}
#footer ul li a:link {
color: red;
}
#footer ul li a:visited{
color: red;
}
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Google Homepage Project</title>
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
</head>
<body>
<div id="navbar">
<ul>
<li>Home</li>
</div>
<div id="logo">
<img src="http://fineprintnyc.com/images/blog/history-of-logos/google/google-logo.png">
</div>
<div id="searchbar">
<form action="#" method="POST">
<input type="text" name="searchbar">
</div>
<button class="search_button">Google Search</button>
<button class="feeling_lucky_button">I'm feeling lucky</button>
<div id="footer">
<ul>
<li><a href="http://www.google.com>About Google</a></li>
</ul>
</div>
</body>
</html>
Try this in footer. You missed double quote.
<li>About Google</li>
Fiddle:https://jsfiddle.net/ywu325mw/1/
In your footer:
<a href="http://www.google.com>About Google</a>
should be:
About Google
You forgot to close " the href attr