#container {
box-shadow: 10px 10px 5px #888888;
/*bg transparent*/
background-color: rgba(255, 255, 255, 0.4);
max-width: 960px;
/*centrat in pagina*/
margin: 0 auto;
/*distanta dintre border si continut*/
padding-top: 15px;
padding-right: 15px;
padding-left: 15px;
min-height: 95vh;
position: relative;
}
#header {
background-color: #FFA500;
position: relative;
overflow: auto;
}
#menu {
background-color: #FFD700;
/*dimensiune*/
width: 135px;
/*pozitie*/
float: left;
text-align: center;
/*margini fata de elemente*/
margin-right: 5px;
margin-top: 5px;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 10px;
padding-right: 10px;
}
#content {
background-color: #EEEEEE;
/*dimensiune*/
min-height: 685px;
width: 740px;
/*pozitie*/
position: relative;
/*margini fata de elemente*/
margin-top: 5px;
margin-bottom: 5px;
display: inline-block;
padding-top: 10px;
padding-bottom: 30px;
padding-left: 30px;
padding-right: 30px;
}
Container has everything. Header is inside the container, on top. Under it, I have a div called cont that has no style associated. Inside it, on the left I have menu and content on the right. Inside the content I have a table that overflows the div. How can I make that table fit inside the div?
Here is an image of my app. http://i.imgur.com/BVMlIEF.png?1
Jfiddle http://jsfiddle.net/5f9A4/
This issue came beacuse you have added a long text without any space. Add the following CSS. Hopefully it will resolve the issue.
#content table td
{
word-wrap:break-all;
}
I have reproduced(similar to your image) the issue in your fiddle. Check it out HERE
After that I have added my above solution to resolve this. Check the Updated Solution HERE.
Related
So I have two boxes:
https://jsfiddle.net/anaegm/trajtmgf/
My original intention was to make box-1 expand its height from the top and bottom when you hovered over it (as opposed to just "growing down" by adding padding), so I added a negative margin-top under the :hover to achieve this effect, and it works.
The problem is that box-2 below gets pushed down when you hover over box-1, and I need the second box to stay in its original position at all times. I tried adding a margin at the top of box-2, but this doesn't work. What are my options?
EDIT: Since I'm working with dynamic text for the actual page I'm doing, I'd rather not use a set height for a div container for box-1.
#box-1 {
color: #fff;
background-color: #e91d23;
text-align: center;
cursor: pointer;
width: 100px;
padding-top: 30px;
padding-bottom: 30px;
}
#box-1:hover {
background-color: #5A5A5A;
margin-top: -10px;
padding-top: 40px;
padding-bottom: 40px;
}
#box-2 {
width: 100px;
background-color: white;
text-align: center;
padding-top: 30px;
padding-bottom: 30px;
margin-top: 50px;
}
<div id="box-1">
Box 1
</div>
<div id="box-2">
Box 2
</div>
Use absolute positioning.
#box-1 {
position: absolute;
color: #fff;
background-color: #e91d23;
text-align: center;
cursor: pointer;
width: 100px;
padding-top: 30px;
padding-bottom: 30px;
}
#box-1:hover {
background-color: #5A5A5A;
margin-top: -10px;
padding-top: 40px;
padding-bottom: 40px;
}
#box-2 {
position: absolute;
width: 100px;
background-color: white;
text-align: center;
padding-top: 30px;
padding-bottom: 30px;
top: 100px;
}
<div id="box-1">
Box 1
</div>
<div id="box-2">
Box 2
</div>
I hope this was what you were trying achieve.
I have a so solution for you but i think this is not dynamic. take a look: https://jsfiddle.net/trajtmgf/1/
#box-1:hover + #box-2{
margin-top: 40px;
}
another approach without using positioning
#box-1 {
color: #fff;
background-color: #e91d23;
text-align: center;
cursor: pointer;
width: 100px;
margin-top: 10px;
padding-top: 30px;
padding-bottom: 30px;
margin-bottom: 10px;
}
#box-1:hover {
background-color: #5A5A5A;
margin-top: 0;
padding-top: 40px;
padding-bottom: 40px;
margin-bottom: 0px;
}
#box-2 {
width: 100px;
background-color: white;
text-align: center;
padding-top: 30px;
padding-bottom: 30px;
}
#avoid-margin-collapse {
/* avoid margin collapse (e.g. with a border, a padding, position) */
padding: 1px;
}
<div id="avoid-margin-collapse">
<div id="box-1">
Box 1
</div>
<div id="box-2">
Box 2
</div>
</div>
I have 3 sections within an article, I have the first 2 side by side at 40% width each. One float left, and another right. I cannot get the third section id: interests, to be centered below the 2. I want some margin top to give some space. Also when I minimize the screen it also drops into the footer. Any suggestions, thanks
http://jsfiddle.net/sy8o4vbt/
#interests {
width: 90%;
border: thin solid #000000;
margin-right: auto;
float: none;
padding-top: 5px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 5px;
clear: right;
margin-top: 103px;
margin-left: auto;
}
fixed this with appropriate CSS:
#interests {
width: 100%;
margin-top: 20px;
}
#interest_inner_div{
width: 60%;
border: 1px solid;
margin: 10px auto;
}
JSFiddle Link http://jsfiddle.net/7mzp80gg/
My button has following CSS code. When I resize the window the text falls outside of the div in chrome. (usng the mobile layout)
http://www.syntra-limburg.be/voltijds-praktijkleren
a.syntra-green-button {
background-color: #6faf3c;
border: 1px solid #9dcc77;
color: white;
padding: 15px 2%;
margin: 5px auto 0px;
position: relative;
font-size: 1.35em;
width: 190px;
max-width: 100%;
text-align: center;
display: block;
}
I fixed it using following code but I was wondering if there isn't a more elegant solution? I do not understand why this is happening.
.responsive-layout-mobile a.syntra-green-button {
font-size: 1em;
}
Try font-size percent like font-size: 115%;
css
a.syntra-green-button {
background-color: #6faf3c;
border: 1px solid #9dcc77;
color: white;
padding: 15px 2%;
margin: 5px auto 0px;
position: relative;
font-size: 115%;
width: 190px;
text-align: center;
display: block;
}
Set width to auto. You limited it cause of that it overflows
You can change how the width of the button is rendered using the below. First change the width to be percent based for desktop style displays:
width: 30%;
but also add a minimum width for when it it resized for a responsive device that fits the entire word:
min-width: 200px;
So full class would be:
a.syntra-green-button {
background-color: #6faf3c;
border: 1px solid #9dcc77;
color: white;
padding: 15px 2%;
margin: 5px auto 0px;
position: relative;
font-size: 1.35em;
width: 200px;
min-width: 30%;
max-width: 100%;
text-align: center;
display: block;
}
See this JSFiddle: http://jsfiddle.net/8tBQ3/
.responsive-layout-mobile a.syntra-green-button {
font-size: 100%;
}
I experience some strange text alignment, can you give me a hint where the Problem is:
I was trying to create a speechbubble:
.round
{
margin-top: 5px;
border-radius:50%;
background-color:#3d5177;
width:50px;
height:50px;
float: left;
}
.number {
color: white;
padding: 8px 17px;
font-size: 30px;
font-weight: normal;
}
.faq_container {
overflow: hidden;
}
.talkbubble {
left: 80px;
position: relative;
width: 340px;
height: 100px;
padding: 0px;
background: #aaaaaa;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
.talkbubble:after {
content: '';
position: absolute;
border-style: solid;
border-width: 10px 13px 10px 0;
border-color: transparent #aaaaaa;
display: block;
width: 0;
z-index: 1;
left: -13px;
top: 22px;
}
.talkbubble_text {
display: block;
text-align: left;
padding: 10px;
}
http://jsfiddle.net/Lf4sr/
Thanks
The problem is with the <div class="round"> CSS. The width of the element is pushing the text over to the right.
Add this to the .round class:
.round {
top: 0;
left: 0;
position: absolute;
}
And add this to the .faq_container class:
.faq_container {
position: relative;
}
Demo
Note: You can remove float: left; from .round.
Correct CSS should be:
.talkbubble {
left: 30px; /* or Whatever you may want the distance from the circle to be */
position: relative;
width: 340px;
height: 100px;
padding: 10px;
background: #aaaaaa;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
float: left;
}
.talkbubble_text {
display: inline;
text-align: left;
/* padding: 10px; ( remove this )*/
}
try adding float:left to the .talkbubble container
You can try this:
Fiddle here
.talkbubble_text {
display: inline-block;
text-align: left;
padding: 10px;
line-height:16px;
}
Good Luck...:)
I think the issue is that your last line of text is not inline with the others. This is due to the way you are laying out your code. Your text is being pushed across by your round element, which is a set height. Any text after this is not being pushed across, a quick fix would be to add a margin on the bottom of the number circle.
.round
{
margin-top: 5px;
border-radius:50%;
background-color:#3d5177;
width:50px;
height:50px;
float: left;
margin-bottom : 50px;
}
http://jsfiddle.net/Lf4sr/4/
But would probably be better to restructure your code a little to stop this happening in the first place.
Change positions, add overflow:hidden to .talkbubble_text to prevent float left align. Fiddle.
Updated: http://jsfiddle.net/Bushwazi/Lf4sr/8/
There are a lot of things that could be cleaned up in this example. There is lots of extra html. But the core problem is that if you are using float for one part, you have to use it for both. So you need to add float:left or right to .talkbubble and remove the left value.
.talkbubble {
/* left: 80px; */
position: relative;
width: 340px;
height: 100px;
padding: 0px;
background: #aaaaaa;
float:left;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
I did a bunch of other stuff in the fiddle to simplify and eliminate extra html/css too. But the core problem was mixing positioning with float and choosing just one.
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