I'm working with a div that isn't positioned on the absolute left of the page, all I get is this.
Is there a way I can fix this? I've tried using many methods.
CSS:
#Hello {
background-color: #1c1c1c;
width: 200px;
height: 200px;
float: left;
}
Result
html, body { padding : 0; margin : 0; }
Add html, body { margin: 0; padding: 0 } to your styles. A common technique is to use a reset stylesheet like this to avoid these default browser styles.
Related
I am using sb-admin project how to set CSSpage wrapper ... it shows small background. I don't know why.
please check
body {
background-color: #000216;
height:100%;
}
#wrapper {
width: 100%;
height: 100%;
}
#page-wrapper {
padding: 0 15px;
min-height: 100%;
background-color: #F4E8FF;
}
If you're talking about the colored background not expanding with the content...I would try adding float:left on the wrapper and page-wrapper selectors in your CSS.
There is some whitespace to the left of the header. How can i get rid of this?
.h {
background: url('../Content/images/headlogo.png') no-repeat center;
display: block;
height: 93px;
background-color: #D60024;
}
I want it to stretch from the beginning to the end.
JSFiddle
Add this too your CSS:
html, body {
margin: 0;
padding: 0;
}
This is either the margin or the padding for the body or the whole html document, either set html, body {maring:0; padding:0} or use a css reset like Eric Meyer's.
Demo
body{
margin: 0;
padding: 0;
}
.h {
display: block;
height: 93px;
background-color: #D60024;
}
The easiest way to reset styles is to set the margin and padding on all elements to zero
CSS Reset looks like this:
*{
margin:0;
padding:0;
}
JSFiddle URL
Currently, I'm using
<hr align="left" />
on my HTML5 page, but I've read that the align property was deprecated in XHTML 4.01 and supposedly removed from HTML5. I'd like to be using CSS rather than an inline attribute like this, but when I tried
hr{align: left; max-width: 800px;}
or hr{text-align: left;} or hr{left: 0;} or hr{float: left;}, it just showed up in the center.
So what should I use instead of the inline attribute above?
One option would be to set the left margin to zero:
hr{max-width: 800px; margin-left:0;}
You're trying to use something in a way that (as Eliezer Bernart mentions.. and apparently that comment with the link to the MDN doc disappeared) no longer "works that way". You can, as long as you don't mind it being screwy in IE, just set the margin to zero - http://jsfiddle.net/s52wb/
hr {
max-width: 100px;
margin: 0px;
}
A better idea though would be to mimic the HR's old way of doing things by way of CSS without the use of the HR. Check out http://jsfiddle.net/p5ax9/1/ for a demo:
p:first-child:before {
display: none;
}
p:before {
content: " ";
border: 1px solid black;
margin-top: 15px;
margin-bottom: 15px;
display: block;
max-width: 100px;
}
I don't know what browsers were used for some above answers, but I found neither text-align:left nor margin-left:0 worked in both IE (11, Standards mode, HTML5) and Firefox (29).
IE11: text-align:left works, margin-left:0 leaves rule centred.
FF: margin-left:0 works, text-align:left leaves rule centred.
So, either use both, or I found that margin-right:100% works for both!
You can use div tag instead.
<div style="border: thin solid lightgray; width: 100px;"></div>
do this
hr {
display: inline; //or inline-block
text-align: left;
}
<hr> tags have margin-inline-start and margin-inline-end properties set to auto, which centers the element horizontally (similar to setting both left and right margins of an element to auto).
To left-align an hr tag, you can set margin-inline-start to 0:
hr {
margin-inline-start: 0;
}
...and you can right-align an hr tag by setting margin-inline-end to 0:
hr {
margin-inline-end: 0;
}
.line {
height: 2px;
background-color: var(--itemBorder);
color: var(--itemBorder);
}
.width100 {
width: 100% !important;
}
.width90 {
width: 90% !important;
}
.width80 {
width: 80% !important;
}
.width70 {
width: 70% !important;
}
.width60 {
width: 60% !important;
}
.width50 {
width: 50% !important;
}
.width40 {
width: 40% !important;
}
.width30 {
width: 30% !important;
}
.width20 {
width: 20% !important;
}
.width10 {
width: 10% !important;
}
<div class="line width100" />
I have an "article-box" that is used for a few different pages with 2 different widths. I have an image that i would like to display in the top right hand corner of each of these boxes. how could i use css to display the image correctly in the top right hand corner for each box?
i have the following css code which doesn't quite work, thanks in advance.
.wide-article-box {
#extend .article-box;
padding: 20px;
max-width: 900px;
#badge {
position: relative;
max-width:260px;
}
#badge img {
position: absolute;
border-width: 0px;
}
}
and in the view
<div class="wide-article-box">
<!--text etc -->
<div id="badge">
<%= image_tag "BLH_BADGE.png" %>
</div>
</div
.wide-article-box {
#extend .article-box;
padding: 20px;
max-width: 900px;
position: relative;
#badge {
position: absolute;
top: 0;
right: 0;
max-width:260px;
}
#badge img {
border-width: 0px;
}
}
You can look into the float property of CSS. It will also automatically wrap text around the image (or any block element).
#badge {
float: right;
max-width: 260px;
}
P.S. you might also have to use clear css property but that will depend on the nature of the DOM. just read up on on float and clear properties
I'm trying to get a background working with a sticky footer and I've hit a brick wall. For some reason, the blank space underneath body seems to stop at an elastic height above the bottom depending on the window height.
I can't see anything which could cause this and would really appreciate a pointer.
The demo site is at http://myfitzeek.lime49.com
According to your link, you just change
html {
height: 100%;
margin: 0;
padding: 0;
}
#footer{
position: absolute;
....
}
to
html {
margin: 0;
padding: 0;
}
#footer {
position: fixed;
....
}