Text enlargement when you hover over a Link

[cranebill]

Hi all, I am very new about 4 work hours into my first css page and already I have run into a problem, I have created a css sheet that enables me to change the text on a link so it enlarges when you hover over it, now that I have placed the links above some text, when I hover over the links the text changes as I expected it to, BUT after I inserted it where I wanted it to go at the top of the page, all the text under it moves and if you run the mouse over all 5 links, it looks like the page has the wobbles, What am I doing wrong ? or what do I need to do to compensate for this happening?Also for info, I have only tried it in my browser (firefox), I have not got it running on my web site yet, so I do not know if it changes when it goes live.css code/* Hyper link styling */a.two:link {color: #0000ff}a.two:visited {color: #0000ff}a.two:hover {font-size: 125%}html code in the page<p class="center"><a class="two" href="http://www.weekendbridge.com" target="blank">Home</a>   <a class="two" href="lastpage.htm">Costs</a>   <a class="two" href="lastpage.htm">Apply</a>   <a class="two" href="lastpage.htm">Format</a>   <a class="two" href="faq.htm">FAQ's</a>   <a class="two" href="mailto:wayne.mayer@btinternet.com">Contact us</a>   

[jeffman]

Unless you tell the page different, the behavior you describe is correct. Divs and other elements will expand to hold their content.You can restrict this by putting your links in a container whose size can be specified in CSS. A div is what first comes to mind. If all your links are in a horizontal row, as it seems, wrap them in a div with a fixed height. That way, when a link changes size, the div that contains it doesn't, and the page below the div will be unaffected. (Make sure the div is tall enough to hold the expanded size!)

[cranebill]

Unless you tell the page different, the behavior you describe is correct. Divs and other elements will expand to hold their content.You can restrict this by putting your links in a container whose size can be specified in CSS. A div is what first comes to mind. If all your links are in a horizontal row, as it seems, wrap them in a div with a fixed height. That way, when a link changes size, the div that contains it doesn't, and the page below the div will be unaffected. (Make sure the div is tall enough to hold the expanded size!)

Without wanting to appear stupid, what is a div? and is it on the schools tutorials, as I am using w3schools to learn css Thanks

[jeffman]

Without wanting to appear stupid, what is a div? and is it on the schools tutorials, as I am using w3schools to learn css Thanks

A div is your basic, block-level organizing unit. A well designed document will break the body into a number of divs, or containers, and all the content will be inside those. The default div is 100% wide, but that can be changed in CSS. Normally a new div starts below the previous div, paragraph style, but with the float property you can arrange 2+ divs horizontally.Yes, it's all in the tutorial. Style a div as you would style any rectangle: border, background, etc. Font and text declarations apply to text elements inside the div.

[Synook]

The div (division) tag: <div></div> is also semantically neutral, so you can use it in situations where nothing else makes sense, such as your menu.By the way there is a CSS definition in the HTML 4 default stylesheet for the <menu> element, but it isn't in the HTML 4 DTD

[cranebill]

Hi all,Thanks for help on this, I have solved my issue using a div at last, well at least I can see a bit of what a div does, my next question is this is the piece of code I am using to solve my problem, what I would like to know is div {width:100%;height:70px;overflow: hidden}<div/>1/. I am using 100% for width. does this center the 5 links I have in a row on all browsers automatically by default (the items are exactly where I want them, I am just asking if this is normal or I was lucky)2/. should I be using % with px values ? as I have here, height and width, or again is this normal to mix and match?3/. a question on the overflow, if I use auto, hidden or visible, all three options work, I do not know what is best or why, but I am getting a change in the height on the webpage when I use these, is there something about the values or the way these values work I am not understanding?Thanks again

[cranebill]

another slightly related issue is, as I have set a div in my css sheet, how do I set up another div, do I name them ?i.e. divdiv1div2is this even possible?or do I need another function or format?

[Synook]

another slightly related issue is, as I have set a div in my css sheet, how do I set up another div, do I name them ?i.e.divdiv1div2is this even possible?or do I need another function or format?

You give them classes or IDs.

div.myclass {	/* These properties pertain to <div class="myclass"> */}div#myid {	/* These properties pertain to <div id="myid"> */}

You can have as many elements as you want for a class, but only one element can have an id. By specification you can select elements by name, as in:

div[name="myname"] {	/* These properties pertain to <div name="myname"> */}

In practice, however, IE doesn't have very good support for the element[attribute=value] notation.

1/. I am using 100% for width. does this center the 5 links I have in a row on all browsers automatically by default (the items are exactly where I want them, I am just asking if this is normal or I was lucky)

It's not normal, divisions are left-aligned by default. Maybe it is inheriting the value from a parent element?

2/. should I be using % with px values ? as I have here, height and width, or again is this normal to mix and match?

That is fine. Divisions and other block elements are 100% width by default though, and setting a width means has some disadvantages. For example, if you were to set a 5px padding on that element later on, then with 100% width the actual width will become 100% + 10px, while with automatic width the element will remain going all the way across the parent.

3/. a question on the overflow, if I use auto, hidden or visible, all three options work, I do not know what is best or why, but I am getting a change in the height on the webpage when I use these, is there something about the values or the way these values work I am not understanding?

They are all different. overflow:auto means that if the content is taller than 70px, scrollbars will appear. overflow:hidden will make it so that you can't see beyond that 70px, while overflow:visible will keep the element always at 70px height but make the content extend down (IE 6 has a bug though).

[cranebill]

1/. I am using 100% for width. does this center the 5 links I have in a row on all browsers automatically by default (the items are exactly where I want them, I am just asking if this is normal or I was lucky)It's not normal, divisions are left-aligned by default. Maybe it is inheriting the value from a parent element?Yes, I have <p class="center"> just under <div> thanks for that I could not work out why another worked differently

[Jerry62704]

Hi all,Thanks for help on this, I have solved my issue using a div at last, well at least I can see a bit of what a div does, my next question is this is the piece of code I am using to solve my problem, what I would like to know is div {width:100%;height:70px;overflow: hidden}<div/>1/. I am using 100% for width. does this center the 5 links I have in a row on all browsers automatically by default (the items are exactly where I want them, I am just asking if this is normal or I was lucky)2/. should I be using % with px values ? as I have here, height and width, or again is this normal to mix and match?3/. a question on the overflow, if I use auto, hidden or visible, all three options work, I do not know what is best or why, but I am getting a change in the height on the webpage when I use these, is there something about the values or the way these values work I am not understanding?Thanks again

1. Using a div will NOT center anything in and of itself. Look to attributes like "margin: 0 auto;" or "text-align:center" for that stuff.2. If you want the content to change with changes in the browser then use proportional stuff like %. If you want to restrict the size preventing visual handicapped people from visiting your page use px.3. Visit the free tutorial here at W3Schools.

[Jerry62704]

another slightly related issue is, as I have set a div in my css sheet, how do I set up another div, do I name them ?i.e. divdiv1div2is this even possible?or do I need another function or format?

If you don't name the selector, it will apply to all. So if you say in your css "div {something:somevalue}" it will apply to all <div> tags. If you want a specific area to have something else, you can add a "#headerDiv {somethingelse:someothervalue}" and then on your html page include "<div id=headerDiv>". Each "#" can be used once and is used with an "id" in the tag.If you want something to be applied many times such as a width or color then you have classes indicated by a "." before the name such that your css will have ".repeatingStyle {width:xyz}" and in your html you would have "<div class="repeatingStyle">".HTH