In my example I need to keep header and main body to strech to a full screen when browser window is expanding (it works now). However, when browser window gets downsized, the orange image jumps down from the header and goes partially under black one. Any idea how to keep the orange image in place?
Here is my example: http://jsfiddle.net/RFMBM/
My CSS:
body {
background-color: #e8e8e8;
font-family: Arial, Helvetica, sans-serif;
font-size:12px;
padding: 0;
margin: 0;}
h1 {
padding: 0px;
margin: 0px;
}
#container {
margin:0px auto;
border:0px solid #bbb;
padding:10px;
min-width: 990px;
}
.white-box {
width: 180px;
margin: 0px;
}
#main-header {
border:1px solid #bbb;
height:98px;
padding:3px;
background-color: #fff;
min-width: 930px;
}
#main-content {
margin-top:10px;
padding-bottom:10px;
}
#main-body {
margin-left:10px;
width:666px;
height:150px;
}
#main-footer {
margin-top:10px;
margin-bottom:10px;
padding:10px;
border:1px solid #bbb;
}
.box {
padding: 8px;
border: 1px solid silver;
-moz-border-radius: 8px;
-o-border-radius: 8px;
-webkit-border-radius: 5px;
border-radius: 8px;
background-color: #fff;
}
.box1 {
width: 200px;
float: left;
}
.box2 {
margin-left: 224px;
}
div.left {
float: left;
}
div.right {
float: right;
margin-right:3px;
}
HTML:
<div id="main-header">
<div class="left"><img src="http://img89.imageshack.us/img89/2675/logoxnx.gif" border="0" alt=""></div>
<div class="right"><img src="http://img199.imageshack.us/img199/9759/banner2b.gif" border="0" alt=""></div>
</div>
<div id="container">
<div id="main-content">
<div class="box box1">
left
</div>
<div class="box box2">
<p>Main Body...</p>
</div>
<div style="clear:both;"></div>
</div>
<div id="main-footer">Main Footer</div>
</div>
You need to increase the min-width of #main-header to around 950px
http://jsfiddle.net/RFMBM/2/
Related
I am new due css & Html design. I am facing an issue in aligning text to center of a last div.
I have created js fiddle :http://jsfiddle.net/80sems56/
Please help aligning last div text "Stress" to center of last image.
Code is like:
<div>
<div id="imgWeight" class="floatLeft">
<img alt="Body Weight" class="icon110" src="../../images/OnTrack/bmi_icon_100.png"/>
<div class="textaligncenter">Body Weight</div>
</div>
<div id="imgBloodPressure" class="margin5 floatLeft">
<img alt="Blood Pressure" class="icon110" src="../../images/OnTrack/health_manager_icon_100.png"/>
<div class="textaligncenter">Blood Pressure</div>
</div>
<div id="imgStress" class="floatleft">
<img alt="Stress" class="icon110" src="../../images/OnTrack/stress_icon_100.png"/>
<div class="textaligncenter">Stress</div>
</div>
</div>
css
.
padding20px{
padding:20px;
}
.margin20px{
margin:20px;
}
.imgSteps{
padding:20px;
position:absolute;
}
.bckColor{
background-color: #secondary;
color:#white;
}
.fontfamily {
font-family: "Avenir Next Light";
}
h3{
color:grey;
}
.margin5 {
margin-left: 5%;
margin-right: 5%;
}
.margin15 {
margin-left: 15%;
}
.margin6{
margin-left: 6%;
}
.margin10 {
margin-left: 10%;
}
.margin50{
margin-left:50%;
}
.absPosition{
position: absolute;
}
.floatLeft{
float:left;
}
.shadow {
box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.4);
}
.opacity{
opacity: 0.3;
filter: alpha(opacity=30);
}
#dvNavigationArea ul li {
display: inline;
padding-right:20px;
width:100px;
position:relative;
}
.underline{
content:'';
height: 0;
left:0;
bottom:0px;
border-bottom: 4px solid #53ADB3;
}
/*for css chart control*/
.container {
width: 100px;
margin: 20px;
background: #fff;
padding: 20px;
float: left;
}
.horizontal .progress-bar {
height: 45px;
width: 100%;
padding: 12px 0;
}
.horizontal .progress-track {
width: 100%;
height: 20px;
background: #ebebeb;
}
.horizontal .progress-fill {
background: #666;
height: 20px;
width: 50%;
color: #fff;
text-align: center;
font-size: 12px;
line-height: 20px;
}
.fontColor{
color:#53ADB3;
}
.fontsizexlarge{
font-size: x-large;
}
.fontsizexxlarge{
font-size: xx-large;
}
.fontsize22{
font-size: larger;
}
.fontsize10{
font-size: large;
}
.icon110
{
background-color:#secondary;
-moz-border-radius:50%;
-webkit-border-radius:50%;
border-radius: 50%;
width:#col-size;height:#col-size;
}
.textaligncenter{
text-align:center;
}
.minwidth
{
}
You did the typo while assigning the class for the last div. Use floatLeft instead of floatleft (the letter l is culprit)
Js Fiddle
Your last div class name should be floatLeft instead of flaotleft.
<div id="imgStress" class="floatLeft">
Fiddle
* add this code *
.floatleft{
float: left;
text-align: center;}
http://jsfiddle.net/80sems56/3/
Your HTML has a mistake in. Your missing a capital 'L' on the floatLeft class.
Updated Fiddle
<div>
<div id="imgWeight" class="floatLeft">
<img alt="Body Weight" class="icon110" src="../../images/OnTrack/bmi_icon_100.png"/>
<div class="textaligncenter">Body Weight</div>
</div>
<div id="imgBloodPressure" class="margin5 floatLeft">
<img alt="Blood Pressure" class="icon110" src="../../images/OnTrack/health_manager_icon_100.png"/>
<div class="textaligncenter">Blood Pressure</div>
</div>
<div id="imgStress" class="floatLeft">
<img alt="Stress" class="icon110" src="../../images/OnTrack/stress_icon_100.png"/>
<div class="textaligncenter">Stress</div>
</div>
</div>
I've used bootstrap columns to setup the layout like a dashboard for a new business concept. I've got some progress bars that sit within a div, however trying order and fit the five bars is proving difficult without the fifth bar jumping out of the div. I'd like the bars stacked in the div with the labels sitting on top or next to the bars. Can you help please. Ps. the id's are just for changing the length of the progress bar.
The code for the bars is:
.container-for-bar{
border:1px solid gray;
height:12px;
width:100px;
padding:1px;
display: inline-block;
}
.bar{
background-color: purple;
width:50%; /*change this for progress*/
height: 100%;
}
.bar-text {
display:inline-block;
font-size: 12px;
}
.bar-text-top {
font-size: 12px;
}
.progress-bar-purple {
background-color: purple;
color: black;
}
/* Bootstrap progress bars*/
.progress-bar-text {
float: left; text-align: center;
padding-left: 2px;
}
.half-unit {
margin-bottom: 20px;
padding-bottom: 4px;
border: 1px solid #383737;
background-image:url('../img/sep-half.html');
background-color: #D8D8D8;
color:black;
height:130px;
padding: 5px;
}
.tipi {
}
.purple {
background-color: #5C005C;
color:white;
}
.half-unit:hover {
background-color: #4f4f4f;
-moz-box-shadow: 3px 3px 2px 0px #151515;
-webkit-box-shadow: 3px 3px 2px 0px #151515;
box-shadow: 3px 3px 2px 0px #151515;
}
.half-unit dtitle {
font-size:10px;
text-transform:uppercase;
color:#000000000000;
margin:0px;
padding:0px;
height:inherit
}
.half-unit hr {
border: 0;
border-top: 1px solid #151515;
border-top-style: dashed;
margin-top:0px;
}
.half-unit h1 {
font-family: 'Raleway', sans-serif;
font-weight:300;
font-size: 20px;
line-height: 1;
letter-spacing: 0px;
color: #000000000000;
padding-top:10px;
padding-left:5px;
margin-top:2px;
text-align:center;
}
.half-unit h4 {
padding-left:5px;
margin-top:2px;
font-size: 13px;
font-weight:lighter;
line-height: 1;
letter-spacing: 0px;
color: #000000;
}
.half-unit bold{
font-family: 'Open Sans', sans-serif;
font-size:26px;
font-weight:bold;
color:#000000;
vertical-align:middle;
}
.green {
background-color: 'green';
}
<div class="col-sm-3 col-lg-3">
<div class="half-unit tipi">
<dtitle>T.I.P.I</dtitle>
<hr>
<div class="col-sm-6">
<div class="bar-text-top"> Extroversion </div>
<div class="container-for-bar">
<div class="bar" id="Extroversion_bar"></div>
</div>
<div class="bar-text-top"> Conscientiousness </div>
<div class="container-for-bar">
<div class="bar" id="Conscientiousness_bar"></div>
</div>
</div>
<div class="col-sm-6">
<div class="bar-text"> Agreeableness </div>
<div class="container-for-bar">
<div class="bar" id="Agreeableness_bar"></div>
</div>
<div class="bar-text"> Calmness </div>
<div class="container-for-bar">
<div class="bar" id="Calmness_bar"></div>
</div>
<div class="bar-text"> Openess </div>
<div class="container-for-bar">
<div class="bar" id="Openess_bar"></div>
</div>
</div>
</div>
I split into rows and then columns, that seemed to work.
The slider at the top of my page does show up perfect in Chrome, but not in Firefox. How can I fix this problem?
I already uploaded a test of the page, in case you would like to have a look.
Test of page: http://www.s4ea.org/new/index.html
HTML:
<header class="header2">
<header class="second">
<div class="top_slider">
<div id="slider" class="aslider" data-duration="10" data-hide-controls>
<div class="aslide" data-duration="4" data-audio="assets/audio/Acoustic-Josh-10248_hifi.mp3" data-audio-loop>
<img src="https://lh6.googleusercontent.com/-kKIX7Bbp10U/UwlakWBTzII/AAAAAAAA1iU/FoYSNulL4Oo/s720/IMG_0003.JPG" />
</div>
<div class="aslide" data-duration="5" data-audio="assets/audio/Country_-Adrien_G-8614_hifi.mp3">
<img src="https://lh3.googleusercontent.com/-yRjbRGF3V5Q/UwlauwWKw-I/AAAAAAAA1jE/8EiHF1C5bvc/s720/IMG_0009.JPG" />
</div>
<div class="aslide" data-duration="6" data-audio="assets/audio/Driving_-SpoonZ-9705_hifi.mp3">
<img src="https://lh4.googleusercontent.com/-I0BvWvxsYos/Uwla55SXfeI/AAAAAAAA1j8/nH4M26dUtdw/s720/IMG_0016.JPG" />
</div>
<div class="aslide" data-duration="7" data-audio="assets/audio/I_Wouldn-duh-8326_hifi.mp3">
<img src="https://lh3.googleusercontent.com/-1OPZWOsQxTQ/UwlbHV7w9tI/AAAAAAAA1k0/FHocKwEtNuQ/s720/IMG_0023.JPG" />
</div>
</div>
</div>
<div class="logo">
<img src="http://www.s4ea.org/images/logor.jpg" width="100%" height="auto">
</div>
<div class="right">
<img src="http://www.s4ea.org/images/register3.jpg" height="100%" width="auto" />
</div>
</header>
</header>
CSS:
.ul {
width:50%;
list-style:none;
display:inline;
background-color:#FFF;
}
.ul li {
display: inline;
background-color:#FFF;
}
.second .top_slider {
width:40%;
background-color: #FFF;
float:left;
}
.second .top_slider .aslide {
display: none;
}
.second .top_slider .aslide img {
max-width: 100%;
height:auto;
}
.second .top_slider #slider {
width: 100%;
height: 600px;
}
.second .top_slider .aslide .text {
width: 200px;
margin: 0 auto;
color: #f8f8f8;
text-shadow: 0 0 2px #000;
font-weight: bold;
font-size: 36px;
width: 100%;
text-align: center;
position: absolute;
bottom: 30px;
font-family: sans-serif;
}
.second .logo {
width: 26.7%;
background-color: #FFF;
float:left;
padding-left:3.3%;
}
.second .right {
width:26.7%;
background-color: #FFF;
float:left;
overflow:hidden;
font-size:1em;
height:100%;
padding:0% 0% 0% 3.3%;
}
.second .right img {
margin:0px 0px 0px 0px;
width:100%;
height:auto;
}
.second .right ul li{
list-style:none;
line-height:0px;
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
}
.second .right ul {
list-style:none;
line-height:0px;
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
}
.second .right ul li img{
list-style:none;
line-height:0px;
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
height: 20%;
padding-top:5%;
width:auto;
}
A couple of issues
.second .top_slider .aslide img {
width: 100%;
height:auto;
}
.mainheader nav {
background-color: #FFFFFF;
float: left;
height: 10%;
width: 100%;
}
it seems the width of the images are not correct since you did not set a width and your nav just needed a float clear. I cleared it by making it a float but there are many other ways to do this
Please find below fiddle what i tried
http://jsfiddle.net/9LdEc/
code:
html:
<div id="CorpDealerSearch">
<div class="row">
<div class="left">
Quarter To Date
</div>
<div class="left">
914
</div>
<div class="left">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEYAAAAZCAYAAACM9limAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAACoSURBVFhH7dkhDoMwFIfxJ5EcieNwG5IZJJY7IDhCBTeYm0JCgviTEJaxAUnfbL8mdVVffn0VNTMT+7KBifVdYIdCmF8YhLm5KoQhjG+KIgYxiPEVQIyvFzMGMdI4ztuOWUmJaZpBef5QllUqilZl2SmE12WnpMK8C0zTor5/qq4DYWKuz/FMkmJiIhGGVynGyecMYhCDGF8BxPh6MWMQ86cY/pXO/0or0qcGh0OW3F8AAAAASUVORK5CYII=">
</div>
<div class="left">
<span>OFF TIER2</span>
</div>
</div>
</div>
css:
#CorpDealerSearch{
display:table;
padding : 5px;
border: 2px solid gray;
border-radius:3px;
}
.row{
display:table-row;
}
.left {
display:table-cell;
display:inline-block;
padding:5px;
}
But I want the design like the screenshot below. How can I modify the fiddle to get the design like this?
I need to do changes only for the last cell.
I have updated your fiddle:
http://jsfiddle.net/9LdEc/4/
I have added some of classes to your html and used the following css:
body {
font-family: Arial;
}
#CorpDealerSearch {
display:table;
padding : 5px;
border: 2px solid gray;
border-radius:5px;
vertical-align: middle;
line-height: 25px;
}
#CorpDealerSearch a,
#CorpDealerSearch a:hover,
#CorpDealerSearch a:visited {
color: red;
font-weight: bold;
}
.row {
display:table-cell;
vertical-align: middle;
}
.left {
display:table-cell;
display:inline-block;
padding-left:5px;
padding-right: 5px;
}
.tier {
border-left: 2px dotted black;
background-color: lightgreen;
}
Is this what you wanted?
I have two columns; first column goes for image and the second holds detail.
My problem is the image over flows to the next line
Adding overflow:auto; or inline-block; to div.portfolioitems_wrap didn't help me
list http://img577.imageshack.us/img577/7002/screenshot20121204at135.png
Maker
<div class="portfolioitems_wrap">
<div class="portfolioitems_column1">first image</div>
</div>
<div class="portfolioitems_column2">information of the institute</div>
<div class="portfolioitems_wrap">
<div class="portfolioitems_column1">first image</div>
</div>
<div class="portfolioitems_column2">information of the institute</div>
<div class="portfolioitems_wrap">
<div class="portfolioitems_column1"><img src="/image/nature.jpg" class="thumbnail" alt="nature" />
</div>
</div>
<div class="portfolioitems_column2">information of the institute
</div>
<div class="portfolioitems_wrap">
<div class="portfolioitems_column1">first image</div>
</div>
<div class="portfolioitems_column2">information of the institute</div>
<div class="clear"></div>
CSS
div.portfolioitems_wrap{
float: left;
width:100%;
color:#555555;
border-bottom: 1px solid #eee;
height: 1.5em;
margin-bottom: 1em;
}
div.portfolioitems_column1{
margin-right: 10px;
}
div.portfolioitems_column2{
float: left;
color:#555555;
width: 300px;
margin-left: -300px;
font-size: 80%;
}
div.portfolioitems_column1 .thumbnail
{
float:left;
margin-right:20px;
border:1px solid #979390;
width:80px;
margin-bottom: 5px;
}
div.clear{
clear: both;
}
Further to my comment above: http://jsfiddle.net/hp7dY/
Just the min-height seems to be enough to fix this
It looks like your DIV organization is a little confused, which is adding to your problem. I'm assuming that the portfolioitems_wrap DIV is supposed to enclose both columns. That said, the problem is more that you're fixing the height of each table row, instead of allowing it to be flexible based on the content.
Removing the height:1.5em; entry from allows your elements to fit in the DIV. You might also consider displaying the column elements as inline-block.
div.portfolioitems_wrap{
float: left;
width:100%;
color:#555555;
border-bottom: 1px solid #eee;
// height: 1.5em;
margin-bottom: 1em;
}
div.portfolioitems_column1{
margin-right: 10px;
display:inline-block;
width:100px;
float:left;
}
div.portfolioitems_column2{
color:#555555;
font-size: 80%;
display:inline-block;
width:300px;
float:left;
}
div.portfolioitems_column1 .thumbnail {
float:left;
border:1px solid #979390;
width:80px;
margin: 0px 10px 5px 10px;
}
div.clear{
clear: both;
}
Here's a working fiddle with some other minor adjustments to make it pretty:
http://jsfiddle.net/72HML/
Hope that helps.