How do I get rid of all of this white space so everything will touch each other?
I'm building a site for a friend for free just for the exp. So yes, I know it looks novice. Here is everything:
http://jsfiddle.net/e2p3pwtb/embedded/result/
h1{
background-image: url(silver-955496_960_720.jpg);
padding-bottom: 0;
}
#mainnav{ background-image: url(silver-313347_960_720.jpg);}
body {
margin: 0;
text-align: center;
}
.sidebar1{
float:left;
width: 20%;
padding: 0 20px 0 10px;
background-image: url(silver-955496_960_720.jpg);
background-repeat: repeat-y;
height:650px;}
.main{
float: left;
width: 60%;
padding: 0 20px 0 20px;
background-image: url(silver-313347_960_720.jpg);}
.sidebar2{
float: right;
width: 20%;
padding: 0 10px 0 20px;
background-image: url(silver-955496_960_720.jpg);
background-repeat: repeat-y;
height:650px;}
/*This will keep you from having "float drops"*/
*{box-sizing: border-box;}
Some elements have margins by default. In your fiddle, add
h1, p, ul {margin:0}
http://jsfiddle.net/MrLister/e2p3pwtb/1/
Or, more thorough,
* {margin:0}
which I can't really recommend though. Things like that change the appearance too much from its natural state.
Related
instead of having a margin of the right side because of the margin placed on .nav, it just covers the whole area.
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: var(--secondary);
color: var(--font-color);
background-image: url(3ca749da0b938c6392de6488c28b11c8.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
nav {
position: fixed;
display: flex;
background-color: var(--primary);
width: 100%;
margin: 5 14 5 14 ;
overflow: hidden;
padding: 7;
overflow-x:
}
Two reasons:
Your CSS is invalid. Lengths require units unless they are 0.
With a width of 100% the left margin will apply, push the element to the right, then the right-hand edge and right margin will be off-screen to the right.
You haven't provided any scale for your margins try putting:
nav {
margin: 5px 14px 5px 14px;
}
this is applying to all you haven't noticed the * *{margin: 0;padding: 0;box-sizing: border-box; }
firstly remove this and add unit like this nav{margin: 5px 14px 5px 14px;}
My issue is that I made a pretty big html page oriented on 125% browser zoom,
however when I put it in 100% all the position's and margin's start to change, thus breaking my html page awfully.
html { width: 100%; height: 280%; margin: 0; padding: 0; }
body { margin: 0 ; padding: 0; background: url(Photoshop/img/header_bg.png),url(Photoshop/img/full_bg.png); background-size: 1600px 655px,cover; background-repeat: no-repeat, no-repeat; }
header h1 { float: left; margin: 28px 0 0 220px; }
nav ul { list-style-type: none; float: right; }
nav li { float: right; margin: 53px 20px 50px 0px; text-transform: uppercase; }
What is the best way to fix the problem, without change every single piece of css code( margins position top right, e.t.c).
I have notoced you are using fixed values in your margins.
Try to use presentage, if that dont work use the #media in css to handle different sizes.
Margin example - margin-top: 10%;
So I am currently making a website for a friend of mine and I have set the left and right margin to 80px. This works for everything but my main body. It seems that it expands past the right margin, and simply has a margin of 60px instead of 80px.
Here is a screenshot: http://i.imgur.com/XtRdlUv.png
EDIT: I cut off some of the left margin, sorry for the confusion
As seen with the red arrow, there seems to be an offset when their shouldn't.
Here is my code:
body {
background: url(image) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
text-align: center;
margin-left: 80px;
margin-right: 100px;
}
.wrapper {
padding-top: 10px;
text-align: left;
margin: 0px auto;
}
.mainbody {
width: 100%;
outline: #293135 solid;
background-color: #444444;
margin-top: 40px;
text-align: left;
padding: 20px;
color: #FFFFFF;
}
<div class="mainbody" style="text-align: center">
<font face="Arial, Helvetica, sans" size="4">
<h1 style="text-decoration: underline">Download</h1>
<p>Features Include:</p>
</font>
</div>
You don't need
width: 100%;
Since .mainbody is a block element, it will expand to fill all the remaining space.
Otherwise, adding it produces the problem because of the content-box sizing model.
body {
background: url(image) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
text-align: center;
margin-left: 80px;
margin-right: 100px;
}
.wrapper {
padding-top: 10px;
text-align: left;
margin: 0px auto;
}
.mainbody {
outline: #293135 solid;
background-color: #444444;
margin-top: 40px;
text-align: left;
padding: 20px;
color: #FFFFFF;
text-align: center;
font-family: Arial, Helvetica, sans;
font-size: 18px;
}
<div class="mainbody" style="">
<h1 style="text-decoration: underline">Download</h1>
<p>Features Include:</p>
</div>
It is likely because your .mainbody element is using the default content-box, which adds an extra left and right padding of 20px each on top of the 100% width. Therefore, the final computed width of the element would be 100% + 40px, which causes it to 'overflow' of sorts.
To fix this, simply declare box-sizing: border-box, i.e.:
.mainbody {
box-sizing: border-box;
width: 100%;
outline: #293135 solid;
background-color: #444444;
margin-top: 40px;
text-align: left;
padding: 20px;
color: #FFFFFF;
}
In fact, it is recommended that you use this rule: * { box-sizing: border-box;} as recommended here.
I think you're using old ways. Try this! .mainbody { width: calc(100% - 120px); }
This is your new css and JSFiddle link! http://jsfiddle.net/Leo4v9rc/
body {
background: url(image) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
text-align: center;
}
.wrapper {
padding-top: 10px;
text-align: left;
margin: 0px auto;
}
.mainbody {
width: calc(100% - 120px);
outline: #293135 solid;
background-color: #444444;
margin:40px auto 0 auto;
text-align: left;
padding: 20px;
color: #FFFFFF;
}
I'm trying to create a gradient background, and then a solid color box in the center and then type text in it. My code is below, works great but the solid color box (body) isn't flush with the top of the browser, there is a little space between. How do you get rid of this?
html {
text-align: center;
background-color: #FFF;
background-image: url(../../Public/Documents/Business/Running%20Companies/Enlightenment%20Project/Website/images/bg.jpg);
background-repeat: repeat-x;
margin: 0px;
}
body {
background-color: #FFFFFF;
height: 768px;
width: 1024px;
margin: auto;
}
**Update
Working Code Below:
html {
font-family: sans-serif; /* 1 */
-webkit-text-size-adjust: 100%; /* 2 */
-ms-text-size-adjust: 100%; /* 2 */
background-color: #FFF;
background-image: url(images/bg.jpg);
background-repeat: repeat-x;
}
/*
* Removes default margin.
*/
body {
margin: auto;
background-color: #FFF;
height: 768px;
width: 1024px;
padding-top: 1px;
padding-right: 10px;
padding-bottom: 0px;
padding-left: 25px;
}
As #loktar commented, try a margin: 0 for the body (sorry #loktar, new here)
I suggest using normalize.css within all your projects to get rid of these little issues.
http://erickochphoto.com/avejoe/?page_id=14 is rendering fine in FF and IE, but fails in chrome.
I am using clear: both display: block / inline every where I can think of, but I am failing. Any ideas?
#main {
margin: 0;
padding: 0;
width: 800px;
min-height: 375px;
background: url(images/paper.png) repeat-y;
display: inline;
float: left;
}
#leftBackCopy
{
display: inline;
margin: 0px;
padding: 0px;
background: url(images/map.png) no-repeat;
width: 122px;
height: 426px;
float: left;
}
#rightBackCopy
{
display: inline
margin: 0px;
padding: 0px;
background: url(images/trimCam.png) no-repeat;
height: 195px;
width: 122px;
float: left;
}
#mainHolder
{
display: block;
clear: both;
margin: 0 auto;
padding: 0;
width: 1044px;
}
Try adding:
#mainHolder {
overflow:auto;
margin: 30px auto 0 auto;
}
Leave all the ither styles intact, just add the above. Worked for me, hope it works for you.
I didn't go too far into it, but deleting this portion of your HTML seems to fix the problem and put things in line (in Chrome):
<div class="menu"><ul><li >Home</li><li class="page_item page-item-14 current_page_item">Test</li></ul></div>
So, perhaps theres conflict within the CSS regarding the menu class or its unordered list.