<div id="wrapper">
<div id="header"></div>
<div id="pattern"></div>
<div id="main">
<img src="http://i52.tinypic.com/16i6z9d.jpg" />
<h3 class="text">
Freelance Web/Logo <br />
Designer & Developer <br />
→ Muzammil Hussain
</h3>
</div>
</div>
CSS :
body { font-size:12px/20px; }
#wrapper { position:relative; }
#header { width:100%; height:150px; background:url(http://i55.tinypic.com/1zpgny8.jpg) repeat-x;}
#pattern { width:100%; height:150px; background:url(http://i51.tinypic.com/ao75eg.jpg) repeat; position:absolute; top:0px; }
#main { width:1200px; margin:0 auto; margin-top:-103px; }
#main img { float:left; margin-right:10px; }
#main h3 { float:left; margin-top:5px; font:12px/20px "Bookman Old Style"; text-shadow: 1px 1px #000; line-height:14px; color:#fff; }
Well please first of all check if i did any mistake let me know. and also i having trouble that my #pattern overlaying all my classes. i just want this class appear over #header. but something i am missing..
Actually i want results like that.
Please let me know.
This markup could be improved a lot. But if you are just looking for a fix try adding position: relative to #main.
What's happening is #pattern is coming out of the natural flow of the document because it has position: absolute set on it. Therefore unless stated otherwise it appears on top of every other element inside it's parent element.
Also I would consider reducing your markup to something like this...
<div id="wrapper">
<div id="pattern"></div>
<img src="http://i52.tinypic.com/16i6z9d.jpg" />
<h3 class="text">
Freelance Web/Logo <br />
Designer & Developer <br />
→ Muzammil Hussain
</h3>
</div>
Be careful not to use too many IDs when using them to style elements. They can be very powerful and on a large site can result in lots of pain trying to override them and their child elements when you want to.
Related
I have the following elements and css in an html file.
HTML
<div id="eastern">All times are Eastern</div>
<div id="calendar-container">
<div id="calendar">
<div id="saturday"> ... </div>
<div id="sunday"> ... </div>
</div>
</div>
<h2>First event</h2>
CSS
#eastern {
text-align:center;
}
#calendar {
width:700px;
margin:auto;
}
#saturday,#sunday {
width:350px;
float:left;
}
For some reason, the <h2> element is floating up along the right side of the #eastern. The browser is acting like the element is completely empty even though it has plenty of content in the #saturdy and #sunday elements. Since #calendar-container isn't being floated I think it should force the <h2> element beneath.
I know I could just fix it using clear:both, but I feel like I'm missing something. Any help? Please? Thanks!!
please don't forget to clear your float inside of "#calendar" by using a simple:
#calendar {
overflow: hidden;
}
Or even better: you use the cleaner version with an additional class "clearfix".
If you do so, you'll get your lost boxmodel of "#calendar" back.
Now you'll be able to position <h2> underneath your calendar.
If you have any further questions feel free to let me know!
Here a full example:
CSS:
#eastern {
text-align:center;
}
#calendar {
width: 700px;
margin: 0 auto;
outline: 1px solid red;
overflow: hidden; /* dirty version if you don't have a
class "clearfix" in your Stylesheet */
}
#saturday,#sunday {
width:350px;
float:left;
}
HTML: (Cleaner Version with class "clearfix")
<div id="eastern">All times are Eastern</div>
<div id="calendar-container">
<div id="calendar" class="clearfix">
<div id="saturday"> ... </div>
<div id="sunday"> ... </div>
</div>
</div>
<h2>First event</h2>
Please try below code where i have added clear class with clear both left and right:
HTML
<div id="eastern">All times are Eastern</div>
<div id="calendar-container">
<div id="calendar">
<div id="saturday"> ... </div>
<div id="sunday"> ... </div>
</div>
</div>
<div class="clear"></div>
<h2>First event</h2>
CSS
#eastern {
text-align:center;
}
#calendar {
width:700px;
margin:auto;
}
#saturday,#sunday {
width:350px;
float:left;
}
.clear{
clear:both;
}
I am a Beginner Website Developer, I want to make my college's project but stuck at the beginning because my navigation div and small divs in navigation div are not going to transform or transit at once. when i apply transition at one of em with absolute position all (also apply absolute position to other three small divs) the all three of em except first disappears. Code is linked. I want to make navigation just like IMDB's Navigation. (with downside transition and with links and picture at one end.)
-Thank in advance.
HTML CODE:
<body>
<div id="Papadiv">
<header id="Header">
<Div id="Logodiv">
<img src="Images/Logo.jpg" height="100px" width="100px" />
</Div>
<Div id="Titlediv">
<font size="+5" face="Comic Sans MS, cursive">MobilePassion.com</font>
</Div>
</header>
<nav id="Nav1">
<div id="navoption1">
<a href="Index.html">
New Arrivals</a>
</div>
<div id="navoption2">
<a href="Famousmodels.html">
Famous Models</a>
</div>
<div id="navoption3">
<a href="Whoweare.html">
Who We Are?</a>
</div>
<div id="navoption4">
<a href="Contactus.html">
Contact Us</a>
</div>
</nav>
/* CSS Document */
#Nav1
{
background-color: #FDAA2F;
height:50px;
width:800px;
}
#navoption1
{
background-color:#FD771E;
height:10px;
width:160px;
border-radius:20px;
float: left;
color:#722703;
padding:20px;
text-align:center;
}
#navoption2
{
background-color:#FD771E;
height:10px;
width:160px;
border-radius:20px;
float: left;
color:#722703;
padding:20px;
text-align:center;
}
#navoption3
{
background-color:#FD771E;
height:10px;
width:160px;
border-radius:20px;
float: left;
color:#722703;
padding:20px;
text-align:center;
}
#navoption4
{
background-color:#FD771E;
height:10px;
width:160px;
border-radius:20px;
float: left;
color:#722703;
padding:20px;
text-align:center;
#navoption1:hover
{
color:#C13D04;
background-color: #F5530E;
animation:alternate;
text-decoration:blink;
background-image:url(Rose%20(1).jpg)
}
#navoption2:hover
{
color:#C13D04;
background-color: #F5530E;
animation:alternate;
text-decoration:blink
}
#navoption3:hover
{
color:#C13D04;
background-color: #F5530E;
animation:alternate;
text-decoration:blink
}
#navoption4:hover
{
color:#C13D04;
background-color: #F5530E;
animation:alternate;
text-decoration:blink
}
I think first off you need to do some research on how to build a "CSS Mega Drop Down Menu". (That's usually what they are called and you should be able to find a good example in which you can structure your styling off of.)
A "classic" drop down menu usually contains lists nested (or in your case - divs) within parent list items.
"Here" is a good step by step example that I think should get you off and running.
I have been rtying to find a good resource for an example. These are good examples to learn from i think. http://code-tricks.com/simple-css-drop-down-menu/ , http://css-tricks.com/simple-jquery-dropdowns/ . It would also be wise for user experience to use hoverintent (http://cherne.net/brian/resources/jquery.hoverIntent.html) or a delay. This creates a better user experience.
I am trying to create a css hovering effect that the divs with text and a down arrow above the circle should be hidden and when I will hover the circle they should appear.
But I couldn't do this. Below the codes I used.
When I hover on this circle, the above two divs should appear like that
<head>
<title>CSS Hovering Effect Practical Class</title>
<style type="text/css">
* {
margin:0;
padding:0;
}
#wrap {
background:#4485F5;
margin:10px 0;
padding:30px;
text-align:center;
}
h1 {
color:#fff;
letter-spacing:2px;
font-size:50px;
margin-bottom:15px;
}
p {
color:#fff;
background:#944E90;
width:600px;
font-size:25px;
padding:3px;
margin:auto;
}
span {
font-style:italic;
}
#features {
margin: 25px 0;
}
#baloon {
color:#ddd;
margin:auto;
padding:15px;
font-size:16px;
letter-spacing:1px;
background:url('bg.png') repeat;
width:200px;
position:relative;
border-radius:5px;
}
#blackarrow {
background:url('blackarrow.png') no-repeat top center;
margin:auto;
height:15px;
width:15px;
margin-top:-7px;
}
#circle {
}
#circle img{
height:50px;
width:50px;
background:#fff;
padding:50px;
border:5px solid #00AEF0;
border-radius:500px;
transition:0.5s ease;
}
#circle img:hover {
height:60px;
width:60px;
background:#ddd;
padding:60px;
border:8px solid #00AEF0;
border-radius:500px;
}
#circle:hover > #baloon {
display: inline;
}
#inner {
}
#img {}
</style>
</head>
<body>
<div id="wrap">
<h1>Welcome to <span> CodeforBusiness</span> Site</h1>
<p>Your trusted web designing service provider for a decade</p>
<div id="features">
<div id="baloon">Best web designing services with our team</div>
<div id="blackarrow"></div>
<div id="circle"><img src="avatar.gif" /></div>
</div>
</div>
</body>
With your markup it's not possible to achieve because the current css selectors cannot target elements which are parents and siblings only in a very limited way via the general sibling combinator~ or the more useful adjacent sibling combinator + (See docs).
You better choose a differently nested structure, to make the hover effect work.
<div id="features">
<div id="circle"></div>
<div id="description">
<div id="baloon">Best web designing services with our team</div>
<div id="blackarrow"></div>
</div>
</div>
Now with the #description div being an adjacent sibling after your circle, you can target it via +. (If you have multiple elements, you need this container, if it's only the one #baloon element inside, you could as well target this directly).
#circle:hover + #description {
display:none;
}
Take a look at my minimal example. You only need some fixing to the positioning and you're done.
As Chad's comment says, ">" is the child selector. Baloon would need to be inside the circle element. What you want is the sibling selector. "+" signifies an adjacent sibling (immediately following), and "~" is the general sibling selector, which is probably what you want:
#circle:hover ~ #baloon
Note that "baloon" has to come AFTER "circle in the markup, so you will need to reprder your elements for this to work. (i.e. put circle first).
As #Chad said, you have structured your CSS in a way that you are not actually selecting the #balloon div on hover. The > selector is the immediate child selector, so in order for the CSS to work the way you wrote it, your HTML will have to look like this:
<div id="wrap">
<h1>Welcome to <span> CodeforBusiness</span> Site</h1>
<p>Your trusted web designing service provider for a decade</p>
<div id="features">
<div id="blackarrow"></div>
<div id="circle">
<div id="baloon">Best web designing services with our team</div>
<img src="avatar.gif" />
</div>
</div>
</div>
This is a doable solution, if you are comfortable changine the structure.
You would change the #balloon styles to something like this:
#baloon {
display:none;
position:absolute;
width:200px;
top:-100px;
left:50%;
margin-left:-115px;
padding:15px;
font-size:16px;
letter-spacing:1px;
background:rgba(0, 0, 0, .5);
border-radius:5px;
color:#ddd;
}
And the #circle & :hover style to this:
#circle {
display:block;
position:relative;
}
#circle:hover > #baloon {
display: block;
}
Let me know if you need any help positioning the balloon.
Here is a working jsfiddle
In IE7, my order sample button "#itmSampl" isn't vertically aligned with the ".add-to-cart" button to the left of it, although in FF3.6 and Chrome 5 it is. I need it to be aligned correctly in IE6-8. Does anyone see what I'm missing?
<style type="text/css">
#buttonbox { position:relative; width:326px; }
#accounting #box-accounting .image-item .content-account .add-to-cart { clear:both; margin:0 0 10px; }
#accounting #box-accounting .image-item .content-account
#ordrWizrd { float:left; height:24px; width:111px; }
#accounting #box-accounting .image-item .content-account .add-to-cart { clear:both; margin:0 0 10px; }
#itmSampl { bottom:0; cursor:pointer; display:block; height:24px; margin:0 3px 2px; position:absolute; right:0; width:120px; } .clearfix { clear:both; height:0; } </style>
<div id="buttonbox">
<div id="addtocart2" class="add-to-cart">
<table><%=getCurrentAttribute('item','addtocarthtml')%></table>
</div>
<div id="ordrWizrd" class="add-to-cart"><img src="/images/img/add-to-cart.gif" alt="configure item"></div>
<div id="itmSampl"></div>
</div> <div class="clearfix"></div> </div>
Also, here's the test page if a visual helps (you have to login to see the buttons instead of the bulleted list): http://www.avaline.com/85W_test_2
Login:test2#gmail.com
Pass:test03
Solution 1: Since you are already using a lot of tables in your page, another one won't hurt - just change your HTML from what you have above to something like this (may require a few tweaks):
<div id="buttonbox">
<div id="addtocart2" class="add-to-cart">
<table><tr>
<td><table><%=getCurrentAttribute('item','addtocarthtml')%></table></td>
<td valign="bottom"><div id="itmSampl"></div></td>
</tr></table>
</div>
<div class="clearfix"></div>
</div>
<!-- And also put #ordrWizrd in there somewhere -->
Solution 2: Take away all the "position: absolute" stuff with #itmSampl (remove the CSS bottom, position, right, and maybe margin and height/width properties). Then, add CSS float: right; margin-top: -36px; to #itmSampl to make it float on the right and move upward 36 pixels.
i'm now starting designing with proper mark-up and organization.
and now, i have problem with my div border. it does not enclose all ot the div's content.
this is my html snippet:
<div id="paneMiddle">
<div id="subPaneLatestItems">
<p id="latestItemsTitle">Latest Shop Items:</p>
<div>
<img src="img/flower1.jpg" />
<span id="itemName">Ballpen</span>
<br/><span id="itemPrice">Php 90.00</span>
</div>
</div></div>
and here's my css:
div#paneMiddle>div{
/*All divs that are children of div#paneMiddle*/
width:590px;
margin:5px 5px 5px 5px;
position:relative;
border-color:#FFCC33;
border-style:solid;
border-width:thin;
position:relative;
}
why doesn't this work?
thanks
See if adding the clearfix class to your div fixes anything
http://www.webtoolkit.info/css-clearfix.html
Without more info, I can only assume that the combination of flower1.jpg and the other contents are wider than 590 pixels. When you specify a concrete width for an element in CSS, it will adhere to that width, even if its contents are larger.
Also, important to point out that the > direct descendant selector is not supported in IE.
Whenever I have trouble like this, I make a minimal self-contained example for testing. This one works perfectly although I've used a local image. When I reduce the width to 50 pixels, the image extends beyond the right-hand side of the border so this may be the problem you're having. What exactly is outside the border in your case?
Based on your further comments that you float:left the image div, the following shows what might be your problem. If you run this code, you'll see the the first bordered div no longer encloses the image. Is that the problem you're seeing?
<html>
<head>
<style type="text/css">
div#x{
float:left;
}
div#paneMiddle>div{
/*All divs that are children of div#paneMiddle*/
width:590px;
margin:5px 5px 5px 5px;
position:relative;
border-color:#FFCC33;
border-style:solid;
border-width:thin;
position:relative;
}
</style>
</head>
<body>
<div id="paneMiddle">
<div id="subPaneLatestItems">
<p id="latestItemsTitle">Latest Shop Items:</p>
<div id="x">
<img src="img/flower1.bmp" />
<span id="itemName">Ballpen</span>
<br/>
<span id="itemPrice">Php 90.00</span>
</div>
</div>
<div id="subPaneLatestItems2">
Hello
</div>
</div>
</body>
</html>
Including the cleardiv fix (shown here) appears to fix the problem:
<html>
<head>
<style type="text/css">
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.clearfix {
display: inline-block;
}
html[xmlns] .clearfix {
display: block;
}
* html .clearfix {
height: 1%;
}
div#x{
float:left;
}
div#paneMiddle>div{
/*All divs that are children of div#paneMiddle*/
width:590px;
margin:5px 5px 5px 5px;
position:relative;
border-color:#FFCC33;
border-style:solid;
border-width:thin;
position:relative;
}
</style>
</head>
<body>
<div id="paneMiddle">
<div class="clearfix" id="subPaneLatestItems">
<p id="latestItemsTitle">Latest Shop Items:</p>
<div id="x">
<img src="img/flower1.bmp" />
<span id="itemName">Ballpen</span>
<br/>
<span id="itemPrice">Php 90.00</span>
</div>
</div>
<div id="subPaneLatestItems2">
Hello
</div>
</div>
</body>
</html>
Just something to note your image doesn't have a title or more importantly alternate text maybe you haven't got around to this, but its point that needs looking into. Alternate text allows a users to understand what might have been there if for example the images don't load up or they have images turned off. It is also an accessbility issue if user are using a screen reader a description of the image is useful to them.
<img src="img/flower1.jpg" alt="Photo of a Daisy" title="This is a Daisy" />