CSS min-height does not adjust background color and border - border

I'm having problems with this site I am building. I need a fixed width so that I can do margin-left and margin-right auto (center the form item on my 'left window'. Problem is that I'm trying to make this code modular so that it will work with any future forms I decide to create as well, meaning I need a variable height, depending on how many fields a form will need.
so to clarify the above statement, I'm trying to keep the fixed width and have a variable height (using min-height). The problem is that the background color and div border are not shrinking or expanding along with the div size. any ideas?
the site is here: http://traelid.com/news/createNews.php
here is my form code and my CSS code:
FORM:
<script type='text/javascript' src='../nicEdit/nicEdit.js'></script>
<script type='text/javascript'>
bkLib.onDomLoaded(function() {nicEditors.allTextAreas() });
</script>
<div class='frmcontainer'>
<div class='title'>TraeLid News</div>
<div class='fill'>
<div class='row'>
<div class='frm lbl'>
<label for='author'>Author:</label>
</div>
<div class='frm itm'>
Auto Author
</div>
</div>
<div class='row'>
<div class='frm lbl'>
<label for='subject'>Subject:</label>
</div>
<div class='frm itm'>
<input class='itm itmtxt' type='text' name='subject' />
</div>
</div>
<div class='row'>
<div class='frm lbl'>
<label for='content'>Content:</label>
</div>
<div class='frm itm txtarea' style='background-color:#fff;'>
<textarea class='itm itmtxtarea ckeditor' name='content'></textarea>
</div>
</div>
<div class='row'>
<div class='frm lbl'>
<label for='tags'>Tags:</label>
</div>
<div class='frm itm'>
<input class='itm itmtxt' type='text' name='tags' />
</div>
</div>
</div>
</div>
CSS:
.frmcontainer
{
text-align:center;
width:750px;
min-height:200px;
margin-left:auto;
margin-right:auto;
border-radius:10px;
border-width:1px;
border-style:solid;
}
.frm
{
margin:5px;
}
.title
{
clear:both;
width:750px;
margin-bottom:24px;
font-size:28px;
font-weight:bold;
text-decoration:underline;
font-variant:small-caps;
}
.row
{
width:750px;
height:auto;
float:left;
clear:both;
}
.lbl
{
font-size:18px;
font-weight:bold;
text-align:left;
height:30px;
width:150px;
float:left;
}
/*Container and input styles*/
.itm
{
text-align:left;
height:25px;
width:580px;
float:left;
}
.itmtxt
{
width:576px;
border-style:solid;
border-width:1px;
}
.txtarea
{
height:400px;
}
.itmtxtarea
{
width:578px;
height:343px;
border-style:solid;
border-width:1px;
}
.nicEdit-panel
{
background-color: #eee;
}
.nicEdit-selected
{
background-color: #fff;
word-wrap:break-word;;
overflow:hidden;
}
.nicEdit-main
{
word-wrap:break-word;
overflow:hidden;
max-height:343px;
}

on .frmcontainer add overflow: hidden;. fiddle ex

Related

how can i fit search text field and search button in div(div A) where div (div A) is in another div(div B) which has 100% width

[i want to do like this]
[1]: https://i.stack.imgur.com/OOSKk.png
I have created a div(div B) in body that has 100% width and it has another div (div A) which has two components in it.the Div A is not able to get width of only two elements its getting 100% width.
This is my code
<div id="con"> <div id="srbt"> <input id="srch" type="text" placeholder="Paste Youtube link" name="search"> <button id="btn">Download</button></div> </div>
* {
box-sizing: border-box;
}
#con {
display:block;
background: #502c6c;
height:125px;
width:100%;
padding:30px;
}
#srbt {
width:100%;
background: #ffffff;
height:65px;
border-radius:5px;
position:relative;
}
#srch {
display:block;
width:100%;
border:none;
height:65px;
border-radius:5px;
padding:0 20% 0 5%;
line-height:65px;
color:#6c7592;
font-size:20px;
}
#btn {
background:#ff5916;
border:none;
border-radius:5px;
height:59px;
width:20%;
position:absolute;
top:3px;
right:3px;
z-index:10;
color:#ffffff;
font-size:24px;
}
<div id="con">
<div id="srbt">
<input id="srch" type="text" placeholder="Paste Youtube link" name="search">
<button id="btn">Start</button>
</div>
</div>

