Why do my divs have this mysterious right margin? - javascript

I am trying to align divs #inner3 and #inner4 side by side, but they refuse to cooperate. When I inspect the DOM through Chrome, there is this mysterious right side margin on both divs that extends to the end of the page.
I have the global margin set to 0, but when I look deeper it says that there is no value for margin, period. Why?? Why won't my divs cooperate either? I have removed white space, made them smaller, floating, all to no avail. I have been searching and struggling for over 2 hours now.
Note: the overflow-x is for the animation; the background CSS is for the parallax.
body, html {
height: 100%;
overflow-x: hidden;
margin: 0em;
}
#section2 {
height: 500px;
width: 100%;
background-color: black;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
border: 1px;
display: inline-block;
font-size: 0;
}
#inner3 {
height: 500px;
width: 50%;
font-size: 12px;
}
#inner4 {
height: 500px;
width: 50%;
font-size: 12px;
}
Code: https://codepen.io/hungus--bungus/pen/rdgEze?editors=1100
Page: https://codepen.io/hungus--bungus/full/rdgEze
Photos are taken using the Chrome "Inspect" feature, and information can be found in the "Computed" tab at the bottom after selecting the element.

Adding display: inline-block; to #inner3 and #inner4 will put them side-by-side.
#inner3 {
height: 500px;
width: 50%;
font-size: 12px;
display: inline-block;
}
#inner4 {
height: 500px;
width: 50%;
font-size: 12px;
display: inline-block;
}

Related

Making website but I positioned all the objects one by one using css and it only aligns properly with my monitor

