|
CSS - Help Close The Gap Please
Please look at www.mts-diesel.com / index.php
For some reason there is a large gap above the footer. I want it to close right in on the carousel you see there. I can't find anything that is causing that gap as it is. I am using a grid 960 template I found on line. #footer{ height:176px; width:960px; margin:0 0 0 0 !important; color: #FFFFFF; background:transparent url(../images/footer_bg.jpg) no-repeat; } Similar TutorialsI have a problem with my floating DIVs... I want to make an "L" layout.. .but it doesn't anchor properly when I resize my screen. My L-shape joins at the top-left hand side of the screen... but, when I maximise my browser window (on Opera and IE) the L "separates" because the "top" of the L is anchored to the right hand side of the screen (width = 100%) (see screenshot 1). Any ideas on how to anchor the top bar so that it doesn't separate? the hole - when browser window is maximised where I want to anchor it I'll release code (css and HTML) on request if it's needed Hi, Is this the correct way to create Open and Close Link with image background? it does not seem to work for me. Image is not displayed properly. Code:
<style type="text/css">
span.open{background-image:url('img/open.gif');background-repeat:no-repeat; width:20px}
span.close{background-image:url('img/close.gif');background-repeat:no-repeat; width:20px}
</style>
<a id="toggleLnk" href="javascript: toggleOpenClose()">Open This<span class="open"></span></a>
function toggleOpenClose() changes the class name and text as follows:
<a id="toggleLnk" href="javascript: toggleOpenClose()">Close This<span class="close"></span></a>
i have got two areas created with css one above the other but there is a large white gap between i have tried playing arond with the CSS file but cant gt them closer together im still only learning css but i thought id be able to do this.... if someone could advise that would be really great... here is the page so you can see what is happeneing http://www.justtaps.com/test/admintemplate.php and this is a link to the css file http://www.justtaps.com/test/css/main.css thanks in advanced to anyone who replies.. RF Hi all, I'm trying to get a pop up css based box (onClick is from an image) to display="none" when a user selects a value from a select box. I have a close link in the pop up, but I've been told that's not good enough..... I have been trying to get the onChange handler to work, but I can't seem to find the right way to access it properly.. If anyone has done something similar, can you please send me your code snippet or direct me to a tutorial that explains how to do this? I'm new to javascript so please be gentle. Oh I guess I should mention that there are around 100 of these boxes and the div id is being created dynamically with ColdFusion.... Thanks! Dave I've looked at other threads to figure out my problem. However, I didn't really find one that matched my tiny problem. But anyways... I made this markup where the div tags change css attributes. Works nicely in Opera and Firefox (and other mozilla based browsers), but the evil IE yet ruinz my dreams. The link to the problem is he http://www.shockcannon.com/beta_test/fb/imagefx.php Here is PART of the region where i want the effect to happen: Code: <div id="ToC">
<table width="390" border="0" cellspacing="0" cellpadding="0"><tr>
<td width="195 align="left valign="top">
<table width="195" border="0" cellpadding="0" cellspacing="0" align="center">
<tr>
<td colspan="2" valign="top" height="16">
<span class="head1">Photoshop</span>
<a href="javascript: idget_alt('photoshop','show');">Show</a> | <a href="javascript: idget_alt('photoshop','hide');">Hide</a>
</td>
</tr>
<tr>
<td height="10" width="10">
<img src="../images/subheading/ball_01.gif" width="10" height="10" alt="">
</td>
<td height="10">
<img src="../images/subheading/ball_02.gif" width="100%" height="1" alt=""></td>
</tr>
<tr id="photoshop">
<td colspan="2" valign="top" class="sub_indent">
<a href="imagefx.php?file=PS_lightning"><div class="toc_sizer"><img src="imagefx/image_display/PS_lightning.gif" width="40" height="40" alt="" align="left" border="1" hspace="3"><strong>Storm Sky</strong><br>Create a electric storm in 5 easy steps.</div></a>
<div class="toc_sizer"><img src="imagefx/image_display/blank.gif" width="40" height="40" alt="" align="left" border="1" hspace="3"><strong>TV Scanlines</strong><br>Enhance your image by adding a TV-feel to it (FW version, as well).</div>
...and here is the css region: Code: /* Sub Atttributes */
.sub_indent {
padding-left: 10px;
}
.toc_sizer {
width: 195px;
height: 55px;
}
#ToC strong { /* Table of content mini title colorer */
color: #999966;
font-size: 11px;
}
#ToC div { /* Table of content mini title colorer */
color: #CCCCCC;
border: 1px solid #333333;
padding: 1px 1px 1px 1px;
}
#ToC div:hover, #ToC div.sfhover a { /* Table of content mini title colorer */
background-color: #444444;
border: 1px dotted #666666;
}
Any guesses? Thankz! I need a popup auto close in 3 second to show result is true. I try it in javascript,but no border is impossible in my ie8. I need it in css. Send me some solutions. THank all Hello everyone, At the moment I am trying to achieve a re-design of my website (http://www.madewithpixels.co.uk) in pure XHTML/CSS. After many hours of tweaking and a little bit of help here and there, I now have a version that almost exactly matches my original html design save for a couple of issues. I'm aiming to have a fixed sized header, 2 content boxes that fill the available height of the browser window and and a footer that sticks to the bottom of the browser, I'm so very nearly there, except somethings not quite right.... I can get the container expanding in height with the browser window no problem, by setting the height attributes in the CSS and the height of the DIV in the html to 100% height ... except it's TOO big, the footer is waaay down the bottom and requires me to scroll down to it (not what i want)....AND... it doesnt work in mozilla... so, after a bit more tweaking, I changed the %'s for em's and now mozilla works correctly... so far so good, now to get the content boxes and the footer to remain in view all the time.... easy i think, just play about with the height attributes in the CSS and the DIV and everthing should be fairly straightforward. But no! it doesnt work, whatever i do, i cannot get the main content coloumns and the footer to remain in view and fit to 100% height of the browser at the same time, I've tried every combination of % and EM's that I can think of, and can acheive both effects, but not at the same time. also, in IE I have about 10px of white above the footer that i cant eliminate... If anyone can give me an explanation as to what is happening (im sure the two problems are related) I'd be very grateful. I've been tweaking this code for two days now and am getting nowhere. i'm getting closer all the time, i just need to understand whats happening here and I reckon i'll be ready to start putting the rest of the elements in like the navigation etc Thanks very much to anyone who has the time to make a suggestion, its very much appreciated. For reference, you can see the latest version he http://www.madewithpixels.co.uk/sandbox/latest.htm cheers Mike I am using the code shown he http://webdesign.about.com/od/css/a/aa072406.htm Code:
.container {background:#ccc; color:#fff; margin:0 15px;}
.rtop, .rbottom{
display:block;
background:#fff;
}
.rtop *, .rbottom *{
display: block;
height: 1px;
overflow: hidden;
background:#ccc;
}
.r1{margin: 0 5px}
.r2{margin: 0 3px}
.r3{margin: 0 2px}
.r4{
margin: 0 1px;
height: 2px
}
Code: <div class="container"> <b class="rtop"><b class="r1"></b> <b class="r2"></b> <b class="r3"></b> <b class="r4"></b></b> CONTENTS GOES HERE <b class="rbottom"><b class="r4"></b> <b class="r3"></b> <b class="r2"></b> <b class="r1"></b></b> </div> the code works ok, but i would like it tweaked so the text is not so close the the egdes, the top and bottom seems ok but it is the left and right margins that are too close to the edges, can these inner margins be increased so the text is not so close? thanks in advance for your help |
|||||||