I ran into this issue where I am trying to rotate this div on hover, but when I hover, it tries to hover but then it goes back to the normal position. could you please help?
here is my fiddle: https://jsfiddle.net/Lcb7okfn/
.section-tours{
background-color:pink;
padding:5rem 0 50rem 0;
}
.center-text{
background-color:blue;
padding:30px 0;
}
.col-1-of-3{
width: calc((100%-20px)/3);
}
.card{
background-color: orange;
height:15rem;
transition: all .8s;
perspective: 1000px;
-moz-perspective: 1000px;
}
.card:hover{
transform: rotateY(180deg);
}
Apply the hover to a parent element and also move the perspective declaration to the parent:
.section-tours {
background-color: pink;
padding: 5rem 0 50rem 0;
}
.center-text {
background-color: blue;
padding: 30px 0;
}
h2 {
padding: 0;
margin: 0;
}
.col-1-of-3 {
width: calc((100%-20px)/3);
perspective: 1000px;
}
.card {
background-color: orange;
height: 15rem;
transition: all .8s;
}
.col-1-of-3:hover .card {
transform: rotateY(180deg);
}
<section class="section-tours">
<div class="center-text">
<h2>
Most popular tours
</h2>
</div>
<div class="row">
<div class="col-1-of-3">
<div class="card">
<div class="card class_side">
TEXT
</div>
</div>
</div>
<div class="col-1-of-3">
</div>
<div class="col-1-of-3">
</div>
</div>
</section>
So essentially I am writing a game in javascript. I have a canvas on the left, a canvas in the middle, a textarea topright, and a canvas bottom right. But I can't seem to get the right CSS code to figure out this layout like the picture. I want the middle to take up about 50-60% of the middle of the page, and the left and right columns taking the rest of the space. Would be nice if it auto resized with browser window. Any help would be appreciated.
Set a container to hold all the elements and then make smaller containers inside. Target each with CSS and set its properties.
Here I set a general CSS class .generalStyles just to simplify the code.
You would use something like this: (run the snippet)
.generalStyles
{
position:relative;
float:left;
background-color:#000;
border-radius:4px;
box-sizing:border-box;
color:#f00;
height:100px;
padding:5px;
text-align:center;
}
.container
{
width:100%;
background-color:#FFF;
}
.leftPanel
{
width:24%;
margin:0 1% 0 0;
}
.rightPanel
{
width:24%;
margin:0 0 0 1%;
background-color:#FFF;
padding:0;
}
.middlePanel
{
width:50%;
margin:0;
}
.topPanel
{
width:100%;
margin:0;
height:49.5%;
}
.bottomPanel
{
width:100%;
margin:1% 0 0 0;
height:49.5%;
}
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<div class="container generalStyles">
<div class="leftPanel generalStyles">left stuff goes here<br/>and more here<br/>and more here<br/>and more here</div>
<div class="middlePanel generalStyles">middle goes here<br/>and more here<br/>and more here<br/>and more here</div>
<div class="rightPanel generalStyles">
<div class="topPanel generalStyles">top stuff<br/>and more here</div>
<div class="bottomPanel generalStyles">bottom stuff<br/>and more here</div>
</div>
</div>
</body>
</html>
* {
box-sizing: border-box;
}
body {
margin: 0;
}
h2 {
text-align:center;
font-family:arial;
color:red;
font-weight:normal;
}
.left {
background-color: #000;
border-radius:10px;
float: left;
width: 20%;
padding: 10px;
margin:10px;
height: 300px;
}
.middle {
background-color: #000;
border-radius:10px;
float: left;
width: 60%;
padding: 10px;
margin:10px;
height: 300px;
}
.right {
float: left;
width: 20%;
margin: 10px;
height: 300px;
position: relative;
top: 0;
}
.top {
background-color: #000;
border-radius:10px;
width: 100%;
height: 47%;
padding: 10px;
}
.bottom {
background-color: #000;
border-radius:10px;
width: 100%;
height: 47%;
padding: 10px;
position: absolute;
bottom: 0;
right: 0;
}
.row {
box-sizing:border-box;
display: flex;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
<div class="row">
<div class="left">
<h2>left</h2>
</div>
<div class="middle">
<h2>middle</h2>
</div>
<div class="right">
<div class="top">
<h2>top right</h2>
</div>
<div class="bottom">
<h2>bottom right</h2>
</div>
</div>
</div>
<div class="container">
<div class="left"></div>
<div class="middle"></div>
<div class="right">
<div class="rightDiv"></div>
<div class="rightDiv"></div>
</div>
</div
and css
.container{display:block;width:100%}.left,.middle,.right{width:100px;display:inline-block}.left{border:1px solid red;height:100px}.middle{border:1px solid green;height:100px}.rightDiv{border:1px solid #ff0;height:40px;margin:10px 0}
Fiddle
I have a push-left menu, when I clicked the hamburger icon, push menu will slide in and “push” the main content aside when toggled, but I can swipe the page to the right. See this :
I want to make the main area unswipeable when push menu is toggled. Here is my code :
html {
position: relative;
min-height: 100%;
}
body {
font-family: 'Titillium Web', sans-serif;
background-color: #fbfbfb;
overflow-x: hidden;
}
#sidebar {
height: 100%;
padding-right: 0;
padding-top: 20px;
max-width: 300px;
}
#sidebar .nav {
width: 95%;
}
/* collapsed sidebar styles */
#media screen and (max-width: 767px) {
.row-offcanvas {
position: relative;
-webkit-transition: all 0.25s ease-out;
-moz-transition: all 0.25s ease-out;
transition: all 0.25s ease-out;
}
.row-offcanvas-right .sidebar-offcanvas {
right: -41.6%;
}
.row-offcanvas-left .sidebar-offcanvas {
left: -41.6%;
}
.row-offcanvas-right.active {
right: 41.6%;
}
.row-offcanvas-left.active {
left: 41.6%;
}
.sidebar-offcanvas {
position: absolute;
top: 0;
width: 41.6%;
}
}
/* navbar override */
.navbar-toggle,
.navbar-toggle:hover,
.navbar-toggle:focus,
.navbar-toggle:active {
float: left;
background-color: #fff !important;
margin: 12px 0px 8px 15px;
}
.navbar-toggle .icon-bar {
background-color: #ddd !important;
}
.navbar-toggle:hover .icon-bar,
.navbar-toggle:focus .icon-bar,
.navbar-toggle:active .icon-bar {
background-color: #03A9F4 !important;
}
.navbar-default {
background-color: #fff;
}
.navbar-brand {
padding-top: 10px;
/* padding-left: 28px; */
}
.navbar {
min-height: 60px;
margin-bottom: 0px;
border-bottom: 1px solid #E2F1FF;
}
.navbar-dashboard .navbar-brand {
padding-left: 28px;
}
.paket-navbar {
font-size: 1.3em;
}
.paket-navbar a {
color: #3E3E3E;
line-height: 30px;
}
.paket-navbar a:hover {
color: #03A9F4;
background-color: transparent !important;
}
.paket-navbar-secondary {
margin-top: 10px;
}
.paket-navbar-secondary > li > a {
padding-left: 57px;
}
#media screen and (max-width: 767px) {
.paket-navbar-secondary > li > a {
padding-left: 47px;
}
}
.paket-navbar-secondary a {
color: #858585;
line-height: 25px;
}
.paket-navbar-secondary a:hover {
color: #03A9F4;
background-color: transparent !important;
}
.paket-navbar>li.active>a {
color: #03A9F4;
}
#sidebar > ul.nav.paket-navbar > li > a > i {
margin-right: 20px;
}
#media screen and (max-width: 767px) {
#sidebar > ul.nav.paket-navbar > li > a > i {
margin-right: 10px;
}
}
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<body>
<div class="page-container">
<!-- top navbar -->
<div class="navbar navbar-default navbar-static-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header navbar-dashboard">
<button type="button" class="navbar-toggle" data-toggle="offcanvas" data-target=".sidebar-nav">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="<?php echo base_url('home') ;?>"><img src="<?php echo base_url('asset/img/paketid-logo-240.png')?>" alt="Paket ID" height="40" width="120"></a>
<p class="nav-username pull-right navbar-text visible-xs"><?php echo ($this->session->username ? $this->session->username : strtok($this->session->user_email,'#')); ?></p>
</div>
<p class="nav-username pull-right navbar-text hidden-xs">
<?php echo ($this->session->username ? $this->session->username : strtok($this->session->user_email,'#')); ?>
</p>
</div>
</div>
<div class="container-fluid">
<div class="row row-offcanvas row-offcanvas-left">
<!-- sidebar -->
<div class="col-xs-6 col-sm-3 sidebar-offcanvas" id="sidebar" role="navigation">
<ul class="nav paket-navbar">
<li <?php if ($_controller=="dashboard")echo "class='active'"?>><i class="fi flaticon-home"></i> Dashboard</li>
<li <?php if ($_controller=="book")echo "class='active'"?>><i class="fi flaticon-copy"></i> Book</li>
<li <?php if ($_controller=="settings")echo "class='active'"?>><i class="fi flaticon-setting"></i> Settings</li>
<li><i class="fi flaticon-caret-left"></i> Sign out</li>
</ul>
</div>
What did I do wrong? Thanks in advance..
Here is a basic example of side menu.
At first look at structure of html. There are two blocks: header and page.
Header isn't interesting, it just contain hamburger button (red).
Pagecontains two blocks: menu and content. It has display: flex and hides menu by transform: translateX(-200px). Menu has fixed width that equals width: 200px. When you click button, you add class opened to page and remove transform: translateX(-200px). So you can see now a menu. But page has overflow-x: hidden and there is no horizontal scroll.
$('.button').on('click', function() {
$('.page').toggleClass('opened');
});
* {
box-sizing: border-box;
}
.screen {
width: 320px;
height: 480px;
border: 1px solid;
overflow-x: hidden;
overflow-y: auto;
}
.page {
display: flex;
align-items: stretch;
transition: transform ease .3s;
transform: translateX(-200px);
}
.page.opened {
transform: translateX(0);
}
.menu {
flex: 0 0 auto;
width: 200px;
background: black;
color: white;
}
.content {
flex: 0 0 100%;
width: 100%;
padding: 20px;
}
.header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 20px;
background: gray;
}
.button {
width: 30px;
height: 30px;
background: red;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="screen">
<header class="header">
<div class="button"></div>
<span>Header</span>
</header>
<div class="page">
<div class="menu">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
<div class="content">
<h1>Title</h1>
<h2>Subtitle</h2>
<p>Some text.</p>
<p>Horace Greeley (1811–1872) was editor of the New-York Tribune, as well as the Democratic and Liberal Republican candidate in the 1872 U.S. presidential election. Born to a poor family in New Hampshire, Greeley in 1831 went to New York City to seek his fortune. He lived there the rest of his life, but also spent much time at his farm in Chappaqua. In 1841, he founded the Tribune, which became the highest-circulating newspaper in the country. He urged the settlement of the American West, popularizing the phrase "Go West, young man, and grow up with the country", though it is uncertain if he invented it. Greeley was briefly a Whig congressman from New York, and helped found the Republican Party in 1854. When the Civil War broke out, he mostly supported President Abraham Lincoln, and urged the end of slavery. Greeley ran in 1872 in an attempt to unseat President Ulysses Grant, whose administration he deemed corrupt, but lost in a landslide. Devastated at the defeat, he died three weeks after Election Day.</p>
</div>
</div>
</div>
I am trying to develop a HTML5 app for mobile.
The layout is pretty basic header,content.
Header (red rectangle),content (green rectangle) are absolute divs.
The content must be scrollable if the height is bigger than the screen.
My problem begin when I'am trying to have the scrollbar on the orange rectangle div only (and not on orange and blue rectangle).
The orange rectangle div must begin at the end of the blue rectangle div and end at the end of the screen. The height of blue rectangle div is unknow and can change.
Actually blue and orange rectangle divs are correctly placed but the scrollbar is not positionned where I want.
So if I try to move the scrollbar with absolute positionning on orange rectangle div, it's overlap the blue rectangle div, if I use relative div to wrap the orange rectangle, the height of the wrapper equal zero cause of absolute children or the div run out of window and is unscrollable.
If someone has a solution, It will be nice.
EDIT 1 :
Here is the html and css code.
html :
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" href="lib/font-awesome/4.3.0/css/font-awesome.min.css">
<title>YAOSWA</title>
</head>
<body>
<header class="header_no_back_button" id="header" ng-controller="HeaderCtrl" ng-show="getShowHeader()">
<span class="header_icon pull-left ng-hide" ng-show="getShowBackButton()">
<a href="#home">
<i class="fa fa-chevron-left"></i>
</a>
</span>
<span id="headertitle" class="pull-left ng-binding">
YAOSWA
</span>
<span class="header_icon pull-right" ng-show="getShowAboutButton()">
<a href="#about">
<i class="fa fa-info-circle"></i>
</a>
</span>
<span class="header_icon pull-right" ng-show="getShowSettingsButton()">
<a href="#settings">
<i class="fa fa-cog"></i>
</a>
</span>
</header>
<!-- ngView: -->
<div class="content main_content ng-scope" id="content" ng-view="" afkl-image-container="">
<div class="home_template ng-scope">
<div class="view container">
<div ng-hide="errorOverlay()">
<div class="weather_header" ng-show="currentWeather.city && currentWeather.country">
<div class="weather_header_wrapper">
<div>
<span class="current_weather_location ng-binding">New York / US</span>
</div>
<div class="separator">
<span></span>
</div>
<div class="weather_chooser">
<span class="weather_type ng-binding">Hourly Weather</span>
<span class="header_icon pull-left" ng-show="!isMinTab()">
<a ng-click="prevTab()">
<i class="fa fa-chevron-left"></i>
</a>
</span>
<span class="header_icon pull-right" ng-show="!isMaxTab()">
<a ng-click="nextTab()">
<i class="fa fa-chevron-right"></i>
</a>
</span>
<div class="clear_both"></div>
</div>
</div>
</div>
<div class="tab_list">
<div class="tab ng-hide" ng-show="isActiveTab(0)">
....
</div>
<div class="tab" ng-show="isActiveTab(1)">
<div class="weather_data_wrapper">
<!-- ngRepeat: weather in hourlyWeather.list -->
<div class="hourly_weather weather_data weather_803 day" ng-repeat="weather in hourlyWeather.list" ng-click="toggleWeatherDetail($event)">
<div class="summary_info_hourly_weather summary_info_weather">
<div class="row row_weather">
<div class="col-xs-4">
<div>
<div class="hourly_weather_logo_wrapper">
<div afkl-lazy-image-loaded="done" class="hourly_weather_logo" afkl-lazy-image-options="{"offset": 150}" afkl-lazy-image="img/weather_icon_animate/icon_weather_hard_cloud.svg?numhourly=0"><img alt="" class="afkl-lazy-image" src="img/weather_icon_animate/icon_weather_hard_cloud.svg?numhourly=0"></div>
</div>
</div>
</div>
<div class="col-xs-4">
<div>
<span class="hourly_weather_date_day ng-binding">Fri 31</span>
<span class="hourly_weather_date ng-binding">11:00</span>
</div>
</div>
<div class="col-xs-4">
<div class="vcenter">
<div class="align-left">
<span class="hourly_weather_desc ng-binding">broken clouds</span>
<span class="hourly_weather_temp ng-binding">294.2 K</span>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- end ngRepeat: weather in hourlyWeather.list -->
<div class="hourly_weather weather_data weather_804 day" ng-repeat="weather in hourlyWeather.list" ng-click="toggleWeatherDetail($event)">
<div class="summary_info_hourly_weather summary_info_weather">
<div class="row row_weather">
<div class="col-xs-4">
<div>
<div class="hourly_weather_logo_wrapper">
<div afkl-lazy-image-loaded="done" class="hourly_weather_logo" afkl-lazy-image-options="{"offset": 150}" afkl-lazy-image="img/weather_icon_animate/icon_weather_hard_cloud.svg?numhourly=1"><img alt="" class="afkl-lazy-image" src="img/weather_icon_animate/icon_weather_hard_cloud.svg?numhourly=1"></div>
</div>
</div>
</div>
<div class="col-xs-4">
<div>
<span class="hourly_weather_date_day ng-binding">Fri 31</span>
<span class="hourly_weather_date ng-binding">14:00</span>
</div>
</div>
<div class="col-xs-4">
<div class="vcenter">
<div class="align-left">
<span class="hourly_weather_desc ng-binding">overcast clouds</span>
<span class="hourly_weather_temp ng-binding">297.91 K</span>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- end ngRepeat: weather in hourlyWeather.list -->
....
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="js/angular.js"></script>
<script type="text/javascript" src="js/angular-route.min.js"></script>
<script type="text/javascript" src="js/angular-sanitize.min.js"></script>
<script type="text/javascript" src="js/angular-translate.min.js"></script>
<script type="text/javascript" src="js/lazy-image.js"></script>
<script type="text/javascript" src="js/app.js"></script>
</body>
</html>
css :
#font-face {
font-family: 'UbuntuM'; /*a name to be used later*/
src: url('../fonts/ubuntu-font-family/0.80/Ubuntu-M.ttf'); /*URL to font*/
}
#font-face {
font-family: 'UbuntuR'; /*a name to be used later*/
src: url('../fonts/ubuntu-font-family/0.80/Ubuntu-R.ttf'); /*URL to font*/
}
#font-face {
font-family: 'ubuntu-light'; /*a name to be used later*/
src: url('../fonts/ubuntu-font-family/0.80/ubuntu-light.woff'); /*URL to font*/
}
* {
font-size:1em;
box-sizing: border-box;
}
*:after, *:before {
box-sizing: border-box;
}
html,body {
height:100%;
width:100%;
margin:0;
}
body {
color:#5c5c5c;
font-family: 'UbuntuR';
}
.clear_both {
clear:both;
}
.mediumfont {
font-family: 'UbuntuM';
}
header {
box-sizing: border-box;
height:60px;
line-height:45px;
text-align:center;
position: absolute;
top:0;
left:0;
right:0;
width:100%;
background-color:#ecedec;
color:#5c5c5c;
padding:5px;
border-bottom: 10px solid #d7d7d7;
}
#headertitle,
.weather_header {
font-family: 'ubuntu-light';
padding-left: 10px;
font-size:20px;
line-height:42px;
}
.header_icon > a{
font-size: 25px;
padding: 0 7px;
color: #5c5c5c;
}
#content {
box-sizing: border-box;
position: absolute;
top:60px;
bottom:0px;
left:0;
right:0;
width:100%;
background-color:#ecedec;
color:#000000;
overflow-y: auto;
padding:5px;
}
#content .tab {
overflow: hidden;
position:relative;
margin:5px;
}
#content .tab_list {
/*
position: absolute;
bottom: 0;
top: 0px;
left: 0;
right: 0;
*/
}
#content .tab,
.weather_data_wrapper {
/*position: absolute;
top: 0;
bottom: 0;
overflow-y: auto;
right: 0;
left: 0;
*/
}
/*
footer {
height:30px;
line-height:30px;
text-align:center;
position: absolute;
bottom:0;
left:0;
right:0;
width:100%;
background-color:red;
padding:5px;
}
*/
.about_logo_wrapper {
text-align: center;
margin-top:10px;
}
.about_logo_wrapper > img {
width:33%;
height:auto;
display:inline-block;
}
.about_text_wrapper {
text-align:center;
}
.about_title {
display: block;
margin: 10px;
font-size: 1.5em;
margin-bottom: 2px;
}
.about_template ul {
list-style: none;
padding:0;
}
.about_template ul li{
margin:5px;
}
.about_desc {
margin-top:35px 0px;
}
#errorOverlay,
#loadingOverlay {
background-color:rgba(255, 255, 255, 0.5);
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
z-index:100
}
.error_overlay_wrapper{
position: absolute;
left: 50%;
top: 50%;
text-align: center;
width:100%;
height:10%;
margin-left: -50%; /*half width*/
margin-top: -5%; /*half height*/
}
.loading_overlay_wrapper{
position: absolute;
left: 50%;
top: 50%;
text-align: center;
width:100px;
height:100px;
margin-left: -50px; /*half width*/
margin-top: -50px; /*half height*/
}
img {
max-width:100%;
max-height:100%;
}
/*
.hourly_weather_date_day,
.daily_weather_date_day,
.hourly_weather_desc,
.daily_weather_desc,
.detail_info_weather
*/
.hourly_weather_desc,
.daily_weather_desc {
font-size:0.75em;
}
.weather_data,
.detail_info_weather,
.summary_info_weather {
color: #FFFFFF;
}
.hourly_weather > .detail_info_weather,
.daily_weather > .detail_info_weather
{
display:none;
}
.hourly_weather.show_weather_detail > .detail_info_weather,
.daily_weather.show_weather_detail > .detail_info_weather
{
display:block;
}
.weather_data {
padding: 5px;
}
.hourly_weather.weather_data,
.daily_weather.weather_data
{
margin-bottom:5px;
}
.current_weather_desc,
.hourly_weather_desc,
.daily_weather_desc {
text-transform: capitalize;
}
.detail_temp_min_max_group {
display:inline-block;
}
.detail_icon {
height:1em;
}
.detail_icon_bkg {
background-size: 18px;
padding-left:20px;
background-repeat: no-repeat;
background-position: left center;
}
.detail_icon_sunrise_bkg {
background-image:url(/img/details_icon/icon_sunrise.svg);
}
.detail_icon_sunset_bkg {
background-image:url(/img/details_icon/icon_sunset.svg);
}
.detail_icon_temp_bkg {
background-image:url(/img/details_icon/icon_temp.svg);
}
.detail_icon_temp_min_max_bkg {
background-image:url(/img/details_icon/icon_temp_min_max.svg);
}
.detail_icon_pressure_bkg {
background-image:url(/img/details_icon/icon_pressure.svg);
}
.detail_icon_humidity_bkg {
background-image:url(/img/details_icon/icon_humidity.svg);
}
.detail_icon_cloud_bkg {
background-image:url(/img/details_icon/icon_cloud.svg);
}
.detail_icon_rain_bkg {
background-image:url(/img/details_icon/icon_rain.svg);
}
.detail_icon_wind_orientation_bkg {
background-image:url(/img/details_icon/icon_wind_orientation.svg);
}
.detail_icon_wind_speed_bkg {
background-image:url(/img/details_icon/icon_wind_speed.svg);
}
.summary_info_current_weather {
text-align:center;
}
.current_weather_logo {
width: 50%;
display:inline-block;
}
/*black*/
.weather_data.weather_200,
.weather_data.weather_201,
.weather_data.weather_202,
.weather_data.weather_210,
.weather_data.weather_211,
.weather_data.weather_212,
.weather_data.weather_221,
.weather_data.weather_230,
.weather_data.weather_231,
.weather_data.weather_232,
.weather_data.weather_900,
.weather_data.weather_901,
.weather_data.weather_902,
.weather_data.weather_903,
.weather_data.weather_904,
.weather_data.weather_905,
.weather_data.weather_906,
.weather_data.weather_950,
.weather_data.weather_951,
.weather_data.weather_952,
.weather_data.weather_953,
.weather_data.weather_954,
.weather_data.weather_955,
.weather_data.weather_956,
.weather_data.weather_957,
.weather_data.weather_958,
.weather_data.weather_959,
.weather_data.weather_960,
.weather_data.weather_961,
.weather_data.weather_962
{
background-color:#000000;
}
/*blue*/
.weather_data.weather_300,
.weather_data.weather_301,
.weather_data.weather_302,
.weather_data.weather_310,
.weather_data.weather_311,
.weather_data.weather_312,
.weather_data.weather_321,
.weather_data.weather_500,
.weather_data.weather_501,
.weather_data.weather_502,
.weather_data.weather_503,
.weather_data.weather_504,
.weather_data.weather_511,
.weather_data.weather_520,
.weather_data.weather_521,
.weather_data.weather_522,
.weather_data.weather_531,
.weather_data.weather_600,
.weather_data.weather_601,
.weather_data.weather_602,
.weather_data.weather_611,
.weather_data.weather_621
{
background-color:#55AAFF;
}
/*gray*/
.weather_data.weather_701,
.weather_data.weather_711,
.weather_data.weather_721,
.weather_data.weather_731,
.weather_data.weather_741,
.weather_data.weather_751,
.weather_data.weather_761,
.weather_data.weather_762,
.weather_data.weather_771,
.weather_data.weather_781,
.weather_data.weather_802,
.weather_data.weather_803,
.weather_data.weather_804
{
background-color:#808080;
}
/*yellow*/
.weather_data.weather_800,
.weather_data.weather_801
{
background-color:#E0B000;
}
/*night*/
.weather_data.night {
background-color:#41403b;
}
.daily_weather_logo,
.hourly_weather_logo {
width: 100px;
display:inline-block;
}
.weather_header {
padding:0px;
position: relative;
}
.weather_header_wrapper {
margin:5px;
background-color:#d7d7d7;
}
.weather_header_wrapper > div {
text-align:center;
}
.row_weather > div {
text-align:center;
}
.row_weather {
display: table;
width:100%;
table-layout: fixed;
}
.row_weather > div span {
display: inline-block;
width:100%;
}
.row_weather [class*="col-"] {
float: none;
display: table-cell;
vertical-align: middle;
}
.align-left {
text-align:left;
}
.weather_data .separator
{
margin-top: 10px;
padding-bottom: 10px;
}
.separator {
text-align:center;
line-height: 1px;
height: 1px;
position: relative;
background-color:transparent;
}
.separator > span {
display: inline-block;
border-top: 1px solid #FFFFFF;
position: absolute;
top: 0;
bottom: 0;
right: 10%;
left: 10%;
}
.weather_type {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
.weather_chooser {
position:relative;
}
.container-centered {
height: 100%;
text-align: center; /* align the inline(-block) elements horizontally */
font: 0/0 a; /* remove the gap between inline(-block) elements */
}
.container-centered:before { /* create a full-height inline block pseudo=element */
content: ' ';
display: inline-block;
vertical-align: middle; /* vertical alignment of the inline element */
height: 100%;
}
.elem-centered {
display: inline-block;
vertical-align: middle; /* vertical alignment of the inline element */
font: 16px/1 Arial sans-serif; /* <-- reset the font property */
}
I don't find a correct answer with html and css.
But javascript do the job. Just need to calculate the height of the header and add a "top" to the absolute div.
Im trying to set up a way of viewing photos when you hover over them and im having some trouble with floating and positioning. I've got it to work like this...
**HTML**
<div id="container-collection">
<div id="clothes1"><img src="Images/smallest/JPEG/IMG_3148.jpg" alt="1" width="211" height="316" onMouseOver="MM_showHideLayers('closeup1','','show')" onMouseOut="MM_showHideLayers('closeup1','','hide')"></div><div id="clothes2"><img src="Images/smallest/JPEG/IMG_3124.jpg" alt="2" width="211" height="316" onMouseOver="MM_showHideLayers('closeup2','','show')" onMouseOut="MM_showHideLayers('closeup2','','hide')"></div>
<div id="closeup1"><img src="Images/Smaller/bigger ones/JPEG/IMG_3148_1.jpg" width="432" height="648" alt="11"></div> <div id="closeup2"><img src="Images/Smaller/bigger ones/JPEG/IMG_3124_1.jpg" width="432" height="648" alt="11"></div>
</div>
**CSS**
#container-collection { width: 900px; margin:0 auto; padding-top: 90px; }
#clothes1 { float:left; left:0px; top:5px; width:209px; height:316px; z-index:1; }
#clothes2 { float:left; left:5px; top:5px; width:209px; height:316px; z-index:1; }
#closeup1 { float:left; left:400px; top:-316px; width:427px; height:648px; z-index:2; visibility: hidden; }
#closeup2 { position:relative; left:423px; top:-648px; width:427px; height:648px; z-index:3; visibility: hidden; }
but theres got to be a better way.
Cheers.
There are many JavaScript plugins you can use to quickly achieve this.
For example, try the bootstrap plugin:
http://twitter.github.com/bootstrap/javascript.html#popovers
NB: the data-content attribute in the <a> tag could hold HTML content. Just look out for the use of quotes.
<a href="#" rel="popover" data-content="<img src='image2.jpg' />" data-original-title="A Title">
<img src="image1.jpg" border="0" />
</a>
Optionally, a much simpler version to show a preview can be done with CSS only, utilizing hover.
<style>
a.info
{
position: relative; /*this is the key*/
z-index: 204;
color: #000;
text-decoration: none;
}
a.info:hover
{
z-index: 205;
background-color: gainsboro;
}
a.info span{display: none}
a.info:hover span
{
/*the span will display just on :hover state*/
display: block;
position: absolute;
top: 3em;
left: 1em;
}
</style>
<a class="info" href="javascript:focus();">
<img src="image1.jpg" /><span><img src="image2.jpg" /></span>
</a>