I am tinkering with a basic site I plan to host my blog on in the future and I cannot manage to get one of my div elements to align with the rest of the site properly. I have linked to the project on CodePen below. I cannot seem to eliminate the white space between .header and .main. I had thought simply making the display: inline-block and keeping the margin/padding/border small would do the trick but I am obviously mistaken. Thoughts?
http://codepen.io/Kpmfastball/pen/xOvBNB
Below is the CSS for .main, the div class I am struggling with, and .heading, which is the div located right above it on the webpage.
.main {
display: inline-block;
height: 800px;
width: 82%;
margin: 1px;
padding: 1px;
border-width: 1px;
font-family: times;
background-color: #29BA91;
}
.heading {
display: block;
font-family: times;
width: auto;
height: 150px;
border-width: 1px;
border-color: black;
margin: 1px;
padding: 1px;
background-color: #0F8CB2;
color: #ffffff;
}
Just put this in .main:
vertical-align: top;
try to use HTML5 tags and also why don't you use css frameworks like Bootstrap or Foundation?
it's a lot that you should do to make your website responsive. you're code was a little bit messy so i cleaned it up for you..
h1 {
font-size: 50px;
text-align: left;
}
HEADER {
display: block;
font-family: times;
width: auto;
height: 150px;
border-width: 1px;
border-color: black;
margin: 1px;
padding:1px;
background-color: #0F8CB2;
color: #ffffff;
}
MAIN{
display: flex;
justify-content: space-between;
}
.nav {
display: flex;
width: 200px;
font-family: times;
height: 900px;
border-width: 1px;
border-color: black;
margin: 1px;
padding: 1px;
background-color: #0A6D37;
color: #ffffff;
}
.main {
display: flex;
flex:1;
height: 900px;
margin: 1px;
padding: 1px;
border-width: 1px;
font-family: times;
background-color: #29BA91;
}
.link1 {
color: #ffffff;
}
<html>
<head>
<title>A-Not-So-Well-Respected Man Blog</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header>
<h1 style="padding: 5px; border: 5px; margin: 5px">A-Not-So-Well-Respected Man</h1>
<h5>Random Thoughts and Musings</h5>
</header>
<main>
<div class="nav">
<h3 align="center">Menu</h3>
<ul>
<li>Posts A-Z</li>
<li>Posts By Tag</li>
<li>Newest Posts</li>
<li>About Me</li>
</ul>
</div>
<div class="main">
<a class="link1" href="https://anotsowellrespectedman.wordpress.com/2016/02/14/love-and-brutality-a-history-of-february-14th/">Latest blog post</a>
</div>
</main>
</body>
</html>
Hope it helps...
you can add float:left; to class nav and class main, it will be like this:
.nav {
display: inline-block;
font-family: times;
width: 200px;
height: 900px;
border-width: 1px;
border-color: black;
margin: 1px;
padding: 1px;
background-color: #0A6D37;
color: #ffffff;
float:left;
}
.main {
display: inline-block;
height: 800px;
width: 82%;
margin: 1px;
padding: 1px;
border-width: 1px;
font-family: times;
background-color: #29BA91;
float:left;
}
Related
We are trying to create a chatbot application. The input where user enters the text and 'send' button are inside a div. The div width is 100%. This is working good in the laptop and on all the mobiles except Iphone14 where the send button is getting cutoff. Below is the code.
.chat-container {
background: #fff;
height: 100%;
overflow: hidden;
padding: 0;
border-right: 1px solid #d8dada;
border-left: 1px solid #d8dada;
}
.chat-container>div:last-of-type {
position: absolute;
bottom: 0;
width: 100%;
display: flex;
align-items: center;
padding-right: 10px;
}
body>div>div>div:nth-child(2)>span {
background: #dadada;
padding: 10px;
font-size: 21px;
border-radius: 50%;
}
body>div>div>div.message-data-right.macro {
margin: auto;
margin-left: 1%;
}
.chat-header {
background-color: #ffffff;
height: 3.5rem;
line-height: 3.5rem;
color: #000000;
border-bottom: 1px solid #000000;
position: relative;
}
.chat-header-content {
align-content: center;
padding-top: 10px;
padding-bottom: 10px;
}
.header-img {
height: 24px;
width: 106px;
transform: scale(0.85);
vertical-align: middle;
content: url('./../images/vz_logo.svg');
}
.gray-button {
background-color: #5b5b5b;
border: none;
color: white;
padding: 10px 24px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 15px;
font-family: Roboto-Medium;
border-radius: 4px;
}
.chat-ul {
width: 100%;
list-style-type: none;
padding: 18px 18px 3px 18px;
position: absolute;
bottom: 62px;
display: flex;
flex-direction: column;
top: 3.5rem;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: #909296 #dee0e2;
background-color: #f6f6f6;
margin-bottom: 0%;
border-bottom: 1px solid #c1c1c1;
}
.entered-text {
border-width: 1px;
border-radius: 5px;
padding: 10px;
background: #f6f6f6;
width: 100%;
border-color: #c1c1c1;
}
.text {
width: 100%;
display: flex;
flex-direction: column;
}
.text>p:first-of-type {
width: 100%;
margin-top: 0;
margin-bottom: auto;
line-height: 13px;
font-size: 13px;
}
.text>p {
width: 100%;
margin-top: 0;
margin-bottom: auto;
line-height: 13px;
font-size: 13px;
}
.text>p:last-of-type {
width: 100%;
text-align: right;
margin-bottom: -2px;
margin-top: auto;
}
.text-right {
float: right;
font-family: Arial;
position: relative;
}
.send-message {
width: 100%;
border-radius: 0px;
padding: 10px;
display: flex;
}
input:focus {
outline: none;
}
button,
button:focus,
button:active {
outline: none;
}
<div class="chat-container">
<header class="chat-header">
<img class="header-img" />
<button type="button" class="icon-close" onClick="closeChatWindow()"></button>
</header>
<ul class="chat-ul"></ul>
<div>
<div class="send-message">
<div class="text text-right">
<input class="entered-text" />
</div>
</div>
<button id="send" class="gray-button" type="button" onClick="onMessageSend()"> Send </button>
</div>
</div>
Our testing team raised a bug saying that send button gets cutoff on IPhone14. I am not sure how to reproduce the issue as I don't have Iphone14. I have Android phone on which code is working fine. On Pc also, I tested on different browsers all are working fine. I used toggle device toolbar under developer tools to check how it looks like for different devices and used responsive to change width and height. I am not able to reproduce the issue. Below is the image where it got reproduced on Iphone14.
At the end of the image 'Send' grey color button is cutoff. Can any one please let me know how to resolve the issue.
You don't need an iPhone to see this. It's apparent in Chrome for me. Use the emulator in the dev tools if you like.
Remove the float (.text-right) from the layout
Take the 100% width off the input and .send-message
Move the flex class up a level to contain both the input and the button
I've also added some left margin to the button.
I've fixed a great many such situations in my career, and more often than not the solution involves removing unnecessary styling to simplify. You might work though your entire layout and do so.
.gray-button {
background-color: #5b5b5b;
border: none;
color: white;
padding: 10px 24px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 15px;
font-family: Roboto-Medium;
border-radius: 4px;
margin-left: 10px;
}
.entered-text {
border-width: 1px;
border-radius: 5px;
padding: 10px;
background: #f6f6f6;
border-color: #c1c1c1;
}
.text {
width: 100%;
display: flex;
flex-direction: column;
}
.send-message {
border-radius: 0px;
padding: 10px;
display: flex;
}
input:focus {
outline: none;
}
button,
button:focus,
button:active {
outline: none;
}
<div class="chat-container">
<div class="send-message">
<div class="text">
<input class="entered-text" />
</div>
<button id="send" class="gray-button" type="button" onClick="onMessageSend()"> Send </button>
</div>
</div>
The most straightforward way to solve this is to is use the CSS calc() function to give input.entered-text a flexible width which will always accommodate the width of the <button>:
e.g. If you give button#send a fixed width (width: 100px), then you can give input.entered-text a width that can accommodate that fixed width (width: calc(100% - 100px))
Example:
#send {
display: inline-block;
width: 100px;
margin-left: 12px;
box-sizing: border-box;
}
.entered-text {
display: inline-block;
width: calc(100% - 12px - 100px);
box-sizing: border-box;
}
Im no expert but should you put a <br> in the div
edit:
line breaks are usually unnecessary so I would say only use this temporary until you find the solution
I have this simple html with a button:
body {
background-color: White;
font-family: 'Roboto', sans-serif;
width: 800px;
margin: 0 auto;
}
div.container_body_content {
margin-top: 10px;
margin-bottom: 10px;
margin-left: 10px;
margin-right: 10px;
}
div.buttondiv {
width: 100%;
height: auto;
border: 1px solid black;
display: flex;
align-items: center;
justify-content: center;
}
.button {
background-color: #93d00f;
border: none;
color: black;
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
margin: 4px 2px;
cursor: pointer;
border-radius: 16px;
}
.button:hover {
background-color: Green;
}
<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
<div class="container_body_content">
<div class="buttondiv">
<button class="button"><span style="color:White;font-family:'Roboto';font-weight:bold;">Test Button</span></button>
</div>
</div>
When I comment out width: 800px; margin: 0 auto; for body, the button works fine and changes background-color to green on hover.
However if I have width: 800px; margin: 0 auto; set for body, the button just simply does not work, meaning background-color does not change to green on hover.
What I need is for the button to have this on hover effect even when I reduce the body width.
I can not seem to figure out what is going on, what am I doing wrong? Thank you
Strangely enough in the snippet it works, but when I open it in Safari or Google Chrome, it does not, this is how it looks like on my side:
Mystery solved, I just found a rogue DIV which I had "laid" on top of my div.buttondiv. In the snippet it works, because I attached just a MWE and left out the problematic part of the code.
This is the part of CSS that caused my problem:
#bar-graph tbody tr {
height: 296px;
padding-top: 2px;
}
Thanks everyone for your insights
I am making a Image upload result box, somehow I managed to give it proper layout but elements of the result box doesn't seem right in 'Brackets View'
I struggle when it comes to use floats, clear and display. I get confused, I've tried to learn it 4-5 times till now but somewhere I fail to apply them properly.
Can someone guide me through this code while explaining when and where to use them..
Also, I use this technique to clear floats but sometimes it works and sometimes nothing happens:
.example
{
content: ' ';
display: block;
clear: both;
}
My HTML & CSS:
.files-bar {
width: 100%;
max-width: 700px;
margin: 20px auto;
padding: 15px;
overflow: auto;
border: 1px solid #BBBBBB;
box-shadow: 2px 3px 15px #E7E7E7;
}
.delete {
float: right;
background-color: #02BFC1;
color: #FFFFFF;
font-family: gothic;
width: 100%;
max-width: 75px;
border: 1px solid #02BFC1;
font-size: 10pt;
padding: 10px;
border-radius: 5px;
cursor: pointer;
}
.image-thumb {
float: left;
display: inline;
width: 160px;
height: 120px;
margin-right: 20px;
}
.img-thumb:after {
content: '';
display: block;
clear: both;
}
.image-name {
font-size: 17pt;
margin-top: 2px;
}
.image-size {
font-size: 13pt;
margin: 20px 0;
}
.file-status {
display: block;
font-size: 12pt;
margin-bottom: 10px;
}
.progress-wrap {
float: left;
width: 300px;
height: 20px;
color: #111;
height: 5px;
margin-top: 5px;
}
.progress-meter {
max-width: 300px;
height: 5px;
background: #02BFC1;
}
.up {
margin-left: 30px;
}
.cancel-upload {
float: left;
margin: -25px 0 0 -15px;
}
<div class="files-bar">
<button class="manage-btn delete">Delete</button>
<img class="image-thumb" src="profile_image/2861e205148ccebc01cb9b1d8a4c6b0c.jpg">
<p class="image-name">14217596f69f44507b.jpg</p>
<p class="image-size">22 KB</p>
<p class="file-status">File Uploaded Successfully!</p>
<div class="progress-wrap">
<!-- Progress bar -->
<div class="progress-meter"></div>
</div>
<p class="cancel-upload">✖</p>
</div>
Float is not a good strategy for layout as it requires managing floats with clear:both. clear will clear any floats defined previously, in this case your delete button that is floated right.
Please see this quick reference on float and clear properties.
As mentioned in a comment above, using display:flex will give you greater control over layout. Here is a solution with minimal change to your original code. I set display:flex on the container defined by div files-bar, created a container for progress and one for the delete button. Together with the img, these sibling elements are flex items. Here is a good tutorial on using flex.
And the complete code:
.files-bar
{
width: 100%;
max-width: 700px;
margin: 20px auto;
padding: 15px;
overflow: auto;
border: 1px solid #BBBBBB;
box-shadow: 2px 3px 15px #E7E7E7;
display:flex;
}
.delete
{
background-color: #02BFC1;
color: #FFFFFF;
font-family: gothic;
max-width: 75px;
border: 1px solid #02BFC1;
font-size: 10pt;
padding: 10px;
border-radius: 5px;
cursor: pointer;
display:inline-block;
}
.button-cell {
text-align:right;
flex-grow:1;
}
.image-thumb
{
display: inline;
width: 160px;
height: 120px;
margin-right: 20px;
}
.image-name
{
font-size: 17pt;
margin-top: 2px;
}
.image-size
{
font-size: 13pt;
margin: 20px 0;
}
.file-status
{
display: block;
font-size: 12pt;
margin-bottom: 10px;
}
.progress-wrap
{
float: left;
width: 300px;
height: 20px;
color: #111;
height: 5px;
margin-top: 5px;
}
.progress-meter
{
max-width: 300px;
height: 5px;
background: #02BFC1;
}
.up
{
margin-left: 30px;
}
.progress {
position:relative;
}
.cancel-upload
{
position:absolute;
right:4px;
bottom:2px;
}
<div class="files-bar">
<img class="image-thumb flex-item" src="profile_image/2861e205148ccebc01cb9b1d8a4c6b0c.jpg">
<div class="progress">
<p class="image-name">14217596f69f44507b.jpg</p>
<p class="image-size">22 KB</p>
<p class="file-status">File Uploaded Successfully!</p>
<div class="progress-wrap"> <!-- Progress bar -->
<div class="progress-meter"></div>
</div>
<p class="cancel-upload">✖</p>
</div>
<div class="button-cell">
<button class="manage-btn delete flex-item">Delete</button>
</div>
</div>
UPDATE – New snippet using absolute position within a relative positioned container.
Please review the following solution. Instead of using float, I positioned the elements absolute within the files-bar container. This will work in any browser.
.files-bar
{
width: 100%;
max-width: 700px;
margin: 20px auto;
padding: 15px;
overflow: auto;
border: 1px solid #BBBBBB;
box-shadow: 2px 3px 15px #E7E7E7;
position:relative;
}
.delete
{
background-color: #02BFC1;
color: #FFFFFF;
font-family: gothic;
max-width: 75px;
border: 1px solid #02BFC1;
font-size: 10pt;
padding: 10px;
border-radius: 5px;
cursor: pointer;
position:absolute;
right:12px;
}
.image-thumb
{
display: inline;
width: 160px;
height: 120px;
margin-right: 20px;
float:left;
}
.image-name
{
font-size: 17pt;
margin-top: 2px;
}
.image-size
{
font-size: 13pt;
margin: 20px 0;
}
.file-status
{
display: block;
font-size: 12pt;
margin-bottom: 10px;
}
.progress {
position:absolute;
left:185px;
}
.progress-wrap
{
width: 300px;
height: 20px;
color: #111;
height: 5px;
margin-top: 5px;
}
.progress-meter
{
max-width: 300px;
height: 5px;
background: #02BFC1;
}
.up
{
margin-left: 30px;
}
.cancel-upload
{
position:absolute;
right:4px;
bottom:2px;
}
<div class="files-bar">
<img class="image-thumb" src="profile_image/2861e205148ccebc01cb9b1d8a4c6b0c.jpg">
<div class="progress">
<p class="image-name">14217596f69f44507b.jpg</p>
<p class="image-size">22 KB</p>
<p class="file-status">File Uploaded Successfully!</p>
<div class="progress-wrap"> <!-- Progress bar -->
<div class="progress-meter"></div>
</div>
<p class="cancel-upload">✖</p>
</div>
<button class="manage-btn delete flex-item">Delete</button>
</div>
Layout Problem Solved!
The problem was that I wanted to put image on the left and other contents to the right of the image.
But there was too much use of floats, clear and display it was confusing also code was improper. And even though using them I was not getting the proper output. As the 'paragraph' element was also behind the image due to floats.
So, after some more trials I achieved that layout I wanted without using 'position' and too much of floats and clear.
What I Applied:
First, Floated the image to the left.
Put all of the other content below image inside a div class named 'rest'.
Floated 'rest div' to the left too.
Floated delete button to the right.
At last I've applied Clear Fix for "files-bar div."
It was simple that's it. All other elements adjusted itself. I just needed to put all other contents inside a div element and float it.
Updated HTML:
<div class="files-bar">
<button class="delete">Delete</button>
<img class="image-thumb" src="profile_image/1777859bb71d37aec3.jpg">
<div class="rest">
<p class="image-name">14217596f69f44507b.jpg</p>
<p class="image-size">22 KB</p>
<p class="file-status">File Uploaded Successfully!</p>
<p class="cancel-upload">✖</p>
<div class="progress-wrap">
<div class="progress-meter"></div>
</div>
</div>
</div>
Default HTML's CSS has been removed which is also known as 'Doctor CSS'
Updated CSS:
.files-bar
{
width: 100%;
max-width: 600px;
padding: 15px;
border: 1px solid #BBBBBB;
box-shadow: 2px 3px 15px #E7E7E7;
}
.files-bar:after
{
clear: both;
content: '';
display: block;
}
.image-thumb
{
float: left;
width: 160px;
height: 120px;
margin-right: 20px;
}
.rest {float: left;}
.delete
{
float: right;
width: 100px;
background-color: #02BFC1;
color: #FFFFFF;
font-family: gothic;
max-width: 75px;
border: 1px solid #02BFC1;
font-size: 10pt;
padding: 10px;
border-radius: 5px;
cursor: pointer;
}
.image-name {font-size: 17pt;}
.image-size
{
font-size: 13pt;
margin: 20px 0;
}
.file-status
{
display: inline-block;
font-size: 12pt;
margin-bottom: 15px;
}
.progress-wrap
{
width: 300px;
height: 20px;
color: #111;
height: 5px;
}
.progress-meter
{
max-width: 300px;
height: 5px;
background: #02BFC1;
}
.cancel-upload
{
padding: 5px;
float: right;
cursor: pointer;
}
Sorry to ask for css help again but I really can't get this one. My issue is that a sub div goes outside of an upper div's region. I tried using:
display: inline-block;`
but that makes the outer div go crazy.
My Problem:
There is a div with the id of sidebar, which contains the left boxes. which is inside another div with the id of main.
html:
<div id="main">
<div id="sidebar">
<div id="box">
<h3>Recently Uploaded</h3>
<ul>
<li>402 Base</li>
<li>heli mod</li>
<li>mw2 menu 1.14</li>
<li>402 Base</li>
<li>heli mod</li>
<li>mw2 menu 1.14</li>
<li>402 Base</li>
<li>heli mod</li>
<li>mw2 menu 1.14</li>
<li>402 Base</li>
</ul>
</div>
...
css:
#main
{
width: 80%;
height: 100%;
background: rgb(255, 255, 255);
background: rgba(255, 255, 255, .4);
margin-left: auto;
margin-right: auto;
}
#sidebar
{
height: 100%;
width: 20%;
float: left;
margin-left: 20px;
margin-right: 20px;
margin-bottom: 20px;
margin-top: 60px;
}
#box
{
/* min-width: 12em; idk if I wanted this */
width: 100%;
background-color: #F8F8F8;
border: 1px solid #000;
-moz-border-radius: 5px;
border-radius: 5px;
margin-bottom: 15px;
font-family: Arial, Helvetica, sans-serif;
display: inline-block;
}
#box p
{
padding: 10px;
}
#box h3
{
margin: 0;
margin-top: 5px;
padding-left: 10px;
border-bottom: 1px solid #000;
font-size: 12pt;
font-weight:bold;
}
#box ul
{
font-size: 10pt;
margin: 0;
padding: 0;
list-style: none;
}
#box ul li
{
width: 100%;
height: 40px;
line-height: 40px;
border-bottom: 1px solid #000;
}
anything I can do? :(
A solution which should work cross-browser and have extremely good browser support would be to apply the following to your #main div:
#main{
...
overflow: hidden;
}
Using this will force any floated elements to be calculated into the container's height when drawing its background, borders, etc.
Try this :
display:table; /* TO our main ID */
try adding float: left; to #main
I've got some CSS and HTML that I'm working on, I wanted to sub out the content that is a div block for an image and keep the border with rounded edges with it. But the image isn't showing up when I preview the code. The CSS and HTML are linked correctly. Admittedly, this is just me tinkering to learn more about both CSS and HTML.
If you could look at this and give me some insight of how to get the image to show up in the rounded box, I would appreciate it.
EDIT: I'm afraid I wasn't entirely clear enough on what the issue was. The image in the title tag and that is associated with the "a.title" css code isn't the issue, that's just a header image.
The issue is that I want an image to appear in the div class="content" portion of the HTML with the image source coming from the CSS portion that is div.content.
I'm pretty bad at explaining my questions/problems, sorry. But thank you for all of your help thus far!
HTML:
<html>
<head>
<title>Some Title</title>
<link href="/Volumes/lastname/sitename/css/style.css" rel="stylesheet" type="text/css" media="all">
</head>
<body>
<div id="container">
<p class="title"><img src="/Volumes/last/sitename/media/header3.png"></img></p>
<div class="navbar">
<a class="nav" href="http://www.facebook.com">Facebook</a>
<a class="nav" href="http://www.twitter.com">Twitter</a>
</div>
<div class="content">
</div>
</div>
</body>
</html>
Here's the CSS - I know its more of the code than you need to know but here any way:
body {
background: #ffffff
width: 1000px;
height: 800px;
margin: 0 auto;
font-family: "Arial";
}
#container {
width: 900px;
height: 800px;
margin: 0 auto;
}
div.content {
background-image: url('/Volumes/last/sitename/media/imagename.jpg') no-repeat;
border-style: solid;
border-width: 2px;
width: 900px;
height: 500px;
margin-top: -20px;
border-radius: 7px;
border-color: #a0a0a0;
}
a.title {
margin-top:120px;
font-size: 36px;
}
div.navbar {
margin-top: -62px;
float: right;
font-size: 18px;
}
a.nav {
text-decoration: none;
color: #717171;
padding-right: 20px;
}
a.nav:hover {
color: #1299d6;
}
div.text {
margin-top: 100px;
}
p.text1 {
display: block;
text-align: center;
}
p.text2 {
display: block;
text-align: center;
}
p.text3 {
display: block;
text-align: center;
}
p.text4 {
display: block;
text-align: center;
}
div.links {
margin-top: 50px;
text-align: center;
}
a.links {
text-decoration: none;
color: #ffffff;
padding-left: 10px;
padding-top: 5px;
padding-right: 10px;
padding-bottom: 5px;
border-radius: 10px;
opacity: 0.6;
}
a.twitter {
background: #42a300;
}
a.contact{
background: #1299d6;
}
a.subbutton{
background: #690260;
}
a.links:hover {
opacity: 1.0;
}
First of all your image tag is wrong. It must be
<img src="/Volumes/last/sitename/media/header3.png" />
http://jsfiddle.net/vBRBM/
Test the code.
You should take the image out of the div and just make a rule for the class.
p.title {
background-image: url('/Volumes/last/sitename/media/imagename.jpg') no-repeat right top;
border-style: solid;
border-width: 2px;
width: 900px;
height: 500px;
margin-top: -20px;
border-radius: 7px;
border-color: #a0a0a0;
}
I suspect it could have something to do with the URL. maybe try the .. notation? It depends on where the picture is in relation to all your other files.
body
{
background-image:url(' *CHANGE THIS* ');
background-repeat:no-repeat;
background-position:right top;
border-style: solid;
border-width: 2px;
width: 900px;
height: 500px;
margin-top: -20px;
border-radius: 7px;
border-color: #a0a0a0;
}
img tags don't have anything in them so they don't need a separate closing tag. End it in the same tag by adding the slash on the end /> like
<img src="/Volumes/last/sitename/media/imagename.jpg" />