In this fiddle, I have an image inside a wrapper in dark-blue, I want it to be 70% horizontally and vertically aligned relative to its wrapper.
I tried to use table-cell and it seems does not work.
HTML:
<div id="menu_content">
<div id="menu_wallet">
<div id="menu_mywallet">
<div id="wallet_logo_new">
<div id="wallet_logo_new_padding">
<img src="https://imagizer.imageshack.us/v2/849x565q90/833/uua2.jpg" id="img_wallet_logo_new" />
</div>
</div>
<div id="wallet_txt">Test</div>
</div>
</div>
</div>
CSS:
#menu_content {
height: 70%;
width: 100%;
position: relative;
border: 0px solid blue;
}
#menu_wallet {
overflow: hidden;
height: 35%;
width: 100%;
display:table;
background-color: #416DB4;
width: 85%;
margin-left: auto;
margin-right: auto;
border-radius: 0.3em;
}
#wallet_logo_new {
display: table-cell;
vertical-align: middle;
width: 50%;
}
#wallet_logo_new_padding {
position: relative;
height: 70%;
width: 70%;
margin: auto;
background-color: #1F58A5;
border-radius: 5px;
display: table;
}
#img_wallet_logo_new {
//margin-top:15px;
width: 20%;
//height: 20%;
//width: 60px;
//height: 60px;
position: relative;
}
#wallet_txt {
display: table-cell;
vertical-align: middle;
font-size: 3em;
color: #FFFFFF;
width: 50%;
}
Is this what you want?
#wallet_logo_new_padding img
{
position: relative;
width: 70%;
margin-left: 15%;
margin-right: 15%;
}
Related
I want to align the bottom of my mat icon and that of the img next to it. I've tried multiple things, and this is what it currently looks like:
Here's my HTML:
<div class="container">
<p class="triage"><mat-icon>assignment_ind</mat-icon></p>
<p class="O2"><img src="../../assets/med_O2.png"></p>
</div>
CSS:
.O2, .triage{
display: inline-block;
vertical-align: middle;
}
.container img {
width: 50px;
height: 50px;
}
.container mat-icon{
font-size: 60px;
width: 60px;
}
Use line-height:
.container
{
line-height: 60px; //or what ever height your container is
}
Can you push mat-icon down with a little bit of margin or padding?
.container mat-icon{
font-size: 60px;
width: 60px;
margin-top: 5px;
}
What about something like this?
<style>
.container {
position: relative;
width: 65px;
height: 100px;
}
p.triage {
background: blue;
width: 30px;
height: 40px;
position: absolute;
bottom: 0;
right: 0;
}
p.O2 {
width: 30px;
height: 20px;
background: red;
position: absolute;
bottom: 0;
left: 0;
}
</style>
<div class="container">
<p class="triage"></p>
<p class="O2"></p>
</div>
I am currently working on a webpage featuring some jQuery-UI sliders, but I am having trouble properly aligning all of the things.
HTML:
<div class="row">
<div id="hue"><img src="download.png" class="hue" /></div>
<div id="mixedColor"></div>
</div>
<div class="rowVert">
<div class="vert" id="CSVhue"></div>
<div class="vert" id="CSVsat"></div>
<div class="vert" id="CSVbright"></div>
</div>
CSS:
#hue {
display: block;
width: 90%;
float: left;
margin: 0 auto;
margin-top: 37px;
}
.hue {
height: 12px;
width: 100%;
}
#mixedColor {
display: block;
width: 100px;
height: 100px;
border: 1px solid black;
float: right;
}
.vert {
margin-top: 100px;
}
But without any success.
Here is a JSFiddle: http://jsfiddle.net/npL866zz/1/
How I want it:
Please note my webpage is optimized for IE7, so all commands must be optimized for this one browser.
Here is something you could work with
Fiddle demo
#hue {
margin-top: 50px;
margin-right: 110px;
overflow: hidden;
}
.hue {
height: 17px;
width: 100%;
}
#mixedColor {
position: absolute;
right: 10px;
top: 10px;
width: 100px;
height: 100px;
border: 1px solid black;
}
.rowVert {
padding-top: 40px;
padding-right: 110px;
padding-left: 20%;
}
.vert {
float: left;
margin-left: 14%;
width: 15px;
height: 100px;
}
I have a layout frame of small widget with top navbar and bottom navbar. Inside that widget i have items and in one of them i have to put another layout(same as parent). This is small example of mine css problem, where footer in child layout is not in the bottom.
.body{
position: static;
width: 100%;
height: 100%;
}
.header{
position: absolute;
top: 0px;
}
.footer{
position: absolute;
bottom: 0px;
}
.main{
position: relative;
width: 100%;
height: 100%;
padding-top: 50px;
padding-bottom: 50px;
}
.item{
position: relative;
width: 100%;
}
.view{
height: 100%;
}
this dont get the height of height in parent widget, how can i fix that?
I manage to build the layout i want without any kind of positions, i removed all of them. I use:
display: table;
display: table-row;
for mine layout and it works perfectly. Here is the example of what i did. Below is general css of what i did.
.body{
height: 100%;
display: table;
width: 100%;
text-align: center;
}
.header{
display: table-row;
width: 100%;
height: 50px;
background-color: blue;
}
.footer{
display: table-row;
bottom: 0px;
width: 100%;
height: 50px;
background-color: grey;
}
.main{
display: table;
width: 100%;
height: 100%;
}
.item{
display: table-row;
width: 100%;
}
.fullExtend{
height: 100%;
}
html, body { height: 100%; }
Class body is container for widget, header and footer is for header and footer for each widget, main is the body of widget, item is part of main which can be widget and fullExtend is item which height get maximum space left in page.
Do you want to achieve something like this?
Edit: I refined your structure a bit. You want to achieve this?
HTML :
<div class="main-header">
Main Header
</div>
<div class="wrapper">
<div class="item item-1">
<div class="header">
Item 1 Header
</div>
<div class="item-content">
<div class="item item-2">
Item 2
</div>
</div>
<div class="footer">
Item 1 Footer
</div>
</div>
</div>
<div class="main-footer">
Main Footer
</div>
CSS:
html{
height: 100%;
}
body{
margin: 0;
padding: 0;
height: 100%;
}
.main-header{
position: absolute;
top: 0px;
background-color: blue;
width: 100%;
height: 50px;
line-height: 50px;
color: white;
text-align: center;
}
.main-footer{
position: absolute;
bottom: 0px;
background-color: grey;
width: 100%;
height: 50px;
line-height: 50px;
color: white;
text-align: center;
}
.wrapper{
position: relative;
padding: 50px 0;
box-sizing: border-box;
height: 100%;
}
.header{
position: absolute;
top: 0px;
width: 100%;
height: 50px;
background-color: darkblue;
color: white;
}
.footer{
position: absolute;
bottom: 0px;
width: 100%;
height: 50px;
background-color: darkgrey;
color: white;
}
.item{
position: relative;
width: 100%;
height: 100%;
}
.item-view{
height: 100%;
position: absolute;
width: 100%;
padding-top: 50px;
box-sizing: border-box;
}
.item-content{
position: relative;
top: 50px;
}
here is the HTML code i am using:
<div id="header">123</div>
<div id="editorcontent">
<div id="ta_a"><textarea style="resize: none;"><? echo $t1; ?></textarea></div>
<div id="ta_c"><textarea style="resize: none;"><? echo $t2; ?></textarea></div>
<div id="centerinfo">CONTENT 1</div>
<div id="clear"></div>
<div id="centerinfo">CONTENT 2</div>
<div id="ta_b"><textarea style="resize: none;"><? echo $u1; ?></textarea></div>
<div id="ta_d"><textarea style="resize: none;"><? echo $u2; ?></textarea></div>
</div>
and the CSS:
#editorcontent {
min-height: 400px;
min-width: 800px;
overflow: hidden;
position: relative;
height: auto;
width: 100%;
}
#ta_a {
position: relative;
width: 40%;
height: 50%;
float: left;
}
#ta_c {
position: relative;
width: 40%;
height: 50%;
float: right;
}
#ta_b {
position: relative;
width: 40%;
height: 50%;
float: left;
}
#ta_d {
position: relative;
width: 40%;
height: 50%;
float: right;
}
#centerinfo {
text-align: center;
position: relative;
width: 19.6%;
height: 40%;
display: inline-block;
}
#clear {
clear:both;
min-height: 10px;
}
#header {
height: 44px;
background: #D00000;
}
The problem is that the 2 times 50% from the textareas are not not looking at the header causing the page always to be too large in height...
Fiddle http://jsfiddle.net/5SD2U/
To accomplish this, you need either javascript/jQuery or a CSS hack. I made a fiddle with the CSS hack. It involves setting your #editorcontent div to 100%, adding a header_placeholder div, and setting the header's position to absolute. Also keep in mind that you will always have to manually set the height of the header and the placeholder to the same number.
Also you have to set the body and html to padding: 0, margin: 0, width: 100%, and height: 100%, else this probably won't work in all browsers.
Here is the working fiddle:
http://jsfiddle.net/5SD2U/1/
And here is the code for reference:
The HTML:
<div id="header">123</div>
<div id="editorcontent">
<div id="header_placeholder"></div>
<div id="ta_a"><textarea style="resize: none;">1</textarea></div>
<div id="ta_c"><textarea style="resize: none;">2</textarea></div>
<div id="centerinfo">CONTENT 1</div>
<div id="clear"></div>
<div id="centerinfo">CONTENT 2</div>
<div id="ta_b"><textarea style="resize: none;">3</textarea></div>
<div id="ta_d"><textarea style="resize: none;">4</textarea></div>
</div>
And the CSS
body, html {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
}
#editorcontent {
height: 100%;
min-width: 800px;
overflow: hidden;
position: relative;
height: auto;
width: 100%;
}
#header_placeholder {
height: 44px; /* height of the header */
}
#ta_a {
position: relative;
width: 40%;
height: 50%;
float: left;
}
#ta_c {
position: relative;
width: 40%;
height: 50%;
float: right;
}
#ta_b {
position: relative;
width: 40%;
height: 50%;
float: left;
}
#ta_d {
position: relative;
width: 40%;
height: 50%;
float: right;
}
#centerinfo {
text-align: center;
position: relative;
width: 19.6%;
height: 40%;
display: inline-block;
}
#clear {
clear:both;
min-height: 10px;
}
#header {
height: 44px;
background: #D00000;
position: absolute;
width: 100%;
I have a DIV who's borders are made up of images. What I'm trying to do is have this DIV auto expand (in height only) whenever the content does not fit the content area. Otherwise it should just use the min-height. Here is my markup:
XHTML:
<div id="alerts">
<div id="alerts-top"></div>
<div id="alerts-left"></div>
<div id="alerts-content">
<div id="alerts-header">
<p>Alerts</p>
</div>
<div id="alerts-main">
<!-- content in here -->
</div>
</div>
<div id="alerts-right"></div>
<div id="alerts-bottom"></div>
</div>
CSS:
#alerts { float: left; width: 267px; height: 200px; }
#alerts #alerts-top { float: left; background: url(../images/alerts-top.png) no-repeat; height: 12px; min-width: 257px; }
#alerts #alerts-left { float: left; background: url(../images/alerts-left.png) repeat-y; height: 100%; width: 12px; }
#alerts #alerts-content { float: left; min-width: 239px; height: 206px; min-height: 206px; }
#alerts #alerts-content #alerts-header { background: url(../images/alerts-bell.png) no-repeat; height: 20px; width: auto; padding: 10px; }
#alerts #alerts-content #alerts-main { background-color: #FFFFFF; height: auto; }
#alerts #alerts-right { float: left; background: url(../images/alerts-right.png) repeat-y; height: 100%; width: 12px; }
#alerts #alerts-bottom { float: left; background: url(../images/alerts-bottom.png) no-repeat; height: 11px; width: 258px; }
This isn't working for me - there is a gap between the bottom border and the left and right borders. The content area is #alerts-main.
Try this for #alerts-bottom:
#alerts #alerts-bottom {
float: left;
background: url(../images/alerts-bottom.png) no-repeat;
height: 11px;
width: 258px;
margin-top: -9px;
}
With a negative value for margin-top property you control how the div will be displayed (in this case you'll force the #alerts-bottom div to be rendered 9px above the default display).
Hope it helps.
After a "five minutes" consideration I've wrote this code and it will do what you want. Just change the styles to add the images as backgrounds. First the CSS:
#wrapper { position: relative; width: 500px; min-height: 350px; }
#alerts { position: relative; height: 50px; background-color: red; width: 90%; text-align: center; margin: auto; margin-top: 10px; margin-bottom: 10px; }
#top-margin { position: absolute; height: 10px; top: 0; background-color: gray; width: 100%; }
#right-margin { position: absolute; width: 10px; right: 0; background-color: gray; height: 100%; }
#bottom-margin { position: absolute; height: 10px; bottom: 0; background-color: gray; width: 100%; }
#left-margin { position: absolute; width: 10px; left: 0; background-color: gray; height: 100%; }
#content { text-align: justify; padding: 65px 20px 20px 20px; }
And the HTML:
<div id="wrapper">
<div id="top-margin">
<div id="alerts">Alerts alerts alerts</div>
</div>
<div id="right-margin"></div>
<div id="bottom-margin"></div>
<div id="left-margin"></div>
<div id="content">Lorem ipsum dolor sit amet etc...</div>
</div>
The #wrapper's height will expand as more text is added. Sorry that I've changed the names of the Ids and justified the text. But that can easily be remedied.