div property width not maximum/Collapse Expand - javascript

I have two questions please.
1 - I have div called id="rightcolumn" in the right side padding: 10px;
Inside the div id="rightcolumn" I have anther div called rightcolumn_s.
This div id = rightcolumn_s not open to max-width:100%;.why?
2 - In the div id="rightcolumn" I have Collapse/Expand this Collapse Expand have points.
The points are on the left side after the item_1,item_2,item_3. I need the points
Before the words item_1,item_2,item_3 in the right side.
Thanks for any help.....
The website
css code:
a { color:blue; }
#content { background-color:#dddddd; width:200px; margin-top:2px; }
html{
height:0px;
text-align: right;
width:1280;
height:1024px;
}
body {
background-image:url('http://www.centerwow.com/linkguide/guide_files/pic/bacround_body.png');
background-repeat:repeat;
overflow:hidden;
font-family:Palatino Linotype;
font-family: Arial;
font-size: 12px;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
height:600px;
}
.insidWindow {
background-image:url('http://www.centerwow.com/linkguide/guide_files/pic/bacround_inside_window.png');
background-repeat:repeat;
border-color: #316897;
border-radius: 4px 4px 4px 4px;
border-style: solid;
border-width: 1px 1px 1px 1px;
margin: 0px auto 10px auto;
padding: 10px;
position: relative;
top:-515px;
width:52.5%;
}
h2 {
color: #443333;
font-size: 14px;
line-height: 7px;
margin: 0px 5px 0px 5px;
padding: 5px;
color: white;
}
.lineAzure{
background-image:url('http://www.centerwow.com/linkguide/guide_files/pic/bacround_line.png');
background-repeat:repeat;
line-height: 7px;
margin: 0px 0px 0px 0px;
height:15px;
}
#lineAzurebotom {
background: none repeat scroll 0 0 #880000;
line-height: 11px;
margin: 0;
position: relative;
top: -516px;
}
#leftcolumn_s {
background-image:url('http://www.centerwow.com/linkguide/guide_files/pic/bacround_line.png');
background-repeat:repeat;
border-color: #316897;
border-radius: 4px 4px 4px 4px;
border-style: solid;
border-width: 1px 1px 1px 1px;
height: 115px;
margin: 0 auto 0 auto;
padding: 10px;
position: relative;
top: 360px;
width: 88%;
}
#rightcolumn_s{
background-image:url('http://www.centerwow.com/linkguide/guide_files/pic/bacround_line.png');
background-repeat:repeat;
border-color: #316897;
border-radius: 4px 4px 4px 4px;
border-style: solid;
border-width: 1px 1px 1px 1px;
height: 115px;
max-width:100%;
margin: 0px;
padding: 10px;
position:absolute; /* absolute position (so we can position it where we want)*/
bottom:0px; /* position will be on bottom */
}
#chatRead {
background-image:url('http://www.centerwow.com/linkguide/guide_files/pic/bacround_dark.png');
background-repeat:repeat;
border-color: #316897;
border-radius: 4px 4px 4px 4px;
border-style: solid;
border-width: 1px 1px 1px 1px;
line-height: 90px;
margin: 0 auto;
position: relative;
top: -520px;
width: 55%;
}
#chatWrite {
background-image:url('http://www.centerwow.com/linkguide/guide_files/pic/bacround_line.png');
background-repeat:repeat;
border-color: #316897;
border-radius: 4px 4px 4px 4px;
border-style: solid;
border-width: 1px 1px 1px 1px;
line-height: 25px;
margin: 0 auto;
position: relative;
top: -520px;
width: 55%;
}
#lineYelow{
background-image:url('http://www.centerwow.com/linkguide/guide_files/pic/bacround_lineYellow.png');
background-repeat:repeat;
border-color: #316897;
border-radius: 4px 4px 4px 4px;
border-style: solid;
border-width: 1px 1px 1px 1px;
line-height: 7px;
height:15%;
color: #745B1B;
font-family: 'CarterOneRegular';
font-size: 16px;
line-height: 34px;
margin: 0;
padding: 0;
text-shadow: 1px 1px 0 #FFF0D8;
width: auto;
}
#wrapMein{
background-image:url('http://www.centerwow.com/linkguide/guide_files/pic/bacround_wrapMein.png');
background-repeat:repeat;
border-color: #316897;
border-radius: 4px 4px 4px 4px;
border-style: solid;
border-width: 1px 1px 1px 1px;
overflow:hidden;
margin: 0px 5px 20px 5px;
padding: 0px 0px 0px 0px;
position: relative;
height:540px;
}
.column {
background-image:url('http://www.centerwow.com/linkguide/guide_files/pic/bacround_lineYellow.png');
background-repeat:repeat;
border-color: #316897;
border-radius: 4px 4px 4px 4px;
border-style: solid;
border-width: 1px 1px 1px 1px;
height: 505px;
margin: 5px;
padding: 0 5px;
position: relative;
top: -15px;
width: 20%;
}
.rcolumn{
background-image:url('http://www.centerwow.com/linkguide/guide_files/pic/bacround_lineYellow.png');
background-repeat:repeat;
border-color: #316897;
border-radius: 4px 4px 4px 4px;
border-style: solid;
border-width: 1px 1px 1px 1px;
margin: 0px 0px 0px 0px;
padding: 10px;
position: relative;
width:20%;
height:495px;
position:relative;
top:-528px;
float:right;
color: red;
}
.ui-wrapper {
border: 2px solid #70A029;
}
.ui-resizable {
position: relative;
}
.ui-resizable-e {
background: url("../pic/resizable-e.gif") repeat scroll right center transparent;
cursor: e-resize;
height: 100%;
right: 0;
top: 0;
width: 6px;
}
.ui-resizable-handle {
display: none;
font-size: 0.1px;
position: absolute;
}
.ui-resizable-s {
background: url("../pic/resizable-s.gif") repeat scroll center top transparent;
bottom: 0;
cursor: s-resize;
height: 6px;
left: 0;
width: 100%;
}
.ui-resizable-se {
background: url("../pic/resizable-se.gif") repeat scroll 0 0 transparent;
bottom: 0;
cursor: se-resize;
height: 9px;
right: 0;
width: 9px;
}
.maintitle1 {
background: center top #2C6987 repeat-x scroll ;
border-color: #316897;
border-radius: 4px 4px 4px 4px;
border-style: solid;
border-width: 1px 1px 1px 1px;
box-shadow: 0 1px 0 #528CBC inset;
color: #FFFFFF;
font-size: 16px;
font-weight: 300;
padding: 6px 10px 6px 10px;
}
#logo{
border-color: #316897;
border-radius: 4px 4px 4px 4px;
border-style: solid;
border-width: 1px 1px 1px 1px;
position:fixed;
top:34px;
left:0px;
height: 9.6%;
}
.resolution span {
color: #2B8E00;
display: block;
font-size: 55px;
text-transform: lowercase;
}
HTML code:
<body >
<img id="logo" src="http://www.centerwow.com/linkguide/guide_files/pic/Notebook.png" alt="Link Guide" />
<h2>this is body background.</h2>
<div class="lineAzure">this is div class lineAzure </div>
<div id="lineYelow">this is div id LineYelow</div>
<div id="wrapMein">
<div class="lineAzure" style="margin: 0px 22.6% 0px 22.6%;" "width:52.5%"="">this
div
classlineAzurespnbsp;| | | | | |</div>
<div id="leftcolumn" class="column">here is div id = leftcolumn
<div id="leftcolumn_s">here is div id = leftcolumn_s</div>
</div>
<div id="rightcolumn" class="rcolumn">div id="rightcolumn"
<div class="floatRight"><H3 class="maintitle1">articals</H3></div>
<ul>
<li>
Item 1
<ul id="node1" style="display:none">
<li>Sub-item 1</li>
<li>
Sub-item 2
<ul id="node2" style="display:none">
<li>Sub-sub-item 1</li>
<li>Sub-sub-item 2</li>
</ul>
</li>
<li>Sub-item 3</li>
</ul>
</li>
<li>
Item 2
<ul id="node3" style="display:none">
<li>Sub-item 1</li>
<li>Sub-item 2</li>
</ul>
</li>
<li>Item 3</li>
</ul>
<div id="rightcolumn_s">here is div id = rightcolumn_s</div>
</div>
<div class="insidWindow">insidWindow
<div id="windowResize" class="ui-wrapper" style="height: 340px; width: 350px;">
<div style="position: absolute; top: 20px; left: 20px; ">
Resize me<br>
Please try to resizeme:<br> www www www.
<div class="resolution">
You are using
<span id="resolutionNumber"></span>
</div>
</div>
</div><br>
</div><!--insidWindow-->
<div id="chatRead">here is div id = chatread</div>
<div id="chatWrite">here is div id = chatWrite</div>
<div id="lineAzurebotom">here is div id = lineAzurebotom</div>
</div><!--wrapMein-->
</body></html>

