38 replies [Last post]
socialevil
Offline
Regular
Last seen: 8 years 20 weeks ago
Timezone: GMT+1
Joined: 2008-11-05
Posts: 42
Points: 23

Hi csscreator fellas,

My question is : Lets say i have a background image 1800x1800px. How can i make it to fit my resolution 1200x800(or whatever till its less than 1800x1800px). With height and width:100% ? After that i want when i am writing some text and the page gets larger than my screen when i scroll down to be able to see the missing 1000px height from my background image and not just some black color as background. I hope you did understand what am i trying to say.

Josh Connerty
Josh Connerty's picture
Offline
Enthusiast
Wiltshire, England
Last seen: 9 years 23 weeks ago
Wiltshire, England
Joined: 2008-10-17
Posts: 268
Points: 23

Um try setting the

Um try setting the background image to 100%.

And as for the empty space at the bottom add repeat-y to it so it should be similar to this:

#container {
background: url(yourimage.jpg) repeat-y 100%;
}

Try it and see if that gets your desired results. If not get back to me.

socialevil
Offline
Regular
Last seen: 8 years 20 weeks ago
Timezone: GMT+1
Joined: 2008-11-05
Posts: 42
Points: 23

so.. when i apply your code

so.. when i apply your code there is scroll without having a text.. just scroll down.. when i still set height:100% and width:100% with your code.. doesn't work

Josh Connerty
Josh Connerty's picture
Offline
Enthusiast
Wiltshire, England
Last seen: 9 years 23 weeks ago
Wiltshire, England
Joined: 2008-10-17
Posts: 268
Points: 23

Ok I can't really do anymore

Ok I can't really do anymore without either seeing your HTML & CSS or Seing a live site.

I'm going to be on for the next few hours so if you have no dedications. Although I am going for a cigarete so my cookie might expire. But I will be back if you can get me either of those two things then I can start.

socialevil
Offline
Regular
Last seen: 8 years 20 weeks ago
Timezone: GMT+1
Joined: 2008-11-05
Posts: 42
Points: 23

background

so the site is http://gergov.eu/jesi
the html code is

the css code is
#container {
background: url(img.png) repeat-y 100%;
width:100%;
height:100%;
}

body {
padding:0;
margin:0;
}

Josh Connerty
Josh Connerty's picture
Offline
Enthusiast
Wiltshire, England
Last seen: 9 years 23 weeks ago
Wiltshire, England
Joined: 2008-10-17
Posts: 268
Points: 23

Ok I will fix it now. Is it

Ok I will fix it now.

Is it just the black space you are trying to fix now?

Josh Connerty
Josh Connerty's picture
Offline
Enthusiast
Wiltshire, England
Last seen: 9 years 23 weeks ago
Wiltshire, England
Joined: 2008-10-17
Posts: 268
Points: 23

Also you have ALOT of errors

Also you have ALOT of errors in your html I haven't check your CSS yet but you might want to clear those up first if you are unsure on how to find the results click on the "Validat your documents" in my signature and put in the site uri.

socialevil
Offline
Regular
Last seen: 8 years 20 weeks ago
Timezone: GMT+1
Joined: 2008-11-05
Posts: 42
Points: 23

background

yeah my code is a mess.. but
it gives me 43 errors and half of them is from code that my flash publishing is generating ..

Josh Connerty
Josh Connerty's picture
Offline
Enthusiast
Wiltshire, England
Last seen: 9 years 23 weeks ago
Wiltshire, England
Joined: 2008-10-17
Posts: 268
Points: 23

Ok you actualy have 48

Ok you actualy have 48 errors.

I think the main problem is your doctype chnage it for this:

<!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" />

Josh Connerty
Josh Connerty's picture
Offline
Enthusiast
Wiltshire, England
Last seen: 9 years 23 weeks ago
Wiltshire, England
Joined: 2008-10-17
Posts: 268
Points: 23

Ok I have managed to get it

