|
CSS - Css Beginner Overwhelmed And Getting Frustrated Quickly :)
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 Similar TutorialsOkay, 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 Yeah 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! 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*. So here is my current code: Code: body {
color: gold;
background-color: black;
}
#main {
align: center;
}
#header {
width: 600px;
height: 150px;
border: 1px solid;
background-image: url('http://localhost/web/css/images/header.jpg');
}
#links {
width: 600px;
}
#links ul {
vertical-align: center;
}
#links ul li {
padding-left: 10%;
display: inline;
}
#content {
border: 1px solid;
text-align: center;
width: 600px;
}
As the title said, I am a complete beginner to CSS, so any criticism on my code is always welcome. The HTML to go along with this: Code: <html> <head> <title>Test Corp Site</title> <link rel="stylesheet" type="text/css" href="corp.css" /> </head> <body> <div align="center"> <div id="header"></div> <div id="links"> <ul> <li>Home</li> <li>Link 2</li> <li>Link 3</li> <li>Link 4</li> </ul> <div id="content"> <h1>Testing</h1> <p>This is just a test to see if I can actually design the corp website!</p> </div> </div> </body> </html> Screenshot That's essentially what it creates. My question is this: If you look at where the supposable links are supposed to go, you'll see that they are slightly crooked, more off to the right. Well I want them to be exactly centered. As you can see the div layer is defined as being only 600px wide, so I want the links to be centered inside that 600px box and retain their padding at the same time. I have tried using things like vertical-align but I can't seem to get it to center correctly. What am I doing wrong? Hello all, this is my first post! I hope I will be able to learn and contribute. first off, im a programmer, and I want to start making web sites! My websites will be simple, so what I am looking for is: ***important note: I am only looking for a simple 3 column + header + footer layout. The most versatile layout - whether it is pure css, or minimal tables - the layout that will work with the maximum possible amount browsers new and old, the most or at least most popular resolutions, whether it is liquid or fixed. A resource or means by which I can test layouts on the available platforms, e.g, IE, mozzila, opera, mac etc. - is there a site you can submit your code to and do this? Thankyou very much for your time, TheLove - youll get some of it! Hello, I just started trying to learn about css and html layouts by following this tutorial he hxxp://www . subcide.com/tutorials/csslayout/page2.aspx This is my webpage: (link removed as issued is resolved) but I'm having issues making the navigation look correct (not repeat and be about 50 px down) Can someone give me a little hand. ? cheers. ps....errrr...I see nothing that I am doing wrong in the forum rules about the urls...... Hi, beginner question. How do I achive this Code: <TABLE BORDER="1" CELLPADDING="5"> in my CSS? Thank you for your help? I'm an HTML+CSS beginner and I'm creating a website from a template. The style sheet of the website defines stuff like headers as suited to the general look and feel off the website. Good. But the website allows me to post articles and the articles (which are written with an HTML editor so they use standard HTML elements) pick up those styles and they look terrible. I think the easiest solution is for me to create some new styles in my CSS specifically for articles. Then, when I post a new article, I would add something to the article's HTML instructing it to use those new article styles instead of the general styles. So, I tried adding this to my CSS file: #article h1 { color:#ffffff; } And I surrounded the HTML of my article with this: <div class="article"> ....the article's HTML </div> But this didn't have any effect on how the <h1> within the article is displayed. What am I doing wrong? I've been working in CSS, man, is it tiresome for a beginner! After much trail and error, I've come up with my first CSS page. Where I'm stuck, is in the area where all the text is. When I put more text into that page, none of the surrounding styles/boxes[?] adjust to the text format (also shown in a link below), and I can't seem to figure out how to center the entire page itself. Sorry, for the stupid questions, I'm a total novice, and can barely understand most of the CSS postings in this forum. Text extending instead of expanding layout: http://rafia.info/css/layers.bad.htm Thanks sincerely, rups27 Nevermind: solved Hi all, Does anyone have any good suggestions for a CSS book? I'd like to buy an all in one, that will teach me CSS. Thanks for any help hi there, i am new to css and creating a gallery. What i want to do is create a medium size pop up when you rollover the thumbnail and have a full size image displayed when the thumbnail is clicked. I have to use lightbox javascript to display full size images, which works ok, but the problem has come trying to get both this and the roll over to work. At the moment i have both elements working, although it produces two thumbnail images. How can i use this code whilst making only one thumbnail appear? <a href="images/cramps/full size/c1.jpg" rel="lightbox" title="Here is the image caption"> <img src="images/cramps/thumbnails/ct1.jpg" border="0" /> </a> <a class="thumbnail" href="#thumb"> <img src="images/cramps/thumbnails/ct1.jpg" border="0" /> <span><img src="images/cramps/medium size/cm1.jpg" /><br /> </span></a> sorry if this is vague, i will answer any questions the best i can, all help appreciated! I'm having a problem with my links becoming deactive within some nested elements. I followed some instruction on creating rounded corner boxes via a tutorial by Andy Budd. Anyway, it all works great except when I wrap link tags around a few pieces of copy. I'm a bit of a beginner still so maybe this is a simple fix but I've spent over a days worth of time now trying to figure it out on my own and can't seem to get it. Just to clear this up, the links work everywhere on the page outside of the "box" element I'll list below and I've double and triple checked that the link within the "box" element is written correctly and it is. The CSS even finds the link and styles it correctly, however, the mouse function seems to be disabled. Does this all make sense? Below is the CSS, any help would be greatly appreciated... This is the code that creates the box and it works correctly... Code: .box {
width:831px;
background:url(../imgs/box-spacer.gif) repeat-y;
}
.box h1 {
background:url(../imgs/box-top.gif) no-repeat left top;
padding-top:40px;
font-weight: normal;
}
.box .last {
background:url(../imgs/box-bottom.gif) no-repeat left bottom;
padding-bottom:60px;
}
.box h1, .box p {
padding-left:60px;
padding-right:60px;
}
And this is the code I used to test that the page is seeing it as a link... Code: .box h1 a:link {
color:#00CCFF;
}
.box h1 a:hover {
color: #FF0066;
}
It changes the color correctly but the hover doesn't work and if you click, it doesn't link you anywhere. Again, the link is written correctly on the page. Can anyone help please? I appreciate it. |
|||||||