problem with content

cerberus478 · November 5, 2013

Hi

I'm trying to create a site where there is a picture on the left side and on the right is a menu that opens up vertically and content beneeth it. The content has to be in a box that can scroll up or down to view the content. I did user overflow but for some reason it's not working.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<link rel="stylesheet" href="css/styles.css"/>
 <script src="js/jquery-1.10.2.min.js"></script>
        <script src="js/jquery-migrate-1.2.1.js"></script>
        <script src="js/main.js"></script>
</head>

<body>
   
<div class="container">
<div class="logos1">
logos
</div>
<div class="bigm"><img src="images/bigm.png" />
  <div class="logo">
    <img src="images/almamorah_logo.png" />
    
</div>
<div class="verticalline">
    <img src="images/vertical_line.png" />
</div>
<div id="nav">
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About Us</a>
            <ul>
                <li><a href="#">Vision & Mission</a>
                   
                </li>
                <li><a href="#">Our Partner</a></li>
                <li><a href="#">Our Team</a></li>
                <li><a href="#">Our Customers</li>
                <li><a href="#">Suppliers & Manufacturers</li>
            </ul>
        </li>
        <li><a href="#">Services</a>
            <ul>
                <li><a href="#">Pharmaceutical Distribution</a></li>
                <li><a href="#">Logistics</a></li>
                <li><a href="#">Brand Custodianship</a></li>
                <li><a href="#">Operation Map</li>
            </ul>
        </li>
         <li><a href="#">Products</a>
            <ul>
                <li><a href="#">Pharmaceuticals</a></li>
                <li><a href="#">Medical Equipment</a></li>
                
            </ul>
        </li>
        
        <li><a href="#">Contact Us</a>
          
        </li>
    </ul>
</div>
    <div class="content">
        Delivering health, carefully.
    </div>
    <div class="content-box">
        <!--<label>-->
        <div class="top-para">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non ornare lacus. Nullam egestas nisi et lacinia interdum. 
        Donec purus dui, mattis in odio id, pellentesque pulvinar tortor. In suscipit sollicitudin erat, et dapibus risus tristique eu. 
        Vivamus a turpis facilisis arcu tempor vulputate eget quis nunc. Pellentesque sapien ipsum, pulvinar eget tortor dictum, 
        tincidunt vulputate velit. Morbi in sem sed nibh congue vulputate in ut libero. Aliquam quis elit ut odio laoreet aliquam. Sed 
        sed est purus. Integer tempus lectus in cursus pharetra. Vivamus pharetra bibendum ligula, in scelerisque eros sagittis sit 
        amet. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque consequat nunc et mattis fringilla.</div> <br /><br />
        
        Cras viverra lorem eu neque porttitor auctor. Sed mattis sodales malesuada. Cum sociis natoque penatibus et magnis dis 
        parturient montes, nascetur ridiculus mus. Aenean ac egestas urna, ac hendrerit leo. Suspendisse consectetur rhoncus 
        sollicitudin. Mauris a faucibus ligula, id aliquet nunc. Maecenas suscipit gravida lectus. Vestibulum bibendum eros justo, eu 
        euismod dui vehicula et. Aliquam erat volutpat. Maecenas sodales lorem sed laoreet ultricies. Nulla lobortis erat purus, 
        rhoncus malesuada felis posuere vitae.
       <!-- </label>-->
    </div>
    <div class="logos2">
        logos 2
    </div>
</div>

and this is the css

body{
	
}

.container{
	width:976px;
		margin:0 auto;
		height:672px;
}

.bigm{
	align: left;
}

.logo{
	text-align: right;
	margin-top: -400px;
	margin-left: 550px;
	position:relative;
	width: 178px;
	height: 145px;
	
}

#nav{
	text-align:left;
	margin-top:-112px;
	margin-left:790px;
}

.verticalline{
	margin-right: 200px;
        margin-top: -132px;
        text-align: right;
}


.content{
    margin-left: 550px;
    margin-top: 50px;
    padding-bottom: 13px;
}
.content-box{
    border-bottom-color: #F6F6F6;
    border-bottom-style: groove;
    border-top-color: #F6F6F6;
    border-top-style: ridge;
    display: block;
    height: 26%;
    margin-left: 550px;
    overflow: auto;
    width: 40%;
}

.top-para{
    color: #fec604;
}

#nav ul, #nav ul li{
    margin:0;
    padding:0;
    list-style:none;
}
 

#nav ul li{
    
    border-bottom:solid 1px white;
    width:150px;
    cursor:pointer;
}
 

#nav ul li:hover{
    background-color:#6679e9;
    position:relative;
}

#nav ul li a{
    
    color:#000000;
    display:inline-block;
    text-decoration:none;
}
 

#nav ul li ul{
    position:absolute;
    display:none;
}
 

#nav ul li:hover ul{
    left:150px;
    top:0px;
    display:block;
}
 

#nav ul li ul li{
    background-color:#cae25a;
}
 

#nav ul li:hover ul li:hover{
    background-color:#b1b536;
}
 

#nav ul li ul li a{
    color:#454444;
    display:inline-block;
    width:120px;
}

Sign In

problem with content

Recommended Posts

cerberus478

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information