I have a page that I want to have the following format:
I am having problems getting the lower page navigation positioned properly. It needs to always be below the data columns. It currently wraps below the left column. It is supposed to have a border around it, but the border is appearing near the top of the page. Lastly the footer appears at the top of the page and not the bottom. I've been playing with this for over a day and can't figure out where I made my mistakes.
A stripped down version of the code is here:
.h2b {
/*page title*/
font-size: 17.5pt;
color: #469;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
}
.a {
color: #469;
text-decoration: none;
}
body {
color: #000;
font-family: Arial, Helvetica, sans-serif;
font-size: small;
font-style: normal;
background-color: #fff;
}
#container {
width: 100%;
margin: 0;
background-color: #fff;
position: relative;
padding: 0;
}
#masthead {
text-align: right;
width: 100%;
background-color: #c5d5e5;
/*width: auto;*/
margin: 0;
padding: 0;
overflow: auto;
}
#page_content {
position: relative;
width: 96%;
/*width: 98%;*/
/*border-top-width: 1px;
border-top-style: solid;
border-top-color: #CCAA77;*/
left: 20px;
}
#major_revision {
/*position: relative;
left: 20px;*/
}
#footer {
background-color: #dfcfbf;
padding-bottom: 5px;
width: auto;
clear: both;
overflow: auto;
}
#masthead img {
float: left;
margin: 0;
padding: 0;
}
#masthead p {
font-size: small;
text-align: right;
color: #000;
margin: 0 0 0 0;
padding: 0;
}
/* Styles for Navigationcommon modified 10-16-2015*/
#navigationcommon {
background-color: #548EBE;
overflow: hidden;
border-bottom: thin black solid;
}
#navigationcommon ul {
list-style-type: none;
width: 100%;
margin: 0;
padding: 0;
}
#navigationcommon li {
float: left;
}
#navigationcommon a {
color: #FFF;
text-decoration: none;
display: block;
padding: 5px;
border: 1px solid #D3D3D3;
background-color: #548EBE;
}
#navigationcommon a:hover {
color: #000;
text-decoration: none;
border: 1px solid #D3D3D3;
background-color: #ADD8E6;
}
/* Styles for Footer */
#footer p {
font-size: x-small;
text-align: center;
color: #393939;
margin: 10px;
padding: 1px;
}
#footer a {
color: #393939;
text-decoration: underline;
}
#footer a:hover {
color: #000;
text-decoration: none;
}
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="UTF-8">
<title>PAGE</title>
</head>
<body>
<!-- Begin Container -->
<div id="container">
<!-- Begin Masthead -->
<header id="masthead" onclick="" style="background-color:#0047ff">
<p style="background-color:#0047ff;height:30px; width:104px">
<!--See helper file for paths to image files-->
</p>
</header>
<!-- End Masthead -->
<nav id="navigationcommon" onclick="">
<ul>
<!--See helper file for paths to image files-->
<li>Home
</li>
<li>About
</li>
<li>Contacts
</li>
<li>
Improve
</li>
<li>Tailor
</li>
</ul>
<a href="#" style="float:right;font:small-caption;border-style:none;
color:white; vertical-align:bottom;margin-bottom:0px;padding-bottom:0px;padding-left:5px;padding-right:5px">Advanced Search</a>
<!--See helper file for paths to image files-->
<input type="image" src="pill-button-green-clip-art.jpg" style="width: 90px; border-style:none; float:right; height: 28px;" value="Search" onclick="search()">
<input name="search" type="text" maxlength="512" id="search" class="searchField" title="" style="width: 300px;
border-style:none; height: 26px; float:right; padding-right:5px; " value="Enter Keyword">
</nav>
<!-- Begin Page Content -->
<section id="page_content" style="top: 60px;" onclick="">
<div id="major_revision" style="position:fixed;top: 65px;float:left;width:100%;padding: 0 1% 1% 2%;">
<p><span id="area" style="font-weight:bold">Some Data</span>
<br>
<span style="font-size:x-small">Major Revision: <revision>1.0</revision><!-- Format is Major Revision: #.# -->
Date: <date>7/1/2015</date></span>
</p>
<!-- Format is Release Date: mm/dd/yyyy -->
</div>
<!-- Below is for the navigation buttons on the top of the screen. It goes ABOVE the LEFT COLUMN <div> -->
<div style="position:fixed;top: 120px;width:96%;margin:0 0 0 2%;border:thin black solid">
<!---->
<div style="position:relative;float:left;width:50%;padding: 0% 0% 0% 0%;background-color:#CCDDFF">
<p style="text-align:left;background-color:transparent;margin:.5% 0 .5% 1%;">
<input style="background-color:#DFCFBF" name="previous" id="previous" type="button" value="<< Prev" onclick="page_navigation('previous')" class="round" />
<br>
<span style="padding: 0% 0% 0% 0%;margin-left:1%;" id="previous_text" class="style_bold"></span>
</p>
</div>
<div style="position:relative;float:right;width:50%;padding: 0% 0% 0% 0%;background-color:#CCDDFF">
<p style="text-align:right;background-color:transparent;margin:.5% 1% .5% 0;">
<input style="background-color:#DFCFBF" name="next" id="next" type="button" value="Next >>" onclick="page_navigation('next')" class="round" />
<br>
<span style="padding: 0% 0% 0% 0%;margin-right:1%;" id="next_text" class="style_bold"></span>
</p>
</div>
</div>
<!-- Above is for the navigation buttons on the top of the screen -->
<div style="position:fixed;top: 165px;float:left;width:98%;padding: 10px 0% 0% 2%;">
<span class="h1b">Page Title
</span>
</div>
<!-- Begin Left Column -->
<div style="position:fixed;top: 205px;width:95%">
<div style="position:relative;float:left;width:70%;padding: 0% 0% 1% 2%;">
<span class="h2b">XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</span>
<p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
<br>
<br>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
<br>
<br>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
<br>
<span style="margin:20px;">- xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</span>
<br>
<span style="margin:20px;">- xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</span>
<br>
<span style="margin:20px;">- xxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxx</span>
<br>
<span style="margin:20px;">- xxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxx</span>
<br>
<br>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxx
<br>
<span style="margin:20px;">- xxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxx</span>
<br>
<span style="margin:20px;">- xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</span>
</p>
<span class="h2b">xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</span>
<p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxx
<br>
<br>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxx xxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
<br>
<br>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxx
<br>
<span style="margin:20px;">- xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</span>
<br>
<span style="margin:20px;">- xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</span>
<br>
<span style="margin:20px;">- xxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxx xxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</span>
<br>
<span style="margin:20px;">- xxxxxxxxxxxxx xxxxxxxxxxxxxxxx xxxxxxxxxxxxxxx xxxxxxxxxxx xxxxxxxx</span>
<br>
<br>xxxxxxx xxxxxxxxxx xxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxx xxxxxxxxxx xxxxxxxxxx.
<br>
<br>xxxx xxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxx xxxxxxxxxxxx</p>
</div>
<!-- End Left Column -->
<!-- Begin Right Column -->
<div style="position:relative;float:right;width:10%;margin:0 2% 0 0">
<span class="h2b">xxxxxxx </span>
<p>xxxxxxxxxxxxxxxxxxxxxx xxxxxxxxx xxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxx xxxxxxxxxx
<br>
<br>xxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxx
<br>
<br>xxxxxxxxxxxx xxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxx xxxxxxxxxxxxxxxxx
<br>
<span style="margin:1%;">- xxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxx</span>
<br>
<span style="margin:1%;">- xxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxx xxxxxxxxx xxxxx xxxxxxxxxxx xxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxx xxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxx xxxxxxxxxxx xxxxxx</span>
<br>
<span style="margin:1%;">- xxxxxxxx xxxxxxxxxxxx xxxxxxxxx xxxxxxxxxxxx xxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxx xxxx</span>
<br>
<span style="margin:1%;">- xxxxxxx xxxxxxxxxxx xxxxxxxxxxx xxxxxxxxxxx xxxxxxxxxxxxx xxxxxxx xxxxxxxxx xxxxxxx</span>
<br>
<br>
</p>
<!-- End Right Column -->
</div>
<!-- Below is for the navigation buttons on the bottom of the screen. It goes BELOW the RIGHT COLUMN </div> -->
<div style="position:relative;width:100%;margin:0 0 0 2%;border:thin red solid">
<div style="position:relative;float:left;width:50%;padding: 0% 0% 0% 0%;background-color:#CCDDFF">
<p style="text-align:left;background-color:transparent;margin:.5% 0 .5% 1%;">
<input style="background-color:#DFCFBF" name="previous" id="previous1" type="button" value="<< Prev" onclick="page_navigation('previous')" class="round" />
<br>
<span style="padding: 0% 0% 0% 0%;margin-left:1%;" id="previous_text1" class="style_bold"></span>
</p>
</div>
<div style="position:relative;float:right;width:50%;padding: 0% 0% 0% 0%;background-color:#CCDDFF">
<p style="text-align:right;background-color:transparent;margin:.5% 1% .5% 0;">
<input style="background-color:#DFCFBF" name="next" id="next1" type="button" value="Next >>" onclick="page_navigation('next')" class="round" />
<br>
<span style="padding: 0% 0% 0% 0%;margin-right:1%;" id="next_text1" class="style_bold"></span>
</p>
</div>
</div>
<!-- Above is for the navigation buttons on the bottom of the screen -->
</div>
</section>
<!-- Begin Footer -->
<div id="footer">
<p>Copyright © All Rights Reserved.</p>
</div>
<!-- End Footer -->
</div>
<!-- End Container -->
</body>
</html>
Looks like your building a complicated app, generally I use absolute layouts for the type of complexity that your layout represents:
http://codepen.io/anon/pen/BomePJ
<div class="l-masthead">Masthead</div>
<div class="l-navigation">Navigation</div>
<div class="l-revision">Revision</div>
<div class="l-pagenav-top">Page Navigation Top</div>
<div class="l-data">
<div class="l-data-con">
<div class="l-data1">
<p>
Lorum1
</p>
<p>
Lorum2
</p>
<p>
Lorum1
</p>
<p>
Lorum1
</p>
<p>
Lorum1
</p>
</div>
<div class="l-data2">
<p>
Lorum1
</p>
<p>
Lorum2
</p>
<p>
Lorum1
</p>
<p>
Lorum1
</p>
<p>
Lorum1
</p> </div>
</div>
</div>
<div class="l-pagenav-bot">Page Navigation Bottom</div>
<div class="l-footer">Footer</div>
.l-masthead { width:100%; height:20px; top:0; left:0; position:absolute; background:orange; }
.l-navigation { width:100%; height:20px; top:20px; left:0; position:absolute; background:green; }
.l-revision { width:100%; height:20px; top:40px; left:0; position:absolute; background:lime; }
.l-pagenav-top { width:100%; height:20px; top:60px; left:0; position:absolute; background:yellow; }
.l-data { width:100%; position:absolute; top:80px; bottom:40px; left:0; }
.l-data-con { width:100%; height:100%; position:relative; }
.l-data1 { padding:20px; overflow-y:auto; position:absolute; top:0; right:50%; bottom:0; left:0; background:LightBlue; }
.l-data2 { padding:20px; overflow-y:auto;position:absolute; top:0; right:0; bottom:0; left:50%; background:LightCyan; }
.l-pagenav-bot { width:100%; height:20px; position:absolute; bottom:20px; left:0; background:yellow; }
.l-footer { width:100%; height:20px; position:absolute; bottom:0; left:0; background:orange; }
This will be responsive down to a tablet form factor after that, with the type of complexity I think you are going to build in the app, it won't make sense. You will have to go back to UX to make complex apps like this work from phone.
Also, get your CSS out of inline and into an external CSS file.
Related
Ive created a webpage as you can see below, however i can't make the a section of the page to stretch all the way to the bottom as you can see by the dark area in the image. I've done research and searched through som of the similar posts in here but nothing i've tried seem to do the trick.
Height:100%; position:relative; Doesnt work
Height:auto; min-height:100%; Doesnt work
Bottom:0; Doesnt work
html{
height:100%;
}
#home {
background: url(../img/chemical.jpg) no-repeat center center; /*Full Witdth background image*/
padding: 0;
-webkit-background-size: cover;
background-size: cover;
-moz-background-size: cover;
min-height: 600px;
width:auto;
min-width:100%;
}
/*STYLE FOR OVERLAY CLASS - WHICH IS ABOVE IMAGE WITH OPACITY/TRANSPARENCY 0.75*/
#home .overlay {
padding-bottom:20%;
background-color: rgba(0, 116, 112,0.6); /*.75 opacity of the color so that background image is visible*/
min-height: 600px;
color: #fff;
width:auto;
min-width:100%;
}
body {
margin-top: 100px;
background-color: #222;
}
#wrapper {
padding-left: 0;
}
#page-wrapper {
width: 100%;
bottom:0;
padding: 0;
background-color: #fff;
}
<body>
<div id="wrapper" style="height:auto; min-height:100%">
<!-- Navigation -->
<?php include 'navbar.php'; ?>
<div id="page-wrapper">
<div id="home">
<div class="overlay">
<div class="container-fluid">
<!-- Page Heading -->
<div class="row">
<div class="col-lg-12">
<h1 class="page-header">
View All Overdue Lab Tests
</h1>
<ol class="breadcrumb">
<li class="active">
<i class="fa fa-dashboard"></i> Dashboard
</li>
</ol>
</div>
</div>
<!-- /.row -->
<div class="row" style="height:100%">
<div class="col-lg-12">
<div class="panel panel-default">
<div class="panel-heading">
<i class="fa fa-long-arrow-right fa-fw"></i> All Overdue Lab Test:
<button style="float:right; height:25px; width:200px; color:black; border-radius:25px 25px 25px 25px;" value="hello">Prompt Overdue Items</button>
</div>
<div class="panel-body" style="color:black;">
"Table Data"
</div>
</div>
</div>
</div>
</div>
<!-- /.row -->
</div>
<!-- /.container-fluid -->
</div>
</div>
</div>
<!-- /#page-wrapper -->
</div>
</body>
100% height elements will only be 100% of the viewport if all parents have 100% height.
To start:
html, body {
height: 100%;
}
As well as the two parents #wrapper and #page-wrapper.
The alternative is to use 'Viewport Units' like vh.
#home {
min-height: 100vh;
}
That will work regardless of parents heights. Here is the caniuse browser support table.
First question here.
I'm trying to get google now cards that maintain their width, vertical position relative to other cards, and size relative to their content. Like this that compresses to one column when the window resizes small enough.
I have this, which works until you have a third card, or until the second card has more content than the first.
body {
background-color: #f1f1f3;
margin:auto;
}
h1 {
color:white;
font-family:"Roboto";
font-weight:100;
font-size:36px;
}
h2 {
font-family:'Roboto';
font-weight:100;
font-size:30px;
color:#212121;
}
h4 {
font-family:'Roboto';
font-weight:400;
font-style: italic;
font-size:16px;
color: #727272;
border-top: 1px solid #727272;
padding-top: 4px;
}
p {
font-family:'roboto';
font-weight:400;
font-size:20px;
color:#727272;
}
.content-link {
color:#212121;
text-decoration: none;
font-weight:700;
}
.card-track {
width:100%;
height: auto;
position:relative;
}
.card {
width: 466px;
margin: 15px;
background-color:white;
border-radius: 4px;
float:left;
}
.card-color {
width:466px;
height: 96px;
background-color: #395a66;
position:absolute;
border-radius: 4px 4px 0px 0px;
}
.card-icon {
height: 46px;
width:46px;
margin: 25px;
float:left;
}
.card-icon-img {
max-height: 48px;
height: auto;
-webkit-filter: invert(100%);
}
.card-content-icon-img {
max-height: 50px;
height: auto;
-webkit-filter: opacity(55%);
}
.card-color-title {
margin:27px;
}
#gamingthronebar {
background-color:#FFC107;
}
#colorbar {
background-color:#673AB7;
}
.card-content {
padding:100px 30px 20px 60px;
}
.card-content-icon {
float:left;
width:60px;
height:60px;
margin:120px 0px 0px 24px;
}
<link href='http://fonts.googleapis.com/css?family=Roboto:400italic,100,700,400' rel='stylesheet' type='text/css'>
<body>
<div class="card-track">
<!-- Card
<div class="card">
<span class="card-color">
<div class="card-icon"><img class="card-icon-img" src=""></div>
<h1 class="card-color-title"></h1>
</span>
<div class="card-content-icon"><img class="card-content-icon-img" src=""></div>
<div class="card-content">
<p></p>
<h4></h4>
</div>
</div><!--End Card-->
<div class="card">
<span class="card-color">
<div class="card-icon"><img class="card-icon-img" src="material-design-icons/verification24.png"></div>
<h1 class="card-color-title">Hello, World!</h1>
</span>
<div class="card-content-icon"><img class="card-content-icon-img" src="material-design-icons/android11.png"></div>
<div class="card-content">
<p>Take a look around this site, it's designed based upon the glorious look and feel of <a class="content-link" href="http://www.google.com/design/spec/material-design/introduction.html">Material Design</a>, a visual scheme designed by Google for use with Android 5.0 Lollipop. </p>
</div>
</div><!--End Card-->
<div class="card">
<span class="card-color" id="colorbar">
<div class="card-icon"><img class="card-icon-img" src="material-design-icons/good4.png"></div>
<h1 class="card-color-title">No Java required</h1>
</span>
<div class="card-content-icon"><img class="card-content-icon-img" src="material-design-icons/painter14.png"></div>
<div class="card-content">
<h2></h2>
<p> Check it out! Right click > "Inspect Element"</p>
<h4>Learn More</h4>
</div>
</div> <!--End Card-->
<div class="card">
<span class="card-color" id="gamingthronebar">
<div class="card-icon"><img class="card-icon-img" src="material-design-icons/gamingthronewhite.png"></div>
<h1 class="card-color-title">Another cool project</h1>
</span>
<div class="card-content-icon"><img class="card-content-icon-img" src="material-design-icons/memory1.png"></div>
<div class="card-content">
<p>This is a test of the emergency broadcast system.</p>
<h4>This is a link</h4>
</div>
</div><!--End Card-->
<div class="card">
<span class="card-color">
<div class="card-icon"><img class="card-icon-img" src="material-design-icons/round58.png"></div>
<h1 class="card-color-title">About the designer</h1>
</span>
<div class="card-content-icon"><img class="card-content-icon-img" src="material-design-icons/create3.png"></div>
<div class="card-content">
<p>I'm no one of consequence. But if you must know, I like Material Design. This website is a work in progress, but it's my best shot.</p>
<h4>Professional Version</h4>
</div>
</div><!--End Card-->
</div><!--End card track-->
</body>
And this works to a great extent, but the height of the cards are determined by the card in the next column, which is close, but I want the cards to be determined by the height of the one above it.
body {
background-color: #f1f1f3;
margin:auto;
}
h1 {
color:white;
font-family:"Roboto";
font-weight:100;
font-size:36px;
}
h2 {
font-family:'Roboto';
font-weight:100;
font-size:30px;
color:#212121;
}
h4 {
font-family:'Roboto';
font-weight:400;
font-style: italic;
font-size:16px;
color: #727272;
border-top: 1px solid #727272;
padding-top: 4px;
}
p {
font-family:'roboto';
font-weight:400;
font-size:20px;
color:#727272;
}
.content-link {
color:#212121;
text-decoration: none;
font-weight:700;
}
.card-track {
width:100%;
height: auto;
position:relative;
text-align: center;
}
.card {
width: 466px;
margin: 15px;
background-color:white;
border-radius: 4px;
display:inline-flex;
text-align: left;
}
.card-color {
width:466px;
height: 96px;
background-color: #395a66;
position:absolute;
border-radius: 4px 4px 0px 0px;
}
.card-icon {
height: 46px;
width:46px;
margin: 25px;
float:left;
}
.card-icon-img {
max-height: 48px;
height: auto;
-webkit-filter: invert(100%);
}
.card-content-icon-img {
max-height: 50px;
height: auto;
-webkit-filter: opacity(55%);
}
.card-color-title {
margin:27px;
}
#gamingthronebar {
background-color:#FFC107;
}
#colorbar {
background-color:#673AB7;
}
.card-content {
padding:100px 30px 20px 60px;
}
.card-content-icon {
float:left;
width:60px;
height:60px;
margin:120px 0px 0px 24px;
}
<link href='http://fonts.googleapis.com/css?family=Roboto:400italic,100,700,400' rel='stylesheet' type='text/css'>
<body>
<div class="card-track">
<!-- Card
<div class="card">
<span class="card-color">
<div class="card-icon"><img class="card-icon-img" src=""></div>
<h1 class="card-color-title"></h1>
</span>
<div class="card-content-icon"><img class="card-content-icon-img" src=""></div>
<div class="card-content">
<p></p>
<h4></h4>
</div>
</div><!--End Card-->
<div class="card">
<span class="card-color">
<div class="card-icon"><img class="card-icon-img" src="material-design-icons/verification24.png"></div>
<h1 class="card-color-title">Hello, World!</h1>
</span>
<div class="card-content-icon"><img class="card-content-icon-img" src="material-design-icons/android11.png"></div>
<div class="card-content">
<p>Take a look around this site, it's designed based upon the glorious look and feel of <a class="content-link" href="http://www.google.com/design/spec/material-design/introduction.html">Material Design</a>, a visual scheme designed by Google for use with Android 5.0 Lollipop. </p>
</div>
</div><!--End Card-->
<div class="card">
<span class="card-color" id="colorbar">
<div class="card-icon"><img class="card-icon-img" src="material-design-icons/good4.png"></div>
<h1 class="card-color-title">No Java required</h1>
</span>
<div class="card-content-icon"><img class="card-content-icon-img" src="material-design-icons/painter14.png"></div>
<div class="card-content">
<h2></h2>
<p>There was lots of java involved in the making of this website, but there's none in this website. Check it out! Right click > "Inspect Element"</p>
<h4>Learn More</h4>
</div>
</div> <!--End Card-->
<div class="card">
<span class="card-color" id="gamingthronebar">
<div class="card-icon"><img class="card-icon-img" src="material-design-icons/gamingthronewhite.png"></div>
<h1 class="card-color-title">Another cool project</h1>
</span>
<div class="card-content-icon"><img class="card-content-icon-img" src="material-design-icons/memory1.png"></div>
<div class="card-content">
<p>This is a test of the emergency broadcast system.</p>
<h4>This is a link</h4>
</div>
</div><!--End Card-->
<div class="card">
<span class="card-color">
<div class="card-icon"><img class="card-icon-img" src="material-design-icons/round58.png"></div>
<h1 class="card-color-title">About the designer</h1>
</span>
<div class="card-content-icon"><img class="card-content-icon-img" src="material-design-icons/create3.png"></div>
<div class="card-content">
<p>I'm no one of consequence. But if you must know, I like Material Design. This website is a work in progress, but it's my best shot.</p>
<h4>Professional Version</h4>
</div>
</div><!--End Card-->
</div><!--End card track-->
</body>
Any thoughts? The website has more to it obviously, but that's the main thing I'm struggling with currently.
I have a <Div> that I would like 2 images to be displayed in. The first one set in the top left and the other at the bottom right.
Ideally i'd like to do this on <Div> so that the content sits in it also and goes over the images.
I have managed to get the top left image in but I cant figure out how to get the bottom one in.
My CSS is
.tab-content > .tab-pane,
.pill-content > .pill-pane
{
display: none;
background-image: url("../images/brand/QuotationOpen.JPG");
background-repeat: no-repeat;
padding-top: 50px;
padding-left: 25px;
}
My HTML is
<div class="row">
<div class="col-md-12">
<ul class="nav nav-GP col-sm-3 col-md-4">
<li>Intelligent</li>
<li>Principled</li>
<li>Personal</li>
<li>Focused</li>
<li>Straightforward</li>
<li>Energetic</li>
</ul>
<div class="tab-content col-sm-9 col-md-8">
<div class="tab-pane active">
<h2>Heading 2</h2>
<p>Content here</p>
</div>
<div class="tab-pane" id="Intelligent">
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<p>Content here</p>
</div>
</div>
</div>
</div>
And this give me
I need to get the following image in the bottom right which also allows the text to over-run it
The image below is a mock-up I did in paint to show what i'm after
You can also do this by assigning two background images to the div.
.quote {
background-image: url("http://i.stack.imgur.com/kXynJ.jpg"), url("http://i.stack.imgur.com/aduet.jpg");
background-repeat: no-repeat, no-repeat;
background-position: top left, bottom right;
height: 200px;
width: 400px;
}
<div class="quote">Here is some text.</div>
If anyone is interested in a solution without the framework css-classes i created a demo jsfiddle:
http://jsfiddle.net/q5dn5589/
HTML:
<div class=wrapper>
<img src="http://i.stack.imgur.com/Smqyd.jpg">
<img class="image2" src="http://i.stack.imgur.com/aduet.jpg">
</div>
CSS:
.wrapper {
position: relative;
width: 499px;
height: 213px;
border: 1px black solid;
}
.image2 {
position: absolute;
bottom: 0;
right: 0;
}
solved it
try positioning two images absolutely and position its accordingly!
See jSfiddle
css
img.first {
position:absolute;
top:0;
left:0;
z-index:-999px;
}
img.second {
position:absolute;
bottom:0;
right:0;
z-index:-999px;
}
Snippet (see it full-screen for effect)
/* Latest compiled and minified CSS included as External Resource*/
/* Optional theme */
#import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
body {
margin: 10px;
}
.tab-content > .tab-pane, .pill-content > .pill-pane {
border:1px solid #ccc;
padding-top: 50px;
padding-left: 25px;
}
.tss {
position:relative;
display: flex;
height:300px;
}
h2 {
z-index:999;
display:block;
}
img.first {
position:absolute;
top:0;
left:0;
z-index:-999px;
}
img.second {
position:absolute;
bottom:0;
right:0;
z-index:-999px;
}
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div class="row">
<div class="col-md-12">
<ul class="nav nav-GP col-sm-3 col-md-4">
<li>Intelligent
</li>
<li>Principled
</li>
<li>Personal
</li>
<li>Focused
</li>
<li>Straightforward
</li>
<li>Energetic
</li>
</ul>
<div class="tss tab-pane" id="Intelligent ">
<h2>Heading 2</h2>
<img class="first" src="http://i58.tinypic.com/1zm2tmp.jpg" border="0" alt="Image and video hosting by TinyPic">
<img class="second" src="http://i62.tinypic.com/dyoopu.jpg" border="0" alt="Image and video hosting by TinyPic">
</div>
</div>
</div>
</div>
Hello guys I'm trying to centre some images. They keep on floating to the left,I've tried text-aligning but it doesn't seem to work. THe jsfiddle is here. http://jsfiddle.net/E7Ydz/2/ P.S. I could probably do this when I've had some sleep, it's 5:56 in London :(
[HTML]
<div id="portfolio" style="height: 3020px;">
<div id="project" class="cms design html-css " data-col="1" data-row="0" style="right: 0px; opacity: 1; top: 0px;">
<div id="workEntry1" class="workEntry">
<div id="thumbAttachment">
<div id="inThumb">
<img src="http://www.enjoythis.co.uk/wp-content/files_mf/work_thumbnail275.jpg">
</div>
<div id="blackCross"> <img src="http://www.enjoythis.co.uk/wp-content/themes/enjoyThis/images/thumb_transparency.png"></div>
</div>
<!--<div id="attachmentShadowThumb"></div>-->
<div id="workTitle">
</div>
<div id="workTags">
</div>
</div>
</div>
<div id="project" class="design illustration html-css " data-col="2" data-row="0" style="right: 0px; opacity: 1; top: 0px;">
<div id="workEntry2" class="workEntry">
<div id="thumbAttachment">
<div id="inThumb">
<img src="http://www.enjoythis.co.uk/wp-content/files_mf/work_thumbnail2.jpg">
</div>
<div id="blackCross"> <img src="http://www.enjoythis.co.uk/wp-content/themes/enjoyThis/images/thumb_transparency.png"></div>
</div>
<!--<div id="attachmentShadowThumb"></div>-->
<div id="workTitle">
</div>
<div id="workTags">
</div>
</div>
</div>
<div id="project" class="app database design " data-col="0" data-row="1" style="right: 0px; opacity: 1; top: 0px;">
<div id="workEntry3" class="workEntry">
<div id="thumbAttachment">
<div id="inThumb">
<img src="http://www.enjoythis.co.uk/wp-content/files_mf/pgtips_thumb37.jpg">
</div>
<div id="blackCross"> <img src="http://www.enjoythis.co.uk/wp-content/themes/enjoyThis/images/thumb_transparency.png"></div>
</div>
<!--<div id="attachmentShadowThumb"></div>-->
<div id="workTitle">
</div>
<div id="workTags">
</div>
</div>
</div>
[css]
#project{
float:left;
position:relative;
padding: 0px 0px 0px 2px;
height:200px;
width:309px;
display: inline;
}
.workEntry{
width:310px;
overflow:hidden;
}
#thumbAttachment{
float:left;
width: 310px;
height:200px;
overflow: hidden;
}
#inThumb{
float:left;
}
#blackCross{
float:left;
width: 310px;
height:200px;
margin-top:-200px;
khtml-opacity:0;
-moz-opacity:0;
-ms-filter:"alpha(opacity=0)";
filter:alpha(opacity=0);
opacity:0;
}
#blackCross:visited{
khtml-opacity:0;
-moz-opacity:0;
-ms-filter:"alpha(opacity=0)";
filter:alpha(opacity=0);
opacity:0;
}
#blackCross:hover{
khtml-opacity:1;
-moz-opacity:1;
-ms-filter:"alpha(opacity=100)";
filter:alpha(opacity=100);
opacity:100;
}
Hope I understand your question well. You should use margin-left: auto; and margin-right: auto; to make a div (or in a better word, a block position element) center.
For instance you should change your css code to something like:
#inThumb{
margin-left: auto;
margin-right: auto;
}
See this jsFiddle: http://jsfiddle.net/E7Ydz/4/
Why tooltip (on hover) is coming on wrong place in Firefox and IE, Chrome is fine
Example http://dabblet.com/gist/3450459
CSS
.hiq-checkin img { float: left;display: block;margin-right: -2px;}
.visited-profile {float: left;}
.visited-profile a {color: #333 !important;text-decoration:none;position: relative;}
.green-badge {position: relative;z-index: 601;background: url('http://png-3.findicons.com/files//icons/1689/splashy/16/check.png') no-repeat;width: 10px;height: 15px;display: inline-block;float: none;}
.idea-ttip-wrapper {position: absolute;width: 156px;z-index: 602;margin-top: -8px;display: none;margin-left: -53px;}
.ttip-arrow {background: url('http://www.splitbrain.org/_static/ico/semlabs/ico/arrow_up.png');height: 7px;width: 11px;position: absolute;left: 23px;top: -5px;}
.idea-ttip-content {background: #ffffcc;border: 2px solid #cccc99;display: inline-block;text-decoration: none;color: #666;padding: 6px;font-size: 10px;}
.visited-profile a:hover .idea-ttip-wrapper, .visited-profile a:focus .idea-ttip-wrapper { display: block;}
HTML
<div class="hiq-checkin row-id">
<div class="visited-profile without-photo">
<a href="#">
<span class="green-badge"></span> XXXXX,
<div class="idea-ttip-wrapper">
<div class="ttip-arrow"></div>
<div class="idea-ttip-content">
xxxxx xxxxx<br>
lorem for ipsum xxx
</div>
</div>
</a>
<a href="#">
ZZZZZ,
</a>
<a href="#">
<span class="green-badge"></span> ACSCS
<div class="idea-ttip-wrapper">
<div class="ttip-arrow"></div>
<div class="idea-ttip-content">
xxxxx xxxxx<br>
lorem for ipsum xxx
</div>
</div>
</a>
<span style="line-height: 2.5;"> edfsfsfsdn sdfdsf fsdsdfdfs </span>
</div>
</div>
Add
.idea-ttip-wrapper {
//your existant css rules
left:0;
margin-left:0;
top:10px; //tweak this to whatever you need
}
And
visited-profile a {
color: #333 !important;
text-decoration: none;
position: relative;
display: inline-block;
}
http://dabblet.com/gist/3451092