HTML - 4 Divs, One At A Time
I would like four divs to be loaded, but for only one to show at a time. The firt one says welcome with a few pictures, and the other three appear when certain links are hovered over.
Possible? Similar TutorialsOkay, i have a problem with divs on my site i have 4 divs, the first one is the holder, he's around the other 3. Then there are 3 divs that have to be placed next to each other, but that isn't working! When i use float left or right it tottaly screwes up my page, does anyone know what i do wrong?? my code is: HTML Code: /********** Lay-out **********/ body{ margin:0; padding:0; background-color:black; font-family:Tahoma; } .houder{ background-color:white; width:982px; height:500px; margin-left:auto; margin-right:auto; } .header{ height:120px; width:980px; margin:0; padding:0; background-image:url(Afbeeldingen/header.jpg); } .headers{ background-image:url(Afbeeldingen/headr.jpg); background-repeat:repeat-x; height:21px; width:270px; margin-top:1px; font-family: Tahoma; font-size:11px; color:white; padding-left:10px; padding-top:7px; } a{ color:black; text-decoration:underline; font-size:11px; font-family:Tahoma; } .Contenthouder{ height:340px; width:980px; } .scheiding{ background-image:url(Afbeeldingen/scheiding.jpg); background-repeat:repeat-y; width:5px; height:340px; margin-left:280px; } /********** Menu **********/ .menu{ background-image:url(Afbeeldingen/menu.jpg); background-repeat:repeat-x; width:980px; height:14px; margin-top:1px; font-family: Tahoma; font-size:12px; padding-top:9px; padding-bottom:10px; } a.menu:link, a.menu:active, a.menu:visited{ color:white; text-decoration:none; padding-left:10px; padding-right:10px; } a.menu:hover{ background-image:none; color:red; text-decoration:none; background-color:white; } /********** inlog **********/ .inloghouder{ width:280px; margin-right:700px; font-size:12px; float:left; } .inlogtxt{ padding-left:20px; font-size:11px; } .inloginput{ border:0; background-color:lightgrey; font-size:12px; width:250px; height:18px; padding-top:4px; } .inlogknop{ background-image:url(Afbeeldingen/knop.jpg); font-size:11px; font-family: Tahoma; background-color:grey; border:0; color:white; font-weight: bold; height:20px; } /********** Text **********/ .texthouder{ width:500px; background-color:yellow; height:300px; float:right; } HTML 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" xml:lang="ne" lang="en"> <head> <title>Familie Voetbalspel</title> <link rel="stylesheet" type="text/css" href="Style.css" /> </head> <body> <div class="houder" align="center"> <div class="header" /></div> <div class="menu" align="left" valign="middle"> <a href="#" class="menu"><b>Home</b></a> <a href="#" class="menu"><b>Uitleg</b></a> <a href="#" class="menu"><b>Punten</b></a> <a href="#" class="menu"><b>Ronde scores</b></a> <a href="#" class="menu"><b>Klassement</b></a> <a href="#" class="menu"><b>Spelers</b></a> <span class="menurechts" style="margin-left:389px;"><a href="http://www.coachvanhetjaar.nl" class="menu"><b>Coach van het Jaar</b></a></span> </div> <div class="Contenthouder" align="left"> <div class="inloghouder"> <div class="headers"> <b>Inloggen bij het Familie Voetbalspel</b> </div> <div class="inlogtxt"> <br /> <b>Gebruikersnaam<br /><br /> <input type="text" name="gebruikersnaam" class="inloginput" /><br /><br /> Wachtwoord<br /><br /> <input type="password" name="wachtwoord" class="inloginput" /><br /><br /> <input type="submit" value="Inloggen" class="inlogknop"/><br /><br /> <a href="#">Wachtwoord vergeten?</a><br /><br /> <a href="#">Geen account?? Hier aanmaken!!</a> </div> </div> <div class="texthouder"> </div> <div class="scheiding"> </div> </div> </div> </body> </html> contenthouder is the holder, inloghouder de div on the left, scheiding the div in the middle and texthouder the div on the right Could anyone explain to me how to put rounded corners on divs? Ive researched it a bit, but i want to be able to change the colours so i dont want to use image based if possible. found a way to do it but want more than one curved div but cant seem to be able t use different colours. I want to have one large rounded div on the webpage then some smaller ones within this one for nav menus and content etc, Have found some ideas but they dont work with IE. Hello, I am using a div for my website. I would like all the content to load in the divs, I don't want to create a new page for each site.How can I do this? Also, for the portfolio,I would like the images to change when you click the arrow, but I don't want to use frames or have each image on a new page. Can I do this within the div? Thanks! http://heartless-ink.com/treegirl.html Ok, I'm completely self taught, so don't be surprise if my html is a mess. I was told recently that I'm out of date in using tables and should be using divs, so in updating my website that's what I'm trying to do. The first one is that it doesn't display properly in IE. Can anyone tell me why, and how to rectify it? http://www.ratscallions.co.uk/Test/index.html There are other problems (as you'll be able to see), but I'd like to work that one out first. Thank you, Nim Hello. I have problem with IE 6.0. 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> <!- Holly hack for 3 px --> <!--[if IE]> <style type="text/css"> #_left, #_right, #_center { zoom: 1;} </style> <![endif]--> <style type="text/css"> <!-- #_left { float: left; width: 200px; color: #900; } #_right { float: right; width: 200px; color: #00F; } #_center { float: left; width: 200px; color: #00F; } --> </style> </head> <body> <div id="_left">Polyvios left menu<br /> sdfdsfdsf<br />sdfdsfdsf<br />sdfdsfdsf<br />sdfdsfdsf</div> <div id="_right">Polyvios right menu<br />sdfdsfdsf<br />sdfdsfdsf<br />sdfdsfdsf<br />sdfdsfdsf<br />sdfdsfdsf<br />sdfdsfdsf</div> <div id="_center">ddd</div> </body> </html> The result of this code must be three in line menu. (the code is an example). But IE 6.0 can't understand divs with float. Any one who knows how I can fix it? Sorry for my English. Thank you. Can anyone help me with this code to make the page fluid in all three browsers without showing spaces in between the sections? http://www.cpe.rutgers.edu/wetlands/certificate05.html Thanks in advance Hello, I've been dealing with this problem and it seems fairly simple but has got me scratching my head. The page works fine in Firefox (of course) but internet explorer draws this problem. There are gaps between the DIVS and I have tried messing with the margins and padding a bit but have had no luck. here is the page in Firefox: Here is the code in page. HTML Code: <div id="container"> <div id="head"><a href=""><img src="hd_1.png" border="0" /></a></div> <div id="ev_top"><img src="ev_top.png" /> </div> <div class="float"><img src="ev_l1.png" /> </div> <div class="ev1"> <div class="ev2">Dallas</div> <div><a href=""><img src="ev_dallas_tba.png" border="0" /></a></div> <div class="ev3"><div class="float"><img src="/bullet_blue.png" /></div> <div class="ev4"><a href="">May - TBA</a></div> <div class="ev5">| <a href=""> More...</a></div> </div> </div><div class="float"><img src="ev_gap1.png" /></div> <div class="ev1"> <div class="ev2">New York</div> <div><a href=""><img src="ev_ny.png" border="0" /></a></div> <div class="ev3"><div class="float"><img src="/bullet_blue.png" /></div> <div class="ev4"><a href="">04.29 - 87 Lounge</a></div> <div class="ev5">| <a href=""> More...</a></div> </div> </div> <div class="float"><img src="ev_gap2.png" /></div> <div class="ev1"> <div class="ev2">Store</div> <div><img src="ev_str.png" /></div> <div class="ev3"> <div class="float"><img src="bullet_yellow.png" /></div> <div class="ev4">Coming Soon</div> <div class="ev5">| <a href="#"> Updates...</a></div> </div> </div> <div class="float"><img src="ev_right.png" /></div> </div> <div id="ev_bot"><img src="ev_bot.png" /></div> <div class="float"><img src="ev_botr.png" /> </div> </div> <div id="blog_right"><img src="blog_rt_gap.png" /></div> <div id="blog_contain"> Style sheet: Code: body{ font-family:Arial, Helvetica, sans-serif; width:713px; background:#cfeae7 url(bg.png); margin:0 auto; height:100% } #container{height:100%; width:750px;} #head{text-align:center; padding-right:25px;} .float{float:left;} .ev1{float:left; width:211px; background:url(ev_box_bg.png); font-size:24px; text-align:center;} .ev2{float:left;text-align:left; text-indent:6px;color:#9ce4e4;padding-top:5px;height:100%;} .ev3{padding-left:5px;text-indent:3px; padding-top:10px; width:211px;} .ev4{float:left; font-size:12px;color:#b1e7e7; height:100%;} .ev5{text-align:right; font-size:12px; color:#a2e6e6; padding-right:15px;padding-bottom:9px;height:100%;} #ev_top{padding-left:6px; margin:0px; padding-top:0px;padding-bottom:0px;} #ev_bot{float:left; margin:0px; padding:0px;} Any ideas? Help would be appreciated! Thanks. Hi all I have a question which im sure is very simple to answer but has been frustrating me for three days (yes i am aware i may have prooved my own ineptitude ) If any of you have a moment could you have a look at the code below. What im trying to do is center the divs no matter what the screen resolution.Im hoping, due to my huge lack of experience, that im just missing something very obvious. Below is the code ... TEMPLATE HTML Code: body { background-color: #000000; } --> </style> <link href="Stylesheets/DT CSS.css" rel="stylesheet" type="text/css" /> <style type="text/css"> <!-- a:link { color: #b46633; } .style1 { font-family: "Times New Roman", Times, serif; font-size: large; } --> </style></head> <body> <div id="outer"> <div align="center" id="Header"></div> <div id="links"> <p><a href="Home.html" class="style1">Home<br /> <br /> </a><br /> </p> </div> <div align="center" id="Main"> <p align="center">"It does not do to leave a live dragon out of your calculations, if you live near him."<br /> <em>(JRR Tolkien - The Lord of the Rings)</em></p> <br /> <p align="center">Throughout time since mankind begun our imaginations have activly sought out what we could not see or understand. Demons have haunted our dreams and gods have soothed them. Our minds have conjured terrible creatures for our warriors to battle and places for the adventurous to explore. One of the greatest and widest spread of these creatures is the Dragon. A true testimony to the power of imagination. This website is in dedication to the mightiest of our minds creations. The infomation found here is the result of many hours research and passion and i hope you find it useful.<br /> Welcome to Dragons Touch</p> </div> <div id="News">Content for id "News" Goes Here</div> </div> <h1 align="center"> </h1> </body> </html> CSS PHP Code: body { font-family: "Times New Roman", Times, serif; background-color: #000000; background-repeat: no-repeat; color: #FFFFFF; font-size: medium; width: 100%; position: relative; left: auto; right: auto; bottom: auto; margin-right: 20px; margin-left: 20px; margin-top: 20px; margin-bottom: 20px; } #outer { width: 80%; background-color:#FFFFFF; margin-top: 50px; margin-bottom: 50px; margin-left: auto; margin-right: auto; padding: 0px; border: thin solid #000000; } #Header { position: absolute; height: 150px; width: 800px; left: 121px; top: 0px; background-image: url(../Images/NewBanner.jpg); color: #F0F0F0; background-color: #000000; background-repeat: no-repeat; margin: 0px; } Links { top: 150px; position: relative; height: 350px; width: 150px; bottom: auto; } #links { top: 151px; height: 350px; width: 126px; clip: rect(auto,auto,auto,auto); position: absolute; font-family: "Times New Roman", Times, serif; padding-top: 50px; font-size: large; font-weight: normal; font-style: normal; text-transform: none; padding-left: 40px; text-align: left; list-style-position: inside; left: 41px; margin: 0px; } #Main { font-family: "Times New Roman", Times, serif; position: absolute; height: auto; width: 620px; left: 208px; top: 151px; right: 800px; margin: 0px; } #News { position: absolute; left: 829px; top: 151px; width: 162px; height: 406px; margin: 0px; HI 1) Is there a way to make a div with a logo and text clickable? 3) I read it was bad for seo? 2) Is there a way to make the background image change on hover? This is css or javascript ? Thanks for reading Hi, I am making my own HTML homepage and I would like to have a button/text saying: 'Close', at the top-right. But I don't seem to be able to work out how to have multiple DIVs on one line. I have tried floating but it doesn't seem to work. By the way, I am editing with SuperEdi. Link to site for reference: http://www.ante-up.org/v2/ Okay, this may be kind of a doozy, but after some thought, I've come to a point where I am looking into using php inc instead of an iframe for my content display, and I want to know how I could go about using divs to set up the site to look exactly the same with php inc. (EDIT: Minus the scrollbar from the iframe of course) Like if I stuck the Navigation and the Login section into one php file, the 'stats' and miniblog section into a second php file, the header and footer each in their own php file, how would I go about aligning the divs so that I could just php inc everything? I'm first off assuming that this would be the correct way to do it. Any suggestions are welcome so long as they're not about my table usage I'm aware that many don't prefer them, but I've made them work across five popular browsers, so I'm happy with it. TIA for any who can offer some insight. PS: I suppose I should also add that I'm pretty much an ignorant incompetent when it comes to div layers, so bear with me Hello, I've came here because I am really stuck on this one problem... I can't float another DIV right so it's beside another DIV. ( http://www.lentonent.com ) Please could you fix this source code so one div is on the left and one is on the right and they both have a background of middle.png: Code: <html> <head> <style> #middle { width: 900px; background: url(images/middle.png) repeat-y; } #middle-left { width: 580px; padding: 25px; border: 1px solid #000; } #middle-right { width: 200px; padding: 25px; border: 1px solid #000; float: right; } </style> </head> <body> <div id="middle"> <div id="middle-left"> <h1>LEFT SIDE</h1> <p>This text should be on the left hand side. I'm just going to write a little crap now to make this paragraph really long and cool just like a frog standing on a spoon. Yes very random indeed but that's not what the bus shelter said.</p> <h1>LEFT SIDE</h1> <p>This text should be on the left hand side. I'm just going to write a little crap now to make this paragraph really long and cool just like a frog standing on a spoon. Yes very random indeed but that's not what the bus shelter said.</p> </div> <div id="middle-right"> <h1>Test</h1> <p>This is a test.</p> </div> </div> </body> </html> Thankyou very much for your help! I am working on a page and everything shows up perfectly in every browser I have tried except for internet explorer, which messes everything up. Here is how the page is supposed to look: http://i140.photobucket.com/albums/r.../Picture12.png however, here is how it looks in internet explorer. it moves the entire div underneath everything else when it should be aligned next to it: http://i140.photobucket.com/albums/r.../Picture13.png and also, in internet explorer it messes up within the div itself, but only to one of my thumbnails like so: http://i140.photobucket.com/albums/r...icture14-1.png my boss and i have been fighting with this for a while now, here is the link to the page: http://www.nba.com/sixers/dance/media.html and here is my coding for the div itself, if you need to see the rest i can post it as well <div id="dancers"> <div class="dancer"> <a href="/sixers/dance/annie.html"><img src="/media/sixers/annie_thumb.jpg" /></a> <a href="/sixers/dance/annie.html">Annie</a> </div> <div class="dancer"> <a href="/sixers/dance/chenelle.html"><img src="/media/sixers/chenelle_thumb.jpg" /></a> <a href="/sixers/dance/chenelle.html">Chenelle</a> </div> <div class="dancer"> <a href="/sixers/dance/dana.html"><img src="/media/sixers/dana_thumb.jpg" /></a> <a href="/sixers/dance/dana.html">Dana</a> </div> <div class="dancer"> <a href="/sixers/dance/danielle.html"><img src="/media/sixers/danielle_thumb.jpg" /></a> <a href="/sixers/dance/danielle.html">Danielle</a> </div> <div class="dancer"> <a href="/sixers/dance/deirdre.html"><img src="/media/sixers/deirdre_thumb.jpg" /></a> <a href="/sixers/dance/deirdre.html">Deirdre</a> </div> <div class="dancer"> <a href="/sixers/dance/erica.html"><img src="/media/sixers/erica_thumb.jpg" /></a> <a href="/sixers/dance/erica.html">Erica</a> </div> <div class="dancer"> <a href="/sixers/dance/jeaneen.html"><img src="/media/sixers/janeen_thumb.jpg" /></a> <a href="/sixers/dance/jeaneen.html">Janeen</a> </div> <div class="dancer"> <a href="/sixers/dance/jenn.html"><img src="/media/sixers/jenn_thumb.jpg" /></a> <a href="/sixers/dance/jenn.html">Jenn</a> </div> <div class="dancer"> <a href="/sixers/dance/jessica.html"><img src="/media/sixers/jessica_thumb.jpg" /></a> <a href="/sixers/dance/jessica.html">Jessica</a> </div> <div class="dancer"> <a href="/sixers/dance/julie.html"><img src="/media/sixers/julie_thumb.jpg" /></a> <a href="/sixers/dance/julie.html">Julie</a> </div> <div class="dancer"> <a href="/sixers/dance/kate.html"><img src="/media/sixers/kate_thumb.jpg" /></a> <a href="/sixers/dance/kate.html">Kate</a> </div> <div class="dancer"> <a href="/sixers/dance/lauren.html"><img src="/media/sixers/lauren_thumb.jpg" /></a> <a href="/sixers/dance/lauren.html">Lauren</a> </div> <div class="dancer"> <a href="/sixers/dance/melanie.html"><img src="/media/sixers/melanie_thumb.jpg" /></a> <a href="/sixers/dance/melanie.html">Melanie</a> </div> <div class="dancer"> <a href="/sixers/dance/melinda.html"><img src="/media/sixers/melinda_thumb.jpg"></a><br><a href="/sixers/dance/melinda.html">Melinda</a> </div> <div class="dancer"> <a href="/sixers/dance/nina.html"><img src="/media/sixers/nina_thumb.jpg" /></a> <a href="/sixers/dance/nina.html">Nina</a> </div> <div class="dancer"> <a href="/sixers/dance/vi.html"><img src="/media/sixers/vi_thumb.jpg" /></a><br><a href="/sixers/dance/vi.html">Vi</a> </div> </div> I am trying to make a new layout for my site, http://www.jkrfan.com/index2.php , and I want it to be like this site: http://james-fan.org/ in the way that they have the two different background colors (the white one for the inside area and then the orangey one for the outside). I am also trying to figure out how they made the border on the right go all the way to the bottom. Help is very appreciated =] Thanks! My site is http://www.jkrfan.com/index2.php and my CSS is at http://www.jkrfan.com/styletest.css I think this is a html question, though if it needs to be moved to CSS please let me know. Basically, I'm using divs for the first time. I've got the same rough layout for each page on the site, but in one of them I need to insert a table. When I insert the table it puts a great big gap in the div just above where the table starts. Why is it doing that? Can I stop it? How do I get around this? Help! Nim So just draw on AP divs and maybe also a bit of tweaking, can you "get away" with this? Biggest problem i see is that IE and FF tend not to always format things exactly the same .... ALSO, if i want to line up say an input text box with a search button gif(25px x 24px) at the side of the input then this works in firefox, Note that this is an AP div. <div id="apDiv3"> <input type = "text" size = "26"/><img src = "images/search.gif" /> </div> #apDiv3 input{float:left;height:16px;padding:2px;} Gives this is FF, Whereas in IE there is a small gap between the right end of the input and the gif, and also the input field is smaller I have to say i don't really undertsand the css there, i got it form the web. Why is there a gap and why is it smaller? Hello! The divs work fine in Firefox, but adjust to the text in IE. How can I stop them adjusting? http://rkgrant.110mb.com/rkghome2.html Thank you for your help! Hi all, im having a an extremely frustrating time trying to solve this. Basically, i have a series of divs stacked on top of each other, but both FF and IE render these with small one or 2 pixel gaps in between the divs. Ive included code for illustration: HTML: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>Website</title> <link rel="stylesheet" type="text/css" href="styles/main.css"/> </head> <body> <div id="status"> Hello </div> <div id="container"> <div id="hp_large_splash"> <img src="img/oth.png" alt="splash"/> </div> <div id="upper_content"> sdfsdfsdfsdf </div> <div id="content_footer"> <img src="img/cont_footer.png" alt="footer"/> </div> <div id="lower_content"> </div> <div id="footer"> Hello </div> </div> <div id="disclaimer"> Disc </div> </body> </html> CSS: Code: html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline; } /* remember to define focus styles! */ :focus { outline: 0; } body { line-height: 1; color: black; /*background: white;*/ } ol, ul { list-style: none; } /* tables still need 'cellspacing="0"' in the markup */ table { border-collapse: separate; border-spacing: 0; } caption, th, td { text-align: left; font-weight: normal; } blockquote:before, blockquote:after, q:before, q:after { content: ""; } blockquote, q { quotes: "" ""; } html, body { background-color:#505564; background-image:url('img/bg.jpg'); background-repeat:repeat-x; padding:0; margin:0; color:#fff; font-family:Arial, sans-serif; } #status { width:100%; background-color:#3b4152; height:18px; } #container { width:900px; margin-left:auto; margin-right:auto; color:#333; } #container div { margin:0; padding:0; } #top { margin-top:50px; width:900px; } #nav { margin-top:20px; width:900px; } #nav_leftstop, #nav_rightstop { float:left; } #upper_content { background-color:#FFF; } #hp_large_splash { margin-top:20px; } #content_footer { height:10px; } #disclaimer { width:100%; background-color:#3b4152; height:60px; } /*Classes*/ .navitem { float:left; width:880px; background-color:#fff; height:50px; } .cleardiv { clear:both; } Ive included an image he http://www.cumbriawebsolutions.co.uk/untitled2.png to demonstrate my problem a bit better. Any help would be appreciated. thanks Hello I have a problem getting my div boxes beside eachother This is what i want to do: Here is my css: Code: body {background-image:url(images/backround.png); margin:0px; /************************* ID's *************************/ } #whitesite_middle { background-image:url(images/BgX.png); width: 841px; margin-left: auto; margin-right: auto; } #whitesite_bottom { background-image:url(images/bunn.png); width: 841px; height: 21px; margin-left:auto; margin-right:auto; } #box { padding-left: 4px; background-repeat:repeat } #box_bottom { background-image:url(images/Blue/buttom_blue_hoyre.png); width: 500px; height: 20px; margin-left:50px; margin-right:auto; } #box_top { background-image: url('images/login%20top.png'); width: 264px; height: 26px; } #banner { background-image:url(images/banner.png); width: 841px; height: 148px; margin-left:auto; margin-right:auto; } #top_bar { background-image:url(images/top.png); width: 841px; height: 24px; margin-left:auto; margin-right:auto; } #whitesite_middle_2 { background-image:url(images/BgX.png); width: 841px; margin-left: auto; margin-right: auto; } #box_top_orange { background-image:url(images/login%20top.png); width:264px; height:26px; margin:0px; margin-left:50px; margin-right:auto; float:right; } #box_middle { background-image:url(images/Blue/center_blue_hoyre.png); width:500px; margin:0px; margin-left:50px; margin-right:auto; background-repeat:repeat } #hvit_bar { background-image:url(images/hvit-bar.png); width:841px; height:26px; margin-left:auto; margin-right:auto; } #box_top_blue { width:500px; height:26px; margin-left:50px; margin-right:auto; } #box_orange_middle { background-image:url(images/login%20center.png); width:264px; margin-left:50px; margin-right:auto; } #content_middle { float:right; margin-left:25px; margin-right:auto; } The source for the html is on the site: http://habbxtra.net/hjem.php Thanks for any help! |