Link Box Line Problem
Hello everyone, i have tried to searc this problem through and through and don't seem to find it. I don't know how to describe it in other words so:
I have a <div> inside a parent link <a> element. Inside the <div> i put text. I styled the <div> element to look like a box the size of the text (here) but if you have noticed, when hovering the mouse at the same height that the button is (i have put that zone in yellow, remove it if you want, the link stays.
Can you help me? How do I make this link zone as small as the button? I'm going to need to because i want to put more buttons, and space between them. I tried several things but nothing changes.
Thank you in advance.
You have not ended up anchor tag correctly. It became as a comment. Remove the comment section and display block for anchor then it will work.
I don't get you question fully are you putting DIv in anchor tag?
Can you explain clearly what you have done with some codes? If you post some codes then some one can help you out. Try posting it.
Despite HTML 5's claims to the contrary, putting block level tags (like DIV) inside inline-level ones (like Anchor) is broken and buggy cross browser; there is a reason that up until HTML 5 came along it was invalid markup, and it's just another example of why I think HTML 5's "loosened structural rules" is a bunch of grade A farm fresh prairie pies.
DIV is block level, don't put inline level tags like A around it... EVEN if HTML 5-tards say it's ok now.
read the "contents" part -- inline-level tags except A.
Inline level tags:
Those are what can/should go inside an anchor. You use any other tags, you're doing something wrong.
The block level tags:
Cannot go inside ANY of the inline-level tags. Simple HTML structural rules that nobody bothered learning, and now HTML 5 just wants to piss all over.
Mind you that's HTML level, NOT CSS "display" -- two separate things even if the display by default in most cases starts out the same.
Which is why I'd lose the DIV and make the anchor display:block; Or as I often say, just as George Carlin said "not every ejaculation deserves a name" not every semantic tag needs a div around it or a class on it. Far too often people add DIV around (or worse inside) things where they aren't doing ANYTHING that couldn't be applied to the other tags already on the page. See the constant wrapping of DIV (or the new idiotic NAV tag) around menu lists -- only time you need to do that is full-width background with a semi-fluid inside; in most cases that means people are adding that extra wrapping element for nothing they couldn't just apply to the UL.
Which is kind-of what it sounds like is your problem, adding a DIV where you don't need one.
Then if i move the anchor tags inside the div, they will be around the text and only the text will be clickable, but i want something like a button, to make the whole box clickable. In that case is this possible?
For some reason when I did it, the page is buggy and not fluid. My code is relatively microscopic compared to other pages, so what could cause the page's bugginess?
display:block; or display:inline-block; The former if you want it to act like a block-level element (while still not being block-level), the latter if you want it inline but want to be able to set height and vertical padding.
Originally Posted by dobrevdelyo
I really cant understand what the question is. i mean why you need to put div inside of a anchor tag ? you can style anchor as you want.
A lot of people just starting out -- and even a lot of so called "experts" cannot separate in their head that the default appearance of a tag has nothing to do with it's meaning, and still choose their tags based on that default appearance; the notion that you can make any tag look, do or behave like almost any other tag with CSS is lost on that crowd.
Originally Posted by drwebsitesuk
As I often say, if you choose your tags based on their default appearance, you are choosing the wrong tags for all the wrong reasons.
But that's why you'll constantly see people slapping DIV around things, inside of things, and all for no good reason; it's like how they can't grasp inheritance either and so slap the same class on a bunch of sibling level elements.
There are some basic fundamentals to HTML and CSS that just aren't in the tutorials and books out there, mostly because the authors of such still have their heads wedged up 1997's backside. Do a "view source" on the default template for turdpress to see great examples of such developer ineptitude.
For people just starting out -- they're just led astray. I can forgive ignorance; It just really yanks my chain when people who claim to be "experts" do the exact same type of asshattery; see the "WhatWG" and the train wreck of nonsense they came up with known as HTML 5.