1) This div id = rightcolumn_s not open to max-width:100%;
In order for the max-width property to work, you also need to set width for the element.
max-width: 100%;
width: 100%;
2) I need the points Before the words item_1,item_2,item_3 in the right side.
Define float: right; to the ul and this will put the points on the right as well.
<ul style="float: right;">

Related

How can I solve the problem of my quiz project?

I've been working on this project for a while. I found the code from the Internet. I have never created a quiz game before. I edited the code a little. But unfortunately there are some problems with the code, which are difficult for me.
So far only digits are represented as questions. I want letters to be used for questions as well. The button to run the game, the limited reflection time and the score works. Unfortunately, if you press the right answer, the spear doesn't go on, but stops, but you get a point. I want that after a correct answer new questions are added and that the user gets a point. If the user presses the wrong answer, I want the game to stop and the scores achieved to be displayed.
let playing=false;
let score=0;
let action;
let timeremain;
document.getElementById('start').onclick=function(){
if(playing===true)
{
location.reload();
}
else
{
playing=true;
document.getElementById('scoreValue').innerHTML = score ;
document.getElementById('time').style.display="block";
timeremain=60;
genQA();
document.getElementById('start').innerHTML="Reset Game";
startCount();
}
}
function startCount()
{
action = setInterval(function(){
timeremain -=1;
document.getElementById('timeremain').innerHTML = timeremain;
if(timeremain===0)
{
document.getElementById('time').style.display="none";
gameOver();
}
},1000);
}
function gameOver()
{
document.getElementById('gameover').style.display="block";
document.getElementById('scoreno').innerHTML=score;
}
function genQA() {
var x=Math.round(10*Math.random());
var y=Math.round(10*Math.random());
correctAnswer= x*y;
document.getElementById('qtn').textContent=x +' x '+y;
var correctPostion= 1+Math.round(3*Math.random());
document.getElementById('option'+correctPostion).innerHTML=correctAnswer;
}
for(i=1;i<5;i++)
{
document.getElementById('option'+i).onclick=function(){
if(playing===true)
{
if(this.innerHTML==correctAnswer)
{
score++;
document.getElementById('scoreValue').innerHTML = score ;
hide('try');
show('correct');
setTimeout(function(){
hide('correct');
},1000);
genQA();
}else{
show('try');
hide('correct');
setTimeout(function(){
hide('try');
},1000);
}
}
}
}
body,html
{
background-color: darkgray
}
.container
{
width: 600px;
height: 450px;
border: 1px solid blue;
margin: 100px auto;
/* margin-top: 150px;*/
background-color: #9DD2EA;
border-radius: 15px;
padding: 15px;
box-shadow: -4px 4px 14px;
position: relative;
}
#score
{
border: 1px solid #3affa3;
font-size: 15px;
position: absolute;
background-color: #3affa3;
box-shadow: 0px 1px 5px;
left: 500px;
font-family:sans-serif;
padding: 3px;
border-radius: 8px;
}
#try
{
border: 1px solid #f22929;
background-color: #f22929;
position: absolute;
left: 260px;
padding: 3px;
font-size: 15px;
font-family: sans-serif;
font-weight: bold;
box-shadow: 0px 1px 5px;
color: aliceblue;
display: none;
}
#correct
{
display: none;
border: 1px solid #f22929;
background-color: #43f128;
position: absolute;
left: 250px;
padding: 3px;
font-size: 15px;
font-family: sans-serif;
font-weight: bold;
box-shadow: 0px 1px 5px;
color: aliceblue;
}
#qtn
{
width: 450px;
height: 150px;
border: 1px solid blue;
margin: 50px auto 10px auto;
/* margin-top: 150px;*/
background-color: #80c3f7;
border-radius: 15px;
padding: 15px;
box-shadow: -4px 4px 14px;
position: relative;
text-align: center;
font-size: 70px;
font-family: cursive , sans-serif;
}
#note
{
width: 450px;
height: 20px;
border: 1px solid blue;
margin: 10px auto 10px auto ;
/* margin-top: 150px;*/
background-color: #80c3f7;
border-radius: 15px;
padding: 15px;
box-shadow: -4px 4px 14px;
position: relative;
font-size: 20px;
text-align: center;
font-family: sans-serif;
color: black;
}
.option
{
position: relative;
margin-left: 90px ;
position: relative;
transition: all 0.12s;
}
#option1
{
width: 100px;
height: 60px;
border: 1px solid white;
position: absolute;
background-color: #ffffff;
text-align: center;
font-size: 25px;
padding-top: 40px;
box-shadow: 0px 5px 5px;
border-radius: 5px;
cursor: pointer;
}
#option2
{
width: 100px;
height: 60px;
border: 1px solid white;
position: absolute;
left: 110px;
background-color: #ffffff;
text-align: center;
font-size: 25px;
padding-top: 40px;
box-shadow: 0px 5px 5px;
border-radius: 5px;
cursor: pointer;
}
#option3
{
width: 100px;
height: 60px;
border: 1px solid white;
position: absolute;
left: 220px;
background-color: #ffffff;
text-align: center;
font-size: 25px;
padding-top: 40px;
box-shadow: 0px 5px 5px;
border-radius: 5px;
cursor: pointer;
}
#option4
{
width: 100px;
height: 60px;
border: 1px solid white;
position: absolute;
left: 330px;
background-color: #ffffff;
text-align: center;
font-size: 25px;
padding-top: 40px;
box-shadow: 0px 5px 5px;
border-radius: 5px;
cursor: pointer;
}
#start
{
border: 1px solid #3affa3;
font-size: 15px;
position: absolute;
background-color: #CEE9F5;
box-shadow: 0px 1px 5px;
top: 440px;
left: 280px;
font-family:sans-serif;
padding: 3px;
border-radius: 8px;
font-weight: bold;
font-family: sans-serif;
background-color: #ffffff;
}
#option1:hover
{
background-color: #9DD2EA;
box-shadow: 0px 5px 5px purple;
}
#option2:hover
{
background-color: #9DD2EA;
box-shadow: 0px 5px 5px purple;
}
#option3:hover
{
background-color: #9DD2EA;
box-shadow: 0px 5px 5px purple;
}
#option4:hover
{
background-color: #9DD2EA;
box-shadow: 0px 5px 5px purple;
}
#option1:active
{
background-color: #9DD2EA;
box-shadow: 0px 0px 0px purple;
top: 5px;
}
#option2:active
{
background-color: #9DD2EA;
box-shadow: 0px 0px 0px purple;
top: 5px;
}
#option3:active
{
background-color: #9DD2EA;
box-shadow: 0px 0px 0px purple;
top: 5px;
}
#option4:active
{
background-color: #9DD2EA;
top: 5px;
box-shadow: 0px 0px 0px purple;
}
#start:hover
{
cursor: pointer;
background-color: #9DD2EA;
box-shadow: 0px 5px 5px purple;
}
#start:active
{
background-color: #9DD2EA;
top: 445px;
box-shadow: 0px 0px 0px ;
}
#time
{
width: 150px;
height: 25px;
background-color: burlywood;
border: 1px solid;
position: absolute;
left: 450px;
top: 440px;
border-radius: 5px;
box-shadow: 0px 5px 5px ;
font-weight: bold;
display: none;
}
#gameover
{
width: 400px;
height: 100px;
background-color: coral;
position: absolute;
top: 120px;
text-align: center;
padding: 100px;
font-size: 40px;
color: white;
display: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Math Quiz</title>
<meta name="viewport" content="width=device-width, initial-scale=1 , user-scalable=yes" >
<link rel="stylesheet" type="text/css" href="Style.css">
</head>
<body>
<div class="container">
<div id="correct">Correct</div>
<div id="try">Try Again</div>
<div id="score">
SCORE:
<span id="scoreValue">0</span>
</div>
<div id="qtn"></div>
<div id="note">Click on the Right Answer</div>
<div class="option">
<div id="option1"></div>
<div id="option2"></div>
<div id="option3"></div>
<div id="option4"></div>
</div>
<div id="start" class="box">Start Game</div>
<div id="time">Time Remaing: <span id="timeremain">0</span></div>
<div id="gameover">GAME OVER YOUR SCORE :<span id="scoreno">0</span></div>
</div>
<script src="main.js" type="text/javascript"></script>
</div>
</body>
</html>
I looked at your javascript code and i found some solutions .
This code will works for you . Its a little different : i corrected some errors .
I also added the classes for 'correct' and 'try' and modified the css file .
Here you are your corrected codes :
Javascript code:
let playing=false;
let score=0;
let action;
let timeremain;
document.getElementById('start').onclick=function(){
if(playing===true)
{
location.reload();
}
else
{
playing=true;
document.getElementById('scoreValue').innerHTML = score ;
document.getElementById('time').style.display="block";
timeremain=60;
genQA();
document.getElementById('start').innerHTML="Reset Game";
startCount();
}
}
function startCount()
{
action = setInterval(function(){
timeremain -=1;
document.getElementById('timeremain').innerHTML = timeremain;
if(timeremain===0)
{
document.getElementById('time').style.display="none";
gameOver();
}
},1000);
}
function gameOver()
{
document.getElementById('gameover').style.display="block";
document.getElementById('scoreno').innerHTML=score;
}
function genQA() {
var x=Math.round(10*Math.random());
var y=Math.round(10*Math.random());
correctAnswer= x*y;
document.getElementById('qtn').textContent=x +' x '+y;
var correctPostion= 1+Math.round(3*Math.random());
document.getElementById('option'+correctPostion).innerHTML=correctAnswer;
}
for(i=1;i<5;i++)
{
document.getElementById('option'+i).onclick=function(){
if(playing===true)
{
if(this.innerHTML==correctAnswer)
{
score++;
document.getElementById('scoreValue').innerHTML = score ;
document.getElementById('try').innerHTML=""
document.getElementById('correct').innerHTML="Correct";
setTimeout(function(){
document.getElementById('correct').innerHTML="";
},1000);
genQA();
}else{
document.getElementById('try').innerHTML="Try Again";
document.getElementById('correct').innerHTML="";
setTimeout(function(){
document.getElementById('try').innerHTML="";
},1000);
}
}
}
}
Css file :
body,html
{
background-color: darkgray
}
.container
{
width: 600px;
height: 450px;
border: 1px solid blue;
margin: 100px auto;
/* margin-top: 150px;*/
background-color: #9DD2EA;
border-radius: 15px;
padding: 15px;
box-shadow: -4px 4px 14px;
position: relative;
}
#score
{
border: 1px solid #3affa3;
font-size: 15px;
position: absolute;
background-color: #3affa3;
box-shadow: 0px 1px 5px;
left: 500px;
font-family:sans-serif;
padding: 3px;
border-radius: 8px;
}
#try
{
border: 1px solid #f22929;
background-color: #f22929;
position: absolute;
left: 260px;
padding: 3px;
font-size: 15px;
font-family: sans-serif;
font-weight: bold;
box-shadow: 0px 1px 5px;
color: aliceblue;
display: block;
}
#correct
{
display: block;
border: 1px solid #f22929;
background-color: #43f128;
position: absolute;
left: 250px;
padding: 3px;
font-size: 15px;
font-family: sans-serif;
font-weight: bold;
box-shadow: 0px 1px 5px;
color: aliceblue;
}
#qtn
{
width: 450px;
height: 150px;
border: 1px solid blue;
margin: 50px auto 10px auto;
/* margin-top: 150px;*/
background-color: #80c3f7;
border-radius: 15px;
padding: 15px;
box-shadow: -4px 4px 14px;
position: relative;
text-align: center;
font-size: 70px;
font-family: cursive , sans-serif;
}
#note
{
width: 450px;
height: 20px;
border: 1px solid blue;
margin: 10px auto 10px auto ;
/* margin-top: 150px;*/
background-color: #80c3f7;
border-radius: 15px;
padding: 15px;
box-shadow: -4px 4px 14px;
position: relative;
font-size: 20px;
text-align: center;
font-family: sans-serif;
color: black;
}
.option
{
position: relative;
margin-left: 90px ;
position: relative;
transition: all 0.12s;
}
#option1
{
width: 100px;
height: 60px;
border: 1px solid white;
position: absolute;
background-color: #ffffff;
text-align: center;
font-size: 25px;
padding-top: 40px;
box-shadow: 0px 5px 5px;
border-radius: 5px;
cursor: pointer;
}
#option2
{
width: 100px;
height: 60px;
border: 1px solid white;
position: absolute;
left: 110px;
background-color: #ffffff;
text-align: center;
font-size: 25px;
padding-top: 40px;
box-shadow: 0px 5px 5px;
border-radius: 5px;
cursor: pointer;
}
#option3
{
width: 100px;
height: 60px;
border: 1px solid white;
position: absolute;
left: 220px;
background-color: #ffffff;
text-align: center;
font-size: 25px;
padding-top: 40px;
box-shadow: 0px 5px 5px;
border-radius: 5px;
cursor: pointer;
}
#option4
{
width: 100px;
height: 60px;
border: 1px solid white;
position: absolute;
left: 330px;
background-color: #ffffff;
text-align: center;
font-size: 25px;
padding-top: 40px;
box-shadow: 0px 5px 5px;
border-radius: 5px;
cursor: pointer;
}
#start
{
border: 1px solid #3affa3;
font-size: 15px;
position: absolute;
background-color: #CEE9F5;
box-shadow: 0px 1px 5px;
top: 440px;
left: 280px;
font-family:sans-serif;
padding: 3px;
border-radius: 8px;
font-weight: bold;
font-family: sans-serif;
background-color: #ffffff;
}
#option1:hover
{
background-color: #9DD2EA;
box-shadow: 0px 5px 5px purple;
}
#option2:hover
{
background-color: #9DD2EA;
box-shadow: 0px 5px 5px purple;
}
#option3:hover
{
background-color: #9DD2EA;
box-shadow: 0px 5px 5px purple;
}
#option4:hover
{
background-color: #9DD2EA;
box-shadow: 0px 5px 5px purple;
}
#option1:active
{
background-color: #9DD2EA;
box-shadow: 0px 0px 0px purple;
top: 5px;
}
#option2:active
{
background-color: #9DD2EA;
box-shadow: 0px 0px 0px purple;
top: 5px;
}
#option3:active
{
background-color: #9DD2EA;
box-shadow: 0px 0px 0px purple;
top: 5px;
}
#option4:active
{
background-color: #9DD2EA;
top: 5px;
box-shadow: 0px 0px 0px purple;
}
#start:hover
{
cursor: pointer;
background-color: #9DD2EA;
box-shadow: 0px 5px 5px purple;
}
#start:active
{
background-color: #9DD2EA;
top: 445px;
box-shadow: 0px 0px 0px ;
}
#time
{
width: 150px;
height: 25px;
background-color: burlywood;
border: 1px solid;
position: absolute;
left: 450px;
top: 440px;
border-radius: 5px;
box-shadow: 0px 5px 5px ;
font-weight: bold;
display: none;
}
#gameover
{
width: 400px;
height: 100px;
background-color: coral;
position: absolute;
top: 120px;
text-align: center;
padding: 100px;
font-size: 40px;
color: white;
display: none;
}
Html Page :
<!DOCTYPE html>
<html lang="en">
<head>
<title>Math Quiz</title>
<meta name="viewport" content="width=device-width, initial-scale=1 , user-
scalable=yes" >
<link rel="stylesheet" type="text/css" href="Style.css">
</head>
<body>
<div class="container">
<div id="correct" class="correct">Correct</div>
<div id="try" class="try">Try Again</div>
<div id="score">
SCORE:
<span id="scoreValue">0</span>
</div>
<div id="qtn"></div>
<div id="note">Click on the Right Answer</div>
<div class="option">
<div id="option1"></div>
<div id="option2"></div>
<div id="option3"></div>
<div id="option4"></div>
</div>
<div id="start" class="box">Start Game</div>
<div id="time">Time Remaing: <span id="timeremain">0</span></div>
<div id="gameover">GAME OVER YOUR SCORE :<span id="scoreno">0</span></div>
</div>
<script src="main.js" type="text/javascript"></script>
</div>
</body>
</html>
You only have to replace your files with this codes .
I hope it helps you ! :-)

