I have this HTML and this CSS markup, and I have this image: http://i.imgur.com/cJWhXCh.png
For some reason, the image doesn't load at all, even though if I open the url in a new tab, it loads properly. When I change the image to anything else in the same folder, it works.
I feel like I'm missing something incredibly elementary here.
div#advert_bubble{
width: 400px;
min-height: 300px;
position: relative;
float: left;
clear: left;
}
div#advert_bubble div.advert_bubble_box{
float: left;
clear: left;
width: 300px;
height: 200px;
border-radius: 25px 25px 25px 25px;
-moz-border-radius: 25px 25px 25px 25px;
-webkit-border-radius: 25px 25px 25px 25px;
border: 1px solid #000000;
-webkit-box-shadow: 7px 7px 5px 0px rgba(0,0,0,0.4);
-moz-box-shadow: 7px 7px 5px 0px rgba(0,0,0,0.4);
box-shadow: 7px 7px 5px 0px rgba(0,0,0,0.4);
background-color: white;
position: absolute;
z-index: 5;
}
div.advert_bubble_arrow{
position: absolute;
width: 41px;
height: 39px;
background: url(/images/advert_bubble_arrow.png) no-repeat 0 0;
z-index: 10;
}
<div id="advert_bubble">
<div class="advert_bubble_box">
<p> Text Here </p>
</div>
<div class="advert_bubble_arrow"> </div>
</div>
You need to declare the ID its not showing up because the id is not defined. to define it do this
<html>
<Head>
<title></title>
<!--This is where you declare your IDs-->
<script type="text/javascript">
//looks for Id's here so declare them
function Idgoeshere()
//looks for the id.
{
document.getElementById
//after the Id you say what it does.
}
</script>
</head>
<body>
div id="advert_bubble">
<div class="advert_bubble_box">
<p> Text Here </p>
</div>
<div class="advert_bubble_arrow"> </div>
</div>
div#advert_bubble{
width: 400px;
min-height: 300px;
position: relative;
float: left;
clear: left;
}
div#advert_bubble div.advert_bubble_box{
float: left;
clear: left;
width: 300px;
height: 200px;
border-radius: 25px 25px 25px 25px;
-moz-border-radius: 25px 25px 25px 25px;
-webkit-border-radius: 25px 25px 25px 25px;
border: 1px solid #000000;
-webkit-box-shadow: 7px 7px 5px 0px rgba(0,0,0,0.4);
-moz-box-shadow: 7px 7px 5px 0px rgba(0,0,0,0.4);
box-shadow: 7px 7px 5px 0px rgba(0,0,0,0.4);
background-color: white;
position: absolute;
z-index: 5;
}
div.advert_bubble_arrow{
position: absolute;
width: 41px;
height: 39px;
background: url(/images/advert_bubble_arrow.png) no-repeat 0 0;
z-index: 10;
}
</body>
</html>
Related
Why wont my css styling of background color ,width, and height work on my last div >gameover ?
this first part is my html code:
<head>
<title>Maths Game</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-
scalable=yes">
<link rel="stylesheet" href="styling.css">
</head>
<body>
<div id="container">
<div id="score">Score: <span id="scoreValue">0</span></div>
<div id="correct">Correct</div>
<div id="wrong">Try Again</div>
<div id="question">7x7</div>
<div id="instructionBox">Click on the correct answer</div>
<div id="choices">
<div id="box1" class="box">1</div>
<div id="box2" class="box">2</div>
<div id="box3" class="box">3</div>
<div id="box4" class="box">4</div>
</div>
<div id="startReset">start Game</div>
Im guessing right here below is where it started getting messed up:
<div id="timeremaining">Time remaining:<span id="timeRemainingValue">
60</span> sec</div>
<div id="gameOver">
<p>Game Over!</p>
<p>Your score is __</p>
</div>
</div>
this second part is my css code and only the last style "game over" isn't working;
html {
height: 100%;
background: radial-gradient(circle, white, grey);
}
#container {
height: 440px;
width: 550px;
background-color: #9DD2EA;
margin: 100px auto;
/* this line directly above centers the container top and bottom 100px and left and
right to auto so that margin keeps getting
bigger and bigger on both sides till the element is center */
padding: 10px;
border-radius: 20px;
/* above line curves corners of element */
box-shadow: 4px 4px 6px 6px purple;
-webkit-box-shadow: 4px 4px 6px 6px purple;
-moz-box-shadow: 4px 4px 6px 6px purple;
/* [horizontal offset] [vertical offset] [blur radius] [optional spread radius] [color]
*/
position: relative;
}
#score {
background-color: yellow;
padding: 10px;
position: absolute;
left: 475px;
box-shadow: 0px 4px purple;
-moz-box-shadow: 0px 4px purple;
-webkit-box-shadow: 0px 4px purple;
}
#correct {
position: absolute;
left: 240px;
background-color: green;
color: white;
padding: 10px;
display: none;
}
#wrong {
/* line 45 makes it to where this element does not interact with other elements and
other elements behave as if it doesent exist*/
position: absolute;
left: 240px;
background-color: red;
color: white;
padding: 10px;
display: none;
}
#question {
margin: 55px auto 10px auto;
height: 150px;
width: 420px;
background-color: rgb(184, 53, 240);
box-shadow: 0px 4px purple;
font-size: 100px;
text-align: center;
font-family: Arial, Helvetica, sans-serif, sans-serif;
line-height: 150px;
color: black;
border-radius: 5px;
position: relative;
}
#question:active {
box-shadow: 0px 0px purple;
-moz-box-shadow: 0px 0px purple;
-webkit-box-shadow: 0px 0px purple;
top: 4px
}
#instructionBox {
height: 60px;
width: 420px;
background-color: blue;
margin: 1px auto 1px auto;
text-align: center;
line-height: 55px;
box-shadow: 0px 4px purple;
-moz-box-shadow: 0px 4px purple;
-webkit-box-shadow: 0px 4px purple;
border-radius: 5px;
position: relative;
/* transition: all 0.2s; line 71 & 72 with line 77 make the transition happen on click
*/
}
#instructionBox:active {
box-shadow: 0px 0px purple;
-moz-box-shadow: 0px 0px purple;
-webkit-box-shadow: 0px 0px purple;
top: 4px;
}
#choices {
/* background-color: sandybrown; */
height: 100px;
width: 420px;
margin: 10px auto;
color: black;
text-align: center;
line-height: -50px;
margin: 10px auto;
border-radius: 5px;
}
.box {
/*these boxes are within a choices div to help them size together*/
margin-right: 26px;
width: 85px;
height: 85px;
background-color: white;
float: left;
border-radius: 5px;
cursor: pointer;
box-shadow: 0px 4px grey;
-moz-box-shadow: 0px 4px grey;
-webkit-box-shadow: 0px 4px grey;
line-height: 80px;
position: relative;
/* with position relative and .box:active { top: 4px; the box moves down 4px}*/
/* transition: all 0.2s;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-o-transition: all 0.2s;
-ms-transition: all 0.2s; */
}
.box:hover,
#startReset:hover {
background-color: grey;
color: white;
box-shadow: 0px 4px purple;
-webkit-box-shadow: 0px 4px purple;
-moz-box-shadow: 0px 4px purple;
}
.box:active,
#startReset:active {
box-shadow: 0px 0px purple;
-webkit-box-shadow: 0px 0px purple;
-moz-box-shadow: 0px 0px purple;
top: 4px;
}
/* #box1{
margin: 10px 10px;
background-color: red;
width: 30px;
height: 30px;
}
#box2{
margin: 10px 10px;
background-color: white;
width: 30px;
height: 30px;
}
#box3{
margin: 10px 10px;
background-color: blue;
width: 30px;
height: 30px;
}*/
#box4 {
margin-right: 0;
}
#startReset {
/*these boxes are within a choices div to help them size together*/
margin-left: 230px;
width: 100px;
height: 45px;
background-color: rgb(255, 255, 255, 0.5);
float: left;
border-radius: 5px;
cursor: pointer;
box-shadow: 0px 4px grey;
-moz-box-shadow: 0px 4px grey;
-webkit-box-shadow: 0px 4px grey;
line-height: 45px;
text-align: center;
position: relative;
}
/* instead of writing these same pargraphs of code just at the element id to the similar
code alrady made like above */
/* #startReset:hover{
background-color: grey;
color: white;
box-shadow: 0px 4px purple;
-webkit-box-shadow: 0px 4px purple;
-moz-box-shadow: 0px 4px purple;
}
#startReset:active{
box-shadow: 0px 0px purple;
-webkit-box-shadow: 0px 0px purple;
-moz-box-shadow: 0px 0px purple;
top: 4px;
} */
#timeremaining {
/*these boxes are within a choices div to help them size together*/
visibility: hidden;
/* display: none; */
margin-left: 10px;
width: 200px;
height: 45px;
background-color: greenyellow;
float: left;
border-radius: 5px;
cursor: pointer;
box-shadow: 0px 4px grey;
-moz-box-shadow: 0px 4px grey;
-webkit-box-shadow: 0px 4px grey;
line-height: 45px;
text-align: center;
position: relative;
}
this below is the broken part with the >gameover style or gameOver div:
#gameOver {
height: 200px;
width: 500px;
background-color: linear-gradient(blue, green);
font-size: 1.0em;
}
I'm trying to create an input form and the right side of my input boxes keep getting cut off. My code is as follows:
HTML/CSS
.add_idea_box {
background-color: #ffffff;
min-width: 1110px;
margin: 0px 20px 20px 20px;
overflow: hidden;
border: solid 1px #6a6a6a;
box-shadow: 3px 3px 3px #cecdcd;
-moz-box-shadow: 3px 3px 3px #cecdcd;
-webkit-box-shadow: 3px 3px 3px #cecdcd;
text-align: center;
padding-right: 25px;
}
.add_idea_box_left {
float: left;
overflow: hidden;
width: 130px;
height: 200px;
}
.add_idea_box_left_top {
width: 100%;
padding: 15px 20px 20px 0px;
}
.add_idea_box_left_bottom {
width: 100%;
text-align: left;
padding-left: 22px;
}
.add_idea_box_left_bottom_row {
width: 100%;
height: 27px;
font-family: "Arial";
font-size: 85%;
color: #363636;
}
.red_circle {
display: inline;
float: left;
width: 15px;
height: 15px;
border-radius: 50%;
background-color: #ff5f57;
margin-right: 7px;
}
.yellow_circle {
display: inline;
float: left;
width: 15px;
height: 15px;
border-radius: 50%;
background-color: #ffbd2e;
margin-right: 7px;
}
.green_circle {
display: inline;
float: left;
width: 15px;
height: 15px;
border-radius: 50%;
background-color: #29cb41;
margin-right: 7px;
}
.add_idea_box_right {
overflow: hidden;
text-align: left;
min-height: 200px;
padding: 20px 0px 0px 25px;
border-left: solid 1px #bab6b6;
}
.add_idea_box_right_top {
overflow: visible;
width: 100%;
}
.add_idea_box_right_bottom {
overflow: hidden;
float: right;
height: 40px;
margin-top: 10px;
margin-bottom: 10px;
}
input[type=submit] {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #ffffff;
padding: 10px 10px;
background: -moz-linear-gradient(
top,
#fa8e00 0%,
#ab0000);
background: -webkit-gradient(
linear, left top, left bottom,
from(#fa8e00),
to(#ab0000));
border: 1px solid #7d0000;
-moz-box-shadow:
0px 1px 3px rgba(000,000,000,0.5),
inset 0px 0px 2px rgba(255,255,255,0.7);
-webkit-box-shadow:
0px 1px 3px rgba(000,000,000,0.5),
inset 0px 0px 2px rgba(255,255,255,0.7);
box-shadow:
0px 1px 3px rgba(000,000,000,0.5),
inset 0px 0px 2px rgba(255,255,255,0.7);
text-shadow:
0px -1px 0px rgba(000,000,000,0.4),
0px 1px 0px rgba(255,255,255,0.3);
}
input[type=text] {
width: 100%;
height: 20px;
padding: 10px 10px;
border: 1px solid #bab6b6;
-webkit-border-radius: 6px;
border-radius: 6px;
font-family: "Arial";
color: #bab6b6;
background: #efeeee;
}
textarea {
width: 100%;
height: 60px;
padding: 10px 10px;
border: 1px solid #bab6b6;
-webkit-border-radius: 6px;
border-radius: 6px;
margin-top: 10px;
font-family: "Arial";
color: #bab6b6;
background: #efeeee;
}
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<meta http-equiv="Content-Type" content="application/xml; charset=utf-8">
<meta name="viewport" content="initial-scale=1">
<html lang="en">
<head>
<title>GroupTrades</title>
<!-- CSS -->
<link type="text/css" href="css/ideaboard2.css" rel="stylesheet" media="screen">
</head>
<body>
<!-- ADD AN IDEA BOX -->
<div class="add_idea_box">
<div class="add_idea_box_left">
<div class="add_idea_box_left_top">
</div>
<div class="add_idea_box_left_bottom">
<div class="add_idea_box_left_bottom_row">
<div class="green_circle"></div>5 accepted
</div>
<div class="add_idea_box_left_bottom_row">
<div class="yellow_circle"></div>2 pending
</div>
<div class="add_idea_box_left_bottom_row">
<div class="red_circle"></div>3 rejected
</div>
</div>
</div>
<div class="add_idea_box_right">
<form method="post" action="dashboard.php">
<div class="add_idea_box_right_top">
<input type="hidden" name="group" value="<?echo $group;?>">
<input type="text" name="title" value="Title" autofocus>
<textarea value="idea" id="idea">Idea</textarea>
</div>
<div class="add_idea_box_right_bottom">
<input type="submit" id="Submit" name="Submit" value="Add Idea">
</div>
</form>
</div>
</div>
<br><br><br>
</body>
A live version is at: http://quickid.net/test2/ideaboard2.html ... You can see that the right side of the input box and the text box are both getting cut off and their right borders are not showing.
Any help would be greatly appreciated. Thanks!
Add box-sizing property to input and text-area and style accordingly
CSS
.add_idea_box_right_top input[type="text"],
.add_idea_box_right_top textarea{
box-sizing:border-box;
}
hope this helps..
It's because you have set all of these properties on your input element:
width: 100%
padding: 10px
border: 2px
So the input element takes up 100% of the width and it also has 10px padding both left and right on top of that and 2px border on top of that. They all add up so the total width of your element is more than 100% of the width of the containing element.
Try modifying the padding of this class, so try this one.
FROM THIS:
.add_idea_box_right {
overflow: hidden;
text-align: left;
min-height: 200px;
padding: 20px 0px 0px 25px;
border-left: solid 1px #bab6b6;
}
TO THIS:
.add_idea_box_right {
overflow: hidden;
text-align: left;
min-height: 200px;
padding: 20px 25px 0px 25px;
border-left: solid 1px #bab6b6;
}
Let me know if it helped you.
It is because 100% width as suggested is interfering with some of the padding, reduce the width to a smaller percentage and center your input field for it to scale better with increasing resolutions.
Edit: If you inspect element on mozilla you can clearly see where the overlap happens with the pick element thing!
Is it possible to add an even shadow to a div that is not a regular rectangle? Adding box-shadow doesn't work the way it works with a normal div. This is the div I'm talking about:
#talkbubble {
width: 120px;
height: 80px;
background: red;
position: relative;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
#talkbubble:before {
content:"";
position: absolute;
right: 100%;
top: 26px;
width: 0;
height: 0;
border-top: 13px solid transparent;
border-right: 26px solid red;
border-bottom: 13px solid transparent;
}
yes you can. Here is the example:
.circle {
width:150px;
height:150px;
border: solid 1px #555;
background-color: #eed;
box-shadow: 10px -10px rgba(0,0,0,0.6);
-moz-box-shadow: 10px -10px rgba(0,0,0,0.6);
-webkit-box-shadow: 10px -10px rgba(0,0,0,0.6);
-o-box-shadow: 10px -10px rgba(0,0,0,0.6);
border-radius:100px;
}
<div class="circle">
</div>
I'm using a container with a fixed width. Inside the container I have 2 divs floating left, the first div has a width of 9% and the second div has a width of 91% but for some reason there is a 1px white line that shows up on the very right. How do I fix this issue? It sometimes varies when zooming on the browser.
HTML:
<div id="main-container">
<div id="container1">
</div>
<div id="container2">
</div>
</div>
CSS:
#main-container {
margin: 0 auto;
margin-top: 45px;
width: 1110px;
height: 650px;
border: 3px solid red;
padding: 0px;
border-radius: 7px;
-moz-border-radius: 7px;
-webkit-border-radius: 7px; }
/*content*/
#container1 {
float: left;
width: 9%;
height: 100%;
border-radius: 7px 0px 0px 7px;
-moz-border-radius: 7px 0px 0px 7px;
-webkit-border-radius: 7px 0px 0px 7px;
background: yellow; }
#container2 {
float: left;
width: 91%;
height: 100%;
border-radius: 0 7px 7px 0;
-moz-border-radius: 0 7px 7px 0;
-webkit-border-radius: 0 7px 7px 0;
background: orange; }
demo
As the some others mentions it looks like the problem is caused by rounding differences in WebKit.
Your can add float: right; to the second container to fix the alignment and remove the gap. http://jsfiddle.net/Gw5AH/3/
My css:
#main {
display: block;
top: 0px;
bottom: 0px;
height: auto;
margin-top: 55px;
max-width: 100%;
overflow: scroll;
position: absolute;
}
#content {
background-color: #fff;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-border-radius: 5px;
border: 1px solid #eee;
-moz-box-shadow: inset 0 0 5px #000;
-webkit-box-shadow: inset 0 0 5px #000;
box-shadow: inset 0 0 5px #000;
margin: 5px;
}
What i want:
What i get:
Red = absolute header
White = #main with "blue" scrollbars
Green = #content border with the text in it.
I guess it is quite easy to solve but i still couldnt manage after trying for ages :P
Updated/simplified jsfiddle:
http://jsfiddle.net/YAgW2/9/
Your CSS should be:
#main {
display: block;
top: 0px;
bottom: 0px;
height: auto;
margin-top: 55px;
max-width: auto;
overflow: scroll;
position: absolute;
}
#content {
background-color: #fff;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-border-radius: 5px;
border: 1px solid #eee;
-moz-box-shadow: inset 0 0 5px #000;
-webkit-box-shadow: inset 0 0 5px #000;
box-shadow: inset 0 0 5px #000;
margin: 5px;
width:auto;
}
Use the following CSS:
#main {
display: block;
top: 0px;
bottom: 0px;
height: auto;
margin-top: 55px;
max-width: 100%;
overflow: scroll;
position: absolute;
background-color: green;
}
#content {
white-space: nowrap;
padding: 5px;
color: white;
background-color: red;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-border-radius: 5px;
border: 1px solid #eee;
-moz-box-shadow: inset 0 0 5px #000;
-webkit-box-shadow: inset 0 0 5px #000;
box-shadow: inset 0 0 5px #000;
margin: 5px;
}
And the following HTML:
<div>
<div id="main">
</div>
<div id="content" style="position:absolute">
Try to extend this text
</div>
</div>
Could you not move #content outside of #main and position it where you want, i.e. on top of #main?
Adding float: left; to #content solves the display issue!