rluka
05-02-2006, 10:10 PM
Thanks all
Ron L
Ron L
Click to See Complete Forum and Search --> : Cant get left side border..Help?
NogDog
05-02-2006, 10:19 PM
Instead of "repeat", use "repeat-y 0 0".
rluka
05-02-2006, 11:29 PM
Thanks all
ray326
05-02-2006, 11:38 PM
#container has no height.
Bytes
05-03-2006, 12:13 AM
Perhaps take a look at this link:
http://www.w3schools.com/css/tryit.asp?filename=trycss_border-left
and add this to your CSS script:
<style type="text/css">
p
{
border-left: medium solid #ff0000
}
</style>Regards,
http://www.w3schools.com/css/tryit.asp?filename=trycss_border-left
and add this to your CSS script:
<style type="text/css">
p
{
border-left: medium solid #ff0000
}
</style>Regards,
SliderNo1
05-03-2006, 12:35 AM
I would suggest altering your css code for #container by removing the width: 100%; completely,
and changing the following line to read:-
background: url(design/leftmargin.gif) top left repeat-y;
and changing the following line to read:-
background: url(design/leftmargin.gif) top left repeat-y;
SliderNo1
05-03-2006, 01:45 AM
I have played with the layout for you and altered the css also, here are the new page code and css for you to copy.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>This is where you type the Title for your webpage</title>
<link rel="stylesheet" href="style.css" media="screen">
</head>
<body>
<div id="header">
<h1>HEADING
</h1>
</div>
<div id="content">
<a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image5','','pictures/AlbumBack300x300.jpg',1)">
<img src="pictures/Album300x300.jpg" name="Image5" width="300" height="300" border="0"></a></div>
</body>
</html>
/* CSS Document */
body
{
background: #E7EFFF url(pictures/3Horses.jpg) bottom right fixed no-repeat;
}
#header
{
background-color: #55759C;
color: #FFF;
border-bottom: #A5ADDE solid 5px;
padding: 30px;
}
#content
{
border-left: #54739C solid 200px;
}
There you go.. That should get you on the right track i hope.
Have fun!!
:)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>This is where you type the Title for your webpage</title>
<link rel="stylesheet" href="style.css" media="screen">
</head>
<body>
<div id="header">
<h1>HEADING
</h1>
</div>
<div id="content">
<a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image5','','pictures/AlbumBack300x300.jpg',1)">
<img src="pictures/Album300x300.jpg" name="Image5" width="300" height="300" border="0"></a></div>
</body>
</html>
/* CSS Document */
body
{
background: #E7EFFF url(pictures/3Horses.jpg) bottom right fixed no-repeat;
}
#header
{
background-color: #55759C;
color: #FFF;
border-bottom: #A5ADDE solid 5px;
padding: 30px;
}
#content
{
border-left: #54739C solid 200px;
}
There you go.. That should get you on the right track i hope.
Have fun!!
:)
rluka
05-03-2006, 02:44 AM
Thanks
tarunkrsna
05-03-2006, 04:25 AM
I am aware that the plain old background element is widely accepted by browsers but perhaps my old fashioned way of doing it will work.
try this:
#container
{
text-align: left;
width: 100%;
background-image: url(design/leftmargin.gif);
background-repeat:repeat-y;
}
This has worked for me previously despite playing css by the seat of my pants most of the time.
This method is shown on the w3c site
http://www.w3schools.com/css/tryit.asp?filename=trycss_background-repeat
however when I used your method on this w3c page it worked perfectly.
http://www.w3schools.com/css/tryit.asp?filename=trycss_background
Strange. Maybe the problem is somewhere else. Could there be a } missing somewhere? Or .. whatever.
This little fella is quite useful
http://www.htmlhelp.com/tools/csscheck/
Cheers
tarun
try this:
#container
{
text-align: left;
width: 100%;
background-image: url(design/leftmargin.gif);
background-repeat:repeat-y;
}
This has worked for me previously despite playing css by the seat of my pants most of the time.
This method is shown on the w3c site
http://www.w3schools.com/css/tryit.asp?filename=trycss_background-repeat
however when I used your method on this w3c page it worked perfectly.
http://www.w3schools.com/css/tryit.asp?filename=trycss_background
Strange. Maybe the problem is somewhere else. Could there be a } missing somewhere? Or .. whatever.
This little fella is quite useful
http://www.htmlhelp.com/tools/csscheck/
Cheers
tarun
tarunkrsna
05-03-2006, 04:32 AM
Hi rluka...
I got to thinking that the w3c way of including all background properties in one statement included the positioning attribute of center so maybe you need to specify where you want the image positioned. Check out how they used the center
{
background: #00ff00 url('smiley.gif') no-repeat fixed center;
}
Hope this helps.
tarun
I got to thinking that the w3c way of including all background properties in one statement included the positioning attribute of center so maybe you need to specify where you want the image positioned. Check out how they used the center
{
background: #00ff00 url('smiley.gif') no-repeat fixed center;
}
Hope this helps.
tarun
tarunkrsna
05-03-2006, 04:52 AM
Hey rluka...
I dont get it ... this is what you have running on your site. Can you post your page so we can see the actual css doc you are currently editing. There's no mention of any #container in here. I checked; your .gif is there in the design folder. You've only got the one style sheet listed in the .html source code. A check for background image displays only the horses. There's no mention of a id="container" in your posted source.
/* CSS Document */
body
{
background: #E7EFFF url(pictures/3HorsesBySusanKerr.jpg) bottom right fixed no-repeat;
}
#header
{
background-color: #55759C;
color: #FFF;
border-bottom: #A5ADDE solid 5px;
padding: 30px;
}
#content
{
border-left: #54739C solid 200px;
}
tarun
I dont get it ... this is what you have running on your site. Can you post your page so we can see the actual css doc you are currently editing. There's no mention of any #container in here. I checked; your .gif is there in the design folder. You've only got the one style sheet listed in the .html source code. A check for background image displays only the horses. There's no mention of a id="container" in your posted source.
/* CSS Document */
body
{
background: #E7EFFF url(pictures/3HorsesBySusanKerr.jpg) bottom right fixed no-repeat;
}
#header
{
background-color: #55759C;
color: #FFF;
border-bottom: #A5ADDE solid 5px;
padding: 30px;
}
#content
{
border-left: #54739C solid 200px;
}
tarun
SliderNo1
05-03-2006, 05:12 AM
Where would you like the album cover positioned?
Will need to specify a location for the image on the page.
The left border is relative to the size of the content div so will increase size of this to fill page.
Cheers.
Will need to specify a location for the image on the page.
The left border is relative to the size of the content div so will increase size of this to fill page.
Cheers.
rluka
05-03-2006, 04:50 PM
Thanks all
SliderNo1
05-04-2006, 08:05 AM
I recreated the rollover image using an insert rollover image facility in dreamweaver and its works fine for me now. Here is the new code.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>This is where you type the Title of your webpage</title>
<link rel="stylesheet" href="style.css" media="screen">
<script type="text/JavaScript">
<!--
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head>
<body onLoad="MM_preloadImages('pictures/albumback300x300.jpg')">
<div id="header">
<h1>HEADING
</h1>
</div>
<div id="content">
<a href="http://www.yourlink.com" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image 5','','pictures/albumback300x300.jpg',1)"><img src="pictures/album300x300.jpg" alt="Album Cover" name="Image 5" width="300" height="300" border="0"></a>
<p> </p>
<p> </p>
<p> </p>
</div>
</body>
</html>
Hope this helps.
(",)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>This is where you type the Title of your webpage</title>
<link rel="stylesheet" href="style.css" media="screen">
<script type="text/JavaScript">
<!--
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head>
<body onLoad="MM_preloadImages('pictures/albumback300x300.jpg')">
<div id="header">
<h1>HEADING
</h1>
</div>
<div id="content">
<a href="http://www.yourlink.com" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image 5','','pictures/albumback300x300.jpg',1)"><img src="pictures/album300x300.jpg" alt="Album Cover" name="Image 5" width="300" height="300" border="0"></a>
<p> </p>
<p> </p>
<p> </p>
</div>
</body>
</html>
Hope this helps.
(",)
SliderNo1
05-04-2006, 08:07 AM
i also played about with your css style file and the code for that is here -
/* CSS Document */
#header
{
background-color: #55759C;
color: #FFF;
border-bottom: #A5ADDE solid 5px;
padding: 30px;
}
#content
{
border-left: #54739C solid 200px;
background: #E7EFFF url(pictures/3Horses.jpg) bottom right fixed no-repeat;
padding: 30px;
}
it gives the look i think you wanted to achieve?
/* CSS Document */
#header
{
background-color: #55759C;
color: #FFF;
border-bottom: #A5ADDE solid 5px;
padding: 30px;
}
#content
{
border-left: #54739C solid 200px;
background: #E7EFFF url(pictures/3Horses.jpg) bottom right fixed no-repeat;
padding: 30px;
}
it gives the look i think you wanted to achieve?
rluka
05-04-2006, 08:51 PM
Thanks
SliderNo1
05-04-2006, 09:20 PM
Hello,
Did you use the revised page code from my previous post #14 in conjuntion with the revised CSS code in post #15?
These should both work together fine and rollover should be fixed too.
(",)
Did you use the revised page code from my previous post #14 in conjuntion with the revised CSS code in post #15?
These should both work together fine and rollover should be fixed too.
(",)
rluka
05-04-2006, 09:44 PM
thanks again..Ron L
SliderNo1
05-04-2006, 10:22 PM
The rollover problem - your images should be stored at this location:-
http://www.islandnet.com/~luka/Test/pictures/allimagefiles.jpg
but i cannot find them and thats why its not displaying at all.
check and upload picture folder and image files in correct path/place.
http://www.islandnet.com/~luka/Test/pictures/allimagefiles.jpg
but i cannot find them and thats why its not displaying at all.
check and upload picture folder and image files in correct path/place.
rluka
05-04-2006, 11:15 PM
Thanks very much...Ron L
SliderNo1
05-05-2006, 10:19 PM
?? If your page is in the http://www.islandnet.com/~luka/Test/ folder it should see them ok??
One or the other is not in the right place I feel as the code is correct and you said it works fine from desktop.
Sorry I can't be of more help to you.
One or the other is not in the right place I feel as the code is correct and you said it works fine from desktop.
Sorry I can't be of more help to you.
rluka
05-06-2006, 04:40 AM
Thanks again..Ron L
webdeveloper.com
Copyright Internet.com Inc., All Rights Reserved.
Copyright Internet.com Inc., All Rights Reserved.