|
CSS - Optimizing And Fixing
Ok, I have been working now for 2 days on a new testsite. Its far from done but I need someone with a fresh look to help me fix and optimize some things
* The top menu is supposed to be white -->.vise in the css, but is not....I am missing something. * The bullets in the two right boxes dont appear in FF but do appear correctly in IE ?! Anything else ya see, let me know. I am very apreciate for help URL = http://www.serbia-today.com/test/testindex.php Similar Tutorialsthis was my target I got a image with two transparant shapes. Behind those shapes I would like to show 2 other images. |-------1-------| | |-----| |----| | | |...2..| |..3..| | | |____| |____| | |_____________| Image 1 should be on top z-Index Image 2 should under image 1, a part of the image should be visible. Image 3 should under image 1, a part of the image should be visible. Image 2 and 3 should be dynamically replaceable. My solution The image in front has transparant spaces at 20,40 and 20,120 both 60,60 sized. Each Image do have a offset, in case a part of the image should be displayed not starting from 0,0. Code: This is a drawing. _____1_____ | _____ | | | | | | |..2..| | | |_____| | |__________| 1. whole image ( should be bigger then 60,60 ). 2. the part that I want to show ( 60, 60 ). With javascript I can hide/unhide the images and I use the imageLn or imageRn as selector id I hope you can use it also. My Style Code: #headerContainer {
float: left;
position: relative;
z-index:4;
width: 200px;
height: 100px }
#headerImageLeft {
position: absolute;
z-index: -1;
top: 20px;
left: 40px;
width: 60px;
height: 60px;
display: inline }
#headerImageRight {
left: 120px;
top: 20px;
width: 60px;
height: 60px;
z-index:-2;
position: absolute;
display: inline;
}
Html code Code: <td> <div id="headerContainer"> <img src="header-kop-test.gif" alt="" width = "200" height="100" /> <div id="headerImageLeft" > <div id="imageL1" style="top:-8px;left:-20px;position:absolute;"> <img src="header-links-test.gif" alt="" /> </div> <div id="imageL2" style="top:-10px;left:-10px;position:absolute;"> <img src="header-links-test2.gif" alt="" /> </div> </div> <div id="headerImageRight" > <div id="imageR1" style="top:-30px;left:0px;position:absolute;"> <img src="header-rechts-test.gif" alt="" /> </div> <div id="imageR2" style="top:-10px;left:-18px;position:absolute;"> <img src="header-rechts-test2.gif" alt="" /> </div> </div> </div> </td> My questions: Can I optimize this code? Is this working on the most browsers? or are there know issues? Greetz and thanks R Hello, I have a cool jquery rollover script. But I have a problem with the CSS. The CSS for the script has an IMG tag to line the images up correctly. However, when I add the the script and it's CSS to my website, the IMG tag tells ALL images on website to go to the top left corner, and not stay where I originally placed them. Is there a way to modify the IMG tag in the script's CSS so that it only applies to the images in the script and not to affect the other images on my webpage? Here is my code: Code:
<html>
<head>
<title>Untitled</title>
<script type="text/javascript" src="jquery-1.2.6.pack.js"></script>
<script type="text/javascript">
$(function() {
$('.blocks').hover(function() {
$(this).children('.front').stop().animate({ "top" : '300px'}, 700);
}, function() {
$(this).children('.front').stop().animate({ "top" : '0'}, 400);
});
});
</script>
<style type="text/css">
#three {
width: 850px;
text-align: center;
margin: auto;
}
.blocks {
width: 250px;
height: 140px;
position: relative;
overflow: hidden;
float: left;
padding: 0 1em;
}
img {
position: absolute;
top: 0; left: 0;
}
</style>
</head>
<body>
<div id="three">
<a href="http://www.google.com" class="blocks">
<img src="http://www.loriandersondesigns.com/jquery_8%202/back.jpg" alt="image" border="0"/>
<img src="http://www.loriandersondesigns.com/jquery_8%202/front.jpg" alt="image" class="front" border="0"/></a>
</div>
<p><a href="http://www.google.com" class="blocks">
<img src="http://www.loriandersondesigns.com/jquery_8%202/back.jpg" alt="image" border="0"/>
<img src="http://www.loriandersondesigns.com/jquery_8%202/front.jpg" alt="image" class="front" border="0"/> </a>
<a href="http://www.google.com" class="blocks">
<img src="http://www.loriandersondesigns.com/jquery_8%202/back.jpg" alt="image" border="0"/>
<img src="http://www.loriandersondesigns.com/jquery_8%202/front.jpg" alt="image" class="front" border="0"/></a>
</div>
</div>
</body>
</html>
Thanks for listening! hello forum, I am having problem in fixing my <div> position.The div become visible by an event.plz help me . Regards. Hey guys. I'm having a few issues with CSS flaots and this one seems to be dominant no matter what I try. What I have tried is setting the min-width of a parent div so that when the users resizes the page smaller than 40em(font sizes i think) they start to get horizontal scrolling. Where it happens. There is about 10 colored blocks for changing the colors and also there is a gear with the word networking next to it(or underneath it) What I want to happen. Instead of the colored blocks going underneath each other when the site is resized I want them to stay where they are. I thought setting the parent div(also floated) with min-width:40em; would work. Also I'd like the word networking to not apear underneath the gear. Same issue as the colored blocks. I can't figure out what I'm looking for in google and anything I came up with used position absolute and I don't think that's gona work here. http://142.177.157.241:8080/portfolio4/ I am a web designer, taking on the challenges of some front-end coding. I'm fairly proficient with tables and HTML code, but I am trying a new web site using div layout and heavy CSS. http://neovistaproj.pangin.net Can someone take a look at this code, and provide some insight? I would really appreciate it. Some known issues: 1) the background has a gradient and a dropshadow combination. you can see that it isnt behaving properly, along the right edge. the gradients do not match up, but i know this isnt because the images were cut wrong. it is behaving weird, the way i have the bg and the images overlying it each other. 2) at the bottom, i have a repeating bg image so that the text can be as long as necessary, and still have the proper white bg, with border, and dropshadow. i had to jimmy-rig it a little, and chop my content well into two sections. its a pretty bad solution. any ideas? i will gladly provide any of the source files, for assistance, and will most likely compensate the individual who can provide me a workable template, for this design. THANK YOU! Hey all I'm not very experienced with this. I'm having some troubles with floating divs. The page is here And the css is here The problem is that when I resize the window on IE6/win the divs on the main column fall down to the bottom of the page. Really apreciate your help. Marcello Site here css here IE looks good, but FF is a little messed up... The horizontal nav should be directly below the "header banner", and the vertical nav should be directly below that on the left... FF has quite a bit of overlapping... Also, with the horizontal nav... how would I change it so that it doesn't start until after the width of the vertical nav, but had a background (with a matching border) instead of just white space, and a spreading background on the right (with a matching border)... Thanks Bryan Hi There, I have deisgned a site using css layouts and have built it. It looks exactly how I want it to in Firefox and other browsers that have proper CSS support. I am unsure what I need to do to 'fix' the ie bugs. Can anyone give me any pointers? the test page is he http://www.storesprite.org/layouts/ Thanks Hi I don't know if this is a CSS issue, but how do you allow limit the movement of web pages when you drag IE window. So if its fixed it can be structured so that it can be seen by users who have a resolution of 800 X 600. And if its not fixed, then the page is stretched when you enlarge the window. Cheers Here's the code in question I've attached the background image with the following CSS: Code: body {
background: #DDF19A url("/iris.new/images/bgIris-Blur-green-light.jpg") bottom left fixed no-repeat;
}
It works as expected in IE, but Firefox tends to lag a little bit when you're scrolling, and then snap into place. Same with NN, but Opera 8 is fine. Any thoughts on this? MPEDrummer On my website lakelandedc.com the Side bar is very weird in the way tat if you go down from one topic to the other it snaps back and you lose your place for what you tried to click on. how can i fix this menu or make a new one that will b more user friendly? I was wondering whether there is someway to fix the area of a content in CSS so that it wont expand if too much text was entered, just similar to the html code that fixes the area of the table. i.e. Code: <table style="table-layout: fixed;"> This code lets the table stay in a fixed size no matter how much text is entered... http://lovemeforme.org if you notice, right under the main image, you will see the two purple boxes (under the header and above the content and sidebar).. I don't know how to get rid of them. It has to do with the content and sidebar div's, because when I take out the background color it goes away, but... I can't figure out what to do, i've tried everything. Thanks in advance howdy, i've been workin on a site using some good CSS for the first time. i usually get fed up but it seems to be working pretty well this time. i have one little problem http://www.bnymusic.com/lairsite/ when i check it in firefox, safari and IE on mac there's a little offset between the text area and the main image.... any clue on what is happening and how to fix it? also noticed that in IE on pc the hover over Home doesn't extend into the padded area....but it works sometimes...crazy hopefully this ls small and i will continue to convert to CSS...sadly my photo area stumped me on the CSS and i used a table....oh well. prethanks, B Hi, I'm new to CSS (and Javascript) and am wondering how to fix a <div> overflow on my site (www.logicland.co.uk). here is my CSS code: Quote: /* Font CSS */ body { font-family: Arial, Helvetica, sans-serif; } #footer { font-size: 11px; } /* Layout CSS */ body { padding: 0px; margin: 0px; background-color: #D0DFEF; } #container { margin: 10px; border: 1px solid white; background-color: #6699FF; } #header { padding: 1px 7px 1px 7px; border-bottom: 1px solid white; height: 60px; background-color: #6C86DC; } #columnA { width: 150px; position: relative; float: left; padding: 5px; } #columnB { margin-left: 160px; margin-right: 160px; padding: 10px; border-left: 1px solid white; border-right: 1px solid white; background-color: #CCD5F2; } #columnC { width: 150px; position: relative; float: right; padding: 5px; } #footer { padding: 1px 3px 1px 3px; border-top: 1px solid white; text-align: right; background-color: #DDE3FF; } Is there simply a property I can change to cause the right <div> to push the footer down like the middle column does. Any info would be great. Cheers, BuckRogers01 Hi guys, I have a query, im trying to create the effect, that this site has. Quote: http://www.exigeinternational.com/index.htm i mean that the i want to create the effect that that site has when the page is minimised,i want each side to get smaller instead of everything moving to the left. sorry if it sounds confusing. appeciate all help thanks andy The background is fixed in a wrapper div using background-attachment: fixed. When I place a fixed footer div in the wrapper using position: fixed, the background disappears. If I place the footer outside the wrapper, it appears outside and disconnected from the rest of the content. How do I fix the footer at the bottom without losing the background? Help, please! will some one guide me how I can make the image attached in col2 to be fixed one and should not scroll down though the text in the col1 may scroll down. I have used the following css code. html, body { margin:0; padding:0; border:0; } body { background:#fff url(bg.jpg) center repeat-y; } #container { max-width: 900px; margin: 0 auto; width: 80%; } #col1 { width: 48%; float: left; } #col2 { width: 48%; float: right; } #footer { clear: both; background:#fff; padding:0.75em; } Hi. I need 4 images to be fixed permanently in the corners of the page. I've found some code which half suits me, the upper images are fixed. But the left bottom one is not, and the right bottom one is on a "lower layer" than the text, and it's not acceptable. Could I get the lower images fixed just as the upper ones? or better yet make the text flow "under" the images? Supposing this kind of menu is preserved. http://testingspace.110mb.com/test.htm Hello I am trying to fix my links so they remain in the same place regardless of how large the users window is when they browse the site. I have tried using the following code in my style sheet. h3 { position:absolute; bottom:330px; top:670px; } but the link still moves around when you minimise the browser on the site. Bear in mind I have a think black border as well which runs all around the screen. Any help would be much appreciated. |
|||||||