|
CSS - Don't Understand This Css
okay, so i was trying to accomplish the same thing as the website www.alistapart.com I wanted the same thing for the links up at the top, i achieved this by looking at this websites CSS file.
this was teh relevant CSS code: PHP Code: #menu UL { BORDER-TOP-WIDTH: 0px; CLEAR: left; PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none; TEXT-ALIGN: center; BORDER-RIGHT-WIDTH: 0px } #menu UL LI { PADDING-RIGHT: 0px; DISPLAY: block; PADDING-LEFT: 0px; FLOAT: left; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; TEXT-ALIGN: center } #menu UL LI A { PADDING-RIGHT: 0px; BORDER-TOP: #ccc 1px solid; DISPLAY: block; PADDING-LEFT: 0px; FONT-WEIGHT: normal; FONT-SIZE: x-small; BACKGROUND: #fff; PADDING-BOTTOM: 0px; MARGIN: 0px 0px 10px; BORDER-LEFT: #ccc 1px solid; WIDTH: 118px; COLOR: #c30; LINE-HEIGHT: 2em; PADDING-TOP: 0px; BORDER-BOTTOM: #ccc 1px solid; BORDER-RIGHT-STYLE: none; LETTER-SPACING: 1px; HEIGHT: 2em; TEXT-ALIGN: center; TEXT-DECORATION: none; voice-family: inherit; } lol so it accomplishes what im looking for but i don't understand WHY it does this. Any help would be great! thanks. Similar Tutorialshttp://www.tonglebeak.com/test.html Why in the world does IE completely mess up the hover effects on the anchor tag whenever first-letter is being applied to the tag? View the source, save and remove the first-letter section, watch hovering work in IE then, etc.., I don't care, I'd just like to know what hack can be applied to make IE work here. Can someone please help me understand float! I want the layout as shown on the picture. What is wrong in my HTML/CSS code? [img]picture.gif[/img] Code: <body> <div id="container"> <div id="heading">heading</div> <div id="picture"><img src="" /></div> <div id="description">description</div> <div id="b1">b1</div> <div id="b2">b2</div> <div id="b3">b3</div> <div id="foot">foot</div> </div> </body> Code:
div {
border:1px solid silver;
}
#container {
width:300px;
}
#heading {
}
#picture {
float:left;
width:200px;
height:200px;
}
#description {
float:left;
width:100px;
}
#b1 {
float:left;
width:50px;
}
#b2 {
float:left;
width:50px;
}
#b3 {
float:left;
width:50px;
}
#foot {
}
I'm trying to get my head round these ... A) .search input, .search .commonButton { margin-right: 7px; vertical-align: middle; } I know what the style parts do, but I don't understand what the first two lines are doing. I think the second line is saying to apply the style to all .commonButton classes within a .search class ??? Don't know about the first. -------------------------------------- B) .buttons div { white-space: nowrap; } does this mean the style is applied to any div elements within the .buttons class? I just started trying to use CSS and I wanted to use a div layout instead of a table layout. The problem I'm having is that the separate divs don't want to sit one on top of the other. They like to have gaps. What do I need to change. I have been looking everywhere. Code:
.color1 {background-color: #411063;}
.color1 a:link {color: #CC9900;}
.color1 a:visited {color: #FFFFFF;}
.color1 a:active {color: #FFFFFF;}
.color1 a:hover {color: #FFFFFF; text-decoration: none;}
.color2 {background-color: #B39FC2;}
.color2 a:link {color: #CC9900;}
.color2 a:visited {color: #FFFFFF;}
.color2 a:active {color: #FFFFFF;}
.color2 a:hover {color: #FFFFFF; text-decoration: none;}
.color3 {background-color: #E6E8EE;}
.color3 a:link {color: #CC9900;}
.color3 a:visited {color: #FFFFFF;}
.color3 a:active {color: #FFFFFF;}
.color3 a:hover {color: #FFFFFF; text-decoration: none;}
body
{
text-align: center;
}
div#document_border
{
margin-right: auto;
margin-left: auto;
padding: 2px;
width: 762px;
background-color: #FFFFFF;
}
Code:
<html>
<head>
<title>Print Shop Template</title>
<link rel="stylesheet" type="text/css" href="print_shop.css"></link>
</head>
<body class="color1">
<div id="document_border">
<div id="title" class="color2">
<h1>McKendree Print Shop</h1>
</div>
<div id="header" class="color1">
<a href="template.html">Links</a>
</div>
<div id="content" class="color3">
<!-- Content Start -->
<p>Template Content</p>
<!-- Content End -->
</div>
<div id="footer" class="color1">
<a href="template.html">Links</a>
</div>
<div id="footer_spacer" class="color2">
<p> </p>
</div>
</div>
</body>
</html>
Hi, I was learning CSS and it didn't quite explain what the second img does. Code:
div.img img
{
display: inline;
margin: 3px;
border: 1px solid #ffffff;
}
Also on some sites i noticed it would have more than one tag: Code:
div.img img img img img {}
or Code:
div div div div {}
if you could help, thank you HI guys I'm basically ultra confused as to why a particular div in my layout won't line up on the following page.. http://hcl.uk.com/test/instaffs/enews1/ I'm talking about the orange box on the right hand side. As you can see, in Firefox it sits right against the line above it, yet in IE 6 theres a 4 or 5 pixel gap forcing the box down. I have been through both my CSS and markup and still can't figure out why this happening.. the only thing I can think of is that it's an IE bug that I don't know about. If anyone can take a look and give me some pointers on what it might or could be that would be great. Thanks in advance for all your help. Stu Hi, I'm trying to understand background image use on digg.com. I have Firefox and web developer plugin fired up and looking at the css for the navigation. The link "all" for example has digg[dot]com/img/menu-current.gif image as background, but there's not much positioning in the css... I don't understand how they use this image portions.. Can someone explain? Thanks! Hello! I am learning CSS on my own which is an authentic crusade So i decided to start with blogs since i have one of my own and i want to give it a personal look. I decided to download some blog templates available in the web to open and see how they work, somehow i managed to understand what i wanted but there are somethings that i don't understand. I decided to stick with this blog template but i came to realize that it doesn't show correctly in IE, the side bar color doesn't show and the font size is bigger. I wonder why that happens...can someone tell me? Quote: http:// nicetobehere-btemplates.blogspot.com/ And since the code is too big to post here you can download it from here Quote: http:// btemplates.com/2009/01/16/nice-to-be-here/ I will apreciate very much if you can help me with this!! Hello, i have a very strange problem with css. I want to build a horizontal menu, like tabs. Here is the link of my site. (sorry, its in russian) http://eai.w2o.ru/default.aspx Now you can see red border around the header div. When in layout.css, I remove the border, the header div changes its position (goes down). (in IE and FF (in FF is a little better)) Can you tell me what is my mistake? How can I do the same without that border? Thank you very much! Hi, Im trying to make the orange column fixed width but it doesnt work, when I change the width of the browser window it still changes width. Here is the link: http://www.i3design.com/test/ Here is the CSS: Code:
.left { float: left; }
.right { float: right; }
.clear { clear: both; }
.center { margin-left: auto; margin-right: auto; text-align: center; }
.hidden { display: none; }
body { color: white; margin: 0; padding: 0; } /* Edited by Goldworker */
div.padded { display: block; }
div.content { width: 75%; margin: 0% 12.5%; } /* Added by Goldworker */
div.login { background-color: black; padding: 0% 12.5%; } /* Edited by Goldworker */
div.logo { background-color: grey; height: 50px; padding: 0% 12.5%; } /* Edited by Goldworker */
div.subnavigation { background-color: brown; }
div.main { color: black; background-color: orange; padding-left: 0px; padding-right: 0px; }
div.main div.body { background-color: white; min-width: 75%; }
div.main div.advertisements { width: 250px; display: inline; margin-right: 0px; }
div.footer { background-color: grey; }
Can anyone help. Also, is this well coded, or is it inefficient? James |
|||||||