|
CSS - Replace Div Position (changing Div's Visibility)
hey,
I got a form and use javascript to perform simple validations on it. When all form fields are valid, ready_for_submit is true and i want to show a div saying everything is filled in correctly. (a different div is shown when not all fields are filled in correctly). I got that working but what i want is that both div's have the same position. Now when one div is hidden, an empty line is shown, and below that line the visible div is shown. (Its the other way around when the other div is hidden.) html Code: Original - html Code <td colspan="4" align="right"> <div id="not_ready" style="visibility: visible;"> <img name='img_subRegister' src='images/invalid.gif'> Not all required data is valid<br> <input type="button" name="subRegister" value="Register" onclick="checkFormData(true)"> </div> <div id="ready" style="visibility: hidden;"> <img name='img_subRegister' src='images/valid.gif'> All data is valid<br> <input type="button" name="subRegister" value="Register" onclick="checkFormData(true)"> </div> </td> <td colspan="4" align="right"> <div id="not_ready" style="visibility: visible;"> <img name='img_subRegister' src='images/invalid.gif'> Not all required data is valid<br> <input type="button" name="subRegister" value="Register" onclick="checkFormData(true)"> </div> <div id="ready" style="visibility: hidden;"> <img name='img_subRegister' src='images/valid.gif'> All data is valid<br> <input type="button" name="subRegister" value="Register" onclick="checkFormData(true)"> </div> </td> How can i set both div's on the same position? Changing visibility is done with javascript like this: javascript Code: Original - javascript Code if(ready_for_submit == false){ document.getElementById("not_ready").style.visibility = "visible"; document.getElementById("ready").style.visibility = "hidden"; return; } else{ document.getElementById("not_ready").style.visibility = "hidden"; document.getElementById("ready").style.visibility = "visible"; }
thanks in advance. Similar TutorialsHi, My side navigation seems to be moving down when main content is added to a page for some reason, any ideas why and how i can fix this: Thanks, Mike ------- Thanks fixed! Hi I have a div setup like this <div id="main"> <div id="item"> <div id="itemchild"> content </div> </div> </div> Now.. when my JS function sets the visibility of the div with id 'item' the div 'itemchild' stays visible... how do I fix that? I have having issues with IE displaying my page wrong. The page is http://]http://tampabay-online.org/cetr/about.php (or any page within that site) and the css can be found at http://tampabay-online.org/cetr/cetr.css It displays fine in Firefox and Opera but IE makes the content class lower from the top than the #right navigation bar (they should both be 20 pixels form the top) Any help much appreciated. Code: .content {
position:relative;
width:320px;
margin-left: 125px;
margin-top: 20px;
border:1px solid black;
background-color:white;
padding:10px;
z-index:3;
}
#right {
position:absolute;
width:200px;
top:20px;
left:500px;
border:1px solid black;
background-color:white;
padding:10px;
z-index:1;
}
OK, so its not that festive, but merry christmas anyway! I have a site which I need to touch up for tomorrow but I''m having trouble with div visibilities and hoped someone could see what I'm doing wrong. In the page http://www.thoroughbredmusic.co.uk/bands.php?id=1 The logo in the top right corner of the div is hidden. I changed fixed this by changing the visibility of the container div #outerwrapper which is the main div you can see with the yellow border, but this in turn collapsed the bottom of the black container up to the text 'The Rosetta Life Band Long Description goers here'. The two cells on the right with the Album cover and next gig are still visible, but going outside of the black box and over the background. You can see this at http://www.thoroughbredmusic.co.uk/problem.php?id=1 Its really bugging me! Thanks for your help and merry christmas! I have been reading about the problems regarding visibility with IE/FireFox/Safari. I have: Code:
<input type="button" onClick="toggleSurveyView('block')">
<input type="button" onClick="toggleSurveyView('table-row')">
<tr id="surveyDetails">
<td>HI</td>
</tr>
function toggleSurveyView(visible) {
document.getElementById('surveyDetails').style.display = visible;
}
In IE visible: block works great in FireFox/Safari visible: table-row works great. Is there a work around to get this visibility issue resolved for all browsers? Or am I going to have to perfrom some sort of browser type check? I just want to be able to toggle showing this table row on and off Hi, On the page http://simplyfocusing.net/LitSoc/ I have been trying to get CSS rollovers working. I use code similar to this For CSS Code: .nav {
width:172px;
height:32px;
}
td#nhome {
background-image:url(nav-home.gif);
background-repeat:no-repeat;
cursor:pointer;
}
td#nhome img {
visibility:hidden;
}
td#nhome:hover img {
visibility:visible;
}
For HTML Code: <td id="nhome" class="nav"><a href="index.htm"><img src="index_files/nav-home-over.gif" alt="" /></a></td> But the rollovers arent exactly working with IE. Works perfectly in FireFox 1. Also there seems to be some problem with the top right corner in IE. I can correct it by setting height to 0px in .shadowtopcorn but then it screws up FireFox. Any suggestions on what I should do? Thanks a lot I am trying to put left and right shadows on a layer, I am doing this by using two alternatively padded layers on top of each other. This code does that: PHP Code: #maincontent{ background-image: url(images/layout/contentpanel/contentpanel_background.gif); background-repeat: repeat-y; background-position: left; border: 0px !important; padding-left: 30px; } #maincontent_inner{ background-image: url(images/layout/contentpanel/contentpanel_backgroundright.gif); background-repeat: repeat-y; background-position: right; border: 0px !important; padding-right: 30px; } PHP Code: <div id="hold_content"> <div id="maincontent"> <div id="maincontent_inner"><? include("includes/homepageloremipsum.php")?> </div><!-- End maincontent_inner --> </div><!-- End maincontent --> </div> Now, in firefox the shadow images work fine, however, on IE they start about 2 inches down. However, after scrolling up and down the page they start at the top so this is obviously some kind of layering problem. I can't work out what though. Any ideas? On the page http://www.thoroughbredmusic.co.uk, I'm trying to get the logo in the top left of the screen to appear above any other div on the page. At the moment, the div containing the logo is within the overall div which houses everything in the center, within the yellow border. index.php: Code: <body> <div id="wrapper"> <div id="logo"></div> style.css: Code:
div#wrapper
{
text-align:left;
margin:0 auto;
width:723px;
margin-top:120px;
background-image:url(mockup.jpg);
border-color:#FFFF33;
border-style:solid;
border-width:thin;
background-color:#000000;
background-repeat:no-repeat;
overflow:visible;
}
div#logo
{
background-image:url(logo.gif);
width:328px;
height:198px;
margin-left:-50px;
margin-top:-100px;
float:left;
}
I created this based upon firefox, and in firefox it appears as intended- just above and to the left, but overlapping, the top left side of the main div (#wrapper) In IE, however, it appears in the same position, but everything outside the main div is invisible. I tried a number of methods, including z indexes and overflow:visible within body{}, but with no luck. Anyone have any ideas? Thanks a lot, Tom i am doing an alternative splash page for a website that uses the same template as the rest of the site but uses a black background color and hides a few elements, especially the h1 element. Code: <h1>Home</h1> I have attempted using display:none; display:transparent; and visibility:hidden. The first two elements leave a faint outline of the link in both IE and Netscape. Using visibility: hidden works in IE but the outline remains in Netscape. I have cleared the cache and tried other various obvious things like assigning color: #000000; Does anyone have any ideas. To see this in action, see www.lubuto.org Code: h1 {
visibility:hidden;
}
Hi! I'm making a gallery page. It should have this structu Code: _________________________ | IMAGE | IMAGE | IMAGE | | Text | Text | Text | _________________________ First I wanted to do it with tables, but I taught I'll give CSS a go. What is the "nice" way of doing this? The images are in different heights, but I want the Text aligned vertically on the same place at each cell. Please help! Chrille Dear friends, I have the following table, which I need to be replaced with CSS. How can I do it? Here is the code: Code:
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td style="background: url(engine/images/onLayerWinUpLeft.png) top right no-repeat; width:51px; height:51px"><div id="closeBut" style="width: 30px; height: 30px; position:absolute; margin-left: 302px; margin-top: 10px"><img src="engine/images/closeBoxBut.png" /></div></td>
<td style="background: url(engine/images/onLayerWinUp.png) top left repeat-x;"></td>
<td style="background: url(engine/images/onLayerWinUpRight.png) top left no-repeat; width:51px; height:51px"></td>
</tr>
<tr>
<td style="background: url(engine/images/onLayerWinLeft.png) top right repeat-y;"></td>
<td style="background-color:#FFFFFF" height="400"> </td>
<td style="background: url(engine/images/onLayerWinRight.png) top left repeat-y"></td>
</tr>
<tr>
<td style="background: url(engine/images/onLayerWinDownLeft.png) bottom right no-repeat; width:51px; height:51px"></td>
<td style="background: url(engine/images/onLayerWinDown.png) bottom left repeat-x;"></td>
<td style="background: url(engine/images/onLayerWinDownRight.png) bottom left no-repeat; width:51px; height:51px"></td>
</tr>
</table>
Recently I learned of the tag <iframe> for including external stuff in my web site. It's use, of course, breaks every rule in the book concerning the strict DTD and modern CSS design. Can you suggest the proper alternative to the following?: <iframe height="250" width="190" scrolling="yes" src="../vsCalendar/upcoming.php"></iframe> Thank you for your valuable time. I used to create my website using tables before. At those times when I needed to create a field with multiple columns I used <th> attribute. Whats the best method of creating something like below without tables. :::: <table> <tr> <th> ID </th> <th> ARTICLE> </th> </tr> <tr> <td> Id numbers </td> <td> Articles </td> </tr> </table> I have the following:
PHP Code: <td id="nav-01" onmouseover="this.className='classover'" onmouseout="this.className=''">Home</td> I realise the "this.className" will produce a class of "classover" when I do a mouseover. However I already have an id="nav-o1" and therefore the class will not overwrite this.... they are both setting different background colours to the column. Can anyone help me? PHP Code: <td id="nav-01">Home</td> That is the basic code and I would like background colour to change when doing a mouseover and then revert to original when mouse goes away. As much CSS as possible and as little javascript... Please! Hello I would like to have some text replaced after, for example 10 seconds, with new text. And with fading in and fading out Example given: after opening page fade in - show text1 "Welkom to the pleasure dome" - fade out fade in - after 10 sec "For the latest Items, go to..." - fade out fade in -after 10 sec "For ordering , call 0800-orderIT" - fade out and so on. But al on the same place ( footer ) I did see this somewhere, but I am not sure if it was CSS only. Thanks I'm creating a site with a few div layers. Like so: Code: <div id="mainDiv"> <div id="topLinks"><a href="##" class="linkStyle">Calendar</a> | <a href="##" class="linkStyle">Site Map</a> | <a href="##" class="linkStyle">Home</a></div> <div id="siteContent"> <div id="mainContent"> <div id="header"> <a href="##"><img src="img/logo.gif" width="131" height="30" border="0" alt="Logo" title="Logo" style="padding: 10px 0px 12px 19px;" /></a> <div id="orangeNav">Top Navigation</div> </div> <div id="content"> ****** Need left navigation and right content here**** </div> </div> <div id="bottomNav">Bottom Navigation Here</div> <div id="footer">Footer Info here</div> </div> </div> The problem is with the bold green part. I'm trying to create a left-side navigation with content to the left. If I create a table, I'm done and it works. Of course, I'm trying not to use a table to set up the design. The the other div tags are all position: relative. If I add two div tags that are position: absolute and place them, the text put in the absolute tags are not affecting the rest of the page and the footer either covers or gets covered by the absolute tags. However, I can't get it to work with relative div tags. I'm a beginner so I'm struggling. I know I've done it before, but it's just not working this time. In case you need it, here's the style sheet: Code: body {
background-color: #1D1F12;
margin: 0px;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
/* The whole container for the page */
#mainDiv {
position: relative;
top: 0px;
left: 0px;
width: 767px;
padding: 7px 0px 25px 13px;
}
/* START: Calendar | Site Map | Home link and related styles */
#topLinks {
position: relative;
width: 757px;
padding-bottom: 8px;
text-align: right;
font-size: 10px;
color: #999999;
}
#topLinks .linkStyle {
font-size: 10px;
color: #999999;
text-decoration: none;
}
#topLinks .linkStyle:hover {
text-decoration: underline;
}
/* END: Calendar | Site Map | Home link and related styles */
/* START: items within the lighter background block */
#siteContent {
position: relative;
width: 741px;
padding: 14px 13px 35px 13px;
background-color: #393D23;
}
#mainContent {
position: relative;
border: 3px solid #ffffff;
}
#header {
position: relative;
height: 104px;
background-image: url(img/bg-header.gif);
border-bottom: 4px solid #FFF1B8;
}
#orangeNav {
position: relative;
height: 25px;
background-color: #993300;
border-top: 1px solid #ffffff;
border-bottom: 3px solid #ffffff;
text-align: center;
vertical-align: middle;
}
#orangeNav .navImg {
padding: 4px 8px 0px 8px;
}
#content {
position: relative;
background-image: url(img/bg-content.gif);
padding: 0px 0px 25px 0px;
}
#leftSide{
position: relative;
left: 9px;
top: 12px;
width: 150px;
}
#nav {
position: relative;
width: 150px;
border: 1px solid #A8A81F;
background-color: #E0DD92;
padding-top: 5px;
}
#nav .navItem {
padding: 5px 8px 5px 8px;
}
#nav .navItem:hover {
background-color: #E9E6B0;
}
#nav .link {
font-size: 10px;
color: #393D23;
text-decoration: none;
}
#nav .link {
font-size: 10px;
color: #393D23;
text-decoration: none;
}
#nav .link:hover {
text-decoration: underline;
}
#rightSide{
position: relative;
left: 200px;
top: 12px;
width: 520px;
font-size: 11px;
border: 1px solid red;
}
#bottomNav {
position: relative;
background-color: #989A8C;
padding: 2px 25px 2px 0px;
text-align: right;
}
/* START: footer area and related styles */
#footer {
position: relative;
padding: 20px 0px 0px 0px;
color: #BFC1B8;
font-size: 10px;
line-height: 14px;
text-align: center;
}
#footer .linkStyle {
font-size: 10px;
color: #BFC1B8;
text-decoration: none;
}
#footer .linkStyle:hover {
text-decoration: underline;
}
Edited to add: I have included the div tags for the left and right portions: #leftSide and #rightSide I'm into redesigning our web shop, and am thinking about navigation. Today we have a 30-item tree menu, "norton commander"-style. I'm looking for a modern, user-friendly alternative. I've understood that top menus are very "in" now, so I have concidered that, but failed to narrow down the menu items. I need a vertical menu that can hold many items, but also is user friendly. this menu is good, but I would like to load the submenu items via ajax. Anybody know if anyone has done that? Can anybody point me in the right direction of any blog/article/script about how to deal with the navigation problem? Hi-- I'm sure I'm missing something incredible easy, but I'm working on no sleep so please help! I've got image buttons and for rollovers I want to have a simple color highlight on the top so I've got the image in the background of a <div> then in a nested <div> I put a 100% transparent .png inside a link tag. Using CSS, I said replace that with the semi-transparent .png. In Firefox it displays the highlight at the bottom of the button image; in IE 6, it doesn't even display the background. My code: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
<!--
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
a img {border: none;}
.button {width: 193px; height: 116px; background-image:url(button.jpg);}
.button2 a:link {background-image:url(transparent.png); border: none; width: 193px; height: 116px; display: block;}
.button2 a:hover {background-image:url(hover.png); border: none; width: 193px; height: 116px;}
-->
</style></head>
<body>
<div class="button"><div class="button2"><a href="#"><img src="transparent.png" width="193" height="116" /></a></div></div>
</body>
</html>
Hei ppl. i am begenning of designing in css but i have a problem.. i have my website www.zyxep.net/byensguf/ i have that div in the bottom under the text "footer" that <div> do i need to get over the header image to the right.. so the right side of the login field is flush with the right side of the border.. and i need it to stay on that position in every size of the users screen.. min. 800x600 max. anything.. here is my css code: Code:
body {
text-align: center; /* center things in pre-IE6 */
margin: 0px auto;
}
#container {
margin: 0px auto;
left:150px;
top:0px;
width:760px;
height:420px;
z-index:1;
border-left: 1px solid black;
border-right: 1px solid black;
}
#header {
margin: 0px auto;
left:0px;
top:0px;
width:760px;
height:200px;
z-index:2;
background-image: url(images/logo.jpg);
border-bottom: 1px solid black;
}
#menu {
margin: 0px auto;
left:0px;
top:200px;
width:760px;
height:20px;
z-index:3;
border-bottom: 1px solid black;
}
#content {
margin: 0px auto;
left:0px;
top:220px;
width:760px;
height:180px;
z-index:4;
border-bottom: 1px solid black;
}
#footer {
margin: 0px auto;
left:0px;
top:400px;
width:760px;
height:20px;
z-index:5;
}
#login {
margin: 0px auto;
left:760px;
top:15px;
width:400px;
height:50px;
z-index:6;
}
#username {
width: 100px;
background-color: transparent;
border: 1px solid black;
}
#password {
width: 100px;
background-color: transparent;
border: 1px solid black;
}
#loginsubmit {
width: 100px;
background-color: transparent;
border: 1px solid black;
}
and my index.php Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE>ByensGuf.dk - Byens bedste guf</TITLE> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT="zyxep"> <META NAME="Keywords" CONTENT="zyxep, zyxep.net, portfolio"> <META NAME="Description" CONTENT="zyxep.net - portfolio"> <meta name="REVISIT-AFTER" content="1 DAYS"> <LINK REL="stylesheet" HREF="style.css" TYPE="text/css"> </head> <body> <div id="container"> <div id="header"></div> <div id="menu">menu</div> <div id="content">content</div> <div id="footer">Footer</div> <div id="login"> <form action="login.php" method="post"> <div> <input type="text" name="username" id="username"> <input type="password" name="password" id="password"> <input type="submit" value="login" id="loginsubmit"> </div> </form></div> </div> </body> </html> plz help me.. i am so confused |
|||||||