Various HTML & CSS questions

[Chris]

[HTML] shared TITLE
I want to make an element "image + text" that have common title. What tag is best?

If this was a link I would use "<a href=xxx title='click me!'><img src=yyy>click me</a>".


[HTML] position of image in relation to text
When I make image next to text "<a href=xxx><img src=yyy>text</a>" the image is a bit higher since 2 or so bottom pixels are not used (this is the area where lower parts of the letter are occupying "y, j"). How to make so that area is used too?

I could make a table with image and text occupying separate rows and then do proper centring, but I'm not happy with this solution (can't make a clickable button this way for example).

[CygnusX]

Isn't this what alt is for (aka, alternate, ie, in lieu of picture, use text).

On the second issue, the only way I know to do this is to place the text inside a div and give the style attribute of the div a bottom padding.

[Marek]

For the second issue, try looking at the vertical-align css property. You might need to try out the various possible values, because they are named a bit counter-intuitively. You apply it to the image element.

edit: For the first issue you can use span or div. Span is the "blank" inline element that you can use for anything and div is the "blank" block element. So if you want it to behave like an <a> element (which is an inline element), you can use <span title="blah> blah </span>

[Chris]

edit: For the first issue you can use span or div. Span is the "blank" inline element that you can use for anything and div is the "blank" block element. So if you want it to behave like an <a> element (which is an inline element), you can use <span title="blah> blah </span>

The first one is half "aestetic" question.
I already have <span> used up for making different colours of text, need a different tag (I don't want to make a separate <span> class with blank properties). <font> maybe?

[Chris]

[HTML/CSS] perfect centring
If the page is centred the position of elements depends if the slider is visible (page getting shrunk) or not (page is bigger). This makes an ugly effect of "moving page" when you click between pages that use more than one page (slider) and smaller pages (no slider). Any solution to this?

[CygnusX]

I know what you're talking about, but there are only 3 solutions.  Either make all your pages long enough to require a scroll bar, make all pages small enough to not require a scroll bar, or open your window with javascript that sets resizable = false.  I have found no other solutions.

[dsheroh]

I know what you're talking about, but there are only 3 solutions.  Either make all your pages long enough to require a scroll bar, make all pages small enough to not require a scroll bar, or open your window with javascript that sets resizable = false.  I have found no other solutions.

4)  Set the CSS "overflow" property for the element which is getting the scrollbar ("body" if it's the entire page) to "hidden" if you never want a scrollbar to appear (users will still be able to scroll with keyboard controls, although they likely won't know that the page is scrollable) or to "scroll" if you want a scrollbar to always appear (even when the entire content fits into the available space).  Note that setting "overflow: scroll" will force both vertical and horizontal scrollbars to appear; use "overflow-y" instead of "overflow" to get only a vertical scrollbar.

[CygnusX]

Interesting, I had never considered setting overflow for the body tag.  I had always used it for allowing overflow on a fixed height div. 

[Chris]

I like internet
Thanks guys, all solutions above works fine.

[Chris]

[HTML] tooltips
How can I make <br> inside tooltip? Or some icons if possible?

I hope to do it without heavy use of JS...

Is it possible to make a tooltip go over several tables/trs/tds? Like <TR title=xxx><td>...</td><td>...</td></TR> or <span title=xxx><table>...</table></span>.

[Nox]

You can use pure-HTML/CSS tooltips, basicly you place the box inside element you want to have titled, make it invisible and display upon the hovering over the parental element (parent relative, child absolute)

So via this even the second question should be possible

[Chris]

You can use pure-HTML/CSS tooltips, basicly you place the box inside element you want to have titled, make it invisible and display upon the hovering over the parental element (parent relative, child absolute)

So via this even the second question should be possible

Huh? Example please, I'm CSS challenged

[Nox]

Code: [Select]

<div class="tooltip">Some wonderful element triggering tooltip<span class="tooltip-content"><b>Whatever</b> you want in<br>this tooltip<img src="blabla.jpg"></span></div>

