#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2013
    Posts
    5
    Rep Power
    0

    Lightbulb Place CSS menu at desired location


    Hi,
    I want to place the animated CSS half above the image and half above the remaining part. I cant upload the image here and place
    a link to my files because I am newbie.

    Any help much appreciated

    [IMG]Layout query[/IMG]

    Thanks in advance,
    Yogi
  2. #2
  3. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,124
    Rep Power
    4303
    Welcome back to DevShed Forums, smartyx99.

    As you (may have) found out new users are restricted from posting URLs until they have made 5 posts. You may need to get around this by leaving out the "http://" and putting a space before each ".". Yes this rule is annoying, but the administrators say it's necessary for limiting spam.

    There is also a policy that prevents users from posting attachments until they have 30 posts and have been a member for 30 days, so if needed a site like http://imageshack.us/ can be used to host images.
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2013
    Posts
    5
    Rep Power
    0
    ok...Thanks for reply @Kravvitz

    here are my files:

    Layout with instructions
    www(dot)box.(dot)com/s/om8unbmsv3qx8923kcml

    The CSS that I want to use:

    index.html
    www(dot)box(dot)com/s/al0z23bzl64ohyugo0vw

    style.css
    www(dot)box(dot)com/s/lbm0w6fy4mrk9brmiakl

    Thanks
  6. #4
  7. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,124
    Rep Power
    4303
    Does your page really not include a doctype? Typically one will encounter fewer issues in documents that include them. Add this to the very beginning of your HTML "<!DOCTYPE html>".

    Have you tried giving "#button" a negative top margin and "position:relative"?

    So that others can see more easily, the image is attached below and here are the two files:
    Code:
    <html>
    <head>
    	<link rel = "stylesheet" href = "C:\Users\Yogi\html form\style.css">
    	</style>
    </head>
    <title>
    	Sliding CSS
    </title>
    
    	
    <body>
    	<div id = "container-top">
    	</div>
    	
    			<div id ="container">
    				
    				<div id = "buttons">
    					<a href="www.yogitech.com">
    					<h6>About us</h6>
    					<div> We are the advisors and our ...<b>Read more</b></div>
    				</a>
    		
    		
    				</div>
    		</div>
    	</div>
    	
    	
    	
    		
    	
    </body>
    </html>
    Code:
    body {
    	background :  #99CC33;  /*#1EBCFA; /*Sky Blue*/
    	font : 1.05em/1.2em 'Myriad Pro', Helvetica , sans-serif;
    }
    
    #container-top {
    	min-height :  30px;
    	width : 1080px;
    	background : #FFF ;/*#99CC33; /*GREEN Color*/ 
    	color : #CC33;
    	margin : 0px auto;
    	padding : 20px;
    	-webkit-border-radius bottom: 10px;
    	-moz-border-radius : 2px;
    	border-radius : 2px;
    }
    
    
    
    
    #buttons {
    	text-align: center;
    }
    
    
    #buttons a {
    	display :block;
    	height : 250px;
    	width : 225px;
    	overflow : hidden;
    	background : #0099FF; /*Sky Blue*/
    	text-decoration : none;
    	-webkit-border-radius : 10px;
    	-moz-border-radius : 10px;
    	border-radius : 10px;
    	border : 1px solid #FFF;
    	
    }
    
    #buttons h6 {
    	opacity: 1;
    	color : #fff;
    	margin : 0px;
    	padding : 0px;
    	font : 2em/100px 'Myriad Pro', Helvetica , sans-serif;
    	text-transform: uppercase;
    	text-shadow: 1px 1px 1px #000;
    	-webkit-transition: all 0.4s linear;
    	-moz-transition: all 0.4s linear;
    	-o-transition: all 0.4s linear;
    	transition: all 0.4s ease-out;
    	
    }
    
    #buttons div {
    	opacity: 0;
    	color: #FFF; /*White color Check out our IT Consulting Website*/
    	height: 250px;
    	background: #D22;  /* RED Color */
    	line-height: 100px;
    	-webkit-transition: all 0.4s linear;
    	-moz-transition: all 0.4s linear;
    	-o-transition: all 0.4s linear;
    	transition: all 0.4s ease-out;
    }
    
    #buttons a:hover h6{
    	margin-top: -100px;
    	opacity: 0;
    	}
    
    #buttons a:hover div{
    	opacity: 1;
    }
    Attached Images
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).

IMN logo majestic logo threadwatch logo seochat tools logo