|
CSS - Getting Frustrated...
Okay, I am getting frustrated and therefore counterproductive. Perhaps someone else can take a look and let me know what needs to be done...
http://www.triexa.com The top menu, I want all those ul's, li's etc. to ONLY apply to that menu, id nav (its all at END of css file). I can seem to do it multiple ways and have it work in opera but not IE. I need it to work in IE, of course. Thanks in advance Similar TutorialsYeah so I am trying to get the main structure of a site set up and I am struggling mightily with the CSS. I'm simply trying to layout the page with: four divisions: 3 vertical and one horizontal There is a 10px space between top bottom left and right. My problem at the moment is fitting the horizontal division correctly... Here is the css... all divs are nested inside a wrapper div... Code: @CHARSET "UTF-8";
.wrapper{
position: relative;
float: lt;
left: 0px;
width: 100%
margin-bottom: 10px;
padding-right:0px;
margin-right:0px;
background-color: #221526;
}
.left1{
position: relative;
float: left;
left: 10px;
width: 10%;
height: 415px;
background-color: #2C1D30
}
.left2{
position: relative;
float: left;
left: 1px;
width: 80%;
height: 415px;
background-color: #2C1D30
}
.right{
position: relative;
float: right;
right: 10px;
width: 10%;
height: 415px;
background-color: #2C1D30;}
.bottom1{
position: relative;
float:none;
top:415px;
left:10px;
background-color:#2c1d30;
width: 1375px;
right: 10px;
height: 140px;
}
body {
border-width: 0px;
padding: 0px;
margin: 0px;
font-size: 90%;
background-color: #221526
And if I'm approaching the coding in unadvisable ways (using % for example) please let me know... Thanks for the help. Okay, I'm new to CSS and at the moment, for class, we're supposed to be doing CSS with tables. That's probably good, because I can't imagine the frustration level I'd be at if I was doing pure CSS. I have two issues (right now) that I need help with. http://www.esdcar.org/web/test/templateh.shtml http://www.esdcar.org/web/test/stylesh.css The first is the area on the left with the (placeholder) banner ads, using a perl include. No matter what I do, I can't get IE on PCs to apply a font size of 10px to the text under the banners. (Although it does recognize the color.) At home on my Mac, IE does treat it right. I started with the attribute applied to the UL, but when that didn't work, my teacher suggested applying it to the LIs, which I did to no avail, and after that I put the attribute inside the overall ID (#leftads) for that cell, too, just for kicks. Nothing worked, and that was the only suggestion from the teacher; now he's stumped. Okay, I could comment out the text in the .cgi, but that's not really the point. The other question I have is about the box on the right. Getting it to line up how I wanted, with five even LI sections spanning the picture, on every browser, was out of the question and I finally gave up. However, I got it to where it looked okay (not pushing beyond the bg pic, for example) on IE and Safari on my Mac, and IE and FireFox on the school PCs, and I was content -- until I went to work and tried it there. IE on a PC, just like at school, and yet it was all fubared. The header wrapped around and continued under the brown box, and the five LIs pushed way past the image. Does anyone know how I can overcome these issues? Any suggestions appreciated! Well, I've started diving into CSS and I'm pretty intimidated by it. A lot of it seems to go counter the intuition that I could rely on as long as I worked with tables in a WYSIWYG editor, lol... I'm trying to do something with CSS that looks darn simple, but I just can't get it to work! I can't post hyperlinks, it seems. So you'll have to paste this URL of an explanatory picture into the address line yourself img262.imageshack.us/img262/1278/layoutro9.jpg Basically what I need is a two-column design: - column on the left is fixed-width and contains some seperate containers lined up vertically; these should resize (vertically) when content requires - column on the right is supposed to be the widest and also contains seperate containers lined up vertically; initially, the middle one of them is a picture that is resized to fit the browser window. Now it comes: I use javascript to expand the image to full-size when the user clicks it. What I want is that the column on the left is completely unaffected by this, that the picture expands to the RIGHT (going beyond browser window and can be viewed entirely by scrolling with the scrollbars), and that the container below the picture moves down with it and doesn't move below the left column. I've been trying a couple of things but always end up with issues, most probably because I haven't given it enough time. But I'm getting frustrated quickly because this looks SO simple!! Just to be clear: all I need is a CSS layout that arranges the 7 or 8 "boxes" correctly for this purpose. I would be very thankful if someone could show some working code. JoH Hi everyone, this problem has been annoying me for some time now, and I have finally decided to address the issue. but it has only become more annoying! I have a right sidebar on my site which for some reason always aligns any text in it centrally. i have scoured my css for anything that says text-align=centre, but everything is text-align=left nothing is telling it to align centrally! If anyone can spot the problem it would be a huge help!! here is a link to the page i am referencing, onyahead.com/arsenal if need be I can post the css, but there is a lot of it! Im trying to make a link that is based on 2 images, one for the un-hovered or normal state, and the other for the hover state. I just did 2 of these at 3dotmedia.com/redesign and now I'm trying to do the same thing at greedydogkennel.com/redesign but it WILL NOT WORK. I am totally stumped, it has to be something to do with the positioning inside my css I assume... on the page, I want the pictures of the dogs to be normal, but when hovered I have a frosty shaded grey image (as in some kind of lighting) to serve as the hover state..I am masking the a href with a class with a transparent .gif (since SOMETHING has to serve as the object of the anchor yes?) but here is my css: .rock-link {background-image: url(looks/Rock_small_w_frame.jpg); } .rock-link:hover {background-image: url(looks/Rock_small_w_frame-up.jpg); } .suade-link {background-image: url(looks/Suadey_Ladysmall_w_frame.jpg); } .suade-link:hover {background-image: url(looks/Suadey_Ladysmall_w_frame-up.jpg); } and the HTML is as follows: <a href="suade.html" class="suade-link"><img src="looks/seethru2.gif" border="0"/></a> <img src="looks/spacer2.gif" border="0" /> <a href="rock.html" class="rock"><img src="looks/seethru.gif" border="0" /></a></div> but there is nothing that displays, only the transparent .gif on the index page you will not see any images under the heading "The Dogs" because this is where the problem is, but if you click on any of the links you will see the pages where I have not applied the class for the a href to take on the hover states, just so you can see how the images look and where they appear. I have done this so many times, and my code is IDENTICAL at 3dotmedia.com/redesign and it works fine...any help would be GREATLY appreciated...it has to be something Im missing, but WHAT?!?!? thanks. Hi guys! Ok here's the thing, I've tried everything I know and hunted the net trying to find an answer, and just when I think I have, another issue crops up. Sorry about the title but I just don't know what to call what it is I'm trying to do. But it SHOULD be possible, and it SHOULD be really simple, which is frustrating the heck out of me because I cannot get this to work! Here is what I'm trying to do, complete with pictures to help visualize things. Example This shows how I want my site layout to appear. A regular width site so it can be displayed on low res desktops, BUT with extra artwork on the left and right, complete with a couple of flash animations to the sides. Code: http://img708.imageshack.us/img708/2458/layoutstyle.jpg The red outline shows a typical 800x600 display, as you can see, they should only be able to see what's in the center of the page. The dark blue outline shows a much higher resolution display The light blue color shows the extra artwork only revealed to higher resolutions The flash boxes contain flash elements which should remain fixed in those locations regardless of the resolution the user is using (they'd be setup to match the background image, so must not move) The dark blue outline shows how the same site would look on a much higher resolution. Instead of black space to the left or right, or the actual site stretching to fit (not looking for a liquid layout in this case), they get to see the rest of the artwork, plus the flash elements. The purpose of this is so it will look fine on low resolution displays, but also, when viewed on higher resolution displays, will then show the extra artwork instead of blackness. Problems Just when it looks like it might work, I find that each browser displays things incorrectly, pixels, picas, ems, etc. and so on. How do I get it to work across the board? I don't want to be unprofessional and do the "This site should only be viewed in X browser". The flash enabled parts always wrap and refuse to appear off screen, how do I fix this? When I place them, I want them to stay exactly where they are (which is offscreen on a low resolution, but visible on a higher resolution), not bunch up and move out of place. I can get the actual background to appear correctly, so when resizing the browser, it remains fixed in the center and reveals the rest of the artwork both left and right. But other elements simply refuse to behave correctly (see first problem, this happens especially with browsers not rendering the same things the same, such as pixels etc. being done differently in each browser). If you want a real world example of what I'm trying to achieve, please view the following website: Code: http://us.blizzard.com/diablo3/?rhtml=y unfortunately I have no idea what language they used and it looks unreadable to me, so borrowing from view source isn't an option for me in this case (I use Dreamweaver, css and php, and have no understanding of xml or whatever it is they're using, neither do I have the time to learn another language). Is there anyone who can help me here, cause this is REALLY frustrating me now, it should be incredibly simple but it's not, and I feel as if I'm being forced to abandon everyone who doesn't have X display and X browser. Which I don't want to do. P.S. Sorry about the weird links, seems new accounts can't use url's *shrugs*. |
|||||||