|
CSS - Site Redesign In Xhtml/css... So Close Yet So Far Away
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 Similar TutorialsHi all, Home Page. Blog page. Site CSS file here. Hi all, could I get some help? There's a few things, and if we can do one thing at a time, I'd appreciate it. Ok, item 1, and this is in Firefox. Have a look at the Home Page. Then, have a look at the Blog page. Notice on the Blog page that "Navigation" is a few pixels too far to the right, and also a few pixels low compared to the Home page. Why? They're in the same CSS class. I don't understand why the right side in the blog is off like this. I'd appreciate any advice! Thank you, Chris Would it be worth it to redesign this site (http://www.innerspect.net/) using CSS only for the layout, instead of tables? Making a few things look cleaner as well (Fonts / layout positions / etc)? Could someone give me tips for doing this. Thanks. (i.e. use what for the main body, something inside that nested for the left side, right, etc.)? Anyone intrested in redo'ing a site into CSS? [link removed] I just want it remade (I have all the graphics and such) I want to use CSS and style sheets to the fullest extent. LMK 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; } I 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 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 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'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 I hope one of you can help, as this is driving me mad. I've got a div that I'm using to display a background colour that has a fixed width and height="100%" (I'm having a problem with the hieght as well but I'm confident I can sort that), as soon as I change the declaration at the top of the page from the HTML 4.01 Transitional to the XHTML 1.0 Transitional the div disappears, why? Cheers, Ellroy 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 I am developing websites using ASP.NET and C# for the code-behind. I just started using css design and I realized after trying to validate my rendered pages that some things in ASP.NET would be VERY difficult to make completely valid. IE: ASP.NET automatically renders this piece of code everytime the page is rendered: Code:
<script language="javascript">
<!--
function __doPostBack(eventTarget, eventArgument) {
var theform;
if (window.navigator.appName.toLowerCase().indexOf("netscape") > -1) {
theform = document.forms["frm"];
}
else {
theform = document.frm;
}
theform.__EVENTTARGET.value = eventTarget.split("$").join(":");
theform.__EVENTARGUMENT.value = eventArgument;
theform.submit();
}
// -->
</script>
That right there is invalid due to the fact that it does not have type="text/javascript" in the <script>. There are many other instances of this that I won't go into detail. In order to fix this you have to override ASP.NET's page rendering methods and do a Regex! thats right, a regex on EACH line of code to replace the line above with valid XHTML. This can become VERY inefficient if you are serving 30+ pages a second. My question is this: at this point is it really worth the performance hit on my web server to make my asp.net sites XHTML compliant? on a side note, I would like to bludgeon the MS designer that wrote these chunks of code into ASP.NET!@!$%#$ thanks! Hello, I was just wondering how XHTML and CSS works within data-driven websites. I am new to developing database driven sites and need to develop one that uses XHTML and CSS formatting for content as this is what the company I work is aiming towards, due to web accessibility requirements. Does anybody know of any good books/resources that cover developing database driven (php/mysql) websites and implementing XHTML/CSS from within these sites. Would I be right to say that an area for the database content is created in the page which is written in XHTML? if this is correct does this area link to the CSS? Any help would be gratefully appreciated.... Thanks, Andy I've seen several examples of how to emulate frames using CSS, but I haven't seen anywhere explain how to create "frames" without having to add the entire frame code to every page in which it appears. With frames, I used to be able to create a menu which would appear throughout my site. I would modify the one, single menu.html file, and the changes would be visible throughout the site. How can I do this using the CSS-emulated frames? Thanks I am building a new navigation menu which works fine as you can see below: http://www.hotlinkhosting.com/test/menu.php However, the following version does not: http://www.hotlinkhosting.com/test/menu.php?. The difference between the two is that the first one doesn't have a doctype set. The second version has a xhtml doctype. All my documents are written in xhtml so it must be done. I see that the problem occurs with my resizing of the <h1> and <h2> tags with css. After resizing the space the heading tags normaly take up is still their. Feel free to take a look at the source code and I hope you can help. Btw, I know the nav menu doesn't look right in ie, but that isn't my fault now is it? I can't help it ie can't read code correctly. Anyways After I get the menu working with "real" browsers I'll fix the ie errors. Hi, I want to validate my page to XHTML 1.1, but to do that I need to remove border="0" (Only used on two header images). I have tried putting border-style:none in my CSS in EVERY place I could think of, but it just doesn't work. My css is he http://www.planetphillip.com/style.css One other thing, when I remove the border="0" code, IE6 vertically re-aligns the header images. Would somebody be kind enough to explain why. BTW the site in question is: http://www.planetphillip.com/ TIA Phillip I'm having some serious difficulties... but not the standard, "what's wrong with my code", everything validates properly. Seperately... I really dislike linking outside of a forum to describe a situation... but in this scenario I think it is the only feasible way to explain it. The template that I have created for my website validates as, xhtml 1.1 -- tentatively as do all other documents that validate against the formal parsing. See the following to understand my situation. EDIT: Validation of my pages template in html format. - yay! it validates as XHTML 1.1 EDIT: Validation of my pages stylesheet - yay! it validates as CSS 2.0 EDIT: Validation of them both together returns the following: - Boooo! It won't validate and also tells me: Code: "Please, validate your XML document first! Line 2 Column 3 The markup declarations contained or pointed to by the document type declaration must be well-formed. " I would have thought that these things are dependent on eachother. Does it make sense that something can pass a XHTML compliant, but then be formed badly in such a way that a formal parser would read it wrong with respect to CSS? Is it because of my comments? If you look at the code of the page I have detailed a few things that I thought were important. |
|||||||