How can I create the angle shown on the header with CSS?

I need to create a header that looks like the firs image, however, it can't be an image. Preferably just css, but open to jQuery if there is a way to do this with jQuery.
I have tried many different things, but cannot create the 45 degree angle on the header(just before Home). This is the closest I have gotten. The colors are wrong in this image but that is intentional so that I could better illustrate the issue.
This is part of my latest attempt make this work and I think I am close with it, but it still isn't right.
#header{
float:left;
margin-top:20px;
overflow: hidden;
padding-bottom: 10px;
background-color:#F1F1F1;
-moz-box-shadow: 3px 3px 5px 0px #ccc;
-webkit-box-shadow: 3px 3px 5px 0px #ccc;
box-shadow: 3px 3px 5px 0px #ccc;
width: 100%;
height:130px;
z-index: 1;
}
#secondHeader{
float:right;
background-color:#ffffff;
width:50%;
height: 80px;
position: relative;
margin-top: -50px;
margin-right:15px;
/* border-radius: 15px 15px 0px 20px; */
/* background-color:#ff0000; */
-moz-box-shadow: 3px 3px 5px 6px #ccc;
-webkit-box-shadow: 3px 3px 5px 6px #ccc;
box-shadow: 3px 3px 5px 6px #ccc;
z-index: 10;
}
#secondHeader::before{
height: 80px;
width: 70px;
border-radius: 10px 10px 10px 10px;
background-color: #f1f1f1;
content: "";
position: absolute;
left: 32px;
top: 0px;
-webkit-transform: skewX(-45deg);
transform: skewX(-45deg);
z-index: -1;
}
What am I doing wrong? I have worked on this for two days and cannot figure it out.
this is pretty close to what you need. Simply using borders to do this:
#menubar {
width: 40vw;
min-height: 100px;
background-color: rgba(0,0,0,0.1);
}
#menubar ul {
margin-left: 55px;
padding-top: 40px;
}
#angle {
position: absolute;
border-top: 102px solid rgba(0,0,0,0.1);
border-right: 52px solid transparent;
border-left: 0px solid transparent;
height: 0;
width: 2px;
}
#angle2 {
position: absolute;
border-top: 100px solid white;
border-right: 50px solid transparent;
border-left: 0px solid transparent;
height: 0;
width: 1px;
}
<div id="menubar"><div id="angle"></div><div id="angle2"></div><ul>Menu here</ul></div>

