www.webdeveloper.com
Results 1 to 3 of 3

Thread: [RESOLVED] After styling, link dosn't work

  1. #1
    Join Date
    Jun 2014
    Posts
    8

    resolved [RESOLVED] After styling, link dosn't work

    I need to make something like a "button" for my website navigation bar. Not the button element but a parent link element (a element) in which i put a child div and text, and then styled the div element to look like a button. Thing is, that whithout the CSS styling, the link works perfectly, but when i put the CSS styling, the button doesn't act like a link, the cursor doesn't change, nor anything special is happening, except the styling being visible.
    (Here's a CSS Desk)
    P.S. What you'll see in the document "navspace" may be the cause too, but it's to make as much space from the top as the fixed navigation bar (i want it to always show up).
    Then if the navspace is the problem, could you tell me how i could drop all the content with 90px so that the navigation doesn't overlap the content?

  2. #2
    Join Date
    Jun 2014
    Posts
    8
    *UPDATE*

    Thread is resolved: For those who want to know, navspace was the problem, so i wrapped all the content except the bar in a div called "wrapper" and put the padding-top to the height of the bar.
    I was stupid on this one

  3. #3
    Join Date
    May 2014
    Posts
    818
    My question would be why are you putting a DIV in a Anchor -- I know the HTML-5 tards say it's ok with their goofy nonsensical relaxing of the structural rules, but guess what? It's STILL invalid in ALL prior versions of HTML/XHTML for a reason, and even most "HTML 5 compliant" browsers still choke on it behaving unpredictably.

    Much less you didn't seem to be doing anything to the DIV you couldn't have done to the A... instead of the DIV inside the anchor:

    <a href="link" class="homebtn">Home</a>


    and then:

    Code:
    .homebtn {
    	display:block;
    	position:fixed;
    	left:30px;
    	top:0px;
    	width:60px;
    	height:30px;
    	padding:5px;
    	text-align:center;
    	color:white;
    	background:#63C274;
    	border:solid white;
    	border-width: 0px 4px 4px 0px;
    	-webkit-border-radius: 10px;
    	border-radius: 10px;
    }
    Not sure where you got the idea you can send pixel values to position, but in any case setting the anchor to display:block (or position fixed for that matter) lets it accept vertical padding, height, etc...

    I'd probably also NOT be setting height on that, or padding in PX, or width in px, or border radius in px... or use fixed positioning given how crappy and annoying fixed elements on websites are...
    Java is to JavaScript as Ham is to Hamburger.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles