I was trying to make a border glued to the sides of the screen how represents the picture below :
Picture of how i want
I have html code, but i don´t know if i´m doing in the best way. Can you guys help me?
DIV Rectangle HTMl
<div class="content">
This is a rectangle!
</div
DIV Rectangle CSS:
.content {
width:100%;
min-height: 150%;
border:1px solid #FFFF;
border-width: 100%;
background-color: #FFFF;
border-radius: 5px;
padding-bottom: 50%;
}
It is like this:
Picture of how it is
I want to remove this spacing between border and screen, is it possible to do that?
There are 2 solutions:
You can remove your parent block paddings (set it to 0)
You can wrap your .content with an additional block and set its margins to negative values (adjust numbers to fit your layout):
.wrapper { margin: 0 -5px; }
Divs are block-level elements and will take the full width that is available. So, the issue isn't actually the .content div. It's likely that the body has a margin still set on it. It will probably take care of it if you add:
body { margin: 0; }
This is just a guess that it's on the body, but really it's whatever parent or ancestor has margin or padding.
Same problem here
*,html {
margin:0;
padding:0;
}
Hope this helps, "*" will set the whole page to 0
Related
I want to add padding in my hr,
hr {
padding-left: 200px;
}
but it's not working. how to add padding in my hr ?
Padding does not work in hr.
You have to use margin instead:
hr {
margin-left: 200px;
}
And it'll work.
Before adding padding, you should have to set a width for your hr otherwise it will display in full width.
hr:first-of-type{
width: 100px;
padding-left: 10px;
}
hr:last-of-type{
width: 100px;
padding-left: 50px;
}
<hr>
<hr>
Thanks and best regards!
HR is slightly different from most HTML tags in its defined behaviour, as it tries to fill up the whole width of the containing element.
The only way I know to stop it expanding over any margins is to explicitly set a width attribute
hr {
width: 90%;
padding-left: 200px;
}
Even then, it seems to ignore the padding, so you should use a margin instead:
hr {
width: 90%;
margin-left: 200px;
}
It's still kind of scrappy and imprecise. If the ruled line needs to be in line with some other element, you're probably best ensuring that they are in the same DIV, so that the ruled line can start at the left margin of the div.
As Python mentioned, padding does not work with hr
A good solution would be to place the hr inside a div
Another workaround (not recommended, more like a band-aid) would be to create a div and apply styling to it to create a line, particularly add a single border to it
For example,
<div class="divider"></div>
And for the styling
.divider {
border-top: 1px solid #081521; /* Create the border, i.e. Divider */
margin: 1rem auto; /* Add a Margin and Center the divider */
}
I created a div where I plan to a title for my webpage, I set the width to 100% but there was still white on the sides and top. I got the top to disappear but the sides won't, I assume it's got something to do with the movement of the div, I've checked everywhere, but everyone has different divs for different purposes so I couldn't find the answer. In case you guys wanna show an example of your solution you could do so here
Here is the HTML:
<div id="toptitle">
</div>
For my CSS I tried using margin-left: -8px and the same for the right side but they don't work like that, it's only movement of the div and even when I don't set the left side yet the right still won't move till there's isn't a white gap:
#toptitle {
width: 100%;
height: 140px;
background: #42647F;
margin-top: -15px;
}
Reset your body margin. Also make a research for reset css.
body {
margin: 0;
}
Add margin: 0 to the body :
body{
margin:0;
}
You are missing body margin, please have a look at the below working snippet taken from your codepen. and there is no need to have negative top margin too.
body {
margin: 0
}
#toptitle {
width: 100%;
height: 140px;
background: #42647F;
}
<div id="toptitle">
</div>
The body tag has a default margin of 8px which you have to remove. So just add this to your code:
body{
margin:0;
}
You should also remove margin-top:-15;
Hope this is clear to you!
I'm trying to build a 'table' with CSS but I'm having trouble getting some of the <DIV>s to fill the width of the layout if the content is too short.
It's difficult to explain in words so here's a fiddle:
https://jsfiddle.net/fatmonk/r2sodp7p/
Basically I don't want to see the pink bit in the example - I want the light blue box to expand to fill the width regardless of how much or how little content is in it.
Using display: table-row does the right thing with regards filling the line, but doesn't allow a border to be set.
(The fiddle isn't the whole page - there are more 'rows' to add and the whole 'table' will be repeated with link sand link code and other bits and pieces.)
It's quote possible that in the process of trying to get this working I've over-complicated the HTML as well - I've ended up adding container <DIV>s to try to force the width, so it may be that the HTML needs trimming down as well, but I've run out of ideas.
Remove width:auto from the inline style tag of all .menuContentInPopup and add width: 100% to it in your css, so
<div id="poster2" class="menuContentInPopup" style="width: auto;">
would become
<div id="poster2" class="menuContentInPopup">
And the css:
.menuContentInPopup{
display: table;
height:auto;
border: 1px solid rgba(99,99,99,.75);
border-top: none;
background-color:rgba(235,245,255,1);
padding:5px;
font-size: 10pt;
text-align: justify;
left: 0px;
right: 0px;
float: none;
width: 100%;
}
Here a fiddle showing the result: Fiddle.
I have also adjusted the box-sizing of all elements so that adding padding to the elements does not make it overflow its parent when width is 100%, this is achieved by
* {
margin: 0;
padding: 0;
}
*, *:before, *:after {
box-sizing: inherit;
}
body {
box-sizing: border-box;
}
i might understood it wrong but here is how i would fix it.
[Fiddle][1]
I changed the width to 100% so it will fill your full div. Also removed the width: auto in the HTML.
[1]: https://jsfiddle.net/r2sodp7p/10/
FYI, another clean solution for your case here:
[http://jsfiddle.net/giaumn/f99ub6ro/]
You just need to care about 2 properties:
overflow: auto;
on .menu-content and
float: left;
on .poster-thumb
set your width:auto; to width:100%; and add width:100%; to menuContentInPopup class. remove width:auto from html inline styles.
fiddle
I have the whole page set to gray as the background color, but would like only the content area to be set to a different color. According to my CSS, this should be happening but it isn't. Why not?
html,
body {
background-color: #FAFAFA;
}
#page-wrapper {
margin: 0 auto;
padding: 0;
width: 1024px;
}
#content {
background-color: blue;
}
OK, well, I thought there might be an obvious answer, because this is a severly slimmed-down version of my code. Yes it has content and there are things in the page-wrapper.
The jsfiddle link is here: http://jsfiddle.net/2pzo80Lu/
Also, if anyone has critiques of the code otherwise, it would be much appreciated.
You need to add overflow:auto to your rules for #content because the children are floated. Floating them essentailly removes them from the normal flow and collapses the parent since it behaves as if there's no content. Adding the overflow rule restores the behavior you seek.
#content {
background-color: blue;
overflow:auto;
}
jsFiddle example
your elements inside #content div is floated right and left so the div has no height ( 0px ) , you can solve this in css by adding the following code
#content {
background-color: blue;
overflow:auto;
}
or in html by adding the following code before the close of the element of #content
<div style="clear:both;"></div>
this will clear any floating and you code should work very will. good luck
I'm trying to get my horizontal rule to ignore the parent padding.
Here's a simple example of what I have:
#parent {
padding:10px;
width:100px;
}
hr {
width:100px;
}
You will find that the horizontal rule extends out of the parent by 10px. I'm trying to get it to ignore the padding that everything else in the parent div needs.
I'm aware that I could make a separate div for everything else; this is not the solution I'm looking for.
Easy fix, just do
margin:-10px
on the hr.
For image purpose you can do something like this
img {
width: calc(100% + 20px); // twice the value of the parent's padding
margin-left: -10px; // -1 * parent's padding
}
In large this question has been answered but in small parts by everyone. I dealt with this just a minute ago.
I wanted to have a button tray at the bottom of a panel where the panel has 30px all around. The button tray had to be flush bottom and sides.
.panel
{
padding: 30px;
}
.panel > .actions
{
margin: -30px;
margin-top: 30px;
padding: 30px;
width: auto;
}
I did a demo here with more flesh to drive the idea. However the key elements above are offset any parent padding with matching negative margins on the child. Then most critical if you want to run the child full-width then set width to auto. (as mentioned in a comment above by schlingel).
Another solution:
position: absolute;
top: 0;
left: 0;
just change the top/right/bottom/left to your case.
Kinda late.But it just takes a bit of math.
.content {
margin-top: 50px;
background: #777;
padding: 30px;
padding-bottom: 0;
font-size: 11px;
border: 1px dotted #222;
}
.bottom-content {
background: #999;
width: 100%; /* you need this for it to work */
margin-left: -30px; /* will touch very left side */
padding-right: 60px; /* will touch very right side */
}
<div class='content'>
<p>A paragraph</p>
<p>Another paragraph.</p>
<p>No more content</p>
<div class='bottom-content'>
I want this div to ignore padding.
</div>
I don't have Windows so I didn't test this in IE.
fiddle:
fiddle example..
If you have a parent container with vertical padding and you want something (e.g. an image) inside that container to ignore its vertical padding you can set a negative, but equal, margin for both 'top' and 'bottom':
margin-top: -100px;
margin-bottom: -100px;
The actual value doesn't appear to matter much. Haven't tried this for horizontal paddings.
margin: 0 -10px;
is better than
margin: -10px;
The later sucks content vertically into it.
Here is another way to do it.
<style>
.padded-element{margin: 0px; padding: 10px;}
.padded-element img{margin-left: -10px; width: calc(100% + 10px + 10px);}
</style>
<p class="padded-element">
<img src="https://images.pexels.com/photos/3014019/pexels-photo-3014019.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940">
</p>
Here are some examples on repl.it: https://repl.it/#bryku/LightgrayBleakIntercept
Your parent is 120px wide - that is 100 width + 20 padding on each side so you need to make your line 120px wide. Here's the code. Next time note that padding adds up to element width.
#parent
{
width: 100px;
padding: 10px;
background-color: Red;
}
hr
{
width: 120px;
margin:0 -10px;
position:relative;
}
If your after a way for the hr to go straight from the left side of a screen to the right this is the code to use to ensure the view width isn't effected.
hr {
position: absolute;
left: 0;
right: 0;
}
The problem could come down to which box model you're using. Are you using IE?
When IE is in quirks mode, width is the outer width of your box, which means the padding will be inside. So the total area left inside the box is 100px - 2 * 10px = 80px in which case your 100px wide <hr> will not look right.
If you're in standards mode, width is the inner width of your box, and padding is added outside. So the total width of the box is 100px + 2 * 10px = 120px leaving exactly 100px inside the box for your <hr>.
To solve it, either adjust your CSS values for IE. (Check in Firefox to see if it looks okay there). Or even better, set a document type to kick the browser into strict mode - where also IE follows the standard box model.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
...
http://www.quirksmode.org/css/quirksmode.html
You just need to add negative margins to the child that match the padding of the parent. No need to set a width, change the box-sizing, or use absolute positioning.
#parent {
padding: 10px;
width: 100px;
}
hr {
margin-right: -10px;
margin-left: -10px;
// For modern browsers you can use margin-inline: -10px
}
The reason you don't need to set a width is because the hr element is a block element. It's width defaults to "auto", which means it will expand to fill it's parent (minus padding, margin, and border).
easy fix.. add to parent div:
box-sizing: border-box;