hi ,
I am trying to create an control for HTML web page using a PSD file i have
I wrote a sample program it works fine , but when i copy size and CSS for a div
from psd file my grid is not working properly ,contents of displayed outside.
Can you please help me with it and also do we define control sizes for cotrols
in responsive
What I have tried:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Untitled Document</title>
<!-- Bootstrap -->
<link href="css/bootstrap.css" rel="stylesheet">
<link href="Design.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("div.bhoechie-tab-menu>div.list-group>a").click(function(e) {
e.preventDefault();
$(this).siblings('a.active').removeClass("active");
$(this).addClass("active");
var index = $(this).index();
$("div.bhoechie-tab>div.bhoechie-tab-content").removeClass("active");
$("div.bhoechie-tab>div.bhoechie-tab-content").eq(index).addClass("active");
});
});
</script>
</head>
<body>
<!-- flight section -->
Flight Reservation
<!-- train section -->
Train Reservation
<!-- hotel search -->
Hotel Directory
Restaurant Diirectory
Credit Card
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery-1.11.3.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.js"></script>
</body>
</html>
Below are contents of css
@charset "utf-8";
/* CSS Document */
/* bhoechie tab */
div.bhoechie-tab-container{
width: 1198px;
height: 734px;
border-width: 1px;
border-color: #d4d4d4;
border-style: solid;
background-color: #ffffff;
}
div.bhoechie-tab-menu{
width: 300px;
height: 727px;
background-color: #003778;
}
div.bhoechie-tab-content{
background-color: #ffffff;
}
div.bhoechie-tab div.bhoechie-tab-content:not(.active){
display: none;
}
Submit an article or tip