WebArtz - The Web Design Forum
Welcome to WebArtz, Guest!

WebArtz is a nice place for discussions related to web designing and coding. We help our members to code their own website templates with HTML and CSS. We give them advice on various issues.

To know more about WebArtz Forum, visit the About Us page.

At the moment, you are viewing the forum as a guest. As a guest you can't make post and participate in discussions. You need to register and become a member of the forum. Click the register link below and become a part of this forum.

Thank You

WebArtz - The Web Design Forum
Welcome to WebArtz, Guest!

WebArtz is a nice place for discussions related to web designing and coding. We help our members to code their own website templates with HTML and CSS. We give them advice on various issues.

To know more about WebArtz Forum, visit the About Us page.

At the moment, you are viewing the forum as a guest. As a guest you can't make post and participate in discussions. You need to register and become a member of the forum. Click the register link below and become a part of this forum.

Thank You


You are not connected. Please login or register

View previous topic View next topic Go down  Message [Page 1 of 1]

1Invisible horizontal line? Empty 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.

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 Razz ) .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 Smile .Clicked "preview" and......

Spoiler:

So what i learnt is:

Nothing is impossible with web design.Just think outside the box! Very Happy

2Invisible horizontal line? Empty Re: Invisible horizontal line? Thu Dec 23, 2010 6:38 pm

Guest


Guest
One thing Very Happy all the horizontal lines will be hidden xD
you need to just it a class/ID and write it like this way
Code:

hr.name

nice job anyway xD

3Invisible horizontal line? Empty Re: Invisible horizontal line? Thu Dec 23, 2010 7:45 pm

Guest


Guest
Gangstar15 wrote:One thing Very Happy all the horizontal lines will be hidden xD
you need to just it a class/ID and write it like this way
Code:

hr.name

nice job anyway xD

i know Very Happy i may not be the best but know some things Razz

i added a class at the beginning but found it useless since i used only on horizontal rule in the page,that one.So i used it to hide all of em Smile

4Invisible horizontal line? Empty Re: Invisible horizontal line? Thu Dec 23, 2010 9:35 pm

ankillien

ankillien
Administrator
Administrator
Nice one but not outside the box Razz

5Invisible horizontal line? Empty Re: Invisible horizontal line? Thu Dec 23, 2010 10:04 pm

Guest


Guest
ankillien wrote:Nice one but not outside the box Razz

okay Crying or Very sad

6Invisible horizontal line? Empty Re: Invisible horizontal line? Fri Dec 24, 2010 5:34 am

Guest


Guest
Since you don't want it displayed, there is no reason for the HR tag to be there. So outside the box would be to ask yourself "Why does removing an HR tag mess up the template?". The answer is most likely one of two things: the HR tag is clearing a float, or the HR tag is ending a line created by an inline element.

If you're dealing with inline elements, a BR tag in place of the HR tag will solve your problem.

If clearing a float is the issue, add "clear:left;" as an inline style to the element AFTER the HR tag, then remove the HR tag.

Floated elements are an incredible resource, but they can cause HUGE problems if used incorrectly, and they can be very difficult to debug. Hmm. Maybe after the new year I'll write a tutorial about floated elements...

7Invisible horizontal line? Empty Re: Invisible horizontal line? Fri Dec 24, 2010 2:21 pm

ankillien

ankillien
Administrator
Administrator
I'm quite sure that you are dealing with clearing floats. You can use br instead of hr to clear float. There are couple other methods to do the same. But using br would be the easiest.

@Dion, floats are difficult to learn but more difficult to explain xD Looking forward to read your tutorial.

8Invisible horizontal line? Empty Re: Invisible horizontal line? Fri Dec 24, 2010 2:42 pm

Guest


Guest
XD yeh but when i remove it it messes up the entire page Sad

9Invisible horizontal line? Empty Re: Invisible horizontal line? Fri Dec 24, 2010 4:01 pm

ankillien

ankillien
Administrator
Administrator
Have you tried adding <br style="clear:both;" /> after the floated elements?

If it doesn't work, the bug should be something else, not floats.

10Invisible horizontal line? Empty Re: Invisible horizontal line? Mon Dec 27, 2010 3:14 am

Guest


Guest
i Added the HR tag just to make more space from the logo,navbar & the content (:

11Invisible horizontal line? Empty Re: Invisible horizontal line? Mon Dec 27, 2010 6:12 am

Green CoW

Green CoW
Graphic Designer
Graphic Designer
Why not just add a (for example) padding-bottom: 30px; or padding-top: 30px; to more space from the logo,navbar & the content?

12Invisible horizontal line? Empty Re: Invisible horizontal line? Mon Dec 27, 2010 6:15 am

Terry Harvey

Terry Harvey
Registered Member
Registered Member
Or margin-top

13Invisible horizontal line? Empty Re: Invisible horizontal line? Tue Jan 18, 2011 12:21 am

jayceehailey


Registered Member
Registered Member
Being a laptop that is easier said than done, as the default drivers from the chipset manufacturer has been known to cause problems. Notebook GPU driver may be necessary to reflect changes made by the computer manufacturer.

No other application offers a similar question, but I can try a driver change before canceling AO elephant elephant elephant

http://www.californiateahouse.com/

14Invisible horizontal line? Empty Re: Invisible horizontal line? Tue Jan 18, 2011 8:21 pm

RockerMan

RockerMan
Technician
Technician
jayceehailey wrote:Being a laptop that is easier said than done, as the default drivers from the chipset manufacturer has been known to cause problems. Notebook GPU driver may be necessary to reflect changes made by the computer manufacturer.

No other application offers a similar question, but I can try a driver change before canceling AO elephant elephant elephant

Thats got nothing at all to do with it.....

http://www.graphics-post.com/

15Invisible horizontal line? Empty Re: Invisible horizontal line? Mon Jan 24, 2011 7:01 pm

brandmantra


Registered Member
Registered Member
If you dont need that <hr> then why dont you make it commented !

--
Link Removed - Joph25

http://www.brandmantra.net/

16Invisible horizontal line? Empty Re: Invisible horizontal line? Tue Jan 25, 2011 7:36 am

RockerMan

RockerMan
Technician
Technician
He's a spammer,take a look at the site in his profile. Says his from london yet the company is in india...

http://www.brandmantra.net/customer_service/

http://www.graphics-post.com/

17Invisible horizontal line? Empty Re: Invisible horizontal line? Tue Jan 25, 2011 11:14 am

brandmantra


Registered Member
Registered Member
RockerMan wrote:He's a spammer,take a look at the site in his profile. Says his from london yet the company is in india...

http://www.brandmantra.net/customer_service/

Hey RockerMan,

I work from London and our HQ and development center is in India so that we can provide the services at much low cost in comparison to other companies.



Last edited by brandmantra on Tue Jan 25, 2011 11:17 am; edited 1 time in total (Reason for editing : to provide further info)

http://www.brandmantra.net/

Sponsored content


View previous topic View next topic Back to top  Message [Page 1 of 1]

Permissions in this forum:
You cannot reply to topics in this forum