vh and vw not rendering small size/incorrectly

This is what I was HTML/CSSing out.
https://www.dropbox.com/sh/pcrjtmg6gjv2yc7/AAAw7GA8G-CTDFjOMqIUdqS_a?dl=0
and this is what I have managed hitherto.
Now the divs which display the search results are giving me trouble.
I am learning CSS and thought of using vh and vw .
So I proceeded like this:
The dimension of the psd file is 1100*1125
So one vh =11.25
and one vw=11
I laid out the outer design using the %age model.
Then for the result divs , I measure the height of the first one as 125 px.
Converting that,125/11=11.11vh
and so on.
But the end result is terribly awful !!Everything renders out very little.I understand that it would be scaled down to my 768px height , but still it looks horribly small.
Please tell me what is wrong with my approach.
<html>
<head>
<link rel="stylesheet" href="assets/main.css">
</head>
<body>
<div class="sidebar">
</div>
<div class="box">
<p>35 search results for "Preview"</p>
<input type="text">
<input type="checkbox" id="checkboxOneInput"><label for="checkboxOneInput">Todos</label>
<input type="checkbox"><label>Discussions</label>
<input type="checkbox"><label>Files</label>
<input type="checkbox"><label>Progress</label>
<input type="checkbox"><label>TeamMembers</label>
<div class="display">
<div class="inner_display image">
<div class="image_one">
<img src="assets/images/bluei.png">
<p>17 July</p></div>
<div class="image_two"><img src="assets/images/xlsx.png"></div>
<div class="image_three">
<p>preview.timeline_v1.jpg</p>
<p>Attached to the comment timeline_wireframes by Bharat</p>
<p>DOWNLOAD</p>
<p>Download</p>
</div>
</div>
</div>
</div>
</body>
</html>
CSS
.sidebar {
width:9.09%;
height:100%;
background:black;
margin:0;
position:fixed;
}
.box {
float:right;
box-sizing: border-box;
width:90.91%;
height:100%;
background:#D3D3D3;
display:inline-block;
vertical-align:top;
padding-left:2.5%;
padding-right:2.5%;
overflow:auto;
}
.box p {
margin:0;
height:4.44%;
}
.box input[type=text] {
width:100%;
height:4.44%;
margin-top:1.77%;
margin-bottom:0.88%;
}
.display {
margin-top:2.66%;
padding-left:2.72vw;
margin-bottom:2.5%;
border:solid;
border-width:thin;
background:white;
}
.inner_display {
box-sizing: border-box;
}
.image {
height:11.11vh;
}
.image_one {
width:5.45vw;
margin-top:1.77vh;
margin-bottom:1.77vh;
display:inline-block;
vertical-align:top;
}
.image_one img {
width:3.81vw;
height:3.11vh;
}
.image_two {
width:5.45vw;
margin-top:1.77vh;
margin-bottom:1.77vh;
display:inline-block;
vertical-align:top;
}
.image_two img {
height:3.55vh;
width:3.63vw;
}
.image_three {
margin-top:1.77vh;
margin-bottom:1.77vh;
display:inline-block;
vertical-align:top;
font-size:1.6vh;
line-height:0.5vh;
}

How to make this div not past through the other one on the right side?

