I'm currently trying to create a simple webpage for the http://www.code.org Computer Science week!
I'm trying to create an image based background for my navigation bar at the top of the page.
This is what I have so far:
HTML
<!DOCTYPE html>
<html>
<head>
<title>Welcome</title>
<link rel="stylesheet" type="css/text" href="CSstylesheet.css"
</head>
<body>
<div>
<img src="binarybanner.png" id="bannerimg" />
</div>
<div class="h3setup">
<a href="">
<h3 id="GI">General Information</h3>
</a>
<a href="">
<h3 id="BC">Benefits to Coding</h3>
</a>
<a href="">
<h3 id="CT">Coding Types</h3>
</a>
</div>
<div>
<img src="siteMapButton.png" id="siteMapButton"/>
</div>
</body>
</html>
CSS
h3 {
display: inline;
}
div.h3setup {
left: 195px;
top: 145px;
position: absolute;
display: inline;
width: 100%
}
div.h3setup a {
text-decoration: none;
}
#GI {
border: 2px solid #7FFF00;
border-radius: 6px;
margin-right: 15px;
background: black;
padding: 6px;
color: #7FFF00;
}
#GI:hover {
text-shadow: 3px 3px 3px #99FF66;
}
#BC {
border: 2px solid #7FFF00;
border-radius: 6px;
margin-right: 15px;
background: black;
padding: 6px;
color: #7FFF00;
}
#BC:hover {
text-shadow: 3px 3px 3px #99FF66;
}
#CT {
border: 2px solid #7FFF00;
border-radius: 6px;
margin-right: 15px;
background: black;
padding: 6px;
color: #7FFF00;
}
#CT:hover {
text-shadow: 3px 3px 3px #99FF66;
}
#bannerimg {
height: 200px;
width: 100%
display: inline;
margin-top: -10px;
margin-left: -10px;
margin-right: -10px;
}
#siteMapButton {
height: 35px;
width: 35px;
float: right;
margin-right: 1px;
}
You are missing a simi-colon after width: 100% in your css. In jsfiddle that fixed the problem.
Related
I'm trying to make a google clone page, I am trying to make the footer to be sticked to the end of the viewport. But when I try position: absolute bottom: 0, it sticks to the end, but the page overflows.
I tried to use html, body and * height: 100% but it doesn't work.
I share my github repository for you to check the code: https://github.com/Diefonro/HTML-CSS
You can also check the webpage (on a PC) at: https://diefonro.github.io/HTML-CSS/
Code:
* {
margin: 0;
}
html{
max-height: 100%;
}
body {
font-family: Arial, sans-serif;
}
nav {
text-align: right;
position: relative;
top: 9px;
right: 8px;
}
#nav-g-i {
display: inline-block;
position: relative;
top: 2px;
right: 23px;
}
#nav-gr-a {
display: inline-block;
position: relative;
top: 5px;
right: 10px;
}
#grid,
#profile-pic {
opacity: 50%;
}
section {
text-align: center;
position: relative;
top: 24px;
}
.input-g {
position: relative;
bottom: 2px;
width: 500px;
line-height: 17px;
border: none;
outline: none;
}
.input-cont {
width: 553px;
height: 16px;
position: relative;
bottom: 2px;
right: 1px;
color: #222;
border: 1px solid #dfe1e5;
font-size: 13px;
padding: 14px;
border-radius: 80px;
margin: 24px 0px;
display: inline-block;
}
.input-cont:hover,
.input-cont:focus {
box-shadow: 0 1px 5px 0 rgba(32, 33, 36, 0.28);
border-color: rgba(40, 40, 41, 0);
}
.input-cont > img {
position: absolute;
top: 10px;
right: 11px;
width: 23px;
}
.input-cont .search-i {
position: absolute;
top: 11.5px;
right: 547px;
width: 20px;
opacity: 40%;
}
#grid {
position: relative;
bottom: 3px;
margin-right: 16px;
}
.menu-item {
font-size: 13px;
color: #5b5f63;
text-decoration: none;
position: relative;
bottom: 8px;
margin-right: 10px;
}
.menu-item:hover {
text-decoration: underline;
}
#profile-pic {
width: 32px;
height: 32px;
}
.btn-cont {
position: relative;
top: 3px;
}
.custom-btn {
background-color: #f2f2f291;
color: #a2a8af;
font-size: 14px;
height: 36px;
padding: 0 16px;
background-image: linear-gradient(top, #f5f5f5, #f1f1f1);
border: 1px solid transparent;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0);
color: #222;
border-radius: 5px;
}
.custom-btn:first-of-type {
margin-right: 7px;
}
.custom-btn:hover {
border: 1px solid #c6c6c656;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
color: #222;
}
.custom-btn:active {
border: 1px solid cornflowerblue;
}
.drop-d {
width: 285px;
padding: 10px;
border: 1px solid #ccc;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
text-align: center;
position: absolute;
right: 11px;
border-radius: 12px;
display: none;
}
.grid:hover {
display: inline-block;
}
.dd-item:hover {
border: 1px solid rgba(0, 0, 0, 0.2);
border-radius: 8px;
}
.dd-item {
margin-top: 10px;
display: inline-block;
width: 70px;
padding: 6px 3px;
}
.dd-item > img {
height: 50px;
width: 50px;
}
.dd-item > p {
color: rgba(0, 0, 0, 0.87);
margin: 0;
margin-top: 15px;
margin-bottom: 5px;
}
.dd-cont {
display: inline-block;
}
.dd-cont:hover .drop-d {
display: block;
}
.s-lang {
font-size: 13px;
color: #333;
position: relative;
top: 30px;
right: 3px;
}
.s-lang a {
text-decoration: underline;
}
.s-lang a:visited {
color: rgb(30, 30, 179);
}
.ll {
display: inline-block;
position: relative;
left: 3px;
}
.footer1,
.footer2 {
font-size: 15px;
background-color: #d6d8da49;
color: #8a8686;
border-bottom: 1px solid rgba(155, 155, 155, 0.267);
position: relative;
top: 200px;
}
.footer2 a {
display: inline-block;
text-decoration: none;
padding: 12px;
font-size: 14px;
}
.footer3 a {
font-size: 14px;
padding: 14px;
position: relative;
top: 170px;
left: 990px;
text-decoration: none;
color: #8a868683;
}
span.f1 {
display: inline-block;
margin-left: 15px;
padding: 16px;
}
.a-li {
margin-left: 20px;
}
a:visited {
color: inherit;
}
.footer-cont {
position: absolute;
bottom: 0;
width: 100%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Google Clone Optimized (by Diefonro)</title>
<link rel="shortcut icon" href="assets/icons/favicon.ico" />
<link
href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet"
/>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<header>
<nav>
<div class="nav">
<div id="nav-g-i">
<a class="menu-item" href="#">Gmail</a>
<a class="menu-item" href="https://google.com/imghp">Images</a>
</div>
<div class="" id="nav-gr-a">
<div class="dd-cont">
<div class="grid">
<img
id="grid"
src="assets/icons/apps_black_24dp.svg"
alt="apps-icon"
/>
</div>
<div class="drop-d">
<div class="dd-item">
<img
id="dd-search"
src="assets/icons/google-logo-dd.png"
alt="google-search-icon"
/>
<p>Search</p>
</div>
<div class="dd-item">
<img
id="dd-maps"
src="assets/icons/google-maps-dd.png"
alt="google-maps-icon"
/>
<p>Maps</p>
</div>
<div class="dd-item">
<img
id="dd-keep"
src="assets/icons/google-keep-dd.png"
alt="google-keep-icon"
/>
<p>Keep</p>
</div>
<div class="dd-item">
<img
class="dd-drive"
src="assets/icons/Google_Drive_dd.png"
alt="google-keep-icon"
/>
<p>Drive</p>
</div>
<div class="dd-item">
<img
class="dd-calendar"
src="assets/icons/512px-Google_Calendar_icon_dd.png"
alt="google-calendar-icon"
/>
<p>Calendar</p>
</div>
<div class="dd-item">
<img
class="dd-photos"
src="assets/icons/google_photos-dd.png"
alt="google-photos-icon"
/>
<p>Photos</p>
</div>
</div>
</div>
<img
id="profile-pic"
src="assets/icons/account_circle_black_24dp.svg"
alt="account-icon"
/>
</div>
</div>
</nav>
</header>
<main>
<section>
<div class="logo-cont">
<img
id="google-logo"
src="assets/images/googlelogo_color_272x92dp.png"
alt="google-logo"
/>
</div>
<div class="input-cont">
<input class="input-g" type="text" />
<img
src="assets/icons/search_black_24dp.svg"
alt="search-icon"
class="search-i"
/>
<img
class="mic"
src="assets/icons/Google_mic.svg.png"
alt="voice-search-icon"
/>
</div>
<div class="btn-cont">
<button class="custom-btn">Google Search</button>
<button class="custom-btn custom-btn-l">I'm Feeling Lucky</button>
</div>
<span class="s-lang"
>Google offered in:
<a href="#" class="s-link"
><div class="ll">Español (Latinoamérica)</div></a
>
</span>
</section>
</main>
<footer>
<div class="footer-cont">
<div class="footer1">
<span class="f1">Colombia</span>
</div>
<div class="footer2">
<div class="a-li">
About
Advertising
Business
How Search works
</div>
</div>
<div class="footer3">
Privacy
Terms
Settings
</div>
</div>
</footer>
</body>
</html>
try to change your width to 100vw and. you can use flex box to footer2 and footer3. so the code will be :
<footer>
<div class="footer-cont">
<div class="top-footer">
<span class="f1">Colombia</span>
</div>
<div class="bottom-footer">
<div class="left-footer">
<div class="a-li">
About
Advertising
Business
How Search works
</div>
</div>
<div class="right-footer">
Privacy
Terms
Settings
</div>
</div>
</div>
</footer>
and the css will be :
footer{
position : relative;
width: 100vw;
}
.footer-cont{
position: absolute;
width : 100%;
bottom : 0;
left : 0;
height : fit-content;
height : -moz-fit-content;
}
.top-footer{
border-bottom : 1px solid #333;
}
.bottom-footer{
display : flex;
justify-content : space-between
align-items : center;
}
I am making this google clone, and when the dropdown is inside a viewport width enough, it looks fine, but if the viewport is small it goes behind the input and it looks transparent, as it shows in this image:
Do you guys know how can I fix this? Try it in a responsive viewport please.
You can see it in: https://diefonro.github.io/HTML-CSS
PD: I have tried to modify the z-index but it doesn't work
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Google Clone Optimized (by Diefonro)</title>
<link rel="shortcut icon" href="assets/icons/favicon.ico" />
<link
href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet"
/>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<header>
<nav>
<div class="nav">
<div id="nav-g-i">
<a class="menu-item" href="#">Gmail</a>
<a class="menu-item" href="https://google.com/imghp">Images</a>
</div>
<div class="" id="nav-gr-a">
<div class="dd-cont">
<div class="grid">
<img
id="grid"
src="assets/icons/apps_black_24dp.svg"
alt="apps-icon"
/>
</div>
<div class="drop-d">
<div class="dd-item">
<img
id="dd-search"
src="assets/icons/google-logo-dd.png"
alt="google-search-icon"
/>
<p>Search</p>
</div>
<div class="dd-item">
<img
id="dd-maps"
src="assets/icons/google-maps-dd.png"
alt="google-maps-icon"
/>
<p>Maps</p>
</div>
<div class="dd-item">
<img
id="dd-keep"
src="assets/icons/google-keep-dd.png"
alt="google-keep-icon"
/>
<p>Keep</p>
</div>
<div class="dd-item">
<img
class="dd-drive"
src="assets/icons/Google_Drive_dd.png"
alt="google-keep-icon"
/>
<p>Drive</p>
</div>
<div class="dd-item">
<img
class="dd-calendar"
src="assets/icons/512px-Google_Calendar_icon_dd.png"
alt="google-calendar-icon"
/>
<p>Calendar</p>
</div>
<div class="dd-item">
<img
class="dd-photos"
src="assets/icons/google_photos-dd.png"
alt="google-photos-icon"
/>
<p>Photos</p>
</div>
</div>
</div>
<img
id="profile-pic"
src="assets/icons/account_circle_black_24dp.svg"
alt="account-icon"
/>
</div>
</div>
</nav>
</header>
<main>
<section>
<div class="logo-cont">
<img
id="google-logo"
src="assets/images/googlelogo_color_272x92dp.png"
alt="google-logo"
/>
</div>
<div class="input-cont">
<input class="input-g" type="text" />
<img
src="assets/icons/search_black_24dp.svg"
alt="search-icon"
class="search-i"
/>
<img
class="mic"
src="assets/icons/Google_mic.svg.png"
alt="voice-search-icon"
/>
</div>
<div class="btn-cont">
<button class="custom-btn">Google Search</button>
<button class="custom-btn custom-btn-l">I'm Feeling Lucky</button>
</div>
<span class="s-lang"
>Google offered in:
<a href="#" class="s-link"
><div class="ll">Español (Latinoamérica)</div></a
>
</span>
</section>
</main>
<footer>
<div class="footer-cont">
<div class="top-footer">
<span class="f1">Colombia</span>
</div>
<div class="bottom-footer">
<div class="left-footer">
<div class="a-li">
About
Advertising
Business
How Search works
</div>
</div>
<div class="right-footer">
Privacy
Terms
Settings
</div>
</div>
</div>
</footer>
</body>
</html>
* {
margin: 0;
}
html{
min-width: 100vw;
overflow-y: hidden;
}
body {
font-family: Arial, sans-serif;
}
nav {
text-align: right;
position: relative;
top: 9px;
right: 8px;
}
#nav-g-i {
display: inline-block;
position: relative;
top: 2px;
right: 23px;
}
#nav-gr-a {
display: inline-block;
position: relative;
top: 5px;
right: 10px;
}
#grid,
#profile-pic {
opacity: 50%;
}
#google-logo{
width: 50%;
max-width: 272px;
}
section {
text-align: center;
position: relative;
top: 24px;
}
input{
position: relative;
bottom: 2px;
width: 80%;
word-wrap: break-word;
/* max-width: 90%; */
line-height: 17px;
border: none;
outline: none;
}
.input-cont {
max-width: 553px;
width: 70%;
height: 16px;
position: relative;
bottom: 2px;
right: 1px;
color: #222;
border: 1px solid #dfe1e5;
font-size: 13px;
padding: 14px;
border-radius: 80px;
margin: 24px 0px;
display: inline-block;
}
.input-cont:hover,
.input-cont:focus {
box-shadow: 0 1px 5px 0 rgba(32, 33, 36, 0.28);
border-color: rgba(40, 40, 41, 0);
}
.input-cont .mic {
position: absolute;
top: 10px;
right: 11px;
width: 23px;
}
.input-cont .search-i {
position: absolute;
top: 10px;
left: 11px;
max-width: 7.4%;
opacity: 40%;
}
#grid {
position: relative;
bottom: 3px;
margin-right: 16px;
}
.menu-item {
font-size: 13px;
color: #5b5f63;
text-decoration: none;
position: relative;
bottom: 8px;
margin-right: 10px;
}
.menu-item:hover {
text-decoration: underline;
}
#profile-pic {
width: 32px;
height: 32px;
}
.btn-cont {
position: relative;
top: 3px;
}
.custom-btn {
background-color: #f2f2f291;
color: #a2a8af;
font-size: 14px;
height: 36px;
padding: 0 16px;
background-image: linear-gradient(top, #f5f5f5, #f1f1f1);
border: 1px solid transparent;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0);
color: #222;
border-radius: 5px;
}
.custom-btn:first-of-type {
margin-right: 7px;
}
.custom-btn:hover {
border: 1px solid #c6c6c656;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
color: #222;
}
.custom-btn:active {
border: 1px solid cornflowerblue;
}
.drop-d {
width: 285px;
padding: 10px;
border: 1px solid #ccc;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
text-align: center;
position: absolute;
right: 11px;
border-radius: 12px;
display: none;
}
.grid:hover {
display: inline-block;
}
.dd-item:hover {
border: 1px solid rgba(0, 0, 0, 0.2);
border-radius: 8px;
}
.dd-item {
margin-top: 10px;
display: inline-block;
width: 70px;
padding: 6px 3px;
}
.dd-item > img {
height: 50px;
width: 50px;
}
.dd-item > p {
color: rgba(0, 0, 0, 0.87);
margin: 0;
margin-top: 15px;
margin-bottom: 5px;
}
.dd-cont {
display: inline-block;
}
.dd-cont:hover .drop-d {
display: block;
}
.s-lang {
font-size: 13px;
color: #333;
position: relative;
top: 30px;
right: 3px;
}
.s-lang a {
text-decoration: underline;
}
.s-lang a:visited {
color: rgb(30, 30, 179);
}
.ll {
display: inline-block;
position: relative;
left: 3px;
}
.top-footer,
.bottom-footer {
font-size: 15px;
background-color: #f3f3f3;
color: #8a8686;
position: relative;
}
.top-footer{
border-bottom: 1px solid rgba(155, 155, 155, 0.267);
}
.left-footer a {
display: inline-block;
text-decoration: none;
padding: 14.5px;
font-size: 14px;
}
.right-footer a {
font-size: 14px;
margin-right: 10px;
padding: 13px;
text-decoration: none;
color: #8a8686;
}
.bottom-footer{
display: flex;
justify-content: space-between;
align-items: center;
}
.bottom-footer a:hover{
text-decoration: underline;
}
span.f1 {
display: inline-block;
margin-left: 15px;
padding: 16px;
}
.a-li {
margin-left: 20px;
}
a:visited {
color: inherit;
}
.footer-cont {
position: absolute;
bottom: 0;
width: 100%;
left: 0;
}
You have a lot of positioned elements, but none of them have any z-index, so all you have to do is add a z-index to your dropdown; with that said, the background of the dropdown is transparent currently, so the other elements will still show through. Just add a background color to it to fix that.
.drop-d
{
z-index: 1;
background-color: white;
}
I want to achieve drop-down button as per following design image. See drop-down menu starts just after middle of button. My problem is that button has transparent background to utilize background image from root parent div.
So far I have achieved following image. As I said above, I want to achieve white edges outside of border-radius.
.dropdown-header {
border-top-left-radius: 20px;
border-top-right-radius: 20px;
width: 210px;
height: 185px;
margin: auto;
}
.div-user-header {
width: 210px;
margin: auto;
position: relative;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
}
.div-user-header-1 {
width: 206px;
height: 24px;
border: 2px solid #9CB2C7;
border-radius: 20px;
display: inline-block;
text-align: center;
padding-top: 5px;
}
.div-user-header-1 a {
text-decoration: none;
color: #FCCC00;
display: block;
}
.div-user-header-list {
position: absolute;
background-color: white;
height: 170px;
width: 210px;
}
.div-user-header-2 a {
text-decoration: none;
font-size: 12px;
color: #8C8C8C;
}
.div-user-header-2 {
height: 40px;
padding: 12px 15px;
}
.div-user-header-3 a {
text-decoration: none;
font-size: 12px;
color: #8C8C8C;
}
.div-user-header-3 {
height: 40px;
padding: 12px 15px;
}
.div-add-profile-card {
padding: 0px 15px;
}
.div-add-profile-card a {
text-decoration: none;
color: #8C8C8C;
font-size: 10px;
padding: 12px;
display: block;
border-top: 1px solid #D6D6D6;
}
<div class="dropdown-header">
<div class="div-user-header">
<div class="div-user-header-1">
ProfileUser 01
</div>
<div class="div-user-header-list">
<div class="div-user-header-2">
<img src="../../../assets/images/avtar2.png" width="34px" height="34px" style="padding-right: 5px; vertical-align: middle" />
ProfileUser 01
</div>
<div class="div-user-header-3">
<img src="../../../assets/images/user-02.png" width="30px" height="30px" style="padding-right:5px; vertical-align: middle" />
ProfileUser 02
</div>
<div class="div-add-profile-card">
+ Add Profile Cards
</div>
</div>
</div>
Any suggestion would be really helpful.
Use ::after ::before pseudo elements for the dropdown and apply separate background-image as marked in the image. Apply position:absolute and align then in the top left and right corners based on the design.
It's very simple. You have achieved almost 99%. Just add below styles to your CSS of .div-user-header-list as below:
.div-user-header-list {
position: absolute;
background-color: white;
height: 170px;
width: 210px;
padding-top: 20px;
margin-top: -20px;
z-index: -1;
}
See the updated fiddle here: https://jsfiddle.net/8ukj3wy1/1/
Check this one out:
https://jsfiddle.net/sLy7fnzg/
Essentially use a negative margin to move the .div-user-header-list up and use relative positioning to enable z-indexes.
Also, to resolve the issue with the half border, remove the border from the .div-user-header-1 and add a whole element as a ::before to the .div-user-header like so:
.div-user-header::before {
content: "";
background: #9CB2C7;
width: 210px;
height: 30px;
display:block;
position: absolute;
top: 0;
left: 0;
border-radius: 20px;
z-index: 1;
}
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Varela+Round" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">
<style>
body{
background-color: grey;
}
.dropdown-header {
border-top-left-radius: 20px;
border-top-right-radius: 20px;
width: 210px;
height: 203px;
margin: auto;
overflow: hidden;
/*background-color: #fff;*/
}
.div-user-header-list:before,
.div-user-header-list:after {
content: "";
position: absolute;
height: 10px;
width: 20px;
bottom: 0;
}
.div-user-header-list:before {
/*right: -20px;*/
left: 1px;
top: -10px;
border-radius: 0 0 0 10px;
-moz-border-radius: 0 0 0 10px;
-webkit-border-radius: 0 0 0 10px;
-webkit-box-shadow: -10px 0 0 0 #fff;
box-shadow: -10px 0 0 0 #fff;
}
.div-user-header-list:after {
/*left: -20px;*/
right: 1px;
top: -10px;
border-radius: 0 0 10px 0;
-moz-border-radius: 0 0 10px 0;
-webkit-border-radius: 0 0 10px 0;
-webkit-box-shadow: 10px 0 0 0 #fff;
box-shadow: 10px 0 0 0 #fff;
}
.div-user-header {
width: 210px;
margin: auto;
position: relative;
border-radius: 20px;
}
.div-user-header-1 {
width: 206px;
height: 24px;
border: 2px solid #9CB2C7;
border-radius: 20px;
display: inline-block;
text-align: center;
padding-top: 5px;
}
.div-user-header-1 a {
text-decoration: none;
color: #FCCC00;
display: block;
}
.div-user-header-list {
position: absolute;
background-color: white;
height: 170px;
width: 210px;
/*margin-top: -14px;
z-index: -9;
padding-top: 14px;*/
}
.div-user-header-2 a {
text-decoration: none;
font-size: 12px;
color: #8C8C8C;
}
.div-user-header-2 {
height: 40px;
padding: 12px 15px;
}
.div-user-header-3 a {
text-decoration: none;
font-size: 12px;
color: #8C8C8C;
}
.div-user-header-3 {
height: 40px;
padding: 12px 15px;
}
.div-add-profile-card {
padding: 0px 15px;
}
.div-add-profile-card a {
text-decoration: none;
color: #8C8C8C;
font-size: 10px;
padding: 12px;
display: block;
border-top: 1px solid #D6D6D6;
}
</style>
</head>
<body>
<div class="dropdown-header">
<div class="div-user-header">
<div class="div-user-header-1">
ProfileUser 01
</div>
<div class="div-user-header-list">
<div class="div-user-header-2">
<img src="../../../assets/images/avtar2.png" width="34px" height="34px" style="padding-right: 5px; vertical-align: middle" />
ProfileUser 01
</div>
<div class="div-user-header-3">
<img src="../../../assets/images/user-02.png" width="30px" height="30px" style="padding-right:5px; vertical-align: middle" />
ProfileUser 02
</div>
<div class="div-add-profile-card">
+ Add Profile Cards
</div>
</div>
</div>
</body>
</html>
I've the below HTML Code in my document.
<div class="panel-body chat-box-main">
<div class="chat-box-left">Hello, Welcome!. You can ask me
questions on Compliance Policy ..</div>
<div class="chat-box-name-left">
<img src="compiler-bot-static.gif" alt="bootstrap Chat box user image"
class="img-circle"> - Bot
</div>
<hr class="hr-clas">
<div class="chat-box-right" id="chatbox">Hi</div>
<div class="chat-box-name-right">
<img src="smiley.jpg" alt="bootstrap Chat box user image"
class="img-circle">
</div>
<div class="chat-box-left">Hello</div>
<div class="chat-box-name-left">
<img src="compiler-bot-static.gif" alt="bootstrap Chat box user image"
class="img-circle">- Bot
</div>
</div>
And my CSS is as below.
.hr-clas {
border-top: 1px solid #A12EB3;
}
.chat-box-main {
height: 400px;
overflow-y: auto;
}
.chat-box-div {
border: 2px solid #A12EB3;
border-bottom: 2px solid #A12EB3;
}
.chat-box-head {
padding: 10px 15px;
border-bottom: 2px solid #A12EB3;
background-color: #B25AE5;
color: #fff;
text-align: center;
}
.chat-box-left {
width: 100%;
height: auto;
padding: 15px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
position: relative;
border: 1px solid #C5C5C5;
font-size: 12px;
border: 2px solid #73AD21;
border-radius: 25px;
}
.chat-box-left:after {
top: 100%;
left: 10%;
border: solid transparent;
content: " ";
position: absolute;
border-top-color: #C5C5C5;
border-width: 15px;
margin-left: -15px;
}
.chat-box-name-left {
margin-top: 30px;
margin-left: 60px;
text-align: left;
color: #049E64;
}
.chat-box-name-left img {
max-width: 40px;
border: 2px solid #049E64;
}
.chat-box-right {
width: 100%;
height: auto;
padding: 15px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
position: relative;
border: 1px solid #C5C5C5;
font-size: 12px;
}
.chat-box-right:after {
top: 100%;
right: 10%;
border: solid transparent;
content: " ";
position: absolute;
border-top-color: #C5C5C5;
border-width: 15px;
margin-left: -15px;
}
.chat-box-name-right {
color: #354EA0;
margin-top: 30px;
margin-right: 60px;
text-align: right;
}
.chat-box-name-right img {
max-width: 40px;
border: 2px solid #354EA0;
}
.chat-box-footer {
background-color: #D8D8D8;
padding: 10px;
}
Here my requirement is to automatically set the width of each box(div) as per the content entered and float them accordingly to left/right.
Currently my output is as below.
Here as seen in the above screenshot, though there is only one word in the div, it is taking the entire width. Please let me know on how can I limit this to the text width.
Thanks
try this https://plnkr.co/edit/KXF1jkOd7G9JB8j7DIGC
I have changed the div to span. Hope this helps !
<span class="chat-box-left">Hello, Welcome!. You can ask me
questions on Compliance Policy ..</span>
Are you looking some thing like this, Try this add display: inline-block; to div
.hr-clas {
border-top: 1px solid #A12EB3;
}
.chat-box-main {
height: 400px;
overflow-y: auto;
}
.chat-box-div {
border: 2px solid #A12EB3;
border-bottom: 2px solid #A12EB3;
}
.chat-box-head {
padding: 10px 15px;
border-bottom: 2px solid #A12EB3;
background-color: #B25AE5;
color: #fff;
text-align: center;
}
.chat-box-left {
width:auto;
height: auto;
padding: 35px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
position: relative;
border: 1px solid #C5C5C5;
font-size: 12px;
border: 2px solid #73AD21;
border-radius: 25px;
display: inline-block;
}
.chat-box-left:after {
top: auto;
left: 10%;
border: solid transparent;
content: " ";
position: absolute;
border-top-color: #C5C5C5;
border-width: 15px;
margin-left: -15px;
}
.chat-box-name-left {
margin-top: 30px;
margin-left: 60px;
text-align: left;
color: #049E64;
}
.chat-box-name-left img {
max-width: 40px;
border: 2px solid #049E64;
}
.chat-box-right {
width:auto;
height: auto;
padding: 35px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
position: relative;
border: 1px solid #C5C5C5;
font-size: 12px;
display: inline-block;
}
.chat-box-right:after {
top: 100%;
display: inline-block; right: 10%;
border: solid transparent;
content: " ";
position: absolute;
border-top-color: #C5C5C5;
border-width: 15px;
margin-left: -15px;
}
.chat-box-name-right {
color: #354EA0;
margin-top: 30px;
margin-right: 60px;
text-align: right;
}
.chat-box-name-right img {
max-width: 40px;
border: 2px solid #354EA0;
}
.chat-box-footer {
background-color: #D8D8D8;
padding: 10px;
}
<div class="panel-body chat-box-main">
<div class="chat-box-left">Hello, Welcome!. You can ask me
questions on Compliance Policy ..</div>
<div class="chat-box-name-left">
<img src="compiler-bot-static.gif" alt="bootstrap Chat box user image"
class="img-circle"> - Bot
</div>
<hr class="hr-clas">
<div class="chat-box-right" id="chatbox">Hi</div>
<div class="chat-box-name-right">
<img src="smiley.jpg" alt="bootstrap Chat box user image"
class="img-circle">
</div>
<div class="chat-box-left">Hello</div>
<div class="chat-box-name-left">
<img src="compiler-bot-static.gif" alt="bootstrap Chat box user image"
class="img-circle">- Bot
</div>
</div>
I want to put 3 image's in the header, left is logo and right is search box.
how can I put them in the same line?
I want it so that its the logo on the left of the header and the search box is on the right..
Please help.
#logo {
float: left;
margin-left: 10%;
height: 30%;
width: 20%;
}
#searchlogo {
float: right;
height: 30px;
width: 30px;
margin: 5px;
position: relative;
top: -5px;
}
/*search box*/
input.rounded {
margin-left: 85%;
border: 1px solid #ccc;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
-moz-box-shadow: 2px 2px 3px #666;
-webkit-box-shadow: 2px 2px 3px #666;
box-shadow: 2px 2px 3px #666;
font-size: 14px;
font-family: Tahoma, Geneva, sans-serif;
padding: 4px 7px;
outline: 0;
-webkit-appearance: none;
}
input.rounded:focus {
border-color: #969063;
}
<header>
<a href="main.html">
<img id="logo" src="logo.gif" />
</a>
<input type="text" class="rounded" />
<input type="image" id="searchlogo" src="searchbutton.png" />
</header>
It's your margin-left:85% rule for the input.rounded class. Any reason why you need margin that is most of the screen width? If you remove that rule, everything lines up in one row.
You need to change the way the elements behave in terms of block and inline.
the below code should achieve what your looking for.
also your margin's where totally out of whack i have removed them from the equation and float.
I've also added a few extra css rules to help you with this kind of thing in the future.
.align {
display: inline-block;
*display: inline;
zoom: 1;
vertical-align: top;
}
.align-center {
text-align: center;
}
.align-left {
text-align: left;
}
.align-right {
text-align: right;
}
.align-table {
display: table;
width: 100%;
table-layout: fixed;
}
.t-align {
display: table-cell;
vertical-align: top;
width: 100%;
}
#logo {
height: 30%;
width: 20%;
}
#searchlogo {
height: 30px;
width: 30px;
margin: 5px;
position: relative;
top: -5px;
}
/*search box*/
input.rounded {
border: 1px solid #ccc;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
-moz-box-shadow: 2px 2px 3px #666;
-webkit-box-shadow: 2px 2px 3px #666;
box-shadow: 2px 2px 3px #666;
font-size: 14px;
font-family: Tahoma, Geneva, sans-serif;
padding: 4px 7px;
outline: 0;
-webkit-appearance: none;
}
input.rounded:focus {
border-color: #969063;
}
<header class="align-table">
<div class="t-align">
<a href="main.html">
<img id="logo" src="logo.gif" />
</a>
</div>
<div class="t-align align-right">
<form class="align">
<input type="text" class="rounded" />
<input type="image" id="searchlogo" src="searchbutton.png" />
</form>
</div>
</header>