Stopping HTML elements from becoming offset

#h1 {
float: center;
}
h2 {
float: center;
}
p {
font-family: "Comic Sans",sans-serif;
}
#div1 {
width: 7.5%;
height: 100px;
margin-left: 10px;
margin-right: 12px;
padding: 3%;
border-bottom: 4px solid black;
border-radius: 0px 0px 25px 25px;
background-color: white;
float:right;
position: absolute;
display: block;
right: 0px;
}
#div2 {
width: 7.5%;
height: 100px;
margin-left: 10px;
margin-right: 15%;
padding: 3%;
border-bottom: 4px solid black;
border-radius: 0px 0px 25px 25px;
background-color: white;
position: absolute;
display: block;
right: 0px;
}
#div3 {
width: 7.5%;
height: 100px;
margin-left: 10px;
margin-right: 30%;
padding: 3%;
border-bottom: 4px solid black;
border-radius: 0px 0px 25px 25px;
background-color: white;
position: absolute;
display: block;
right: 0px;
}
#div4 {
width: 101px;
height: 101px;
margin-left: 15%;
padding: 1%;
border-bottom: 4px solid black;
border-radius: 0px 25px 25px 0px;
background-color: white;
}
#div5 {
height: 101px;
padding: 10px;
border-bottom: 4px solid black;
border-radius: 0px 25px 25px 25px;
background-color: white;
margin: 1.5%;
}
#text {
border-bottom: 4px solid black;
padding: 1px;
width: 13%;
height: 50px;
border-radius: 25px 25px 0px 0px;
background-color: white;
margin-left: 1.5%;
color: #417cb8;
text-align: center;
}
#tag1 {
border-bottom: 4px solid black;
padding: 1px;
margin-right: 12px;
width: 13%;
height: 50px;
border-radius: 25px 25px 0px 0px;
background-color: white;
float: right;
position: absolute;
margin-right: 5px;
font-family: "Comic Sans",sans-serif;
right: 0px;
text-align: center;
color: #417cb8;
}
#tag2 {
margin-right: 15%;
padding: 5px;
border-bottom: 4px solid black;
width: 13%;
height: 50px;
border-radius: 25px 25px 0px 0px;
background-color: white;
position: absolute;
font-family: "Comic Sans",sans-serif;
text-align: center;
display: block;
right: 0px;
color: #417cb8;
}
#tag3 {
margin-right: 30%;
padding: 5px;
border-bottom: 4px solid black;
width: 13%;
height: 50px;
border-radius: 25px 25px 0px 0px;
background-color: white;
position: absolute;
font-family: "Comic Sans",sans-serif;
text-align: center;
display: block;
right: 0px;
color: #417cb8;
}
#tag4 {
float: left;
padding: 5px;
border-bottom: 4px solid black;
width: 10%;
height: 101px;
border-radius: 25px 0px 0px 25px;
background-color: white;
position: absolute;
font-family: "Comic Sans",sans-serif;
text-align: center;
display: block;
margin-left: 1.5%;
color: #417cb8;
padding: 1%;
}
#element {
float: left;
}
img.object {
border: 1px solid #6496c8;
background-color: white;
border-radius: 25px;
padding: 10px;
height: 101;
width: 101;
float: center;
}
<!DOCTYPE HTML>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="http://code.jquery.com/ui/1.8.21/jquery-ui.min.js"></script>
<script src="jquery.ui.touch-punch.min.js"></script>
<script>
$('#element').draggable();
$( "#div1" ).droppable({
drop: function( event, ui ) {
$( this )
.addClass( "isDropped" )
.html( "Dropped!" );
}
});
</script> <script>
function allowDrop(ev, div) {
ev.preventDefault()
}
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id)
}
function drop(ev, div) {
ev.preventDefault()
if(div == 'div4')
{
var data = ev.dataTransfer.getData("text")
var element = document.getElementById(data)
element.parentNode.removeChild(element)
}
else if (div == 'div5') {
if(document.getElementById(div).innerHTML <= 5)
{
var data = ev.dataTransfer.getData("text")
ev.target.appendChild(document.getElementById(data))
}
}
else if (div == 'element')
{
}
else
{
if(document.getElementById(div).innerHTML <= 5)
{
var data = ev.dataTransfer.getData("text")
ev.target.appendChild(document.getElementById(data))
}
}
}
</script>
</head>
<body>
<div style="border: 1px solid black; border-radius: 30px; background-color: #6496c8;">
<h2 style="float: center; text-align: center; border-bottom: 4px solid black; width: 275px; height: 65px; border-radius: 25px 0px 0px 0px; background-color: white; margin-left: 1.5%;"><font style="text-align:center;" face="verdana" color="#417cb8" size=30>Organiser</font></h2>
<div id="tag1"><font size="7">Now</font></div><br><br><br><br>
<div id="div1" ondrop="drop(event, 'div1')" ondragover="allowDrop(event, 'div1')"></div>
<div id="tag2"><font size="7">Next</font></div><br><br><br><br>
<div id="div2" ondrop="drop(event, 'div2')" ondragover="allowDrop(event, 'div2')"></div>
<div id="tag3"><font size="7">After</font></div><br><br><br><br>
<div id="div3" ondrop="drop(event, 'div3')" ondragover="allowDrop(event, 'div3')"></div>
<br><br><br><br><br><br><br><br>
<p id="text"><font size="7">To Do</font></p>
<p id="div5" ondrop="drop(event, 'div1')" ondragover="allowDrop(event, 'div1')" overflow="Scroll">
<img class="object" src="ABC.png" draggable="true" ondragstart="drag(event)" id="drag1" width="100" height="100">
<img class="object" src="pencil.png" draggable="true" ondragstart="drag(event)" id="drag2" width="100" height="100">
<img class="object" src="recycle.png" draggable="true" ondragstart="drag(event)" id="drag3" width="100" height="100">
<img class="object" src="apple.png" draggable="true" ondragstart="drag(event)" id="drag4" width="100" height="100">
<br><br><p><div id = "tag4"><font size="10">Done</font></div>
<div id="div4" ondrop="drop(event, 'div4')" ondragover="allowDrop(event, 'div4')"><img src="https://cdn3.iconfinder.com/data/icons/tools-solid-icons-vol-2/72/59-512.png" height=100px width=100px></div><br>
</div>
</body>
</html>
When i drag and drop elements back into the starting div, they become offset, can anybody explain why please? I have tried changing tags to classes, i have tried changing drag and drop options to no avail.
You have 4 images within the <p> element. Those images are followed by line breaks <br><br> because your <p> is not properly closed. so the browser places the </p> tag right after the <br><br> instead of before like I image you meant for,
When you move the image out of the <p> and then back in, it is placed after the line break now, instead of before it. this causes the image to move to the next line.
All you need to do is place a </p> right before those <br><br> or delete the line breaks altogether.