Ok I have managed to get it to work localy try changing all your code for this BUT make sure you back up ALL of your code.

HTML:

<!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" />
<link rel="stylesheet" type="text/css" href="link.css" />
<title>Kalo</title>
</head>
<body bgcolor="#000000">
<img id="container" src="img.png">
<div id="two"><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="500" height="130" id="Untitled-3" align="middle">
<param name="allowScriptAccess" value="sameDomain" /><param name="wmode" value="transparent" />
<param name="movie" value="logoto.swf" /><param name="quality" value="high" /><param name="bgcolor" value="#ffffff" /><embed src="logoto.swf" quality="high" wmode="transparent" bgcolor="#ffffff" width="800" height="400" name="Untitled-3" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object></div>	
<a href="http://gergov.eu/jesi/index.html"></a>
<!--text used in the movie-->
<!-- saved from url=(0013)about:internet -->
<object class="one" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="120" height="30" id="Untitled-3" align="middle">
 
<param name="allowScriptAccess" value="sameDomain" /> <param name="wmode" value="transparent">
<param name="movie" value="button.swf" /><param name="quality" value="high" /><param name="bgcolor" value="#000000" /><embed src="button.swf" quality="high" wmode="transparent" bgcolor="#000000" width="120" height="30" name="button" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
 
 
 
 
<!--url's used in the movie-->
<a href="http://gergov.eu/jesi/gallery.html"></a>
<!--text used in the movie-->
<!-- saved from url=(0013)about:internet -->
<object class="two" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="120" height="30" id="Untitled-5" align="middle">
<param name="allowScriptAccess" value="sameDomain" /> <param name="wmode" value="transparent">
<param name="movie" value="button1.swf" /><param name="quality" value="high" /><param name="bgcolor" value="#000000" /><embed src="button1.swf" quality="high" wmode="transparent" bgcolor="#000000" width="120" height="30" name="button2" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
 
<!--url's used in the movie-->
<a href="http://gergov.eu/jesi/aboutus.html"></a>
<!--text used in the movie-->
<!-- saved from url=(0013)about:internet -->
<object class="tree" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="100" height="30" id="Untitled-6" align="middle">
<param name="allowScriptAccess" value="sameDomain" /> <param name="wmode" value="transparent">
<param name="movie" value="button3.swf" /><param name="quality" value="high" /><param name="bgcolor" value="#000000" /><embed src="button3.swf" quality="high" wmode="transparent" bgcolor="#000000" width="100" height="30" name="button3" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
 
<!--url's used in the movie-->
<a href="http://gergov.eu/jesi/contacts.html"></a>
<!--text used in the movie-->
<!-- saved from url=(0013)about:internet -->
<object class="four" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="145" height="30" id="Button2" align="middle">
<param name="allowScriptAccess" value="sameDomain" /> <param name="wmode" value="transparent">
 
<param name="movie" value="Button2.swf" /><param name="quality" value="high" /><param name="bgcolor" value="#000000" /><embed src="Button2.swf" quality="high" wmode="transparent" bgcolor="#000000" width="145" height="30" name="Untitled-7" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
<div id="text"><h1 id="h1">Вече и в България!</h1></div>
<div id="text1"><p><img class="seven" src="http://gergov.eu/jesi/lunaflexorg.jpg" align ="left" width="48" height="48" />За първи път в България можете да купите водно легло, каквото сте виждали само по филмите.
	Фирма "Крафт" ЕООД отвори врати на изложбена зала, където се предлагат по каталог водни легла, произжедени в Германия.
</p>Да се спи на воден матрак е едновремено здравословно и приятно. Особено добре влияе на хора с гръбначни проблеми - дископатии, дискови хернии.
		Намалят хъркането. За страдащите от ревматизъм и артрит, водният матрак е благословия, защото вграден нагревател топли водата до 26-36 градуса.
		С такова легло се пести ток и може да се спи в неотоплена стая.
		<p> Годишно в Германия се произвеждат по 40хил. такива легла. Използват се	 не само в домовете, но и в болници, санаториуми, спа-центрове.
		<p>adsfsfa</p>
