Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Jun 2014
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Positions and images

    Hello, i have a problem with the positions absolute, relative etc. I'll post the code bellow. I hava <content> and in it i have <figure> with two images, one overlap the other. The problem is that the figure is not in the content and also my gradients doesn't work. I'll appriciate any help.
    HTML code:
    Code:
    <header>
    			<h1>THIS IS MY FIRST PAGE</h1>
    		</header>
    		
    		<div id="wrapper">
    			<nav>
    				<ul>
    					<li><a href="#">Home</a></li>
    					<li><a href="#">Products</a></li>
    					<li><a href="#">About</a></li>
    					<li><a href="#">Contacts</a></li>
    				</ul>
    			</nav>
    			
    			<content>
    			
    			<div id="images">
    				<img src="1.jpg">
    				<img src="2.jpg">
    				<img src="3.jpg">
    				<img src="4.jpg">
    				<img src="5.jpg">
    				<img src="6.jpg">
    				<img src="7.jpg">
    				<img src="8.jpg">
    			</div>
    			
    				<p>Some text</p>
    				<p>Some text</p>
    				<p>Some text</p>
    				<p>Some text</p>
    				<p>Some text</p>
    				<p>Some text</p>
    				<p>Some text</p>
    				<p>Some text</p>
    				<p>Some text</p>
    				<p>Some text</p>
    				<p>Some text</p>			
    			
    				
    				<figure>
    					<div id="pictures">
    						<img  id="first" src="1.jpg">
    						<img id="second" src="2.jpg">
    					</div>
    				</figure>
    			
    			</content>
    			
    			<aside>
    				<p>Mariya</p>
    				<p>Mariya</p>
    				<p>Mariya</p>
    				<p>Mariya</p>
    			</aside>			
    		</div>
    CSS code:
    Code:
    *{
    	margin:0;
    	padding:0;
    	border:0;
    }
    
    html,body{
    	width:100%;
    	height:100%;
    }
    
    header{
    	
    	height:5%;
    	width:100%;	
    	text-align:center;
    	background-color:yellow;
    }
    wrapper{
    	float:left;
    	width:100%;
    	background: -webkit-linear-gradient(to right, green 0%, green 20%, orange 20%, orange 80%, green 80%, green 100%); /* For Safari 5.1 to 6.0 */
    	background: -o-linear-gradient(to right, green 0%, green 20%, orange 20%, orange 80%, green 80%, green 100%); /* For Opera 11.1 to 12.0 */
    	background: -moz-linear-gradient(to right, green 0%, green 20%, orange 20%, orange 80%, green 80%, green 100%); /* For Firefox 3.6 to 15 */
    	background: linear-gradient(to right, green 0%, green 20%, orange 20%, orange 80%, green 80%, green 100%); /* Standard syntax */
    }
    
    nav{	
    	top:5%;
    	width:20%;
    	float:left;			
    }
    
    content{	
    	top:5%;
    	width:60%;
    	float:left;			
    }
    aside{
    	top:5%;
    	width:20%;
    	float:right;	
    }
    #images{
    	margin-left:5%;	
    }
    img{	 
    	width:200px;
    	height:250px;
    	margin: 10px 10px 10px 10px;
    }
    #pictures{
    	position:relative;
    	text-align:center;
    	
    }
    #first{
    	position:absolute;
    	top:10px;
    	left:10px;
    }
    #second{
    	position:absolute;
    	top:15px;
    	left:20px;
    }
    figure{
    	position:relative;
    }

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,915
    Thanks
    6
    Thanked 1,040 Times in 1,013 Posts
    There is no <content> element in HTML.

    And as to your gradients not working, you are missing the ID selector (#) at the respective rule in the stylesheet.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •