|
CSS - Help For A Newb?
hi, and thanx for helping me if you do
i am a complete newbie to aligning my images in css ive built the layout in photoshop then sliced it and everything but i cant get any images to stay lined up in mozilla after they work in IE and in any other resolution other then mine (1024x768) if you could help me get started i would really appreciate it Similar TutorialsSo I just started a class about 4 weeks ago with CSS and I have run into a problem. Its probably a stupid mistake on my part somewhere but I can't figure it out. I have div id tags and for those id tags I have created for example: #test h2, p { font-style:italic; text-align:center; font-weight:bold; display:inline; padding: 10px; } This is because I want only the header and p content in this specific div tag to have these properties. But for some reason its spilling out onto the rest of my p and h2 tags. Why is this happening and how do I stop it so that I can control which h and p tags have specific properties? Hope someone can help!! Thanks I am trying to style a css layout. I keep getting a vertical space between two different block containers. here is the html: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title></title> <meta name="keywords" content="" /> <meta name="description" content="" /> <link href="default.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="wrapper"> <div id="header"> <div id="menu"> </div> </div> </div> </body> </html> Here is the CSS: Code:
#wrapper{
margin: 0 auto;
width: 977px;
}
#header {
margin: 0;
background: url(images/header_01.jpg) no-repeat 0 0;
width: 977px;
height: 198px;
}
#menu{
margin: 0;
background: url(images/header_02.jpg) no-repeat 100% 0;
float: left;
width: 977px;
height: 44px;
position:relative; top: 100%
}
My theory: the top part of the header is 154 px tall. The bottom part is 44px tall. That makes 198px height. so with header being 198px tall, and the smaller image with a relative position 100% down from the top should correctly line up the two images. But yet I have a HUGE gap?!?! Why? Even if I put 154px instead of 100% for top ... it will not line up correctly. Hi, I'm new here. I wasn't sure if this was a javascript problem or a css (I'm thinking it's probably a css problem). I've been using css for about a year, all very straight forward until my friend asked me to make some changes to his site Bascially what he wanted me to do is 1. vertically center the entire site to the browser window, and 2. also vertically center the title and caption for his photogallery Below is a link to the site I'm working on Code: http://theo.mypreview.co.uk/gallery/test I added some javascript that I found searching on google which isn't working quite right. This is the javascript code Code: (function ($) {
// VERTICALLY ALIGN FUNCTION
$.fn.vAlign = function() {
return this.each(function(i){
var ah = $(this).height();
var ph = $(this).parent().height();
var mh = (ph - ah) / 2;
$(this).css('margin-top', mh);
});
};
})(jQuery);
If you follow the link posted to the site I'm working on you should see 3 thumbnails, 1st thumbnail is a video which is my main struggle to center vertically. The other 2 thumbnails are for images. If you click on one of the thumbnails for a picture you will see how the title and caption align vertically (not quite center)* For some reason the div containing the main image content ignores the height so the margins are too big. *Video is posted within the span class called "phototext" which is where the descriptions for the images appears. side note - this javascript seems stop IE6 and 7 from loading the page Thanks Larss Hello, I am currently making a site, and this is my first experience using css, and so far I love it. Now I have a page with multiple links on it, and this page has its css info stored in a seperate css file. Now I want some of the links to show up in all satus's (hover, visited ect)with one color, size ect, and some links to show up with a different color. I know i can modify all the links on the page color by adding this to the css page... ------------------------ A:LINK {font-family: Arial, Helvetica, sans-serif; color:#000000; text-decoration:none; font-size:12pt; font-weight:bold;} ----------------------- but how can i make it so each class has a differnt a:link, a:visited, ect. Thanks! |
|||||||