<p>asffsa</p>
<p>adfas</p>
 
</div>
</body>
 
</html>

CSS:

@charset "utf-8";
/* CSS Document */
 
#container {
background: url(img.png) repeat-y 100%;
width:100%;
height:100em;
}
 
body { 
	padding:0;
  margin:0; 
}
a:link {
	color:#000; 
	text-decoration : 
	underline; 
} 
 
a:visited { 
	color:#000; 
	text-decoration: underline; 
} 
 
a:hover { 
	color:#000; 
	text-decoration: none;
}
 
object.one {
	position:absolute;
	left:24em;
	top:100px;
}
 
object.two{
	position:absolute;
	left:37.2em;
	top:100px;
}
 
object.tree {
	position:absolute;
	left:31.2em;
	top:100px;
}
 
object.four {
	position:absolute;
	left:44.5em;
	top:100px;
}
 
 
img.seven {
	width:300;
	height:180;
}
#gallery {
	position:absolute;
	bottom:20px;
	left:0em;
}
#gallery1 {
	position:absolute;
	bottom:20px;
	right:0em;
}
 
#text {	
	position:absolute;
	top: 140px;
	left:3em;
	color:red;
	font-size:150%;
}
 
#two {
	position:absolute;
	top:10px;
	left:22.5em;
	width:310;
	height:74;
}
 
 
 
#text1 {
	position:absolute;
	top:250px;
	left:5em;
	color:#cccccc;
	font-size:130%;
 
}
#visit {
	position:absolute;
	top:175px;
	left:5em;
}
 
#asdf {
	position:absolute;
	top:80px;
	left:2em;
	color:#ffffff;
	font-size:130%;
 
}
 
#asdff {
	position:absolute;
	top:110px;
	left:2em;
	color:white;
	font-size:130%;
 
}
#emailform {
	position:absolute;
	top:150px;
	right:5em;
}

Tell me how it goes.

socialevil
Offline
Regular
Last seen: 8 years 20 weeks ago
Timezone: GMT+1
Joined: 2008-11-05
Posts: 42
Points: 23

background

http://gergov.eu/jesi/hola.html
i made a new one.. the text is ??? but ill fix that later.. see how there is scroll without having text

do you have skype or icq or something ??!! Smile it will be easier

Josh Connerty
Josh Connerty's picture
Offline
Enthusiast
Wiltshire, England
Last seen: 9 years 23 weeks ago
Wiltshire, England
Joined: 2008-10-17
Posts: 268
Points: 23

Ok now this should fix

Ok now this should fix it.

HTML:

<!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" />
<link rel="stylesheet" type="text/css" href="link.css" />
<title>Kalo</title>
</head>
<body bgcolor="#000000">
<img id="container" src="img.png">
<div id="two"<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="500" height="130" id="Untitled-3" align="middle">
<param name="allowScriptAccess" value="sameDomain" /><param name="wmode" value="transparent" />
<param name="movie" value="logoto.swf" /><param name="quality" value="high" /><param name="bgcolor" value="#ffffff" /><embed src="logoto.swf" quality="high" wmode="transparent" bgcolor="#ffffff" width="800" height="400" name="Untitled-3" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object></div>	
<a href="http://gergov.eu/jesi/index.html"></a>
<!--text used in the movie-->
<!-- saved from url=(0013)about:internet -->
<object class="one" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="120" height="30" id="Untitled-3" align="middle">
 
