HTML - Add Text Beneath The Website Backround Image?
Hell All,
I have a question regarding to my website's home page: Right now my homepage has been embedded with an image and I want to insert the HTML text beneath the image. The text should not overlap with the background image and should have the same width as the webpage. How can I do that? Here is my home page: http://www.oleklejbzon.com/campbellsloft2/ And here are the index.html code: HTML Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Campbellsloft - Space Age Rugs, ART</title> <style type="text/css"> /*.bottom { float: right; width: 250px; border-right-width: 20px; border-color: black; background-color: black; color: white; }*/ p {font-family: calibri;} /* Remove margins from the 'html' and 'body' tags, and ensure the page takes up full screen height */ #html, body {height:100%; margin:0; padding:0;} /* Set the position and dimensions of the background image. */ #page-background {color: black; position:fixed; top:0; left:0; width:100%; height:100%;} /* Specify the position and layering for the content that needs to appear in front of the background image. Must have a higher z-index value than the background image. Also add some padding to compensate for removing the margin from the 'html' and 'body' tags. */ #content {position:relative; z-index:1; padding:10px;} #background{color: black;} </style> <!-- The above code doesn't work in Internet Explorer 6. To address this, we use a conditional comment to specify an alternative style sheet for IE 6 --> <!--[if IE 6]> <style type="text/css"> html {overflow-y:hidden;} body {overflow-y:auto;} #page-background {position:absolute; z-index:-1;} #content {position:static;padding:10px;} </style> <![endif]--> </head> <body> <div id="page-background"><img src="/campbellsloft2/i/image007_003.jpg" width="100%" height="100% ></div> <div id="content" align="bottom" bgcolor="black"> <h2></h2> <p>hello world</p> <p></p> </div> </body> </html> Similar Tutorialshi guys, im new at this forum and i would like to know how to make this kind of slideshows like they have here. http://www.gamereactor.dk/?sid=3c0eb...f418e7e3c72777 how can the images and text beneath it change every 3 second?? i'm quite experienced with both html and CSS i have 3 images, 2 are feather's images and 1 is text image i am trying to put these two feather images(which are in png format so to be transparent) in opposite corners as well as in front and 3rd text image should come from behind of the start of feather n scroll to the end of the other feather image(it should come and go behind the feathers, not above) as feathers have little spaces so i want to show that text is going benath the feathers and ends where feather ends i have attached a sample image please help me in writing its code Hello all, I hope I am not repeating any posts but all the alignment issues that I could find being talked about were with tables. I am trying to align an image with a background image to make one apparently continuous image that will repeat across the top of the page. My design works in IE 7 but not in any of the other browsers I am checking with. Netscape 8 or Chrome. I am working with Dreamweaver but have some basic knowledge of code. Here is the website as I am sure that I have not explained myself as well as I could have. http://www.americain100days.com/ Thanks all, Joey Hi There Guys, I have a problem! Ive added a background to my site that I want to appear like so fixed center no-repeat. You can see the code below. But for some reason it doesnt line up with the top of my site. It is being pushed down a whole 108px??? You can see from the site how this looks... www.hogansfarm.ie/index.php. To be honest its my first time using fixed center no-repeat so im hoping someone else might have hand this issue and may know whats wrong. You can see the the image there should be no gap http://www.hogansfarm.ie/images/stripe_wide.jpg Thanks for your help! Kat body { background: #1f1e1e url(http://www.hogansfarm.ie/images/stripe_wide.jpg) fixed center no-repeat; color: #000000; font-family: arial, helvetica, sans-serif; font-size: 100.1%; padding: 0px; text-align: center; margin: 0px; padding: 0px; } I placed an image in the backround of a table on my page. It looks fine on my computer with a square monitor set at 1024x768 pix. When I viewed it on another monitor, a wide screen it displayed about half of my image to the right of where I placed it in the table. Can this be corrected so the image looks correct in all screen resolutions? Here is a link to the page in question. It's the motor in the upper left. The image name is: log2.gif http://cb750sandcastonly.com/new/ Thank You. http://combatkicks.com/lobby/a_stree...ll-button.html Hello, The main concen is that when I increase the height of the pop-up box (pos-pop) sufficiently so that the vertical scroll bar is eliminated, the pop-up covers the bottom navigation ba at the bottomr, and the navigation links remain visible. Also, in centering the java scripted pop-up, is that best done with the CSS that controls the external page? The burn-through is not very attractive. <!-- External Page Loading Here --> <div class="ext_page" id="pos_os_sek_9000"> <p style="text-align:center;"> <a href="#" onclick="document.getElementById('pos_os_sek_9000').style.display = 'none';">CLOSE</a> </p> <iframe src="http://quiltron.net/pos-pop/combat-kicks/a_street/pos_os_sek_9000.html" width="850" height="450" > <p>Your browser does not support iframes. </p> </iframe> </div> When ever you view the page when it's not maximized or lower res the images and text get thrown off from the background. http://www.scevolution.com/Deadhead/clan_exo.html How can I fix it? Should I post my code? Alright, before you post a reply, make sure that a 2 year old could understand it, as i'm only adequate at html. A friend of mine supplied me with the site template, i'm only editing it. Heres my problem. Link to my webpage If you'll take note of the navigation menus on the left, under "latest matches" "latest threads" etc. Lets take the first box, latest matches. Here is the code for that. Code: <TABLE cellSpacing=0 cellPadding=0 width=221 border=0> <TBODY> <TR> <TD><IMG height=28 src="http://atsquad.com/images/latestmatches_06.gif" width=221></TD></TR> <TR> <TD width=221 bgColor=#000000> <TABLE cellSpacing=0 cellPadding=0 width=221 border=0> <TBODY> <TR> <TD width=2> </TD> <TD background=http://atsquad.com/images/leftbarrepeat_11.gif> <DIV align=center><IMG height=15 alt="" src="http://atsquad.com/images/bullet_10.gif" width=13 border=0></DIV></TD> <TD background=http://atsquad.com/images/leftbarrepeat_11.gif><A class=comment href="http://www.atsquad.com/">[ATS] vs {DEATH}</A></TD> <TD background=http://atsquad.com/images/leftbarrepeat_11.gif height=19><SPAN class=style6><FONT color=#ff0000>4-6</FONT></SPAN></TD> <TD> </TD></TR> <TR> <TD width=2> </TD> <TD background=http://atsquad.com/images/leftbarrepeat_11.gif> <DIV align=center><IMG height=15 alt="" src="http://atsquad.com/images/bullet_10.gif" width=13 border=0></DIV></TD> <TD background=http://atsquad.com/images/leftbarrepeat_11.gif><A class=comment href="http://www.atsquad.com/">No Record</A></TD> <TD background=http://atsquad.com/images/leftbarrepeat_11.gif height=19><SPAN class=style6><FONT color=#0000ff>0-0</FONT></SPAN></TD> <TD> </TD></TR> <TR> <TD> </TD> <TD background=http://atsquad.com/images/leftbarrepeat_11.gif> <DIV align=center><IMG height=15 alt="" src="http://atsquad.com/images/bullet_10.gif" width=13 border=0></DIV></TD> <TD background=http://atsquad.com/images/leftbarrepeat_11.gif><A class=comment href="http://www.atsquad.com/">No Record</A></TD> <TD background=http://atsquad.com/images/leftbarrepeat_11.gif height=19><SPAN class=style6><FONT color=#0000ff>0-0</FONT></SPAN></TD> <TD> </TD></TR> <TR> <TD> </TD> <TD background=http://atsquad.com/images/leftbarrepeat_11.gif> <DIV align=center><IMG height=15 alt="" src="http://atsquad.com/images/bullet_10.gif" width=13 border=0></DIV></TD> <TD background=http://atsquad.com/images/leftbarrepeat_11.gif><A class=comment href="http://www.atsquad.com/">No Record</A></TD> <TD background=http://atsquad.com/images/leftbarrepeat_11.gif height=19><SPAN class=style6><FONT color=#0000ff>0-0</FONT></SPAN></TD> <TD> </TD></TR> <TR> <TD width=2><IMG height=5 src="http://atsquad.com/images/leftside_17.gif" width=2></TD> <TD width=20 background=images/leftbarrepeat_11.gif> <DIV align=center><IMG height=15 alt="" src="http://atsquad.com/images/bullet_10.gif" width=13 border=0></DIV></TD> <TD width=137 background=http://atsquad.com/images/leftbarrepeat_11.gif><A class=comment href="http://www.atsquad.com/">Record</A></TD> <TD width=50 background=http://atsquad.com/images/leftbarrepeat_11.gif height=19><SPAN class=style6><FONT color=#0000ff>0-0</FONT></SPAN></TD> <TD width=4><IMG height=5 src="http://atsquad.com/images/rightside_20.gif" width=2></TD></TR></TBODY></TABLE> <TABLE cellSpacing=0 cellPadding=0 width=221 border=0> <TBODY> <TR> <TD width=14 background=http://atsquad.com/images/footerbarrepeat_13.gif height=20><IMG height=20 src="http://atsquad.com/images/leftrounder_11.gif" width=11></TD> <TD width=77 background=http://atsquad.com/images/footerbarrepeat_13.gif> </TD> <TD width=110 background=http://atsquad.com/images/footerbarrepeat_13.gif> <DIV class=style4 align=center></DIV></TD> <TD width=13 border="0"><IMG height=20 src="http://atsquad.com/images/rightrounder_13.gif" width=13></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE> If you'll notice the class=comment coding in the links. This links to a .css file I have that makes the link text turn bold when you scroll over it. Now, heres the confusing part. Heres what I want: When you scroll over the navigation bar thing (the white bar that says [ATS] vs {DEATH}, no record, no record, no record, no record) it changes from the current backround ( http://atsquad.com/images/leftbarrepeat_11.gif ) to a new backround ( http://atsquad.com/images/leftbarrepeatmouseover_11.gif ). Also when you scroll over the white bar, the font changes from normal to bold (which is currently achieved from the style.css file) I'm not sure if i'm asking too much here, like I said, i'm still pretty much a newbie at html. Thanks in advanced, jake. Hi, I am designing a website, I know HTML, and CSS languages. I want my website to play backround music when someone is browsing my site. I know the HTML code that allows the designer (me) to play a backround .wav audio BUT it does not quite do what I need it to do what I am looking for is a code that allows me to play a .mp3 in the backround AND I am having an incredibly difficult time figuring out how to prevent the song from starting over when a person on my site clicks another link. Simply put I want a .mp3 to be playing in the backround of my website no matter where the user browses on my website and most importantly I need to have the backround .mp3 to play conintousely like I stated earlier, I don't want it to start playing from the begining when a user clicks on a link on my site. I am pretty sure that I am getting into Java here, unfortunatly for me, I am only NOW begining to learn Java and can't write the code for what I need. If anybody reading this knows a code, or CAN write the code for what I need, PLEASE post it on this thread!! Thanks in advance, I really hope I will finde that code. I'd like to add a input text pop up box to my website on load, that allow a visitor to enter information in and when done hit enter or ok and see the text being display on the page it self.. hope ya can help.. thanks Don Hello, I want to block off my website without Uploading a Website closed HTML file. Is there a possible way to do it? If you have no idea what im talking about, please look at Limewire website. It has a thing that pops up and blocks off the site. I want it exactly like that. Thanks in advanced! (and dont judge me, this is my first forum post) Hi, I'm trying to create a community website, basically a database of peoples info, sorted by their zip codes. What I need is a text box that the user will type their zip code and it takes them to the page for that zip code. I'm pretty sure this is possible just don't know how... Thanks. I'm creating a website. I would like the end user to be able to easily update all the text parts without having to know any HTML. How should I go about doing this? The way I've set it up at the moment is to use an include file with ASP so the text is kept seperate. The problem with this is that the end user still has to enter the text with some HTML formatting (I have written a program with VBA in MS Word to convert text to HTML but I'm not sure that's the best way). Any ideas on how I could make this better? Or if a completely different way would be better how should I go about doing it? Below is my code & how it looks... what im trying to do is type in the area inbetween where theres nothing... i tried placing text in alota areas im thinking either it cant be done or needs extra coding Code: <div style="text-align: center; margin-left: auto; visibility:visible; margin-right: auto; width:450px;"> <object width="435" height="270"> <param name="movie" value="http://www.profileplaylist.net/mc/mp3player_new.swf"> </param> <param name="allowscriptaccess" value="never"> </param> <param name="wmode" value="transparent"> </param> <param name="flashvars" value="config=http%3A%2F%2Fwww.indimusic.us%2Fext%2Fpc%2Fconfig_black.xml&mywidth=435&myheight=270&playlist_url=http%3A%2F%2Fwww.indimusic.us%2Floadplaylist.php%3Fplaylist%3D66633792%26t%3D1259344566&wid=os"></param> <embed style="width:435px; visibility:visible; height:270px;" allowScriptAccess="never" src="http://www.profileplaylist.net/mc/mp3player_new.swf" flashvars="config=http%3A%2F%2Fwww.indimusic.us%2Fext%2Fpc%2Fconfig_black.xml&mywidth=435&myheight=270&playlist_url=http://www.indimusic.us/loadplaylist.php?playlist=66633792&t=1259344566&wid=os" width="435" height="270" name="mp3player" wmode="transparent" type="application/x-shockwave-flash" border="0"/> </object><br/></div> hey everyone, on my website (like most websites) the text when you push CTRL and the scrolling button on your mouse the text changes size. I don't like this feature but understand some people need the help for them to read the text. Is there a code i could insert on my site where it will (after each time you come back) return to its original text size. the size i put on it well i was making it. so it lets people change it but when you leave then come back after a visit it'll turn the text back to its original form and size. thank you, Micheal I'm writing my web site in Notepad++, using XHTML (source: w3schools tutorial) , and also getting into XML. This is my website. What I want to do is like this: 1) Move all the text content of my website to mywebsite.xml, organized in text blocks corresponding to each web page E.g.: I cut the text content from the HMTL of the "my profile" web page and paste it to the XML file as a text block under a suitable heading. By text content I mean all the text that is viewable, like "Autodidact. Freelance English-Spanish translator and style proofreader..." 2) Mark each text block in the XML E.g.: I mark the above mentioned text block with an id, "profile" 3) Place a link in the page's HTML to the corresponding text block in mywebsite.xml, so it calls the text when the page is loaded E.g.: where the original text content of the "my profile" page was, I place a link to the corresponding text block marked "profile", so the text is called and viewable when the page is loaded That way I'd manage text content more easily. For example, the text of my menu entries is the same in all pages. I want that when I need to modify the text of a menu entry (e.g. replacing "graphic design" by "visual art"), I can just do it in the XML file and that's all, instead of making the change in every web page. Also having all of my website's text content stored in a single file makes it easier to locate and modify strings. How can this be done? I have no clue. Thanks in advance. God bless you. Hi Folks, I am new to create static website and HTML. I have created two applications using Asp.net/Visual Studio. I am wondering how i can make static website. I found built in templates on web hosting site is easy to change, I can also try to use Ms Expression Web/Ms Front Page but unable to measure which one is better for maintaing pointing of view. How i can easily create graphics logo. I heard Corel Draw is good one. Do i have to buy licence to upload site built by Ms Expression Web/Ms Front Page. Could any body share his/her experience about creating static website. You help is greatly appreciated. Chao RS 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 team, just wondering what code i would require to make a text box with a search button next to it and having the following characteristics... * input can be any letter/number (say for eg: 5555) * onclick sends parent window to www.website.com/5555 thus whatever you enter into the box sends you to a website address with the text box entry at the end. this is for an internal webpage at our small business. cheers and any tips appreciated!! |