Okay so like I am making a website but I aligned all the images to fit inside little grids of like so in the image below:
but on other size monitors or my friend's computer it shows the different red squares outside the image like so:
I just want it to align properly on all size monitors and screens but I spent so long making the css code perfectly align for me one by one and here is the css code for the red squares as the plus and the minus is what it turns into once someone clicks on it. I have like 9 of these elements all aligned to my webpage size just it only aligns on my monitor and others it all over the place. The code below is the whole website all the code I just want it to align properly on all screen sizes and not just mine without having to change all the numbers I spent hours writing LOL, is there a way I can set the website to align to my monitor size for everyone or something? Here is a live example of the website if you don't run the code below: https://minecraft-inventory-designer.glitch.me/
and also I'm on a MacBook with a 13 inch screen that's the screen size I aligned it to.
var slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("demo");
var captionText = document.getElementById("caption");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
captionText.innerHTML = dots[slideIndex-1].alt;
}
.title {
font-family:minecraft
}
.glasspane {
}
/* Six columns side by side */
.column {
float: left;
width: 16.66%;
}
/* Add a transparency effect for thumnbail images */
.demo {
opacity: 100;
}
.active,
.demo:hover {
opacity: 1;
}
.tab { margin-left: 40px; }
body {
background-image: url('https://i.pinimg.com/originals/f6/42/72/f64272bc37d664cf6000fb9a24e47702.png');
background-position:395px 50px;
background-size:500px;
background-repeat:no-repeat;
}
.plus{
background-image: url("https://cdn.discordapp.com/emojis/826141912036802611.png?v=1");
background-repeat:no-repeat;
background-size: 45px;
position: absolute;
display: block;
padding: 1px 1px;
height: 45px;
width: 45px;
}
.plus.minus{
background-image: url("https://cdn.discordapp.com/emojis/826141911945445377.png?v=1");
background-repeat:no-repeat;
background-size: 45px;
position: absolute;
display: block;
padding: 1px 1px;
height: 45px;
width: 45px;
}
.plus2{
background-image: url("https://cdn.discordapp.com/emojis/826141912036802611.png?v=1");
background-repeat:no-repeat;
background-size: 45px;
position: absolute;
display: block;
padding: 1px 1px;
height: 45px;
width: 45px;
}
.plus2.minus2{
background-image: url("https://cdn.discordapp.com/emojis/826141911945445377.png?v=1");
background-repeat:no-repeat;
background-size: 45px;
position: absolute;
display: block;
padding: 1px 1px;
height: 45px;
width: 45px;
}
.plus3{
background-image: url("https://cdn.discordapp.com/emojis/826141912036802611.png?v=1");
background-repeat:no-repeat;
background-size: 45px;
position: absolute;
display: block;
padding: 1px 1px;
height: 45px;
width: 45px;
}
.plus3.minus3{
background-image: url("https://cdn.discordapp.com/emojis/826141911945445377.png?v=1");
background-repeat:no-repeat;
background-size: 45px;
position: absolute;
display: block;
padding: 1px 1px;
height: 45px;
width: 45px;
}
.plus4{
background-image: url("https://cdn.discordapp.com/emojis/826141912036802611.png?v=1");
background-repeat:no-repeat;
background-size: 45px;
position: absolute;
display: block;
padding: 1px 1px;
height: 45px;
width: 45px;
}
.plus4.minus4{
background-image: url("https://cdn.discordapp.com/emojis/826141911945445377.png?v=1");
background-repeat:no-repeat;
background-size: 45px;
position: absolute;
display: block;
padding: 1px 1px;
height: 45px;
width: 45px;
}
.plus5{
background-image: url("https://cdn.discordapp.com/emojis/826141912036802611.png?v=1");
background-repeat:no-repeat;
background-size: 45px;
position: absolute;
display: block;
padding: 1px 1px;
height: 45px;
width: 45px;
}
.plus5.minus5{
background-image: url("https://cdn.discordapp.com/emojis/826141911945445377.png?v=1");
background-repeat:no-repeat;
background-size: 45px;
position: absolute;
display: block;
padding: 1px 1px;
height: 45px;
width: 45px;
}
.plus6{
background-image: url("https://cdn.discordapp.com/emojis/826141912036802611.png?v=1");
background-repeat:no-repeat;
background-size: 45px;
position: absolute;
display: block;
padding: 1px 1px;
height: 45px;
width: 45px;
}
.plus6.minus6{
background-image: url("https://cdn.discordapp.com/emojis/826141911945445377.png?v=1");
background-repeat:no-repeat;
background-size: 45px;
position: absolute;
display: block;
padding: 1px 1px;
height: 45px;
width: 45px;
}
.plus7{
background-image: url("https://cdn.discordapp.com/emojis/826141912036802611.png?v=1");
background-repeat:no-repeat;
background-size: 45px;
position: absolute;
display: block;
padding: 1px 1px;
height: 45px;
width: 45px;
}
.plus7.minus7{
background-image: url("https://cdn.discordapp.com/emojis/826141911945445377.png?v=1");
background-repeat:no-repeat;
background-size: 45px;
position: absolute;
display: block;
padding: 1px 1px;
height: 45px;
width: 45px;
}
.plus8{
background-image: url("https://cdn.discordapp.com/emojis/826141912036802611.png?v=1");
background-repeat:no-repeat;
background-size: 45px;
position: absolute;
display: block;
padding: 1px 1px;
height: 45px;
width: 45px;
}
.plus8.minus8{
background-image: url("https://cdn.discordapp.com/emojis/826141911945445377.png?v=1");
background-repeat:no-repeat;
background-size: 45px;
position: absolute;
display: block;
padding: 1px 1px;
height: 45px;
width: 45px;
}
.plus9{
background-image: url("https://cdn.discordapp.com/emojis/826141912036802611.png?v=1");
background-repeat:no-repeat;
background-size: 45px;
position: absolute;
display: block;
padding: 1px 1px;
height: 45px;
width: 45px;
}
.plus9.minus9{
background-image: url("https://cdn.discordapp.com/emojis/826141911945445377.png?v=1");
background-repeat:no-repeat;
background-size: 45px;
position: absolute;
display: block;
padding: 1px 1px;
height: 45px;
width: 45px;
}
.pwus:hover, .pwus2:hover {
box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
}
<html>
<link rel="stylesheet" href="style.css">
<script src="main.js"></script>
<title>Minecraft Inventory Designer</title>
<center>
<h1 class="title">Minecraft Inventory Designer</h1>
</center>
<br>
<br>
<br>
<br>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(".plus").click(function(){
$(this).toggleClass("minus")
})
$(".plus2").click(function(){
$(this).toggleClass("minus2") ;
})
$(".plus3").click(function(){
$(this).toggleClass("minus3") ;
})
$(".plus4").click(function(){
$(this).toggleClass("minus4") ;
})
$(".plus5").click(function(){
$(this).toggleClass("minus5") ;
})
$(".plus6").click(function(){
$(this).toggleClass("minus6") ;
})
$(".plus7").click(function(){
$(this).toggleClass("minus7") ;
})
$(".plus8").click(function(){
$(this).toggleClass("minus8") ;
})
$(".plus9").click(function(){
$(this).toggleClass("minus9") ;
})
</script>
</html>
position: absolute will align itself to the nearest relative positioned parent. In your case, you have none so it's aligning itself to the window and right: whatever means this many pixels from the right side of the window.
You're going to need to wrap all these elements in a div and add position: relative to it. This will make all your absolutely positioned elements align to this container instead of the window.
HTML:
<div class="container">
... the rest
</div>
CSS:
.container {
position: relative;
}
This will break your design and you're going to have to reposition all the elements. Aligning left: whatever is safer than right: whatever since the right edge of elements is likely expanding to match their allowable space.
Going forward you should look into something like CSS grid to perform what you're trying to do in a way that is more flexible.
You have not made your code responsive, meaning it adjusts to all screens in a manner you think fit... Now to help you, I'm not going to do it for you, but these are all links to help you make your code responsive:
W3Schools Responsive Web Design
MDN Responsive Web Design
Now, a very important CSS thing(?) is the media query.. thing(?).
This helps you make your CSS style the page and elements differently on different screen sizes.
You could also use (for example) bootstrap for responsiveness (if you're already using it.)
The grid system is quite time-saving and simple (just give classes)!
Another thing is, using hardcoded widths and heights will not make an element responsive.. consider using percent: (4%) instead of px: (4px).
Keep in mind that the percentage is relative to the parent element, so if the parent element has a 40% width of the body, and a child element has a 10% width, then the child elements width relative to the body will be 10% * 40% = 4% of the body.
Also: CSS grid and flexbox is pretty crucial if you are going to create more responsive websites

DIV "background-image" not stretched over entire DIV when using "background-size : 100% 100%"

On my website I am building a custom HSV Color picker.
Instead of using Gradients I've decided to opt for a .SVG Gradient image that I will use in my HSV Slider.
I am having a problem with the fitting of that Image into the Background of my DIV.
Here's an example.
The Image is fitted perfectly in both Mozilla Firefox and Internet Explorer, but in Edge it looks as if only the "height" is at a "100%", and the "width" is "auto" - Which it is not, at least not in the CSS:
#pvdivsliderhue {
position: absolute;
top: 10px;
left: 10px;
right: 10px;
width: auto;
height: 30px;
border-radius: 15px;
background-image: url('images/pvhue.svg');
background-size: 100% 100%;
background-color: green;
display: flex;
}
How would I go about solving this issue?
Appreciate all the help!
SVG is still buggy in Edge. Therefore, I advise to use old school .png or .jpg images if you don't require a vector image.
Check out the working example:
/* Demo Styles */
.picker {
height: 150px;
width: 200px;
position: relative;
margin: 0 auto;
background-color: #e9e9e9;
}
/* Hue Slider */
#pvdivsliderhue {
position: absolute;
top: 10px;
left: 10px;
right: 10px;
width: auto;
height: 30px;
border-radius: 15px;
background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/a/a7/Hue_alpha.png/900px-Hue_alpha.png');
background-size: 100% 100%;
background-color: white;
display: flex;
}
<div class="picker">
<div id="pvdivsliderhue"></div>
</div>
Make the margins and padding 0
#pvdivsliderhue {
position: absolute;
top: 10px;
left: 10px;
right: 10px;
width: auto;
height: 30px;
border-radius: 15px;
background-image: url('images/pvhue.svg');
background-size: 100% 100%;
background-color: green;
display: flex;
margin :0;
padding :0
}
Try background-size: cover or background-size: container. I hope it will solve your problem.

