i am trying to design a page by CSS , the problem is when i am trying to show my page on browsers otherthan Google Chrome , it doesn't work, it shows me wrecked design page, the design only works perfectly on chrome , i used code prefixer to make my css3 code match all browsers .
here is my code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>anaawez</title>
</head>
<style>
html {
height: 100%;
}
body {
margin: 0;
padding: 0;
height: 97%;
background-image: url(bg.jpg);
background-repeat-x: repeat;
background-repeat-y: no-repeat;
background-attachment: initial;
background-position-x: initial;
background-position-y: initial; /*background-origin*/
-webkit-background-origin: initial;
-moz-background-origin: initial;
background-origin: initial; /*background-clip*/
-webkit-background-clip: initial;
background-color: #718693;
}
#wrapper {
background: white;
border: 1px solid #000;
margin: auto;
margin-top: 10px;
font: 1.5em arial, verdana, sans-serif;
width: 960px;
height: 100%%; /*border-radius*/
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
#header {
height: 8%;
background-color: white;
font-family: verdana;
font-size: 15px;
margin: 10px; /*border-radius*/
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
padding: 10px;
}
#headerleft {
text-align: left;
vertical-align: top;
float: left;
}
#headerright {
text-align: right;
float: right;
}
#search {
height: 5%;
text-align: center;
}
#container {
height: 50%;
text-align: right;
font-family: verdana;
font-size: 15px;
margin: 10px; /*border-radius*/
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
padding-top: 10px;
padding-left: 10px;
padding-right: 10px;
padding-bottom: 0px;
}
#blockcontainer {
height: 80%;
}
#blockouterleft {
float: left;
width: 65%;
height: 39%;
margin-top: 5px; /*border-radius*/
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
#blockinnerleftleft {
float: left;
width: 45%;
height: 100%;
background-color: #FDFDFD; /*border-radius*/
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
border: thin dotted #999;
height: 100% vertical-align: middle;
}
#blockinnerleftmiddle {
float: right;
width: 45%;
height: 100%;
background-color: #FDFDFD; /*border-radius*/
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
border: thin dotted #999;
}
#blockouterright {
float: right;
width: 35%;
height: 39%;
margin-top: 5px; /*border-radius*/
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
#blockinnerrightleft {
float: right;
width: 84.1%;
height: 100%;
background-color: #FDFDFD; /*border-radius*/
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
border: thin dotted #999;
}
#tagcloud {
height: 18%;
background-image: -webkit-linear-gradient(bottom, rgb(17,28,46) 13%, rgb(13,21,26) 66%);
background-image: -moz-linear-gradient(bottom, rgb(17,28,46) 13%, rgb(13,21,26) 66%);
background-image: -o-linear-gradient(bottom, rgb(17,28,46) 13%, rgb(13,21,26) 66%);
background-image: -ms-linear-gradient(bottom, rgb(17,28,46) 13%, rgb(13,21,26) 66%);
background-image: linear-gradient(bottom, rgb(17,28,46) 13%, rgb(13,21,26) 66%);
-image-image background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0.13, rgb(17,28,46)), color-stop(0.66, rgb(13,21,26)) );
text-align: right;
font-family: verdana;
font-size: 15px; /*border-radius*/
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
padding: 10px;
margin: 10px;
}
#contenttext {
margin: 3px;
font-size: 10px;
height: 100%;
}
#image {
float: left;
margin: 3px;
font-size: 10px;
height: 100%;
}
</style>
<body >
<div id="wrapper">
<div id="header" >
<div id="headerright">Login with Facebook | Contact Us| Help </div>
<div id="headerleft"><img src="anaawez.png" /></div>
</div>
<div id="search">
<form>
<label>ANA AWEZ</label>
<input type="text" />
<select name="type">
<option name="work" value="work">work</option>
</select>
<input type="button" value="submit" />
</form>
</div>
<div id="container">
<div id="blockcontainer">
<div id="blockouterleft">
<div id="blockinnerleftleft">
<div >
<div id="image" ><p ><img src="dta2.png" align="left" height="90px" width="90px"/></p></div></div>
<div id="contenttext">i want you to spread my shitty facebook application , please i need to steal your data ASAP ! :D view ad</div>
</div>
<div id="blockinnerleftmiddle"></div>
</div>
<div id="blockouterright">
<div id="blockinnerrightleft"></div>
</div>
<div id="blockouterleft">
<div id="blockinnerleftleft"></div>
<div id="blockinnerleftmiddle"></div>
</div>
<div id="blockouterright">
<div id="blockinnerrightleft"></div>
</div>
<div id="blockouterleft">
<div id="blockinnerleftleft"></div>
<div id="blockinnerleftmiddle"></div>
</div>
<div id="blockouterright">
<div id="blockinnerrightleft"></div>
</div>
</div>
</div>
<div id="tagcloud">BlackBerry IPHONE 4GS SAMSUNG GALAXY SII MIDO BADER JOB PROGRAMMER </div>
<div id="bottom"></div>
</div>
</body>
</html>
JS Fiddle reproduction of the above HTML/CSS.
In #wrapper you have height specified as 100%%.
Changing that to 100% appears to fix most of the issues.
Related
Having trouble getting rid of white space around my body element. I am setting margin and padding to 0 in both my css and html, but when I run the application the body has a margin of 8px. When I look in the developer tools it says the body styles is coming from User Agent Stylesheet. I think my problem has something to do with that. Any help would be greatly appreciated!
html {
overflow: hidden;
background-size: 100% 100%;
background-color: lightgrey;
margin-bottom: 0;
margin: 0;
padding: 0;
}
/* Add a black background color to the top navigation */
.topnav {
background-color: #22aedc;
overflow: hidden;
height: 60px;
}
/* Style the links inside the navigation bar */
.topnav h2 {
color: #FFFFFF;
text-align: center, center;
align-content: center, center;
//padding: 4px 10px;
text-decoration: none;
font-size: 21px;
font: "Tahoma";
overflow: hidden;
}
footer {
font: "Tahoma";
font-size: 13px;
opacity: 0.8;
}
body {
background-image: url('/Angular/src/assets/img/kraft.png');
background-repeat: no-repeat;
background-position-x: center;
background-position-y: 330px;
background-attachment: fixed;
margin: 0;
overflow: visible;
padding: 0;
}
.dv-panel {
padding: 10px;
text-align: center;
border: 1px solid darkgray;
box-shadow: 4px 4px 6px rgba(0,0,0,0.2);
background: #f6f8f9;
background: -moz-linear-gradient(top, #f6f8f9 0%, #e5ebee 50%, #d7dee3 51%, #f5f7f9 100%);
background: -webkit-linear-gradient(top, #f6f8f9 0%, #e5ebee 50%, #d7dee3 51%, #f5f7f9 100%);
background: linear-gradient(to bottom, #f6f8f9 0%, #e5ebee 50%, #d7dee3 51%, #f5f7f9 100%);
}
.dv-menuPanel {
#extend .dv-panel;
background: #f9f9f9;
max-width: 1200px;
margin: auto;
// Added 'row' class to make height match
// that of children
//overflow: hidden;
.dv-menuPanelContent {
min-height: 300px;
background: white;
padding: 10px;
box-shadow: inset 0 0 6px rgba(0,0,0,0.1);
.menuPanelHeader {
background: #5bc0de;
color: white;
h3 {
padding: 10px;
margin-top: 0;
}
}
.menuPanelHeaderAlt {
color: #555;
h3 {
padding: 10px;
margin-top: 0;
//font-size: 32px;
}
}
.contentPanelHeaderAlt {
color: #555;
}
}
}
.dv-panel, .dv-menuPanel, .dv-menuPanelAlt {
padding: 10px;
text-align: center;
border: 1px solid darkgray;
box-shadow: 4px 4px 6px rgba(0, 0, 0, 0.2);
background: #f6f8f9;
background: -moz-linear-gradient(top, #f6f8f9 0%, #e5ebee 50%, #d7dee3 51%, #f5f7f9 100%);
background: -webkit-linear-gradient(top, #f6f8f9 0%, #e5ebee 50%, #d7dee3 51%, #f5f7f9 100%);
background: linear-gradient(to bottom, #f6f8f9 0%, #e5ebee 50%, #d7dee3 51%, #f5f7f9 100%);
}
.dv-panel {
padding: 10px;
text-align: center;
border: 1px solid darkgray;
box-shadow: 4px 4px 6px rgba(0,0,0,0.2);
background: #f6f8f9;
}
.dv-button {
display: block;
background-color: #5bc0de;
border-color: #46b8da;
padding: 17px 16px;
width: 100%;
border: 1px solid transparent;
outline: none;
text-align: center;
cursor: pointer;
transition: 0.3s;
color: white;
white-space: nowrap;
box-sizing: border-box;
font-weight: 400;
margin-bottom: 8px;
font: Tahoma;
font-size: 15px;
}
.dv-button:hover {
background-color: #EEE;
color: black;
}
.db-button:active {
background-color: aqua;
color: white;
}
.plant-button {
display: block;
background-color: #5bc0de;
border-color: #46b8da;
padding: 10px 16px;
width: 100%;
border: 1px solid transparent;
outline: none;
text-align: center;
cursor: pointer;
transition: 0.3s;
color: white;
white-space: nowrap;
box-sizing: border-box;
font-weight: 400;
margin-bottom: 8px;
font: Tahoma;
font-size: 14px;
}
.plant-button:hover {
background-color: #EEE;
color: black;
}
.plant-button:active {
background-color: aqua;
color: white;
}
.pagination {
display: block;
background-color: white;
border-color: white;
padding: 10px 16px;
width: 50px;
border: 1px solid transparent;
outline: none;
text-align: center;
cursor: pointer;
transition: 0.3s;
color: grey;
white-space: nowrap;
box-sizing: border-box;
font-weight: 400;
margin-bottom: 8px;
font: Tahoma;
font-size: 15px;
border-top: 40px;
}
.pagination:hover {
background-color: #EEE;
color: black;
}
.pagination:active {
background-color: aqua;
color: white;
}
#back {
float: left;
margin-left: 10px;
margin-right: 10px;
margin-top: 0px;
margin-bottom: 10px;
background-color: #008cba;
border-color: #0079a1;
color: white;
cursor: pointer;
border: 1px solid transparent;
font-weight: 400;
text-align: center;
display: inline-block;
padding: 8px 12px;
outline: none
}
#back:hover {
background-color: white;
color: black;
}
#back:active {
background-color: #6e6d6f;
color: white;
}
.import-header {
display: block;
background-color: #5bc0de;
border-color: #46b8da;
padding: 17px 16px;
width: 100%;
border: 1px solid transparent;
outline: none;
text-align: center;
transition: 0.3s;
color: white;
white-space: nowrap;
box-sizing: border-box;
font-weight: 400;
margin-bottom: 8px;
font: Tahoma;
font-size: 15px;
}
<html>
<head>
<link rel="stylesheet" href="/Angular/src/assets/css/fontawesome.min.css" />
</head>
<body style="background-color: lightgrey; width: 100%; margin: 0px; padding: 0px">
<div style="padding-top: 5px; padding-left: 5px; padding-right: 5px">
<div class="topnav">
<h2 style="text-align: center">Import</h2>
<i class="fa fa-youtube" aria-hidden="true"></i>
</div>
</div>
<div *ngIf="!isTypeCollapsed" style="justify-content:center; padding-top: 155px; padding-bottom: 375px">
<div class="dv-panel" style="width: 400px; margin: auto; padding-bottom: 2px">
<div *ngFor="let type of types">
<button (click)="togglePlants(type)" class="dv-button">
{{type}}
</button>
</div>
</div>
</div>
<div *ngIf="isPlantsCollapsed" style="justify-content:center; padding-top: 125px; padding-bottom: 129px">
<div class="dv-panel" style="width: 400px; margin: auto; overflow: hidden; margin-left: 733px">
<button (click)="toggleBack()" class="far fa-arrow-left" id="back"></button>
<div *ngFor="let plant of plants">
<button class="plant-button" (click)="hidePlants(plant)">{{ plant }}</button>
</div>
</div>
</div>
<div *ngIf="isImportPageCollapsed" style="justify-content:center; padding-top: 165px; padding-bottom: 283px">
<div class="dv-panel" style="width: 400px; height: 300px; margin: auto; padding-bottom: 100px; background-color: #f9f9f9">
<button (click)="toggleBackFromImportPage()" class="far fa-arrow-left" id="back"></button>
<button (click)="toggleHome()" class="far fa-home" id="back" style="margin-left: -9px"></button>
<div>
<button class="import-header">
{{ importPlant }} ~ {{importType}}
</button>
<div class="form-group" style="width: 370px; margin: auto 0px auto 0px; position: relative; display: block; padding-top: 30px; padding-bottom: 45px; align-content: center">
<div class="input-group" style="margin-right: 125px; position: relative; display: table; border-collapse: separate">
<span class="input-group-addon fad fa-file-search" style="display: table-cell; background: #5bc0de; color: white; font-size: 14px; padding: 10px 12px"></span>
<input [value]="file?.name" class="form-control" readonly type="text" style="text-align:justify; padding: 10px 90px; outline: none; box-sizing: border-box; background-color: #EEE; opacity: 1; border: 1px solid #ccc">
<label style="opacity: 0; width: 100%; position: absolute; height: 100%; top: 0; left: 0; z-index: 999; cursor: pointer; outline: none; background-color: #f9f9f9">
<input style="position: relative; z-index: 2; float: left; width: 100%; margin-bottom: 0; align-items:baseline; text-align: center" id="fileInput; background-color: #f9f9f9" type="file" accept=".xls,.xlsx" hidden (change)="getFileDetails($event)">
</label>
</div>
</div>
<div style="padding-left: 140px">
<button (click)="onImportClick()" class="dv-button" style="width: 100px; padding: 4px 6px">
Import
</button>
</div>
</div>
</div>
</div>
<footer style="padding-top: 0px; padding-bottom: 7px; text-align:center">
<p>Version 1.0.0 © 2021 DreamVersion, LLC.</p>
</footer>
</body>
</html>
INDEX.HTML
<html lang="en">
<head>
<meta charset="utf-8">
<title>Angular</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body style="margin: 0px !important; padding: 0px !important">
<app-root></app-root>
</body>
</html>
I have an HTML page with a div containing another div that contains all users in a database (chat system) however the ul li tag is not taking the full width of the parent div. This is an image of the expected outcome: http://prntscr.com/nz6byp
I already tried setting the width to 100%.
HTML
.left-sidebar{
background-color:#F7F7F7;
padding: 20px;
border-radius: 5px 0px 0px 5px;
}
.searchbox{
padding:20px 10px;
width: 100%;
}
.input-group-btn{
margin: auto;
}
.search-icon{
margin: auto;
font-size: 14px;
background-size: 250%;
background-image: linear-gradient(to right, #77A1D3 0%, #79CBCA 51%, #77A1D3 100%);
transition: background 0.5s ease-out;
color:#fff;
}
.search-icon:hover{
background-position: right center;
color: #fff;
}
.form-control:focus{
border:2px solid #fff;
}
.chat-left-img,.chat-left-detail{
float: left;
}
.left-chat{
overflow-y: scroll;
width: 100%;
}
.left-chat::-webkit-scrollbar-track
{
}
.left-chat::-webkit-scrollbar
{
width: 12px;
background-color: #F5F5F5;
}
.left-chat::-webkit-scrollbar-thumb
{
border-radius: 5px;
/*-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);*/
background-color: #DEDEDE;
}
.left-chat ul{
overflow: hidden;
padding: 0px;
}
.left-chat ul li{
list-style: none;
width:100%;
float: left;
padding: 5px;
margin: auto;
background-color: #F2F2F2;
border-radius: 0px;
transition: background 0.25s ease-out;
}
.left-chat ul li:hover{
background-color: #E2E2E2
}
.chat-left-img img{
width:50px;
height:50px;
border-radius: 50%;
text-align: left;
float:fixed;
padding: 3px;
background: linear-gradient(to right, #77A1D3 0%, #79CBCA 51%, #77A1D3 100%);
background-size: 250%;
}
.chat-left-details{
width: 100%;
}
.chat-left-details a{
margin: 5%;
text-decoration: none;
color: #5D5C5C;
font-weight: 200;
}
.online{
margin: 5%;
color:#86BB71;
font-size: 14px;
}
.offline{
margin: 5%;
color:#C6C4C4;
font-size: 14px;
}
<div class="col-md-3 col-sm-3 col-cs-12 left-sidebar">
<div class="input-group searchbox">
<div class="input-group-btn">
<center><button id="" class="btn btn-default search-icon" name="search_user" type="submit">Add new user</button></center>
</div>
</div>
<div class="left-chat">
<ul>
<li>
<div class='chat-left-img'> <img src='$user_profilepic'>
</div>
<div class='chat-left-details'>
<a href='home.php?user_name=$user_name'>$user_name</a>
<span style='font-size: 12px; color: #5D5C5C;'>(You)
</span><br>
</div>
</li>
</ul>
</div>
Any help is appreciated!
The list elements' width is set to 100% of container, but container has padding, thats why you think it's not filled the container.
.left-sidebar has padding: 20px;, and also .left-chat has overflow-y: scroll. these two rules makes element smaller than you expect (some for parent padding, some for scrollbar width).
you can padding: 0 for .left-sidebar and set overflow-y: auto for .left-chat.
Also you can inspect elements on chrome dev tools, to see whats going on.
you can see this here: codepen
Your .left-sidebar has a 20px padding.
I removed left and right padding and now the list take full width
.left-sidebar{
background-color:#F7F7F7;
padding: 20px;
border-radius: 5px 0px 0px 5px;
}
.left-sidebar{
background-color:#F7F7F7;
padding: 20px 0;
border-radius: 5px 0 0 5px;
}
.searchbox{
padding:20px 10px;
width: 100%;
}
.input-group-btn{
margin: auto;
}
.search-icon{
margin: auto;
font-size: 14px;
background-size: 250%;
background-image: linear-gradient(to right, #77A1D3 0%, #79CBCA 51%, #77A1D3 100%);
transition: background 0.5s ease-out;
color:#fff;
}
.search-icon:hover{
background-position: right center;
color: #fff;
}
.form-control:focus{
border:2px solid #fff;
}
.chat-left-img,.chat-left-detail{
float: left;
}
.left-chat{
overflow-y: auto;
width: 100%;
}
.left-chat::-webkit-scrollbar
{
width: 12px;
background-color: #F5F5F5;
}
.left-chat::-webkit-scrollbar-thumb
{
border-radius: 5px;
/*-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);*/
background-color: #DEDEDE;
}
.left-chat ul{
overflow: hidden;
padding: 0px;
}
.left-chat ul li{
list-style: none;
width:100%;
float: left;
padding: 5px;
background-color: #F2F2F2;
border-radius: 0px;
transition: background 0.25s ease-out;
}
.left-chat ul li:hover{
background-color: #E2E2E2
}
.chat-left-img img{
width:50px;
height:50px;
border-radius: 50%;
text-align: left;
float:fixed;
padding: 3px;
background: linear-gradient(to right, #77A1D3 0%, #79CBCA 51%, #77A1D3 100%);
background-size: 250%;
}
.chat-left-details{
width: 100%;
}
.chat-left-details a{
margin: 5%;
text-decoration: none;
color: #5D5C5C;
font-weight: 200;
}
<div class="col-md-3 col-sm-3 col-cs-12 left-sidebar">
<div class="input-group searchbox">
<div class="input-group-btn">
<center><button id="" class="btn btn-default search-icon" name="search_user" type="submit">Add new user</button></center>
</div>
</div>
<div class="left-chat">
<ul class="full-width-no-padding">
<li class="full-width-no-padding">
<div class='chat-left-img'> <img src='$user_profilepic'>
</div>
<div class='chat-left-details'>
<a href='home.php?user_name=$user_name'>$user_name</a>
<span style='font-size: 12px; color: #5D5C5C;'>(You)
</span><br>
</div>
</li>
</ul>
</div>
EDIT
As #yaya pro suggested i added overflow-y: auto; to .left-chat class
So I've run into a CSS formatting question that I'm hoping I can get some help with. In general, I've got my setup working, having the position of the menu shift based on the size of the screen so that it is always centered vertically and horizontally, etc.
However, I've run into an issue where if you make the viewing window too small, elements begin to overlap, which is not desired.
Here is a fiddle to display what I am talking about. I would prefer that the green box force everything else below it, so it no longer overlaps the red one (Everything within the "buttonContainerBase" div):
Fiddle
Here's the HTML Div setup and relevant CSS:
#buttonContainerBase {
position: absolute;
left: 0px;
width: 100%;
height: 100%;
}
.hCenterDiv {
width: 370px;
margin-left: auto;
margin-right: auto;
}
.backgroundBoxDiv {
position: absolute;
top: 50%;
height: 244px;
margin-top: -112px;
margin-left: 0px;
width: 370px;
overflow: auto;
display: inline-block;
text-align: center;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
opacity: 0.95;
filter: alpha(opacity=95);
background: -moz-linear-gradient(top, #FFFFFF 45%, #F5F5F5 75%);
background: -webkit-gradient(linear, top, bottom, color-stop(45%, #FFFFFF), color-stop(75%, #F5F5F5));
background: linear-gradient(180deg, #FFFFFF 45%, #F5F5F5 75%);
box-shadow: 2px 2px 4px #244260;
}
.logoContainerDiv {
width: 344px;
height: 76px;
margin-top: 5px;
display: inline-block;
background-color: red;
}
.dividingLineDiv {
height: 2px;
width: 370px;
background-color: #335B84;
}
#myLogo {
position: absolute;
top: 5px;
left: 5px;
width: 257px;
height: 73px;
background-color: green;
}
#contentWrapper {
min-height: 300px;
}
.buttonContainerDiv {
/*padding: 5px;*/
margin-top: 10px;
margin-left: 10px;
margin-right: 10px;
}
#studentLoginDiv {
margin-bottom: 10px;
}
.customButton {
padding: 0px;
width: 225px;
height: 34px;
border: solid 2px #FFFFFF;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
border-style: outset;
background-color: #f5f5f5;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 18px;
cursor: pointer;
}
.customButton:hover {
border: solid 2px #F5F5F5;
border-style: inset;
background-color: #f2f2f2;
}
.customButton:active {
border: solid 4px #F5F5F5;
border-style: inset;
background-color: #D1D1D1;
}
<div id="contentWrapper">
<div id="buttonContainerBase">
<div class="hCenterDiv">
<div class="backgroundBoxDiv">
<div class="elementContainerDiv">
<div class="logoContainerDiv"></div>
<div class="dividingLineDiv"></div>
<div class="buttonContainerDiv">
<input class="customButton" id="instructorLogin" type="button" value="Instructor Login" onclick="window.open('http://www.google.com');" />
</div>
<div class="buttonContainerDiv" id="studentLoginDiv">
<input class="customButton" id="studentLogin" type="button" value="Student Login" onclick="window.open('http://www.google.com/');" />
</div>
<div class="dividingLineDiv"></div>
<div class="buttonContainerDiv">
<input class="customButton" id="instructionalVids" type="button" value="Instructional Videos" onclick="window.open('https://www.youtube.com/');" />
</div>
</div>
</div>
</div>
</div>
<div id="myLogo"></div>
</div>
Still kind of new to the CSS game, so I apologize in advance if things look funky/awkward.
This is happening because #myLogo has position:absolute, so :
change to position:relative in CSS
move the div in the DOM to be on the top
remove all CSS for #buttonContainerBase
In backgroundBoxDiv
remove margin-top: -112px, that would be somehow a hack.
add this code:
top: 0;
bottom:0;
right:0;
left:0;
margin:auto;
NOTE This will overlap in 320px view, so you might need media queries for that.
.hCenterDiv {
width: 370px;
margin-left: auto;
margin-right: auto;
}
.backgroundBoxDiv {
position: absolute;
top: 0;
bottom:0;
right:0;
left:0;
margin:auto;
height: 244px;
width: 370px;
overflow: auto;
display: inline-block;
text-align: center;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
/*
border: solid 2px #004586;
background-color: #FFFFFF;
*/
opacity: 0.95;
filter: alpha(opacity=95);
background: -moz-linear-gradient(top, #FFFFFF 45%, #F5F5F5 75%);
background: -webkit-gradient(linear, top, bottom, color-stop(45%, #FFFFFF), color-stop(75%, #F5F5F5));
background: linear-gradient(180deg, #FFFFFF 45%, #F5F5F5 75%);
box-shadow: 2px 2px 4px #244260;
}
.logoContainerDiv {
width: 344px;
height: 76px;
margin-top: 5px;
display: inline-block;
background-color: red;
/* border: solid 2px #004586; */
}
.dividingLineDiv {
height: 2px;
width: 370px;
background-color: #335B84;
}
#myLogo {
position: relative;
top: 5px;
left: 5px;
width: 257px;
height: 73px;
background-color: green;
}
#contentWrapper {
/*
column-count: 2;
column-gap: 40px;
*/
min-height: 300px;
}
/******** BUTTONS *********/
.buttonContainerDiv {
/*padding: 5px;*/
margin-top: 10px;
margin-left: 10px;
margin-right: 10px;
}
#studentLoginDiv {
margin-bottom: 10px;
}
.customButton {
padding: 0px;
width: 225px;
height: 34px;
border: solid 2px #FFFFFF;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
border-style: outset;
background-color: #f5f5f5;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 18px;
cursor: pointer;
}
.customButton:hover {
border: solid 2px #F5F5F5;
border-style: inset;
background-color: #f2f2f2;
}
.customButton:active {
border: solid 4px #F5F5F5;
border-style: inset;
background-color: #D1D1D1;
}
/****** END BUTTONS *******/
<div id="contentWrapper">
<div id="myLogo"></div>
<div id="buttonContainerBase">
<div class="hCenterDiv">
<div class="backgroundBoxDiv">
<div class="elementContainerDiv">
<div class="logoContainerDiv"></div>
<div class="dividingLineDiv"></div>
<div class="buttonContainerDiv">
<input class="customButton" id="instructorLogin" type="button" value="Instructor Login" onclick="window.open('http://www.google.com');" />
</div>
<div class="buttonContainerDiv" id="studentLoginDiv">
<input class="customButton" id="studentLogin" type="button" value="Student Login" onclick="window.open('http://www.google.com/');" />
</div>
<div class="dividingLineDiv"></div>
<div class="buttonContainerDiv">
<input class="customButton" id="instructionalVids" type="button" value="Instructional Videos" onclick="window.open('https://www.youtube.com/');" />
</div>
</div>
</div>
</div>
</div>
</div>
So I am having issues applying a border and a border background to a section of my page. I was wondering how I could do this, I've tried make two rows on the same line and apply a border to each but so far nothing I've tried has worked.
To simplify it: My page looks like this https://gyazo.com/ec14ae14dbb369c29759e48dff21cd52
When I need it to look like this https://gyazo.com/d18863ab12fde6cbe458406c6e0fc69a
HTML
<div class="container">
<div class="row">
<div class="col-md-4">
<div id="map-holder-image">
<img src="img/map-holder.png" class="img-responsive"/>
</div>
</div>
<form class="form" id="border">
<div class="form-group col-xs-4 col-md-4">
<label for="first-name" class="control-label">First Name</label>
<input type="text" class="form-control" id="first-name">
</div>
<div class="form-group col-xs-4 col-md-4">
<label for="email-address" class="control-label">Email</label>
<input type="email" class="form-control" id="email-address">
</div>
<br>
<div class="form-group col-xs-4 col-md-4">
<label for="last-name" class="control-label">Last Name</label>
<input type="text" class="form-control" id="last-name">
</div>
<div class="form-group col-xs-4 col-md-4">
<label for="confirm-email-address" class="control-label">Confirm Email</label>
<input type="email" class="form-control" id="confirm-email-address">
</div>
<div class="form-group col-xs-4 col-md-4" id="date-picker">
<label for="dates" class="control-label">Date of Birth</label>
<select class="date-dropdown" id="day-dropdown-form">
<script>
var daylist = "";
var i;
for (i = 1; i <= 31; i++) {
daylist += "<option>" + i + "</option>";
}
document.getElementById("day-dropdown-form").innerHTML = daylist;
</script>
</select>
<select id="month-dropdown-form">
<script>
var months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
var monthlist = "";
var i;
for (i = 0; i < months.length; i++) {
monthlist += "<option>" + months[i] + "</option>";
}
document.getElementById("month-dropdown-form").innerHTML = monthlist;
</script>
</select>
<select class="date-dropdown" id="year-dropdown-form">
<script>
var yearlist = "";
var i;
for (i = 2016; i >= 1900; i--) {
yearlist += "<option>" + i + "</option>";
}
document.getElementById("year-dropdown-form").innerHTML = yearlist;
</script>
</select>
</div>
<div class="col-md-4" id="submit-button-col">
<button class="btn btn-info btn-lg" id="submit-button" type="button">
<h3>Submit</h3>
</button>
</div>
</form>
</div>
CSS
/*-- Bootstrap overrides instead of editing source LESS files --*/
h1, h2, h3, h4, h5, h6 {
font-family: 'Open Sans', sans-serif;
}
p, div {
font-family: 'Open Sans', sans-serif;
}
/*-- Custom Styling --*/
#logo {
padding: 10px;
}
#searchbox {
padding: 10px;
}
#search-input {
border: solid 1px gray;
border-radius: 8px;
background-color: #fff;
}
#search-input input {
border: 0;
box-shadow: none;
background: none;
}
#search-button {
padding: 8px;
}
#search-button button {
background: none;
border: none;
}
#login-name {
padding: 10px;
}
#login-name p {
text-align: center;
vertical-align: middle;
line-height: 50px;
float: right;
}
#settings-icon {
padding-top: 20px;
}
.navbar .navbar-inner {
padding: 0;
}
.navbar .nav {
margin: 0;
display: table;
width: 100%;
}
.navbar .nav li {
display: table-cell;
width: 11.1%;
float: none;
text-align: center;
left: 4px;
font-weight: bold;
}
.navbar .nav li a {
border-right: 1px solid black;
}
#active-link {
text-decoration: underline;
}
.navbar .nav li:first-child a {
border-left: 0;
border-radius: 3px 0 0 3px;
}
.navbar .nav li:last-child a {
border-right: 0;
border-radius: 0 3px 3px 0;
}
#detail-request {
text-align: center;
padding: 15px;
}
#banner-top-col {
width: 100%;
padding: 0;
}
#banner-bottom-col {
width: 100%;
padding: 0;
}
#banner-top {
margin: auto;
margin-bottom: 10px;
width: 100%;
height: 250px;
}
.banner-information {
position: absolute;
border: 5px solid #ff6600;
background-color: #ebebeb;
width: 400px;
height: 180px;
border-radius: 7px;
top: 12%;
text-align: center;
padding: 5px;
left: 5%;
}
.banner-information h4 {
font-size: 20px;
text-align: left;
padding-left: 5px;
padding-top: 15px;
}
.banner-information h1 {
font-size: 60px;
padding-left: 5px;
text-align: left;
font-weight: bold;
margin: 0;
}
#map-holder-image {
border: 2px solid #ff6600;
border-radius: 7px;
width: auto;
padding: 1px;
}
#email-address, #confirm-email-address, #first-name, #last-name {
width: 85%;
}
#contact-form-box {
border: 1px solid #ff6600;
width: auto;
background-color: #ebebeb;
border-radius: 7px;
}
.support-box {
border: 2px solid #ff6600;
background-color: #ebebeb;
border-radius: 7px;
text-align: center;
width: 359px;
margin-right: 18.5px;
margin-top: 10px;
display: inline-block;
right: 10px;
height: 230px;
}
.support-box h3 {
font-size: 25px;
text-align: center;
padding: 10px;
}
#support {
margin: 0 auto;
border: 0px solid #ffad41;
-webkit-border-radius: 16px;
-moz-border-radius: 16px;
border-radius: 16px;
font-size: 38px;
font-family: arial;
text-decoration: none;
display: inline-block;
text-shadow: 0px 0px 0 rgba(0, 0, 0, 0.3);
font-weight: bold;
color: #FFFFFF;
background-color: #ffc579;
background-image: -webkit-gradient(linear, left top, left bottom, from(#ffc579), to(#fb9d23));
background-image: -webkit-linear-gradient(top, #ffc579, #fb9d23);
background-image: -moz-linear-gradient(top, #ffc579, #fb9d23);
background-image: -ms-linear-gradient(top, #ffc579, #fb9d23);
background-image: -o-linear-gradient(top, #ffc579, #fb9d23);
background-image: linear-gradient(to bottom, #ffc579, #fb9d23);
filter: progid: DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#ffc579, endColorstr=#fb9d23);
text-align: center;
height: 80px;
width: 180px;
}
#support:hover {
border: 0px solid #ff9913;
background-color: #ffaf46;
background-image: -webkit-gradient(linear, left top, left bottom, from(#ffaf46), to(#e78404));
background-image: -webkit-linear-gradient(top, #ffaf46, #e78404);
background-image: -moz-linear-gradient(top, #ffaf46, #e78404);
background-image: -ms-linear-gradient(top, #ffaf46, #e78404);
background-image: -o-linear-gradient(top, #ffaf46, #e78404);
background-image: linear-gradient(to bottom, #ffaf46, #e78404);
filter: progid: DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#ffaf46, endColorstr=#e78404);
}
#support-image {
display: inline-block;
}
#support h3 {
display: inline-block;
padding: 0;
padding-right: 15px;
font-weight: 800;
margin: 0 auto;
}
.date-dropdown {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background: url("../img/input-triangle.png") no-repeat white;
background-position: 50px center;
width: 80px;
height: 30px;
border: 1px solid #ddd;
background-size: 28px;
padding-left: 10px;
border-radius: 4px;
margin-top: 10px;
margin-right: 22px;
}
#date-picker {
height: 100px;
}
#month-dropdown-form {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background: url("../img/input-triangle.png") no-repeat white;
background-position: 65px center;
width: 95px;
height: 30px;
border: 1px solid #ddd;
background-size: 28px;
padding-left: 10px;
border-radius: 4px;
margin-top: 10px;
margin-right: 22px;
}
#submit-button-col {
text-align: center;
margin: 0 auto;
height: 100px;
}
#submit-button {
margin: 0 auto;
margin-top: 25px;
border: 0px solid #46ec02;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
font-family: arial;
text-decoration: none;
display: inline-block;
text-shadow: 0px 0px 0 rgba(0, 0, 0, 0.3);
font-weight: bold;
color: #FFFFFF;
background-color: #46ec02;
background-image: -webkit-gradient(linear, left top, left bottom, from(#46ec02), to(#28c307));
background-image: -webkit-linear-gradient(top, #46ec02, #28c307);
background-image: -moz-linear-gradient(top, #46ec02, #28c307);
background-image: -ms-linear-gradient(top, #46ec02, #28c307);
background-image: -o-linear-gradient(top, #46ec02, #28c307);
background-image: linear-gradient(to bottom, #46ec02, #28c307);
filter: progid: DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#46ec02, endColorstr=#28c307);
text-align: center;
height: 65px;
width: 200px;
margin-right: 45px;
}
#submit-button h3 {
display: inline-block;
padding: 0;
text-align: center;
margin: 0 auto;
font-weight: 800;
}
#banner-bottom {
margin: auto;
width: 100%;
height: 250px;
padding-top: 15px;
}
#footer {
background-color: #363636;
height: 250px;
}
#footer p {
color: white;
text-align: center;
vertical-align: middle;
line-height: 130px;
}
#footer-line {
border: 1px solid white;
width: 95%;
}
Thanks a lot :)
I've got the following css element. the CSS is as following
.bill-item {
width: 253px;
height: 60px;
background-color: white;
border: 1px solid #dadada;
border-radius: 6px;
margin-left: 22px;
margin-top: 15px;
margin-bottom: 15px;
}
.item-drop-point {
height: 40px;
width: 253px;
border: 1px dashed #dadada;
text-align: center;
background-color: white;
border-radius: 6px;
margin-left: 22px;
margin-top: 15px;
margin-bottom: 15px;
}
.item-drop-point span {
color: #dadada;
vertical-align: -10px;
}
.bill-item-img {
height: 60.4px;
width: 60px;
float: left;
border-radius: 5px;
background-image: url(../images/bill_item_img.jpg);
background-repeat: no-repeat;
background-size: cover;
}
.bill-item-description {
width: 148px;
float: left;
height: 100%;
}
.bill-item-price {
float: left;
padding: 8px 0px 0px 7px;
width: 107px;
height: 25px;
font-family: MyriadProReg;
}
.bill-item-amount {
float: right;
padding: 8px 0px 0px 7px;
width: 25px;
height: 22px;
border-left: 1px solid rgb(230, 230, 230);
}
.bill-amount-selection {
width: 44.9px;
height: 100%;
float: right;
background-image: url(../images/item_amount_selection_bg.jpg);
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
.amount-increase {
height: 50%;
width: 100%;
background-image: url(../images/item_amount_inc.jpg);
background-position: center center;
background-repeat: no-repeat;
display: block;
}
.amount-decrease {
height: 50%;
width: 100%;
background-image: url(../images/item_amount_dec.jpg);
background-position: center center;
background-repeat: no-repeat;
display: block;
}
.bill-item-name {
padding-top: 5px;
border-bottom: 1px solid rgb(230, 230, 230);
height: 25px;
font-family: MyriadProReg;
}
.bill-item-name-left {
float: left;
padding-left: 6px;
padding-right: 5px;
padding-top: 4px;
font-family: MyriadProReg;
font-weight: normal;
font-size: 14px;
}
.bill-item-name-right {
float: right;
padding-top: 3px;
color: #878787;
font-family: MyriadProReg;
font-weight: 400;
}
I load text using an ajax post so some times I get more characters that I can show in the element. I hope you can get an idea from the following image.
The div hierarchy is following.
<div class="bill-item">
<!-- Item image -->
<div class="bill-item-img"></div>
<!-- Item description -->
<div class="bill-item-description">
<div class="bill-item-name">
<!-- Item Name -->
<p class="bill-item-name-left">Normal Cofee</p>
<!-- Item Price -->
<p class="bill-item-name-right">170.00</p>
<div class="clear"></div>
</div>
<!-- Total item price -->
<div class="bill-item-price">
<span>170.00</span>
</div>
<!-- Item Quantity -->
<div class="bill-item-amount">
<span>1</span>
</div>
</div>
<!-- Increas & Decrease item Quantity -->
<div class="bill-amount-selection">
<a class="amount-increase" href="#"></a>
<a class="amount-decrease" href="#"></a>
</div>
</div>
How can I fix this issue using CSS.. please help me!
Posting this as an answer to show the changes on the CSS class bill-item-name-left, did you tried something like this ?
.bill-item-name-left {
float: left;
padding-left: 6px;
padding-right: 5px;
padding-top: 4px;
font-family: MyriadProReg;
font-weight: normal;
font-size: 14px;
white-space: nowrap;
overflow:hidden;
}
If that does the trick, you should check the value you can set on the overflow or even use the text overflow property, more info : http://www.w3schools.com/cssref/css3_pr_text-overflow.asp