<param name="allowScriptAccess" value="sameDomain" /> <param name="wmode" value="transparent">
<param name="movie" value="button.swf" /><param name="quality" value="high" /><param name="bgcolor" value="#000000" /><embed src="button.swf" quality="high" wmode="transparent" bgcolor="#000000" width="120" height="30" name="button" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
 
 
 
 
<!--url's used in the movie-->
<a href="http://gergov.eu/jesi/gallery.html"></a>
<!--text used in the movie-->
<!-- saved from url=(0013)about:internet -->
<object class="two" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="120" height="30" id="Untitled-5" align="middle">
<param name="allowScriptAccess" value="sameDomain" /> <param name="wmode" value="transparent">
<param name="movie" value="button1.swf" /><param name="quality" value="high" /><param name="bgcolor" value="#000000" /><embed src="button1.swf" quality="high" wmode="transparent" bgcolor="#000000" width="120" height="30" name="button2" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
 
<!--url's used in the movie-->
<a href="http://gergov.eu/jesi/aboutus.html"></a>
<!--text used in the movie-->
<!-- saved from url=(0013)about:internet -->
<object class="tree" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="100" height="30" id="Untitled-6" align="middle">
<param name="allowScriptAccess" value="sameDomain" /> <param name="wmode" value="transparent">
<param name="movie" value="button3.swf" /><param name="quality" value="high" /><param name="bgcolor" value="#000000" /><embed src="button3.swf" quality="high" wmode="transparent" bgcolor="#000000" width="100" height="30" name="button3" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
 
<!--url's used in the movie-->
<a href="http://gergov.eu/jesi/contacts.html"></a>
<!--text used in the movie-->
<!-- saved from url=(0013)about:internet -->
<object class="four" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="145" height="30" id="Button2" align="middle">
<param name="allowScriptAccess" value="sameDomain" /> <param name="wmode" value="transparent">
 
<param name="movie" value="Button2.swf" /><param name="quality" value="high" /><param name="bgcolor" value="#000000" /><embed src="Button2.swf" quality="high" wmode="transparent" bgcolor="#000000" width="145" height="30" name="Untitled-7" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
<div id="text"><h1 id="h1">Вече и в България!</h1></div>
<div id="text1"><p><img class="seven" src="http://gergov.eu/jesi/lunaflexorg.jpg" align ="left" width="48" height="48" />За първи път в България можете да купите водно легло, каквото сте виждали само по филмите.
	Фирма "Крафт" ЕООД отвори врати на изложбена зала, където се предлагат по каталог водни легла, произжедени в Германия.
</p>Да се спи на воден матрак е едновремено здравословно и приятно. Особено добре влияе на хора с гръбначни проблеми - дископатии, дискови хернии.
		Намалят хъркането. За страдащите от ревматизъм и артрит, водният матрак е благословия, защото вграден нагревател топли водата до 26-36 градуса.
		С такова легло се пести ток и може да се спи в неотоплена стая.
		<p> Годишно в Германия се произвеждат по 40хил. такива легла. Използват се	 не само в домовете, но и в болници, санаториуми, спа-центрове.
		<p>adsfsfa</p>
<p>asffsa</p>
<p>adfas</p>
 
</div>
</body>
 
</html>

CSS:

@charset "utf-8";
/* CSS Document */
 
#container {
background: url(img.png) repeat-y 100%;
width:100%;
max-width: 100%;
overflow: hidden;
height: 100%;
}
 
body { 
	padding:0;
  margin:0; 
}
a:link {
	color:#000; 
	text-decoration : 
	underline; 
} 
 
a:visited { 
	color:#000; 
	text-decoration: underline; 
} 
 
a:hover { 
	color:#000; 
	text-decoration: none;
}
 
object.one {
	position:absolute;
	left:24em;
	top:100px;
}
 
object.two{
	position:absolute;
	left:37.2em;
	top:100px;
}
 
object.tree {
	position:absolute;
	left:31.2em;
	top:100px;
}
 
object.four {
	position:absolute;
	left:44.5em;
	top:100px;
}
 
 
img.seven {
	width:300;
	height:180;
}
#gallery {
	position:absolute;
	bottom:20px;
	left:0em;
}
#gallery1 {
	position:absolute;
	bottom:20px;
	right:0em;
}
 
#text {	
	position:absolute;
	top: 140px;
	left:3em;
	color:red;
	font-size:150%;
}
 
#two {
	position:absolute;
	top:10px;
	left:22.5em;
	width:310;
	height:74;
}
 
 
 
#text1 {
	position:absolute;
	top:250px;
	left:5em;
	color:#cccccc;
	font-size:130%;
 
}
#visit {
	position:absolute;
	top:175px;
	left:5em;
}
 
#asdf {
	position:absolute;
	top:80px;
	left:2em;
	color:#ffffff;
	font-size:130%;
 
}
 
#asdff {
	position:absolute;
	top:110px;
	left:2em;
	color:white;
	font-size:130%;
 
}
#emailform {
	position:absolute;
	top:150px;
	right:5em;
}

socialevil
Offline
Regular
Last seen: 8 years 20 weeks ago
Timezone: GMT+1
Joined: 2008-11-05
Posts: 42
Points: 23

background

mmmmm i think its the same?

Josh Connerty
Josh Connerty's picture
Offline
Enthusiast
Wiltshire, England
Last seen: 9 years 23 weeks ago
Wiltshire, England
Joined: 2008-10-17
Posts: 268
Points: 23

Ok no I have actualy fixed

Ok no I have actualy fixed it now.

CSS:

#container {
background: url(img.png) repeat-y 100%;
overflow: hidden;
max-width: 100%;
width:100%;
height:100%;
}
 
body { 
padding:0;
margin:0;
width: 100%;
overflow: hidden;
}
a:link {
	color:#000; 
	text-decoration : 
	underline; 
} 
 
a:visited { 
	color:#000; 
	text-decoration: underline; 
} 
 
a:hover { 
	color:#000; 
	text-decoration: none;
}
 
object.one {
	position:absolute;
	left:24em;
	top:100px;
}
 
object.two{
	position:absolute;
	left:37.2em;
	top:100px;
}
 
object.tree {
	position:absolute;
	left:31.2em;
	top:100px;
}
 
object.four {
	position:absolute;
	left:44.5em;
	top:100px;
}
 
 
img.seven {
	width:300;
	height:180;
}
#gallery {
	position:absolute;
	bottom:20px;
	left:0em;
}
#gallery1 {
	position:absolute;
	bottom:20px;
	right:0em;
}
 
#text {	
	position:absolute;
	top: 140px;
	left:3em;
	color:red;
	font-size:150%;
}
 
#two {
	position:absolute;
	top:10px;
	left:22.5em;
	width:310;
	height:74;
}
 
 
 
#text1 {
	position:absolute;
	top:250px;
	left:5em;
	color:#cccccc;
	font-size:130%;
 
}
#visit {
	position:absolute;
	top:175px;
	left:5em;
}
 
#asdf {
	position:absolute;
	top:80px;
	left:2em;
	color:#ffffff;
	font-size:130%;
 
}
 
#asdff {
	position:absolute;
	top:110px;
	left:2em;
	color:white;
	font-size:130%;
 
}
#emailform {
	position:absolute;
	top:150px;
	right:5em;
}

socialevil
Offline
Regular
Last seen: 8 years 20 weeks ago
Timezone: GMT+1
Joined: 2008-11-05
Posts: 42
Points: 23

background

no Sad its still the same still having scroll without need Sad

Josh Connerty
Josh Connerty's picture
Offline
Enthusiast
Wiltshire, England
Last seen: 9 years 23 weeks ago
Wiltshire, England
Joined: 2008-10-17
Posts: 268
Points: 23

Have you added the latest

Have you added the latest css?

This has to work because the body Is set to 100% and the overflow is hidden so that black space to the right has gone. I've tried this code with a live editor on your website.

socialevil
Offline
Regular
Last seen: 8 years 20 weeks ago
Timezone: GMT+1
Joined: 2008-11-05
Posts: 42
Points: 23

yeah i did apply the new css

yeah i did apply the new css code Sad http://gergov.eu/jesi/links.css
i dont know why it doesnt work when i open it.. still have a scroll

