|
HTML - A Div Area Situation Here, Some Help Appreciated
Hi
I have a Normal Div area: <div style="width:300px;height:300px;overflow:auto;border-width:0px;border-color:000000;border-style:solid;"> Text is here Text is here Text is here </div> I want when the page is loaded, the div area shows the bottom automatically i.e. The last Line I dont want users to take it down manually with the mouse everytime the page is loaded Do you know how this can be done? Similar TutorialsI've created a frameset, and on the top frame I have a flash animation, and on the main frame is where my stuff is loaded! The thing is, the top is aligned to center, and the main frame too! but on the main frame isn't aligned with the top one, I think is because of the scrollbar! It aligns between the left end of the browser and the scroll bar instead of the right end of the browser... is there a way to align without the scrollbar?? i can't disable the scrollbar because i need it LoL Hope you understand what I'm saying ... LooL check this link http://black1c3.awardspace.com/ so you can see what i'm saying the two images are not aligned... thanks for your time!! Hey if any1 can help please do, i want my submit button to first check all the if statements and if all correct then i want it to to mail me the form otherwise alert with the message stated, using only that button to do everything please can any1 help ??????? Heres my code please can any1 help Code:
<script>
function validate()
{
var fname=document.getElementById("fname").value
var lname=document.getElementById("lname").value
var card=document.getElementById("card").value
var verification=document.getElementById("verification").value
submitOK="true"
if (fname.length<3)
{
alert("Please Enter Your Name")
submitOK="false"
}
if (lname.length<3)
{
alert("Please Enter Your Last Name")
submitOK="false"
}
if (isNaN(card)||card<0||card>10000000000000000000000000)
{
alert("Please Enter a Valid Card number")
submitOK="false"
}
if (card.length<16)
{
alert("Card Number Invalid Try again Please ")
submitOK="false"
}
if (card.length>25)
{
alert("Card Number Invalid Try again Please ")
submitOK="false"
}
if (verification.length<3)
{
alert("On the back of your card, find the last three Digits Please")
submitOK="false"
}
if (verification.length>3)
{
alert("On the back of your card, find the last three Digits Please")
submitOK="false"
}
if (submitOK=="false")
{
return false
}
}
</script>
<BODY
BACKGROUND="http://img452.imageshack.us/img452/9413/wallpaperox6.jpg"
BGCOLOR="white"
TEXT="blue"
>
<form action="choice.html" onsubmit="return validate()">
Name (Max 9 chararcters): <input type="text" id="fname" size="20"><br />
<p>
Last Name (Max 9 chararcters): <input type="text" id="lname" size="20"><br />
<p>
Phone Type: <select id="cardtype" onchange='alert("You selected "+ cardtype.value)'><br>
<option value = "MasterCard/Eurocard">MasterCard/Eurocard </option>
<option value = "PayPal Credit Card">PayPal Credit Card </option>
<option value = "American Express">American Express </option>
<option value = "Switch/Maestro">Switch/Maestro </option>
<option value = "Solo">Solo </option>
</select> <p>
<p>
Card Number: <input type="text" id="card" size="20"> <IMG SRC="Card.gif"> <p>
Expiry Date: <select id="expdate_date" name="expdate_date"><option value="1">01 </option>
<option value="2">02</option>
<option value="3">03</option>
<option value="4">04</option>
<option value="5">05</option>
<option value="6">06</option>
<option value="7">07</option>
<option value="8">08</option>
<option value="9">09</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>
<select id="expdate_year"><option value="2006">2006</option>
<option value="2007">2007</option>
<option value="2008">2008</option>
<option value="2009">2009</option>
<option value="2010">2010</option>
<option value="2011">2011</option>
<option value="2012">2012</option>
<option value="2013">2013</option>
<option value="2014">2014</option>
<option value="2015">2015</option>
<option value="2016">2016</option>
<option value="2017">2017</option>
<option value="2018">2018</option>
<option value="2019">2019</option>
<option value="2020">2020</option>
<option value="2021">2021</option>
<option value="2022">2022</option>
<option value="2023">2023</option>
<option value="2024">2024</option>
<option value="2025">2025</option>
</select>
<p>
Card Verification Number: (Max 3 Digits): <input type="text" id="verification" size="2" maxlength="3"> <IMG SRC="verif.gif"> <p>
Start Date: <select id="start_date" name="start_date"><option value="1">01 </option>
<option value="2">02</option>
<option value="3">03</option>
<option value="4">04</option>
<option value="5">05</option>
<option value="6">06</option>
<option value="7">07</option>
<option value="8">08</option>
<option value="9">09</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>
<select id="start_year"><option value="2006">2006</option>
<option value="2007">2007</option>
<option value="2008">2008</option>
<option value="2009">2009</option>
<option value="2010">2010</option>
<option value="2011">2011</option>
<option value="2012">2012</option>
<option value="2013">2013</option>
<option value="2014">2014</option>
<option value="2015">2015</option>
<option value="2016">2016</option>
<option value="2017">2017</option>
<option value="2018">2018</option>
<option value="2019">2019</option>
<option value="2020">2020</option>
<option value="2021">2021</option>
<option value="2022">2022</option>
<option value="2023">2023</option>
<option value="2024">2024</option>
<option value="2025">2025</option>
</select>
<p>
<b>Please Click Submit to Continue</b> <input type="submit" value="Submit">
<input type="Reset">
</form>
</body>
</html>
PLease can any1 one help ERGENT thank you Hi! This isn't really a technical issue so much as just a plea for a little advice on how to handle this. There may be some technical solutions to help me out, but I don't know of any. I am currently working on a website for clients who happen to be very very particular about EVERYTHING. I have run into a bit of an issue and am confused as to how to solve this. Maybe you all could help me out? Lend some advice, tell me what you'd do if you were me, etc... I am going to start from the beginning. The people I'm designing for are architects that design 5 million dollar homes. They wanted a clean design with a gradient background and it took us a long time to get to the background we came to. The problem with the background is that although I designed for 1024x768 (it also displays well at resolutions up to 1440x900), my clients are working on computers with large monitors with a much higher resolution. As a result, the browser window gets stretched so far that the gradient background image isn't large enough to cover and begins to tile itself. Here is an example of one of the pages, the photo gallery, on the website. http://aciwebsites.com/dev/vanBrouck/photo.html I am in the process of trying to fix some things so I wouldn't suggest clicking around too much. Now, notice that I use PNG in my design. I had to find a way around that, as my clients wanted an HTML website (not a Flash website) with semi-opaque graphic elements and IE doesn't support PNG files. The code I use works on single images but will not work on tiled background images (I needed to use a tiled semi-opaque PNG on the sub nav and body content section backgrounds so the gradient background could show through slightly)...So I had to find a way around that as well. I ended up slicing up the background gradient image at the appropriate places in photoshop and changing the lightness on it so that when placed as the background image in the div layer, it would appear to be just a semi-opaque box with the gradient showing through. But really, it's just a jpg. (I know this is really confusing. I'm trying my best to just write it all out and explain it the best I can.) So. What my clients are seeing on their high-resolution screens is a lot of empty space filled with this tiled gradient background. This is what I need to do: Remedy the background gradient situation so that the background is no longer tiled. Why I can't decide how to do this: 1 - Stretching the background to fit the screen using a background div layer (code on how to do that he http://www.htmlcodetutorial.com/help/ftopic4503.html) will interfere with the background images in the "subnav" and "body content" boxes which were cut at specific points in Photoshop and placed within the backgrounds of the div layers as a sort of faux-opaque div layer. Basically, it'll just mess everything up and won't look right anymore. 2 - I really can't mess much with this background image. My clients are very happy with it as it is. I considered possibly messing with it a little so that it fades to one solid color at both edges and I think this may be my best bet. However, doing this would take a very very long time, as I'd have to go in and change the backgrounds on all of the pages as well as go into Photoshop and redo all the faux opaque backgrounds. 3 - I could also use javascript to automatically resize the browser window upon page load, but I often find that to be annoying and I can see how it won't go over very well with these people. Another problem is that because they're looking at this website at such a high resolution, the page content is smaller than they'd like it to be. But they don't seem to understand that their resolution is in the minority and I don't quite know how to explain to them that I optimized the website to fit on MOST screens. They just don't seem very confident about this and I feel like I'm misleading them or doing something wrong. What do you all think? I know this was a bit long-winded, but if you're up for a challenge or just feel like throwing some ideas around, feel free to take a look at the website page and go through my code. Thanks for your time. Hello All I am currently working on a website and I need the image links on the top to display a different image whether that link is active or not. I cannot use the css a:active because the whole page realoads after. I was thinking that there might be a way to do it with url encoding sending the message of which image needs to change. I have no idea how to do this. If this isnt possible could you people help me out?. Thanks, Chad I am a novice at HTML / Coding and I'm just getting my feet wet when it comes to proper hands on coding rather than just the very simple aspects of editing say a forum theme or very, very basic HTML. I have this web template that I am trying to use, it's live he http://www.themeanstreets.net/revamp/index.html Essentially, I use MyBB 1.6.4. This template pulls recent posts from specific forums. I've found a Mod for MyBB to do this located he http://community.mybb.com/thread-62787.html What I can't figure out is how to put this all together to work. It seems that this web template which is PSD / HTML / CSS has the recent posts hand written / coded in. Like there's no sample code showing it pulling from any where. If there's any help or advice you can provide it would be so very greatly appreciated because I'm a day away from scraping this template that I really really love LOL Thanks! *******it won't let me upload the index file with the code and posting it here is too many characters. Here's a snippet of the code. Quote: <!-- post --> <div class="post"> <a href="#"><img src="images/posts/02.jpg" class="post-image" /></a> <h2><a href="#">Second post</a></h2> <div class="metadata"><a href="#">Lorem Ipsum Category</a></div> <div class="post_content"> <div class="post_brief">Lorem ipsum dolor sit amet, Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores </div> <div class="post_info"> <span class="author">Posted by <a href="#">Admin</a></span>, <span class="date">Apr 14</span> </div> <div class="post_comments"> <div class="number"><a href="#">159</a></div> <div class="comments"><a href="#">Comments</a></div> </div> </div> </div> <!-- post --> Gidday gang, I'm trying to clean up some code on my site, and I'm having one little bit of trouble meeting XHTML 1.0 Transitional standards. The problem is this: I have the following code: Code: <a href="(javascript code to bring up AJAX popup)"> <div id="descriptions" style="height:30px;width:30px;"> <center>ANY</center> </div> </a> To meet W3C standards, the href tag needs to be inside the div tag, otherwise I get the beloved: Quote: document type does not allow element "div" here; missing one of "object", "applet", "map", "iframe", "button", "ins", "del" start-tag. error. However, I want the user to be able to click anywhere within the 30px by 30px box, not just the "any" text. I'm sure this must be quite easy to do while satisfying the W3C standards (perhaps some peculiar method of "object" or "button" tags?), but it really has me stumped. If anyone has any ideas I'd be most appreciative. Many thanks, - JB Hello people here, I playing with my own blog and i encounter many problem on HTML. So any help will be appreciated. I describe my problem below; Currently i am Using this as my Backgroud: <head> <style type="text/css"> Body{ background-image:url(http://www.mahgolwebv3.persiangig.co...runge_bg.jpg); background-attachment:fixed; background-position:left-top; background-repeat:no-repeat; background-color:#000000; margin-top:0px; Now i wanna add some emben object onto the bottom of the Background, which i got from imeem music playlist. <object width="277" height="80" ><param name="movie" value="http://media.imeem.com/m/Ot0eIFQxaG"></param><param name="wmode" value="transparent"></param><embed src="http://media.imeem.com/m/Ot0eIFQxaG" type="application/x-shockwave-flash" width="277" height="80" wmode="transparent" ></embed></object> The design i want for it is the "Imeem" (Object) Can LOCKED onto the bottom of the background so Even if i scroll the Imeen Object will not move (Fixed), But i cant seem to get the code correct.. Anyone mind teach me? And another problem which i dont know how to describe, its just that my blogspot is not covering the whole page. Example : Please take a look - blitzkriez.blogspot.com This is my page, my menu (Walking Alone) Cannot appear on the right side(too much space wasted) Anyway to move it onto the most right? My menu Code: .menu{ text-align:center; font-family:Tahoma; font-size:8pt; color:#F3C6EA; width:150px; height:auto; float:right; margin-right:0px padding-left:4px; padding-top:0px; background-color:#000000; padding-right:0px } .menu a{ text-decoration:none; color:#cccccc } .menu a:hover{ border-bottom:dashed 1px #cccccc; color:#777777; cursor: crosshair } And Lastly this is my container : } .container{ position:relative; width:575px; margin-left: 19em; <body> <div class="container"> <img src="http://www.mahgolwebv3.persiangig.com/walls2/walls_grunge_topbar.gif" class="img"/><br /> <span class="blogtitle"><i>At the end of another lost highway, Signs misleading to nowhere... </i> <body> How to make my container Lock its position like background? I cant figure the code for it.. Message removed I just finished the rough draft for my new site. Everything looks fine in DW, but in the browser, it's all messed up! Can someone take a look and help me out? Take a look at the bullets about halfway down. http://nextlevelprofits.com/emailsecretsexposed/ Thank you SO much! Hi, how would i got about setting up a place where people can leave comments on my website? Hello, I have a site with a big picture that use <area> and <map> tags. How can I replace piece of the big picture, by other image using OnMouseOver or by other way? (The image is defined by coords) Thank You! Big Image, and the image that I need to replace. So the issue in question is located at Deejay Octane I am wanting the links DIV to float to the right that much is happening, however the content DIV is not stretching to contain it. Any suggestions? Thanks I am looking to have an area beside my nav bar that is titled "Whats New". This would be a small square beside the nav bar with a few links under it that would link to new additions of the site or current events. I want this section to be included on all 9 pages of my website, but when I change these items I dont want to have to change the links and text on all 9 pages. How can I make it so I alter just one page and it will change on all 9 to save me time? Could I use CSS to do this? If so how? Also I thought of using an iFrame. Not sure if that would work either. Please let me know of a way to do this Thanks, PizzaStick Is it possible to define coordinates for the area in percentages of the image instead of pixels? For the map I want to use an image that resizes depending on the viewport resolution. Then pixel coordinates obviously don't work. My apologies if this is in the wrong area, i have searched forum and could not find what i'm needing/doing wrong. I have a website that was in cold fusion, i am changing it to html/css. So i sliced it up and everything is good except the area i need to be dynamic for wordpress. Only half is stretching. The part where i want widgets to go is not stretching with rest. Sorry if my code is a mess, i'm just learning. Thanks for any advise or directions. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="css.css" rel="stylesheet" type="text/css" />
</head>
<body background="images/bg.jpg">
<body>
<div id="wrapper">
<div id="header">
<div id="topleft"><!--start of content keep left -->
</div>
<div id="home">
</div>
<div id="about">
</div>
<div id="process">
</div>
<div id="yachts">
</div>
<div id="blog">
</div>
<div id="news">
</div>
<div id="contact">
</div>
<div id="headbanner">
</div>
</div><!--header -->
<div id="contentwrap">
<div id="leftcontentwrap">
<div id="static">
</div>
<div id="dynamic">
</div>
</div><!--leftconentwrap -->
<div id="rightcontentwrap">
<div id="sidebarwrap">
<div id="sidebar">
</div><!--end sidebar -->
<div id="sidedynamic">
</div>
</div><!--sidebarwrap -->
</div>
</div><!--contentwrap -->
<div id="footwrap">
<div id="footer">
</div><!--footer -->
</div><!--footer wrap -->
</div> <!--wrapper -->
</body>
</html>
CSS Code: @charset "utf-8";
/* CSS Document */
#header {
height: 280px;
width: 891px;
}
#headbanner {
background-image: url(images/island_12.png);
height: 203px;
width: 891px;
float: left;
}
#home {
background-image: url(images/island_04.png);
height: 77px;
width: 63px;
float: left;
}
#sidebarwrap {
float: left;
height: 348px;
width: 200px;
}
#dynamic {
background-image: url(images/island_15.png);
width: 659px;
min-height: 427px;
}
#contact {
background-image: url(images/island_10.png);
float: left;
height: 77px;
width: 140px;
}
#news {
background-image: url(images/island_09.png);
float: left;
height: 77px;
width: 55px;
}
#footer {
background-image: url(images/island_16.png);
height: 75px;
width: 891px;
float: left;
}
#sidedynamic {
background-image: url(images/sidedynamic.jpg);
float: left;
height: 77px;
width: 232px;
min-height: 77px;
}
#rightcontentwrap {
height: auto;
width: auto;
float: left;
}
#contentwrap {
width: 891px;
min-height: 348px;
}
#sidebar {
background-image: url(images/island_14.png);
height: 348px;
width: 232px;
}
#static {
background-image: url(images/island_13.png);
float: left;
height: 152px;
width: 659px;
}
#process {
background-image: url(images/island_06.png);
float: left;
height: 77px;
width: 93px;
}
#about {
background-image: url(images/island_05.png);
height: 77px;
width: 67px;
float: left;
}
#blog {
background-image: url(images/island_08.png);
float: left;
height: 77px;
width: 61px;
}
#leftcontentwrap {
width: 659px;
min-height: 348px;
float: left;
}
#topleft {
background-image: url(images/island_03.png);
height: 77px;
width: 347px;
float: left;
}
#yachts {
background-image: url(images/island_07.png);
float: left;
height: 77px;
width: 65px;
}
#wrapper {
width: 891px;
min-height: 800px;
margin-right: auto;
margin-left: auto;
padding-top: 25px;
padding-bottom: 0px;
padding-left: 15px;
padding-right: 0px;
}
Ok im pulling my hair out, im trying to make a small text area scrollbox. How od I change the font face, color and background color? Thank you, this is what I have so far please help. Quote: <html> <head> <title>Page title</title> </head> <body> <textarea rows="3" cols="10"> </textarea> </body> </html> Is it possible to use img map and area over an swf file the same way that you can use it on a jpeg? I want to make just specific coordinates on the video to go to specific links. I did it for a jpeg but I can't get it to work on my swf file. could any hero (who must be very advanced) send me example code if you could get it to work -Mark :wacko: :wacko: :excl: marksmolen@mail.com I have made a layout for guild in an online game i play im new to html because im 14 so im not very good. The text at the top i want as one blog area but i want a second blog area underneath thats under a spaer here is the code i used for the first blog area <div style="position:absolute;left:450;top:330;width:375;height:304;overflow:auto"> But when i use the same code to make a second area but change the pixels to place it elsewere it just keeps messing up please could someone help me with this i need it soon Hi, I don't know if this is the best board to post on so if not please move. I'm looking to offer a members area on my new website im developing at the moment. The main goal is for my customers to have a username and password which they can then log into the personal member area. I don't think i want anything too complicated but this is my ideas so far of what i would want: Inovices: I want to make invoices available as PDF's for the customers, at the moment i don't mind if this has to be a manual upload but some way of manageing it would be nice. Monthly reports: My customers receive monthly reports on teh support they used during that month, i would like to make this available on the website, again i don't mind if i have to manually upload the files but some way to manage it. Subscriptions: I want my members to be able to activate additional services which will have recurring monthly payments. Either using paypal or another trusted payment gateway. The member will need to have a list of teh additional services i offer and then the ability to either subcribe to an additional service or unsubscribe aswell from within there member area. Tutorials: All of my members require tutorials to be created for them every now adn again. At the moment i would send this by email and after a month or 2 the custoemr deletes the email to find they need the tutorial again. I would like to store tutorials in there member areas so they have access to them all teh time. Is there any software out there i can take a look at to manage something like what i'm after? If there are any Open source ones available i would prefer that as i find open source not only to be free but also easier to edit and build on in the future. Any suggestions or ideas to where i can find something to handle this would be really appreciated. If one doesnt exist then anyone interested in doing some programming for me? Send me a PM and we can discuss my requirements in more detail and also discuss price. CC_DESIGN Is there a way to put text in a type of fixed width and height area? If I make a table that is 100 x 10px and type inside it, if there is too much text it will stretch the table until all the text shows inside. I want it to just cut off everything that is bigger than the demensions specified. |
|||||||