So, I've been trying to make a div go straight across a webpage. Although, it still has space on the left side.
Here's my css:
div.transbox {
width: 100%;
background-color: black;
border: 1px solid black;
opacity: 0.6;
filter: alpha(opacity=60); /* For IE8 and earlier */
width: 100%;
width: 100vw;
}
div.transbox p {
margin: 5%;
font-weight: bold;
color: white;
}
And here's a codepen: http://codepen.io/pen/
If you can, explain how to remove that space on the left, or if I'm using the wrong code.
Your problem is because you've not cleared the body's default margin, like so:
body {
margin: 0;
}
If you refer to the w3c specs for the body element you'll see it has a default value of 8 pixels.
Related
I am working on my website and new to it. I have lots of buttons in my website but there position changes when the screen resolution is minimized. I have also provided my CSS code. Please help me what to do to make my buttons positioned automatically with different screen resolution.
/* Set a style for the submit/send button */
.form-container .btn{
background-color: #009900;
color: white;
border: none;
cursor: pointer;
opacity: 0.8;
}
.form-container .send{
margin-top: 38.5%;
margin-right:-17.5%;
padding: 5px 52px;
}
/* Add a red background color to the cancel button */
.form-container .cancel {
background-color: red;
padding: 5px 10px;
margin-top: -10px;
margin-bottom: 6.5px;
width: 48%;
}
Click here to see the snapshot!
use position:relative for parent div. after, use position:absolute and top, bottom, left, right values for children. position:relative positioning according to itself.
try this
/* Set a style for the submit/send button */
.form-container {
position:relative;
}
.form-container .btn{
background-color: #009900;
color: white;
border: none;
cursor: pointer;
opacity: 0.8;
}
.form-container .send{
position:absolute;
top: 38.5%;
right:-17.5%;
padding: 5px 52px;
}
/* Add a red background color to the cancel button */
.form-container .cancel {
background-color: red;
padding: 5px 10px;
position:absolute;
top: -10px;
bottom: 6.5px;
width: 48%;
}
Few things that could be fixed.
First, you should use position:absolute for children elements of .formContainer. This helps in calculating position of the children(button in your case) based on the parent.
Secondly, using -ve margin creates more problems than it solves. Its better to use top, left, etc to position your elements.
.cancel{
position:absolute,
right: -10px,
width: 5%
}
This would ensure that the btn does not go beyond your form container and always renders 10 pixels to the right border of the container.
I have a problem with a border in Chrome. The green border has some grey lines.
Firefox: not visible -> ok!
Chrome: not visible but visible in the dev tools, mobile phone.
Chrome on my phone: visible
Here is a screenshot that shows my problems!
https://abload.de/img/cssiee7s.jpg
1) When you go to http://www.seelenpuls.at/hpneu/m_biografie_leander_de.php
there are two small grey lines
2) When you go to http://www.seelenpuls.at/hpneu/m_neues_de.php there are even more problems.
3) The menu button has an orange border (mobile only) ... and I don't know why as there is no such color in my CSS.
Please help!
Here's the code. The bold part is the border that causes the problems.
* { padding: 0; margin: 0; }
body
{
font-family: sans-serif, Verdana, Arial;
color: #000000;
background-color: #556B2F;
}
#center {
position: relative;
width: 350px;
height: 630px;
box-sizing: border-box;
margin: 5px auto 0px auto;
}
#logo {
position: absolute;
width: 350px;
height: 220px;
background-color: #ffffff;
box-sizing: border-box;
background-image: url("img/m_bg_c.jpg");
background-repeat: no-repeat;
background-size: 350px 220px;
}
#navi
{
position: absolute;
top: 175px;
width: 60px;
height: 40px;
font-size: 16px;
color: #000000;
background-color: #ffffff;
margin-left: 10px;
}
#header
{
position: absolute;
top: 187px;
width: 238px;
height: 30px;
font-size: 16px;
color: #000000;
left: 85px;
}
#content
{
position: absolute;
top: 218px;
width: 350px;
box-sizing: border-box;
color: #000000;
background-color: #ffffff;
font-size: 14px;
overflow: auto;
padding-left: 5px;
padding-right: 5px;
**border-bottom: 5px solid #556B2F**;
}
Ok so there is a couple of things that are going on in your css.
White lines
For your content div, I would use a width of 100% for mobile devices now, as you scale to tablets and desktops you can change to a more fixed or fluid width. I would also remove the border bottom property. This is not fully extending to the width of the content box and I am unsure if it has to do with the border-sizing property you are using. I would also apply the border-sizing this way so it is applied to every element in your html
* {
box-sizing: border-box;
}
Orange border - this is caused by the :focus pseudo css property of the button you are using, you can remove it this way
button:focus {
outline: none;
}
CSS Normalize or CSS Reset - consider using one of these stylesheets in your website. They help you rendering all elements more consistently through all browsers. This will save you the time of remove the :focus property, like I mentioned above in any project moving forward. Most popular CSS frameworks utilize this to normalize basic styles.
Link to Normalize.css
The purpose:
I am working on a code similar to this to create a component where an input field has an embedded button:
http://codepen.io/anon/pen/pgwbWG?editors=110
As you can see, the button is positioned absolutely with top and bottom set to 0, to achieve a 100% height element.
Also to note is that the border of the text-input must stay visible and also wrap the button.
To achieve this I added a margin: 1px to the button so that there is (should be) space to display the surrounding text-input red border (usually when the input field content is invalid).
The problem:
is that on Firefox it is (mostly) rendered correctly, while on Chrome (and apparently on the newest Safari) it will have a 1px gap at the bottom of the button.
CSS seems ok but it appears to be a calculation/rounding problem in the rendering, where the bottom or the top margin of the button are not really 1px (can see it inspecting the element).
And also the padding of the input seems to influence in that.
At different zoom-rates it will add or remove 1px of margin to the top or the bottom of the button, resulting in a 1px-gap or in a covered-border.
As I set the button margin to 0px then the bottom margin is fixed but I loose the 1px margin on the top, finishing to cover the red border of the text-input.
The examples:
Probably I am not clear or too verbose in explaining it, so here are some screenshots of the bug, from different zooms on Chrome (note the CSS is always the same):
The solution:
I was not able to find a cross-browser solution.
How to deal with it and get a consistent component?
(no Javascript please)
As you already know, the problem arises from a different approach to subpixel calculus between browsers
In Chrome, for instance, borders can have a fractional size, but margins are handled different (as integers).
I don't have documentation about it from the Chrome team, but it's what can be seen in dev tools:
AFAIK, there is not a way to change that.
Instead, you can transfer the use of the margin in the button to a border.
Since you need to get space for the 1px border of the input, do the same in the button, set a 1px border (instead of a margin), and set it transparent.
The remaining trick is to set the background-clip property to padding box, so that this transparency is not affected by the background
There is another bug in Chrome, the padding expressed in em is not reliable at this level of precision when the browser is zoomed. I changed this in the snippet.
Since we are using the border button to get the dimension ok, we can style the border using instead a inset shadow.
* {
margin: 0; padding: 0; box-sizing: border-box;
}
button, input, wrapper {
display: inline-block; border-radius: 3px;
}
.wrapper {
position: relative;
width: 60%;
margin: 1em;
background-color: #ccc;
}
input {
border: 1px solid red;
width: 100%;
background-color: limegreen;
line-height: 3em;
/* padding: 0.75em; */
padding: 10px;
}
button {
position: absolute;
right: 0;
top: 0;
bottom: 0;
border: 1px solid transparent;
width: 7em;
margin: 0px;
background-clip: padding-box;
box-shadow: inset 0px 0px 0px 2px black;
}
<div class="wrapper">
<input type="text">
<button>Test</button>
</div>
Another example, where the button has a border. But we need a wrapper around it to get the dimensions ok.
* {
margin: 0; padding: 0; box-sizing: border-box;
}
button, input, wrapper {
display: inline-block; border-radius: 3px;
}
.wrapper {
position: relative;
width: 60%;
margin: 1em;
background-color: #ccc;
}
input {
border: 1px solid red;
width: 100%;
background-color: limegreen;
line-height: 3em;
/* padding: 0.75em; */
padding: 10px;
}
.buttonwrap {
position: absolute;
right: 0;
top: 0;
bottom: 0;
border: 1px solid transparent;
width: 7em;
margin: 0px;
background-clip: padding-box;
}
button {
position: absolute;
right: 0px;
top: 0;
bottom: 0;
width: 100%;
border: 2px solid blue;
margin: 0px;
}
<div class="wrapper">
<input type="text">
<div class="buttonwrap">
<button>Test</button>
</div>
</div>
Use http://autoprefixer.github.io/ to get the cross browser support you need for display: flex;
button, input, wrapper {
display: inline-block; <----- Remove "display: inline-block;"
border-radius: 3px;
}
.wrapper {
position: relative;
display: -webkit-box;<----- Add "display: flex;"
display: -webkit-flex;<----- Add "display: flex;"
display: -ms-flexbox;<----- Add "display: flex;"
display: flex;<----- Add "display: flex;"
width: 60%;
margin: 1em;
background-color: #ccc;
}
Extra reading and learning material:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
http://flexbox.io/#/
https://philipwalton.github.io/solved-by-flexbox/demos/holy-grail/
http://www.sketchingwithcss.com/samplechapter/cheatsheet.html
Note: to overide a flex rule you will need to use flex shorthand rather than specific over-ride due to current browser shortfalls eg.
.item {
flex: 0 0 300px;
}
/* overide for some reason */
.item {
flex: 1 0 300px;
}
/* NOT */
.item {
flex-grow: 1;
}
You MAY need to do an over-ride for ie11:
.ie11std .wrapper {
display:table;
}
.ie11std .item {
display:table-cell;
}
although this won't be responsive.
I'm trying to use CSS divs to add images to my site. I'm using background-image:url(""); but the image doesn't appear when loading the site.
The images I'm referencing are in the same folder as my style.css, and I quadruple-checked that I wrote the file names correctly.
Any help is very much appreciated. Thank you.
CSS:
div#logo {
background-image:url(dm-button2.png);
height: 120px;
width: 120px;
position:absolute;
z-index: 100;
background: blue; /* #333333; */
padding: 0px;
margin: 0px auto;
display: inline;
}
HTML: (Am I missing something here?)
<div id="logo">
</div>
div#logo {
background:url(dm-button2.png) blue;
height: 120px;
width: 120px;
position:absolute;
z-index: 100; /* #333333; */
padding: 0px;
margin: 0px auto;
display: inline;
}
try this, your second background is rewriting the first
use this:
div#logo {
background-image:url(dm-button2.png);
height: 120px;
width: 120px;
position:absolute;
z-index: 100;
background-color: blue; /* #333333; */
padding: 0px;
margin: 0px auto;
display: inline;
}
Try replacing Background image and background with something like this
background: blue url('dm-button2.png') no-repeat fixed center;
I am not 100% sure but i think having background-image followed by background, background will overwrite the background-image call since it loads in order
example FIDDLE HERE
start small and add the other attributes.
div#logo {
height: 120px;
width: 120px;
background:url(http://flyingmeat.s3.amazonaws.com/acorn4/images/Acorn256.png) 0 0;
}
The background image will not display if there is nothing to put a background image on... for example, all you have a div tags but nothing inbetween them.
Add at least a br tag or something to create some space for the image to be displayed.
I having difficulties setting my footer properly. I have a Bottom navigation bar as part of my footer which is working fine(color:#7A7A7A). The issue is with the copy right information that follows. It has an address and phone number. I am wanting that this side of the footer to have a black bakcground(#000). This part is labeled in the css under copyRight which i am not get any results. Any Ideas of what may be wrong?
Here is my Live EXAMPLE.
Thank you
CSS
html, body {
margin:0;
padding:0;
height:100%; /* needed for container min-height */
background:#333333;
font-family: trebuchet, 'trebuchet ms', 'tahoma', sans-serif;
font-size:small;
color:#5e5e5e;
line-height: 130%;
}
/****** COLORBLOCK: this is the orangey-yellow bar behind the wrapper in the background. ******/
#colorblock {
position: absolute;
top: 60px;
left: 0px;
background: #c69a55;
z-index: 0;
height: 65px;
width: 100%;
padding: 0px;
margin: 0px;
}
/**************************************************/
div#container {
position:relative; /* needed for footer positioning*/
margin:0 auto; /* center, not in IE5 */
width:925px;
background:#f0f0f0;
height:auto !important; /* real browsers */
height:100%; /* IE6: treaded as min-height*/
min-height:100%; /* real browsers */
border-right: 15px solid #000000;
border-left: 15px solid #000000;
}
div#contentArea {
padding:1em 1em 5em; /* bottom padding for footer */
}
div#contentArea p {
text-align:justify;
padding:0 1em;
}
#content {
margin-left: 240px;
margin-right: 0 auto;
background: #ebebeb;
padding: 5px;
width:635px;
height: 400px;
}
/****** TOP BANNER: This is the banner with Greg's List logo and main navigation. Also includes the styles for the main navigation links. ******/
div#header {
/*padding:1em;*/
height: 175px;
border-top:15px solid #000000;
}
div#header p {
margin:0;
}
/****** LEFT COLUMN: This is the left gray column next to the content. Features the styling for the log-in form and the location links. ******/
#left2 {
float: left;
width: 200px;
background: #dddddd;
-moz-border-radius: 10px;
border-radius: 10px;
margin-right: 15px;
padding: 5px;
height: 400px;
}
/****** FOOTER: This is the junk at the bottom of the page. Do NOT remove the clear div; it's what makes it stick to the bottom. ******/
div#footer {
position:absolute;
width:100%;
bottom:0; /* stick to bottom */
background:#7A7A7A;
border-bottom:15px solid #000000;
}
div#footer p {
padding:1em;
margin:0;
}
a.footer {
color: #c7c7c7;
font-size: 80%;
padding-right: 20px;
letter-spacing: 1px;
}
p {
margin:0 0 1em;
}
#copyRight{
background:#000;
color: #FFF;
font-size: 75%;
bottom: 0;
}
.left{float:left;}
.right{float:right;}
</style>
You're floating the contents of #copyRight so it needs to be floated in order to contain them properly. Add this to #copyRight:
float: left;
width: 100%;
Read Brilliand detailed explanation below
Add overflow:hidden in #copyRight
So your CSS should look like this:
#copyRight{
background:#000;
color: #FFF;
font-size: 75%;
bottom: 0;
overflow:hidden
}
The problem you are having is that most elements, including divs, do not by default expand to contain floating elements. Since everything within copyRight is floating, it behaves as though it were empty, and shrinks to nothing.
There are many ways to make an element expand to contain floating elements. My personal favorite is to set overflow to just about anything - hidden being the most common.
#copyRight{
overflow: hidden;
}
Another way is to make the containing element float too, though it's then liable to cause the same problem with the element trying to contain it. Also, floating causes shrinkwrapping, so you have to set an explicit width:
#copyRight{
float: left;
width: 100%;
}
A similar result can be achieved using various display declarations, such as display: inline-block. This avoids propagating the problem to the parent element:
#copyRight{
display: inline-block;
width: 100%;
}
Apparently back in 2004 it was considered a wonderful new idea to solve such a problem by inserting a clearing element with the :after pseudo-class instead of the older method of adding a <div style="clear:both;"></div>. Those tricks would also solve your problem, though clearing floats and containing them are not quite the same thing.