Formatting Issues With Textarea Height and Margins - html

I've been doing a coding project for school, and on one of the pages, my textarea boxes have been giving me some trouble. They need to have 5% left and right margins, but I can tell that the left and right margins are slightly different, so I just wanted to try and figure out what that was about. Also I need to be able to set the height of the textarea boxes to a percentage so that it's relative to the screen size, but the only way I was able to alter the height of them was by setting it to a pixel measurement.
The css for the two textarea boxes looks like this:
#input {
width: 90%;
margin-top: 5%;
margin-bottom: 3%;
margin-left: 5%;
margin-right: 5%;
border-radius: 12px;
outline: none;
border: none;
}
#output {
width: 90%;
margin-top: 3%;
margin-bottom: 5%;
margin-left: 5%;
margin-right: 5%;
border-radius: 12px;
outline: none;
border: none;
}
...and you can access the final result of that page here.
Thank you!

I don't see anything wrong with the code in itself. Just to see if this works...try adding the following to your css
html { margin: 0; padding: 0; }
body { margin: 0; padding: 0; }
The other thing you could try is adding a float or display property to your textareas. Something like float: left; or display: block;
See if that does what you are wanting.

Related

HTML width 100% goes outside the page

I'm pretty newbie with HTML and CSS. So, I've got a problem with the width of 100%. It appears to go beyond the borders of the browser. Please take a look at the example below! Should I decrease the width per cents a little or is there some flaws in my code that could cause this?
I found some other posts here about the width 100%, but neither of them didn't really help me. Here's the example I made: http://jsfiddle.net/gj53jbz9/
body{
font-size: 15px;
margin: 0px;
background-color: lightgrey; }
#header{
padding: 30px;
width: 100%;
height: 250px;
background-color: grey; }
#name{
padding: 5px;
font-size: 25px;
float: left; }
#navbar{
float: right;
text-align: right; }
#navbar a{
background-color: black;
display: inline-block;
width: 120px;
text-align: center;
padding: 10px 0px;
text-decoration: none;
color: lightgrey; }
#title{
clear: both;
text-align: center;
padding-top: 100px;
font-size: 45px; }
#content{
text-align: center;
width: 80%;
margin: 0px auto; }
<div id=header>
<div id=name>Name</div>
<div id=navbar>
Link1
Link2
</div>
<div id=title>Insert title here</div>
</div>
<div id=content>
<h3>Age of aggression</h3>
<p>We drink to our youth, to days come and gone. For the age of aggression is just about done. We'll drive out the Stormcloaks and restore what we own. With our blood and our steel we will take back our home.</p>
<p>Down with Ulfric! The killer of kings! On the day of your death we will drink and we'll sing. We're the children of Skyrim, and we fight all our lives. And when Sovngarde beckons, every one of us dies! But this land is ours and we'll see it wiped clean. Of the scourge that has sullied our hopes and our dreams!</p>
</div>
Thats because you have both width and padding set to one element. And by default padding is added on top of width. (Making it 100% + 2*30px of width).
#header{
padding: 30px;
width: 100%;
}
Either remove padding and add it to an inner element with no width set, or use:
box-sizing: border-box;
Which makes the width calculation include padding. :)
https://www.w3schools.com/cssref/css3_pr_box-sizing.asp
Take a look at this part of your code:
#header{
padding: 30px;
width: 100%;
height: 250px;
background-color: grey; }
This is telling the browser that the width of #header should be 100% with a padding of 30px. Since padding is not counted into the width, the actual width ends up to be 100% + 60px. So, in order to make sure this fits into the page, you need to subtract 60px (30px to the left + 30px to the right) from the 100% width and it will fit into the browser. Luckily you are easily able to do this with CSS:
#header{
padding: 30px;
width: calc(100% - 60px);
height: 250px;
background-color: grey; }
It seems to work if you remove margin: 0px; from the properties inside body {}
I don't know why it has this behaviour
Every HTML element has some default values. Please check here:
https://www.w3schools.com/cssref/css_default_values.asp
You can also try to set all elements margin and padding as 0. Just like that:
*{margin: 0; padding: 0}
By default, HTML elements calculate their sizes based on the content only, so excluding the padding, borders and margins. To change that behavior, use:
box-sizing: border-box;
This makes the calculation include the padding and borders. You can add it to any element you want, but it is a common practice to add it to all elements:
* {
box-sizing: border-box;
}
Don't give padding from left and right to your header div.
Add some margin to name and navbar div
just like this
#header {
padding: 30px 0px;
width: 100%;
height: 250px;
background-color: grey;
}
#name {
padding: 5px;
font-size: 25px;
float: left;
margin-left: 40px;
}
#navbar {
float: right;
text-align: right;
margin-right: 40px;
}
It is because padding is being summed to width 100%.
Try to use box-sizing, like that:
#header{
padding: 30px;
width: 100%;
height: 250px;
background-color: grey;
box-sizing: border-box;
}
Header.Width=100% and Header.Padding=30px are causing the problem.
You are telling the browser that the header will use the 100% of the width, PLUS a pad of 30px. So the width is 100%+30px of the space created by the padding.
Try moving the width to the body property so all the page will use the 100% of the available space. That should fix it.
left: 0px;
right: 0px;
width: auto;
position: relative;

input field won't size correctly

