Programming Forums
User Name Password Register
 

RSS Feed
FORUM INDEX | TODAY'S POSTS | UNANSWERED THREADS | ADVANCED SEARCH

Reply
 
Thread Tools Display Modes
Old Apr 28th, 2010, 2:45 PM   #1
PaCkEtPiRaTe
Software Developer
 
PaCkEtPiRaTe's Avatar
 
Join Date: Aug 2007
Location: Massachusetts, USA
Posts: 696
Rep Power: 7 PaCkEtPiRaTe will become famous soon enough
Send a message via AIM to PaCkEtPiRaTe Send a message via Skype™ to PaCkEtPiRaTe
Cool Image on both sides of a container.

I have a page container centered on my page that's containing all of my content. My problem is that I want to put images on both sides of this container and have them fixed. The images in question are attached. I want it to stretch to 100% of the page height (the height of the browser, rather) and occupy the black space outside the container on both sides. I don't want it tiled. If needed, I can post the code. Also, if someone knows how, I would like a different image on the right side than the left side. Does anyone have the foggiest idea on how to do this? Google doesn't seem to have any viable answers. I'm coding this website for IE unfortunately because that's the browser the professor insists on using in my class and this website will be my presentation for my final.

EDIT: I added an image of the page so far. The first image needs to stretch and occupy the black space on the left and the second image needs to do the same on the right.
Attached Images
File Type: jpg mukai_bg.jpg (41.9 KB, 24 views)
File Type: jpg ichiro_bg.jpg (66.1 KB, 24 views)
File Type: jpg zbfanpage.JPG (108.4 KB, 4 views)
__________________
I'm trying to change the world, but I can't find the source code...
PaCkEtPiRaTe is offline   Reply With Quote
Old Apr 28th, 2010, 2:57 PM   #2
PaCkEtPiRaTe
Software Developer
 
PaCkEtPiRaTe's Avatar
 
Join Date: Aug 2007
Location: Massachusetts, USA
Posts: 696
Rep Power: 7 PaCkEtPiRaTe will become famous soon enough
Send a message via AIM to PaCkEtPiRaTe Send a message via Skype™ to PaCkEtPiRaTe
Re: Image on both sides of a container.

Just so there's absolutely no confusion, I photoshopped the image of the current page to show how I want it to look.
Attached Images
File Type: jpg zbfanpage_edit.jpg (409.1 KB, 4 views)
__________________
I'm trying to change the world, but I can't find the source code...
PaCkEtPiRaTe is offline   Reply With Quote
Old Apr 28th, 2010, 3:50 PM   #3
DaWei
Resident Grouch
 
DaWei's Avatar
 
Join Date: Jun 2005
Posts: 8,368
Rep Power: 18 DaWei will become famous soon enoughDaWei will become famous soon enough
Re: Image on both sides of a container.

It's needed that you post code. Images don't say jack squat unless they're coupled with the code that produces. Let me give you an example: you say you have a "page container." What the hell is that? It could be a div or a span or a table cell.

There's also this (I haven't done this stuff in 2 years, so maybe there's not as much sh!t difference as there used to be): The effects of switching between absolute and relative (or vice versa) can give you fits. The ability of the browser to understand what you mean by "length of the page" can give you fits. The box model can give you fits.

What you want to do can probably be achieved, but you'll probably have to tweak it with conditionals or dirty tricks for it to work in all browsers.

Post some code if you want help. Make it something simple that replicates the problem. Try to avoid constructions that depend upon content for end results, if you can.
__________________
Contributor's Corner:
Politically Incorrect
DaWei on Pointers
DaWei is offline   Reply With Quote
Old Apr 28th, 2010, 7:21 PM   #4
PaCkEtPiRaTe
Software Developer
 
PaCkEtPiRaTe's Avatar
 
Join Date: Aug 2007
Location: Massachusetts, USA
Posts: 696
Rep Power: 7 PaCkEtPiRaTe will become famous soon enough
Send a message via AIM to PaCkEtPiRaTe Send a message via Skype™ to PaCkEtPiRaTe
Cool Re: Image on both sides of a container.

The HTML:

<!--
   Project: Zazen Boys Fan Page
   Author: Darin Beaudreau
   Last Updated: 04/27/2010
-->

<html>
<head>
<meta name="keywords" content="zazen boys, number girl, japan, japanese, music, math rock, alternative" />
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis" />
<link href="css/layout.css" rel="stylesheet" type="text/css" />
<title>Zazen Fan - News</title>
</head>
<body>
<div id="pageContainer">

