Um... ok... I'm stuck, it's late, my blood pressure is steadily rising, so once again I turn to this august forum for assistance...
I'm trying to create a menu of sorts. Actually, php creates the menu dynamically, so that means I have no idea how many menu items there will be.
I want a box with a picture and some text. When the user clicks ANYWHERE in the box, the link is followed. Note "anywhere"... not just on the text or on the picture.
Here's the CSS
*.box {
position:absolute;
left:0px;
width:150px;
height:50px;
border-color:black;
border-style:solid;
border-width:1px
}
*.pic {
position:absolute;
left:0px;
top:0px;
}
*.txt {
font-family: "Trebuchet MS";
font-size: 10pt;
font-weight: bold;
margin-left: 30px;
margin-top: 8px;
color: #044358;
background-color:transparent;
}
Now here's the html...
<a href='http://www.webdeveloper.com/forum/archive/index.php/$where' target='content'>
<div class='box' style='top:".$t."px'>
<div class='pic'>
<img src='http://www.webdeveloper.com/wroof/images/resources/poscart.gif'></div>
<div class='txt'>$icname</div>
</div>
</a>
For each loop php does through the menu items, it adds 56 to $t to position the boxes.
Two problems.
First, in IE, it only clicks on the text. How do I make it click over the entire box area?
Second, in Firefox, it draws a double box...one the required width, and the other about 20 pixels narrower. How do I just get it to draw one box?
Thanks
CTBOops... figured out the Firefox prob... the <img> tag needed to have border='0'.
Still have the IE problem (surprise surprise!)
Any suggestions?You can't put <div> elements inside links. To be honest I'm not sure why you need any <div>'s in there at all..nav{
position:relative;
display:block;
width:150px;
height:50px;
text-align:center;
font:bold 80% "Trebuchet MS", sans-serif;
color:#044358;
}
.nav img{
border:0;
display:block;
position:absolute;
left:0;
top:0;
}
<a href=http://www.webdeveloper.com/forum/archive/index.php/"$where" class="nav">
<img src=http://www.webdeveloper.com/forum/archive/index.php/"/wroof/images/resources/poscart.gif" alt="Something descriptive."></div>
$icname
</a>That should do something similar to what you want, if you need something more specific then I'd have to see an image of the desired output.Thanks David,
You were right. I got rid of the <div>s thus...
<a href='http://www.webdeveloper.com/forum/archive/index.php/$where' target='content' class='box' style='top:".$t."px'>
<img src='http://www.webdeveloper.com/wroof/images/resources/poscart.gif' border='0' class='pic'>
<p class='txt'>$icname</p>
</a>
By moving the class descriptors into the images and paragraph, the CSS still allowed me to position the text relative to the pictures (which was the point of the <div>s)... AND I get the added bonus of the anchor working! Yay!
Your assistance much appreciated.
Cheers
CTBYou can't put paragraphs inside links either. In fact, you can't put any block level elements inside an inline element. However, you could use a <span> and then apply display:block to it if needed.You can't put paragraphs inside links either. In fact, you can't put any block level elements inside an inline element. However, you could use a <span> and then apply display:block to it if needed.
Thanks David, though I'm not sure what you mean by "can't".
Is "can't" a reflection of a rule somewhere? It works a treat in both IE and Firefox.
CTBIs "can't" a reflection of a rule somewhere?Of the HTML specification yes.<!-- m --><a class="postlink" href="http://www.w3.org/TR/html4/struct/global.html#block-inline">http://www.w3.org/TR/html4/struct/globa ... ock-inline</a><!-- m -->
7.5.3 Block-level and inline elements
Certain HTML elements that may appear in BODY are said to be "block-level" while others are "inline" (also known as "text level"). The distinction is founded on several notions:
Content model
Generally, block-level elements may contain inline elements and other block-level elements. Generally, inline elements may contain only data and other inline elements. Inherent in this structural distinction is the idea that block elements create "larger" structures than inline elements.
Formatting
By default, block-level elements are formatted differently than inline elements. Generally, block-level elements begin on new lines, inline elements do not. For information about white space, line breaks, and block formatting, please consult the section on text.
Directionality
For technical reasons involving the UNICODE bidirectional text algorithm, block-level and inline elements differ in how they inherit directionality information. For details, see the section on inheritance of text direction.
Style sheets provide the means to specify the rendering of arbitrary elements, including whether an element is rendered as block or inline. In some cases, such as an inline style for list elements, this may be appropriate, but generally speaking, authors are discouraged from overriding the conventional interpretation of HTML elements in this way.
The alteration of the traditional presentation idioms for block level and inline elements also has an impact on the bidirectional text algorithm. See the section on the effect of style sheets on bidirectionality for more information.
I'm trying to create a menu of sorts. Actually, php creates the menu dynamically, so that means I have no idea how many menu items there will be.
I want a box with a picture and some text. When the user clicks ANYWHERE in the box, the link is followed. Note "anywhere"... not just on the text or on the picture.
Here's the CSS
*.box {
position:absolute;
left:0px;
width:150px;
height:50px;
border-color:black;
border-style:solid;
border-width:1px
}
*.pic {
position:absolute;
left:0px;
top:0px;
}
*.txt {
font-family: "Trebuchet MS";
font-size: 10pt;
font-weight: bold;
margin-left: 30px;
margin-top: 8px;
color: #044358;
background-color:transparent;
}
Now here's the html...
<a href='http://www.webdeveloper.com/forum/archive/index.php/$where' target='content'>
<div class='box' style='top:".$t."px'>
<div class='pic'>
<img src='http://www.webdeveloper.com/wroof/images/resources/poscart.gif'></div>
<div class='txt'>$icname</div>
</div>
</a>
For each loop php does through the menu items, it adds 56 to $t to position the boxes.
Two problems.
First, in IE, it only clicks on the text. How do I make it click over the entire box area?
Second, in Firefox, it draws a double box...one the required width, and the other about 20 pixels narrower. How do I just get it to draw one box?
Thanks
CTBOops... figured out the Firefox prob... the <img> tag needed to have border='0'.
Still have the IE problem (surprise surprise!)
Any suggestions?You can't put <div> elements inside links. To be honest I'm not sure why you need any <div>'s in there at all..nav{
position:relative;
display:block;
width:150px;
height:50px;
text-align:center;
font:bold 80% "Trebuchet MS", sans-serif;
color:#044358;
}
.nav img{
border:0;
display:block;
position:absolute;
left:0;
top:0;
}
<a href=http://www.webdeveloper.com/forum/archive/index.php/"$where" class="nav">
<img src=http://www.webdeveloper.com/forum/archive/index.php/"/wroof/images/resources/poscart.gif" alt="Something descriptive."></div>
$icname
</a>That should do something similar to what you want, if you need something more specific then I'd have to see an image of the desired output.Thanks David,
You were right. I got rid of the <div>s thus...
<a href='http://www.webdeveloper.com/forum/archive/index.php/$where' target='content' class='box' style='top:".$t."px'>
<img src='http://www.webdeveloper.com/wroof/images/resources/poscart.gif' border='0' class='pic'>
<p class='txt'>$icname</p>
</a>
By moving the class descriptors into the images and paragraph, the CSS still allowed me to position the text relative to the pictures (which was the point of the <div>s)... AND I get the added bonus of the anchor working! Yay!
Your assistance much appreciated.
Cheers
CTBYou can't put paragraphs inside links either. In fact, you can't put any block level elements inside an inline element. However, you could use a <span> and then apply display:block to it if needed.You can't put paragraphs inside links either. In fact, you can't put any block level elements inside an inline element. However, you could use a <span> and then apply display:block to it if needed.
Thanks David, though I'm not sure what you mean by "can't".
Is "can't" a reflection of a rule somewhere? It works a treat in both IE and Firefox.
CTBIs "can't" a reflection of a rule somewhere?Of the HTML specification yes.<!-- m --><a class="postlink" href="http://www.w3.org/TR/html4/struct/global.html#block-inline">http://www.w3.org/TR/html4/struct/globa ... ock-inline</a><!-- m -->
7.5.3 Block-level and inline elements
Certain HTML elements that may appear in BODY are said to be "block-level" while others are "inline" (also known as "text level"). The distinction is founded on several notions:
Content model
Generally, block-level elements may contain inline elements and other block-level elements. Generally, inline elements may contain only data and other inline elements. Inherent in this structural distinction is the idea that block elements create "larger" structures than inline elements.
Formatting
By default, block-level elements are formatted differently than inline elements. Generally, block-level elements begin on new lines, inline elements do not. For information about white space, line breaks, and block formatting, please consult the section on text.
Directionality
For technical reasons involving the UNICODE bidirectional text algorithm, block-level and inline elements differ in how they inherit directionality information. For details, see the section on inheritance of text direction.
Style sheets provide the means to specify the rendering of arbitrary elements, including whether an element is rendered as block or inline. In some cases, such as an inline style for list elements, this may be appropriate, but generally speaking, authors are discouraged from overriding the conventional interpretation of HTML elements in this way.
The alteration of the traditional presentation idioms for block level and inline elements also has an impact on the bidirectional text algorithm. See the section on the effect of style sheets on bidirectionality for more information.