i have a really annoying issue with sizing an input field and i don't understand how it works.
I got this code. HTML:
<div class="container">
<div class="receipt">
<p class="location"></p>
<input type="text" id="checkoutField">
<div class="checkoutButton">
<a href="#/checkout">
<p>some button</p>
</a>
</div>
</div>
</div>
The container got a max width of 480px. And i want both the checkoutButton div and the input field to stretch out to that width limit, while also having a 20px margin on both sides. The elements should also be responsive, which is why they doesnt have a fixed size.
This works fine on the div, but i cant get the input field to work the same..
I made a jsfiddle that includes the CSS code aswell: jsfiddle
Why is the input behaving like this and how do i fix it?
Instead of calling margin left & right to individual items, it's better call padding for parent container.
Chk the Modified code - http://jsfiddle.net/k7vzod4y/3/
.receipt {
padding: 0 20px 24px;
}
.receipt .checkoutButton {
margin: 0;
}
.receipt #checkoutField {
width: 100%;
margin: 0;
}
Hope that helps.
It is possible easily using CSS3 calc function.
You could set you width to 100% - 40px to take care of your margins.
Something like this:
.receipt #checkoutField {
width: calc(100% - 40px);
border: 0;
height: 40px;
background-color: #35aba2;
border-radius: 4px;
margin-top: -6px;
margin-left: 20px;
}
You can see this in action in you updated fiddle
So after looking at your code example I would use the following method. I used the following on the JSFiddle you linked and it worked as you mentioned you wanted it to.
Set the width of the input field to 100%:
.receipt #checkoutField {
border: 0;
width: 100%;
height: 40px;
background-color: #35aba2;
border-radius: 4px;
margin-top: -6px;
margin-left: 20px;
margin-right: 20px;
}
And then 100% width on the checkout button as well:
.receipt .checkoutButton {
width: 100%;
height: 50px;
background-color: #35aba2;
border-radius: 4px;
margin-left: 20px;
margin-right: 20px;
cursor: pointer;
margin-top: -6px;
}
This method is also responsive because I have used percentages which are related units so they inherit from there parent. So a width of 100% will always stay at the full width of it's parent regardless of the viewport size.

How to get a heading to scale with a image and keep spacing ratio html/css

I would like to have a image on the left with a heading on the right. I want both of them to scale in size and spacing as the page is shrunk. I have used this code: width: 10%; height: auto; margin: 2% 0px; to have the image on the top left of my page and scale in both spacing and size to the page when the browser is shrunk (I have also included media queries which wouldn't think would make a difference). I have tried using positioning: absolute which doesn't work. I am a novice to using HTML5 and CSS3. This is my first project and second post on Stack Overflow.
I think this is what you are trying to do
HTML
<div class="wrapper"><img src="yourimage.jpg"/><h1>my Heading Goes here</h1></div>
CSS
div.wrapper {
width: 100%;
height: auto;
max-width: 600px;
border: thin solid #333;
}
div.wrapper:after {
content: '';
display: block;
clear: both;
}
div.wrapper img {
display: block;
float: left; width: 40%;
height: auto;
margin-right: 5%;
}
div.h1 {
display: inline-block;
line-height: 20px;
margin: 0px;
padding: 0px;
}
You can check it here
jsfidlle
Could you make a http://jsfiddle.net/?
It's kinda hard to understand what you're after based on our description alone.

Making vertical separator css

I need help with making double vertical lines.
Here are styles:
.slide-container
{
text-align: center;
width: 25%;
}
.v-separator
{
content: "";
display: inline-block;
width: 0px;
height: 230px;
border-right: 1px solid #fafafa;
border-left: 1px solid #b4b4b4;
padding: 0;
position: relative;
top: 20px;
}
.v-separator has width 2px because of border and this causes the problem. I have tried to make .slide-container width a bit less than 25% (like 23.853%), but this is not the decision.
I have no idea how to implement this feature somehow else.
Btw I am using Foundation 5 and Compass.
fiddle which demonstrates the problem: http://jsfiddle.net/5w7Hr/
The width:25% generally doesn't include the margins and borders. When all these are added together the width exceeds 100%. This is the reason why the last box gets pushed down. You can fix this by adding box-sizing setting as shown below.
Note: Elements whose display is inline-block by default have a margin assigned and hence we have to offset that also by assigning a negative margin (Source: CSS Tricks). Alternately, using float: left instead of display: inline-block is also a good option.
#wrapper
{
width: 600px;
background: lime;
box-sizing: border-box;
}
.slide-container
{
text-align: center;
width: 25%;
display: inline-block;
margin: 0px -4px;
}
Demo

css issue in aligning 3 block equally spaced box

I have a template which has 3 equally spaced boxes, the problem is that i am unable to get the last box to align correctly the first two elements.
how do i add a 3 block equally spaced box in css without tables?
my attempt http://khine.3b1.org/activities/activities.html
any advise much appreciated.
thanks
Make all three boxes float left:
.box ul.supports-list li.last {
width: 200px;
position: relative;
float: left;
}
And provide more width overall:
.box .holder .frame {
background: url(./box-b.gif) no-repeat 0 100%;
width: 620px;
padding: 18px 4px 42px 16px;
}
try to change the next CSS rules to:
.box ul.supports-list {
font-size: 11px;
list-style: none outside none;
margin: 7px 0 0;
overflow: hidden;
padding: 0;
}
.box ul.supports-list li.supports-list-item {
display: list-item;
float: left;
outline-style: none;
width: 200px;
}
.box ul.supports-list li.last {
float: left;
width: 200px;
}
My guess would be to put each box into a div, and then adjust each div's margin-left and margin-top properties to get them to all line up. You'd also want to set the float property of all of the boxes to left. It might not be the most-widely-accepted way of doing things, but that's how I usually solve problems like this.
You can take a look at this example jsFiddle I did for you here: http://jsfiddle.net/Cwca22/g8x5E/ - Hope this helps!