I'm trying to make a message template as below.
<div class='message'>
<div class='from'>
<i class='avatar'></i>
<span>Name</span>
</div>
<div class='body'>
<div class='content'>Hello</div>
</div>
</div>
.message { clear: both; }
.from {
float: left;
margin-right: 12px;
}
.from > i {
display: inline-block;
width: 50px;
height: 50px;
border: 2px solid #000;
}
.from > span {
display: block;
width: $avatar-width;
line-height: 1em;
}
.body {
position: relative;
}
.body > .content {
display: inline-block;
padding: 15px;
border: 3px solid #000;
overflow: hidden;
}
I'm having a hard time making the content and div.from staying in the same line. When content is too wide, the content will go to a new line. Please see http://jsfiddle.net/9h3HN/1/ for what I mean.
Any ideas? Thanks.
Did you try following?
.form {
width: 54px;
}
.body {
padding-left: 70px;
}
Related
.topnavigatiebar {
width: 1500px;
height: 100px;
background-color: #fafafa;
position: fixed;
top: 0;
overflow: hidden;
z-index: 9;
white-space: nowrap;
}
.topnavigatiebar img {
float: left;
}
.topnavigatiebar #nav {
width: 80%;
height: 50%;
margin-top: 25px;
margin-left: 20px;
float: left;
display: block;
text-decoration: none;
text-align: center;
}
.topnavigatiebar #nav #sector {
width: auto;
height: 75%;
float: left;
margin: 0 15px 0 15px;
padding: 5px 10px 5px 10px;
border-radius: 6px;
}
.topnavigatiebar #nav #sector:hover {
background-color: lightgrey;
transition: 0.25s;
}
.topnavigatiebar #nav .active {
background-color: #b7a483;
}
.topnavigatiebar #nav:visited {
color: black;
}
.topnavigatiebar #nav #sector a {
font-size: 20px;
vertical-align: center;
line-height: 40px;
text-decoration: none;
color: inherit;
}
#logo {
display: inline-block;
margin-top: auto;
height: 100%;
vertical-align: middle;
}
#logo img {
background: #3A6F9A;
vertical-align: middle;
max-height: 100px;
max-width: 100px;
border-radius: 45px;
}
.right {
float: right;
}
<div class="topnavigatiebar">
<img src="https://imgur.com/trhdmMX">
<div id="nav">
<div id="sector">Home</div>
<div id="sector" class="active">KlantenInformatie</div>
<div id="sector">Artikelen</div>
<div id="sector">Instellingen</div>
<div class="right">
<div id="sector">Afmelden</div>
</div>
</div>
<div id="logo"><img src="../Includes/Pictures/ProfielLogo.png"></div>
</div>
So i couldn't find a specific answer to my question, but something in my html is going wrong.
i try to vertical align a image to the center of a navigation bar. the image is for profile pictures, so you can see who is logged in (the login config isn't there yet, but that is for later).
Can anyone look at my code and tell me what i am doing wrong?
It just might be very simple and me stupid enough to forget, but i just can't figure out?
i already tried these methods, but they didn't solve my problem:
How to vertically align an image inside a div?
facebook photo/ image vertical align?
vertical-align image in div
EDIT: here are 2 links for the pictures:
https://imgur.com/trhdmMX
Try adding margin-top: 20% in the #logo img in CSS.
You can also do the same by adding display: block; margin-top: 25%; in #logo img in CSS as well.
How change my code to create new classes: title and body from div-table-col with align property inside?
Header must be moved to right and Test must be moved to the left.
.div-table {
display: table;
width: 100%;
background-color: #eee;
border: 1px solid #666666;
border-spacing: 5px; }
.div-table-row { display: table-row; width: auto; clear: both; }
.div-table-col { float: left; display: table-column; width: 50%; background-color: #ccc; }
<div class="div-table">
<div class="div-table-row">
<div class="div-table-col" align="right">
Header:
</div>
<div class="div-table-col" align="left" padding-left="5px">
Test
</div>
</div>
</div>
I want to create:
.div-table {
display: table;
width: 100%;
background-color: #eee;
border: 1px solid #666666;
border-spacing: 5px; }
.title { display: table-row; width: auto; clear: both; align:right}
.data { float: left; display: table-column; width: 50%; background-color: #ccc; align:left padding-left:5px}
but it does't works. It displaies properly now, but I would like to remove align property and padding-left and move it to styles.
I dont know if I understand what you want, but if the only thing is Header on the right and Test on the left you need to make an other float, becasue you're applying the same float to both of them.
.div-table {
display: table;
width: 100%;
background-color: #eee;
border: 1px solid #666666;
border-spacing: 5px; }
.div-table-row { display: table-row; width: auto; clear: both; }
.div-table-col2 { float: left; display: table-column; width: 50%; background-color: #ccc; }
.div-table-col { float: right; display: table-column; width: 50%; background-color: #ccc; }
<div class="div-table">
<div class="div-table-row">
<div class="div-table-col" align="right">
Header:
</div>
<div class="div-table-col2" align="left" padding-left="5px">
Test
</div>
</div>
</div>
I'm having trouble with creating a nested divs like in the attached image.
Image
I would love if some one can show me how.
.demo-container {
padding: 30px;
border: 1px solid #e2e4e7;
background-color: #f5f7f8;
text-align: left;
display: inline-block;
vertical-align: top;
}
.header {
display: block;
padding: 15px 25px 0;
overflow: hidden;
}
<div id="warp">
<div class="header">
New Alerts
</div>
<div class="demo-container">
</div>
</div>
You need to set height and width to your parent #wrap , see full snippet below:
snippet
* {
box-sizing: border-box
}
#wrap {
height: 200px;
width: 200px;
text-align: center;
}
.header {
display: block;
padding: 15px 25px;
background: blue;
color: white;
}
.demo-container {
width: 100%;
padding: 30px;
border: 1px solid #e2e4e7;
background-color: #f5f7f8;
display: inline-block;
vertical-align: middle;
color:black;
}
<div id="wrap">
<div class="header">
New Alerts
</div>
<div class="demo-container">
X Alerts
</div>
</div>
I have been trying to make a line join two words.
Sentence 1 would be on the left and no 2 on the right.everything should be on the same line.
I want the line to be flexible and adjust its width when the browser is re sized, and have so far failed miserably to do this.
It would be similar to this :
see jsFiddle
<h1>Heading</h1>
<h1>This is a longer heading</h1>
CSS
h1 {
overflow: hidden;
text-align: center;
}
h1:before,
h1:after {
background-color: #000;
content: "";
display: inline-block;
height: 1px;
position: relative;
vertical-align: middle;
width: 50%;
}
h1:before {
right: 0.5em;
margin-left: -50%;
}
h1:after {
left: 0.5em;
margin-right: -50%;
}
but with only one line joining the words.
Is this what you're after?
Live demo
HTML:
<div class="header">
<div class="headerPart1">Heading</div>
<div class="headerPart2">This is a longer heading</div>
</div>
CSS:
.header {
overflow: hidden;
text-align: center;
border-top: 1px solid #000;
border-bottom: 1px solid #000;
vertical-align: middle;
}
.headerPart1, .headerPart2 {
display: inline-block;
clear: none;
}
I guess this is what you are looking for: Is this http://jsfiddle.net/gSsGy/1/
I've added a width: 50% to the h1 element and then floated it to left.
Demo : LINK
just add:
.header {
overflow: hidden;
text-align: center;
border-top: 1px solid #000;
border-bottom: 1px solid #000;
vertical-align: middle;
}
h1{
display: inline-block;
clear: none;
}
and this div before h1:
<div class="headercontent">
In my code below, how do I get the the text in the class="author" to right align underneath the text in class="label"? In the example below, the "e" in "Author name" should right align underneath the ":' in "Answered by:". Thanks.
<html>
<head>
<style type="text/css">
.action {
display: inline;
}
.add-box {
margin-left: 40px;
display: inline;
}
.share-button {
margin-left: 30px;
display: inline;
}
.flag {
margin-left: 30px;
display: inline;
}
.author-area {
margin-left: 30px;
display: inline;
}
.label {
margin: 0;
display: inline;
}
.author {
margin: 0;
}
.gray-button {
background: #C0C0C0;
font-size: 14px;
margin:0;
padding: 10px;
border: 1px solid #C0C0C0;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="action">
<div class="add-box">
Plan
</div>
<div class="share-button">
<a> Share </a>
</div>
<div class="flag">
<a>flag</a>
</div>
<div class="author-area">
<p class="label">Answered by:</p>
<p class="author">Author name </p>
</div>
</div>
</body>
You can use 'inline-block' on the '.author-area':
.author-area {
margin-left: 30px;
display: inline-block;
vertical-align: top;
}
The 'vertical-align' option stops the div from sticking out above the others.
Theres a couple of options. But you can try to float the elements to the left and set a text-align:right to the author-area DIV.
<style type="text/css">
.action {
display: inline;
float: left;
}
.add-box {
margin-left: 40px;
display: inline;
float: left;
}
.share-button {
margin-left: 30px;
display: inline;
float: left;
}
.flag {
margin-left: 30px;
display: inline;
float: left;
}
.author-area {
margin-left: 30px;
display: inline;
float: left;
text-align: right;
}
.label {
margin: 0;
display: inline;
}
.author {
margin: 0;
}
.gray-button {
background: #C0C0C0;
font-size: 14px;
margin:0;
padding: 10px;
border: 1px solid #C0C0C0;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
cursor: pointer;
}
</style>
I always like to use a CSS grid system, such as
http://www.1kbgrid.com/
to do my div positioning etc with... makes it a snap to do things like you outline above