<div id="header">

</div>
<div id="navigation">
<center>
<a href="#" onClick="alert('Under Construction');">The Band</a><br />
<a href="#" onClick="alert('Under Construction');">Discography</a><br />
<a href="#" onClick="alert('We do not have any songs online.');">Songs</a><br />
<a href="#" onClick="alert('Under Construction');">Music Videos</a><br />
<a href="#" onClick="alert('Under Construction');">Lyrics</a><br />
<a href="#" onClick="alert('Under Construction');">Band Images</a><br />
</center>
</div>
<div id="content">
<h1>Zazen Fan - News</h1><br />
<hr width="100%" /><br />
<center>
<div id="newsBox">
<h2>Zazen Boys 2010 Tour Schedule</h2>
<pre style="color: #0000FF;">
向井秀徳アコースティック&エレクトリック 全国ツアー
3月26日(金) 鹿児島 SR HALL
3月27日(土) 大牟田 ふじ
3月29日(月) 長崎 Studio Do!
3月30日(火) 福岡 BEAT STATION
4月2日(金) 周南 TIKI-TA
4月3日(土) 広島 横川シネマ!!
4月4日(日) 米* BELIER
4月9日(金) 名古屋 CLUB QUATTRO
4月10日(土) 福井 CHOP
4月12日(月) 金沢 AZ
4月13日(火) 長野 ライブハウス J
4月14日(水) 新潟 CLUB RIVERST
4月19日(月) 京都 磔磔
4月20日(火) 大阪 umeda AKASO
4月21日(水) 岡山 PEPPER LAND
4月23日(金) 高松 DIME
4月24日(土) 徳島 JITTERBUG
5月3日(月・祝) 盛岡 CLUB CHANGE WAVE
5月8日(土) 東京 九段会館大ホール
5月18日(火) 帯広 REST
5月19日(水) *幌 BESSIE HALL
5月20日(木) 苫小牧 ELLCUBE
</pre>
</div>
<p class="datePosted">Posted: 04/27/2010 by Darin</p>
<br /><div id="newsBox">
<h2>Zazen Fan launched!</h2><br />
<p>The Zazen Fan fan website has been launched. There is not a lot of content yet, but more will be added soon. This website will have a biography of the band and its members, the complete Zazen Boys discography listed, all available music videos, and eventually, song downloads. I hope to eventually get lyrics added, but it is very hard to find lyrics for Zazen Boys. Please enjoy the website.</p>
</div>
<p class="datePosted">Posted: 04/27/2010 by Darin</p>
</center>
<hr width="100%" />
</div>
<div id="footer">
<b><p>© Copyright 2009 by Mukai Shutoku / Matsuri Studio. All rights reserved.</p></b>
</div>

</div>
</body>
</html>

And the CSS:

/*
   CSS: Zazen Boys Fan Page - Layout
   Author: Darin Beaudreau
   Last Updated: 04/27/2010
*/

body {background: rgb(0,0,0);margin: 0px 40px 0px 40px;}

#pageContainer
{
  margin: 0px 100px 0px 100px;
  background-color: rgb(255,255,255);
  height: 100%;
}
#header
{
  margin: 20px 0px 25px 0px;
  background: url(../images/cd_zazenboys.jpg) no-repeat right center;
  height: 150px;
}
#navigation
{
  float: left;
  margin: 0px 0px 10px 10px;
  height: 300px;
  width: 200px;
}
#content
{
  margin: 0px 20px 10px 220px;
  border: 1px solid #000000;
  height: 500px;
  padding: 15px 10px 10px 15px;
  overflow: auto;
}
#footer
{
  clear: both;
  display: block;
  margin: 0px 10px 20px 10px;
  border: 1px solid #000000;
  height: 50px;
  text-align: center;
  padding: 15px;
}

#navigation a {text-align: center;padding: 8px;width: 150px;font-family: Forte;font-size: 18px;}
#navigation a:link
{
  display: block;
  text-decoration: none;
  background-color: #000000;
  color: #FFFFFF;
}
#navigation a:visited
{
  display: block;
  text-decoration: none;
  background-color: #000000;
  color: #FFFFFF;
}
#navigation a:hover
{
  text-decoration: none;
  background-color: #444444;
  color: #FFFFFF;
}
#navigation a:active
{
  text-decoration: none;
  background-color: #000000;
  color: #FFFFFF;
}

#content h1, h2 {font-family: Forte;}
#content p {font-family: Verdana;font-size: 11pt;}

