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!
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;
}
Is there anyway to stop the background-image jumping when the input has focus.
A 2px border is added to the input when it gets focus but this causes the image to jump.
Adding background-attachment: fixed causes the image to disappear.
.search_box {
border: 1px solid #0065bd;
background-color: #fff;
background: url("http://png-5.findicons.com/files/icons/980/yuuminco/256/search.png");
background-size: 20px 20px;
background-repeat: no-repeat;
background-position: left;
padding-right: 20px !important;
padding-top: 2px !important;
padding-bottom: 2px !important;
padding-left: 5px !important;
height: 42px;
width: 100%;
padding: 6px 12px;
}
.search_box:focus {
background-color: #d9effc;
border: 2px solid #0065bd;
}
<input type="text" class="textbox search_box" name="keywords" />
first, define the background position for both dimension. I strongly recommend to do this in pixels. Then, on the focus-style, reset the background-position to -1px -1px to compensate the new extra border pixel.
.search_box {
[...]
background-position: 0 0;
}
.search_box:focus {
[...]
background-position: -1px -1px;
}
You can use box-sizing: border-box; on .search_box to make it stay the same size even with a bigger border, and margin-left: -1px;
on .search_box:focus to keep it in the same place.
.search_box {
border: 1px solid #0065bd;
background-color: #fff;
background: url("http://png-5.findicons.com/files/icons/980/yuuminco/256/search.png");
background-size: 20px 20px;
background-repeat: no-repeat;
background-position: left;
padding-right: 20px !important;
padding-top: 2px !important;
padding-bottom: 2px !important;
padding-left: 5px !important;
height: 42px;
width: 100%;
padding: 6px 12px;
box-sizing: border-box;
}
.search_box:focus {
background-color: #d9effc;
border: 2px solid #0065bd;
margin-left: -1px;
}
<input type="text" class="textbox search_box" name="keywords" />
Use box-shadow.
I usually generate mine with this generator: Box Shadow Generator
.search_box {
border: 1px solid #0065bd;
background-color: #fff;
background: url("http://png-5.findicons.com/files/icons/980/yuuminco/256/search.png");
background-size: 20px 20px;
background-repeat: no-repeat;
background-position: left;
padding-right: 20px !important;
padding-top: 2px !important;
padding-bottom: 2px !important;
padding-left: 5px !important;
height: 42px;
width: 100%;
padding: 6px 12px;
}
.search_box:focus {
background-color: #d9effc;
box-shadow: 0px 0px 0px 2px rgba(0,101,189,1);
}
<input type="text" class="textbox search_box" name="keywords" />
All
this is my first stack overflow post, thanks in advance for any help
I am putting together a page with content and divs with image background, when I try to float two divs on the right one on top of each other, having trouble flow content to the left, I have used clear so one div is on top of the other one on the right, but the content I am trying to put on the left is align with the second image where the clear was applied then there is a big gap for the first div, any suggestions?
I have enclosed code here
.img1 {
float: right;
width: 250px;
box-shadow: 7px 7px 5px #cccccc;
border-radius: 10px;
border: 1px solid #f5aca6;
background: url("url") no-repeat 50% 10px;
background-color: #ffecec;
padding: 70px 5px 10px 5px;
}
.img2 {
float: right;
background: url("url")no-repeat 100% 100%;
margin-top: -20px;
margin-bottom: 10px;
margin-left: 30px;
background-color: #006534;
color: #d2d2d2;
line-height: 20px;
font-size: 13px;
width: 250px;
border: thin silver solid;
box-shadow: 7px 7px 5px #cccccc;
padding: 5px 5px 0px 5px;
}
HTML
<div class="img1">content</div>
<p class="clear"></p>
<div class="img2">content</div>
<div>Content.........</div>
Try this, I believe it's what you asked for:
HTML:
<div style="float: left;">
<div>Content.........</div>
</div>
<div style="float: right;">
<div class="img1">content</div>
<br>
<div class="img2">content</div>
</div>
CSS:
.img1 {
width: 250px;
box-shadow: 7px 7px 5px #cccccc;
border-radius: 10px;
border: 1px solid #f5aca6;
background: url("url") no-repeat 50% 10px;
background-color: #ffecec;
}
.img2 {
background: url("url")no-repeat 100% 100%;
background-color: #006534;
color: #d2d2d2;
line-height: 20px;
font-size: 13px;
width: 250px;
border: thin silver solid;
box-shadow: 7px 7px 5px #cccccc;
}
JsFiddle: https://jsfiddle.net/nmzwLn2q/1/
My code: https://jsfiddle.net/k0hqzcwg/
I'm not understanding why the message button is moving outside of the parent div. I've tried clearing floats both with adding clear: both, and adding a clearfix class but have not gotten any results.
In summary, I am trying to start a competing video sharing service with Youtube, my immense skill in CSS and Html are sure to pull through and give me the one up. Sarcasm
Any tips are welcome, I know I have a lot to learn.
For those who dont want to click the link:
Html:
<body>
<div id="headingbarholder">
<div id="headingbar">
<div id="heading-submit-avatarholder">
<div id="headingmessagebutton">
<span id="messagebuttoncontent" style = text-align: middle;>Message</span>
</div>
<div id="headingavatar">
<img id="heading-avatar" src="Removed Link" width = 45px; height = 45px;></img>
</div>
</div>
<img id="logo" src="Remove Link" width = 45px; height = 45px; display = inline-block;></img>
</div>
</div>
</body>
Css:
body {
color: White
font-size: 11px;
font-family: arial,sans-serif;
line-height: 15px;
background-color: #F1F1F1;
margin: 0 -8px 0 -8px;
}
#headingbarholder{
position:fixed;
left:0;
width: 100%;
}
#headingbar{
position: relative;
background-color: #fff;
padding:7px 30px 8px 30px;
border-bottom: 1px solid #E8E8E8;
}
#heading-submit-avatarholder{
float: right;
right: 0px;
width: 160px;
}
#headingmessagebutton {
background-color: #F8F8F8;
color: #333;
font-weight: bold;
font-size: 11px;
height: 28px;
box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.05);
border: 1px solid #D3D3D3;
border-radius: 2px;
display:inline-block;
padding: 0px 13px;
box-sizing: border-box;
line-height:normal;
}
#headingavatar{
width: 45px;
height: 45px;
display:inline-block;
}
Float the button left.
Here:
#headingmessagebutton {
background-color: #F8F8F8;
color: #333;
font-weight: bold;
font-size: 11px;
float: left;
height: 28px;
box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.05);
border: 1px solid #D3D3D3;
border-radius: 2px;
display: inline-block;
padding: 0px 13px;
box-sizing: border-box;
line-height: normal;
}
I would use a button instead and float it: Fiddle
Created a wrapper div called top div, got a p tag called Title aligned to the left and another div called buttonCP containing 4 p tags, aligned to the center with margin 0 auto. Now I want a final p tag called Button5 aligned to the right within top div, just cant seem to do it. Inspecting element shows that buttonCP margin auto could be pushing the final p tag out of the wrapper div. Any idea how I can have Button5 on the same line as Title and buttonCP? Thanks in advance!
Here is jsfiddle link:
https://jsfiddle.net/6r6jzypy/
<style> #topdiv {
background-color: #F0F0F0;
height: 40px;
width: 100%;
border: 2px solid #D8D8D8;
float:left;
}
p[name=heading] {
margin: 0;
font-weight: bold;
padding: 10px 8px 6px 8px;
float:left;
font-size: 1.0em;
}
#Result {
margin: 0;
float: right;
}
.button1 {
background-color: #D8D8D8;
margin-top: 3px;
float: left;
padding: 6px 8px 6px 8px;
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
border: 2px solid #D8D8D8;
border-right: 1px;
}
.button2 {
background-color: #D8D8D8;
margin-top: 3px;
float: left;
padding: 6px 8px 6px 8px;
border: 2px solid #D8D8D8;
border-right: 1px;
}
.button3 {
background-color: #D8D8D8;
margin-top: 3px;
float: left;
padding: 6px 8px 6px 8px;
border: 2px solid #D8D8D8;
border-right: 1px;
}
.button4 {
background-color: #D8D8D8;
margin-top: 3px;
float: left;
padding: 6px 8px 6px 8px;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
border: 2px solid #D8D8D8;
}
#buttonCP {
height: 34px;
width: 290px;
margin: 0 auto;
}
</style>
<body>
<div id="topdiv">
<p name="heading">Title</p>
<div id="buttonCP">
<p class="button1">Button1</p>
<p class="button2">Button2</p>
<p class="button3">Button3</p>
<p class="button4">Button4</p>
</div>
<p id="Result">Button5</p>
</div>
</body>
try this :
<div id="topdiv">
<p name="heading">Title</p>
<p id="Result">Button5</p>
<div id="buttonCP">
<p class="button1">Button1</p>
<p class="button2">Button2</p>
<p class="button3">Button3</p>
<p class="button4">Button4</p>
</div>
</div>
Live demo