PDA

Click to See Complete Forum and Search --> : borders

rammenas
07-02-2004, 04:35 PM
ok I have a problem with table border,it looks ok in IE "border 1 and color blue" but in netscape and firefox they are just grey,what's up with that??? and btw is there a way to have a verticall scrollbar in the black area without a horizontal so I can ad pictures and stuff? I wish I could do this all in css but thats to hard for me at the moment.
PeOfEo
07-02-2004, 06:41 PM
To do borders use this

style="border:1px solid #000000;"

That is some css for it. I am looking at this and it is pretty nasty, you really should just start using css right away and not try to go back and use css later. www.w3schools.com has some great tutorials. To have a scrolling section use this

<div style="height:500px; width:500px; overflow:auto;">
This content will get a scroll bar when it is bigger
then the specified height and width above,
if it is just text the text will wrap and only a vertical
scroll bar will appear, but if one is needed, like for a large image, a horizontal one will
appear too. But this should give you just a vertical scroll bar
</div>
rammenas
07-03-2004, 05:04 AM
trying with CSS everything fine,but then I don't know how to get rit of the horizontal scroll bar in lower resolutions, any ideas?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head>

<STYLE TYPE="text/css">
<!--
A:link { text-decoration: none }
A:active { text-decoration: none }
A:visited { text-decoration: none }
-->
</STYLE>

<STYLE>
BODY {
scrollbar-arrow-color: #00CCFF;
scrollbar-face-color: #000000;
scrollbar-3dlight-color: #DCDCDC;
scrollbar-highlight-color: #CCCCCC;
scrollbar-shadow-color: #000000;
scrollbar-darkshadow-color: #000000;
scrollbar-track-color: #000000;}
</STYLE>

<title>home</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
//<![CDATA[
<!--
//Disable right mouse click Script
//By Maximus (maximus@nsimail.com) w/ mods by DynamicDrive
//For full source code, visit http://www.dynamicdrive.com
""
var message="There's always another way!";

///////////////////////////////////
function clickIE4(){
if (event.button==2){
alert(message);
return false;
}
}

function clickNS4(e){
if (document.layers||document.getElementById&&!document.all){
if (e.which==2||e.which==3){
alert(message);
return false;
}
}
}

if (document.layers){
document.captureEvents(Event.MOUSEDOWN);
document.onmousedown=clickNS4;
}
else if (document.all&&!document.getElementById){
document.onmousedown=clickIE4;
}

document.oncontextmenu=new Function("alert(message);return false")

// -->
//-->
//]]>
</script>

<STYLE>
#sg-main {
position: absolute;
left: 258px;
top: 50px;
margin: 0px;
padding: 0px;
}
</STYLE>

<STYLE>
#separationV1 {
position: absolute;
left: 17px;
top: 20px;
margin: 0px;
padding: 0px;
background-repeat: repeat;
background-image: url(images/separation.gif);
height: 848px;
width: 4px;
}
</STYLE>

<STYLE>
#separationV2 {
position: absolute;
left: 215px;
top: 20px;
margin: 0px;
padding: 0px;
background-repeat: repeat;
background-image: url(images/separation.gif);
height: 848px;
width: 4px;
}
</STYLE>

<STYLE>
#separationV3 {
position: absolute;
left: 238px;
top: 20px;
margin: 0px;
padding: 0px;
background-repeat: repeat;
background-image: url(images/separation.gif);
height: 848px;
width: 4px;
}
</STYLE>

<STYLE>
#separationV4 {
position: absolute;
left: 658px;
top: 20px;
margin: 0px;
padding: 0px;
background-repeat: repeat;
background-image: url(images/separation.gif);
height: 848px;
width: 4px;
}
</STYLE>

<STYLE>
#separationV5 {
position: absolute;
left: 1234px;
top: 20px;
margin: 0px;
padding: 0px;
background-repeat: repeat;
background-image: url(images/separation.gif);
height: 848px;
width: 4px;
}
</STYLE>

<STYLE>
#blackblue-small {
position: absolute;
left: 221px;
top: 20px;
margin: 0px;
padding: 0px;
background-repeat: repeat;
background-image: url(images/black&blue.gif);
height: 848px;
width: 16px;
}
</STYLE>

