http://jsfiddle.net/Zmpyv/6/
I have a page, where I use <div> to style the sheet. The problem is that it creates a border around the page. How can I remove this border? Check out the jsfiddle to see what I mean. I am using position: static; I do not want to use fixed because then the page won't scroll correctly.
Perhaps you're just talking about the native margin on <body>. Try this;
body {
margin: 0;
}
Check out http://jsfiddle.net/Zmpyv/8 where I added the above CSS to your demo.
To avoid spending time fighting silly things like this, I recommend you have a look at normalize.css which applies this style for you, along with fixing a host of other discrepancies between browsers and in my opinion gives you a better starting point when authoring CSS.
Try setting this in div.
border:none
This will remove the border of any element..
<div class="headerClear" /></div>
see this div has unexpected close the right method is
<div class="headerClear"></div>
replace with this and add this to your css
body{ margin:0px;}
Related
I'm sure my question is quite a newbie one, anyway I can't figure out what I'm doing wrong. Basically, I created a <div> that I use as header, and inside of it another <div> that contains an image (logo) and a title (using <h1>).
The problem is that I get an unwanted extra space above the body
as you can see in this picture.
If I get rid of the <h1> title then everything is fine. I think the problem is due the float: left; property that I have assigned to the image, because if I assign no float property then the space disappears, but as you can see if I remove the float: left; the image and the title are not "aligned" anymore. So, the question is, how can I make the image to stay on the left and the title on the right of the image, without using float properties?
Any help will be appreciated, thanks!
Edit: Thanks everybody for the answers, I'm studying HTML and CSS at school and things like this are rarely mentioned by my teachers. Thanks again
A h1 element has margin by default. Simply remove it by adding:
margin: 0;
To the styles for your h1 element.
you can use this:
<h1 style="margin-top:0px; padding-top:0px">some text</h1>
At start of your work you should clear the style for margin (browser apply some of them).
So just in start of css file write:
h1 {
margin: 0;
}
A lot of devs just start a css file like :
* {
margin: 0;
padding: 0;
}
for clear it :)
Also you should read something about css reset and css normalize :)
This is because every browser has a default stylesheet, which you can find in Browsers' default CSS stylesheets. As you can see, the default margins are not zero. This can be solved by explicitly adding margin: 0px to your CSS.
I'm new to CSS. I've got a deceptively simple problem. This is a fiddle of a simple page.
http://liveweave.com/c6j68I
The objective is to show a fixed 900px white div centered against a coral background.
I've tried to achieve this using two divs maked #outerWrapper and #wrapper.
However, the whole page still seems to have a white background, which seems to be connected to the body tag. (Please use the fullscreen mode to see it).
If I give the body the background color of the #outerWrapper, again, the color appears on the top and bottom of the page too, which is undesired. (Please uncomment the CSS of body to see this.)
I've tried using the article tag; using negative margins; and changing dimesions of the body tag. Nothing seems to work.
In simple terms, a want a 'columned' look: coral-white-coral; instead of the 'boxed' look I currently have.
Please help.
Just add a style for the body in your CSS and set the margin to 0px, like so:
body {
margin: 0px;
}
Because most major browsers, the default margin is 8px on all sides. It is defined in pixels by the user-agent-stylesheet your browser provides.
If you want to change it, you can just do this, add it on your css
* {
padding:0;
margin:0;
}
Want to be more complete?
use normalize.css. It resets a lot of default values to be consistent across browsers.
Try adding the following
<style>
body,html {height:100vh; width:100vw; padding:0; margin:0;}
</style>
Body has default margins set by the browser (most browsers set default styles to different elements and they can vary depending on the browser) as seen below in developer console.
Note: In most browsers you can open the developer console by pressing F12 on your keyboard:
Just set the following css to avoid it:
html, body {
margin: 0;
padding: 0;
}
Demo: http://liveweave.com/EzWH0o
I have updated my code and made a fiddle which explains what I am trying to do. I had a similar question before but it did not reflect the fluidity of the template.
I have a totally fluid layout and I need to make a div display under another.
I want to do it with CSS and I'd prefer not to use javascript or jquery.
Here is the fiddle:
http://jsfiddle.net/sexywebteacher/7hCNC/20/
I was maybe unclear:
I am talking about the section1 and section2 divs in the fiddle
Do you think this can be done?
Thank you!
If both the height of the image and the text are variable, it's not particularly easy with pure CSS.
The height being variable rules out anything based on position: absolute, as in the answers you received to your previous similar question.
One option is to use the technique shown here: http://tanalin.com/en/articles/css-block-order/
It is possible to change vertical order of blocks on HTML page using
CSS table presentation using properties of display: table family.
Regardles of block order in HTML code, header (table-header-group) of
such table is displayed at the top of it, footer (display:
table-footer-group)—at the bottom, and table body
(table-row-group)—between header and footer.
This works in all modern browsers, and IE8 if you're careful. It does not work in IE6/7.
Here's your code using this technique: http://jsfiddle.net/thirtydot/7hCNC/35/
I have to admit that I've never used this technique on a production website, so please test thoroughly.
A different approach that will work in all browsers that support CSS3 2D transforms is to vertically flip the whole container, and then do the same to the "image" and the "text" elements. In browsers that do not support CSS3 transforms, everything will still work, but the "image" and "text" elements will be in their original order. In other words, it degrades nicely. It's probably possible to make this work in IE6-8 using filter, but that would make the text look horrible, so forget about it.
Here's your code using this technique: http://jsfiddle.net/thirtydot/7hCNC/36/
If none of these CSS methods are good enough, you'll have to use JavaScript.
However, I personally recommend that you just switch the order in the HTML. I doubt Google cares about it. In this case, I really doubt that bending over backwards to keep your HTML in the "optimum order" will have any meaningful SEO impact.
Add to floating div "clearfix" class where in CSS
.clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; overflow: hidden; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }
For ex:
<div class="column clearfix">
...
</div>
You could either change the width to be exact width (or add it as min-width) and let them naturally fall under each other or simply clear which will force them under each other
eg
.clear {
clear:both;
}
your jsfiddle
Here is another example of clear. I like to use this in cases where the element after the clear is not always consistent. It uses the psuedo elements to place a space with the clear attribute.
.clear:after{
content:".";
line-height:0;
height:0;
display:block;
clear:both;
visibility:hidden;
}
I am not sure what is going on here but the rollover is not working correctly and I can't seem to figure it out.
I am using very basic and simple css:
open{visibility:hidden;}
open:hover{visibility:visible;}
http://www.ubhape2.com/messages/files/chameleon/ is the page i am working on
Please forgive the god awful code. I am using it as a simple and quick method. Just need the roll over to work and I am good.
You can use the opacity property:
.open{opacity:0;}
.open:hover{opacity:1;}
The problem is that you can't hover over a hidden element (see Why isn't CSS visibility working?).
The solution posted there is also a good alternative for this issue. There are lots of other ways to do it though, such as a div with an image in the background, like:
<style>
div.open { background: none; width: 137px; height: 49px; }
div.open:hover { background:url('images/chameleon_10.gif'); }
</style>
<div class="open"></div>
Or if you need to use an image, you can use image sprites (http://www.alistapart.com/articles/sprites)
See basic jsfiddle.
Try below code, should work fine
a.open{visibility:hidden;}
a.open:hover{visibility:visible;}
<a class="open" href="">Open</a>
Been a while since I had a CSS related problem but here I am. to cut a long story short I want to highlight text with a gradient background which I have managed to achieve using the <span> tag and setting a background image onto it. The problem is it startes to get a bit trippy and breaks when the text goes on to a new line.
I have managed to fix it but the HTML is horrible and I don't like compromising HTML code for style purposes as a rule.
The best way to describe this is just to show you.
http://jsfiddle.net/sambeckhamdesign/2HSqh/11/
The top <li> is the good HTML with the broken style and the botom <li> is how it's supposed to look but with awful HTML markup.
Any solutions obviously appreciated. Don't mind using Javascript or jQuery but I'd rarther do it in CSS if I could.
Ta pets :)
I can provide you the css hacks working only for firefox and safari
::selection {
background: #ffb7b7; /* Safari */
}
::-moz-selection {
background: #ffb7b7; /* Firefox */
}
Reference:
http://www.catswhocode.com/blog/10-astonishing-css-hacks-and-techniques
Hope this help :)
The only method (that does not need extra markup) that i can think of would be to use a repeating background-image that has exactly the height of a line. This should work properly and fast if your line-height is constant. All other approaches are likely to be quite slow or bulky.
The best way I could se to do this in the end was to use the <span> tag. I hate doing this and try to avoid it when I can but it needed to be used in this case. See the updated JS fiddle in the question for how I did it.
Maybe this provides what you want
ul#container li.hilight {
padding:3px 20px;
background:url('http://www.sambeckhamdesign.com/_images/rain_1.jpg') left repeat-y #c06;
line-height:30px;
color:#fff;
}
and
<li class="hilight">
This is how the text should look
<br />
but the HTML markup is messy
</li>