hi guys i am creating a website for one of my projects for college and i need some help as i have no idea of how i have done this haha. Basically i have two of the boxes are touching where i want a small gap in between them. Any help is appreciated.
Cheers in advance here is my code
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link href="style_sheet.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="wrapper">
<div id="top">
<div class="logo"> </div>
</div>
<div id="menu">
<div class="button"> Home </div>
<div class="button"> Destinations </div>
<div class="button"> Make A Booking </div>
<div class="button"> Things To Do </div>
<div class="button"> Contact Us </div>
</div>
<div id="box">
content here
</div>
<div id="deal_one">
</div>
</body>
</html>
CSS
#wrapper
{
width: 80%;
position:relative;
margin: 0 auto;
}
#top
{
width:100% ;
height:200px;
background-color:rgba(0, 95, 160, 1);
border:solid 2px black;
position:relative;
}
#menu {
width: 100%;
height: 150px;
background-color: #fff;
border: solid 2px black;
text-align:center;
position: relative;
display: inline-block;
}
#box {
width:100% ;
min-height:500px;
background-color:rgba(0, 95, 160, 1);
margin-top:0;
border:solid 2px black;
position:relative;
}
.button {
font-family:Verdana, Geneva, sans-serif;
font-size:15pt;
display:inline-block;
margin: 0 auto;
margin-left:5%;
margin-right:5%;
margin-top:4.5%;
}
.logo {
position:relative;
background-image:url(../Images/Logo%203.png);
background-size:650px;
width:500px;
height:900px;
top:-30%;
display:inline-block;
z-index:500;
margin: 0 auto;
background-repeat:no-repeat;
margin-left:-10%;
}
#deal_one {
width:350px;
height:300px;
background-color:rgba(0, 95, 160, 1);
border: solid 2px black;
position:relative;
}
Margin is the space outside of an element. You probably want to set that. You may also want to look into the box model:
Related
I'm trying to figure out why when I insert text into one of the divs in the horizontally scrolling div it causes the text's parent div to push downward.
Any ideas?
#import url('https://fonts.googleapis.com/css?family=Hind:300,400,500,600,700');
.google{ font-family:'Hind', sans-serif}
a {
color:white;
text-decoration:none;
font-family:'Hind';
}
#bold_avenir {
font-family:'Hind';
font-weight:bold;
}
#head_link{
text-transform:uppercase;
}
body{
background-image: url('http://via.placeholder.com/300');
background-size:cover;
}
.project_container{
border:purple 4px solid;
height: 800px;
width:100%;
overflow:auto;
white-space: nowrap;
}
.pjct-fat{
display:inline-block;
width:800px;
height:96%;
}
.pjct-skinny{
display:inline-block;
width:450px;
height:96%;
}
#project_1{
border:red 4px solid;
}
#project_1 p{
display:block;
border:red 4px solid;
}
#project_2{
border:yellow 4px solid;
}
#project_3{
border:green 4px solid;
}
#project_4{
border:blue 4px solid;
}
<html>
<head>
<meta charset="utf-8">
<title>Paul Taylor Creates</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
</header>
<nav><span id="bold_avenir">Paul Taylor</span> Creative Design
</nav>
<div class="project_container">
<div class="pjct-skinny" id="project_1">
<div>First Project</div>
</div>
<div class="pjct-fat" id="project_2">
</div>
<div class="pjct-fat" id="project_3">
</div>
<div class="pjct-skinny" id="project_4">
</div>
</div>
<footer>
<span id="bold_avenir" >Resume:</span> LinkedIn
<span id="bold_avenir">Contact:</span> paultaylorcreates#gmail.com
</footer>
</body>
</html>
.pjct-skinny{
display:inline-block;
width:450px;
height:96%;
position: relative;
}
.pjct-skinny div {
position: absolute;
}
Demo
#import url('https://fonts.googleapis.com/css?family=Hind:300,400,500,600,700');
.google{ font-family:'Hind', sans-serif}
a {
color:white;
text-decoration:none;
font-family:'Hind';
}
#bold_avenir {
font-family:'Hind';
font-weight:bold;
}
#head_link{
text-transform:uppercase;
}
body{
background-image: url('http://via.placeholder.com/300');
background-size:cover;
}
.project_container{
border:purple 4px solid;
height: 800px;
width:100%;
overflow:auto;
white-space: nowrap;
}
.pjct-fat{
display:inline-block;
width:800px;
height:96%;
}
.pjct-skinny{
display:inline-block;
width:450px;
height:96%;
position: relative;
}
.pjct-skinny div {
position: absolute;
}
#project_1{
border:red 4px solid;
}
#project_1 p{
display:block;
border:red 4px solid;
}
#project_2{
border:yellow 4px solid;
}
#project_3{
border:green 4px solid;
}
#project_4{
border:blue 4px solid;
}
<html>
<head>
<meta charset="utf-8">
<title>Paul Taylor Creates</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
</header>
<nav><span id="bold_avenir">Paul Taylor</span> Creative Design
</nav>
<div class="project_container">
<div class="pjct-skinny" id="project_1">
<div>First Project</div>
</div>
<div class="pjct-fat" id="project_2">
</div>
<div class="pjct-fat" id="project_3">
</div>
<div class="pjct-skinny" id="project_4">
</div>
</div>
<footer>
<span id="bold_avenir" >Resume:</span> LinkedIn
<span id="bold_avenir">Contact:</span> paultaylorcreates#gmail.com
</footer>
</body>
</html>
Does this satisfy your requirements?
#import url('https://fonts.googleapis.com/css?family=Hind:300,400,500,600,700');
.google{ font-family:'Hind', sans-serif}
//custom code by naren
body{
overflow:hidden;
}
footer{
height: 50px;
bottom: 0px;
position: absolute;
display: flex;
justify-content: center;
align-items: center;
}
.project_container {
border: purple 4px solid;
height: auto;
width: auto;
overflow: auto;
white-space: nowrap;
position: absolute;
overflow-x: hidden;
top: 50px;
bottom: 50px;
left: 0px;
right: 0px;
}
header{
position: absolute !important;
top: 0px;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
}
//custom code by naren
a {
color:white;
text-decoration:none;
font-family:'Hind';
}
#bold_avenir {
font-family:'Hind';
font-weight:bold;
}
#head_link{
text-transform:uppercase;
}
body{
background-image: url('http://via.placeholder.com/300');
background-size:cover;
}
.project_container{
border:purple 4px solid;
white-space: nowrap;
}
.pjct-fat{
display:inline-block;
width:800px;
height:96%;
}
.pjct-skinny{
display:inline-block;
width:450px;
height:96%;
}
#project_1{
border:red 4px solid;
}
#project_1 p{
display:block;
border:red 4px solid;
}
#project_2{
border:yellow 4px solid;
}
#project_3{
border:green 4px solid;
}
#project_4{
border:blue 4px solid;
}
<html>
<head>
<meta charset="utf-8">
<title>Paul Taylor Creates</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<nav><span id="bold_avenir">Paul Taylor</span> Creative Design
</nav>
</header>
<div class="project_container">
<div class="pjct-skinny" id="project_1">
<div>First Project</div>
</div>
<div class="pjct-fat" id="project_2">
</div>
<div class="pjct-fat" id="project_3">
</div>
<div class="pjct-skinny" id="project_4">
</div>
</div>
<footer class="footer">
<span id="bold_avenir" >Resume:</span> LinkedIn
<span id="bold_avenir">Contact:</span> paultaylorcreates#gmail.com
</footer>
</body>
</html>
Also find below the JSFiddle:
https://jsfiddle.net/Kai_Draord/kz4uap1t/
I am trying to get 3 things to set on the same line. One of them is a pic the other 2 are going to be text fields. this is what i have so far. I have an img in all three spots just to have a place holder.
<div class="top"><img src="Images/cmdg.jpg" ></img></div>
<div class="top1"><img src="Images/cmdg.jpg" ></img></div>
<div class="top2"><img src="Images/cmdg.jpg" ></img></div>
<style>
img{
width: 580px;
height:auto;
margin-left:580px;
margin-right: 574px;
margin-top: -18px;
border-color:white;
border-style:solid;
border-radius:50%;
border-width: 2px;
}
.top {
float:left;
margin: 33%;
width:180;
height:auto;
}
.top1 {
float:none;
margin: 33%;
width:180;
height:auto;
}
.top2 {
float:right;
margin: 33%;
width:180;
height:auto;
}
At this point it will stack them on top of each other, or just not look right.
Please help
You have to give margins according to the width of the window. When I remove/reduce the margins it works perfectly.
Try the code below and understand it.
<html>
<head>
<style type="text/css">
img{
width: 400px;
height:auto;
//reduce the margins below as the screen size is 1300 something hence decide accordingly.
/*margin-left:580px;
margin-right: 574px;*/
margin-top: -18px;
border-color:white;
border-style:solid;
border-radius:50%;
}
.top {
float:left;
height:auto;
}
.top1 {
float:left;
height:auto;
}
.top2 {
float:left;
height:auto;
}
</style>
</head>
<body>
<div class="top"><img src="Images/cmdg.jpg" ></div>
<div class="top1"><img src="Images/cmdg.jpg" ></div>
<div class="top2"><img src="Images/cmdg.jpg" ></div>
</body>
</html>
<style type="text/css">
img{
width: 380px;
height:auto;
border-width:6px;
border-style:solid;
border-color:white;
border-radius:50%;
}
.content{
display:table;
margin:auto;
}
.div{
float:left;
width:auto;
height:auto;
padding:5px;
}
</style>
<div class="content">
<div class="div top"><img src="Images/cmdg.jpg" ></div>
<div class="div top1"><img src="Images/cmdg.jpg" ></div>
<div class="div top2"><img src="Images/cmdg.jpg" ></div>
</div>
I've made a page of 'contact us' where the user should fill a form, and of course submit/send it.
Now, thing is that the moment I add <form>...</form> tags the layout breaks. It seems it happens only in chrome(not 100% sure yet).
However, surprisingly, if I instead of refreshing the page, use the menu(click contact us) the layout/design is just fine.
Seems the problem is caused by <form> tag. Without it the layout/design is fine
how it should be
how it is with <form> tags
Please take a look if there is problem in my .css or .html.
CSS.css:
body{
background-color: #80B2E6;
font-family: "Times New Roman", Georgia, Serif;
font-size: medium;
padding: 0px;
}
nav{
height:3.5em;
}
#Content{
padding:10px;
width: 580px;
margin-left: auto;
margin-right: auto;
background-color:#B89470;
}
#Content h2{
text-align:center;
display: block;
}
#Menu{
background-color:#AD855C;
display: block;
}
#Header{
background-color:#AD855C;
width: 600px;
margin: 0 auto;
}
#Logo{
background-image:url('Library/Misc/LogoBG.jpg');
background-size: 100% 100%;
height:100px
}
#Logo h2{
text-align:center;
vertical-align:middle;
}
.Line{
margin:0;
padding:0;
height: 3.5em;
border-right: 2px solid #000000;
float:left;
display: inline-block;
}
a.MMLink{
text-decoration: none;
background-color:#AD855C;
height: 1.5em;
padding: 1em;
display:inline-block;
float: left;
}
a.MMLink:hover{
background-color: #CEB69D;
color:black;
}
a.MMLink:link{
color:black;
}
a.MMLink:visited{
color:black;
}
a.MMLink:active{
background-color: #CEB69D;
color:black;
}
#MenuLeft{
float: left;
display: inline-block;
}
#MenuRight{
float: right;
display: inline-block;
}
.NewsFeed{
text-decoration:underline;
font-weight:bold;
}
.Form {
width: 400px;
border: 2px solid black;
margin-left: auto;
margin-right: auto;
margin:0;
padding:0;
}
HTML Contactus.html:
<!DOCTYPE html>
<html>
<head>
<title>
A page
</title>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="CSS.css" />
</head>
<body>
<div id="Header">
<div id="Logo">
<h2> My Header </h2>
</div>
<nav>
<div id="MenuLeft">
<a class="MMLink" href="Index.php">Home</a>
<div class="Line"></div>
<a class="MMLink" href="About.html">About</a>
<div class="Line"></div>
<a class="MMLink" href="Contactus.php">Contact Us</a>
<div class="Line"></div>
</div>
<div id="MenuRight">
<div class="Line"></div>
<a class="MMLink" href="Login.php">Login</a>
<div class="Line"></div>
<a class="MMLink" href="Signup.php">Sign-Up</a>
</div>
</nav>
</div>
<div id="Content">
<h2>Contact us!</h2>
<hr/>
<p>
That ironical, but if you've encountered a problem, a bug, or just want to contact us,
<br/>
please feel free to fill the next form.
</p>
<form>
input fields go here
<br/>
</form>
<p>some text2</p>
</div>
</body>
</html>
It could be a problem with your floats. Try adding clear:both to #content:
#Content{
padding:10px;
width: 580px;
margin-left: auto;
margin-right: auto;
background-color:#B89470;
clear:both:
}
On a side note I wouldn't use a seperate div for your vertial divders. Try using border-left and/or border-right on .MMlink instead. Also use border-bottom on your <h2>Contact Us</h2> and get rid of the <hr />
Here's how I'd tidy up your HTML with associated CSS changes: http://jsfiddle.net/kzww8fvb/
How to place an image between a fixed header/footer and prevent overlap?
How to centre an image on the page when the window is bigger than its max-width/height?
The current working example: http://john-marshall.net
CSS
#content {
position:relative;
}
#headerwrap {
position:fixed;
width: 100%;
height:60;
background-color:#fff;
z-index:99;
}
#header {
border-top: 1px solid #000;
margin:20 20 0 20;
}
#title {
font-size:15px;
font-family: "Fugue-Regular";
font-weight:100;
padding-top:5px;
}
#footerwrap {
position:fixed;
width: 100%;
height:60;
bottom:0;
background-color:#fff;
z-index:99;
}
#footer {
border-bottom: 1px solid #000;
height:40;
margin:0 20 20 20;
}
/*gallery*/
#gallerywrap{
position:fixed;
margin:60 20 60 20;
text-align: center;
}
#gallery{
width:100%;
height:auto;
}
.img {
max-width: 100%;
max-height: 100%;
}
HTML
<body>
<div id="content">
<div id="headerwrap">
<div id="header">
<div id="title">John Marshall</div>
<div id="menuli">
<ul>
<li>Project 1</li>
</ul>
</div>
</div>
</div>
<div id="gallerywrap">
<div id="gallery">
<img src="http://john-marshall.net/images/selected/cafe.jpg" class="img" alt="Cafe" />
</div>
</div>
<div id="footerwrap">
<div id="footer">
</div>
</div>
CSS :
#gallery{
width:100%;
height:auto;
margin:0px auto;
}
try this and check your margin in #gallerywrap.
Make the following changes to your css :
#gallerywrap {
position: fixed;
margin: 60px 0px 60px 0px;
text-align: center;
width: 100%;
}
Is this the effect you are looking for ?
I am trying to build a website that has three floating columns in the middle of the page. I have a container wrapping around everthing but it will not extend fully. Is there something I am doing wrong?
Thanks
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="style/style.css">
</head>
<body>
<div id="container">
<div id="header">
<div id="navbar"></div>
</div>
<div id="topper">This is the Topper</div>
<div id="colone">This is column one</div>
<div id="coltwo">This is column two</div>
<div id="colthree">This is colum three</div>
<div id="footer">This is the footer</div>
</div>
</body>
</html>
#charset "utf-8";
/* CSS Document */
#container
{
background-color:#CCC;
min-height:100%;
}
#header
{
background-color: #000;
width:100%;
float:left;
}
#navbar
{
background-color: #FFF;
border-radius: 10px;
height:75px;
width:70%;
margin: 0 auto;
margin-top:10px;
margin-bottom:10px;
border-radius:10px;
}
#topper
{
background-color:#000;
height: 175px;
}
#colone
{
background-color:#FFF;
float:left;
margin-left:15px;
margin-top:-20px;
height:150px;
}
#coltwo
{
background-color:#FFF;
float:left;
margin-left:15px;
margin-top:-20px;
height:150px;
}
#colthree
{
background-color:#FFF;
float:left;
margin-left: 15px;
margin-top:-20px;
height:150px;
}
#footer
{
}
You need to clear your float. This is what it looks like.
http://jsfiddle.net/ZT59d/
<div id="container">
<div id="header">
<div id="navbar"></div>
</div>
<div id="topper">This is the Topper</div>
<div id="colone">This is column one</div>
<div id="coltwo">This is column two</div>
<div id="colthree">This is colum three</div>
<div class="clear"></div>
<div id="footer">This is the footer</div>
</div>
#container {
background-color:#CCC;
min-height:100%;
}
#header {
background-color: #000;
width:100%;
float:left;
}
#navbar {
background-color: #FFF;
border-radius: 10px;
height:75px;
width:70%;
margin: 0 auto;
margin-top:10px;
margin-bottom:10px;
border-radius:10px;
}
#topper {
background-color:#000;
height: 175px;
}
#colone {
background-color:#FFF;
float:left;
margin-left:15px;
margin-top:-20px;
height:150px;
}
#coltwo {
background-color:#FFF;
float:left;
margin-left:15px;
margin-top:-20px;
height:150px;
}
#colthree {
background-color:#FFF;
float:left;
margin-left: 15px;
margin-top:-20px;
height:150px;
}
.clear
{
clear:both;
}
#footer {
}
If you don't mind, I'm going to give you some suggestions on how to improve your code.
First, you're using HTML5 but you're not using some of the new elements. Let's replace them.
<header>
<nav></nav>
</header>
<main>
<div id="topper">This is the Topper</div>
<div id="colone">This is column one</div>
<div id="coltwo">This is column two</div>
<div id="colthree">This is colum three</div>
<div class="clear"></div>
</main>
<footer>This is the footer</footer>
You're also using ids for everything. Trust me, you don't want to do that. Realistically, you should be using ids sparingly. I'm at the point now that the only time I use an id is if I need to target something with javascript.
<header>
<nav></nav>
</header>
<main>
<div id="topper">This is the Topper</div>
<div class="column">This is column one</div>
<div class="column">This is column two</div>
<div class="column">This is colum three</div>
<div class="clear"></div>
</main>
<footer>This is the footer</footer>
Here's what you're new css would look like.
body {
background-color:#CCC;
min-height:100%;
}
header {
background-color: #000;
width:100%;
float:left;
}
nav {
background-color: #FFF;
border-radius: 10px;
height:75px;
width:70%;
margin: 0 auto;
margin-top:10px;
margin-bottom:10px;
border-radius:10px;
}
#topper {
background-color:#000;
height: 175px;
}
.column {
background-color:#FFF;
float:left;
margin-left:15px;
margin-top:-20px;
height:150px;
}
.clear {
clear:both;
}
I left #topper in because it's unusual. It's hard for me to tell exactly what you're trying to achieve with it.
Here's the fiddle with everything together.
Easy way to fix this is to add such CSS rules:
#footer
{
clear: both;
}
#container {
overflow: hidden;
}
DEMO
Obviously, you have some problems understanding how float property works. You should investigate it more careful. Especially I would recommend to check out clearfix hack.