I have this problem, I can't seem to figure out how do I make this red DIV not past through the div on the right side, I want to make it stay between the right and the left div menu.
Website Screenshot
HTML Code:
<body>
<div class="navigationBar_default">
<div class="facetubeLogo_default"></div>
<div class="facetubeText_container_default"><center><strong class="facetubeText_default"></strong></center></div>
</div>
<div class="content_default">
<div class="leftMenu_onProfile">
<button class="leftMenu_buttonOnProfile"><img class="leftMenu_buttonImage" src="images/myProfileButton_onLeftMenu_onProfile.png" /><br>MY PROFILE</button>
<button class="leftMenu_buttonOnProfile"><img class="leftMenu_buttonImage" src="images/optionsButton_onLeftMenu_onProfile.png" /><br>GENERAL</button>
<button class="leftMenu_buttonOnProfile"><img class="leftMenu_buttonImage" src="images/generalButton_onLeftMenu_onProfile.png" /><br>OPTIONS</button>
<button class="leftMenu_buttonOnProfile"><img class="leftMenu_buttonImage" src="images/supportUsButton_onLeftMenu_onProfile.png" /><br>SUPPORT US</button>
<button class="leftMenu_buttonOnProfile"><img class="leftMenu_buttonImage" src="images/logOutButton_onLeftMenu_onProfile.png" /><br>LOG OUT</button>
</div>
<!-- there must be some stuff here, otherwise leftMenu_onProfile will glitch out. -->
<div class="contentCenter_onProfile">
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAaaaaaaaaaaaaaaAAAAAAAAAAAAAAAAAA
</div>
<!-- there must be some stuff here, otherwise leftMenu_onProfile will glitch out. -->
<div class="rightMenu_onProfile">user1<br>user2<br>user3<br>user4<br>user5</div>
</div>
CSS Code:
.navigationBar_default {
background-color:#202020;
width:100%;
height:32px;
margin-left:-8px;
margin-right:-8px;
border:0;
top:0;
position:fixed;
}
.facetubeLogo_default {
background-image:url("../images/facetube_icon_30x30_png.png");
width:30px;
height:30px;
margin-top:1px;
margin-left:1px;
float:left;
}
.facetubeText_container_default {
margin-top:6px;
}
.content_default {
width:100%;
height:100%;
margin-top:32px;
margin-left:-8px;
margin-right:-8px;
margin-bottom:-8px;
}
.leftMenu_onProfile {
background-color:#0d0d0d;
margin-top:0px;
margin-left:-8px;
width:240px;
float:left;
}
.leftMenu_buttonOnProfile {
background-color:#0d0d0d;
border:0;
border-bottom:1px solid #ffffff;
width:240px;
height:48px;
color:#ffffff;
}
.leftMenu_buttonImage {
float:left;
margin-top:-2px;
margin-right:-6px;
}
.contentCenter_onProfile {
background-color:red;
padding:2px; /* padding is originally removed */
margin:0px;
top:0px;
}
.rightMenu_onProfile {
background-color:#0d0d0d;
margin-top:-20px;
margin-right:-16px;
width:300px;
color:#ffffff;
float:right;
}
I have feeling it has to do something with content_default and the width:100% but I don't know. I tried everything and I couldn't figure it out.
:/
Try this:
.contentCenter_onProfile {
background-color:red;
padding:2px; /* padding is originally removed */
margin:0 300px;
top:0px;
width: 50%; /* SET THIS */
white-space: pre-wrap;
word-break: break-all;
}
By setting the width, you can ensure the div does not overlap the right hand side div.
Setting float: left or float: right causes the elements to overlap.

position:relative set on editable dropdown is displaying over header of web page when scroll down

Here is my Html code for setting header and editable drop down
<div class="header" style="position:fixed; width:100%;">
<div class="container-fluid" id="continer1ForProjectContext">
<div class="row-fluid">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12"><a>img style="margin-left:10%; margin-top:0.3%;" ></a>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="form-group has-success" style="margin-left:30%;">
<div class="select-editable" id="select2">
<select ng-options="item.label for item countryValues track by item.id" ng-model="selectedCountry">
<input type="text" name="Country" value="select" ng-model="selectedProject.label" id="txtProject" required />
</div>
</div>
</div>
</div>
and here is the CSS which i used
#continer1ForProjectContext{
background-color: #009530;
color: #959696;
height: 65px;
}
.select-editable {
background-color:white;
width:120px;
height:18px;
position:absolute;
}
.select-editable select {
top:0px;
left:0px;
font-size:14px;
border:solid #3c763d 1px;
width:170px;
margin:0;
height:30px;
border-radius: 5px 5px 5px 5px;
position:absolute;
}
.select-editable input {
bottom:0
width:150px;
padding:1px;
font-size:12px;
border:solid #3c763d 1px;
border-bottom:none;
height:29px;
border-radius: 5px 0px 0px 5px;
position:absolute;
}
.select-editable select:focus, .select-editable input:focus {
outline:none;
}
I want the header to be fixed which is done but at the same time when i scroll down the page the editable combo box is visible over the header. what is the problem??? any help is appriciable!!!
This 'problem' is caused because position: absolute; and position: fixed; take an element out of the document flow. To make sure your 'layers' of elements are in the correct order on the z-axis, you can use z-index.
A good read with a little more information is found here.

Confused about Positioning in CSS

