How to increase the width and height

[Nuv]

Hi,

 

I am trying to increase the width and height of the block but even after changing width and height it won't get big.

  
<div style="border-style: inset; z-index: 1;" id="box4">
<span><style>a span{display:none;}
a:hover span {display: block;
position: relative; /*this is the key*/
width: 350px;
height: 100px;
padding: 0px;
margin: 10px;
z-index:6;
color:#FFFFFF;
text-align:center;
/* for IE */
filter:alpha(opacity=100);
/* CSS3 standard */
opacity:1;
font-size:12px;
font-family:Arial, text-align:center;
background-color:#15317E;
-moz-border-radius: 5px;
border-radius: 1px;
-moz-box-shadow: 5px 5px 5px #ccc;
  -webkit-box-shadow: 5px 5px 5px #ccc;
  box-shadow: 5px 5px 5px #ccc;}

}

</style>
<a href="tree.php?id=child"><img src="images/Icon.png" alt=""
width="50" height="50" /><span>Some content.</span></a></span> 
</div> 

 

[cssfreakie]

just a few things? which block do you mean.

Since you use a div and a span displayed block.

 

Also some other things are wrong with your code.

1)  <style>  make it <style type="text/css">

2)  you have a } too many in your style declaration. at the very bottom.

3)  stop using style tags or in line style it's chaotic, redundant, slower and harder to fix since it overwrites everything.

4)  do you realise that the style you set in your style tags is meant for a hover state (of the A element)? just mouse over it and you will see. (so it depends on the A element and not on the span element...)

 

edit: maybe just say what you want to do (in a more precise manner, also start working with id's classes selectors in an external style sheet)

 

edit2: in addition to the above is this maybe more as you like it?

!!notice i removed the div and the span. and added the display block allready to the normal state of the a element

<style type="text/css">
a.block{
    display: block;
    width: 350px;
    height: 100px;
}
a.block:hover  {   
    position: relative; /*this is the key*/   
    padding: 0px;
    margin: 10px;
    z-index:6;
    color:#FFFFFF;
    text-align:center;
    /* for IE */
    filter:alpha(opacity=100);
    /* CSS3 standard */
    opacity:1;
    font-size:12px;
    font-family:Arial, text-align:center;
    background-color:#15317E;
    -moz-border-radius: 5px;
    border-radius: 1px;
    -moz-box-shadow: 5px 5px 5px #ccc;
    -webkit-box-shadow: 5px 5px 5px #ccc;
    box-shadow: 5px 5px 5px #ccc;
    }
    /* }  this is wrong */
</style>

<a class="block" href="tree.php?id=child">
    <img src="images/Icon.png" alt="" width="50" height="50" />
    <span>Some content.</span>
</a>

[Nuv]

just a few things? which block do you mean.

Since you use a div and a span displayed block.

 

Also some other things are wrong with your code.

1)  <style>  make it <style type="text/css">

 

Did that.

 

2)  you have a } too many in your style declaration. at the very bottom.

 

Sorry was using Php and edited the code before putting it here. Extra } is from php.

 

3)  stop using style tags or in line style it's chaotic, redundant, slower and harder to fix since it overwrites everything.

 

I cannot use "class". It distorts my display.

 

4)  do you realise that the style you set in your style tags is meant for a hover state (of the A element)? just mouse over it and you will see. (so it depends on the A element and not on the span element...)

 

Yeah i understand that.

 

edit: maybe just say what you want to do (in a more precise manner, also start working with id's classes selectors in an external style sheet)

 

After hovering the image in <a> tag i want to display the box with information.I do use id's classes but if i use classes it distorts my display.

[cssfreakie]

Okay so if i understand you correctly you want a box to pop up ones you hover over an image?

if that is the case you don't even need an in line image, you can set the A element to display block and set a background image to it.

for instance:

 

<style type="text/css">
a#popup1{ /* i would normally use a parent id or class for this, and make 
                  only the background unique with an ID  but it seems you can't use classes
                   which is a bigger mystery than ufo's to be honest
               */
  display:block;
  width:50px;
  height:50px;
  background: url(../images/your-image1.png) no-repeat top left;
}
a#popup1:hover{
  width:200px;
  height:200px;
  background: url(../images/your-image2.png) no-repeat top left;
}
</style>

  <a id="popup1" href=""></a>

 

