I'm having a problem with the floating property.
My code: JSFiddle
I want it to look this way: printscreen
What can I do, I want the button to NOT float like the other two elements above the button.
My css: (You can see my HTML on JSFiddle)
#upload_photo_form > p {
margin: 3px;
}
#upload_one {
width: 150px;
height: 60px;
background-image: url('image, doesnt matter, looke the same anyways');
background-size: 100%;
float: left;
border: 1px solid grey;
border-radius: 3px;
}
#upload_two {
margin-left: 5px;
width: 150px;
height: 60px;
background-image: url('image, doesnt matter, looke the same anyways');
border: 1px solid grey;
border-radius: 3px;
background-size: 100%;
float: left;
}
You cam modify your code as follows:
<div id="upload_photo_form">
<div>
<p>Please choose a file to upload.</p>
<input id="upload_file" type="file" /><br>
</div>
<div>
<p>Which mode would you like to use?</p>
<div id="upload_one"></div>
<div id="upload_two"></div>
</div>
</div>
<div style="clear:both;"></div>
<button id="upload_button">Upload</button>
Try this:
#upload_button{
margin-top:10px;
clear: both;
}
DEMO
You can also use:
display: block;
Try this if you want to do this just with CSS:
#upload_photo_form div {overflow: hidden}
#upload_button {clear: both; margin-top: 10px;}
Related
Hello All I hope you are doing Fine! So actually I'm working a chatroom and Im having problem displaying the messages. You see what is actually happening is that when i enter a message the message box goes down. Instead what I want is that I want the messages at the top go behind the navbar and I want the container which shows the message to show a scrollbar so the message send box will stay in place
my index.php
body {
overflow: none;
}
.container {
border: 2px solid #dedede;
background-color: #f1f1f1;
border-radius: 5px;
padding: 10px;
margin: 10px 0;
overflow: auto;
}
.darker {
border-color: #ccc;
background-color: #ddd;
}
.container::after {
content: "";
clear: both;
display: table;
}
.container img {
float: left;
max-width: 60px;
width: 100%;
margin-right: 20px;
border-radius: 50%;
}
.container img.right {
float: right;
margin-left: 20px;
margin-right: 0;
}
.time-right {
float: right;
color: #aaa;
}
.time-left {
float: left;
color: #999;
}
<div class="container">
<p>
<div id="load_msg"></div>
</p>
<span class="time-right">11:00</span>
</div>
<div class="container darker">
<form method="POST" action="">
<input type="text" name="message" id="message_id" />
<button type="button" id="send_msg">Send</button>
</form>
</div>
You have two .container: One for the messages and another for the form. You need to separate the two, so give the container for the messages an id. TheN you set a height for the container with the id.
HTML
<div class="container" id="msg">...</div>
<div class="container">...</div>
CSS
#msg {
height: 100px;
}
Take a look at this link
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>
Continuing my last question on this thread (Play button centred with different image/video sizes), I will open this one regarding to #Marc Audet request.
Basically I had this code:
.playBT{
width: 50px;
height: 50px;
position: absolute;
z-index: 999;
top: 25%;
left: 25%;
margin-left: -25px;
margin-top: -25px;
}
However I can't use the example given by Marc on the last thread, because the play button doesn't work as expected when the video size changes...
Here is the code
You need to tweak your HTML a bit, here is one way of doing it:
<div id="video-panel">
<div id="video-container" class="video-js-box">
<div id="play" class="playBT"><img class="imgBT" src="http://2.bp.blogspot.com/-RnPjQOr3PSw/Teflrf1dTaI/AAAAAAAAAbc/zQbRMLQmUAY/s1600/player_play.png" /></div>
<video id="video1">
<source src="http://video-js.zencoder.com/oceans-clip.mp4"/>
</video>
</div>
<div id="video-controls">
<div id="footerplay"><img src="http://www.cssaddons.com/uploads/goruntulenme/jQueryPausePlay/images/play.png" /></div>
<div id="footerpause"><img src="http://www.cssaddons.com/uploads/goruntulenme/jQueryPausePlay/images/pause.png" /></div>
<div id="progressbar">
<div id="chart"></div>
<div id="seeker"></div>
</div>
</div>
</div>
and the CSS is as follows:
#video-panel {
border: 4px solid blue;
padding: 4px 50px;
}
.video-js-box {
width: auto;
height: auto;
outline: 1px dotted blue;
position: relative;
display: block;
}
video {
outline: 1px dotted blue;
margin: 0 auto;
display: block;
}
#play {
position:absolute;
top: 50%;
left: 50%;
outline: 1px dotted red;
}
.imgBT{
width:50px;
height:50px;
vertical-align: bottom;
margin-left: -25px;
margin-top: -25px;
}
#video-controls {
outline: 1px solid red;
overflow: auto;
}
#footerplay {
float: left;
margin-left: 27px;
}
#footerpause {
float: left;
margin-left: 27px;
}
#progressbar {
float: left;
outline: 1px dotted black;
display: inline-block;
width: 200px;
height: 27px;
margin-left: 27px;
}
#footerplay img, #footerpause img{
height:27px;
}
Fiddle Reference: http://jsfiddle.net/audetwebdesign/EnDHw/
Explanation & Details
User a wrapper div to keep everything tidy, video-panel, and use a separate div for the video video-container and for the controls video-controls.
The play button and the <video> element are positioned with respect to the video-container and note the negative margin trick to position the arrow button image.
The control elements can be positioned in their own div video-controls. I simply floated them to the left with a 27px left margin.
This should help you get started. The outlines and borders are for illustration only and are optional.
Good luck!
I am making a little layout width exactly 6 divs, and I tried various times to align it with float align, clear:both and changing height/width, but without success. I want something like this image: http://i.stack.imgur.com/j1jxX.png
HTML source:
<div id="description">
<div class="itemDescription"><!--Item 1-->
<div class="imageDescription"></div>
<div class="textDescription">
<div class="titleDescription">Encontre pessoas</div>
<div class="detailDescription">Encontre facilmente pessoas com um buscador inteligente</div>
</div>
</div>
<div class="itemDescription"><!--Item 2-->
<div class="imageDescription"></div>
<div class="textDescription">
<div class="titleDescription">Encontre pessoas</div>
<div class="detailDescription">Encontre facilmente pessoas com um buscador inteligente</div>
</div>
</div>
CSS source:
#description {
width: 96%;
background: rgb(244, 244, 0);
}
.itemDescription {
padding: 8px;
border: solid 1px red;
}
.imageDescription {
float: left;
height: 72px;
width: 20%;
background-image: url(http://addons.opera.com/media/extensions/75/86675/1.0-rev2/icons/icon_64x64.png);
background-position: center center;
background-repeat: no-repeat;
border-right: solid 3px black;
}
.textDescription {
float: left;
width: 70%;
border: solid 3px blue;
}
.titleDescription {
border: solid 3px brown;
}
.detailDescription {
border: solid 3px black;
padding: 10px;
}
here is my JSFiddle: http://jsfiddle.net/5xhQk/
Thanks too all you
You could also use table to get what you want but if you really want to use div, you need to use float in every div. Something like this: http://jsfiddle.net/5xhQk/1/
#description{
float: left;
width: 100%;
}
.itemDescription{
float: left;
width: 100%;
height: 72px;
}
.imageDescription{
background: blue;
float: left;
width: 20%;
height: 100%;
border: 1px solid black;
}
.textDescription{
float: left;
width: 70%;
height: 100%;
border: 1px solid black;
border-left: 0;
}
.titleDescription{
float: left;
width: 100%;
border-bottom: 1px solid black;
}
.detailDescription{
float: left;
width: 100%;
}
Oh and I dont understand why in your picture it is width 20% and 70%, what are u going to do with the rest 10%?
Let me see if i got it, u want to align the imageDescription and textDescription in the itemDescription
Try somethign like:
HTML:
<div class="itemDescription">
<div class="imageDescription ">
Your image
</div>
<div class="cl"> </div>
<div class="textDescription">
some header
some paragraph
</div>
</div>
CSS:
.cl{
clear:both;
}
.itemDescription {
width: something;
}
.imageDescription {
float: left;
width: something;
}
.textDescription {
float: right;
width: something;
}
I have a CSS problem that I'm not able to figure out. I'm not even sure it is possible. What I want is the following:
I have three buttons/tabs like this http://sv.tinypic.com/r/21cf85t/6 and when you click one tab a different div should show for each tab like this http://sv.tinypic.com/r/21l5y85/6 or http://sv.tinypic.com/r/2dbrv5u/6.
I know how to show/hide the divs with jQuery but the problem is that the divs will increase in height http://sv.tinypic.com/r/k2xxfb/6 and then they will push the other tabs and divs down. Is there a way to create what I am trying to do?
I'm not a guru in CSS so if you have an example to look at or can post code here I would be very very thankful!
This is the HTML I'm using for my tabs:
<div class="MainContent">Content</div>
<div class="TabsHolder">
<div id="Tab1">
<div style="width:200px">
Content Tab 1
</div>
</div>
<a class="Button1" href="#Tab1"></a>
<div class="clearer"></div>
<div id="Tab2">
<div style="width:200px">
Content Tab 2
</div>
</div>
<a class="Button2" href="#Tab2"></a>
</div>
CSS:
.MainContent {
float: left;
}
.TabsHolder
{
float: left;
}
.Button1
{
float: left;
margin: 100px 0px 20px 0px;
background: url(images/Button1.png) no-repeat 0 0;
height: 79px;
width: 27px;
}
#Tab1
{
width: 200px;
margin: 80px 0px 20px 0px;
border: solid 1px #ACCD45;
position: relative;
float: left;
overflow: hidden;
padding: 20px;
}
.Button2
{
float: left;
margin: 0px 0px 20px 0px;
background: url(images/Button2.png) no-repeat 0 0;
height: 97px;
width: 27px;
}
#Tab2
{
width: 200px;
margin: 0px 0px 20px 0px;
border: solid 1px #ACCD45;
position: relative;
float: left;
overflow: hidden;
padding: 20px;
}
div.clearer
{
clear: both;
margin: 0px;
margin-bottom: 0px;
margin-top: 0px;
padding: 0px;
line-height: 0px;
height: 0px;
width: 0px;
overflow: hidden;
}
Here is what I put together using pure CSS - Tested in Firefox, IE8 and Chrome (not sure about others). Try out a demo here.
Note: I wanted to make a comment about one thing in your original HTML - you can't add a background image to a link <a> tag.
CSS
.MainContent {
float: left;
width: 400px;
height: 400px;
background: #444;
}
.buttons {
float: left;
margin: 10px 0 10px 0;
width: 27px;
clear: both;
}
.Button1 {
background: #555 url(images/Button1.png) no-repeat 0 0;
height: 79px;
}
.Button2 {
background: #555 url(images/Button2.png) no-repeat 0 0;
height: 97px;
}
.Button3 {
background: #555 url(images/Button3.png) no-repeat 0 0;
height: 127px;
}
.tabsHolder {
float: left;
position: relative;
}
.tabs {
width: 200px;
height: 200px;
margin: 0 0 20px 0;
border: solid 1px #ACCD45;
background: #444;
overflow: hidden;
padding: 20px;
display: none;
position: absolute;
left: 0;
}
#tab1 { top: 0; }
#tab2 { top: 98px; }
#tab3 { top: 215px; }
a:hover .tabs {display: block;}
HTML
<div class="MainContent">Content</div>
<div class="tabsHolder">
<a href="#tab1"><div class="buttons Button1">1</div>
<div id="tab1" class="tabs">
Content tab 1
</div>
</a>
<a href="#tab2"><div class="buttons Button2">2</div>
<div id="tab2" class="tabs">
Content tab 2
</div>
</a>
<a href="#tab3"><div class="buttons Button3">3</div>
<div id="tab3" class="tabs">
Content tab 3
</div>
</a>
</div>
</div>
You will need to define the pages (divs to hide/show) and tabs in two separate divs.
These will want to be floated next to each other, so you will have something like
<div class="pages">
<div class="page" id="tab1">....</div>
<div class="page" id="tab2">....</div>
</div>
<div class="tabs">
<div class="tab">Tab 1</div>
<div class="tab">Tab 2</div>
</div>
You can then set a min-height on pages (height for IE6, put into a conditional stylesheet), set pages and tabs to both float left, both with fixed widths.
Finally when you attach your event to $('#tab a'), make sure you iterate over all the pages hiding the non-relevant ones.
Without JavaScript, you cannot hide one of your divs, you can only have an HTML page per tab (like this or this).
If you want something more dynamic, you should use JavaScript. The tabs system is a built-in component of jQuery, for instance. (Homepage, live demo).
Hope that'll help you.