i need this code by wensday. so that i have enough time to actually get the code and get my site working.
no i can not provide you links to the actual pages *they arent real yet
they just live in a folder right now.
i can not seem to find a GOOD working piece of code that works in all browsers.
i have 1 image i want it to be the background with no repeating.
when working on my mini laptop which has a 10 inch screen while using firefox the fallowing code works really great
<body background="images/background.jpg" style="background-repeat:no-repeat; background-attachment:fixed">
only problem is that i have about an inch of white space on right hand side of the screen.
however when i test the code on a college computer whose screen is 24 inchs and i have to use IE on them the code does not work.
the image shows up in the top left hand cornor. and the rest of the screen is white.
so i was told to use the propertie background-image. it worked great as long as i had a super large image.
<style type="text/css">
body {
background-image:url('images/titlepage3.jpg');
}
</style>
worked great in ie on a large screen i test in on my laptop *where i do 95% of my work* and i only see a small fraction of the image. i need to be able to see the image 100% on both a large screen and a small screen, on both ie and firefox.
i read online to use these
<style type="text/css">
body {
background-image:url('images/titlepage3.jpg');
background-repeat:no-repeat;
background-position:bottom right;
}
</style>
it didnt work i ended up with the image in the bottom right and alot of white space around it.
-_- ive been trying to get this code to do this one simple thing for weeks now. i really need the images i have to be the background. i can not have any repeating of the image. the image needs to cover the whole page and needs to work in what ever browser im using at the minute on what ever size of screen im using.
here is the code for one of the pages that i have not messed up with the background-image property.
<br />
<p> <font size="5" color="red" face="Monotype Corsiva">
<b>Again welcome to <i>Images of Illusion</i> we are a brand new site, so we
<br/> dont have to much to offer you yet, but give us some time and we <br/> will start adding more. please register and than message the admin, <br/> if we do not have a catogory that you would like to have added.
<br/> all so send any images you would like to add for review, as will as <br/> the information as to what catogory you would like it uploaded to.</b></font>
</body>
</html>
however when i run the pages on the other one it doesnt work right.
what other code is there that i can use to fix this problem?
Your example HTML code does not include a <!DOCTYPE> statement. It's vital to use a complete <!DOCTYPE> to set browsers to Standards Compliance Mode for page rendering. An improper or missing <!DOCTYPE> is a major cause of cross-browser issues, so if you aren't using one, you need to check it out. Search on "DOCTYPE switch" and you'll find some good advice. Good luck!
That's an incomplete <!DOCTYPE> and it leaves the browser in Quirks Mode where it doesn't have to follow the standards and every browser will behave differently. To get consistent cross-browser compatibility, use:
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
and stick to it. This will put all browsers in Standards Compliance Mode so that they're all at least *trying* to behave properly. Otherwise, you'll always be adding "fixes".
i am sorry but like i said i did use the <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
and it did nothing the pages they still worked in one browser and not the other one. so the doctype has done nothing to help me and even if i leave it there i still need code to fix my problem of the background images.
What school are you attending? Do they offer tutoring help?
You have a mishmash here: using OLD method of adding attributes to <BODY> tag and CSS inline style, etc.
Note most HTML tags come in pairs. defining content between the opening <A href="page.html">... and closing </A>. You are not closing the all-important anchor tag </A> The image <img> tag is an "empty" tag that does not have a closing counterpart. In XHTML (based on XML), you need to add space slash <img src="pic.jpg" /> for "self-closure" of "empty" tags. You wrap the anchor <A href="page.html">around <img> tag </A>
[Uppercase for emphasis only, type everything lowercase.]
Your questions are more CSS than HTML. CSS (Cascading Style Sheets) can be (1) in an external text.css file and linked to <LINK REL="stylesheet" TYPE="text/css" HREF="path.css"> (LINK is an "empty" tag, with no closing counterpart); (2) embedded in file using HTML tags <STYLE TYPE="text/css" > selector { property:value; property2: value2;} </STYLE>,; or (3) added to element tag as an inline attribute <p STYLE="property:value; property2: value2;">...<p>. The more "specific" style rules (e.g., inline) override the less specific (e.g., external CSS file).
You would do well to create an overall stylesheet, which could be embedded in <HEAD> of your document for easy reference. Use CSS background-image property (not OLD attribute in <BODY> tag) or background: shorthand to set the background iamge to your BODY element or your HTML element (with a transparent BODY element).
Is the professor allowing use of deprecated <FONT>tags</FONT>?
Dreamweaver is an editing tool. You can work in "Code" or "Split" view like a helpful Notepad text editor.
Last edited by auntnini; 04-21-2012 at 04:17 PM.
Reason: add color
@spufi thank you for the reply about the monitor. i assumed that was a problem because of how the site showed up on my laptop and than how it showed up on the colleges desk top. but after reading that its irrelevant it makes me feel a bit better.
@auntnini no they dont have tutoring here, i went to the professor for help and he sugested i try and use the background-image property, so i did and it was not working, he even checked my code and couldnt figure it out. thats when i came here. in class we are really only learning how to go about doing the old way of coding a website. using programs like dreamweaver sadly is not allowed. ive used it a bit with an other class though, and sometimes the code in dreamweaver was way more than what we had covered in class. so i think if i was to use dreamweaver to help edit my code he would be able to figure it out. and yes he is allowing the use of the font tags. thank you also for pointing out the lack of </a>'s i had to leave the <a href> in the menu bar
with out the </a> other wise my menu bar would have brakes in it so when i went on to code in the images later i guess i was just use to the coding with out them that i forgot.
Well Dreamweaver isnt going to solve any problems for you. You need to learn how to do it by hand before you start using frameworks and other things. Anyone who strictly uses Dreamweaver design view is either too lazy to learn properly or went to a ****ty school and was taught improperly. Being stuck using proprietary software to make a website is not how its supposed to be done. Call it elitist but WYSIWYG editors are absolutely horrible and should never be used for any production environment. Yes Dreamweaver has a nice code editor but at least knowing the code you are not tied to it and screwed when you are not able to access it.
Also use CSS to layout a site. Don't use   to do it for you. simple class with margin tag would solve that in a jiffy and be much more update-able in the future.
----------------------------------------------------------------------------------------------
WYSIWYG editors will never beat my hand written code!!!! Learn to do it in notepad and learn how to actually control your website! Current Project http://www.jmcanineservices.com
i use   alot because its the code for a space, and i need x amount of spaces between links, this is the only coding ive learned so far that does this.
in my other class i did not have a choice i had to use dreamweaver, however because i had learned coding from my other class i was able to fix the coded area of dreamweaver to correct my project for that class.
also since most are saying this is a css problem, not html problem, will someone please tell me how to move this topic to the right form section thank you.
body {
background: url(path/to/image.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
This is what I use to make the background stay the same and scale the whole thing. Its CSS3 but it should do the trick.
You have to realize that all styling is done by CSS now. HTML should NOT be used to style the layout of elements on the page. CSS can handle this. For your spaces between links you can simply use css to set the margins between the links. Look up the CSS box model to get a better idea of what I am talking about. You would be able to set the margin right and left of any <li> tag to a set distance to get the spacing you need. I suggest that you go and read http://www.w3schools.com/html5/default.asp
and http://www.w3schools.com/css/default.asp http://www.w3schools.com/css3/default.asp
These will give you a solid understanding of at least HTML5 and CSS2 and CSS3
Last edited by PBSWebDesign; 04-21-2012 at 06:22 PM.
----------------------------------------------------------------------------------------------
WYSIWYG editors will never beat my hand written code!!!! Learn to do it in notepad and learn how to actually control your website! Current Project http://www.jmcanineservices.com
@PBSWebDesign thank you very much, i tried a similar code from the site spufi gave me except i had background-image: url and in the html where as you have it just background: url in the body, and after resizing a few of my images editing my code and than trying it on another computer and getting the same results my problem has been fixed. i now have the full background image like ive been wanting thank you again.
@PBSWebDesign thank you very much, i tried a similar code from the site spufi gave me except i had background-image: url and in the html where as you have it just background: url in the body, and after resizing a few of my images editing my code and than trying it on another computer and getting the same results my problem has been fixed. i now have the full background image like ive been wanting thank you again.
Anytime!
----------------------------------------------------------------------------------------------
WYSIWYG editors will never beat my hand written code!!!! Learn to do it in notepad and learn how to actually control your website! Current Project http://www.jmcanineservices.com
You should define a background color (or bgcolor) as well as text color. Text "white" did not show on default white background. Your links have color but not ordinary text like | pipe.
If you don't want the link to go anywhere, use hash mark # (and add nogo so it does not jump to top of page) <a href="#nogo">Home</a>.
Put the links inside a paragraph or header tag, or add them to <TABLE><tr><td colspan="3"></td></tr>. You can add bgcolor to table, or row, or cell. I would <table align="center">. With a <TABLE >, you need the same number of <td> cells in each <tr> row, or use colspan (or rowspan).
There was a typo in <style TYPE="text/css">
I'm not sure why you are using background-attachment: fixed; (which would not scroll). I stuck in background-position: top center;
The self-closing "space slash" for empty tags <br /> or <img src="pic.jpg" /> is really for XHTML doctype, but it doesn't seem to matter much in HTML4.01 Transitional (which would ordinarily just be <br>).
P.S. -- See PBSWebDesign's post for using background-size. Otherwise, you would have to make the background image big enough to cover page (which would be a slow download). I was not sure how to approach size because of OLD coding inside <BODY> tag,
Last edited by auntnini; 04-21-2012 at 10:26 PM.
Reason: add P.S.
background code that works in ALL browsers.
Reply With Quote
Originally Posted by genova90
Bookmarks