|
CSS - Css Table Swap, Sort Of
Hey everyone, I am wondering how Lufthansa http://www.lufthansa.com/ Put a mouseover table thingy on their page. On the top roll your mouse over "worldwide sites" and a little thing drops down. Does anyone have a script like that? Thanks for your help!
Similar TutorialsHi, I'm just learning CSS, so I'm not sure if it's possilble to do what I want. I have a menu created from a stylesheet. I'd like to have an image on the page (not on the menu bar) change when a menu item is hovered over. Is this possible? Thanks! Here is the webpage 1) Each of the globes as well as the text below is a link to other sites. Using css to change the image to the same globe - but not faded - do I have to have both images be a background image?? Currently the image is in the html. 2) Since each globe is different, then do I need to create a class for each one?? Thanks! Morning guys and girls, I am getting a headache trying to straighten this bug out and could really do with a fresh pair of eyes. The page is he www.BeeBee-Design.co.uk/dev. It works fine in IE6 ( ) but not FF ( ). The relevant piece of HTML is: Code:
<div class="navigation">
<ul>
<li class="navigation">
<a class="nav" href="index.html#">HOME</a></li>
<li class="navigation">
<a class="nav" href="index.html#">SERVICES</a></li>
<li class="navigation">
<a class="nav" href="index.html#">HOTELS</a></li>
<li class="navigation">
<a class="nav" href="index.html#">QUOTE</a></li>
<li class="navigation">
<a class="nav" href="index.html#">BOOK</a></li>
<li class="navigation">
<a class="nav" href="index.html#">CONTACT</a></li>
</ul>
</div>
And the CSS: Code:
div.navigation {
font-family: Arial;
font-weight: normal;
word-spacing: 10px;
padding: 0 40px 0 0;
margin-top: 120px;
line-height: 30px;
background-color: #9A9FBA;
text-align: center;
}
* html div.navigation {
word-spacing: -6px;
}
a.nav:link {color: #FFFFFF; text-decoration: none; background-image: url(images/navback.jpg); width: 117px; height: 30px;}
a.nav:visited {color: #FFFFFF; text-decoration: none; background-image: url(images/navback.jpg); width: 117px; height: 30px;}
a.nav:hover {color: #FFFFFF; text-decoration: none; background-image: url(images/rollover.jpg); width: 117px; height: 30px;}
li.navigation {
display: inline;
font-size: 18px;
font-weight: normal;
color: #FFFFFF;
}
The problem seems to be something to do with the way that IE will stretch the block to the width and height settings in the CSS and FF will not. Any suggestions greatly appreciated and will be rewarded with a packet of the finest Chocolate Digestives known to mankind. I thank you......... Hi - I have the following classes defined in a a linked stylesheet... .side{background-image: url(images/wds_side_panel.jpg); background-position: bottom; background-repeat: no-repeat; padding-left:65px; padding-top: 20px; padding-right:24px; padding-bottom:29px; } .side_over{background-image: url(images/wds_side_panel_over.jpg); background-position: bottom; background-repeat: no-repeat; padding-left:65px; padding-top: 20px; padding-right:24px; padding-bottom:29px; } and am swapping them with an 'onMouseOver' that is within a TD I have on my page, thusly: <td class="side" onMouseDown="window.location='news.html';" onMouseOver="document.body.style.cursor='pointer'; this.className='side_over';" onMouseOut="document.body.style.cursor='default'; this.className='side';" > <a href="news.html">News</a></td> The client has reported that when putting the mouse over the td, the page behaves erratically, and the roll-over background image doesnt always appear.. Is this the best way to achieve what I want here ? Might I need to preload the image in the 2nd class? an example page of the above is: http://www.rc23.com/wds_beta/aboutwds.html Any help would be greatly appreciated. Thank you all . Mike. i have a rollover menu that i made with image in a row absolutly positioned. for each button the html code is <div class="art"> <a href="#"> <span class="marginoffset"> Link text here (end tags) and the css is .art {z-index:2;position: absolute; left: 55px; top:0px; display:block; width:600px; height:70px; background: no-repeat 0px 0px; text-indent: -55px; line-height: 14.5em; text-decoration:none; color:#000; font-size:11px; font-family: Verdana, Arial, Helvetica, sans-serif; font-weight: normal;} .art a {position: absolute;display:block; background:url(menuimg/btn.art_repro.jpg) no-repeat 0px 0px;line-height: 16.5em; text-align:left; text-decoration:none; text-wrapping: no-wrap; color:#999; font-size:0.7em;font-family: Verdana, Arial, Helvetica, sans-serif;} .art a:hover {position: absolute; background: url(menuimg/btn.art_repro_f2.jpg) no-repeat 0px 0px; line-height: 14.5em; text-align:left; text-decoration:none; color:#000; font-size:11px;font-family: Verdana, Arial, Helvetica, sans-serif;} .art a:active {position: absolute; background: url(menuimg/btn.art_repro_f3.jpg) no-repeat 0px 0px; line-height: 14.5em; text-align:left; text-decoration:none; color:#000; font-size:11px;font-family: Verdana, Arial, Helvetica, sans-serif;} . marginoffset ( position: relative; left: 0px; top:0px; Hey everyone. I'm trying to create a cool menu system for my site and I wanted it to be images only. Its he - http://www.how-to-pass.info/topf2.html I wanted this to have cool mouse over images, as well as displaying drop down menus. Unfortunately, there are two problems: 1. Mouseover images don't display 2. Drop down menu disapears when you move over the menus. Can anyone tell me how I can get this to work in a simple way? I dont much hardly anything about style sheets and javascript etc. Many Thanks. Sorry for the vague subject line, but it's difficult to summarize. Disclaimer: I am not a designer, just a programmer trying to get a rough layout so the client can see how things will work, which can then be turned over to someone who will make it look nice. My usual solution is to use tables, but that won't work for this! Basically I want a number of lines running down the page, each line having a check box, radio button or nothing in the left column, and text in the right. Each line will have a varying indent level. The text may be lengthy and wrap, and I want it to stay within its own cell when it does. Like a table. But I can't really get it to do the indenting the way I want. I could probably get it to work, but it would be really, really kludgy, and I do have some pride! I put it in DIVs, like this: Code:
<HTPEACH DATASET="Ratings">
<DIV CLASS="Container {{ds_Indent}}">
<DIV CLASS="Block1"><HTPTAG NAME="ds_Field"></DIV>
<DIV CLASS="Block2">{{ds_Text}}</DIV>
</DIV>
</HTPEACH>
If I float Block1 left and Block2 right and give them widths, it works except that Block 2 is still lower than Block1. So I look into positioning. To make a long story short, what I end up with is this: Code:
.Container {
width: 650px;
position: relative;
}
.Block1 {
float: left;
width: 25px;
border: 1px solid navy;
}
.Block2 {
float: right;
width: 625px;
position: absolute;
top: 0;
left: 25px;
border: 1px solid navy;
}
Which, of course, ends with everything at the top of the page, all overlapping. Reading a little more, I can see why, but now I'm stumped. Hello all. Suppose I have the following: Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
/* footer styles */
#footer { clear: both; }
#footer ul {
width: 544px;
list-style-type: none;
display: block;
} /* end #footer ul */
#footer ul li {
float: left;
background-color: #003366;
} /* end #footer ul li */
</style>
</head>
<body>
<div id="footer">
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
<li><img src="images/foot_nav2.gif" alt="" id="footer_image" /></li>
</ul>
</div>
</body>
</html>
Now suppose that the image is 50px high. What I would like is to get the links to align at the bottom of the instead instead of at the top. I tried a vertical-align: bottom but that didn't seem to help the situation any. Hello all. I posted about menus earlier but this refers to a completely different menu in case there is any confusion. Consider the following code: Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>My site</title>
<style type="text/css">
#level0 { height: 240px; }
#level0 ul {
list-style-type: none;
border: 0;
border-top: thin solid #ff0000;
padding: 0;
margin: 0; } /* end #level0 ul */
#level0 ul li {
display: block;
padding: 0;
margin: 0; } /* end #level0 ul li */
#level0 ul li a {
border-bottom: thin solid #ff0000;
border-right: none;
text-align: right;
padding: 0;
padding-right: 0.5em;
color: #00ff00;
text-decoration: none;
display: block; } /* end #level0 ul li */
#my_image { float: right; }
</style>
</head>
<body>
<div id="level0">
<img id="my_image" src="#" alt="" height="240">
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
<li><a href="#">Link 6</a></li>
<li><a href="#">Link 7</a></li>
<li><a href="#">Link 8</a></li>
</ul>
</div>
<p>Here is some random text.</p>
</body>
</html>
Visually, this should be a vertical menu next to an image with a set height of 240px. What I want to happen is for the menu to be exactly 240px tall with the whitespace distribution to be uniform throughout each of the links. I was playing around with margin and padding and was thinking that auto might figure in to it but I could not get the correct combination to accomplish this. I prefer to have CSS determine the whitespace distribution for me because the client may want to add or remove menu options so it may not always be 8. Thoughts? And again, everyone on this forum has been really helpful and patient with me and I am very thankful for that. This may have been asked and answered before, but if so my search-fu has failed me. I am working on an external style sheet for a set of pages, some pages will have floated div sidebars, some pages will have boxed paragraphs, and some pages will have both (as in the example). 1) Why does the background and border of the boxed paragraph extend under the floated div sidebar even though the text does not ? 2) Is there a way to get the background/border of the boxed paragraph to "see" the floated div sidebar so that the right edge of the boxed paragraph's border would be visible ? I am hoping for an answer that does not involve absolute units for the boxed paragraph, since I want the pages to fill whatever window size the the viewer might have. The simple example below should demonstrate the issue. and could be copy/pasted to a site like: http://www.w3schools.com/html/tryit.asp?filename=tryhtml_basic Code: <html><head><style>
body {font-size:small;}
div.side {float:right; border:1px solid red; padding:4px; margin:0 0 0 8px; width:40%; background:#ddd;}
.box {border:1px solid lime; padding:8px; margin:8px; background:#eee;}
p {margin:4px 0; text-align:justify}
</style></head><body>
<div class="side"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p class="box">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p class="box">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</body></html>
I have a textarea in a <td>which asks for users for some description. If users enter text and don't use any space or enter, the width of the table gets bigger and bigger and damages the pages design. What can I add (to td.fixed_width css for example )to make the line break after the width of the table is reached??? There is a solution that I put a div in td and then Code: #desc {
width:"100%";
width::fixed;
overflow:scroll;}
but it is not exactly what I want hi every one... How can I display static headers in a table, so that headers remain visible while user scrolls the table body? This is not working in IE 7 any working example please 2. iam having a column which holds data around some 100 to 200 characters... by default i want to display some 50 characters and rest of the characters can be viewed by moving the column... if this is possible let me know how to do it with some sample code......i dont know much about CSS 3. One more problem iam facing is with the number of columns displayed in the table. I have to display around 15 to 20 columns in a table... with this 15 to 20 columns in a table, i can see scrollbar to the page ....but i dont want scrollbar to the page, instead i want want scroll bar to the table (so that it doesnot effect the design of the page) I need a fixed table width and height and also fixed column width and height..... Note: I dont mind if columns are not visible (thru scrool bar i should see the hide columns) Alright, this is probably a simple fix but I can not find the solution anywhere. I'm trying to highlight a table cell with a 2px solid red border when it is clicked. Is there a way to get this to happen with out changing the size of the cell? I hope this makes sense. Basically the cell is expanding by 1 px causing movement in the table. I have a dynamic table that is in the cell of another table. For the life of me I cant get it to stick to the top of the cell. It wants to sit at the midline of it vertically. Thanks for reading. I'm trying to get a table inside another table which completely fills the parent table, but I cannot get it to work. The simple piece of code illustrates my problem. The red table is inside the blue table but does not cover the entire cell from top to bottom, but only the centre. I want this table to be streched. Obviously height: 100% doesn't work. Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html>
<body>
<table>
<tbody>
<tr>
<td>
1<br>2<br>3<br>4<br>5<br>
</td>
<td style="background: blue;">
<table style="height: 100%; background: red;">
<tbody>
<tr>
<td style="vertical-align: bottom">
Test
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</body>
</html>
-------------------------------------------------------------------------------- Hello, Not exactly sure where to post this question... but: I'm having a bit of trouble keeping a table at a fixed height. What I have is a Small 200x80px table above my an input form. As users type data into the input form, javascript code dynamically updates the contents of the table. I have the table width properly fixed, and the input fields have character limitations... however if a user inputs a lot of capital letters or other wide characters, the table automatically increases in height when the text wraps. It's pretty much necessary that the text wraps for the middle lines of the table, and on the other two lines I have used the javascript to remove wrapping, but I never want the table to grow longer than 80px no matter how much is typed in the fields. Is there a way that I can constrain the table height? Thanks in advance! Hi, CSS whizz needed! I'm currently formatting a pre-determined HTML website using CSS. The website has been formatted with ID's for all tables and cells so I can specify which colour I'd like the background of the cells. The HTML is like this: Code: <table id="Description">
<tr><th class="title">Text</th></tr>
<tr><td class="data"><div class="ggcode">Text</div></td></tr>
</table>
So I've been formatting it like this: Code: div#Main
table#Description
.title {
border-color:#F0E68C;
background-color:#F0E68C; }
div#Main
table#Description
td.data {
border-color:#F0E68C;
background-color:#F0E68C; }
However the last table is like this: Code: <table id="recentPosts">
<tr>
<th class="title">
Recent Forum Posts
</th>
</tr>
<tr>
<td>
<table class="data">
<tr>
<th>Topic</th>
<th>User</th>
<th>Posted At</th>
</tr>
<tr>
<td class="clickable forumTitle"><a href="link">Text></td>
<td class="username">Text</td>
<td class="date">Text12/04/2009 03:25 PM</td>
</tr>
<tr>
<td class="clickable forumTitle"><a href="link">Text</a></td>
<td class="username">Text</td>
<td class="date">Text</td>
</tr>
</table>
</td>
</tr>
</table>
I'm able to format the cells within the <table id="recentPosts">, but I can't alter the cells within <table class="data"> - the table within the table. Any ideas how I would go about doing this? Thanks in advance Hi all, what i want is to customise the borders of a table... i know that <div>'s can have custom borders but, for the way that the page works i used table tags <table>. (very little experience of using <div>) is there a way that css can manipulate the borders of a table? i tried using this css: .nmhead { border-color:#cccccc; border-top:border-top-style:none; border-left:border-left-style:none; border-right:border-right-style:double; border-bottom:border-bottom-width:5px; } and then in the table doing this: <td class='nmhead'> but it didnt work (attached is what i want it to look like) any ideas? hi all ! Im having a little bit of problem to make a header and the table body match in a correct way. My header is declared as <table align="center" class="style36" id="header"> and the CSS controlling it is Code: table.style36 {
width: 1000px;
vertical-align:middle;
}
.style36 td{
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
vertical-align:middle;
}
And the table wich is declared as Code: <div class="scrollingDiv">
<table border="1" bordercolor="#000000" align="center" bgcolor="#FFFFFF" class="style13" id="tableBody" >
And the CSS controlling it Code:
div.scrollingDiv {
height:420px;
overflow:scroll;
vertical-align:middle;
width:1024px;
}
table.style13 {
width: 1000px;
vertical-align:middle;
}
/* Since the table has a class of style13, all td elements under that style can be
selected as below... no need for more style definitions...
*/
.style13 td {
vertical-align:middle;
}
.style13 th {
vertical-align:middle;
}
My first idea was to declare a width for each td, something like: Code: <td width="30" bgcolor="#${color2}"><div align="center">${fila.sHoraent_Citas}</div></td>
<td width="120" bgcolor="#${color2}"><div align="center"><a href="SvMedPro?boton=Info&idPaciente=${fila.idPaciente_Citas}">${fila.nom_Paciente}</a></div></td>
AND match the header too, dosent seem to work, Im pretty new to web programing so any help is appreciated. Thanks! I have a table with a specified background color (specified in CSS). The content part of the table (a cell) uses information from a downloaded script (wordpress.com) to load information. I want the table background to shine through everything. How can I accomplish this (I suspect it is in the script CSS, but I don't know what). URL The 'home' page is how I want it (basically that background effect). But the other pages come out funny with no background. Could someone solve this, or alternatively reccommend another way. |
|||||||