I cannot use "class". It distorts my display.

 

I have no idea what you mean with that: distorted..? in your browser?,.. your editor, in ...? I never heard this one. But if you can't use classes at all i would not even bother styling things to be honest. classes just like id's and selectors are vital to target elements. That's what css is all about. Separate concerns, by using external stylesheets javascript, using a template and include your php in it.

 

Hope this helps! really love to know what that class distorting is though, sounds freaky

 

-edit: changed the code a bit, was a small error in it.

[Nuv]

I used the code however nothing is shown on hovering. If you want i can use classes again and show how it gets distorted . Maybe the distortion can be solved easily or maybe i was doing it wrong that time.

 

Code 

i am using

 <span><style type="text/css">
a#popup1{ /* i would normally use a parent id or class for this, and make 
                  only the background unique with an ID  but it seems you can't use classes
                   which is a bigger mystery than ufo's to be honest
               */
  display:block;
  width:50px;
  height:50px;
  background: url(../images/your-image1.png) no-repeat top left;
}
a#popup1:hover{
  width:200px;
  height:200px;
  background: url(../images/your-image2.png) no-repeat top left;
}
</style>
<a id="popup1" href=""><img src="images/Icon.png" alt=""
width="50" height="50" /></a></span>

 

 

[cssfreakie]

i really recommend a book dude, this was just an example I gave. In order for stuff to show up, you require of-course those images I set as a background. (makes sense right? If they are not there they wont show up..)

 

I removed the image declaration and changed it to a color, I also removed that Insanely ugly style tags inside a span practice (use an external stylesheet!!) just don't use those tags. I did this to give a working example, but in the end we need to keep thinking. I just repeat myself from my first post:

3)  stop using style tags or in line style it's chaotic, redundant, slower and harder to fix since it overwrites everything.

 

the code below works, if it doesn't i can't help you, so don't change it (by putting styletags inside a span), just run it. And again a Book is worth it's weight in gold.

 

<style type="text/css">
a#popup1{ /* i would normally use a parent id or class for this, and make 
                  only the background unique with an ID  but it seems you can't use classes
                   which is a bigger mystery than ufo's to be honest
               */
  display:block;
  width:50px;
  height:50px;
  background: #999;
}
a#popup1:hover{
  width:200px;
  height:200px;
  background: #333;
}
</style>

  <a id="popup1" href=""></a>

[Nuv]

i really recommend a book dude, this was just an example I gave. In order for stuff to show up, you require of-course those images I set as a background. (makes sense right? If they are not there they wont show up..)

 

I made the image the first time. I knew i need to put the images.

 

I removed the image declaration and changed it to a color, I also removed that Insanely ugly style tags inside a span practice (use an external stylesheet!!) just don't use those tags. I did this to give a working example, but in the end we need to keep thinking. I just repeat myself from my first post:

3)  stop using style tags or in line style it's chaotic, redundant, slower and harder to fix since it overwrites everything.

 

Your new code works but the background also changes from white even when im not hovering.

 

Working, without hovering

 

After hovering

 

However i'll do it from here. Thankyou for all your help.

 

 

 

[cssfreakie]

the new code was exactly the same , i just removed the images. and changed it to a background color

anyway good, luck!

[Nuv]

the new code was exactly the same , i just removed the images. and changed it to a background color

anyway good, luck!

 

Yeah i agree. I don't know much about i can understand that its same except one used images and other used color. Its messed up because i am using someone else's code as i don't know CSS much  and thankyou .