|
CSS - I Dont Understand Div.img Img
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 Similar Tutorialsokay, 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. http://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? 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 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'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! Hi, so i dont know how else to explain this with out giving you the link ocixx.com/index1.html the three buttons on the right Facebook myspace twitter, everything is perfect with them, except when you click them nothing happens, i am using css file and scripts i found on the net, cause i cant program the source to the css file is in the source to the page, i dont know what to do Hi newbie here, Just completed site for client, to find out that the CSS text does not appear in IE7. This is the exact source - <div id="homewrapper"> <div id="homeimage"> <div align="right"><a href="" target="_blank"><img src="images2/logo_07.png" alt="Enjoy England" width="131" height="178" border="0" longdesc="" /></a><a href="" target="_blank"><img src="images2/logo_09.png" alt="Tourism Newquay" border="0" longdesc="" /></a></div> </div> <div id="intro"> <p>For your perfect holiday in Newquay, come and stay at 12A Pentire Heights. We have a 2 bedroom self catering apartment which has fantastic sea views overlooking the world famous Fistral Beach.</p> <p> </p> <p>Pentire Heights is ideally located, being only a short walk from Fistral Beach, and a 20 minute walk from Newquay town centre. There is also a private car park space allocated to you while you stay.</p> <p><br /> In Newquay you will find an array of shops, bars, bistros, restaurants, pubs, clubs and night life. Explore the cliff top walks along one of the eleven superb beaches or visit some of the many attractions in the town or close by, such as the Zoo, Golf Course, Trenance Leisure Park, Waterworld and the Sea Life Centre.<br /> <br /> Pentire Heights apartments in Newquay provides an ideal base for visiting the whole of Cornwall.</p> </div> Any help will be much appreciated! Cheers! Ok this is the website: http://mydeco.com/ and if you hover over the sections/links at the top, the subnav appear. However if you go to community section & then try to hover over different sections, the subnav dont seem to appear! This happens for a colleague of mine on FF & IE 7. However I have same browsers but this problem doesnt occur with me! she has cleared cache The right column of this website just started appearing in the wrong place, as you can see he [deleted] Unfortunately, i did not make the site but have been asked to fix it. I cant seem to find the cause of this at all, any help would be great, thanks! Edit: Found the mistake, a WYSIWYG field in the admin that shows on the header was screwing up the page with invalid code. ok, so lets say i have two <div>s. the parent, i want to be a tad translucent, but the child i don't want to be. is there anyway i can stop that opacity property from cascading? example: Code:
<style>
#div1 {filter: alpha(opacity=50); -moz-opacity: .5; }
#div2 {propery:value; blah blah blah}
</style>
<div id="div1">
<div id="div2">
Some text and content here
</div>
</div>
thanks! later Hello. I designed my site using Ie, and an now getting some complaints from members who are switching to firefox. I am a total CSS newbie and I don't know exactly where to begin to troubleshoot this. URL thats the page, you will need to use username: css password: test It looks fine in IE6, but doesnt look ok in firefox. The CSS stylesheet is at URL Thank you for any help you can provide. i have two css boxes on the company lan, and for one person the two boxes wont appear? is this a problem with internet explorer? Ok, some trouble with Fire Fox and IE. I am creating a site for Ernies Inn and for right now I am hosting it here until I am done and the owner is willing to have it. http://ernies.bombinaid.com Problems IE: The main box areas in each page keeps going over the menu! FireFox: In the menu page it seems every time the mouse goes over a h3 tag it has a mouse over effect. I am using <a name="something"> for the page jumping. Here is the css code: Code: body {background-color: black}
.header {width: 100%; margin-left: -1px; margin-top: -4px;}
.links {width: 100%; text-align: center; background-image: url('defult.gif'); background-repeat: repeat-x;}
.main {background-color: #cc3333; height: auto; width: 700px; margin-top: -34px; margin-left: 7cm;}
.main2 {background: url(corner1.gif) 0 100% no-repeat}
.main3 {background: url(corner2.gif) 100% 100% no-repeat}
h3 {color: #ffffff; font-family: Arial; font-size: 30px;}
a:link {text-decoration: underline; color: black;}
a:hover {text-decoration: underline; color: black;}
a:visited {text-decoration: underline; color: black;}
hr {color: white}
img.ajm113 {margin-left: 30cm;}
Can someone help me out here? Hi all, http://www.zitrote.com/forum/index.php?act=viewforum&f=4 if you see there in IE the two borders on the right dont appear in the topic listing but in FF they do?? 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!! Ok If you go to: http://www.zahra-zahra.com/innerPage.html if you hover over the side menu (sub/subcontact)which are supposed to be nested lists.. you will see some alignment issue with the pink and the brown-ish.. also the nested list was moved a bit forward so i added margin:-0.5em; but IE doesnt like it and has moved the li further back.. relevant code: PHP Code: #sideMenu { margin-top:0.2em; float:left; clear:left; width:24%; } #sideMenu ul { float:left; width:100%; list-style:none; margin:0em; padding:0em; } #sideMenu li { clear:left; background-image:url(images/site/backgrounds/sideLi.jpg); padding:0.4em; margin-bottom:0.1em; } #sideMenu ul li ul { margin:-0.5em; padding:0em; margin-top:0.3em; padding-top:0.2em; padding-bottom:0.2em; } #sideMenu ul li ul li { width:100%; background-image:url(images/site/backgrounds/sideLiLi.jpg); } #sideMenu a { text-indent:0em; text-decoration:none; color:#663333; margin-left:0em; font-size:1em; } .nestedList a { text-indent:0em; padding:0.3em; padding-left:3em; } .nestedList a:hover { background-image:url(images/site/backgrounds/sideLiLiHover.jpg); background-position: -0.4em 0em; } HTML PHP Code: <div id="sideMenu"> <ul> <li><a href="">Contact</a> <ul class="nestedList"> <li><a href="">sub</a></li> <li><a href="">SUBcontact</a></li> </ul> </li> <li><a href="">Return</a></li> <li><a href="">News</a></li> <li><a href="">FAQ</a></li> <li><a href="">bout us</a></li> <li><a href="">Home</a></li> </ul> </div> just a side question i have in the above code a nested class.. why cant i do something like .nestedList ul { } i tried that but it didnt work... I have CSS attached to a php page of which none of the CSS information gets printed. what I mean is that if we have a style "purple" which was used on the top sentence of the page, when you go to print that page, it still comes in black instead of the purple color for the purple CSS. What is worse, is that the tables that are setup and shaded for columns from the CSS style's come out without any color. It actually doesn't even print the outline borders of the table. Hey guys, I missed a day of my XHTML class in college and he went over most of the CSS that day, I was sick with the flu and he said that day was the most important, so I'm lost, I need to "Remove any <b>, <i>, <u> and <font> tags and replace them with inline CSS code." So i come up with something like this <Style Type="css/text"> <B style="color:blue> This is my display text </b> </style> PLEASE HELP ME WITH THIS INLINE CSS! HELP! I'M LOSTTTT! |
|||||||