|
CSS - Linking Between Divs
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? Similar TutorialsOk, so I've learned to stay away from tables when you don't need them, and I have an instance where this is the case. I have a container div that has a header, content and a footer. On my home page, I have to divs next to each other with the same height and a div below them towards the right. To simplify my problem, look at this example. Code:
<html>
<body>
<div style="float:right">
Hello there!
</div>
<hr>
</body>
</html>
If there's a "float:right" on that div, the hr tag below doesn't get pushed down. But if I use relative positioning and don't use the floats, I can't put the two top divs next to each other. The other option is to use absolute positioning, but again content below doesn't get pushed down correctly. It seems that using "clear:both" works, but it seems weird that this has to be done. For example if I have floating divs in a container, I can get them to stretch out the container like so: Code:
<html>
<body>
<div style="border: 1px solid #000; ">
<div style="float:right">
Hello there!<br />
Hello there!<br />
Hello there!<br />
Hello there!<br />
Hello there!<br />
Hello there!<br />
Hello there!<br />
</div>
<div style="clear: both"></div>
</div>
<hr>
</body>
</html>
Am I missing something fundamental here? Is there a better solution? Thanks in advance. Here's the site in Question: http://www.winchps.vic.edu.au It's a standard fixed width floated DIV columns with a wrapper. One thing it does have is a second DIV inside both columns to display the Gradient background over the top of the repeated background. It works perfect in Firefox & IE7 (with a tweak) but IE6 mkes the sidebar nested div drop below the original sidebar DIV click here for a screenshot for those lucky enough not to have IE6. Here's the CSS code for the basic layout: Code:
body {
font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif;
font-size: 12px;
text-align: center;
margin: 0px 0px 60px 0px;
padding:0px;
border: 0;
line-height: 2;
}
#header {
width: 802px;
}
#wrapper {
width: 802px;
margin:0px;
padding: 0px;
text-align: left;
margin: 0 auto;
background: url(images/bodybg.jpg) center repeat-y;
}
#content {
padding: 0px;
margin: 0px;
}
#maingrad {
background: url(images/winchcontentgrad.jpg) top left repeat-x;
padding: 10px;
}
#main {
width: 589px;
float: right;
background: url(images/winchcontentbg.jpg) repeat;
border-left: solid 1px #000;
border-right: solid 1px #000;
}
#mainstop {
width: 589px;
float: right;
background: url(images/winchcontentbg.jpg) repeat;
border-left: solid 1px #000;
border-right: solid 1px #000;
border-bottom: solid 1px #000;
font-size: 10px;
}
#sidebargrad {
background: url(images/winchsidebargrad.jpg) top left repeat-x;
padding: 10px 5px 0px 10px;
}
#sidebar {
width: 200px;
float: left;
background: url(images/winchsidebg.jpg) repeat;
line-height: 2;
font-size: 14px;
border-left: solid 1px #000;
border-right: solid 1px #000;
}
I obviously need to put a conditional comment in there, same for what I did for the minor IE7 tweak, but I'm struggling to suss out what's causing it, I haven't found the specific issue on any of the regular sites (PIE etc). Anyone got any ideas? Centering DIVs inside other DIVs in Firefox? Can it be done in a straight forward way? Setting the inner DIVs float to none seemed to work for IE but not FF. The Example I've read a bunch about how div's won't stretch to accomidate div's inside of them if they overrun the height/min-height set for the container div. How do I get around this? You can see the skeleton of the site above. It's fine unless you resize the window smaller than the content. Alright, I've been working on my own custom border box for a while and I've almost got it, but it has a few problems still. How I do it is I have one div that contains it all (.box) that defines the height and width of the whole box. Then I have three boxRows to lay out the images, and then I define how three cells in each of those rows should behave, very much like how custom borders used to be done with tables. Here are the problems: In both firefox and internet explorer, the bottom row and the far right column actually appear OUTSIDE the .box containing box. There are two additional problems in internet explorer. First, the middle row handles the auto height differently and only expands about 10px instead of the height of the containing box. The second is that the whole middle row for some reason appears to be pushed to the right by about 16px. Any help would be appreciated. Here's the code: HTML: Code: <html> <head> <link rel="stylesheet" type="text/css" href="reset.css" /> <link rel="stylesheet" type="text/css" href="testBox.css"> </head> <body> <div class="box"> <div class="boxRowTop"> <div class="boxCellLeft"></div> <div class="boxCellMiddle"></div> <div class="boxCellRight"></div> </div> <div class="boxRowMiddle"> <div class="boxCellLeft"></div> <div class="boxCellMiddle"></div> <div class="boxCellRight"></div> </div> <div class="boxRowBottom"> <div class="boxCellLeft"></div> <div class="boxCellMiddle"></div> <div class="boxCellRight"></div> </div> </body> </html> And here is the layout css file: Code: /* Box classes */
.box {
background: rgb(120,120,120);
height: 200px;
width: 500px;
}
.boxRowTop {
height: 16px;
position: relative;
width:%100;
}
.boxRowMiddle {
height: auto;
width:%100;
position: relative;
}
.boxRowBottom {
height: 16px;
width:%100;
position: relative;
}
.boxCellLeft {
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 16px;
}
.boxCellMiddle {
height: 100%;
margin-left: 16px;
margin-right: 16px;
width: auto;
}
.boxCellRight {
height: 100%;
left: 100%;
position: absolute;
top: 0;
width: 16px;
}
/* Define Cell Backgrounds/Images */
.boxRowTop .boxCellLeft {
background: url(../LandingImages/topleft_circ_corner.png) no-repeat;
}
.boxRowTop .boxCellMiddle {
background: url(../LandingImages/top_border.png) repeat-x;
}
.boxRowTop .boxCellRight {
background: url(../LandingImages/topright_circ_corner.png) no-repeat;
}
.boxRowMiddle .boxCellLeft {
background: url(../LandingImages/left_border.png) repeat-y;
}
.boxRowMiddle .boxCellMiddle {
background: rgb(255,255,255);
}
.boxRowMiddle .boxCellRight {
background: url(../LandingImages/right_border.png) repeat-y;
}
.boxRowBottom .boxCellLeft {
background: url(../LandingImages/bottomleft_circ_corner.png) no-repeat;
}
.boxRowBottom .boxCellMiddle {
background: url(../LandingImages/bottom_border.png) repeat-x;
}
.boxRowBottom .boxCellRight {
background: url(../LandingImages/bottomright_circ_corner.png) no-repeat;
}
And last, the reset CSS, which I don't think has anything to do with the problems because if I take it out it still has them. Code: html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, tt, var, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, caption
{
margin:0;
padding:0;
border:0;
vertical-align:baseline;
}
* {font-size:1em; font-family: inherit;}
:focus {outline:none;}
body { font-size: 62.5%; line-height:normal; font-family: Arial, Sans-Serif; color:Black; } /* 62.5% (10px), 75% (12px), 87.5% (14px), 100% (16px) */
p { margin: 0 0 1.2em 0; }
a { color:#ff0000; text-decoration:none; }
a:link { color:#ff0000; text-decoration:nonee; }
a:visited { color:#ff0000; text-decoration:none; }
a:active { color:#ff0000; text-decoration:none; }
a:hover { color:#ff0000; text-decoration:none; }
a.h1,a.h2,a.h3,a.h4,a.h5,a.h6,h1,h2,h3,h4,h5,h6
{
font-weight:bold;
display:block;
text-decoration:none;
color:Black;
}
h1, a.h1, a:link.h1, a:visited.h1, a:active.h1, a:hover.h1 { color:Black; text-decoration:none; font-size: 2.00em; }
h2, a.h2, a:link.h2, a:visited.h2, a:active.h2, a:hover.h2 { color:Black; text-decoration:none; font-size: 1.75em; } /* this is normally skipped? 1.50em */
h3, a.h3, a:link.h3, a:visited.h3, a:active.h3, a:hover.h3 { color:Black; text-decoration:none; font-size: 1.50em; } /* 1.25em */
h4, a.h4, a:link.h4, a:visited.h4, a:active.h4, a:hover.h4 { color:Black; text-decoration:none; font-size: 1.25em; } /* 1.00em */
h5, a.h5, a:link.h5, a:visited.h5, a:active.h5, a:hover.h5 { color:Black; text-decoration:none; font-size: 1.00em; } /* 0.75em */
h6, a.h6, a:link.h6, a:visited.h6, a:active.h6, a:hover.h6 { color:Black; text-decoration:none; font-size: 0.75em; } /* 0.66em WTF? */
fieldset { border:solid 1px; padding:0.25em 0.5em 0.75em; margin: 0 0 1.5em; }
legend { margin:0 0 0 2em; padding:0 1em; }
textarea, input, select { border:solid 1px #ccc; margin:0; padding:0; }
textarea, input { padding:0 .2em; }
input:focus,textarea:focus,select:focus { border:solid 1px black; }
small { font-size:.9em; }
ul, ol, dl { position: relative; padding:0 0 0 1.5em; margin:1.5em 0; }
dir, menu { margin:1.5em 0; }
/* nested lists have no top/bottom margins */
ul ul, ul ol, ul dir, ul menu, ul dl,
ol ul, ol ol, ol dir, ol menu, ol dl,
dl ul, dl ol, dl dir, dl menu, dl dl,
dir ul, dir ol, dir dir, dir menu, dir dl,
menu ul, menu ol, menu dir, menu menu, menu dl
{
margin:0;
padding: 0 0 0 1.5em;
}
hr { margin:0.75em 0; padding:0; }
Any help would be GREATLY appreciated, as I've been working on this for a while! Thanks! Hello 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. 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 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? 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? 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 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 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 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? 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 |
|||||||