How to place an image between a fixed header/footer and prevent overlap?
How to centre an image on the page when the window is bigger than its max-width/height?
The current working example: http://john-marshall.net
CSS
#content {
position:relative;
}
#headerwrap {
position:fixed;
width: 100%;
height:60;
background-color:#fff;
z-index:99;
}
#header {
border-top: 1px solid #000;
margin:20 20 0 20;
}
#title {
font-size:15px;
font-family: "Fugue-Regular";
font-weight:100;
padding-top:5px;
}
#footerwrap {
position:fixed;
width: 100%;
height:60;
bottom:0;
background-color:#fff;
z-index:99;
}
#footer {
border-bottom: 1px solid #000;
height:40;
margin:0 20 20 20;
}
/*gallery*/
#gallerywrap{
position:fixed;
margin:60 20 60 20;
text-align: center;
}
#gallery{
width:100%;
height:auto;
}
.img {
max-width: 100%;
max-height: 100%;
}
HTML
<body>
<div id="content">
<div id="headerwrap">
<div id="header">
<div id="title">John Marshall</div>
<div id="menuli">
<ul>
<li>Project 1</li>
</ul>
</div>
</div>
</div>
<div id="gallerywrap">
<div id="gallery">
<img src="http://john-marshall.net/images/selected/cafe.jpg" class="img" alt="Cafe" />
</div>
</div>
<div id="footerwrap">
<div id="footer">
</div>
</div>
CSS :
#gallery{
width:100%;
height:auto;
margin:0px auto;
}
try this and check your margin in #gallerywrap.
Make the following changes to your css :
#gallerywrap {
position: fixed;
margin: 60px 0px 60px 0px;
text-align: center;
width: 100%;
}
Is this the effect you are looking for ?
Related
I am left with 2 labels and can't find solution.
I have done this much HTML and CSS
<div id="incoming_call" class="bottom_toolbar_incoming_call" style="bottom:90px; position: fixed; right: 3px; z-index: 9999; height:45px; width:250px; background-color:lightgray;">
<img src="http://findicons.com/files/icons/766/base_software/128/circle_red.png" alt="Answer" style=" width:40px; height:40px; display: inline-block; padding:2px; left:200px; position: relative;" id="Reject" />
<img src="http://findicons.com/files/icons/766/base_software/128/circle_green.png" alt="Answer" style=" width:40px; height:40px; display: inline-block; padding:2px; left:100px; position: relative;" id="answer" />
</div>
I would put the images inside a position:absolute div like this
#incoming_call{
border: 2px solid black;
}
#call{
color:green;
}
#images{
position:absolute;
top:0px;
}
<div id="incoming_call" class="bottom_toolbar_incoming_call" style="bottom:90px; position: fixed; right: 3px; z-index: 9999; height:45px; width:250px; background-color:lightgray;">
<div id="call">call from 7040</div>
<div id="time">0:01</div>
<div id="images">
<img src="http://findicons.com/files/icons/766/base_software/128/circle_red.png" alt="Reject" style=" width:40px; height:40px; display: inline-block; padding:2px; left:200px; position: relative;" id="Reject" />
<img src="http://findicons.com/files/icons/766/base_software/128/circle_green.png" alt="Answer" style=" width:40px; height:40px; display: inline-block; padding:2px; left:100px; position: relative;" id="answer" />
</div>
</div>
Try this way:
Takes care of vertical alignment (as it appears in your design)
Content height adjusts according to adjacent column
No browser issues as well
Red and Green color using CSS - Hence no images required
.parent-container {
width: 320px;
}
.box {
border: 2px solid #000;
display: table;
width: 100%;
table-layout: fixed;
border-collapse: collapse;
}
.box__cell {
display: table-cell;
width: 50%;
vertical-align: middle;
padding: 0 15px;
}
ul {
padding: 0;
list-style-type: none;
}
.circle {
width: 20px;
height: 20px;
border-radius: 50%;
border: 2px solid #000;
}
.b-red {
background: red;
}
.b-green {
background: green;
}
.t-green {
color: green;
}
.text-right {
text-align: right;
}
.list-item li {
display: block;
}
.list-inline li {
display: inline-block;
}
<div class="parent-container">
<div class="box">
<div class="box__cell box__cell--left">
<div id="incoming_call">
<ul class="list-item">
<li class="t-green">Incoming Call</li>
<li><b>00: 05</b></li>
</ul>
</div>
</div>
<div class="box__cell box__cell--left">
<ul class="list-inline text-right">
<li class="circle b-red">
</li>
<li class="circle b-green">
</li>
</ul>
</div>
</div>
</div>
I am trying to create a list that will show messages. The image below is what I wish to achive. Check the codepen for how it looks as of now!:
As you can see apart of the ui jumps up as it it utilizing float. I can't set a fixed height on the avatar red area as the message area can vary in height (basically the whole message can vary in size). I've gotten it to work by removing the float on the text-container however I'm not able to lineup the green arrow then. Any ideas?
Hree is codepen code for yous to fiddle with!
html:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<div class="center">
<ol id="holder" class="scroll" style="background:pink;">
<li class="message">
<div class="thumb-fav-container">
<div class="thumb-fav-row">
<div class="thumb">
</div>
<div class="thumb-fav-num">
1000
</div>
</div>
<div class="thumb-fav-row">
<div class="fav">
</div>
<div class="thumb-fav-num">
0
</div>
</div>
</div>
<div class="message-avatar-container">
<div class="message-avatar">
</div>
</div>
<div class="text-container">
message
<br>1
<br>2
<br>3
<br>4
<br>5
<br>6
<br>6
<br>6
<br>6
<br>6
<br>6
<br>6
<br>6
</div>
<div class="text-arrow">
</div>
</li>
<li class="message">
<div class="thumb-fav-container">
<div class="thumb-fav-row">
<div class="thumb">
</div>
<div class="thumb-fav-num">
1000
</div>
</div>
<div class="thumb-fav-row">
<div class="fav">
</div>
<div class="thumb-fav-num">
0
</div>
</div>
</div>
<div class="message-avatar-container">
<div class="message-avatar">
</div>
</div>
<div class="text-container">
message
<br>1
<br>2
<br>3
<br>4
</div>
<div class="text-arrow">
</div>
</li>
</ol>
</div>
</body>
</html>
css:
/* Styles go here */
div.center
{
max-width: 1200px;
width: 1000px;
min-width:800px;
display: block;
margin-left: auto;
margin-right: auto;
}
ol {
list-style-type: none;
padding: 0em;
margin: 0em;
}
li {
display: inline;
margin: 0em;
padding: 0em;
left: 0em;
}
message {
background: red;
width: 100%;
height: auto;
}
div.thumb-fav-container {
margin-top: 20px;
float:left;
padding:10px;
width:70px;
background: lime;
}
div.thumb-fav-row {
height:20px;
margin-left:5px;
margin-bottom:5px;
background: silver;
}
div.thumb {
float:left;
width:20px;
height:20px;
background-image:url('https://upload.wikimedia.org/wikipedia/commons/thumb/e/ef/Thumbs_up_font_awesome.svg/512px-Thumbs_up_font_awesome.svg.png');
background-size: contain;
}
div.fav {
float: left;
width:20px;
height:20px;
background-image:url('https://upload.wikimedia.org/wikipedia/commons/7/73/Farm-Fresh_star.png');
background-size: contain;
}
div.thumb-fav-num {
float: left;
margin-left:10px;
text-align: center;
background: pink;
}
div.text-container {
float:left;
margin-left:10px;
margin-top: 10px;
width:700px;
padding:20px;
background: silver;
}
div.text-arrow {
margin-top:20px;
float:left;
width: 0;
height: 0;
border-bottom: 30px solid transparent;
border-left: 30px solid lime;
border-top: 30px solid transparent;
}
div.message-avatar-container {
float:right;
padding:10px;
margin-top: 20px;
width:100px;
height:70px;
background: red;
}
div.message-avatar {
float:left;
width:50px;
height:50px;
background-image:url('http://findicons.com/files/icons/1072/face_avatars/300/a04.png');
background-size: contain;
}
Little mistake in your CSS:
Instead of:
message {
background: red;
width: 100%;
height: auto;
}
You should have:
.message {
clear:both;
float:left;
height: auto;
}
This yields the expected output (demo):
I have page with a header, left and right content and a footer. I have the left side bar to fill the first screen but then when the content in the right causes a need for a scroll bar the left sidebar does not extend down. I have tried min and max height and setting the overflow to hidden, but I can't seem to figure it out.
Here is my CSS:
html {
height: 100%;
}
body {
background:#FFF;
margin:0px;
}
#container {
position: relative;
margin: auto auto;
width: 100%;
height:100%;
}
#header {
height: 55px;
padding: 0 14px ;
}
#navigation {
background:#a4c2c2;
color: #990000;
}
#navigation a {
font:10px arial;
color: #285151;
text-decoration:none;
letter-spacing:0.1em;
height:15px;
}
#navigation a:hover {
color: #285151;
background-color: #D9E6E6;
height: 15px;
background-position: center center;
padding-top: 8px;
padding-right: 7px;
padding-bottom: 8px;
padding-left: 7px;
}
#sidebar {
background:#a4c2c2;
width:231px;
font:12px georgia;
color: #336666;
line-height:18px;
float:left;
position: absolute;
overflow:hidden;
z-index:-1;
height:100%;
min-height:auto;
}
#sidebar div {
height:2000px;
}
#rightside {
float: left;
width: 500px;
height:100%;
margin-left:231px;
padding: 10px 0px 0px 25px;
}
#maincontent {
background:#fff;
font:11px arial;
line-height:20px;
color:#333333;
padding: 10px 0 0 0;
text-align:justify;
}
#footer {
background:#999966;
z-index: 1;
position: fixed;
left:0px;
bottom:0px;
width:100%;
padding-left: 231px;
font:11px arial;
line-height:20px;
color:#333333;
}
and my HTML:
<html>
<body>
<div id="container">
<div id="header" class="logo">
Header Content
</div>
<div id="navigation" height="36">
Navigation Information
</div>
<div id="sidebar" height=100%>
Left side content
</div>
<div id="rightside">
Page Content
</div>
<br class="clearfloat" />
<div id="footer">
Footer information
</div>
</div>
</body>
</html>
You need to place left and right div inside one container div. Modify Above code with below content, 100% it works.
Add this in CSS:
.sidebar {
background:#a4c2c2;
width:231px;
font:12px georgia;
color: #336666;
line-height:18px;
float:left;
position: absolute;
/*overflow:hidden;*/
z-index:-1;
/*height:100%;*/
min-height:auto;
}
Comment sidebar and rightside div and add
<div class="sidebar">
<div class="sidebar">Left side content</div>
<div id="rightside">Page Content</div>
</div>
You need to add a container for the sidebar AND the content. I call it ".content_container":
<div class="content_container">
<div id="sidebar"> Left side content </div>
<div id="rightside"> Page Content </div>
</div>
Here is the css:
.content_container {
border:2px solid red;
overflow: auto;
height:100%;
}
In this way, when the content on the right goes down, the height of the sidebar follows it.
http://jsfiddle.net/5xko3yen/1/
I have a menu bar at the top of an application with 3 sections. Icons on the left, Icons in the center, and an icon on the right. I can easily float left and float right the respective sections, but I don't know how to float a center section.
I have attached screen shots of the desired outcome, and what I am currently getting.
The problem is that the number of icons in the left and center sections will change all the time.
This is my Desired outcome
vs
My actual Outcome
I am using the same icons in my example, but the left is in the correct place, the logout button is on the correct side, but pushed down, the middle section is all screwed up.
Thank you for any help.
<body>
<div id="content">
<div id="menuBar">
<div id="menuBarContent">
<div class="homeIconDiv menuBarHardIconDiv floatLeft">
<img class="menuBarIcon" src="images/icons/home.png" />
</div>
<div class="backIconDiv menuBarHardIconDiv floatLeft">
<img class="menuBarIcon" src="images/icons/home.png" />
</div>
<div class="menuBarSoftIconDiv">
<img class="menuBarIcon" src="images/icons/home.png" />
</div>
<div class="menuBarSoftIconDiv">
<img class="menuBarIcon" src="images/icons/home.png" />
</div>
<div id="logoutIconDiv" class="floatRight">
<img class="logoutIcon" src="images/icons/logoutButton.png" />
</div>
</div>
</div>
<div id="mainContent" class="clear">
</div>
</div>
html
{
height:100%;
}
body
{
height:100%;
margin:0;
padding:0;
font-family: 'Montserrat', sans-serif;
}
.MSIQtextbox {
border: 1px solid #67AE3D;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
outline:0;
height:35px;
width: 375px;
padding-left:10px;
padding-right:10px;
}
.floatLeft
{
float:left;
}
.floatRight
{
float:right;
}
.center
{
text-align:center;
margin:0 auto;
}
.clear
{
clear:both;
}
#content
{
height:100%;
}
#menuBar
{
position:fixed;
top:0;
background-color:rgba(211,211,211,0.9);
height:64px;
box-shadow: 0px 2px 1px #888888;
margin-bottom:3px;
z-index:10000;
width:100%;
}
#menuBarContent
{
width:1020px;
margin: 0 auto;
}
#mainContent
{
width:1020px;
min-height:630px;
margin-left:auto;
margin-right:auto;
height:100%;
padding-top:3px;
}
.optionsDiv
{
color:White;
}
.menuBarHardIconDiv
{
height:64px;
width:64px;
border-right:1px solid #858585;
}
#logoutIconDiv
{
height:64px;
}
.menuBarHardIconDiv:hover
{
background-color:#F5F0E0;
box-shadow: 0px 0px 0px #888888;
}
img.menuBarIcon
{
position:relative;
top:50%;
left:50%;
margin-top:-12px;
margin-left:-12px;
}
img.logoutIcon
{
position:relative;
top:50%;
margin-top:-12px;
}
.center {margin-left:auto; margin-right:auto;}
http://jsfiddle.net/PRAPc/
I want a search icon like this rendered in the beginning of the textbox and I can't get the following to work. Please help.
html:
<body class="claro" data-maq-flow-layout="true" data-maq-comptype="desktop" data-maq-ws="collapse" style="margin-top:0" id="myapp" data-maq-appstates="{}">
<div id="top_bar">
<div style="width: 900px; height:50px; margin-left: auto; margin-right: auto;">
<a href="/" class="logo logo_a">
<div class="logo">
</div>
</a>
<div class="midArea_div">
<div class="searchBox_div">
<input type="text" data-dojo-type="dijit.form.TextBox" class="searchBox"></input>
</div>
</div>
</div>
</div>
<div id="top_bar_divider"></div>
<div data-dojo-type="dijit.layout.BorderContainer" persist="false" gutters="true" style="min-width: 1em; min-height: 1px; z-index: 0; width: 600px; height: 687px; margin-left: auto; margin-right: auto;" design="headline">
<div data-dojo-type="dijit.layout.ContentPane" extractContent="false" preventCache="false" preload="false" refreshOnShow="false" region="center" splitter="false" maxSize="Infinity">
</div>
</div>
</body>
js:
require([
"dijit/dijit",
"dojo/parser",
"maqetta/space",
"maqetta/AppStates",
"dijit/layout/BorderContainer",
"dijit/layout/ContentPane",
"dijit/form/TextBox"
]);
css:
html,body {
height: 100%;
width: 100%;
}
.logo_a{
background:url("icon1.png");
}
.logo{
width:60px;
height:50px;
display:inline-block;
vertical-align:middle;
}
.logo_a:active{
background-position:0 1px;
}
#top_bar{
padding:0px;
background: -webkit-linear-gradient(#464646, #121212);
background: -moz-linear-gradient(#464646, #121212);
background: -ms-linear-gradient(#464646, #121212);
background: -o-linear-gradient(#464646, #121212);
background: linear-gradient(#464646, #121212);
color: #ccc;
text-shadow:none;
height:50px;
width:100%;
}
#top_bar_divider{
background-color:#1ba0e1;
height:4px;
width:100%;
}
.searchBox{
height: 30px;
width: 400px;
padding-left:30px;
font-size:20px;
}
.searchBox_div{
display:inline-block;
verticle-align:middle;
background: #FFF url("http://app.maqetta.org/maqetta/user/CoQ/ws/workspace/project1/search_icon.png") no-repeat scroll 5px 6px;
}
.midArea_div{
margin-left: 100px;
verticle-align:middle;
display:inline-block;
}
.searchIcon{
}
Your current method doesn't work because the textbox is on top of its background so it isn't visible. You can do this using a pseudo-element on .searchBox_div (doesn't work in <= IE8).
jsFiddle
.searchBox_div {
position:relative;
}
.searchBox_div:before {
content:"";
display:block;
position:absolute;
background: url(http://app.maqetta.org/maqetta/user/CoQ/ws/workspace/project1/search_icon.png) no-repeat center center;
width:24px;
height:24px;
left:4px;
top:50%;
margin-top:-12px;
z-index:1;
}
Alternatively you could apply these styles to another div inside .searchBox_div to get around the IE8 issue at the cost of more markup.
jsFiddle
HTML
<div class="midArea_div">
<div class="searchBox_div">
<input type="text" data-dojo-type="dijit.form.TextBox" class="searchBox"></input>
<div class="overlay"></div>
</div>
</div>
CSS
.searchBox_div {
position:relative;
}
.overlay {
position:absolute;
background: url(http://app.maqetta.org/maqetta/user/CoQ/ws/workspace/project1/search_icon.png) no-repeat center center;
width:24px;
height:24px;
left:4px;
top:50%;
margin-top:-12px;
z-index:1;
}