Josh Connerty
Josh Connerty's picture
Offline
Enthusiast
Wiltshire, England
Last seen: 9 years 23 weeks ago
Wiltshire, England
Joined: 2008-10-17
Posts: 268
Points: 23

The reason why you have the

The reason why you have the scroll is because your div "two" is wrong it needs to be

<div id="two"<object>

That is also why your text isn't displaying.

socialevil
Offline
Regular
Last seen: 8 years 20 weeks ago
Timezone: GMT+1
Joined: 2008-11-05
Posts: 42
Points: 23

yeah but look now when i

yeah Sad but look now when i add more text.. the background doesn't stretch Sad its black background

Josh Connerty
Josh Connerty's picture
Offline
Enthusiast
Wiltshire, England
Last seen: 9 years 23 weeks ago
Wiltshire, England
Joined: 2008-10-17
Posts: 268
Points: 23

Oh thats were we're going

Oh thats were we're going wrong we're looking at different documents. Ok ill try this one Wink

Josh Connerty
Josh Connerty's picture
Offline
Enthusiast
Wiltshire, England
Last seen: 9 years 23 weeks ago
Wiltshire, England
Joined: 2008-10-17
Posts: 268
Points: 23

OOOOOOOOOOOOOOOOh my

OOOOOOOOOOOOOOOOh my god!!!!!!!!!!

I only just realised that container isn't a div!
That is were we are going wrong!
Ok put back your original documents.

socialevil
Offline
Regular
Last seen: 8 years 20 weeks ago
Timezone: GMT+1
Joined: 2008-11-05
Posts: 42
Points: 23

http://gergov.eu/jesi/index.h

Josh Connerty
Josh Connerty's picture
Offline
Enthusiast
Wiltshire, England
Last seen: 9 years 23 weeks ago
Wiltshire, England
Joined: 2008-10-17
Posts: 268
Points: 23

Ok you need to add to the

Ok you need to add to the #two css block.

#two {
left:22.5em;
position:absolute;
top:10px;
width: 500px;
overflow:hidden;
}

socialevil
Offline
Regular
Last seen: 8 years 20 weeks ago
Timezone: GMT+1
Joined: 2008-11-05
Posts: 42
Points: 23

damn still with ff scroll

damn Sad still with ff scroll without text.. and with ff ie google chrome.. when i write some text.. have scroll but blackbackground

dude thanks for the help im going to sleep now coz im.. almost dead Smile see ya in 5-10 hours Smile if not.. se ya tonight thanks again for the help and we will make this later

Josh Connerty
Josh Connerty's picture
Offline
Enthusiast
Wiltshire, England
Last seen: 9 years 23 weeks ago
Wiltshire, England
Joined: 2008-10-17
Posts: 268
Points: 23

Ok the rest is because of

Ok the rest is because of errors and bad doctype copy the doctype in again, then edit your img tag for the container change it to:

<img id="container" src="img.png" />

To fit in with xhtml1.0 restrictions. This should then fix your background issue for most of the broswers. Also you can take the background line out of your #container CSS block.

I'm using FF4 and I'm not seeing the scroll.

All the browsers are going to have the funnies because you have so many errors a record breaking amount of errors I think Tongue.

Josh Connerty
Josh Connerty's picture
Offline
Enthusiast
Wiltshire, England
Last seen: 9 years 23 weeks ago
Wiltshire, England
Joined: 2008-10-17
Posts: 268
Points: 23

Well I guess you have given

Well I guess you have given up but if you want to check that it does work go to this link

socialevil
Offline
Regular
Last seen: 8 years 20 weeks ago
Timezone: GMT+1
Joined: 2008-11-05
Posts: 42
Points: 23

i guess its not from my

i guess its not from my mistakes coz with your version where i have " />" at the end .. and everything looks clean.. stil i have scroll without having a large text

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 30 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

I was requested to look at