Change text color onclick

I have a toggle button and when I click the button I want to be able to change the colors of the text from a lighter color when not selected to black when selected. Right now it is only working on one of the buttons. Attached is a fiddle of my code. https://jsfiddle.net/h2db7qLp/
function onContainerClick(event) {
if (event.classList.contains('off')) {
event.classList.remove('off');
} else {
event.classList.add('off');
}
}
.container {
background: #EFEFEF;
position: relative;
width: 126px;
height: 40px;
cursor: pointer;
border: 1px solid rgba(0, 0, 0, 0.2);
border-top: #CCC solid 1px;
border-radius: 2px 0 0 2px;
border-bottom: #EEE solid 1px;
border-right: #ddd solid 1px;
border-left: #ddd solid 1px;
border-radius: 2px 0 0 2px;
border-style: solid;
border-width: 1px;
}
.container2 {
background: #EFEFEF;
position: relative;
width: 226px;
height: 40px;
cursor: pointer;
border: 1px solid rgba(0, 0, 0, 0.2);
border-top: #CCC solid 1px;
border-radius: 2px 0 0 2px;
border-bottom: #EEE solid 1px;
border-right: #ddd solid 1px;
border-left: #ddd solid 1px;
border-radius: 2px 0 0 2px;
border-style: solid;
border-width: 1px;
}
.switch {
position: absolute;
width: 50%;
height: 100%;
background-color: #fff;
transition: all 0.15s ease;
left: 0;
z-index: 1;
}
.switch-title {
margin-bottom: 6px;
font-size: 16px;
}
.container.off {} .container.off .switch,
.container2.off .switch {
left: 50%;
background-color: #fff;
}
.container2.off .left-long,
.container.off .left-short,
.container2.on .right-long,
.container.on .right-short {
color: #aaa;
}
.label {
position: absolute;
width: 50%;
height: 100%;
text-align: center;
padding-top: 11px;
z-index: 1;
font: 16px"adiHaus", Arial, sans-serif;
font-weight: bolder;
color: #000;
}
.label.right-long {
left: 50%;
}
.label.right-short {
left: 50%;
}
<div class="switch-title">Hand:</div>
<div class="container" id="container" onclick="onContainerClick(this)">
<div class="switch" id="switch">
</div>
<div class="label left-short" onclick="onContainerClick(this)">L</div>
<div class="label right-short" onclick="onContainerClick(this)">R</div>
</div>
I think that by adding the class 'on' on change it goes well, also you don't need to call your handler on every div, just call once.
function onContainerClick(event) {
if (event.classList.contains('off')) {
event.classList.remove('off');
event.classList.add('on');
} else {
event.classList.add('off');
event.classList.remove('on');
}
}
.container {
background: #EFEFEF;
position: relative;
width: 126px;
height: 40px;
cursor: pointer;
border: 1px solid rgba(0, 0, 0, 0.2);
border-top: #CCC solid 1px;
border-radius: 2px 0 0 2px;
border-bottom: #EEE solid 1px;
border-right: #ddd solid 1px;
border-left: #ddd solid 1px;
border-radius: 2px 0 0 2px;
border-style: solid;
border-width: 1px;
}
.container2 {
background: #EFEFEF;
position: relative;
width: 226px;
height: 40px;
cursor: pointer;
border: 1px solid rgba(0, 0, 0, 0.2);
border-top: #CCC solid 1px;
border-radius: 2px 0 0 2px;
border-bottom: #EEE solid 1px;
border-right: #ddd solid 1px;
border-left: #ddd solid 1px;
border-radius: 2px 0 0 2px;
border-style: solid;
border-width: 1px;
}
.switch {
position: absolute;
width: 50%;
height: 100%;
background-color: #fff;
transition: all 0.15s ease;
left: 0;
z-index: 1;
}
.switch-title {
margin-bottom: 6px;
font-size: 16px;
}
.container.off {}
.container.off .switch,
.container2.off .switch {
left: 50%;
background-color: #fff;
}
.container2.off .left-long,
.container.off .left-short,
.container2.on .right-long,
.container.on .right-short {
color: #aaa;
}
.label {
position: absolute;
width: 50%;
height: 100%;
text-align: center;
padding-top: 11px;
z-index: 1;
font: 16px "adiHaus", Arial, sans-serif;
font-weight: bolder;
color: #000;
}
.label.right-long {
left: 50%;
}
.label.right-short {
left: 50%;
}
<div class="switch-title">Hand:</div>
<div class="container on" id="container" onclick="onContainerClick(this)">
<div class="switch" id="switch">
</div>
<div class="label left-short">L</div>
<div class="label right-short">R</div>
</div>

