|
HTML - Help With Swapping The Layout Of Text
Hi there,
I'm currently working on http://www.darkboutique.co.uk/DEMO/index.html (WARNING: It is very pink) and I cannot get the text on the right, Recent posts, categories etc. to go to the left. I think this is a HTML problem. Can anyone offer advice please? Thanks Similar TutorialsPlease look at my source at http://www.n60.org and tell me how I can move my text over so it fits in the frame. I've been at this for hours. Hi all, Just wondered if someone could help me figure out why (once the page has fully loaded) some of the text displayed is cut in half, horizontally !! I have tried all kinds of things to put it right. Any ideas would be greatly appreciated. The web page in question is http://www.holidayadvertising.com/An...rchresults.php Thanks Yarni Hi. I need to do a roll over image swap. When the user rolls over a button I want an image elsewhere on the page to change to a relevant image. i.e. When the user rolls over the Commercial Button, an image int he center of the screen changes to show an image of a commerial bill board. I'm using Dreamweaver mx 2004. I'm sure I had seen the tutorial in the Dreamweaver help files, but now I cannot find it. Can anybody direct me to where I need to look to get this sorted. Cheers. Leroy Hey guys, I am brand new to HTML. I managed to make it so that when I hover a mouse over an image it will change, like for a menu link button. Its a great effect. I got to thinking about it, and heres something I would LOVE to do: Have a menu link button, at the top of the page, when the mouse scrolls over it another picture changes below it as well as the button changing. So, I would have 4 pics all together. Menu1.jpg (default) Menu2.jpg (when the mouse is over it) Picture1.jpg (default, is a seperate picture below menu1.jpg) and Picture2.jpg (changes from picture1.jpg when the mouse is over menu1.jpg!) I can't seem to pull that off tho... Heres what I kinda attempted to do... <img src="forum2.jpg" style="border: none" name="forum2" <a href="URL"> <img src="forum1.jpg" style= "border: none" name="forum" onmouseover="forum.src='forum2.jpg'" onmouseover="forum2.src='forum1.jpg'" onmouseout="forum.src='forum1.jpg'"/> </a> Ok, I have a button, which i will call button.jpg I have a picture, which I will call picture.jpg I can make the image of the button change when I hover over it, but I ALSO want picture.jpg to change. The other pics are button2.jpg and picture2.jpg So when I hover over button.jpg it will change to button2.jpg and picture.jpg will change to picture2.jpg Any help? I have this script: HTML Code: <script>
function upload()
{
document.getElementById("filebox").style.visibility='visible';
document.getElementById("namebox").style.visibility='hidden';
document.getElementById("newfile").value='1';
}
</script>
<form method="post" enctype="multipart/form-data">
<table>
<tr><td>Bestand:</td><td colspan="2">
<input type="hidden" id="newfile" name="newfile" value="0" />
<span id="filebox" style="visibility:hidden;">
<input type="file" name="uploadedfile" style="width:300px;" />
</span>
<span id="namebox">
<input name="filename" type="input" style="width:300px;" value="<?php echo $row['bestand'] ?>" DISABLED="DISABLED" />
<a href="javascript:upload()">New File</a>
</span>
</td></tr>
...more form...
</table>
</form>
My problem is now that the ''filebox" and "namebox" are not at the same place. I want that if a use presses 'New File' the "namebox" is hidde and ''filebox" appears at exact the same place as "namebox" was. how to do this? I basically have some free code I found online for creating an overlay that reacts to javascript. It contains a quick time plugin and streams video when the user clicks a link. This is the code exactly as I received it and functions great. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<style>
#displaybox {
z-index: 10000;
filter: alpha(opacity=50); /*older IE*/
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50); /* IE */
-moz-opacity: .50; /*older Mozilla*/
-khtml-opacity: 0.5; /*older Safari*/
opacity: 0.5; /*supported by current Mozilla, Safari, and Opera*/
background-color:#000000;
position:fixed; top:0px; left:0px; width:100%; height:100%; color:#FFFFFF; text-align:center; vertical-align:middle;
}
</style>
<script>
function clicker(){
var thediv=document.getElementById('displaybox');
if(thediv.style.display == "none"){
thediv.style.display = "";
thediv.innerHTML = "<table width='100%' height='100%'><tr><td align='center' valign='middle' width='100%' height='100%'><object classid='clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B' codebase='http://www.apple.com/qtactivex/qtplugin.cab' width='640' height='500'><param name='src' value='http://cowcast.creativecow.net/after_effects/episodes/Shape_Tips_1_POD.mp4'><param name='bgcolor' value='#000000'><embed src='http://cowcast.creativecow.net/after_effects/episodes/Shape_Tips_1_POD.mp4' autoplay='true' pluginspage='http://www.apple.com/quicktime/download/' height='500' width='640' bgcolor='#000000'></embed></object><br><br><a href='#' onclick='return clicker();'>CLOSE WINDOW</a></td></tr></table>";
}else{
thediv.style.display = "none";
thediv.innerHTML = '';
}
return false;
}
</script>
</head>
<body>
<div id="displaybox" style="display: none;"></div>
<a href='#' onclick='return clicker();'>Open Window</a>
</body>
But bugging/stuttering and browser incompatibility has made me want it to be a .swf file instead. So now I have a very basic flash object that plays my movie, splash.swf. Here is the code and it too functions perfectly: Code: <object width="640" height="480" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/ pub/shockwave/cabs/flash/swflash.cab"> <param name="SRC" value="splash.swf"> <embed src="splash.swf" width="640" height="480"></embed> </object> So now I have two independently working bits of code - one which opens the transparent overlay and plays a video using a quicktime object, and another that is simply a flash object to replace that quicktime object. So what I've done is replaced everything in between the [object]..[/object] in the first code with everything in between the [object]..[/object] in the second code, producing the following new code: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<style>
#displaybox {
z-index: 10000;
filter: alpha(opacity=50); /*older IE*/
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50); /* IE */
-moz-opacity: .50; /*older Mozilla*/
-khtml-opacity: 0.5; /*older Safari*/
opacity: 0.5; /*supported by current Mozilla, Safari, and Opera*/
background-color:#000000;
position:fixed; top:0px; left:0px; width:100%; height:100%; color:#FFFFFF; text-align:center; vertical-align:middle;
}
</style>
<script>
function clicker(){
var thediv=document.getElementById('displaybox');
if(thediv.style.display == "none"){
thediv.style.display = "";
thediv.innerHTML = "<table width='100%' height='100%'><tr><td align='center' valign='middle' width='100%' height='100%'><object width="640" height="480"
classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
codebase="http://fpdownload.macromedia.com/
pub/shockwave/cabs/flash/swflash.cab">
<param name="SRC" value="splash.swf">
<embed src="splash.swf" width="640" height="480"></embed>
</object><br><br><a href='#' onclick='return clicker();'>CLOSE WINDOW</a></td></tr></table>";
}else{
thediv.style.display = "none";
thediv.innerHTML = '';
}
return false;
}
</script>
</head>
<body>
<div id="displaybox" style="display: none;"></div>
<a href='#' onclick='return clicker();'>Open Window</a>
</body>
But what is this? By replacing the working quicktime object with the working flash object, Dreamweaver produces a syntax error that wasn't there before, and breaks the entire script. Clearly the script is referencing something within the tags that I am replacing, although it's not clear to me what. here is the (ineffective) code currently: <img style="float: left; width: 169px; height: 73px;" src="img/logo1.png" alt="" /> <h1 style="text-align: center;">random text</h1> the image shifts the left margin such that the text is centered as though the page width was 169px less than it really is. i'm not debating the code itself; the code above behaves as its meant to. aka no surprises. i just cant figure out the appropriate code to center the text across the entire real width of the page as though there was no image. i've tried div tags & all the things google hunting advised. no luck. other than finding this forum, which seems like it'll be a boon! thanx in advance for advise/comments/feedback/help. Hi All, I am new to this forum and is expecting an answer for this question. I have implemented a facebook type search to the database which displays the familiar text saved in the database when I type some text in the database. My issue is after I have used the search box for a couple of time the text box starts displaying a similar dropdown from its history which hides my database search. Does anyone know how to disable it using html or css. See the attached Image if my question is not clear. http://www.htmlforums.com/attachment...1&d=1306715905 I have several websites that I maintain and update. A lot of them are just textual changes and I would think my customers can do these themselves by editing a simple .txt file. I was hoping my choices are avalable so that I can just insert this tag into my web pages and then give them login info to their edit page or show them how to upload the .txt file. I hope this is an easy one with several answers. Is it possible these tags could discipline your rankings in the search engines? Thanks, Jason How do I Link text in a div, h1, h2, p to an external text file or xml file - I don't really know how to ask the question. I think I need an xml file that can be easily edited by a user saved to the server to update an xhtml page text without the user getting bogged down in html. I don't want to use joomla or cms. <Any ideas />? Best wishes, mas i have a lot of text files(2-400) all have quite alot of text inside them so is there some software that can help me convert it all into html pages?? somthing that i am doing right now is: copied all of my text files pasted them into other location and editing each file and giving extention html/htm. now can u tell somthing better?? all the files will open in same frame(obviously one at a time), all have styling n everything same. Hi Can any one help. I have this form the user is ask to input a message and a number. I want to be able to add a line of text to the message, which the user can not delete. But is sent joined to the message. ie User input Message = "Hi Just would like to share this site with you" with added text: Message "Hi Just would like to share this site with you" + "mydomain.com" Can anyone help? =========================================== Here is my form so far <script language="javascript" type="text/javascript"> function limitText(limitField, limitCount, limitNum) { if (limitField.value.length > limitNum) { limitField.value = limitField.value.substring(0, limitNum); } else { limitCount.value = limitNum - limitField.value.length; } } </script> <html> <body> <form action="stext.php" method="POST" name="number" id="number" style="width: 384; height: 372; "> <input name="number" type="text" id="number" style="position: absolute; left: 123; top: 287; color: #FFFFFF; width: 154px; border: 1px solid #ACC61B; background-color: #000000" size="20" tabindex="2"><p style="margin-top: 0; margin-bottom: 0"> <textarea name="message" cols="17" rows="1" id="message" onKeyDown="limitText(message,countdown,140);" onKeyUp="limitText(message,countdown,140);" style="position: absolute; left: 120; top: 105; width: 162px; height: 154px; color: #FFFFFF; font-family: Agency FB; font-size: 14pt; border: 1px solid #ACC61B; background-color: #000000" tabindex="1"></textarea> <br> </td> <input name="Submit" type="submit" id="Submit" value="!" style="position: absolute; left: 121; top: 329; color: #D95503; width: 157px; height: 23px; border: 1px solid #D95503; background-color: #D95503" tabindex="3"></p></form> <p style="margin-top: 0; margin-bottom: 0"><font size="4" face="Agency FB">Maximum characters: 140. You have <input readonly type="text" name="countdown" size="3" value="140"> characters left.</font> </font></p> <p style="margin-top: 0; margin-bottom: 0">nmgnm,</p> </body> Hi, I hope I'm posting in the right area as this is my first thread. The problem I'm facing is I have 7 links in a row | Link 1 | Link 2 | Link 3 | Link 4 | Link 5 | Link 6 | Link 7 | and below those links I have nothing. What I want is for Text to appear on rollover on Link 1 and stay there until Link 2 or another link is hovered over. Example: Mouse hovers on Link 1 - called Free Home Survey Text appears below row of links about Free Home Surveys that the company does Mouse hovers on Link 3 - called Personalisation Text appears below the row of links about Personalisation etc Any help would be greatly appreciated. Thanks in advance hi Everyone, I have a html form in which i have a text area.I enter some thing in the text area and when i again request for the same html page i want to now display the html page with the changes i made last in the texta area. Can anyone help me out with this doubt. Thanks in advance I want to implement a rollover (javascript or css) that changes text when you rollover it. E.g. someone's name and when you rollover it shows their address. I've googled this and found a css rollover which changes the color of the text but is there a way to completely change the text? Any help much appreciated, thanks I have seen this many times but can not figure how to do it. Its the transparent images or text in text boxes, one example of this is http://au.movies.yahoo.com/Coming+Soon/to-cinemas/ At the top right you can see that transparent yahoo image in the text box and when you click it it disappears then comes back? can someone tell me how this works? Thanks Hi, this is appleguy.......6142! I was wondering how to make a text box display something somewhere else for example (This does not work)---- ------------------------------------------------------------------ [page1.html] (Pretend this is a text box)>>> [Text Text Text...] [page2.html] -This is the text displayed in the text box->>>Text Text Text... HOW DO I DO THAT PLEASE HELP!! Hope someone can help as I'm tearing my hair out at the moment!! I'm working on a site for a friend, I have only ever used basic html to code my own sites, due to this I'm having problems with the layout my friend wants. I've created it with frames, not live yet but you can view it he http://www.ladin.co.uk/Jim/index2.html The layout with color either side and content in middle is how he wants it but obviously without frames, I'm not very knowledgeable where CSS is concerned so haven't a clue how to code it, thanks in advance. Linda Ok, I've made some changes to my navigation bar on my website with Fireworks so its more interactive. I've now implemented into my html but it has throw a certain part out on the page. Its the small picture thumbs at the bottom of the page, they are supposed to be in one row accross the page, now they go underneath each other. I've been looking for ages now to see the problem but I can not work it out. Here are 2 links to the pages, the first one is the one that works previously and the second is the changed one. If you can see the problem I would be so grateful, thanks. http://www.ashley-stone.co.uk/psychedelic.htm http://www.ashley-stone.co.uk/psychedelic2.htm |
|||||||