1 Invisible horizontal line? Thu Dec 23, 2010 3:27 am
Guest
Guest
Alright,so me with Gangstar15 tried to make a template for my upcoming site version..and at the code there was a horizontal line which if i removed messed up the whole template.
Yeah,i know it looks bad!Thats what i tried to do.Replace it with something else.Used
but nothing still messed the page up.Then i said "Lets think outside the box!" (dion ) .So just wondered,why not make the horizontal line invisible?
Never tried it before,also didnt think it was possible.So,i placed all the css selectors i knew into the css,and heres what i got:
I said,hmmm...why shouldnt that work?Looks clear to me .Clicked "preview" and......
So what i learnt is:
Nothing is impossible with web design.Just think outside the box!
- Code:
<hr style="margin-top: 250px; height: 1px; border-top: 1px solid rgb(17, 17, 17); border-bottom: 1px solid rgb(51, 51, 51); width: 98%;">
Yeah,i know it looks bad!Thats what i tried to do.Replace it with something else.Used
but nothing still messed the page up.Then i said "Lets think outside the box!" (dion ) .So just wondered,why not make the horizontal line invisible?
Never tried it before,also didnt think it was possible.So,i placed all the css selectors i knew into the css,and heres what i got:
- Code:
hr {
background: none;
border: 0;
clear: both;
display: block;
float: none;
font-size: 0;
padding: 0;
overflow: hidden;
visibility: hidden;
}
I said,hmmm...why shouldnt that work?Looks clear to me .Clicked "preview" and......
- Spoiler:
- Tadaaa!!!Finally the horizontal line was gone and it didnt mess up the page!
So what i learnt is:
Nothing is impossible with web design.Just think outside the box!