.tooltip {
  position: relative; // makes the inner absolute elements base coords start in this element, not upper/body
}
.tooltip-content{
  display: none;
  position: absolute;
  left: 100px; // you can play with this, % maybe
  top: 50px;
  /* other styling */
}
.tooltip:hover .tooltip-content{ display: block; }
(untested)

you can replace the <span class="tooltip-content"> with something like <tooltip> or <useSomeRareElementHere>

[Chris]

I can't make it work... During googling I can not find any hover based tooltips (for HTML4.1+CSS2) information either. Every solution I came across uses JavaScript.

[Winawer]

I think it should work if you add a doctype.

[Chris]

I think it should work if you add a doctype.

Nope, still nothing. Unless it is HTML 5 only?

[Nox]

Not at all, I dunno, didn't test the code BUT I used such solution in past and it clearly worked.
http://www.google.com/search?q=pure+css+tooltips

maybe there's some other definition in your stylesheet that breaks it?

[Winawer]

Code: [Select]

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<head>
<style type="text/css">

.tooltip {
  position: relative; // makes the inner absolute elements base coords start in this element, not upper/body
}
.tooltip-content{
  display: none;
  position: absolute;
  left: 100px; // you can play with this, % maybe
  top: 50px;
  /* other styling */
}
.tooltip:hover .tooltip-content{ display: block; }

</style>
</head>
<body>
<div class="tooltip">Some wonderful element triggering tooltip<span class="tooltip-content"><b>Whatever</b> you want in<br>this tooltip</span></div>
</body>
This works at least in my browser.

[Chris]

Works, but you have to add the "http://www.w3.org/TR/html4/loose.dtd" part, I always thought it was optional and just the doctype core definition "<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">" is enough...

BTW it does not work in IE6 (not that it's surprising...), do you know if it works at least in IE7?



[HTML/PHP/Network] "delayed" display

A simple map (table and divs with content inside each cell). When I test it on localhost everything displays fast and flawlessly. When I do it on live server it renders it slooooow and I can see the tiles of the map being displayed separately. Why?

The whole map is displayed using just one echo. But assuming network latency blah, blah, blah I made another version which uses ob. That one should send everything at once to the browser (except css), right? So how could it display different way than on local host? I could imagine the whole map being displayed slower, but not its parts!

http://worldoflords.com/misc/test/pnwmap/index.php
http://worldoflords.com/misc/test/pnwmap/index-ob.php

[Winawer]

It should work in IE7. I think only the <a> tag supports :hover in IE6.

[Chris]

[HTML/CSS] multi layered button
I want to make a button that is built of 2 layers of images + and optional layer in case of hover. The button won't have any text, only images.

Of course I want it to work with as many browsers as possible and using as simple/small code as possible and preferably without JS unless it is really needed

[133794m3r]

[HTML/CSS] multi layered button
I want to make a button that is built of 2 layers of images + and optional layer in case of hover. The button won't have any text, only images.

Of course I want it to work with as many browsers as possible and using as simple/small code as possible and preferably without JS unless it is really needed

Code: [Select]

#element{
    background-image:some_image.png;
#element_id:hover{
    background-image:some_other_image.png;
}

basically you just do element_identifier:hover{ //magic } for all hover related things.

[Chris]

basically you just do element_identifier:hover{ //magic } for all hover related things.

It would replace the image. I want to stack several images on top of each other (one of them being hover). What's the best method for this?

[Chris]

Come on, people... Don't tell me no one ever did multilayered buttons...

[BlackScorp]

what do you think? somethink like that?

Code: [Select]

.myPicture{
width:100px;
height:100px;
position:relative;
border:1px solid black;
display:none;
}
.myButton{
display:block;
position:absolute;
width:10px;
height:10px;
}
.myButton:hover .myPicture{
display:block;
}
<a href="#" class="myButton">
<div class="myPicture"></div>
</a>

or what do you mean? maybe you can make a preview what result you expect?