Horizontally fix background image to logo in header

my problem is quite simple. I need the diagonal line in the background image to align with the "X" in the logo and make it stay there no matter how wide the viewport is. I tried to achieve it with css only but with no result. It´s gonna need some javascript I suppose but I have no idea where to start.
<body>
<header>
<div class="container">
<svg class="logo"></svg>
</div>
</header>
</body>
* {
box-sizing: border-box
}
body {
background: url(http://mujtest.tk/ci/site/templates/img/hero2.jpg) no-repeat center center;
background-size: cover;
background-attachment: fixed;
height: 100vh;
}
header {
opacity: 1;
height: 135px;
line-height:135px;
position: fixed;
width: 100%;
top: 0;
left: 0;
z-index: 5;
transition: all 0.3s;
z-index: 1000;
text-align: center;
}
.container {
width: 100%;
max-width: 1200px;
line-height: 135px;
margin: 0 auto;
display: inline-block;
vertical-align: middle;
padding: 0 80px;
}
.logo {
max-width: 200px;
float: left;
}
http://codepen.io/easynowbaby/pen/qdLbgP
Thanks!
looks like what you want is to play around with the background position, try something like this,
background: url(http://mujtest.tk/ci/site/templates/img/hero2.jpg) no-repeat center -110px;

Cant scroll down to see footer

I'm a (Dutch) first year student studying ICT&Media Design and we are working with HTML/CSS/JavaScript.
While creating a page for myself to work with javascript, html and css I stumbled upon some problems.
I can't scroll down to see my footer on the page's.
I'm pretty sure im doing something wrong with the fixed position but i can't seem to find out what exactly.
Hope you guys can help me, there's probably more wrong positioning wise.
Thank you in advance.
http://athena.fhict.nl/users/i299291/WP21/index.html
(School's Server)
your footer is not appearing because you are using unnecessary using position. Remove all of your position:fixed and position:absolute from your CSS and then page will scrollable and you can see your footer.
Here is the updated CSS; you can see all position are commented, no need to use them.
#header {
margin-left: auto;
margin-right: auto;
margin-top: 15px;
position: relative; /* remove this line*/
width: 100%;
}
#menubar {
background-color: #2C2C2D;
border: 1px solid #FFFFFF;
height: 51px;
line-height: 20px;
margin: 261px auto 0; /* remove this line*/
position: absolute; /* remove this line*/
text-align: center;
vertical-align: middle;
width: 1280px;
}
#containerIndex {
background-color: #FFFFFF;
height: 530px;
margin-top: 330px;
opacity: 0.5;
position: fixed; /* remove this line*/
width: 1280px;
}
#footer {
background-color: #C6C7C0;
border: 1px solid #FFFFFF;
height: 48px;
line-height: 50px;
margin: 880px auto 10px;/* remove this line*/
position: fixed;/* remove this line*/
text-align: center;
vertical-align: middle;
width: 1280px;
}
Your footer has a fixed position. It is displaying behind your content. Get rid of that, and you should be able to scroll down to your footer.

Challenge: Make background and two div elements scale and move relative to browser window

I want to take what is here:
http://test.thebkk.net
and make it scale and fit to any browser window, maintaining position of the elements and keeping the image completely in the window.
CSS involving positioning etc.:
body {
background-color: black;
background-image: url('http://thebkk.net/Images/BVF-Temp.jpg');
background-repeat: no-repeat;
background-position: 45px -30px;
}
/* Player Style */
#player {
position: fixed;
width: 680px;
margin-top: 15px;
margin-left: 350px;
border: outset 5px white;
}
ul#menu {
position: fixed;
margin-top: 12px;
margin-left: 90px;
padding: 0;
list-style: none;
clear: both;
}
use background-size: 100% auto; (w/h) and thinks should work. for everything else use percentage widths (and heights) and positions as well

Categories