|
HTML - Can't Make My Header Stay Put In My Gallery, It Scrolls Along With The Galery
how do I make my header not scroll with my gallery?
anything above the images, my name, email, number, link to bio all that stuff page in question is www.paulodourado.com Similar TutorialsI have a web page that has a banner at the top. It is in a div. the main part of my page is also in a div. Using the Z-index parameters and the position parameters on each div, I have the main part of the page scroll underneath the banner. I have a link at the top of the page, <a href="#mondaymtgs">Meetings on Monday</a> Which points to a name anchor on the page. When the link is clicked, it goes to (or scrolls to) The named anchor: <a name="mondaymtgs">Meetings that are on Monday.</a> The problem is this, when it does scroll to the named anchor, It does it such that, the named anchor is at the top of the page, Underneath the banner. I suppose I could just keep moving the named anchor up a little at a time, each time when I move it up, testing the link to see if the page scrolls such that, the point I want I to scroll to appears just below the banner. I am going to have numerous links at the top of the page, pointing To various places on the page. I hate to have to do this for each link. I would rather just put the named anchor where I want it to page to, and have that line show just under the banner. Is there any way to do this? Thanks in advance. Laurence Hope the title made sense, I am using Microsoft Expression Web and, I am also using Frames on my website. I have 3 Frames, One complete at the top, one on the left side and then a main page frame to fill the rest. I am using a 19" wide screen monitor, and because of that the pages I make are all unaligned with each other as they get stretched to fill the monitor. now the top frame and left frame stay where they should I have done that, but I can't keep the main page frame from moving over to the right and making everything look untidy and nasty. so could anyone help me out with this problem please, I use a background Image, text and images on the page so they all need to stay centered bu to the left of the page. Or maybe center all the frames to the middle of the screen such as www.myspace.com looks on a wide screen monitor (although i know they do not use frames.) Thanks in advance How do I make a table with a fixed width stay centered even if the browser window's horizontal size is smaller than the table's horizontal size? align="center" makes the table centered as long as the browser window is bigger than the table. If the browser window is smaller, the table will be cropped on the right size only, not on both size. I would like to do this to have a table with a fixed width and a background image, so that no horizontal scrolling bar appears if the screen resolution if too small for the table. The image should howerver stay centered no matter what the windows size is. Thanks. Can someone show me how to make a background stay still when you scroll up and down the page? Hi, I am trying to figure out how to make my links stay on the left side page while scrolling down or up. Not sure if this is the right place to post. Any help, codes, and/or examples would be great. Thanks Hey. I'm relatively new to web design. I've made a gallery of photo's using this code: <INPUT type="image" src="image.ext" onClick="window.open('http://www.website/image.jpg,'mywindow','width=400, height=600')"> because I wanted all photo's to pop up in a new window, and with specified dimensions. This code works great, but I want to have the "rolleover" effect, where you can put the mouse over it and it changes the photo, such as with this code: <body> <a href="zstore.html" onmouseover='rollover.src="http://ollertonmusic.com/images/ministudio1.jpg"' onmouseout='rollover.src="http://ollertonmusic.com/images/ministripes.jpg"'> <img src="http://ollertonmusic.com/images/ministripes.jpg" name="rollover"> </a> I want to be able to have the image have the "rollover" effect when the curser touches the photo, AND open in a new window with specified dimensions. And I'm wondering where to add in the ALT tag. Thanks! Hi. I want part of the text in my table header to be bold, but I also want another part of it to be regular font. I'm kind of new to HTML. How would I do this? Thanks, Brad Hi all, How would you go about setting up your header and footer so that if you need to make a change it would apply to all of your sites without having to manually go through and change the html on each individual one. I haven't made web sites in over a decade, and I am afraid using frames is quite out of date =). Thanks, Ryan Hi all, I'm trying to make my background (which contains my logo and site name) to be clickable to my site's URL. Seem to be having difficulty because I am using a modified WordPress template along with linking to a stylesheet. Not very good or familiar with php and css, unfortunately. Anyone have some energy to crank this one out with me? sorry for being vague in my initial post. Here is the header php code: <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>[TITLE]</title> <link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" /> </head> Here is the css code: .header{margin:20px 0;} .header .top{background:url(images/logo-graphic.jpg) top left no-repeat; height:120px; width:960px; margin:20px auto;} .header .top #secondary{float:right; width:468px; height:60px; margin:20px 0 0 0; border:1px solid red;} .header .navigation{background:url(images/navigation-bar-bg.png) top left repeat-x; height:61px;} .header .navigation .nav-wrapper{width:960px; margin:0 auto; height:49px;} .header #searchform{float:right; width:325px; height:40px; margin-top:6px;} .header #searchform #s{font-size:14px; padding:6px 4px; border:1px solid #666; outline:none; -webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px; -moz-box-shadow: inset 0px 1px 3px #888;-webkit-box-shadow: inset 0px 1px 3px #888;box-shadow: inset 0px 1px 3px #888; } http://cedarcreekyouth.org/chat.html I'm able to scroll below the div.. How can I fix this? Can somebody show my how they would format this page? Please & Thank you! Cody I'm having some trouble with the two scrolls. How do I align them to match up to the picture? This is my code: HTML Code: <table border="0" cellpadding="0" cellspacing="0" width="700" height="700" background="http://img255.imageshack.us/img255/220/noridfg4.jpg"> <tr> <td width="36"></td> <td width="354" valign="bottom"> <div style="overflow: auto; height: 398px; width: 290px; padding: 0px; border: 1px black solid"> </div> </td> <td valign="bottom"> <div style="overflow: auto; height: 292px; width: 220px; padding: 0px; border: 1px black solid; margin-left: auto;"> Write text here </div> </td></tr><tr> <td height="80"></td> <td></td><td></td></tr></td></tr></table> i have an html form that uses javascript to calculate the total price of gift cards. when i use a button for submit, everything is peachy. when i use an image to submit, the form races to the top and shows the top line of the page. the text is enclosed within a div tag that has a set height with auto as the overflow command. i removed the height and overflow, thinking that the enclosure was causing this. nope! same thing happened. this is the submit code: <input type="image" src="images/buttons_contact_calculate.gif" onclick="calcard(this.form)"><input type="text" name="totalprice" size="8"><br><input type="image" src="images/buttons_contact_reset.gif" name="reset" /> the javascript code is this: function calcard(form) { $totalprice = 0; if(form.card_twentyfive.checked==true){ twentyfive = (25 * form.twentyfive_no.value); } else { var twentyfive = 0; } form.totalprice.value = twentyfive + fifty + seventyfive + onehundred + twohundred + ".00"; } As indicated in the last line, there are five if statements including the twentyfive statement shown here for an example. the css is this: .text_box { position: absolute; top: 280px; left: 0px; width: 100%; z-index: 15; } .text { position: relative; left: 0px; top: 0px; width: 473px; height: 406px; overflow: auto; padding: 0px 30px 0px 503px; font-size: 13px; font-family: "arial"; font-weight: normal; line-height: 150%; letter-spacing: 0px; text-align: justify; color: #FFFFFF; z-index: 5; } any ideas about what is going on? Hello everyone! I've got a pretty strange problem. I have a div with overflow: hidden and it works fine in all the browsers except Safari. In Safari, if you have a Macbook, you can scroll the contain of the div using two fingers. However, there is no problem like this on the iTunes site. Here is my code: HTML Code: <div style="width: 480px; height: 320px; overflow: hidden; position: relative">
<img src="http://new.yogamen.net/uploads/games/crazy/1.png" style="float: left" />
<img src="http://new.yogamen.net/uploads/games/crazy/2.png" style="float: left" />
<img src="http://new.yogamen.net/uploads/games/crazy/3.png" style="float: left" />
<img src="http://new.yogamen.net/uploads/games/crazy/4.png" style="float: left" />
</div>
My page scrolls and it shouldn't! Any ideas...? or can I not see the wood for the trees? Link HI Im making a site at the mo and im looking to keep the menu and a picture stay in the same position constantly. So when then user moves the scoll wheel only the text are will scroll. I dont want there to be any border or scroll bars around the text, so the only visable scroll bar will be the browsers... any ideas? I have listed items inside a div that display just find in FF v3.0.1, but not in IE v7. Here is the link to my page. http://web.missouri.edu/~mdsybf/ Here is the CSS of a class div that surrounds the previously mentioned div. .MainEdit { clear:both; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; font-weight: normal; color: #000000; text-decoration: none; float: left; padding-right: 10px; padding-left: 10px; padding-bottom: 10px; padding-top: 10px; margin-left: 10px; width: 700px; clear: right; display: inline; vertical-align: top; height: auto; } What is wrong with my code that makes the listed items appear outside the div box? Hello lady's and gentelmen.. I have a really short question (almost so small it's not even worth waste a whole thread on it!) But, here it goes When I go to my homepage: www.sp34k.dk and maybe select "blog", then I can see the link "www.sp34k.dk/blog.htm" and if it go to billeder (picture) then its www.sp34k.dk/billeder.htm. Are there any possibility for that I can do such it dosent change? So it would ALWAYS stay as "www.sp34k.dk"? Kind regards Mike Bertelsen Denmark For some reason when there is little content on the page, the layout doesn't remain centered. What can I do to fix this? Here is the link to my website: Check out the difference between about and knowledge http://www.organicgardencafe.com/about.php I'm using NVU. I've got code that was generated by Omnipage - it is full of boxes and divs and spans which I don't understand yet. Anyway I'm doing alright except when I put a line of links (forward,back,index,main) in at the bottom of each of these pages, above the bottom-of-the-page 'credits', I find I can't keep them separate. I put a few carriage returns in and there's some clear space - four or five lines or more - between them. I save the file, close the file, pick the file up again and look at it and they've closed up again! Dreamweaver doesn't seem to be able to sort it out, either. You can see the pages and their code at mbccc.net and follow the 'parent information' link. regards, ab hi i have built two pages using DW, an INDEX page and a FORM page. They both contain divs. I want to have the FORM page appear in the MAIN CONTENT div of the INDEX page. I got that to work, however the problem is the Form itself does not stay in the Div it is placed in, it floats out under the DIv and on top of other content. thanks for the help - my code is too long to post in one thread - will post the index code in part two here is the FORM code: 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>
<style type="text/css">
<!--
* {
margin: 0px;
padding: 0px;
}
body {
}
img {
}
h1 {
}
h2 {
}
h3 {
}
#retailWrapper {
height: 540px;
width: 980px;
}
#retailWrapper #retailHeader {
height: 50px;
width: 980px;
float: left;
}
#retailWrapper #leftImage {
float: left;
margin-top: 10px;
clear: none;
}
#retailWrapper #form {
height: 400px;
width: 680px;
margin-top: 10px;
padding-top: 10px;
float: left;
}
.style1 {font-family: Arial, Helvetica, sans-serif}
.style19 {font-size: 12px}
.style21 {font-size: 16px}
.style23 {color: #000000}
.style25 {color: #FFFFFF}
.style27 {color: #BEBEBE}
.style29 {font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #000000; }
.style30 {font-size: 14px}
.style31 {font-family: Arial, Helvetica, sans-serif; font-size: 14px; }
-->
</style>
</head>
<body>
<div id="retailWrapper">
<div id="retailHeader"><img src="_Art Files/newRetailerInq.gif" width="980" height="51" /></div>
<div id="leftImage"><img src="_images/_galleryImages/retailDisplay.jpg" width="200" height="480" /></div>
<div id="form">
<form id="form1" name="form1" method="post" action="">
<table width="51%" align="center" cellpadding="8" cellspacing="6">
<tr>
<td width="131"><div align="right" class="style29">
<label for="name">Name:</label>
</div></td>
<td width="196"><div align="left" class="style31">
<input type="text" name="name" id="name" />
</div></td>
</tr>
<tr>
<td width="131"><div align="right" class="style29">
<label for="storeName">Store Name:</label>
</div></td>
<td width="196"><div align="left" class="style31">
<input type="text" name="storeName" id="storeName" />
</div></td>
</tr>
<tr>
<td width="131"><div align="right" class="style29">
<label for="addressLine1">Address Line 1:</label>
</div></td>
<td width="196"><div align="left" class="style31">
<input type="text" name="addressLine1" id="addressLine1" />
</div></td>
</tr>
<tr>
<td width="131"><div align="right" class="style29">
<label for="addressLine2">Address Line 2:</label>
</div></td>
<td width="196"><div align="left" class="style31">
<input type="text" name="addressLine2" id="addressLine2" />
</div></td>
</tr>
<tr>
<td width="131"><div align="right" class="style29">
<label for="city">City:</label>
</div></td>
<td width="196"><div align="left" class="style31">
<input type="text" name="city" id="city" />
</div></td>
</tr>
<tr>
<td width="131"><div align="right" class="style29">
<label for="state">State:</label>
</div></td>
<td width="196"><div align="left" class="style31">
<input type="text" name="state" id="state" />
</div></td>
</tr>
<tr>
<td width="131"><div align="right" class="style29">
<label for="zip">Zip:</label>
</div></td>
<td width="196"><div align="left" class="style31">
<input type="text" name="zip" id="zip" />
</div></td>
</tr>
<tr>
<td width="131"><div align="right" class="style29">
<label for="email">Email:</label>
</div></td>
<td width="196"><div align="left" class="style31">
<input type="text" name="email" id="email" />
</div></td>
</tr>
<tr>
<td width="131"><div align="right" class="style29">
<label for="phone">Phone:</label>
</div></td>
<td width="196"><div align="left" class="style31">
<input type="text" name="phone" id="phone" />
</div></td>
</tr>
<tr>
<td width="131"><div align="right" class="style29">
<label for="comments">Comments:</label>
</div></td>
<td width="196"><div align="left" class="style31">
<textarea name="comments" rows="4" id="comments"></textarea>
</div></td>
</tr>
<tr>
<td width="131"><div align="right"><span class="style1"><span class="style19"><span class="style21"><span class="style23"><span class="style25"><span class="style27"><span class="style30"></span></span></span></span></span></span></span></div></td>
<td width="196"><div align="left" class="style31">
<input type="checkbox" name="subscribe" id="subscribe" />
<label for="subscribe">Subscribe newsletter</label>
</div></td>
</tr>
<tr>
<td width="131"><div align="right" class="style29">
<label for="reset"></label>
<input type="reset" name="reset" id="reset" value="Reset Form" />
</div></td>
<td width="196"><div align="left" class="style31">
<label for="submit"></label>
<input type="submit" name="submit" id="submit" value="Submit" />
</div></td>
</tr>
<tr>
<td width="131"><div align="right"><span class="style1"><span class="style19"><span class="style21"><span class="style23"><span class="style25"><span class="style27"><span class="style30"></span></span></span></span></span></span></span></div></td>
<td width="196"><div align="left"><span class="style1"><span class="style21"><span class="style30"></span></span></span></div></td>
</tr>
</table>
</form>
</div>
</div>
</body>
</html>
|
|||||||