I have three boxes/containers on a single row of my webpage.
The first box, the blue box is 2px away from the browser edge on the left, while the last box, the purple box is 2px when I inspect element.
image of boxes
However it does not look like this on the web page and looks uneven:
http://jamesbsite-com.stackstaging.com/
I have read all about the box-model but I am still unable to get equal spacing even though I have set a 2px margin on both the left and right.
Please advise as to what is causing this?
The .call-outs-container is the parent container and the .call-out is the child
and they are being applied to these divs:
#
amendment
complete code below
#
<!doctype html>
<html>
<head>
<title>James' page!</title>
<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style type="text/css">
hr {height:1px; border:none; color:#000; background-color:#000;}
a {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a:visited{
color:green;
}
body { margin: 0;}
.ClearFloat {
clear: both;
}
.call-outs-container
{
max-width: 2000px;
margin: 1px 1px 1px 1px
}
.call-out {
padding: 5px;
margin-left: 2px; margin-top: 40px; margin-right: 2px; margin-bottom: -5px;;
width:30%;
float:left;
}
.call-out:nth-child(1) {background-color: #c0dbe2;}
.call-out:nth-child(2) {background-color: #cdf1c3;}
.call-out:nth-child(3) {background-color: #ccb9da;}
.call-out:nth-child(5) {background-color: #c0dbe2;}
.box{
border:10px solid #CC3F85;
width:400px;
margin: 0 auto;
padding: 20px;
}
</style>
</head>
<body>
<iframe width="100%" height="315" src="https://www.youtube.com/embed/NkyEOrQiGMQ" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen target = "test1"></iframe>
<div class="call-outs-container">
<div class="call-out">
<h4>Feature1</h4>
<p> hello</p>
</div>
<div class="call-out">
<h4>Feature2</h4>
<p>Nanking</p>
<p>new tab</p>
</div>
<div class="call-out">
<h4>Feature3</h4>
I am interested in history.
</div>
<div class = "ClearFloat"></div>
<div class="call-out">
<h1>James's page!</h1>
</div>
</div>
<div class = "ClearFloat"></div>
<h2>A few facts about me</h2>
<img src="me.jpeg" width="400">
<p>I like web desigm.</p>
</body>
</html>
div{
text-align:center;}
<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color: lightgrey;
width: 300px;
padding: 50px;
margin: 20px;
float: right;
}
</style>
</head>
<body>
<div>Welcome Page</div>
<div>Welcome Page2</div>
</body>
</html>
I would recommend using flexbox in this situation. It will make controlling things much easier. No need for float.
First, you need to add display: flex to .call-outs-container.
Next, specify that the items will fill the axis evenly by adding flex: 1 1 0 to .call-out
.call-outs-container {
display: flex;
}
.call-out {
padding: 5px;
margin-right: 2px;
flex: 1 1 0;
/* margin-left: 2px;
margin-top: 40px;
margin-bottom: -5px;
width: 30%;
float: left; */
}
.call-out:nth-child(1) {
background-color: #c0dbe2;
}
.call-out:nth-child(2) {
background-color: #cdf1c3;
}
.call-out:nth-child(3) {
background-color: #ccb9da;
}
<div class="call-outs-container">
<div class="call-out">
<h4>Feature1</h4>
<p> hello</p>
</div>
<div class="call-out">
<h4>Nanking</h4>
new tab
</div>
<div class="call-out">
<h4>Feature3</h4>
I am interested in history.
</div>
</div>
Related
This question already has answers here:
How to remove the space between inline/inline-block elements?
(41 answers)
Closed 1 year ago.
Why there is a space between two <hr> tags?
When I make the width of <hr> tags, it didn't work. I made it 49%, but there is still a space between the two <hr> tag. How do I remove the space from the <hr> tags?
Here is the HTML and CSS code:
*{margin: 0;padding: 0;}
body
{background-color:#181818;color: white;}
a
{text-decoration:none;}
h1
{text-align: center;color: #3ea6ff;}
.home
{font-size: 3em;background-color: #202020;}
#night
{color: #f34601;}
#mare
{color: #3ea6ff;}
#left
{
display: inline-block;width: 49%;
background-color: #f34601;height: 2px;border: 0;
}
#right
{
display: inline-block;width: 49%;
background-color: #3ea6ff ;height: 2px;border: 0;right: 0px;
}
<!DOCTYPE html>
<html>
<head>
<title>Nightmare</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="nightmare.css">
</head>
<body>
<div class="home logo">
<h1 id="mare">
<span id="night">Night</span>mare</h1>
</div>
<hr id="left">
<hr id="right">
</body>
</html>
You can use single hr with gradient background instead.
* {
margin: 0;
padding: 0;
}
body {
background-color: #181818;
color: white;
}
a {
text-decoration: none;
}
h1 {
text-align: center;
color: #3ea6ff;
}
.home {
font-size: 3em;
background-color: #202020;
}
#night {
color: #f34601;
}
#mare {
color: #3ea6ff;
}
hr {
display: inline-block;
background: linear-gradient(to right, #f34601 50%, #3ea6ff 50%);
height: 2px;
width: 100%;
border: 0;
}
<div class="home logo">
<h1 id="mare">
<span id="night">Night</span>mare</h1>
</div>
<hr>
check the code. This is really a better answer (imo) occam's razor
*{margin: 0;padding: 0;}
body
{background-color:#181818;color: white;}
a
{text-decoration:none;}
h1
{text-align: center;color: #3ea6ff;}
.home
{font-size: 3em;background-color: #202020;}
#night
{color: #f34601;}
#mare
{color: #3ea6ff;}
#left
{
display: inline-block;width: 49%;
background-color: #f34601;height: 2px;border: 0;
}
#right
{
display: inline-block;width: 49%;
background-color: #3ea6ff ;height: 2px;border: 0;right: 0px;
}
<!DOCTYPE html>
<html>
<head>
<title>Nightmare</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="nightmare.css">
</head>
<body>
<div class="home logo">
<h1 id="mare">
<span id="night">Night</span>mare</h1>
</div>
<hr id="left"><hr id="right">
<h1> OR YOU CAN DO THIS</h1>
<hr id="left"><!--
--><hr id="right">
</body>
</html>
Float :
Using float:left; on both of the hr's seem to work.
Flex :
I don't recommend doing this though. What I'd do is wrap the 2 hr's into a div and add display: flex; on it. And in the children I'd add flex-grow:1;
If i'm not mistaking it should grow the 2 hr's to take all the space in the div evenly. It will also work better with the rest of the page rather than using float which can sometimes mess everything up (from my own experience).
<hr id="left">
<br>
<hr id="right">
You can put a br between the hr
a br means a break.
Check this link to see more
https://www.w3schools.com/tags/tag_br.asp
The div with style contentdetailleft is absolute and so will be positioned to the div with the style container (since container is absolute). You can see that I have set left to 0px and top to 0px just to illustrate this. If you run it you will see the div with contentdetailleft overlap the div with style contentTop as you would expect. This is the HTML:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0"/>
<title>Charts</title>
<link rel="stylesheet" href="css/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<style>
html, body {
width: 100%;
height: 100%;
margin: 0px auto;
padding:0;
background-color: blue;
}
h3 {
margin: .5em;
color: black;
}
.container {
width:98%;margin:1%;height:96%;overflow:auto;position:absolute;
}
.containerTop {
width:100%;height:auto;
}
.containerBottom {
width:100%;margin-top:40px;height:auto;
}
.contentheaderleft {
width:20%;float:left;height:40px;left:0px;top:0px;position:absolute;border:1px solid #ddd;color:#666;background-color:yellow;
}
.contentheaderright {
width:77%;float:left;overflow:auto;overflow:hidden;margin-left:1%;position:absolute;left:21%;height:40px;border:1px solid #ddd;color:#666; background-color: red;
}
.contentdetailleft {
width:20%;height:89%;position:absolute;left:0px;top:0px;border: 1px solid #ddd; background-color: #fbf9ee;
}
.contentdetailright {
width:77%;float:left;overflow:auto;overflow:hidden;margin-left:1%;position: absolute;left:21%;height: 89%;border: 1px solid #ddd; background-color: #fbf9ee;
}
</style>
</head>
<body>
<label id="spn" style="display:none"></label>
<label id="spnstring" style="display:none"></label>
<div class="container">
<div class="containerTop">
<div class="contentheaderleft">
<h3 align="center">Widget</h3>
</div>
<div class="contentheaderright">
<h3 align="center">Drop Your Widget Here</h3>
</div>
</div>
<div class="containerBottom">
<div id="leftdiv" class="contentdetailleft">
</div>
<div class="contentdetailright" id="rightsec">
</div>
</div>
</div>
</body>
</html>
Now remove the left:0px and top:0px on the contentdetailleft style (see the HTML below). Now the div with style contentdetailleft is within the div with style contentBottom. How can this be?
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0"/>
<title>Charts</title>
<link rel="stylesheet" href="css/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<style>
html, body {
width: 100%;
height: 100%;
margin: 0px auto;
padding:0;
background-color: blue;
}
h3 {
margin: .5em;
color: black;
}
.container {
width:98%;margin:1%;height:96%;overflow:auto;position:absolute;
}
.containerTop {
width:100%;height:auto;
}
.containerBottom {
width:100%;margin-top:40px;height:auto;
}
.contentheaderleft {
width:20%;float:left;height:40px;left:0px;top:0px;position:absolute;border:1px solid #ddd;color:#666;background-color:yellow;
}
.contentheaderright {
width:77%;float:left;overflow:auto;overflow:hidden;margin-left:1%;position:absolute;left:21%;height:40px;border:1px solid #ddd;color:#666; background-color: red;
}
.contentdetailleft {
width:20%;height:89%;position:absolute;border: 1px solid #ddd; background-color: #fbf9ee;
}
.contentdetailright {
width:77%;float:left;overflow:auto;overflow:hidden;margin-left:1%;position: absolute;left:21%;height: 89%;border: 1px solid #ddd; background-color: #fbf9ee;
}
</style>
</head>
<body>
<label id="spn" style="display:none"></label>
<label id="spnstring" style="display:none"></label>
<div class="container">
<div class="containerTop">
<div class="contentheaderleft">
<h3 align="center">Widget</h3>
</div>
<div class="contentheaderright">
<h3 align="center">Drop Your Widget Here</h3>
</div>
</div>
<div class="containerBottom">
<div id="leftdiv" class="contentdetailleft">
</div>
<div class="contentdetailright" id="rightsec">
</div>
</div>
</div>
</body>
</html>
Thanks
Ian
The reason you are seeing this change in behavior is because the default positioning that occurs when you use "position: absolute;" is "left: 0;". However, "top: 0;" is not default behavior, so when you add that (as you correctly said), ".contentdetailleft" is positioned to the ".container" element.
Because ".contentdetailleft" comes after ".contentheaderleft" in the DOM (*and more importantly, because ".containerBottom" and ".containerTop" are still default position - static), once ".containerdetailleft" becomes positioned absolutely it is pulled out of the normal flow of the DOM and positioned based on it's relative/absolute parent (".container"). At this point it is sitting at the top-left corner of container, on top of ".containerTop", and thus on top of ".contentheaderleft".
You don't need the style "left: 0;" on ".contentdetailleft" once it has been positioned absolutely. If you would like to keep it absolute and have the "top" styling, but not have it overlap/cover ".contentheaderleft", simply position it from the top at the exact height of ."contentheaderleft" (42px), i.e. "top: 42px;".
*see below, all I updated was the top position of ".contentdetailleft"
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0"/>
<title>Charts</title>
<link rel="stylesheet" href="css/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<style>
html, body {
width: 100%;
height: 100%;
margin: 0px auto;
padding:0;
background-color: blue;
}
h3 {
margin: .5em;
color: black;
}
.container {
width:98%;margin:1%;height:96%;overflow:auto;position:absolute;
}
.containerTop {
width:100%;height:auto;
}
.containerBottom {
width:100%;margin-top:40px;height:auto;
}
.contentheaderleft {
width:20%;float:left;height:40px;left:0px;top:0px;position:absolute;border:1px solid #ddd;color:#666;background-color:yellow;
}
.contentheaderright {
width:77%;float:left;overflow:auto;overflow:hidden;margin-left:1%;position:absolute;left:21%;height:40px;border:1px solid #ddd;color:#666; background-color: red;
}
.contentdetailleft {
width:20%;height:89%;position:absolute;left:0px;top:42px;border: 1px solid #ddd; background-color: #fbf9ee;
}
.contentdetailright {
width:77%;float:left;overflow:auto;overflow:hidden;margin-left:1%;position: absolute;left:21%;height: 89%;border: 1px solid #ddd; background-color: #fbf9ee;
}
</style>
</head>
<body>
<label id="spn" style="display:none"></label>
<label id="spnstring" style="display:none"></label>
<div class="container">
<div class="containerTop">
<div class="contentheaderleft">
<h3 align="center">Widget</h3>
</div>
<div class="contentheaderright">
<h3 align="center">Drop Your Widget Here</h3>
</div>
</div>
<div class="containerBottom">
<div id="leftdiv" class="contentdetailleft">
</div>
<div class="contentdetailright" id="rightsec">
</div>
</div>
</div>
</body>
</html>
I am currently working on a practice example website as part of my Computer Science GCSE course. I am having real trouble with the navigation CSS. The website is very much in progress, so I know it's not great, but here is my code:
<!DOCTYPE html>
<html>
<head>
<title>The Cotswold Jeweller</title>
<link rel="stylesheet" href="../Assets/css/normalize.css" media="screen" type="text/css">
<link rel="stylesheet" href="../Assets/css/main.css" media="screen" type="text/css">
<link rel="stylesheet" href="../Assets/css/grid.css" media="screen" type="text/css">
</head>
<body>
<div class="head">
<h1>The Cotswold Jeweller</h1>
</div>
<div class="nav_contain">
<ul class="nav">
<li><h2>Home</h2></li>
<li><h2>Services</h2></li>
<li><h2>Location</h2></li>
</ul>
</div>
<div class="wrapper">
<p>Welcome to the home of The Cotswold Jeweller on the web. Here at The Cotswold Jeweller we offer a unique and reliable service to create a friendly and local experience for our customers. We are very proud to also stock products from many different popular and large groups, such as Citizen, Butler and Peach and many more while we still maintain our local, reliable ethos.</p>
<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.co.uk/maps?f=q&source=s_q&hl=en&geocode=&q=The+Cotswold+Jeweller,+Granville+Court,+Shipston-on-Stour&aq=0&oq=The+Cotswold+Jewe&sll=52.8382,-2.327815&sspn=8.08612,21.643066&ie=UTF8&hq=&hnear=&ll=52.062826,-1.623898&spn=0.006295,0.006295&t=m&iwloc=A&output=embed"></iframe>
</div>
<div class="footer">
<p>Copyright 2014 © The Cotswold Jeweller</p>
</div>
</body>
</html>
And here is the CSS:
body {
background-color: #FFFFFF;
}
.wrapper {
width: 1100px;
margin: auto;
}
.head {
text-align: center;
font-family: "Times New Roman";
font-size: 32px;
}
.nav li h2 a {
text-decoration: none;
color: #000000;
font-family: "Times New Roman";
width: 366px;
float: left;
}
.nav {
list-style: none;
width: 1100px;
margin: auto;
text-align: center;
}
.nav_contain {
border-top: 5px #990000 solid;
border-bottom: 5px #990000 solid;
}
I would like to have the navigation bar between, the two borders of the navigation container, but they are not aligned properly. Please can you provide a solution below. Thank You.
You can add overflow: auto to the .nav container. This will prevent its height from collapsing because it only contains floated elements.
.nav {
list-style: none;
width: 1100px;
margin: auto;
text-align: center;
overflow: auto;
}
Alternatively, adding this to .nav_contain has a similar effect.
Add this
.nav li{
display:inline-block;
}
and remove the h2 tags.
You may also have to reduce the size of the "a" tags to get them to stay in a line on screen. I'm on a 1280px monitor at the moment and I had to reduce their width to 300px.
Another alternative is to just remove the li tags completely. The links should still display side by side, and because your borders are outside of ".nav" then they should contain it.
If it doesn't work, just let me know.
generally try to avoid fixed values like
width: 1100px; //(1)
you can replace it for example by
width: 90%; //(2)
the (1) is destroying your site on other resolution than yours. Use (2) to avoid it.
try this code:
http://paste.debian.net/69881/
On a page that I'm designing I have a form with one input of type text. Normally, this form and input render properly in my browser, Chrome, but occasionally, it renders about 20 pixels to the left of where it is supposed to be. When I refresh the page, it goes back to the original, correct place.
I have only tested in Chrome so far, so this isn't a cross-browser issue (it happens in the same browser). Is there anything wrong with my code below?
Here's my HTML code:
<!DOCTYPE htmls>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" href="style.css" type="text/css" />
<title>Test Site</title>
</head>
<body >
<div id="supercontainer" class="style1">
<img class="floater" src="top.jpg" alt="Top" />
<img class="floater" src="left.jpg" alt="Left" />
<div id="content">
<p id="theText">
Welcome. Please type a username.
</p>
<form id="prompt">
<div><input type="text" name="promptLine" autocomplete="off" id="promptLine" onkeypress="return submitenter(event);" value="% " /></div>
</form>
</div>
<img class="floater" src="right.jpg" alt="Right" />
<img class="floater" src="bottom.jpg" alt="Bottom" />
</div>
Here's my CSS code:
#supercontainer {
margin: 0 auto;
width: 900px;
display: block;
}
img.floater {
display: inline;
float: left;
}
#content {
background-color:black;
display: inline;
float: left;
padding-left:5px;
padding-right:5px;
min-height:458px;
max-height:458px;
min-width: 803px;
max-width: 803px;
color: lime;
}
#theText {
text-align:left;
margin-bottom:0;
margin-top:0;
line-height: 0.3;
font-family:"Courier New", Courier, monospace;
}
#prompt {
position: fixed;
top: 470px;
}
#promptLine {
width: 100%;
background-color: black;
color: lime;
border: none;
outline:none;
}
Try closing your BODY and HTML tags? Also, doctype "htmls"?
I'm very new to html and css so feel free to critique any bad practices you see in the code below...
I am trying to create a centered column that's 800 pixels across and the banner will be resized to 800 pixels. When view this page in chrome or firefox it looks great. When I view it in IE8 the font is huge, there is a giant empty spot on the right side of the banner all the way down to the bottom, and the size of the "container" will not change no matter what I do in the css file.
CSS:
body {
font-family: Arial;
font-size: small;
background-color: #FFFFFF;
background-image: url(../images/victorianBackground.jpg);
background-position: top;
background-repeat: repeat;
color: #000000;
}
#container {
margin: -10 auto;
background-color: #D3CDBA;
text-align: left;
}
html>body #container {
width: 800px;
min-height:800px;
padding: 0 0px;
}
#banner {
width:800px;
}
#banner img {
width:800px;
padding:45 0px;
}
#content {
width:500px;
padding: 15px;
background-color: transparent;
}
/* Navigation */
#navigation ul {
list-style-type: none;
width: 800px;
margin: 0;
padding: 0;
}
#navigation li {
float: left;
background-color: #D3CDBA;
}
#navigation li:hover {
float: left;
color: #4676A4;
background-color: #D3CDBA;
}
#navigation a {
font-weight: bold;
text-decoration: none;
color: #000000;
display: block;
padding: 5px;
}
#navigation a:hover {
font-weight: bold;
text-decoration: none;
color: #992332;
}
#content a {
color:teal;
}
HTML:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Park Avenue Neighborhood Association</title>
<meta name="keywords" content="Park Avenue Neighborhood Association Syracuse New York"/>
<link rel="stylesheet" type="text/css" href="../styles/style1.css">
</head>
<body>
<div id="container">
<div id="banner">
<img src="../images/banner.jpg" id="banner">
<br/>
</div>
<div id="navigation">
<ul>
<li>Home</li>
<li>History</li>
<li>Houses</li>
<li>Local Business</li>
<li>Events</li>
<li>Contacts</li>
</ul>
</div>
<div id="content">
<h2>Content Header 1 </h2>
<p>Awesome Content </p>
<h2>Content Header 2 </h2>
<p>Awesome Content </p>
</div>
</body>
</div>
</html>
There are multiple issues I see with your source. Non-exhaustive list:
1) You need a doctype. Otherwise, browsers will render items in a non-standard way.
Example:
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
2) You have a <div> ending after the </body> tag. This is invalid.
Fix:
<p>Awesome Content </p>
</div>
</div>
</body>
</html>
3) You don't need the extra <br> in <div id="banner">.
Fix:
<div id="banner">
<img src="../images/banner.jpg" id="banner">
</div>
4) Now, if you want <div id="container"> to be centered and have a width of 800px, try the following.
Centering code that goes in your css (replaces existing):
body { text-align: center; }
#container {
text-align: left;
width: 800px;
margin: auto;
}
5) For your font-size declaration, you're using small. This will behave unpredictably. Instead, consider using either em or px for font size.
Font size with em:
body { font-size: 100%; line-height: 1.125em; }
#container { font-size: 0.875em; }
Font size with px:
body { font-size: 16px; line-height: 1.125em; }
#container { font-size: 12px; }
First thing I saw, you need to add this to the very first line of your HTML to force IE to render in standards mode, instead of quirks mode:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
In regard to centering the banner, try adding the following:
in body selector:
text-align: center;
in banner:
margin-right: auto;
margin-left: auto;
In regard to font size try using em or % sizing.
Other than that just tackle the problems one at a time, fine tune the details incrementally. Throwing in everything all at once will only create confusion - chances are it wont work as expected, but will frustrate you.