#newsBox
{
  display: block;
  margin: auto;
  width: 400px;
  border: 1px solid #000000;
  padding: 15px 10px 10px 15px;
  text-align: left;
}

.datePosted {font-weight: bold;color: #FF0000;}
__________________
I'm trying to change the world, but I can't find the source code...
PaCkEtPiRaTe is offline   Reply With Quote
Old Apr 28th, 2010, 9:07 PM   #5
crawforddavid2006
Expert Programmer
 
crawforddavid2006's Avatar
 
Join Date: Apr 2005
Location: Not sure yet
Posts: 664
Rep Power: 10 crawforddavid2006 is on a distinguished road
Send a message via AIM to crawforddavid2006 Send a message via MSN to crawforddavid2006
Re: Image on both sides of a container.

If you have photoshop, why not just create a background image with your two images on the side with white space in the middle. And then fix that image and have the rest of your page scroll over it. You would use something like this

html Syntax (Toggle Plain Text)
  1. <body background="yourimage.gif" bgproperties="fixed">
__________________
Quote:
Originally Posted by DaWei View Post
Well, it's better than Pen Islands url....;)

crawforddavid2006 is offline   Reply With Quote
Old Apr 28th, 2010, 9:15 PM   #6
DaWei
Resident Grouch
 
DaWei's Avatar
 
Join Date: Jun 2005
Posts: 8,368
Rep Power: 18 DaWei will become famous soon enoughDaWei will become famous soon enough
Re: Image on both sides of a container.

Good idea. You could also use right and left alignment on the images and flow the other content. For maximal proper results you usually have to put the right before the left even though logical thinking tells you it shouldn't matter.

A sensible question is "What does it look like if the content does exceed the untiled image height?"
__________________
Contributor's Corner:
Politically Incorrect
DaWei on Pointers
DaWei is offline   Reply With Quote
Old Apr 29th, 2010, 12:53 AM   #7
PaCkEtPiRaTe
Software Developer
 
PaCkEtPiRaTe's Avatar
 
Join Date: Aug 2007
Location: Massachusetts, USA
Posts: 696
Rep Power: 7 PaCkEtPiRaTe will become famous soon enough
Send a message via AIM to PaCkEtPiRaTe Send a message via Skype™ to PaCkEtPiRaTe
Re: Image on both sides of a container.

Except that with a set height and width, the image would not properly adjust if the browser is resized. I just want to do this with CSS if I can. I'll ask my professor if she knows how to do this tomorrow. Also, I was going to fix the images so that they stay static as the page scrolls.
__________________
I'm trying to change the world, but I can't find the source code...
PaCkEtPiRaTe is offline   Reply With Quote
Old Apr 29th, 2010, 12:15 PM   #8
PaCkEtPiRaTe
Software Developer
 
PaCkEtPiRaTe's Avatar
 
Join Date: Aug 2007
Location: Massachusetts, USA
Posts: 696
Rep Power: 7 PaCkEtPiRaTe will become famous soon enough
Send a message via AIM to PaCkEtPiRaTe Send a message via Skype™ to PaCkEtPiRaTe
Re: Image on both sides of a container.

I got it!

The solution was to declare the doctype and use two images in a div container before the main page container with fixed positioning... here's the code.

The DOCTYPE:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

And the image code:

<div>
<img style="position: fixed;top: 0px;left: 0px;" src="images/mukai_bg.jpg" height="100%" width="140px" />
<img style="position: fixed;top: 0px;right: 0px;" src="images/ichiro_bg.jpg" height="100%" width="140px" />
</div>

Thanks, w3schools
__________________
I'm trying to change the world, but I can't find the source code...
PaCkEtPiRaTe is offline   Reply With Quote
Reply

Bookmarks

« Previous Thread in Forum | Next Thread in Forum »

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
Cookie Stuffing through an image + faking referrer ben7171 PHP 6 Jan 6th, 2011 4:30 PM
Checking source codes of image, audio and video files on_auc C++ 5 Jan 1st, 2010 9:14 AM
Error in java code ..showing image squills Java 3 Dec 11th, 2009 4:05 AM
Image corruption on some systems slyadams Java 0 Jun 1st, 2006 9:40 AM
Image Viewer (Urgent Bta testing) SoniX Visual Basic .NET 8 Sep 21st, 2005 5:25 PM




DaniWeb IT Discussion Community
All times are GMT -5. The time now is 6:55 AM.

Powered by vBulletin® Version 3.7.0, Copyright ©2000 - 2014, Jelsoft Enterprises Ltd.
Copyright ©2007 DaniWeb® LLC