The following code is part of a custom 404 page I am planning on using on a website of mine. However there is a major problem when I add the line of code overflow-y: auto;
The code below has the output which I expected it to. However when it the code inside the div reaches more than 75vh the overflow is not visible.
* {
margin: 0;
padding: 0;
}
.main {
min-height: 100vh;
font-size: 1em;
overflow-Y: hidden;
}
.center {
float: left;
position: relative;
left: 50%;
}
.wrap {
width: 100%;
float: left;
position: relative;
left: -50%;
}
.load_extra {
display: block;
position: fixed;
z-index: 11;
bottom: 15px;
}
.prep {
align: center;
background: #00eaff;
outline: none;
padding: 8px;
color: white;
border-color: white;
border-style: dotted;
border-width: 3px;
border-radius:50%;
font-size: 1.375em;
}
.extra {
display: block;
position: fixed;
bottom: 10px;
max-height: 75vh;
width: 80vw;
z-index: 10;
}
pre {
font-family: monospace, monospace;
font-size: 0.85em;
display: block;
overflow-y: auto;
word-break: break-all;
white-space:normal;
padding: 10px;
margin: 0 0 10px;
line-height: 1.42857143;
color: #333;
word-break: break-all;
word-wrap: break-word;
background-color: #f5f5f5;
border: 1px solid #ccc;
border-radius: 4px;
max-height: 50vh;
}
<body class="main">
<div class="center load_extra">
<div class="wrap">
<button id="extra" class="prep">Button</button>
</div>
</div>
<div id="infoCont" class="center extra">
<div class="wrap">
<h1>Extra Information</h1>
<pre>Some URL</pre>
<p>The requested URL shown above could not be found on the server</p>
<hr>
</div>
</div>
</body>
In order to fix this problem I added the line overflow-y: auto; in .extra class. This is what caused a problem. When you run the code below half of the output is "missing". I am unsure of why this is occuring.
* {
margin: 0;
padding: 0;
}
.main {
min-height: 100vh;
font-size: 1em;
overflow-Y: hidden;
}
.center {
float: left;
position: relative;
left: 50%;
}
.wrap {
width: 100%;
float: left;
position: relative;
left: -50%;
}
.load_extra {
display: block;
position: fixed;
z-index: 11;
bottom: 15px;
}
.prep {
align: center;
background: #00eaff;
outline: none;
padding: 8px;
color: white;
border-color: white;
border-style: dotted;
border-width: 3px;
border-radius:50%;
font-size: 1.375em;
}
.extra {
display: block;
position: fixed;
bottom: 10px;
max-height: 75vh;
width: 80vw;
z-index: 10;
overflow-y: auto;
}
pre {
font-family: monospace, monospace;
font-size: 0.85em;
display: block;
overflow-y: auto;
word-break: break-all;
white-space:normal;
padding: 10px;
margin: 0 0 10px;
line-height: 1.42857143;
color: #333;
word-break: break-all;
word-wrap: break-word;
background-color: #f5f5f5;
border: 1px solid #ccc;
border-radius: 4px;
max-height: 50vh;
}
<body class="main">
<div class="center load_extra">
<div class="wrap">
<button id="extra" class="prep">Button</button>
</div>
</div>
<div id="infoCont" class="center extra">
<div class="wrap">
<h1>Extra Information</h1>
<pre>Some URL</pre>
<p>The requested URL shown above could not be found on the server</p>
<hr>
</div>
</div>
</body>
I would appreciate any help in fixing this problem.
Half of the output goes "missing" due to the left positions defined in center and wrap classes.
center class will position your container starting from 50% and then, the inner container (wrap) gets repositioned again with -50%. Since the overflow is applied on the parent div, half of the content is no longer visible.
One solution might be to move overflow-y: auto; to wrap class.
Another is to choose another way to center infoCont div.
<div id="infoCont" class="extra">
<h1>Extra Information</h1>
<pre>Some URL</pre>
<p>The requested URL shown above could not be found on the server</p>
<hr>
</div>
.extra {
display: block;
position: fixed;
bottom: 10px;
max-height: 75vh;
width: 80vw;
z-index: 10;
overflow-y: auto;
margin: 0 auto; /* set margin to auto */
left: 0; /* set also left and right because position is fixed */
right: 0;
}
See working example.
Related
This question already has answers here:
What does the "~" (tilde/squiggle/twiddle) CSS selector mean?
(3 answers)
Closed 1 year ago.
I have a div that contains an iframe element that shows a video (song), and another div that shows the lyrics of that song. the div that shows the lyrics is set with display: none;. now, i want to show this div (lyrics) when the div that contains the iframe element with the video is hovered. (I'm not allowed to use Javascript, only CSS).
What i have:
karaoke.html:
<div class="main-container">
<div class="karaoke" style="top: 30px; left: 30px;">
<iframe frameborder="0" height="100px" width="180px" src="https://www.youtube.com/embed/tgbNymZ7vqY"></iframe>
</div>
<div class="lyrics-w">
<span class="lyrics">lyrics here</span>
</div>
</div>
karaoke.css:
.main-container {
position: relative;
display: block;
height: 600px;
width: 800px;
background: #00aaee;
border-radius: 15px;
margin-top: 70px;
margin-left: auto;
margin-right: auto;
margin-bottom: 70px;
}
.karaoke {
position: absolute;
display: block;
height: 140px;
width: 180px;
background: #f78a69;
cursor: pointer;
border-radius: 10px;
}
.lyrics-w {
position: absolute;
display: none;
height: calc(100% - 30px - 30px - 70px - 30px);
bottom: 30px;
background: salmon;
border-radius: 10px;
left: 50%;
transform: translateX(-50%);
width: 260px;
overflow-x: hidden;
overflow-y: auto;
}
.lyrics {
position: relative;
display: block;
padding: 20px;
line-height: 26px;
overflow: hidden;
text-overflow: ellipsis;
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
font-size: large;
color: #454545;
font-style: italic;
line-break: auto;
}
.karaoke:hover .lyrics-w {
display: block;
}
The .karaoke:hover .lyrics-w { display: block; } should make the div with the class .lyrics-w visible (with display: block;) when hovering the div with the class .karaoke, but for some reason it doesn't. I used many times this kind of code to change CSS attributes of another elements while hovering specific element, and till now it worked well, I don't understand why it doesn't work here. Maybe because .karaoke and .lyrics-w are independent objects (I mean one is not child of the other)? I don't know.
Any ideas? Thanks in advance.
Instead of using .karaoke:hover .lyrics-w { display: block; } use this
.karaoke:hover ~.lyrics-w {display: block;}
(use a ~ between them)
So your code should be like this
.main-container {
position: relative;
display: block;
height: 600px;
width: 800px;
background: #00aaee;
border-radius: 15px;
margin-top: 70px;
margin-left: auto;
margin-right: auto;
margin-bottom: 70px;
}
.karaoke {
position: absolute;
display: block;
height: 140px;
width: 180px;
background: #f78a69;
cursor: pointer;
border-radius: 10px;
}
.lyrics-w {
position: absolute;
display: none;
height: calc(100% - 30px - 30px - 70px - 30px);
bottom: 30px;
background: salmon;
border-radius: 10px;
left: 50%;
transform: translateX(-50%);
width: 260px;
overflow-x: hidden;
overflow-y: auto;
}
.lyrics {
position: relative;
display: block;
padding: 20px;
line-height: 26px;
overflow: hidden;
text-overflow: ellipsis;
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
font-size: large;
color: #454545;
font-style: italic;
line-break: auto;
}
.karaoke:hover ~.lyrics-w {display: block;}
<div class="main-container">
<div class="karaoke" style="top: 30px; left: 30px;">
<iframe frameborder="0" height="100px" width="180px" src="https://www.youtube.com/embed/tgbNymZ7vqY"></iframe>
</div>
<div class="lyrics-w">
<span class="lyrics">lyrics here</span>
</div>
</div>
For more info visit this answer
I have three divs. I want them to be in one line so I used inline-block. When I resize the window the third element (nav) stacks and then the 2nd element (searchBar). I want the 2nd element stacks first and then the 3rd one. For undoing, the 3rd element and then the 2nd element.
body {
margin: 0px;
padding: 0px;
}
header {
width: 100%;
min-eight: 48px;
position: fixed;
background: #ffffff;
padding-bottom: 5px;
border-bottom: 2px solid #fed700;
}
nav {
width: 489.7px;
height: 18px;
background: red;
display: inline-block;
}
#searchBar {
width: 330px;
height: 16px;
background: blue;
display: inline-block;
white-space: nowrap;
}
#logo {
width: 220px;
height: 32px;
background: green;
display: inline-block;
}
<header>
<div id=logo>logo
</div>
<div id=searchBar>searchBar
</div>
<nav>nav
</nav>
</header>
You could use an inline-block wrapper with a min-width, wrapping the nav and searchBar. That would give the result you wanted in with the code sample supplied, but might cause problems in the real world, depending on your requirements.
body {
margin: 0px;
padding: 0px;
}
header {
width: 100%;
min-height: 48px;
position: fixed;
background: #ffffff;
padding-bottom: 5px;
border-bottom: 2px solid #fed700;
}
.wrapper {
min-width: 50%;
display: inline-block;
}
nav {
width: 489.7px;
height: 18px;
background: red;
display: inline-block;
}
#searchBar {
width: 330px;
height: 16px;
background: blue;
display: inline-block;
white-space: nowrap;
}
#logo {
width: 220px;
height: 32px;
background: green;
display: inline-block;
}
<header>
<div id=logo>logo
</div>
<div class="wrapper">
<div id=searchBar>searchBar
</div>
<nav>nav
</nav>
</div>
</header>
I have a div where I inputted a picture and I "Position: absolute" another div that when clicked will bring you down to the bottom of the page. But when you zoom out, it stays in place but, when you zoom out it moves down and out of the picture div. I am asking, how do i keep my content centered and in position when zooming in and out of your browser. I searched all over stack and other websites but can't find a solution.
HTML
#pic-div {
width: 100%;
height: 700px;
margin: 0 auto;
overflow: hidden;
}
#pic-button {
width: 100px;
height: 100px;
margin: 0 auto;
}
#down-button {
max-width: 200px;
max-height: 200px;
background-color: black;
border-style: none;
color: white;
font-family: 'Coiny', cursive;
position: absolute;
cursor: pointer;
margin: 0 auto;
margin-top: 500px;
}
#down-button:hover {
background-color: grey;
}
<div id="pic-div">
<div id="welcome-pic"> <img id="pic-welcome" src="luxpics/logobar.jpg">
<div id="pic-button">
<button id="down-button">LET'S START</button>
</div>
</div>
</div
Try this
#down-button {
max-width: 200px;
max-height: 200px;
background-color: black;
border-style: none;
color: white;
font-family: 'Coiny', cursive;
position: absolute;
cursor: pointer;
margin: 0 auto;
bottom: 25px;
//margin-top: 500px;
}
Can you try using position: fixed instead of using absolute?
I am trying to make a file hierarchy in html/css and I can't get these labels or the divs they are in to expand to full width. They only expand to the width of the visible area but I want the width of what they are in. Here is the fiddle to see what I am talking about. The grey area needs to all line up on the right.
a = 3;
html,
body {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
}
div.hierarchy {
position: relative;
overflow: auto;
border-right: 1px solid grey;
width: 150px;
left: 0;
top: 0;
bottom: 0;
height: 100%;
}
div.hierarchy label {
display: block;
min-width: 100%;
background: #eee;
white-space: nowrap;
}
div.directory {
padding-left: 20px;
width: 100%;
}
div.directory label {
border: 1px solid grey;
width: 100%;
cursor: pointer;
}
<div class="hierarchy">
<label>Hierarchy</label>
<div class="directory">
<label>src</label>
<div class="directory">
<div class="file"><label>test.txt</label></div>
<div class="file"><label>readme.txt</label></div>
<div class="file"><label>a really long filename.txt</label></div>
</div>
</div>
</div>
You need to change your div.directory CSS class as follows:
div.directory {
display:inline-block;
padding-left: 20px;
}
I made the following changes:
1) Added display:inline-block;
2) Removed the width:100%; rule.
Here is an example:
http://jsfiddle.net/nnd7jyj1/
(As a side note, it's generally bad practice in CSS to apply both a width and either a padding or margin rule to the same element. The reason for this is that some browsers interpret the width to include the padding/margin and some don't, which leads to inconsistent results)
Simply add display:inline-block; to div.directory
html,
body {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
}
div.hierarchy {
position: relative;
overflow: auto;
border-right: 1px solid grey;
width: 150px;
left: 0;
top: 0;
bottom: 0;
height: 100%;
}
div.hierarchy label {
display: block;
min-width: 100%;
background: #eee;
white-space: nowrap;
}
div.directory {
padding-left: 20px;
/* width: 100%; */
/* added */
display: inline-block;
}
div.directory label {
border: 1px solid grey;
width: 100%;
cursor: pointer;
}
<div class="hierarchy">
<label>Hierarchy</label>
<div class="directory">
<label>src</label>
<div class="directory">
<div class="file">
<label>test.txt</label>
</div>
<div class="file">
<label>readme.txt</label>
</div>
<div class="file">
<label>a really long filename.txt</label>
</div>
</div>
</div>
</div>
I need to present a header menu with 3 elements:
one is left aligned
one is centered
one is right aligned
I would like a gray background for this menu.
The problem: if I have links in my left or right elements and it is not clickable because of the centered element.
How to prevent this problem? or another way of having this kind of menu?
Any idea is highly appreciated.
jsFiddle: http://jsfiddle.net/sxmf0Lve/
<div class="headerContainer">
<div class="headerLeft">
Left
</div>
<div class="headerTitle">Middle</div>
<div class="headerRight">
Right
</div>
</div>
.headerContainer {
padding-top: 10px;
padding-left: 0px;
padding-right: 5px;
max-width: 100%;
height: 30px;
background-color: #fcfcfc;
border-bottom: 1px solid #f6f6f6;
}
.headerTitle {
position: absolute;
/* z-index: -1; */
top: 10px;
width: 100%;
margin: auto;
text-align: center;
font-size: x-large;
font-weight: bold;
}
.headerLeft {
float: left;
}
.headerRight {
float: right;
}
Updated fiddle: http://jsfiddle.net/7mo7hyza/
Your z-index idea is good, but you didn't perform it well: z-index only works between elements that are both not in the normal workflow of the document (they have position: absolute/relative/..)
So you simply have to position your left/right containers with position: absolute instead of float, and make the big container relative so that you can position the other containers relatively to that one.
.headerContainer {
position: relative;
} .headerTitle {
z-index: 0;
} .headerLeft {
position: absolute;
left: 0;
z-index: 1;
} .headerRight {
position: absolute;
right: 0;
z-index: 1;
}
Make the left and right position relative and give them a higher z-index.
.headerContainer {
padding-top: 10px;
padding-left: 0px;
padding-right: 5px;
max-width: 100%;
height: 30px;
background-color: #fcfcfc;
border-bottom: 1px solid #f6f6f6;
}
.headerTitle {
position: absolute;
/* z-index: -1; */
top: 10px;
width: 100%;
margin: auto;
text-align: center;
font-size: x-large;
font-weight: bold;
}
.headerLeft,
.headerRight {
position: relative;
z-index: 2;
}
.headerLeft {
float: left;
}
.headerRight {
float: right;
}
<div class="headerContainer">
<div class="headerLeft">
Left
</div>
<div class="headerTitle">Middle</div>
<div class="headerRight">
Right
</div>
</div>
Try to avoid using float-ing elements or messing with the z-index. There are two more appropriate methods for what you're trying to achieve:
Method 1: CSS box model
.headerContainer {
padding-top: 10px;
padding-left: 0px;
padding-right: 5px;
max-width: 100%;
height: 30px;
background-color: #fcfcfc;
border-bottom: 1px solid #f6f6f6;
display: flex;
flex-wrap: nowrap;
}
.headerLeft,
.headerTitle,
.headerRight {
display: inline-block;
}
.headerLeft,a
.headerRight {
flex-grow: 0;
}
.headerTitle {
flex-grow: 1;
text-align: center;
font-size: x-large;
font-weight: bold;
}
<div class="headerContainer">
<div class="headerLeft">
Left
</div>
<div class="headerTitle">Middle</div>
<div class="headerRight">
Right
</div>
</div>
See JsFiddle
Method 2: Table layout
.row {
display: table-row;
width: 100%;
background-color: #eee;
}
.cell {
display: table-cell;
}
.middle {
width: 100%;
text-align: center;
}
<div class="headerContainer row">
<div class="cell">
Left
</div>
<div class="cell middle">
<h1>Middle</h1>
</div>
<div class="cell">
Right
</div>
</div>
See JsFiddle