|
CSS - Am I Linking My Css Wrong?
Hello all,
I am completely new to web development and am trying to learn by building my own website. The issue I have run into is getting my css to work on my page. HTML: <html> <head> <LINK rel="stylesheet" type="text/css" href="style.css"> <title> The Shore Report </title> </head> <body> <img src="TheShoreReport.jpg" > <img src="Web Background.jpg" > </body> </html> CSS: body { background-color:#b0c4de; } Is there something wrong with my link or what? Similar TutorialsHello I do not know if this is the right forum. I guess I go in here and try. Its a bit of CSS, html question. I have webpage which is devided into three sections. headermain.php main.php footer.php I do have my link to CSS-style sheets in the headermain.php file. The problem is that I am not sure how to link CSS-styles into main.php and footer.php Here is how it looks: The three files and index file. index.php <?php include(".include/headermain.php"); ?> <?php include(".include/main.php"); ?> <?php include(".include/footer.php"); ?> _____________________________________________ headermain.php <!-- start headermain --> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Webdesign for private persons and small companies</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <link href="../CSS/main.css" rel="stylesheet" type="text/css"> </head> <body bgcolor="#003366" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"> <table width="100%" height="90" bgcolor="#000000" border="0" bordercolor="#" cellpadding="0" cellspacing="0"><tr><td align="left" valign="top" width="100%"></td></tr></table> <!-- end headermain --> (there you see a link to CSS) ___________________________________________ main.php <!-- start editing main.php --> <center> <!-- start editing --> <table width="700" height="400" border="0" cellpadding="0" cellspacing="0"> <tr> <td align="left" valign="top" bgcolor="#999999" class="main">Site under development. </td> </tr> </table> <!-- end editing main.php --> </center> ________________________________________________ Footer.php has pretty much the same as main. My question is how to include the CSS-Style sheets fot the main.php file that I made? I will try some actions and maybe wait for an answer ... Thank you very much indeed for all help. 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? 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. Hello I know nothing about web pages but I have a class assignment to create a clothing website displaying the different types of clothing when you click on the gender button. My question is how can I add the different images after selecting the button. For example I have a menu button for accessories and want to display several pics of the accessories also showing that the quantity of the item. Please help if you can. Thanks 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. if i upload a load of different fonts to my web server, i presume i need to link them to CSS, before i can use them. how do i do this? if not, what do i need to do instead? 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 I need some help in linking the image file to css... I have my html page in root folder(project file), css file in "root/css" folder and my image file(bg.jpg) in "root/image" folder. I can link my css file to the html page. But the thing is everything working except the image property in css. i have to link the root/image/bg.jpg to css file. I used(obviously i know it wont work) the following code: #innercover{backgroud:url(images/bg.jpg)} i knew this code will search for the images folder in the current position(css folder) and so its not working... So would you please suggest me the right way to link the image file? Hello everyone. I want to link a .css file to my php script. I tried ti include the .cc file but it gave me an error about include_path. I made sure the pathname was correct and it didn't work. Does anyone have any ideas? 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! Hi be gentle with me im new I am trying to put a backgroung image in my div the code i have used is below, in my styles file i have .backgroundbox { background-attachment: fixed; background-image: url(backpat1.png); background-repeat: no-repeat; background-position:top; height:600px; width:900px; position:relative; background-position: top left; top: 0px; left:0px;} and in the body i have <div class="biggestcolumn" "backpat1" align="center"> if someone could please tell me what ive done wrong. On my website IE6 is rendering a menu bar with side blocks (the 2nd green bar down in the header area). See it here. Can anyone advise a work-around? Thanks I have a DIV which is styled to have a bottom border. Nested inside of this DIV is another DIV, which defaults to display:none, but I'd like to use JavaScript to turn it to display:block. When this happens, it works fine, but the bottom border for the parent DIV does not encapsulate the nested DIV as I would I assume it should. Am I totally missing something here, or is this just standard behavior? Here's the code. There is no other styling. Code:
<style type="text/css">
.multiCheck {
padding:5px;
margin:10px 0;
border-top:dotted 2px #CCCCCC;
border-bottom:dotted 2px #CCCCCC;
}
.multiCheck .title {
padding:5px;
font-size:1.2em;
color:#003366;
font-weight:bold;
}
.multiCheck .checkBox {
margin-left:10px;
}
</style>
</head>
<body>
<div class="multiCheck"><div class="title"><input type="checkbox" name="mp_arg2_toggle" onClick="document.getElementById('newsLocations').style.display='block';" value="location"/> Location News:</div>
<div class="checkBox" id="newsLocations" style="display:none;">
<div style="float:left; width:150px;">
<input type="checkbox" name="mp_arg2[]" value="27" onClick="populateTitle(this,'mp_arg1');"/> Location<br/>
<input type="checkbox" name="mp_arg2[]" value="25" onClick="populateTitle(this,'mp_arg1');"/> Location<br/>
<input type="checkbox" name="mp_arg2[]" value="19" onClick="populateTitle(this,'mp_arg1');"/> Location<br/>
<input type="checkbox" name="mp_arg2[]" value="99" onClick="populateTitle(this,'mp_arg1');"/> Location<br/>
<input type="checkbox" name="mp_arg2[]" value="20" onClick="populateTitle(this,'mp_arg1');"/> Location<br/>
<input type="checkbox" name="mp_arg2[]" value="2" onClick="populateTitle(this,'mp_arg1');"/> Location<br/>
<input type="checkbox" name="mp_arg2[]" value="1" onClick="populateTitle(this,'mp_arg1');"/> Location<br/>
<input type="checkbox" name="mp_arg2[]" value="3" onClick="populateTitle(this,'mp_arg1');"/> Location<br/>
<input type="checkbox" name="mp_arg2[]" value="4" onClick="populateTitle(this,'mp_arg1');"/> Location<br/>
<input type="checkbox" name="mp_arg2[]" value="26" onClick="populateTitle(this,'mp_arg1');"/> Location<br/>
</div>
<div style="float:left; width:150px;">
<input type="checkbox" name="mp_arg2[]" value="21" onClick="populateTitle(this,'mp_arg1');"/> Location<br/>
<input type="checkbox" name="mp_arg2[]" value="5" onClick="populateTitle(this,'mp_arg1');"/> Location<br/>
<input type="checkbox" name="mp_arg2[]" value="6" onClick="populateTitle(this,'mp_arg1');"/> Location<br/>
<input type="checkbox" name="mp_arg2[]" value="22" onClick="populateTitle(this,'mp_arg1');"/> Location<br/>
<input type="checkbox" name="mp_arg2[]" value="7" onClick="populateTitle(this,'mp_arg1');"/> Location<br/>
<input type="checkbox" name="mp_arg2[]" value="8" onClick="populateTitle(this,'mp_arg1');"/> Location<br/>
<input type="checkbox" name="mp_arg2[]" value="9" onClick="populateTitle(this,'mp_arg1');"/> Location<br/>
<input type="checkbox" name="mp_arg2[]" value="10" onClick="populateTitle(this,'mp_arg1');"/> Location<br/>
<input type="checkbox" name="mp_arg2[]" value="17" onClick="populateTitle(this,'mp_arg1');"/> Location<br/>
<input type="checkbox" name="mp_arg2[]" value="11" onClick="populateTitle(this,'mp_arg1');"/> Location<br/>
</div>
<div style="float:left; width:150px;">
<input type="checkbox" name="mp_arg2[]" value="24" onClick="populateTitle(this,'mp_arg1');"/> Location<br/>
<input type="checkbox" name="mp_arg2[]" value="12" onClick="populateTitle(this,'mp_arg1');"/> Location<br/>
<input type="checkbox" name="mp_arg2[]" value="23" onClick="populateTitle(this,'mp_arg1');"/> Location<br/>
<input type="checkbox" name="mp_arg2[]" value="13" onClick="populateTitle(this,'mp_arg1');"/> Location<br/>
<input type="checkbox" name="mp_arg2[]" value="14" onClick="populateTitle(this,'mp_arg1');"/> Location<br/>
<input type="checkbox" name="mp_arg2[]" value="15" onClick="populateTitle(this,'mp_arg1');"/> Location<br/>
<input type="checkbox" name="mp_arg2[]" value="16" onClick="populateTitle(this,'mp_arg1');"/> Location<br/>
<input type="checkbox" name="mp_arg2[]" value="18" onClick="populateTitle(this,'mp_arg1');"/> Location<br/>
</div>
</div></div>
Thanks in advance, Colin |
|||||||