I was requested to look at this problem, but will gloss over the previous replies for the moment as there is rather a lot to absorb, instead simply looking at the site, makes me question why the image is being set as an inline one? The normal approach to what I see there would be this:

The image is set as a background of html the graphic would be sliced into a thin ~2-3px wide strip but the full height this is set in the shorthand background property to repeat across the page on the x-axis, this takes care of any viewport width. Where the image runs out in terms of height and you are left with tha background from the parent you state a solid background color that matches the last pixel in your image e.g in this case #666 that solid color then takes over from the graphic and fills in the bottom area after the graphic has ended.

{background: #666 url(image.png) repeat-x }

Really not sure whether this is at all what you were trying to achieve?

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

socialevil
Offline
Regular
Last seen: 8 years 20 weeks ago
Timezone: GMT+1
Joined: 2008-11-05
Posts: 42
Points: 23

Hi Hugo, Thanks for the

Hi Hugo,

Thanks for the response. Actually i did this code :

css:
#cont {
background:url(img.png) repeat-x #e1e1e1;
width:100%;
}
===================================================================
html:

whole body

the problem is that css doesn't like png ? Because the background goes white like there is no img for background.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 30 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

CSS loves png's, html loves

CSS loves png's, html loves png's. the png format is overall wonderful and purpose designed for the web. can i ask what browser you are using?

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

socialevil
Offline
Regular
Last seen: 8 years 20 weeks ago
Timezone: GMT+1
Joined: 2008-11-05
Posts: 42
Points: 23

browser

IE, FireFox, Google Chrome

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 30 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Can you add that code so

Can you add that code so that we may see the problem? Is the approach I outlined one that would meet requirements?

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

socialevil
Offline
Regular
Last seen: 8 years 20 weeks ago
Timezone: GMT+1
Joined: 2008-11-05
Posts: 42
Points: 23

i didnt understand .. which

i didnt understand .. which code? where to add it ?

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 30 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

socialevil wrote:Hi

socialevil wrote:

Hi Hugo,

Thanks for the response. Actually i did this code :

css:
#cont {
background:url(img.png) repeat-x #e1e1e1;
width:100%;
}
===================================================================
html:

whole body

the problem is that css doesn't like png ? Because the background goes white like there is no img for background.

That idea but place the background on the html element.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

socialevil
Offline
Regular
Last seen: 8 years 20 weeks ago
Timezone: GMT+1
Joined: 2008-11-05
Posts: 42
Points: 23

yeah but see how it looks

yeah but see how it looks now the width is not 100% and there is some visible line.. and for the width and for the height
http://gergov.eu/jesi/index.html

im a little bit confused in this code Smile what is in external css what is internal.. and so on

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 30 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

If you change: #conn

If you change:

#conn {
background:#666 url(img.png) repeat-x;
}

To:

html {
background:#666 url(img.png) repeat-x;
}

Does that not suit requirements?

The horizontal line will almost certainly be the fact that you have not cropped the graphic correctly, you have left a 1px space at the bottom of the png.

body {width:100%;} shouldn't be necessary

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

socialevil
Offline
Regular
Last seen: 8 years 20 weeks ago
Timezone: GMT+1
Joined: 2008-11-05
Posts: 42
Points: 23

well im doing this with

well im doing this with flash.. my stage is 1800x1800 and i do the height and width of the image to 1800x1800 Sad no pixels left Sad

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 6 hours 53 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9761
Points: 3843

Maybe I don't understand

Maybe I don't understand what you want, but I certainly wouldn't make such a large image. Using your current bg image, I did this:

  body {
    background: #666 url(img.png) top repeat-x;
    color: white;
    font-size: 100%;
    }
The color, #666 matches the final shade of the gradient.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

socialevil
Offline
Regular
Last seen: 8 years 20 weeks ago
Timezone: GMT+1
Joined: 2008-11-05
Posts: 42
Points: 23

Yes that did work i just

Yes that did work Smile i just made some changes on the image and now works fine Smile Thank you guys Smile