Centering a div keeping the children Floating left

I have 2 div's and I want one to be centered on the screen and the other one to be on the left of it's parent #MyContent (The one which is centered). But, it seems like adding a "Float:left;" to #Latest cause a DOM error, #MyContent isn't holding #Latest any longer and it shrinks leaving #Latest out of it like if #Latest was "position:absolute;" when its "relative;".
I have these:
HTML:
<center>
<div id="MyContent">
<div id="Latest">
<div class="Last"></div>
</div>
</div>
</center>
CSS:
#MyContent {
position: relative;
font-family: FontStencil;
font-size: 12px;
padding: 20px 20px 160px 20px;
color: black;
background: rgba(240, 240, 240, 0.2);
border-radius: 18px;
border: 1px solid #CCCCCC;
top: 250;
width: 950px;
box-shadow: 0px 5px 15px -2px black;
}
#Latest {
position: relative;
font-family: FontStencil;
float: left; /* When I remove THIS, everything works Fine BUT its all centered */
text-align: left;
font-size: 18px;
padding: 20px 20px 30px 20px;
color: #000033;
background: white;
border-radius: 18px;
border: 1px solid #CCCCCC;
left: 20px;
top: 30px;
width: 570px;
box-shadow: 0px 1px 17px -5px black;
}
.Last {
position: relative;
font-family: SuperG;
text-align: left;
right: -18px;
font-size: 12px;
padding: 15px;
color: #000033;
background: white;
border-radius: 18px;
border: 1px solid #CCCCCC;
top: 25px;
width: 500px;
height: 415px;
box-shadow: 0px 1px 17px -5px black;
}
Everything is position:Relative; but it acts like if #Latest is not when I add a float:left; HALP.
CSS
#MyContent{
font-family:FontStencil;
font-size:12px;
padding:20px 20px 160px 20px;
color:black;
background:rgba(240,240,240, 0.2);
border-radius:18px;
border:1px solid #CCCCCC;
top:250;
width:950px;
box-shadow: 0px 5px 15px -2px black;
margin: 0 auto;
display: inline-block;
}
#Latest{
position:relative;
font-family:FontStencil;
float: left; /* When I remove THIS, everything works Fine BUT its all centered */
text-align:left;
font-size:18px;
padding:20px 20px 30px 20px;
color:#000033;
background:white;
border-radius:18px;
border:1px solid #CCCCCC;
left:20px;
top:30px;
width:570px;
box-shadow: 0px 1px 17px -5px black;
}
.Last{
position:relative;
font-family:SuperG;
text-align:left;
right:-18px;
font-size:12px;
padding:15px;
color:#000033;
background:white;
border-radius:18px;
border:1px solid #CCCCCC;
top:25px;
width:500px;
height:415px;
box-shadow: 0px 1px 17px -5px black;
}
Try the above CSS. DEMO

Categories