<STYLE>
#blackblue-big {
position: absolute;
left: 663px;
top: 20px;
margin: 0px;
padding: 0px;
background-repeat: repeat;
background-image: url(images/black&blue.gif);
height: 848px;
width: 570px;
}
</STYLE>

<STYLE>
#bigscreen {
position: absolute;
left: 265px;
top: 159px;
height: 709px;
width: 370px;
background-color: #000000;
border: 1px solid #000099;
overflow: auto;
}
</STYLE>

</head>

<body bgcolor="#00009E">

<div id="sg-main">
<img alt="sg-main" src="images/sg_main.gif" height="56" width="379" />
</div>

<div id="separationV1">
<img alt="separationV1" src="images/separation.gif" height="4" width="5" />
</div>

<div id="separationV2">
<img alt="separationV2" src="images/separation.gif" height="4" width="5" />
</div>

<div id="separationV3">
<img alt="separationV3" src="images/separation.gif" height="4" width="5" />
</div>

<div id="separationV4">
<img alt="separationV4" src="images/separation.gif" height="4" width="5" />
</div>

<div id="separationV5">
<img alt="separationV5" src="images/separation.gif" height="4" width="5" />
</div>

<div id="blackblue-small">
<img alt="blackblue-small" src="images/black&blue.gif" height="16" width="16" />
</div>

<div id="blackblue-big">
<img alt="blackblue-big" src="images/black&blue.gif" height="16" width="16" />
</div>

<div id="bigscreen">
</div>

</body>
</html>
Fang
07-03-2004, 06:52 AM
You are positioning objects to the far right:
#separationV5 {
position: absolute;
left: 1234px;
.
.
This is giving the scrollbar at most resolutions.
philaweb
07-03-2004, 07:29 AM
One set of STYLE attributes is normally enough to make it work. ;)

You could place the CSS code in an external file, then call it by using the LINK REL command - saves you the cut'n'pasting to and adjustment of umpty number of files.

"Clean" CSS:

<STYLE TYPE="text/css">
<!--
A:link { text-decoration: none }
A:active { text-decoration: none }
A:visited { text-decoration: none }

BODY {
scrollbar-arrow-color: #00CCFF;
scrollbar-face-color: #000000;
scrollbar-3dlight-color: #DCDCDC;
scrollbar-highlight-color: #CCCCCC;
scrollbar-shadow-color: #000000;
scrollbar-darkshadow-color: #000000;
scrollbar-track-color: #000000;}

#sg-main {
position: absolute;
left: 258px;
top: 50px;
margin: 0px;
padding: 0px;
}

#separationV1 {
position: absolute;
left: 17px;
top: 20px;
margin: 0px;
padding: 0px;
background-repeat: repeat;
background-image: url(images/separation.gif);
height: 848px;
width: 4px;
}

#separationV2 {
position: absolute;
left: 215px;
top: 20px;
margin: 0px;
padding: 0px;
background-repeat: repeat;
background-image: url(images/separation.gif);
height: 848px;
width: 4px;
}

#separationV3 {
position: absolute;
left: 238px;
top: 20px;
margin: 0px;
padding: 0px;
background-repeat: repeat;
background-image: url(images/separation.gif);
height: 848px;
width: 4px;
}

#separationV4 {
position: absolute;
left: 658px;
top: 20px;
margin: 0px;
padding: 0px;
background-repeat: repeat;
background-image: url(images/separation.gif);
height: 848px;
width: 4px;
}

#separationV5 {
position: absolute;
left: 1234px;
top: 20px;
margin: 0px;
padding: 0px;
background-repeat: repeat;
background-image: url(images/separation.gif);
height: 848px;
width: 4px;
}

#blackblue-small {
position: absolute;
left: 221px;
top: 20px;
margin: 0px;
padding: 0px;
background-repeat: repeat;
background-image: url(images/black&blue.gif);
height: 848px;
width: 16px;
}

#blackblue-big {
position: absolute;
left: 663px;
top: 20px;
margin: 0px;
padding: 0px;
background-repeat: repeat;
background-image: url(images/black&blue.gif);
height: 848px;
width: 570px;
}

#bigscreen {
position: absolute;
left: 265px;
top: 159px;
height: 709px;
width: 370px;
background-color: #000000;
border: 1px solid #000099;
overflow: auto;
}
-->
</STYLE>
rammenas
07-03-2004, 07:41 AM
thanks guys still learning,..I'll check it out!!!!