comicIDIOT wrote:
Code: <html>
<head>
</head>
<body>
<!-- normal image width -->
<img src="http://alexglanville.com/res/img/portfolio/scape/full/scape-04.jpg">
<!-- image width set to 100% -->
<img src="http://alexglanville.com/res/img/portfolio/scape/full/scape-04.jpg" width="100%">
<!-- div is 70% window with, image is 100% of div width -->
<div style="width:70%">
<img src="http://alexglanville.com/res/img/portfolio/scape/full/scape-04.jpg" width="100%">
</div>
</body>
</html>
I thought someone would have taken a bit of curiosity here and tried to extend the image beyond that of the div, but I was able to do it by assigning 110% to the image width. I can't speak of any adverse affects it would have on surrounding divs.
Also, JPFowl, if you play around with CSS or even the style="" property (as used in convenience above) get familiar with z-index. It basically assigns a third dimension, the Z-Axis, to your webpage. Typically, I start my Z-Index around 5. Gives me room to add things underneath on small websites.
Feel free to check the source of my website as well. I keep all my style properties (such as z-index) in the aptly named style.css. I'll also try to come up with an equation to calculate the width for an image to fill the length of the screen if the base div is another width. For my example, I believe that's around 145%.
When working with anything above 100%, 200% will be relative to the div width. So, 200% of the image in my 70% Width div, essentially means the image is taking up as much space as if the div was 140%.
An excellent set of information there, comicIDIOT.
Thanks very much!
Ok, I couldn't really follow that so I'm going to repost. We can't use java, css, etc. The only thing we can use is HTML. We nees an image at x by y size to be displayed as a continous banner on the top of a webpage. It would still be Y high but the image would repeat the whole legnth of the webpage, no matter what zoom, brower, etc. Is this possable? Also, try to keep this simple, we are somewhat new. The best you can do to help us is give us a possable solution and break it down for us. That way we can learn for the future.
Without seeing code (which I respect if you aren't allowed to do so) it's hard to say what you are and aren't doing, or if it's incorrect.
Unfortunately, what you're asking cannot be accomplished with just HTML, you'll need CSS for that. Whether it's a style property embedded into a div, a <style> tag within the header or a link to an separate style sheet.
Perhaps there's a better alternative to a repeating background/header? There's not much that's possible without CSS at the moment. Maybe some table properties; aligning data (such as a photo) within cells to the middle of the cell.
Pure HTML only? We're not even supposed to not use CSS for styling -- it's been deprecated. Is this for a class or something?
But anyway, one way to make a background image repeat horizontally across an element is with something like <div background="image.gif">. The background attribute has long been deprecated, so you're strongly advised not to use it, but I guess if you have no choice...
Deep Thought wrote:
<div background="image.gif">.
That's a CSS property. You'll have to type the following to get it to work correctly ;P Code: style="background:image.gif;"
It's also an
HTML attribute, but it seems to only be for <body> tags. Never mind.
You shouldn't use it anyway
That seems like a very odd assignment. You could make a table with the same width as the page and set its background image (via the HTML background= attribute) to the image...
We are part of a robotics team (usfirst.org). We are team2472. The problem is that we don't have the time, energy, or resources required for CSS. Our mentors aren't educated in this apsect of start from scratch web building so we have to teach ourselves. Therefore we are using HTML.
JPfowl wrote:
We are part of a robotics team (usfirst.org). We are team2472. The problem is that we don't have the time, energy, or resources required for CSS. Our mentors aren't educated in this apsect of start from scratch web building so we have to teach ourselves. Therefore we are using HTML.
Wait, so you're not actually forced not to use CSS? Then just do:
Code: <div style="background-image:url('whatever.wat'); background-repeat:repeat-x;">contents</div>
This does only x-repetition of the background image.
We will try that (next meeting on Thurs.). The rules are sketchy on CSS so we really try to avoid it. How does it relate/tie in to HTML? What are the similarities and differences?
JPfowl wrote:
We will try that (next meeting on Thurs.). The rules are sketchy on CSS so we really try to avoid it. How does it relate/tie in to HTML? What are the similarities and differences?
It's inline in HTML; you can't really separate the two. These days, you'd be hard-pressed to find any HTML with at least some CSS written into it.
JPfowl wrote:
We will try that (next meeting on Thurs.). The rules are sketchy on CSS so we really try to avoid it. How does it relate/tie in to HTML? What are the similarities and differences?
CSS rules aren't sketchy at all. If you are building a website while trying to avoid using CSS, you are doing it *VERY* wrong. HTML should contain zero styling. Background images are styling - that goes in CSS. If you can learn HTML, you can easily learn CSS - it is very simple and it's concepts are fairly obvious.
A good starting point for CSS is w3schools.com to learn the basics, then something like http://www.csszengarden.com/ to see it in action. The various styles listed on the right only change the CSS file - none of the HTML changes. That should give you a good idea about the power behind CSS and why it is important, and how to structure your HTML to take advantage of it.
Though, to do some of the changes certain csszengarden styles do, they use some pretty hackish things with CSS. In some cases things that should have been in the HTML in the first place if the goal wasn't to have them all use the same base page.
Kllrnohj, nice, very informative post, but I think he was talking about the FIRST rules on using CSS in HTML.
KermMartian wrote:
Kllrnohj, nice, very informative post, but I think he was talking about the FIRST rules on using CSS in HTML.
But what does HTML+CSS have to do with coding a robot? That doesn't really make sense that there would be any FIRST rules about CSS or HTML at all.
Oh, so we are using CSS already? That's why it isn't mentioned...
Kllrnohj wrote:
But what does HTML+CSS have to do with coding a robot? That doesn't really make sense that there would be any FIRST rules about CSS or HTML at all.
It's for the website side. That way we can show our robot, interact with potential sponsers etc.
JPfowl wrote:
Oh, so we are using CSS already? That's why it isn't mentioned...
Who what now?
Kllrnohj wrote:
JPfowl wrote:
Oh, so we are using CSS already? That's why it isn't mentioned...
Who what now?
I checked our code and we are using CSS all over. We just didn't know what it was like. 0x5
JPfowl wrote:
I checked our code and we are using CSS all over. We just didn't know what it was like. 0x5
Step 1, consolidate your CSS into a separate file, or failing that into the header. Inline CSS is terrible, don't use it.
Register to Join the Conversation
Have your own thoughts to add to this or any other topic? Want to ask a question, offer a suggestion, share your own programs and projects, upload a file to the file archives, get help with calculator and computer programming, or simply chat with like-minded coders and tech and calculator enthusiasts via the site-wide AJAX SAX widget? Registration for a free Cemetech account only takes a minute.
»
Go to Registration page
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum
