CSS - Linking A .css File To A Php Script

I have two divs on my page.

Left and Right

Is there any way that I could get a link in the Right Div to open on the Left Div?

On my site, I'm putting the main site navigation underneath the main pic. And I have 10 images(every single one is same height), and the images include:

Left Beginning Spacer
4 Link Images
4 Mouse Over'd Images(same as previous 4, only colored diff for when the mouse is over)
Right Ending Spacer

But, when I go to do them all, the linked images get bigger that the spacer image, so it doesn't line up(I even defined the width and height in the img src tag). The linked images seem to even have a border around them. And finally, to boast the last spacer isn't even on the same line as the rest of the images. >.< Could someone help me out here please?

I'm not sure there is something in CSS that can help me achieve what I want, but here's the link:

http://s125392025.websitehome.co.uk/layout2.html

Please help.

hello, i am new here, and this is my first post. i am working on adding css to my html website, so i was suggested to create a different .css file and put all the styles in there, and then just add a link in my .html files to my .css file. the link from the pages to the .css file is fine, i checked it over but here it is, please point out if i missed something. (by the way all my .html and my .css files are in the same directory.) here it is:

<link type="text/css" rel="stylesheet" href="style.css">

so my question is, how do i get the changes from when i save something in the .css file to go into the .html files. just for an example, could someone tell me how to make the background be black, and the text be white? please put it in html form. right now i have this in the .css file but nothing is changing:

body { color: white; background: black; }

is that right? or am i missing something?

Thanks for the help.

I have been going through the tutorials and forums learning CSS. Everything works and makes sense until I get to the lesson for setting up a div box.

For some reason I am missing something here. None of the lessons or forums even address or talk about how to connect or input the external div CSS into the web page. They only show the external CSS code or internal CSS code. They never show what is required in the HTML to pull in the external div CSS.

Even when I copy and paste the code from the different lessons I can not get a div box unless I put it in-line in the HTML code with a <style> tag, which defeats the concept of using an external CSS for the div box.

How do I link an external CSS div.box to the default.htm web page?

What coding is required in the external CSS and in the default.htm HTML to have the div.box brought into the web page?

Does the div.box code have to have its own .css file to work?

How do I get the external CSS code for the div input to the HTML?

Thanks

Hi Guys,

I was just wondering if it is possible to link to a div layer which is on another page but is actually a switchable div (hiding divs and showing divs in the same exact place).

For example the word 'Link' from one page linking to a layer on the next page called 'Layer'. The 'Layer' link being a Div which is currently hidden but gets shown because of the link?

Would it be something like '(/example.htm#Layer?)

Please help!

Thanks,

Mark

Hi all

I am trying to take a link's ability to link away from a link by converting it to normal text

ie, I am working on pagination for my blog and the navigation looks like this

<< Prev | 1-5 | 6-10 | Next>>

its all done in php that i got from a book, but anyway, the script references a span class="inactive" so that when you are viewing 1-5 both the << Prev and 1-5 links are grayed out, since there is page previous to the page that displays 1-5 there is no need for that to be a link, nor is there a need for 1-5 to be a link since we are already there

what i need is the style that would remove the linking property of those links and i got no ideas, Im bad in php and even worse in css

Thanks in advance

Is there a way to create a simultaneous effect of both linking and onmouseover for two different layers that are stacked in the same position? Meaning ... I have LAYER 1 which would have the "initial image" and the "hot text" that would trigger a rollover (onmouseover) effect for the "new image" to repopulate the same position but in the same or "new" div ... onmouseout, the "new image" would hide and the "initial image and "hot text" div content would reappear ...

I've attempted something of what I wanted, but am still having issues. Any assistance you can provide would be greatly appreciated -- THANKS!

Code:

   <html>
<head>
<title></title>
<style type="text/css">
.hidden {position: absolute; visibility: hidden}
#netcalltext
{
z-index: 1;
position: absolute;
top: 2px;
left: 2px;
}

#d1
{
z-index: 2;
position: absolute;
top: 2px;
left: 2px;
}
</style>
<script language="JavaScript">
<!--
function showIt(obj) {
if (document.getElementById)
{document.getElementById("d1").style.visibility = "visible";}
else
{if (document.layers)
{
document.layers[obj].visibility = "show";}
else
{document.all("d1").style.visibility = "visible";}
}
}
function hideIt(obj) {
if (document.getElementById)
{document.getElementById("d1").style.visibility = "hidden";}
else
{if (document.layers)
{
document.layers[obj].visibility = "hide";}
else
{document.all("d1").style.visibility = "hidden";}
}
}
//-->
</script>
</head>
<body>
<div id="d1" class="hidden"><img src="images/tools-on.jpg" alt="" width="194" height="280" border="0"></div>
<div id="netcalltext"><a href="#" onMouseOver="showIt('d1')" onMouseOut="hideIt('d1')"><img src="images/tools-off.jpg" alt="" width="194" height="280" border="0"></a></div>
</body>
</html>   

Hi all,

I need to link to a stylesheet and have it apply to the page instead of just opening the css.

if thats a bit difficult to understand, lets say for example, for site accessibility, you would have links to 3 types of stylesheets to make the text bigger or smaller... how do you link to the css files without them actually opening the css file?

thanks in advance

Matty

I want to construct a page like this...

Obviously, I could build a 'rigid' page in the old-fashioned way with tables, trs, and tds but I'd like to provide something a bit more flexible with divs that could survive a bit of strectching, changes in font size, etc.

Can you see what I'm getting at?

I'm not looking for a complete solution, just a few pointers as to whether it's doable/worthwhile and how one might approach it.

Help please I'm getting knowhere fast,

I am trying to load stylesheets dependant upon the browser in use. I have read lots on this on the net and in fact most of this code has been borrowed from better people that I.
If I use the stylesheets in a normal hardcoded <LINK...> they work fine. If I put an alert("You are here") in each of the if() statements it runs the code and the correct if() is run for each browser under test. But, there is always a but, the styles are not applied to the document for any browser. In fact the page displays without any styling at all in all of them. I have tried debugging with Mozilla's JavaScript Debugger and on examination the styles are being loaded into the DOM but not applied to the document. It is as if they are being applied to late to take effect.

This is the code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html>
<head>
<meta http-equiv="Content-Language" content="en-gb">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<script language="javascript" src="file:///D:\TestSite\JavaSrc\sniffer2.js"></script>
<script language="javascript"> <!--
if(is_nav) {
document.write('<LINK href="CSS\nav\BasicSite.css" type="text/css"rel="stylesheet">\n');
document.write('<LINK href="CSS\nav\MenuLayout.css" type="text/css" rel="stylesheet">\n');
document.write('<link href="CSS\nav\IndexExtra.css" type="text/css" rel="stylesheet">\n');
}
else if(is_ie) {
alert( "IS IE" )
document.write('<LINK href="CSS\ie\BasicSite.css" type="text/css" rel="stylesheet">\n');
document.write('<LINK href="CSS\ie\MenuLayout.css" type="text/css" rel="stylesheet">\n');
document.write('<link href="CSS\ie\IndexExtra.css" type="text/css rel="stylesheet"">\n');
}
else if(is_moz) {
document.write('<LINK href="CSS\moz\BasicSite.css" type="text/css" rel="stylesheet">\n');
document.write('<LINK href="CSS\moz\MenuLayout.css" type="text/css" rel="stylesheet">\n');
document.write('<link href="CSS\moz\IndexExtra.css" type="text/css rel="stylesheet"">\n');
}
else if(is_opera) {
document.write('<LINK href="CSS\opera\BasicSite.css" type="text/css" rel="stylesheet">\n');
document.write('<LINK href="CSS\opera\MenuLayout.css" type="text/css" rel="stylesheet">\n');
document.write('<link href="CSS\opera\IndexExtra.css" type="text/css rel="stylesheet"">\n');
}
// -->
</script>
</head>
<body>



I hope this is dead obvious to one of you experts.

Thanks in advance

http://www.kafadrian.com/juggernaut/index.html
is what i have so far
I want it to look like:
http://www.kafadrian.com/juggernaut/layout.jpg

The problem im having is that the image links that have mouseover effects dont align (touch) the blue bar below them and apparently in some browsers the image links themselves have gaps between them

I spent hours, and yes im relatively noobish about all this, trying all sorts of different display commands and border/margin commands to try and get rid of any spaces, the way the site is now (10.01.08) is the best i could get it. in IE7 the mouseover images connect horizontally but not vertically with other images.

am i going about this all wrong? my experience in building websites is mostly from the early eras of netscape when IE was new, back when you put stuff in a table a certain way with no cellpadding/spacing/border and everything aligned no problem.

I appreciate any help with this as I undertand it will take time to give me an answer that no only makes sense (to me) but will work.

the code for the site is:

Code:

<!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" />
<title>Juggernaut - Monolith - Order</title>
</head>
<body marginheight="0" marginwidth="0" leftmargin="0" rightmargin="0" topmargin="0">

<script type="text/javascript">
<!--

var image1 = new Image();
image1.src = "news1.jpg";
var image2 = new Image();
image2.src = "news2.jpg";
var image3 = new Image();
image3.src = "news3.jpg";

var image4 = new Image();
image4.src = "roster1.jpg";
var image5 = new Image();
image5.src = "roster2.jpg";
var image6 = new Image();
image6.src = "roster3.jpg";

var image7 = new Image();
image7.src = "forums1.jpg";
var image8 = new Image();
image8.src = "forums2.jpg";
var image9 = new Image();
image9.src = "forums3.jpg";

var image10 = new Image();
image10.src = "files1.jpg";
var image11 = new Image();
image11.src = "files2.jpg";
var image12 = new Image();
image12.src = "files3.jpg";

var image13 = new Image();
image13.src = "info1.jpg";
var image14 = new Image();
image14.src = "info2.jpg";
var image15 = new Image();
image15.src = "info3.jpg";

var image16 = new Image();
image16.src = "founded.jpg";

//-->
</script>
<script type="text/javascript">
<!--

function roll(img_name1, img_src1, img_name2, img_src2)
   {
   document[img_name1].src = img_src1;
   document[img_name2].src = img_src2;
   }

//-->
</script>
<table border="0" cellspacing="0" cellpadding="0" style="margin:0">
  <tr height="34">
    <td rowspan="4">
      <img style="display:block" src="juggernaut.jpg" width="560" height="110"/>
    </td>
    <td>
    </td>
  </tr>
  <tr>
    <td>
      <a href="index.html" style="display:inline-block"
        onmouseover="roll('news','news2.jpg','text','news3.jpg')" onmouseout="roll('news','news1.jpg','text','founded.jpg')">
        <img style="display:inline-block" src="news1.jpg" name="news" width="48" height="48" border="0"/>
      </a>
      <a href="index.html" style="display:inline-block"
        onmouseover="roll('roster','roster2.jpg','text','roster3.jpg')" onmouseout="roll('roster','roster1.jpg','text','founded.jpg')">
        <img style="display:inline-block" src="roster1.jpg" name="roster" width="48" height="48" border="0"/>
      </a>
      <a href="index.html" style="display:inline-block"
        onmouseover="roll('forums','forums2.jpg','text','forums3.jpg')" onmouseout="roll('forums','forums1.jpg','text','founded.jpg')">
        <img style="display:inline-block" src="forums1.jpg" name="forums" width="48" height="48" border="0"/>
      </a>
      <a href="index.html" style="display:inline-block"
        onmouseover="roll('files','files2.jpg','text','files3.jpg')" onmouseout="roll('files','files1.jpg', 'text','founded.jpg')">
        <img style="display:inline-block" src="files1.jpg" name="files" width="48" height="48" border="0"/>
      </a>
      <a href="index.html" style="display:inline-block"
        onmouseover="roll('info','info2.jpg','text','info3.jpg')" onmouseout="roll('info','info1.jpg','text','founded.jpg')">
        <img style="display:inline-block" src="info1.jpg" name="info" width="48" height="48" border="0"/>
      </a>
    </td>
  </tr>
    <tr>
    <td>
      <img style="display:block" src="line_right.jpg" width="240" height="4"/>
    </td>
  </tr>
  <tr>
    <td>
      <img style="display:block" src="founded.jpg" align="right" name="text" width="144" height="20"/>
    </td>
  </tr>
</table>
</body>
</html>

Hi,

I have a question about setting up the Body background-image via a linked external stylesheet.

I have a index.html file and a myStyle.css file. I want to setup the background to load an image file, test.JPG.

When I embed the following in my index.html, I see the background show up:

** inside index.html file **
<BODY STYLE="background-image: url(test.JPG);"> blah </BODY>

BUT, when I define my background in the externally linked myStyle.css file, the background does not load:

** inside myStyle.css file **
BODY { background-image: url(test.JPG); }

** inside index.html file **
<LINK REL="stylesheet" TYPE="text/css" HREF="myStyle.css">
<BODY>
blah
</BODY>
</LINK>

Please help.

thanks!

If I include url(images/blah.gif) in a CSS file in my webroot, and i then load that into a file in a html dir off my roor and run the html from the html folder, is the image supposed to be relative to my css file or my html file? It seems like its relative to the HTM which doesnt seem correct.

I know It would just make sense to move things around but it has to do with robohelp and I think I'm stuck doing it this way for now.

Many of my web pages (CGI) have css styles which have a user defined color present throughout the site. How can i get that varible data back to my site if I refer to it in my css style?

for example, i get a hex color from the user and store it in a global variable C1$=#000000 in my web app.

then in my css definition i assign border color based on the user defined variable like

Code:

.table { border: solid 1pt $C1 }

when i copy that into my css file, the color thing in my tables is no worky. putting it back into my cgi file, it works fine of course. What to do?

thanks,
JOhn