I am having a problem in which a the post button for a text box is being pushed down when the screen is resized as demonstrated in the pictures:
From this:
To this:
The width of the text box is 83% and the width of the post button is 14% which adds up to 97%. I thought with a liquid layout, as long as the width percentages do not go over 100%, you are fine? Can someone explain why this is happening as I cant seem to figure it!
Here is my HTML:
<div class="pageWrapper">
<div class="newsfeedPostForm">
<form action="public_posts.php" method="POST">
<textarea id="newsfeedPost" name="post" rows="5" cols="90"></textarea>
<input type="submit" name="send" class="postFormSubmit" value="Post">
</form>
</div>
<div>
And my CSS:
#pageWrapper {
width: 56%;
padding-left: 10px;
padding-right: 10px;
border-left: 1px solid #cad3dc;
border-right: 1px solid #cad3dc;
}
.newsfeedPostForm {
width: 71%;
height: 77px;
background-color: #e5e6e7;
padding: 5px;
margin-bottom: 3px;
}
#newsfeedPost {
background-color: #FFFFFF;
width: 83%;
max-height: 66px;
margin-top: 4px;
margin-left: 4px;
font-weight: bold;
}
.postFormSubmit {
background-color: #DCE5EE;
position:relative;
float: right;
width: 14%;
height:69px;
margin-right: 4px;
}
Use box-sizing: border-box on .newsfeedPostForm. That should solve your problem.
.newsfeedPostForm {
box-sizing: border-box;
.....
}
You can read here for more information on box-sizing and the problem it solves.
Related
How can i hide border behind MON and give some space like in this pic
https://www.screencast.com/t/SJmg63NZuF
div {
height: 100px;
width: 100px;
border: 2px solid black;
}
h2 {
width: 50px;
margin-top: -15px;
margin-left: 0px;
padding: 0 10px;
}
<div>
<h2>MON</h2>
<p>7am - yeah</p>
</div>
I think you're trying to achieve this. The convention of using <legend> tags which is a child of <fieldset> is usually applied and used for forms but you can achieve the same as shown below. I tweaked the code a bit and added a background to show you how you may achieve what you're looking for as the screenshot you posted.
Hope, it helps.
body {
background-image: url("https://ak9.picdn.net/shutterstock/videos/21522739/thumb/1.jpg");
}
fieldset {
width: 100px;
border: 2px solid white;
text-align: center;
}
h2 {
color: white;
}
p {
color: white;
}
<fieldset>
<legend align="center">
<h2>MON</h2>
</legend>
<p>7am - yeah</p>
<p>8am - yeah</p>
<p>9am - yeah</p>
</fieldset>
Looks like you just need to set the background color from transparent.
div {
height: 100px;
width: 100px;
border: 2px solid black;
background: white;
}
h2 {
width: 50px;
margin-top: -15px;
margin-left: 8px;
padding: 0 14px 0 10px;
background: white;
}
<div>
<h2>MON</h2>
<p>7am - yeah</p>
</div>
I have a project to create a website designed in PhotoShop. I want to create a to textbox in HTML and CSS which looks like this:
As you can see, there is no problem with the background or fonts; the problem is the textbox. How can I create textboxes with these curves?
* {
box-sizing: border-box;
-moz-box-sizing: border-box;
}
div {
background: #444;
direction: rtl;
width: 300px;
padding: 20px;
}
label {
width: 100%;
color: #fff
}
input {
border-radius: 0 2em;
padding: 0 10px;
width: 100%;
border: none;
line-height: 2em;
margin-bottom: 20px;
}
textarea {
border-radius: 0 4em;
padding: 0 10px;
width: 100%;
border: none;
line-height: 2em;
margin-bottom: 20px;
}
input[type="submit"] {
max-width: 100px;
}
<div class="wrapper">
<label>Name</label>
<input type="text" />
<label>Email</label>
<input type="text" />
<label>Message</label>
<textarea></textarea>
<input type="submit" value="Submit" />
</div>
This is how to get the shape in your image. You will need to learn a bit about border-radius.
The following is an example:
div#test {
border: thin solid #666;
width: 8em;
height: 2em;
border-radius: 0 2em 0 2em;
}
<div id="test"> </div>
The border-radius property is responsible for rounding corners. It can be very sophisticated, but the simple one here will do the job. You will just need to adjust some of the values.
The four values in the border-radius property represent the radius of the individual borders, clockwise from the top-left corner.
<div class="searchbox">
<form>
<input type="text" name="src-txt" class="src-txt"/>
<input type="submit" value="" name="src-btn" class="src-btn"/>
</form>
</div>
.searchbox {
float: left;
width: 35%;
height: 30px;
margin-top: 25px;
margin-left: 3%;
border: 1px solid red;
}
.src-txt {
float: left;
width: 80%;
height: 100%;
border: 2px solid #3682c4;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
padding: 5px;
}
.src-btn {
float: left;
width: 15%;
height: 100%;
background-color: #3682c4;
background-image: url("../content/src_img.png");
background-repeat: no-repeat;
background-position: center;
border: none;
cursor: pointer;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
This is code it's working fine but after I add !DOCTYPE html at head search button's height decreased.
I can't understand what changed.
What is the reason?
What should I change on my code?
Couldn't you just increase the height after adding the !DOCTYPE html?
Is your html tag set to 100% height? Sometimes that has caused issues with my code.
From below code,
.shoppingform {
width: 400px;
height: 800px;
background: #7CB9E8;
/* url(some img)*/
padding-left: 15px;
padding-top: 10px;
color: white;
font-size: 12px;
font-weight: bold;
border-radius: 5px;
}
.customercardtype {
border: 1px solid white;
color: black;
font-weight: normal;
padding: 10px 2px 5px 5px;
background: #B284BE;
width: 90%;
border-radius: 5px;
position: relative;
height: 8%;
margin-top: 5px;
}
.customercardtype .formlabel {
display: block;
height: 20%
}
.customercardtype .cardtypecontainer {
position: absolute;
width: 100%; /* Any problem here? */
top: 40%;
height: 50%;
border: 1px solid red;
}
<form class="shoppingform" action="someaction.php" method="get" enctype="multipart/form-data">
Step3: Card details
<div class="customercardtype">
<label class="formlabel">Cardtype:</label>
<div class="cardtypecontainer">
</div>
</div>
</form>
I would like to understand,
Why inner div container overflows?
This is because the width of an element is actually width + left padding + right padding + left border + right border.
As your width is 100% and additional to this will push it over 100%, making it overflow its parent.
If you use box-sizing: border-box, that will fix this issue.
That's a quick summary, lots more in depth info here: https://css-tricks.com/box-sizing.
The reason it overflows is because position absolute visually speaking, positions your element outside the normal flow of the site. This is intentional and powerful if you use it correctly. However in your case, the parent container of cardtypecontainer was not taking control of the absolute positioned element, therefore it overflowed outside its container.
Then, I changed cardtypecontainer to have relative position, which will work as you intended it to, because relative position does not change the intended layout of the element. For your case it means, cardtypecontainer will stay within the bounds of its parent container.
.shoppingform {
width: 400px;
height: 800px;
background: #7CB9E8;
/* url(some img)*/
padding-left: 15px;
padding-top: 10px;
color: white;
font-size: 12px;
font-weight: bold;
border-radius: 5px;
}
.customercardtype {
border: 1px solid white;
color: black;
font-weight: normal;
padding: 10px 2px 5px 5px;
background: #B284BE;
width: 90%;
border-radius: 5px;
position: relative;
height: 8%;
margin-top: 5px;
}
.customercardtype .formlabel {
display: block;
height: 20%
}
.customercardtype .cardtypecontainer {
position: relative;
margin-top: 10px;
width: 100%;
height: 50%;
border: 1px solid red;
}
<form class="shoppingform" action="someaction.php" method="get" enctype="multipart/form-data">
Step3: Card details
<div class="customercardtype">
<label class="formlabel">Cardtype:</label>
<div class="cardtypecontainer">
</div>
</div>
</form>
I have this web page and I can't seem to get the widths of these objects to align. I could manually adjust the width per pixel but that seems like it would be avoiding the actual problem.
I am wanting the homeLinkContainer to be directly under the search box and exactly the same width but I cannot seem to be able to do this.
<!DOCTYPE html>
<HTML>
<HEAD>
<STYLE>
html {
background: #FFFFEC;
}
#search {
width: 390px;
margin-left: auto;
margin-right: auto;
padding-right: 10px;
}
#searchBox {
width: 100%;
border: 1px solid #E6e6e6;
font-size: 25px;
padding-left: 10px;
}
#searchBox:hover {
border: 1px solid #bebebe;
transition-property: border-color;
transition-duration: 0.2s;
}
#homeLinkContainer {
width: 400px;
height: 400px;
background: #FFF;
border: 1px solid #E6e6e6;
margin-top: 10px;
margin-left: auto;
margin-right: auto;
}
</STYLE>
</HEAD>
<BODY>
<form ID="search" method="get" action="https://next.duckduckgo.com/">
<input ID="searchBox" type="text" name="q" id="s" class="input" placeholder="Search" autofocus="autofocus" />
</form>
<DIV ID="homeLinkContainer">
Contents
</DIV>
</BODY>
</HTML>
#search {
width: 402px; /* accounts for the 2 pixels of border that the bottom div has */
margin-left: auto;
margin-right: auto;
/* padding-right: 10px; */ /* why was that here? */
}
#searchBox {
width: 100%;
border: 1px solid #E6e6e6;
font-size: 25px;
padding-left: 10px;
box-sizing: border-box; /* makes the padding not mess with the width */
margin: 0; /* input elements sometimes have default margins */
}
#homeLinkContainer {
width: 400px;
height: 400px;
background: #FFF;
border: 1px solid #E6e6e6;
margin-top: 10px;
margin-left: auto;
margin-right: auto;
}
You have to take care of your BORDER. If you add a Border it adds the Borders Pixels around the box... So try to resize the hovered Box.