I'm totally lost, I just finished setting up my navigation bar and now i can't seem to show the settings icon and the main text in any other position than fixed... here is my code sample , it can't show images
This is the entire relevant code, the html, as well as the css.
The end result should be a navigationbar, similar to the one that facebook uses for "Groups".
HTML(php):
<div style='width:100%;max-height:31px;position:relative;top:1px;overflow:hidden;'>
<div style='width:2000px;max-height:31px;position:relative;overflow:hidden;'>
<div class='groups_navi-active' id='navbar-groupname'>
<div style='height:30px;float:left; width:11px;'>
</div>
<div style='height:30px;float:left;'>
".$navbar_groupname."
</div>
<div style='height:30px;float:left;width:11px;'>
</div>
</div>
<div class='groups_navi-inactive' id='navbar-structure'>
<div style='height:30px;float:left; width:11px;'>
</div>
<div style='height:30px;float:left;'>
Structure
</div>
<div style='height:30px;float:left;width:11px;'>
</div>
</div>
<div class='groups_navi-inactive' id='navbar-explore'>
<div style='height:30px;float:left; width:11px;'>
</div>
<div style='height:30px;float:left;'>
Explore!
</div>
<div style='height:30px;float:left;width:11px;'>
</div>
</div>
<div class='groups_navi-right'>
</div>
</div>
<div style='float:right;position:fixed;top:42px;height:22px;width:796px;z-index:1'>
<div class='groups_navi-settingsicon' id='groups_navi-settingsicon' ></div>
<div style='clear:both;'></div>
<!-- THIS IS HIDDEN AND WILL BE MADE VISIBLE WITH JAVASCRIPT !-->
<div id='navbar-settings-list' style='border-left:1px solid #787878;border-right:1px solid #787878;border-top:1px solid #787878;background-color:#ffffff;border-bottom:2px solid #283d6c;background color:#ffffff;float:right;display:none;z-index:5;'>
<div style='width:126px;height:4px;'></div>
<div class='groups-navi-settings-list_option-inactive' id='groups-navi-settings-list_option--deletegroup' title='".$_GET['groupid']."'>
Delete Group
</div>
<div style='width:126px;height:4px;'></div>
</div>
</div>
<div style='z-index:8;position:fixed;width:796px'>
<div>
<img src='IMG/texticon.png'>
</div>
<div>
".$groupoverview_groupdescription."
</div>
</div>
CSS:
.groups_navi-active
{
height:30px;position:relative;line-height:30px;
font-size:13px;
font-weight:bold;
color:#000000;
float:left;
z-index:2;
}
.groups_navi-inactive
{
float:left;
height:30px;
position:relative;
background-color:#f2f2f2;
border-bottom:1px solid #cccccc;
border-left:1px solid #dbdbdb;
border-right:0px;
border-top:0px;
line-height:30px;
font-size:11px;
font-weight:bold;
color:#818181;
z-index:2;
}
.groups_navi-right
{
float:left;
height:30px;
width:1000px;
position:relative;
background-color:#f2f2f2;
border-bottom:1px solid #cccccc;
border-left:1px solid #dbdbdb;
border-right:0px;
border-top:0px;
line-height:30px;
font-size:11px;
font-weight:bold;
color:#818181;
}
.groups_navi-settingsicon
{
width:31px;height:22px;background: url('../IMG/navbar-stgs.png');float:right;background-position: 0 0;
}
.groups_navi-settingsicon-active
{
width:31px;height:22px;background: url('../IMG/navbar-stgs.png');float:right;background-position: 0 -22;
}
.groups-navi-settings-list_option-inactive
{
width:126px; height: 18px;text-align:center;line-height:18px;
border-top:1px solid #ffffff;
border-bottom:1px solid #ffffff;
}
.groups-navi-settings-list_option-inactive:hover
{
width:126px; height: 18px;text-align:center;line-height:18px;background-color:#6c83b6;color:#f8ffff;
border-top:1px solid #39579b;
border-bottom:1px solid #39579b;
cursor:pointer;
}
The container (parent div) of your settings icon is position:fixed. That will override your float:right. In fact, I see two instances of using position:fixed without setting the X/Y offsets, which really just doesn't work.
If that's not it... I think you'll have better answers if you can boil your code down to the problematic areas.
I think you sould check the images path , its must be correct
I had made sample of it on this url
http://jsfiddle.net/563Vx/
feel free to update this fiddle