Hi i have tried allot ways how to fix this, but i cant float div to left side. When i create div its automatically stacks in right top corner and i cant move it only with padding and margin.
My index.php example need to float:left div with class language:
<body class="menu">
<div class="wrapper">
<div class="menu-toggle">
Show menu
</div>
<div class="language">
Select lang
</div>
<header>
<nav class="menu-side">
<ul>
<li>Home</li>
<li>Login</li>
<li>Contact</li>
</ul>
</nav>
</header>
<form action="upload.php" method="POST" enctype="multipart/form-data" id="upload" class="upload">
<fieldset>
<legend>Upload files</legend>
<input type="file" id="file" name="file[]" required multiple>
<input type="submit" id="submit" name="submit" value="Upload">
</fieldset>
<div class="bar">
<span class="bar-fill" id="pb"><span class="bar-fill-text" id="pt"></span></span>
</div>
<div id="uploads" class="uploads">
Uploaded links will apear here.
</div>
</form>
</div>
<footer>
Created by Revix © 2014
</footer>
</body>
And my css is:
html, body { height: 100%; margin-top: 0; }
body { font-family: "Georgia", serif; }
.upload { width:500px; background: #f0f0f0; border: 1px solid #ddd; padding: 20px; vertical-align: center; margin-left: auto; margin-right: auto; }
.upload fieldset { border: 0; padding: 0; margin-bottom: 10px; }
.upload fieldset legend { font-size: 1.2em; margin-bottom: 10px; }
footer { background-color: cornflowerblue; text-align: center; vertical-align: middle; min-width: 542px; }
.wrapper { min-height: 100%; margin-bottom: -100px; clear: both; }
.wrapper:after { content: ""; display: block; }
.wrapper:after, footer { height: 100px; }
header { position: fixed; margin-left: auto; margin-right: auto; }
.uploads a, .uploads span { display: block; }
.bar { width: 100%; background: #eee; padding: 3px; margin-bottom: 10px; box-shadow: inset 0 1px 3px rgba(0,0,0,.2); border-radius: 3px; box-sizing:border-box; }
.bar-fill { height: 20px; display: block; background: cornflowerblue; width: 0; border-radius: 3px;
-webkit-transition:width 0.8s ease; -moz-transition:width 0.8s ease; -o-transition:width 0.8s ease; transition:width 0.8s ease; }
.bar-fill-text { color:#fff; padding: 3px; }
.language { float: left; position: absolute; width: 80px; padding: 3px; }
If you wanna to see my web site: Here
Can you suggest me what to do?
Do you mean this effect? Please see my demo.
Please paste your code to jsbin.com next time. Otherwise it's not convenient for us to resolve your problem.
http://jsbin.com/yivat/1
float:left and position:absolute doesn't work.
remove position:absolute
.language { float: left; width: 80px; padding: 3px; }
Inspecting these elements in my browser they have all the CSS attribute position:absolute; set, which sets them at a absolute position within the window. But these elements seem to have no left and top position set which sets you all elements to window position 0,0 which is left top corner.
I would recommend to set the position to relative position:relative; or define specific positions for your html elements.
Floating left on a absolute positioned element will not work. Try relative to float it or position it on your page with top:px left:px;
Related
I'd like to have a div that looks like this:
Is this possible to do with HTML + CSS? I will also be animating this div with jQuery. When the div is hidden I would like the title and the top line to show.
Yes, but it's not a div, it's a fieldset
fieldset {
border: 1px solid #000;
}
<fieldset>
<legend>AAA</legend>
</fieldset>
You can do something like this, where you set a negative margin on the h1 (or whatever header you are using)
div{
height:100px;
width:100px;
border:2px solid black;
}
h1{
width:30px;
margin-top:-10px;
margin-left:5px;
background:white;
}
Note: you need to set a background as well as a width on the h1
Example: http://jsfiddle.net/ZgEMM/
EDIT
To make it work with hiding the div, you could use some jQuery like this
$('a').click(function(){
var a = $('h1').detach();
$('div').hide();
$(a).prependTo('body');
});
(You will need to modify...)
Example #2: http://jsfiddle.net/ZgEMM/4/
I know a bit late to the party, however I feel the answers could do with some more investigation/input.
I have managed to create the situation without using the fieldset tag - that is wrong anyway as if I'm not in a form then that isn't really what I should be doing.
/* Styles go here */
#info-block section {
border: 2px solid black;
}
.file-marker > div {
padding: 0 3px;
height: 100px;
margin-top: -0.8em;
}
.box-title {
background: white none repeat scroll 0 0;
display: inline-block;
padding: 0 2px;
margin-left: 8em;
}
<aside id="info-block">
<section class="file-marker">
<div>
<div class="box-title">
Audit Trail
</div>
<div class="box-contents">
<div id="audit-trail">
</div>
</div>
</div>
</section>
</aside>
This can be viewed in this plunk:
Outline box with title
What this achieves is the following:
no use of fieldsets.
minimal use of CSS to create effect with just some paddings.
Use of "em" margin top to create font relative title.
use of display inline-block to achieve natural width around the text.
Anyway I hope that helps future stylers, you never know.
Text in Border with transparent text background
.box{
background-image: url("https://i.stack.imgur.com/N39wV.jpg");
width: 350px;
padding: 10px;
}
/*begin first box*/
.first{
width: 300px;
height: 100px;
margin: 10px;
border-width: 0 2px 0 2px;
border-color: #333;
border-style: solid;
position: relative;
}
.first span {
position: absolute;
display: flex;
right: 0;
left: 0;
align-items: center;
}
.first .foo{
top: -8px;
}
.first .bar{
bottom: -8.5px;
}
.first span:before{
margin-right: 15px;
}
.first span:after {
margin-left: 15px;
}
.first span:before , .first span:after {
content: ' ';
height: 2px;
background: #333;
display: block;
width: 50%;
}
/*begin second box*/
.second{
width: 300px;
height: 100px;
margin: 10px;
border-width: 2px 0 2px 0;
border-color: #333;
border-style: solid;
position: relative;
}
.second span {
position: absolute;
top: 0;
bottom: 0;
display: flex;
flex-direction: column;
align-items: center;
}
.second .foo{
left: -15px;
}
.second .bar{
right: -15.5px;
}
.second span:before{
margin-bottom: 15px;
}
.second span:after {
margin-top: 15px;
}
.second span:before , .second span:after {
content: ' ';
width: 2px;
background: #333;
display: block;
height: 50%;
}
<div class="box">
<div class="first">
<span class="foo">FOO</span>
<span class="bar">BAR</span>
</div>
<br>
<div class="second">
<span class="foo">FOO</span>
<span class="bar">BAR</span>
</div>
</div>
<fieldset>
<legend> YOUR TITLE </legend>
<p>
Lorem ipsum dolor sit amet, est et illum reformidans, at lorem propriae mei. Qui legere commodo mediocritatem no. Diam consetetur.
</p>
</fieldset>
You can use a fieldset tag.
<!DOCTYPE html>
<html>
<body>
<form>
<fieldset>
<legend>Personalia:</legend>
Name: <input type="text"><br>
Email: <input type="text"><br>
Date of birth: <input type="text">
</fieldset>
</form>
</body>
</html>
Check this link: HTML Tag
For a duplicate, here another option with transform, no fieldset ( and rounded border required in the duplicates) :
Question
Help. I am not great at UX. I am creating an app in React and using Material UI for the look. I really want to create something like this
Where the "Some Title" is a dynamic field from my database as well as the contents. The thing I cannot figure out is what is the best (non skanky) way to add the title into the outline? Thoughts?
Answer position or transform can help you too :
* {
margin: 0;
padding:0;
box-sizing:border-box;
}
.fieldset {
border: solid;
color: #353fff;
border-radius: 1em;
margin: 2em 1em 1em;
padding:0 1em 1em;
}
.legend {
transform: translatey(-50%);
width: max-content;
background: white;
padding: 0 0.15em;
}
.fieldset li {
list-style-type: " - ";
}
<div class="fieldset">
<h1 class="legend">Some Title</h1>
<ul>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>
</div>
If you are not in a position to add a field set, you can add a background to the element. In my situation, I had different colors in the input element and outside the input element, and also we have a hover color for the input element. So this is a fix I added linear-gradient background with outside color in the top half and transparent color in the bottom half.
I added the transparent color to the bottom half inorder to see the hover color when hovered.
.class-name {
background: linear-gradient(to bottom, #2a2b2d 50%, transparent 50%);
}
From a practical perspective, I think PeterS has the best answer. It's also presented in a very clear, didactical style.
Just to save others a few minutes converting it into more production-style code, I've done the following. Basically, it's what you would think you need: One div box inside another, with the outer div box providing the border, the inner providing the title contents with a negative margin shifting it up. A third div then contains the actual content.
This is the CSS:
.outer-border-box {
border: 2px solid black; border-top:3px solid black;}
.label-source-box {
padding: 0 3px; height: 100px; margin-top: -0.8em; }
.box-title {
background: white none repeat scroll 0 0;
padding: 0 2px;
margin-left: 4em;
font-weight:700; font-size:18px;
font-family: 'Avenir Next',Helvetica, sans-serif; }
This is the html:
<div class="outer-border-box">
<div class="label-source-box">
<span class="box-title">Promotional </span>
<div class="box-contents">
<h2>this is the contents</h2>
</div> </div> </div>
It is possible by using the legend tag.
Refer to http://www.w3schools.com/html5/tag_legend.asp
I'm having issues with my CSS positioning for a conversation/chat page. Please see the code in this fiddle for my first attempt: https://jsfiddle.net/1gsykwL5/
Is there any way to make the div containing the 'logo' 100% height, so that the text (message) doesn't wrap underneath it? I've played around with position: absolute but it really screws up alignment.
I think there's probably a better way of coding it to be honest. But I'm not sure how. Can anybody please advise?
Thanks!
PS - code which includes the padding fix by Rick Jelier:
body{
font-family:arial;
}
.newchat {
padding: 10px;
}
.newdiv1 {
width: 50px;
height:100%;
float: left;
margin: 0px 10px 10px 0px;
}
.chat2 ul{
list-style: none;
padding:0px;
}
.chat2 ul li
{
border-radius: 5px;
}
.chat2 ul li:hover .thumbnail {
background: #bd6982;
}
.chat2 ul li .thumbnail {
display: inline-block;
background: #bfbfbf;
width: 50px;
color: #ffffff;
line-height: 50px;
text-align: center;
text-decoration: none;
-webkit-transition: background 0.3s linear 0s;
-moz-transition: background 0.3s linear 0s;
-ms-transition: background 0.3s linear 0s;
-o-transition: background 0.3s linear 0s;
transition: background 0.3s linear 0s;
border-radius: 50%;
}
.chat2 ul li:nth-child(2n) {
background: #f2f2f2;
}
.newdiv2 .meta {
color: #b3b3b3;
font-size: 12px;
padding-left: 60px;
}
.newdiv2 .meta a:hover {
text-decoration: underline;
}
.newdiv2 .meta a {
color: #999999;
text-decoration: none;
}
.newdiv2 h3 {
font-size:14px;
display: block;
width: 100%;
margin: 0px 0px 5px 0px;
color: #808080;
}
.newdiv2
{
font-size:12px;
color: #cccccc;
}
.newdiv2 .preview
{
display:block;
margin-bottom: 5px;
padding-left: 60px;
}
.otherUser
{
margin-left:30px;
}
<div class="chat2">
<ul>
<li>
<div class="newchat">
<div class="newdiv2">
<div class="newdiv1">
<a class="thumbnail" href="#">KS</a>
</div>
<h3>Kenny Sing</h3>
<span class="preview">make sure you take a look at the... ashiud hiuas hdiu huio hiu hiuo hiu hiu hio uhoiu hoi hui hoiouh
idsh ifu hisuod hfoiu hidsu hiu fhiuo dshiu hiuo hiou hiu hoiuhiohiuo hiu ohi uhiou hi ouhi iusdh fius dhuif hsdiuf hisdu fhusid f2f2f2 siudphf uisd h
osih doifh sidoh fiusd hiuf hdsiu hiu hiu</span>
<div class="meta">3h ago · Category · Reply</div>
</div>
</div>
</li>
<li class="otherUser">
<div class="newchat">
<div class="newdiv2">
<div class="newdiv1">
<a class="thumbnail" href="#">KS</a>
</div>
<h3>Kenny Sing</h3>
<span class="preview">make sure you take a look at the... ashiud hiuas hdiu huio hiu hiuo hiu hiu hio uhoiu hoi hui hoiouh
idsh ifu hisuod hfoiu hidsu hiu fhiuo dshiu hiuo hiou hiu hoiuhiohiuo hiu ohi uhiou hi ouhi</span>
<div class="meta">3h ago · Category · Reply</div>
</div>
</div>
</li>
</ul>
</div>
Try adding 60px of padding to the left of the textbox itself:
.newdiv2 .preview {
/* current css */
padding-left: 60px;
}
I tried it in the jsfiddle and it seems to work.
Hope this helps!
I see it in two ways:
position absolute of logo (+ top:10px, left:10px), and padding left + position relative to the container - with padding it shouldn't screw up your your alignment
or
Padding to the message container and negative margin to the logo
.newchat {
padding-left: 70px;
}
.newdiv1 {
margin: 0px 10px 10px -60px;
}
Less code more fun
Since you asked for leaner markup, this is how I'd approach it:
body {
background-color: #333;
}
.chat {
list-style-type: none;
}
.meta-message {
display: block;
color: #999;
margin-top: 5px;
}
.sender-message,
.reply-message {
background-color: #fff;
border-radius: 15px;
display: block;
font-family: sans-serif;
font-size: 20px;
line-height: 1.25;
max-width: 400px;
margin-bottom: 15px;
min-height: 60px;
padding: 15px 15px 15px 80px;
position: relative;
}
.sender-message::before,
.reply-message::before {
content: attr(data-shortname);
display: inline-block;
width: 50px;
height: 50px;
line-height: 50px;
position: absolute;
left: 15px;
top: 15px;
background-color: #a00;
text-align: center;
border-radius: 50%;
color: #fff;
}
.sender-message .name,
.reply-message .name {
color: #a00;
font-size: 28px;
margin: 0;
text-align: right;
}
.reply-message {
background-color: #eee;
margin-left: 80px;
}
.reply-message .name {
color: #0a0;
}
.reply-message::before {
background-color: #0a0;
}
<ol class="chat">
<li class="sender-message" data-shortname="kk">
<h3 class="name">Kenny King</h3>Is there any way to make the div containing the 'logo' 100% height, so that the text (message) doesn't wrap underneath it? I've played around with position: absolute but it really screws up alignment.<span class="meta-message">2016/12/13 12:41 p.m.</span>
</li>
<li class="reply-message" data-shortname="cw">
<h3 class="name">connexo websolutions</h3>Let's see how far we can get from a small codepen snippet...<span class="meta-message">2016/12/13 12:42 p.m.</span>
</li>
</ol>
https://codepen.io/connexo/pen/eBPXbd
Why did I use an ol?
Because a chat consists of a (typically chronologically) ordered list of messages (where order does matter).
I think you will be able to start from here and get to where you want to go.
I have floated the image left with a class of logo. I apply a background color for h1 and the image but it does not appear for some reason. Why is this happening? I have floated the image because the text appears below the image not top of the image. Is there a way to deal with it?
JS Fiddle - https://jsfiddle.net/z8cw31j9/
#import url(http://fonts.googleapis.com/css?family=Niconne);
body {
background: #e6e3d7;
font-size: 16px;
}
header {
background: #b47941;
width: 95%;
padding-left: 1%;
margin: 0 auto;
}
.logo {
width: 12%;
height: 12%;
float: left;
background: green;
}
header h1 {
display: inline-block;
font: 300% 'Niconne', cursive;
line-height: 200%;
height: 0;
color: white;
margin-left: 2%;
background: blue;
}
.clear {
clear: both;
}
.search {
display: inline;
background: blue;
}
<div class="container">
<header>
<img class="logo" src="https://placehold.it/500x300">
<h1 class=""> Heading one </h1>
<input type="search">
<div class="clear"></div>
</header>
</div>
Actually background color was set successfully, but you can't see because of zero height:
header h1 {
height: 0;
}
#import url(http://fonts.googleapis.com/css?family=Niconne);
body{
background: #e6e3d7;
font-size: 16px;
}
header{
background: #b47941;
width: 95%;
padding-left: 1%;
margin: 0 auto;
}
.logo{
width: 12%;
height: 12%;
float: left;
background: green;
}
header h1 {
display: inline-block;
font:300% 'Niconne', cursive ;
line-height: 200%;
color: white;
margin-left: 2%;
background: blue;
}
.clear{
clear: both;
}
.search{
display: inline;
background: blue;
}
<div class="container">
<header>
<img class="logo" src="https://placehold.it/500x300" >
<h1 class=""> Heading one </h1>
<input type="search">
<div class="clear"></div>
</header>
</div>
header h1{...enter code here...}
remove height:0;
The color you applied to the img tag is actually there. It's just directly behind the image, so you can't see it. If you apply padding: 25px to the .logo class you'll see what I mean.
In terms of the h1, you've given it a height: 0, so there's no space to show the background color.
for your h1, the background is not working because you set the height of the element to 0, so there wouldn't be any color that will show up.
and as for your img, the background is not working because you have a image in front of it.
If you want to see the background for the img, you can add a padding for it
How to I align my text and image on the same line?
Whenever I used padding or margins it crashes into the circle image I'm using.
#alignPhoto {
padding-right: 50px;
padding-left: 400px;
}
#alignCompany {
margin-left: 240px
}
#alignImage {
position: relative;
bottom: -250px;
}
.wrapper {
background: #C3C3C3;
padding: 20px;
font-size: 40px;
font-family: 'Helvetica';
text-align: center;
position: relative;
width: 600px;
}
.wrapper:after {
content: "";
width: 200px;
height: 0;
border-top: 42px solid transparent;
border-bottom: 42px solid transparent;
border-right: 40px solid white;
position: absolute;
right: 0;
top: 0;
}
<div id="alignPhoto">
<div class="circle" id=image role="image">
<img src="http://placehold.it/42x42">
</div>
</div>
<div id=alignPhoto class="titleBoldText">Mary Smith</div>
<div id=alignCompany class="titleText">Morris Realty and Investments</div>
<br>
Currently It does this:
My desired effect is this:
Any help or suggestions would be greatly appreciated.
You're making it a little more complicated than it needs to be. Just put two elements as wrappers (one you already have in alignImage, set them to display as inline-block and then put the vertical-align to middle, top, or whatever you like. I got rid of all the bizarre padding, which was messing with the display as well. Looks like that was a holdover from your vertically stacked layout.
Edit – You've also got two elements with the ID alignPhoto. You really, really shouldn't do that. If you need to style two different elements with one rule, please use classes instead.
#alignPhoto {
display: inline-block;
vertical-align: middle;
}
#alignPhoto img {
border-radius: 100%;
}
#alignImage {
position: relative;
}
.alignText {
display: inline-block;
vertical-align: middle;
}
.titleBoldText { text-align: right; }
<div class="alignText">
<div class="titleBoldText">Mary Smith</div>
<div id=alignCompany class="titleText">Morris Realty and Investments</div>
</div>
<div id="alignPhoto">
<div class="circle" id=image role="image">
<img src="http://placehold.it/42x42">
</div>
</div>
<br>
One quick and dirty way to wrap it in a table, as to get your vertical align working without any problems as well.
<table>
<tr>
<td>
<div id="alignPhoto" class="titleBoldText">Mary Smith</div>
<div id="alignCompany" class="titleText">Morris Realty and Investments</div>
</td>
<td>
<img src="image/url" alt=""/>
</td>
</tr>
</table>
http://jsfiddle.net/7m5s6gd7/
What about slightly simpler version:
HTML:
<div id="alignPhoto">
<div class="content-wrapper">
<p>Mary Smith</p>
<p>Morris Realty and Investments</p>
</div>
<div class="image-wrapper" id="image" role="image">
<img src="http://placehold.it/250x200" />
</div>
</div>
CSS:
.content-wrapper { float:left; }
.image-wrapper img { border-radius:50%; }
#alignPhoto {
display: flex;
flex-direction: row;
align-items: center;
}
JSFiddle for that
Basically you keep both paragraphs of text in one holding div and float it to left. This alone should do the job.
EDIT:
To make it even simpler, you can use flexbox for vertical alignment.
I've updated the answer.
One of the more effective and scalable solutions to ensuring elements are placed correctly from left to right are to employ wrapper divs with clear:both;. Inside of these wrapper divs you can use float:left or float:right. The wrapper divs allow you to generate a new "row".
#alignPhoto {
float: left;
margin-left: 10px;
}
#profileCompany, #profileName {
display:block;
width:100%;
}
#alignImage {
float: left;
}
.profileWrapper {
float:left;
}
/* Below creates a circle for the image passed from the backend */
.wrapper {
padding: 20px;
font-family: 'Helvetica';
text-align: center;
position: relative;
width: 600px;
clear: both;
}
.profileWrapper:after {
content: "";
width: 200px;
height: 0;
border-top: 42px solid transparent;
border-bottom: 42px solid transparent;
border-right: 40px solid white;
/* Tweak this to increase triangles height */
position: absolute;
right: 0;
top: 0;
}
.circle {
display: block;
height: 50px;
width: 50px;
background-color: #cfcfcf;
-moz-border-radius: 25px;
-webkit-border-radius: 25px;
-khtml-border-radius: 25px;
border-radius: 25px;
}
<div class="wrapper">
<div class="profileWrapper">
<div id=profileName class="titleBoldText">Mary Smith</div>
<div id=profileCompany class="titleText">Morris Realty and Investments</div>
</div>
<div id="alignPhoto">
<div class="circle" id=image role="image">
</div>
</div>
</div>
Problem is about , it works great on desktop but on mobile fails....
[http://jsfiddle.net/9vv914uL/][1]
i want to make this divider responsive... because it is working very well on higher resolutions , as you can see....
and bonus is to make words inside tag in different colors...
this is css stylesheet:
.divider {
text-align:center;
font-family: 'montserrat';
}
.divider hr {
margin-left:auto;
margin-right:auto;
width:40%;
}
.left {
float:left;
}
.right {
float:right;
}
this is
<div style="padding-top:10px; padding-bottom:20px;"class="divider">
<hr class="left" style="margin-top:12px;"/>BLUE RED<hr class="right" style="margin-top:12px;"/>
</div>
I dont know what to say about this problem, this is just plain text. I must go back to the stars <3
:)
There are other ways that this can be handled that would work better for what you are trying to do. In my example, I am using both a heading element and an empty div. The text in the heading element can be expanded as much as you would like without needing to worry about available space, and the solution is responsive out of the box.
HTML
<h3 class="divider">
<span>Title</span>
</h3>
<div class="divider">
<span></span>
</div>
CSS
.divider {
border-color: #000;
border-style: solid;
border-width: 0 0 1px;
height: 10px;
line-height: 20px;
text-align:center;
overflow: visable;
}
.divider span {
background-color: #FFF;
display: inline-block;
padding: 0 10px;
min-height: 20px;
min-width: 10%;
}
Fiddle: http://jsfiddle.net/6uux0cbn/1/
I'd probably do it like this rather than messing with floats:
.divider {
text-align: center;
}
.divider:after {
content: "";
height: 1px;
background: #000;
display: block;
position: relative;
top: -8px; /* this value depends on the font size */
}
.divider > span {
background: #fff;
padding: 0 10px;
position: relative;
z-index: 1;
}
<div class="divider"><span>BLUE RED</span></div>
HTML:
<div style="padding-top:10px; padding-bottom:20px;"class="divider">
<hr class="left" style="margin-top:12px;"/>
<div class="title">BLUE RED</div>
</div>
CSS:
.divider {
text-align:center;
font-family: 'montserrat';
position:relative;
height: 68px;
}
.div hr {
width:100%;
position: absolute;
z-index: 888;
}
.title {
position: absolute;
left:50%;
width:100px;
margin-left: -50px;
z-index: 9999;
top:15px;
background: white;
}