tl;dr - How can I center the blue div found in the third image in the white space, not the page?
I've been experiencing quite the headache recently. I've created a website with two distinct columns, but, is achieved with only one div element. This can be seen below.
It's pretty obvious from the picture that the first column is to be regarded as a sidebar, and hence, has the class .sidebar. .sidebar has a fixed width property of 400px. The rest of the page is simply the rest of the div with the class .container, which extends to 100% on both its width and height
properties. As I would image this is hard to image from just reading this text, I've found a way to illustrate how the page is setup.
Gray is the html element.
White is the body element.
The aqua on white is the div with the class .container.
The following aqua is the div with the class .sidebar.
Let's now insert the div that's giving me issues.
As you can see, a single blue div has been added. This has the class .test, and which simply sets the width, height, and margin properties. As you can now see, when the margin is set to 0 auto, the div is centered to the window and not the white space. Obviously this is the expected action.
The issue I'm facing is that I have no idea how I can center the blue div in the white space. I'm not sure how I would create anything the exact width of the white space, and hence, don't know how margin: 0 auto would be any use. How would I center my test element in the white space? Can this be achieved through CSS and HTML?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Welcome.</title>
<link href='https://fonts.googleapis.com/css?family=Open+Sans:300|Raleway' rel='stylesheet' type='text/css'>
<link href="https://www.codekaufman.com/assets/css/core.css" rel="stylesheet" type="text/css" />
<link href="https://www.codekaufman.com/assets/css/alerts.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="banner-alert">Please excuse the mess. I'm currently working to improve the site. Thanks.
</div>
<div class="container">
<div class="side-bar">
<div class="temp-logo"></div>
<ul class="nav">
<li class="nav-button-disabled">About</li>
<li class="nav-button-disabled">GitHub</li>
<li class="nav-button-disabled">Contact</li>
</ul>
<div class="emphasis-button-disabled">Support</div>
<div class="legal">Copyright © 2015 Jeffrey Kaufman. All Rights Reserved.</div>
</div>
<div class="test"></div>
</div>
</body>
</html>
#charset "utf-8";
* {
margin: 0;
padding: 0;
font-family: "Raleway", sans-serif;
color: #000;
}
html, body {
width: 100%;
height: 100%;
}
a {
text-decoration: none;
color: inherit;
}
.container {
height: 100%;
}
.side-bar {
position: fixed;
top: 0;
left: 0;
width: 400px;
height: 100%;
background: #EEE;
}
.temp-logo {
width: 200px;
height: 200px;
margin: 0 auto;
margin-top: 150px;
background: #000;
}
.nav {
width: 200px;
margin: 0 auto;
margin-top: 75px;
list-style-type: none;
}
.nav-button {
margin-top: 20px;
margin-bottom: 20px;
font-size: 1.6em;
cursor: pointer;
transition: 0.5s;
}
.nav-button:hover {
margin-left: 20px;
}
.nav-button-disabled {
margin-top: 20px;
margin-bottom: 20px;
font-size: 1.6em;
cursor: default;
color: #AAA;
}
.nav-category {
margin-top: 40px;
margin-bottom: 20px;
font-size: 2em;
cursor: default;
border-bottom: 1px #000 solid;
}
.emphasis-button {
text-align: center;
position: absolute;
width: 120px;
height: 45px;
left: 138px;
line-height: 45px;
bottom: 70px;
border-radius: 5px;
border: 1px solid #C30;
color: #C30;
transition: 0.4s;
cursor: pointer;
}
.emphasis-button-enabled {
text-align: center;
position: absolute;
width: 120px;
height: 45px;
left: 138px;
line-height: 45px;
bottom: 70px;
border-radius: 5px;
border: 1px solid #C30;
transition: 0.4s;
cursor: pointer;
color: #EEE;
background: #C30;
}
.emphasis-button-disabled {
text-align: center;
position: absolute;
width: 120px;
height: 45px;
line-height: 45px;
left: 138px;
bottom: 70px;
border-radius: 5px;
border: 1px solid #AAA;
color: #AAA;
cursor: default;
}
.emphasis-button:hover {
color: #EEE;
background: #C30;
}
.legal {
font-family: 'Open Sans', sans-serif;
position: absolute;
font-size: 0.85em;
text-align: center;
width: 400px;
height: 20px;
left: 0;
bottom: 20px;
}
.test {
width: 600px;
height: 200%;
background: blue;
margin: 0 auto;
}
Wrap it in another element with position=absolute, a right, top and bottom value of 0 and a left value of 400px:
<div style="position:absolute;right:0;top:0;bottom:0;left:400px;">
<div class="test"></div>
</div>
Your side bar already have position fixed, so please add padding left to your container it will work
.container {
height: 100%;
padding-left: 400px; /*width of your .sidebar*/
}
try changing the width for a percentage and adding a new div that covers the rest of the white space so you can center the blue element on that new div.
.side-bar {
position: fixed;
top: 0;
left: 0;
width: 20%;
height: 100%;
background: #EEE;
}
.new-div{width:80%;float:left;}
Set the test inside the new div
<div class="new-div"><div class="test"></div></div>
Related
when trying to add a <div> inside another it results in the main container to be pushed down and equal amount to the added <div>. I can fix the issue by setting the position of the added to absolute but I am trying to understand which attribute is causing this behavior.
https://imgur.com/t9Q0ocm
for example Adding the red <div> inside the purple <div> caused the purple <div> to be pushed down
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link
href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght#0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="styles.css">
<title>Blue</title>
</head>
<body>
<aside class="side-menu"></aside>
<main class="main-content">
<div class="c-content">
<div class="c-content-text">
</div>
</div>
<div class="r-content">
<div class="r-content-text">
</div>
</div>
<div class="video-container"></div>
</main>
</body>
</html>
CSS
html {
font-family: Roboto, san serif;
font-size: 16px;
font-weight: normal;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
h1 {
font-size: 3.125rem;
line-height: 3.6875rem;
text-transform: uppercase;
color: #ffffff;
}
p {
font-size: 1rem;
font-family: Roboto;
color: #ffffff;
font-size: 16px;
line-height: 24px;
}
body {
background-color: #1458e4;
font-size: 0;
margin: 0;
padding: 0;
}
.side-menu {
width: 5%;
height: 100vh;
/* background-color: coral; */
position: sticky;
display: inline-block;
border-right: 1px solid rgba(255, 255, 255, 0.2);
}
.main-content {
background-color: cyan;
display: inline-block;
width: 95%;
}
.c-content {
background-color: rgb(184, 11, 184);
border-right: 1px solid rgba(255, 255, 255, 0.2);
display: inline-block;
width: 67%;
height: 100vh;
}
.r-content {
display: inline-block;
background-color: darkkhaki;
width: 33%;
height: 100vh;
padding: 25.4375rem 4.6875rem 19.1875rem 3.375rem;
}
.video-container {
background-color: lemonchiffon;
height: 68vh;
}
.c-content-text {
display: inline-block;
/* position: absolute; */
background-color: tomato;
width: 500px;
height: 500px;
}
.r-content-text {
background-color: turquoise;
width: 500px;
height: 500px;
}```
Remove display: inline-block in class c-content-text should also solved your issue.
I think this thread answer's your question Inline-block element height issue
AFAIK, the inline-block has relation with font-size and line-height, and you set the body to 0px, which makes lots of the issues hard to describe. E.g. Try to remove the font-size: 0px; from the body. And no matter you remove ('inline' or add absolute), the behavior is the same. Althought the page is still looks not good.
Last, i would suggest you to try the grid layout for your layout design, your scenario should be easy to implement with grid layout.
Here's what it currently looks like:
What's supposed to be the header is currently transparent over the body image. I'm trying to get it to sit behind where it says "NEWS" at the top. The header image is currently inserted with <img src="https://i.imgur.com/wLTnUyF.png"> and I don't know what to add to reposition it.
(I can also add additional details if this isn't enough to get the answer I'm looking for.)
Edit: Here's the whole code: PASTEBIN
* {
background: transparent;
border: none;
margin: 0;
padding: 0;
}
.gr1,
.gr2,
.gr3,
.gr-top .tri,
.gr-top .gr h2 img,
.gr-top .gr span {
display: none;
}
.gr-top .gr {
padding-left: 0 !important;
}
/* body { background-image: url('https://i.imgur.com/iYr6KIy.png'); background-repeat: no-repeat; background-size: 950px 540px; } */
h3 {
font-size: 25px;
text-align: center;
color: #c8b46e;
background-repeat: no-repeat;
background-size: 400px;
background-position: center center;
padding: 20px;
background-image: url("https://i.imgur.com/RbBgBbv.png");
}
.scrollbox {
height: 360px;
width: 420px;
overflow: auto;
padding: 20px;
font-family: Ubuntu;
font-size: medium;
color: #aaa89e;
background: transparent;
}
.scrollbox2 {
height: 100px;
width: 360px;
overflow: auto;
padding: 20px;
font-family: Ubuntu;
font-size: medium;
color: #aaa89e;
background: transparent;
}
.gr-body .gr .grf-indent .text {
max-width: 500px;
}
.gr-body .gr .grf-indent .bottom {
position: relative;
bottom: 160px;
left: 10px;
color: #fff;
}
.gr-body .gr .grf-indent .bottom a {
color: #fff;
}
.gr-body .gr .grf-indent .bottom a:hover {
color: #c8b46e;
}
a:hover {
cursor: url(https://i.imgur.com/dg8PzHg.png), pointer;
}
body {
cursor: url(https://i.imgur.com/dg8PzHg.png), pointer;
}
.container {
position: relative;
}
.bottomleft {
position: relative;
top: 60px;
left: 10px;
font-size: 18px;
}
.topright {
position: relative;
bottom: 444px;
left: 510px;
font-size: 18px;
}
.top {
position: absolute;
top: 0px;
width: 500px;
}
img.back {
margin-top: 70px;
width: 940px;
height: 540px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class='wrap'>
<h3>NEWS</h3>
<img class="top" src="https://i.imgur.com/wLTnUyF.png">
<img class="back" src="https://i.imgur.com/iYr6KIy.png">
</div>
</body>
</html>
I am not sure what you are trying to do. But if you are trying to add an image to the header, you should do:
<!DOCTYPE html>
<html>
<header>
<img src="https://i.imgur.com/wLTnUyF.png">
</header>
<body>
<img src="bodyimage.png">
</body>
</html>
If that doesn't work, remember to actually download the image and upload it into your workspace.
I ended up figuring up a way to get the results I wanted.
What I did is I added a background specifically to .gr-top .gr h2 and then change the alignment on the text.
Now my journal skin looks like this ; Updated Preview
.gr-top .gr h2{
text-align: right;
background-repeat: no-repeat;
background-position: left left;
padding: 33px;
background-size: 600px;
background-image: url("https://i.imgur.com/wLTnUyF.png");
}
Sorry for the bad phrasing on the question. I'll try to be clearer next time.
I'm a novice coder and I'm building my first proper website. I have a column of button links down the right hand side of my page. However, they're only visible if the window is full-screen. If I use my mouse to shrink the size of the window, the buttons disappear. Is there any way that I can make the buttons stay visible if the window changes size?
Here's the HTML code:
/* Scroll down to the bit that says ALL MY BUTTONS for the relevant CSS. */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
background-color: #fff;
color: #555;
font-weight: 300;
font-size: 20px;
text-rendering: optimizeLegibility;
}
.row {
max-width: 1140px;
//margin: 0 auto;
}
header {
background-image: url(img/joshua-earle-183442.jpg);
background: no-repeat center center cover;
height: 100vh;
background-size: cover;
background-position: center;
}
.hero-text-box {
position: absolute;
width: 1140px;
top: 5%;
left 50%;
font-family: 'Orbitron', 'Arial', sans-serif;
margin-left: 15px;
word-spacing: 15px;
font-weight: 300;
}
h1 {
margin-top: 0;
color: #ef872e;
}
/****ALL MY BUTTONS***/
.quizzes {
position: absolute;
display: inline-block;
margin-left: 1730px;
margin-bottom: 10px;
top: 50%;
text-decoration: none;
color: #ef872e;
font-family: 'Orbitron';
padding: 10px;
border-style: solid;
border-width: 1px;
border-radius: 10px;
border-color: #ef872e;
}
.calculators {
position: absolute;
display: inline-block;
margin-top: 20px;
margin-left: 1692px;
top: 55%;
color: #ef872e;
text-decoration: none;
font-family: 'Orbitron';
padding: 10px;
border-style: solid;
border-width: 1px;
border-radius: 10px;
border-color: #ef872e;
}
.solarsystem {
position: absolute;
width: 230px;
display: inline-block;
margin-top: 40px;
margin-left: 1612px;
top: 60%;
color: #ef872e;
text-decoration: none;
font-family: 'Orbitron';
padding: 10px;
border-style: solid;
border-width: 1px;
border-radius: 10px;
border-color: #ef872e;
}
.mysteries {
position: absolute;
width: 240px;
display: inline-block;
margin-top: 60px;
margin-left: 1602px;
top: 65%;
color: #ef872e;
text-decoration: none;
font-family: 'Orbitron';
padding: 10px;
padding-right: 10px;
border-style: solid;
border-width: 1px;
border-radius: 10px;
border-color: #ef872e;
}
.otherresources {
position: absolute;
width: 220px;
display: inline-block;
margin-top: 30px;
margin-left: 1623px;
top: 75%;
color: #ef872e;
text-decoration: none;
font-family: 'Orbitron';
padding: 10px;
border-style: solid;
border-width: 1px;
border-radius: 10px;
border-color: #ef872e;
}
.full:hover,
.full:active {
background-color: #e97512;
color: #fff;
transition: background-color 0.3s;
transition: color 0.3s;
}
.ghost:hover,
.ghost:active {
border-color: #e97512;
background-color: #e97512;
color: #fff;
transition: background-color 0.3s;
transition: color 0.3s;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="vendors/css/normalize.css">
<link rel="stylesheet" type="text/css" href="vendors/css/grid.css">
<link rel="stylesheet" type="text/css" href="resources/css/style.css">
<link href="https://fonts.googleapis.com/css?family=Lato|Orbitron:400,500" rel="stylesheet" type=text/css>
<title>Interactive Galaxy</title>
</head>
<body>
<header>
<div class="hero-text-box">
<h1>Explore the universe, or whatever...</h1>
</div>
<a class="quizzes full" href="#">Quizzes</a>
<a class="calculators ghost" href="#">Calculators</a>
<a class="solarsystem ghost" href="#">The Solar System</a>
<a class="mysteries ghost" href="#">Mysteries of Space</a>
<a class="otherresources ghost" href="#">Other Resources</a>
</header>
</body>
</html>
Remove all the margin-left from your links. surround all your links by a div like this:
<div class="links">
<a class="quizzes full" href="#">Quizzes</a>
<a class="calculators ghost" href="#">Calculators</a>
<a class="solarsystem ghost" href="#">The Solar System</a>
<a class="mysteries ghost" href="#">Mysteries of Space</a>
<a class="otherresources ghost" href="#">Other Resources</a>
</div>
and then change the links container style like this :
.links {
float: right;
}
I think the reason is your margin-left property, simply, the window is not enough to display these many pixels. better set:
display: inline-block;
float: right;
Also, better put your buttons in the list for better view and controls in styling.
Your margin-left property is defined by a set number of pixels:
margin-left: 1730px;
Even when the screen is smaller, that rule will still apply by pixel count. To make your page more responsive, change the margin to a percentage, like:
margin-left: 80%; /* 80% is just an example */
or use #VaxoBasilidze's idea of applying float: right;.
The solution is simple.
You used a top: in % , so when you resize the window. css calculates the stated % according to window current width.
so to solve this; update your top: to px; like top: 555px; so when you resize the window your buttons will be visible.
I am making website in html and css and I have a problem. In my css file I made id "full" which set wooden background after sidebar and it should continue on all page. In my class "picture" I made 80% width white panel - so there should be 80% white background in the middle and 10% edges should be wooden. It works correctly untill my article section, where I added some images of pizzeria. Immediately there is no wooden edges, only white. I don´t understand because my "full" id and "picture" class continue untill end of the body. Could somebody see where is error please?
Image showing error
* {
padding: 0;
margin: 0;
border: 0;
}
.container {
margin: auto;
overflow: hidden;
width: 100%;
}
#full {
background-image: url("http://newallpaper.com/wp-content/uploads/2014/01/Dark-Wood-620x387.jpg");
}
.picture {
margin: auto;
width: 80%;
background: white;
}
#pizzaObrazok {
background-image: url("img/pizzaCompleted.png");
width: 100%;
height: 210px;
margin: 0px;
}
nav {
float: left;
margin-left: 2px;
width: 100%;
height: 32px;
}
ul {
float: left
}
li {
display: inline;
border: 4px solid black;
font-size: 24px;
padding: 10px 64px;
background-color: #990000;
color: #ffffff;
}
li a {
color: #ffffff;
text-decoration: none;
padding-top: 8px;
padding-bottom: 5px;
vertical-align: middle;
}
#imgPizza {
width: 59%;
height: 270px;
padding-left: 190px;
padding-top: 30px;
padding-bottom: 30px;
}
article p {
font-size: 120%;
font-family: fantasy;
text-align: center;
margin-right: 160px;
}
#imgPizza2 {
width: 30%;
height: 270px;
position: absolute;
transform: rotate(345deg);
margin-top: 100px;
margin-left: 50px;
border: 6px solid red;
}
#imgPizza3 {
width: 30%;
height: 270px;
position: absolute;
margin-left: 390px;
margin-top: 100px;
transform: rotate(15deg);
border: 6px solid red;
}
#phone {
border: 2px solid black;
margin-top: 150px;
margin-right: 180px;
padding: 5px;
position: absolute;
display: inline;
text-align: center;
background: #ff4d4d;
}
<header>
<div id="pizzaObrazok">
</div>
</header>
<div id="full">
<section id="navigation">
<div class="container">
<nav>
<ul>
<li>ÚVOD</li>
<li>FOTO</li>
<li>JEDÁLNY LÍSTOK</li>
<li>KDE NÁS NÁJDETE</li>
<li>NÁZORY</li>
</ul>
</nav>
</div>
 
</section>
<div class="picture">
<img id="imgPizza" src="img/pizzacheese.jpg">
<aside id="phone">
<h2>Telefónne číslo:</h2>
<h2> 0905 741 963</h2>
</aside>
</div>
 
<div class="picture">
<article>
<p>U nás dostanete najchutnejšiu pizzu z výlučne kvalitných surovín</p>
<img id="imgPizza2" src="https://cdn.vox-cdn.com/uploads/chorus_image/image/50289897/pizzeria_otto.0.0.jpg">
<img id="imgPizza3" src="https://media-cdn.tripadvisor.com/media/photo-s/09/bc/74/79/pizzeria-du-drugstore.jpg">
</article>
</div>
</div>
You have your elements "#imgPizza2" and "#imgPizza3" whit position absolute outside your "#full" wrapper. You can do various things to achive the effect you are looking for but depends of many others things.
I think the simpliest way is to put your background image in to the body and not in the warpper "#full" or change the postion of your images among others.
body {
background-image: url("http://newallpaper.com/wp-content/uploads/2014/01/Dark-Wood-620x387.jpg");
}
It looks like the wood background is 620 x 387, so my first thought is that it is big enough to cover the first section but not the articles. Maybe add background-repeat: repeat-y; to your #full class and see if the wood border spreads further down the page.
I have a navigation bar which I want to come down if I scroll.
That's why I gave here position: fixed;
Now if I change the size of my browser window, I can't see the links on the right side (I can't scroll the navigation bar to the right side). I think its because position: fixed;, but I don't know how to fix it.
Here my Code:
*{
margin: 0px;
padding: 0px;
font-family: 'Oswald', sans-serif;
}
body{
height: 2000px;
background-color: rgb(35, 35, 38);
}
nav{
width: 100%;
background-color: rgb(14, 14, 14);
overflow: hidden;
border-bottom: 2px solid black;
margin-bottom: 5px;
position: fixed;
top: 0;
}
.nav-top-ul{
font-size: 0px;
width: 1000px;
margin: 0px auto;
}
section{
margin: 0px auto;
width: 1000px;
margin-top: 50px;
word-wrap: break-word;
}
.nav-top-li{
display: inline-block;
}
.nav-top-a{
display: block;
font-size: 16px;
padding: 10px 20px;
color: rgb(137, 137, 137);
transition: all 0.5s;
text-decoration: none;
}
.nav-top-a:hover{
color: white;
}
.right{
float: right;
}
.left{
float: left;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Seite</title>
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
</head>
<body>
<nav>
<ul class="nav-top-ul">
<div class="left">
<li class="nav-top-li"><a class="nav-top-a" href="index.php?content=home">NameDerSeite</a></li>
</div>
<div class="right">
<li class="nav-top-li"><a class="nav-top-a" href="index.php?content=home">Login</a></li>
<li class="nav-top-li"><a class="nav-top-a" href="index.php?content=home">Register</a></li>
</div>
</ul>
</nav>
<section>
<p>Example... Example...Example...Example...Example...Example...Example...Example...Example...Example...Example...Example...Example...Example...Example...Example...Example...Example...Example...Example...Example...Example...Example...Example...Example...Example...Example...Example...Example...Example...Example...Example...Example...Example...Example...Example...Example...Example...</p>
</section>
</body>
</html>
It's nothing to do with position: fixed. You just set the width of the navigation bar to 1000px. Set it to 100% and you'll be fine.
.nav-top-ul{
font-size: 0px;
width: 1000px; // Change this to 100%
margin: 0px auto;
}
Add:
position: fixed;
right: 5px;
to the .right css.
.right {
float: right;
position: fixed;
right: 5px;
}