I'm leaving the first post. I'd be happy if you help my code.
I'm making my homepage layout, But I was in trouble.
I want disable scrollbar of Main Contents Section when Navigation Drawer button is clicked.
I tried to #drawer-toggle:checked~html{overflow:hidden} but it's not working.
If you have any other way, please teach me.
body,html{
margin:0 auto;
height:100%
}
footer{
height:40px;
line-height:40px;
text-align:center
}
footer,header{
background:#ccc;
display:table-row
}
header{
background:#000;
color:#fff;
height:50px;
line-height:50px;
padding-left:50px;
position:fixed;
top:0;
width:100%;
z-index:7
}
main{
background:#eee
}
#container{
margin-top:50px
}
#drawer{
background:#fff;
height:100%;
left:-300px;
overflow-x:hidden;
padding:10px;
top:0;
width:85%;
max-width:250px;
z-index:9
}
#drawer,#drawer-toggle-label{
position:fixed
}
#drawer-toggle{
display:none
}
#drawer-toggle:checked~#drawer{
left:0;
top:0
}
#drawer-toggle:checked~#drawer-toggle-label{
background:rgba(0,0,0,.54);
height:100%;
width:100%
}
#drawer-toggle-label{
background:rgba(0,0,0,0);
height:50px;
left:0;
top:0;
width:50px;
z-index:8
}
#drawer-toggle-label:active{
background:#5c6bc0
}
#drawer-toggle-label:before{
background:#fff;
box-shadow:0 5px 0 #fff,0 10px 0 #fff;
content:'';
height:2px;
left:16px;
position:absolute;
top:19px;
width:18px
}
#wrapper{
display:table;
width:100%;
height:100%
}
<body>
<div id=wrapper>
<header>Header</header>
<div id=container>
<input type=checkbox id=drawer-toggle>
<label for=drawer-toggle id=drawer-toggle-label></label>
<nav id=drawer>
Drawer
<ul><li>Menu
<li>Menu
<li>Menu
</ul>
</nav>
<main>
<center>
<table style=height:1000px;width:640px;background:#fff>
<tr><td style=vertical-align:top>Main Contents
</table>
</center>
</main>
</div>
<footer>Footer</footer>
</div>
</body>
You're hoping to achieve something with CSS that is called the parent selector which isn't available, you cannot select a parent element of the clicked element in pure CSS. Your ~ selector only selects siblings (elements with the same parent) in the code. Besides this, your code has some lacking apostrophes and unclosed tags. I've updated your code, and added a JavaScript solution on the go.
var element = document.getElementById('drawer-toggle');
element.addEventListener('click', function(e) {
document.getElementsByTagName('body')[0].classList.toggle('hide-scroll');
})
body, html {
margin:0 auto;
height:100%;
}
footer {
height:40px;
line-height:40px;
text-align:center
}
footer, header {
background:#ccc;
display:table-row
}
header {
background:#000;
color:#fff;
height:50px;
line-height:50px;
padding-left:50px;
position:fixed;
top:0;
width:100%;
z-index:7
}
main {
background:#eee
}
#container {
margin-top:50px
}
#drawer {
background:#fff;
height:100%;
left:-300px;
overflow-x:hidden;
padding:10px;
top:0;
width:85%;
max-width:250px;
z-index:9
}
#drawer, #drawer-toggle-label {
position:fixed
}
#drawer-toggle {
display:none
}
#drawer-toggle:checked~#drawer {
left:0;
top:0
}
#drawer-toggle:checked~#drawer-toggle-label {
background:rgba(0,0,0,.54);
height:100%;
width:100%
}
#drawer-toggle-label {
background:rgba(0,0,0,0);
height:50px;
left:0;
top:0;
width:50px;
z-index:8
}
#drawer-toggle-label:active {
background:#5c6bc0
}
#drawer-toggle-label:before {
background:#fff;
box-shadow:0 5px 0 #fff,0 10px 0 #fff;
content:'';
height:2px;
left:16px;
position: absolute;
top:19px;
width:18px
}
#wrapper {
display:table;
width:100%;
height:100%
}
.hide-scroll {
overflow: hidden;
}
<div id="wrapper">
<header>Header</header>
<div id="container">
<input type="checkbox" id="drawer-toggle">
<label for="drawer-toggle" id="drawer-toggle-label"></label>
<nav id="drawer">
Drawer
<ul>
<li>Menu</li>
<li>Menu</li>
<li>Menu</li>
</ul>
</nav>
<main>
<center>
<table style="height:1000px;width:640px;background:#fff">
<tr><td style="vertical-align:top">Main Contents
</table>
</center>
</main>
</div>
<footer>Footer</footer>
</div>
When clicking the label, we toggle a class on the body which disables the overflow, thus disabling scrolling.
Related
I have a relative positioned header and when the user scrolls down the page, I want to shift to a fixed header. This is working fine except that the header ends up covering the element the user had scrolled to. Is it possible to prevent this so that the gap between the header and the element remains the same for a seamless transition?
$(function() {
var hh = $('header').outerHeight();
$(window).scroll(function() {
var scroll = $(window).scrollTop();
var last = 0;
if (scroll >= hh) {
$('body').addClass('sticky');
} else {
$('body').removeClass('sticky');
}
last = scroll;
});
});
body,html {
margin:0;
}
.site-container {
position:relative;
width:90%;
height:1500px;
margin:0 auto;
background:gray;
}
img {
width:100%;
}
header {
display:flex;
flex-direction:column;
width:100%;
background:white;
}
body.sticky header {
position:fixed;
width:inherit;
}
.top-bar {
background:purple;
color:white;
padding:3px 0;
text-align:right;
}
ul {
margin:0;
padding-left:10px;
list-style-type:none;
}
li {
display:inline-block;
margin-left:10px;
line-height:30px;
}
li:first-child {
margin-left:0;
}
.site-content {
padding:50px 30px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="site-container">
<header>
<div class="top-bar">(555) 555-5555</div>
<nav>
<ul>
<li>Home</li>
<li>Lorem</li>
<li>Ipsum</li>
</ul>
</nav>
</header>
<div class="site-content">
<img src="https://via.placeholder.com/800x400/0000FF/808080" />
</div>
</div>
There is a simpler solution using css only, without jQuery needed.
Try css property "position: sticky" - https://developer.mozilla.org/en-US/docs/Web/CSS/position
body,html {
margin:0;
}
.site-container {
position:relative;
width:90%;
height:1500px;
margin:0 auto;
background:gray;
}
img {
width:100%;
}
header {
display:flex;
flex-direction:column;
width:100%;
background:white;
position: sticky;
top: 0;
}
.top-bar {
background:purple;
color:white;
padding:3px 0;
text-align:right;
}
ul {
margin:0;
padding-left:10px;
list-style-type:none;
}
li {
display:inline-block;
margin-left:10px;
line-height:30px;
}
li:first-child {
margin-left:0;
}
.site-content {
padding:50px 30px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="site-container">
<header>
<div class="top-bar">(555) 555-5555</div>
<nav>
<ul>
<li>Home</li>
<li>Lorem</li>
<li>Ipsum</li>
</ul>
</nav>
</header>
<div class="site-content">
<img src="https://via.placeholder.com/800x400/0000FF/808080" />
</div>
</div>
I'm trying to split my container in multiple square box with different dimensions. I used jsfiddle to show you my project:
http://jsfiddle.net/y0j55ooL/
#import url(http://fonts.googleapis.com/css?family=Roboto);
#menu {
text-align:center;
}
#menu li {
display: inline;
}
#menu ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 100%;
}
#menu a{
padding:0 30px;
color: #C0C0C0;
font-family: 'Roboto', sans-serif;
}
body {
background-color: #454343;
text-align: center;
}
#container {
margin:1% auto;
border: 0.1em solid;
}
#footer{
position: absolute;
bottom: 0;
left: 0;
width:100%;
background-color:#333;
height:3em;
line-height:3em;
text-align:left;
}
This is the index.html page:
<!DOCTYPE html>
<html>
<head>
<style>
#import url(main.css);
</style>
</head>
<body>
<div id="menu">
<ul>
<li>Il mio PC</li>
<li>prova</li>
</ul>
</div>
<div id="container">
ciao
</div>
<div id="footer">
prova
</div>
</body>
Now I'd like to split container like this image:
http://thumbs.dreamstime.com/z/cool-new-web-template-large-icons-28075027.jpg
I'd like to create inside container a rounded square box much bigger than others. On the right and on the bottom of this big square I would some little square box.
I tried table and table-cell with display attribute but my result wasn't acceptable. I must use only css and html.
Thanks.
Use positioning. I've just shown you a quick demo below of how this could be done:
html,body{margin:0;padding:0;}
.wrapper{
width:100%;
height:600px;
background:gray;
position:relative;
}
.bigImg{
height:45%;
width:55%;
background:url(http://placekitten.com/g/300/300);
position:absolute;
top:10%;
left:15%;
}
div{
display:inline-block;
height:20%;
width:25%;
position:absolute;
}
.one{
background:red;
left:75%;
top:10%;
}
.two{
background:blue;
left:75%;
top:35%;
}
.three{
background:green;
left:15%;
top:60%;
}
.four{
background:orange;
left:45%;
top:60%;
}
.five{
background:yellow;
left:75%;
top:60%;
}
<div class="wrapper">
<div class="bigImg"></div>
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
<div class="four"></div>
<div class="five"></div>
</div>
I have a certain Header with my Logo and title. Just to the right of the Title Mobility group I want to create a nav bar that touches the bottom of the header with different tabs all the way to the right of the header. Messing around I was able to create something, but I can't seem to position it correctly.
http://jsfiddle.net/jHJK2/
http://jsfiddle.net/jHJK2/embedded/result/
I just can't figure out how to add this navigation bar to my header div.
HTML code:
<div id="page">
<div id="header">
<a href="http://wireless.fm.intel.com/test/index.php">
<img src="http://wireless.fm.intel.com/test/logo2.png" border=0 >
</a>
<h2><a href="http://moss.ger.ith.intel.com/sites/MWG-IS/Pages/Default.aspx" border=0>Mobility Group</a></h2>
<div id="navigation">
About
Reports
Documents
Checklists
License Tools
Presentations
Software Releases
</div>
</div>
<div id="main"></div>
<div id="footer"></div>
</div>
CSS Code:
html, body {
padding:0;
margin:0;
height:100%;
}
#page {
min-height:100%;
position:relative;
height:100%;
}
#header {
background-color:#115EA2;
height:100px;
width:97.5;
}
#main {
width:1300px;
margin-left:auto;
margin-right:auto;
background-color:#F1F2F3;
min-height:90%;
height:auto;
height:89%;
margin:0 auto -50px;
vertical-align:bottom;
}
#footer {
position:fixed;
width:100%;
bottom:0;
height:35px;
background-color: #115EA2;
}
#header img {
float:left;
display:inline;
}
#header h2 {
text-align:center;
font-size:44px;
color:#FFFFFF;
left:0px;
top:20px;
font-weight:bold;
font-family: Sans-serif;
float:left;
margin-top:20px;
margin-left:20px;
text-decoration:none;
}
#header h2, a, a:visited, a:hover, a:active {
color: #FFFFFF;
text-decoration: none;
}
Navigation Bar Code:
#navigation {
position:relative;
top:0;
left:0;
right:0;
bottom:0;
width:70%;
background-color:gray;
color:green;
height:35px;
text-align:center;
padding-top:15px;
}
#navigation a {
font-size:14px;
padding-left:15px;
padding-right:15px;
color:black;
text-decoration:none;
}
#navigation a:hover {
color:blue;
}
Update
Just wanted to say Thank you all for your help.
Adapting your current method to a more html5 approach, you can use header and nav tags do better markup your document. Absolute positioning also gives you better control over your elements. You would set the header to a relative position, and the nav to absolute, and offset it by the height of your header.
nav {
position: absolute;
top: 100px;
left: 0;
right: 0;
bottom: 0;
min-width: 800px;
text-align: left;
height: 20px;
padding: 10px 20px;
}
Here is your updated fiddle
And here is an update with the nav to the right, a bit messy though:
http://jsfiddle.net/jHJK2/5/
Not 100% sure if this is how you want it since your request wasn't very clear, but here's what I made.
http://jsfiddle.net/jHJK2/2/
Changes:
HTML:
<div id="header">
<div id="navigation"> //moved this before the other elements
About
Reports
Documents
Checklists
License Tools
Presentations
Software Releases
</div>
<a href="http://wireless.fm.intel.com/test/index.php">
<img src="http://wireless.fm.intel.com/test/logo2.png" border=0>
</a>
<h2><a href="http://moss.ger.ith.intel.com/sites/MWG-IS/Pages/Default.aspx" border=0>Mobility Group</a></h2>
</div>
CSS:
#navigation {
width:100%;
background-color:gray;
color:green;
height:35px;
text-align:center;
padding-top:15px;
}
#navigation a {
font-size:14px;
padding-left:15px;
padding-right:15px;
color:black;
text-decoration:none;
}
#navigation a:hover {
color:blue;
}
Make the following CSS changes:
Demo in jsFiddle
#header {
background-color:#115EA2;
height:100px;
width:97.5;
position: relative;
}
#navigation {
position:absolute;
/* top:0;
left:0;*/
right:0;
bottom:0;
width:70%;
background-color:gray;
color:green;
height:35px;
text-align:center;
padding-top:15px;
}
im just trying to do a normal Navigation but i seem to fail at it since i haven't done something like that in a long time. So here is what i got:
<div id="Top">
<div id="Navi">
<div class="Link">
link1
</div>
<div class="Link">
link2
</div>
</div>
</div>
and:
#Top {
width:100%;
min-height:100px;
height:15%;
max-height:200px;
background-color:#C6E466;
border-bottom-width:2px;
border-bottom-style:solid;
border-bottom-color:#4E6011;
position:relative;
}
#Navi {
width:100%;
position:absolute;
top:-1px;
left:-5px;
}
.Link {
height:20px;
margin-left:10px;
min-width:150px;
width:10%;
max-width:200px;
float:left;
background-color:#121212;
color:white;
text-decoration:none;
}
I just want to have:
- a complete header at the Top, which is #Top, convering the whole area at the top from left to right (width:100%).
- In the #Top header i want to display some Links done via #Navi. However i want to display #Navi in the bottom right corner of #Top. So i figured i would do #Top to position relative and #Navi position:absolute, but it doesnt work.
- Then i wanted the link color to be white, but somehow it doesnt work - why?
- Why do i need to use which i think is not cool? Without using the complete #Navi div wouldn't show up!
Thanks a lot!
try giving #Navi
bottom:0px and right:0px;
#Top {
width:100%;
min-height:100px;
height:15%;
max-height:200px;
background-color:#C6E466;
border-bottom-width:2px;
border-bottom-style:solid;
border-bottom-color:#4E6011;
position:relative;
}
#Navi {
width:100%;
position:absolute;
bottom: 0px;
}
.Link {
height:20px;
margin-left:10px;
min-width:150px;
width:10%;
max-width:200px;
background-color:#121212;
color:white;
text-decoration:none;
float: right;
}
not sure what are you trying, but here is a link: http://jsfiddle.net/4JdmH/
<div id="Top">
<div id="Navi">
<div class="Link">
link1
</div>
<div class="Link">
link2
</div>
<div class="clr"></div>
</div>
</div>
#Top {
width:100%;
min-height:100px;
height:15%;
max-height:200px;
background-color:#C6E466;
border-bottom: 2px solid #4E6011;
position:relative;
}
#Navi {
position:absolute;
bottom:0px;
right:0px;
}
.Link {
height:20px;
margin-left:10px;
min-width:150px;
width:10%;
max-width:200px;
float:left;
background-color:#121212;
color:white;
text-decoration:none;
}
.clr {
clear: both;
}
I was trying to align a div to the center inside of another div. I searched, and all answers say to put "margin:auto;" or "margin: 0px auto;". I tried both, and neither will work.
My CSS is:
#slider div
{
margin:0px auto;
width:620px;
}
EDIT: I've tried all that has been suggested so for, no change for anything.
Could it be that #slider is Jquery???
As requested, here is the entire pages code:
<html>
<head>
<script type="text/javascript" src="C:\Users\Pam\Desktop\jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="C:\Users\Pam\Desktop\easyslider1.7\js\easyslider1.7.js"></script>
<style type="text/css">
body
{
margin-top:0px;
margin-bottom:0px;
margin-left:0px;
margin-right:0px;
background-image:url('./bg.jpg');
}
#headerCon
{
display:block;
background-color:#151515;
width:100%;
height:40px;
padding-left:auto;
padding-right:auto;
position:fixed;
}
#header
{
width:950px;
height:100%;
margin-right:auto;
margin-left:auto;
}
#menu
{
margin-left:10%;
}
#title
{
background-image:url('./title.png');
background-repeat:no-repeat;
display:block;
height:123px;
margin:0px auto;
text-align:center;
}
#container
{
text-align:center;
display:block;
width:850px;
margin-right:auto;
margin-left:auto;
height:100%;
/* background-color:#dfdfdf; */
max-padding:100%;
position:relative;
}
a.link
{
text-decoration:none;
font-weight:bold;
font-family:Arial,Helvetica,sans-serif;
display:block;
width:100px;
height:30px;
border-right:1px solid #000000;
float:left;
color:#00af64;
padding-left:0px;
padding-top:10px;
text-align:center;
}
a.link:hover
{
text-decoration:none;
font-weight:bold;
font-family:Arial,Helvetica,sans-serif;
display:block;
width:100px;
height:30px;
border-right:1px solid #000000;
float:left;
color:#00af64;
padding-left:0px;
padding-top:10px;
text-align:center;
background-color:#252525;
}
p
{
color:#fff;
font-family:Arial,Helvetica,sans-serif;
}
#button1
{
margin-left:34%;
}
/* EASY SLIDER */
#slider div
{
position: absolute;
top: 50%;
left: 50%;
margin-top:2px;
margin-left:2px;
width:620px;
}
#sliderContain
{
position:absolute;
margin-left:3px;
margin-top:3px;
}
#slider ul, #slider li{
margin:0;
padding:0;
list-style:none;
}
#slider, #slider li{
width:620px;
height:230px;
overflow:hidden;
}
#transBorder
{
background-color:#111111;
opacity:0.60;
filter:alpha(opacity=60); /* For IE8 and earlier */
display:block;
height:236px;
width:626;
position:absolute;
z-index:-1;
float:up;
}
#slider1prev
{
display:none;
}
#slider1next
{
display:none;
}
</style>
</head>
<body>
<div id="headerCon">
<div id="header">
<div id="menu">
Home
Monsters
Areas
Trades
Classes
</div>
</div>
</div>
<div>
<br />
<br />
</div>
<div id="container">
<div id="title"> </div>
<div id="sliderContain">
<div id="slider">
<ul>
<li><img src="./reddragon.png"/></li>
<li><img src="./swamp.png"/></li>
<li><img src="./town.png"/></li>
</ul>
</div>
</div>
<div id="transBorder">
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$("#slider").easySlider({
auto: true,
continuous: true,
nextId: "slider1next",
prevId: "slider1prev"
});
});
</script>
</body>
</html>
It would be easier to see what's up if you posted the whole code.
Anyway use this css for child div:
position: relative;
margin: 0 auto;
And this css for the parent one:
text-align:center;
margin: 0 auto;
And tell me if it works or not.
You can use absolute positioning​
#one {
background: red;
position: relative;
}
#two {
width: 300px;
height: 150px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -75px; /* negative half of height */
margin-left: -150px; /* negative half of width */
background: blue;
} ​
http://jsfiddle.net/3kj6A/
You can try this:
#slider div
{
position: absolute;
left: 50%;
margin-left:-310px;
width:620px;
}
If that does not work, you can do the same as above, just change the margin-left to:
margin-left:-25%;
Hope that helps.
jQuery stuff can be aligned with CSS, if "#slider div" is still not aligned, you should check the other elements in the CSS, they could be affecting #slider.
Or your problem might be that the code should be:
#slider {
code in here
}
You do not need to state that the element is a div. "#slider div" refers to the div in the slider(child div), not the slider it self(parent div). Correct me if I had misunderstood.