I have couple of rectangle boxes aligning in 1 column straight and each boxes has a content in it. Previously I have this below:
.frmPhases
{
width:800px;
border:solid 2px #CCC;
background: #EEE;
height:auto;
padding:14px;
position:relative;
margin-bottom:50px;
margin-top: 50px;
margin-left: auto;
margin-right: auto;
}
It displays just fine but with 1 flaw, its width isn't consistent. So every new boxes come in, I have to set its width manually base on its content's maximum width. (This requires id, which would make my CSS code REALLY long)
Now I improved the code to this:
.frmPhases
{
width:auto;
display:inline-block;
border:solid 2px #CCC;
background: #EEE;
height:auto;
padding:14px;
position:relative;
margin-bottom:50px;
margin-top: 50p
margin-left: auto;
margin-right: auto;
}
Now it has consistent width, but the rectangle boxes isn't centralized. The only way to centralize it if I would to manually key in the margin-left, which looks fine but on different resolution it does not. Any idea how to centralize it?
Related
Currently trying to build a gallery page for a client's website and I've noticed that a simple float:left does not give me what i'm looking for.
What I want is for the images to line up perfectly regardless of their size as the images that I have supplied are all in different sizes.
.gallery img {
margin:0 !important;
border:1px solid white;
width:33%;
float:left;
}
That's the code that i'm using & the website is responsive.
use height: auto; and max-width: 100%;
.gallery img {
margin:0 !important;
border:1px solid white;
height: auto !important;
max-width: 100%;
float:left;
}
I have a portfolio, which I built myself with the help of lots of people and tutorials. I noticed that the actual gallery (currently featuring 8 thumbs) will not center. Especially when scaled to mobile size it looks a bit crook.
I wrapped the gallery in a div called 'imagewrapper' and gave it these properties;
.imagewrapper{
width: 80%;
margin: 0 auto;
height:100%;
}
Does the width mess with the aligning of my div? The full code is here; http://kellyvuijst.nl. Would be great if you could send me in the right direction.
I would just make a few changes to your css:
.imagewrapper{
width: 80%;
margin: 0 auto;
height:100%;
text-align: center; /* add this */
}
.mask {
position:relative;
height:180px;
width:240px;
box-shadow:0 0 1px #000;
border:5px solid #f6f6f6;
overflow:hidden;
float:left; /* delete this */
margin:15px;
display: inline-block; /* add this */
}
Please help to achieve this with CSS:
I have array of text strings, from 1 char to 200 chars.
I need to display them in webpage each in separate box.
the box flow is similar to text, left to right until the end of page then wrap
the background color of each box must be cyan.
minimal width and height must both be 50 pixels
1-2 pixel space between boxes (maybe achieve with margin=1)
there must always be at least two pixels between text and the edge of the box
text is vertically aligned to middle
text is horizontally aligned to center
maximum width of box must be 300 px
if text does not fit in 50x300 it is cropped inside the box (box will not grow)
each box should have 1 pixel black border
this must be simple for someone experienced! I already try almost every possible CSS tag; but always something is wrong. I read about CSS boxing, but surprisingly it just made it more compilcated.
<style>
z {
min-width: 50;
#min-height: 50;
padding: 1px;
padding-color: magenta;
margin: 1px;
margin-color: red;
#padding-left: 10px;
display: table-cell;
#height: 50;
#vertical-align: middle;
#text-align:center;
background-color: cyan;
#border: 1px;
#border-color:green;
/* padding:10px 10px 10px 10px; */
border-top:1px solid
border-style:solid;
border-color:#ff0000 #0000ff;
outline-style:dotted;
outline-color:#00ff00;
outline-width: 1px;
color: blue;
}
</style>
<html>
<z>1</z>
<z>abcdefghijklmnope</z><z>2</z><z>blablablabla</z>
</html>
I am pasting this so just you can see how hard and wrong I try.
Ok.
Don't use made up/invalid HTML elements or invalid CSS comments. Just because "it doesn't seem it matters", doesn't mean it won't make problems. When your HTML/CSS is invalid it's impossible to tell if that's the problem or not and you'll only get answers that tell you to correct them.
CSS requires units on lengths. min-width: 50; is invalid and if it's working for you, that just means you aren't writing corrent HTML/CSS and the document is in Quirks mode, meaning the browser emulates old IE errors, which makes debugging just more difficult.
There is no such properties as padding-color or margin-color. Don't make up things. Use a CSS and a validator to check your code. (http://validator.w3.org and http://jigsaw.w3.org/css-validator/).
Using display: table-cell; will just place all elements in one "table row" with no wrapping.
<p><span><span>1</span></span></p>
<p><span><span>abcdefghijklmnope</span></span></p>
<p><span><span>2</span></span></p>
<p><span><span>blablablabla</span></span></p>
p {
min-width: 50px;
max-width: 300px;
height: 50px;
padding: 2px;
margin: 1px;
float: left;
background-color: cyan;
border: 1 px solid blue;
color: blue;
overflow: hidden;
}
p > span {
display: table;
height: 100%;
width: 100%;
}
p > span > span {
display: table-cell;
vertical-align: middle;
text-align: center;
}
See http://jsfiddle.net/DyzAD/1/
(Refined answer)
It's not display:block that is wanted if height/width is required, as the OP also wants the elements to appear next to each other, then break, so float:left; is required rather than display block;
I have implemented the usage of text-overflow:ellipses; to aid in "breaking" the text so the elements will always have a visual balance and vertical alignment. Maybe you could provide a tooltip or html abbr attribute to display the whole text?
float:left on 'z' on any element will (should) fix your problem.
span {
min-width: 50px;
max-width:200px;
height: 24px;
margin: 1px;
float:left;
text-overflow:ellipsis;
overflow:hidden;
vertical-align: middle;
text-align:center;
background-color: cyan;
border: 1px solid green;
padding:10px;
color: blue;
white-space:no-wrap;
}
http://jsfiddle.net/MzKCh/3/
I am not sure if I understand your requirements properly but mixture of float:left elements with display:table-cell will give you text that wraps when it gets to the end of the page but allows both vertical and horizontal center aligning
html:
<div><span>test</span></div>
<div><span>test 1</span></div>
<div><span>loads of text that wraps if the text goes over 300px in length</span></div>
<div><span>loads of text that wraps if the text goes over 300px in length and will hide extra content if really really long</span></div>
<div><span>a</span></div>
<div><span>Amassivewordwithnospacesthatwillalsowrapifithits300px</span></div>
css:
div
{
border:1px solid #000000;
background-color:cyan;
float:left;
margin:1px 1px 0 0;
box-sizing:border-box;
height:50px;
max-width:300px;
overflow:hidden;
}
div > span
{
display:table-cell;
min-width:50px;
max-width:300px;
height:50px;
padding:2px;
text-align:center;
word-wrap:break-word;
box-sizing:border-box;
vertical-align:middle;
}
http://jsfiddle.net/up6KC/6/
I have a white container on top of the bg but it stops even though min-height is set as 100%, heres the CSS for this container and in bottom I have included image of what happens when I scroll to the bottom:
Container where post is:
Yellow Bg:
.home-body {
background-color:#EAC117;
height: 100%;
.home-main-content {
width:800px;
min-height: 100%;
position:absolute;
overflow:hidden;
margin-left:56.5%;
left:-500px;
top:51px;
border-left:1px solid black;
border-right:1px solid black;
background-color:#fff;
background-repeat:repeat-y;
.home-post-echoed-container {
width:400px;
position:absolute;
margin-left:50%;
left:-200px;
top:200px;
overflow:hidden;
}
.home-echoed-posts {
width:600px;
overflow:hidden;
left:-98px;
position:relative;
background-color:#fff;
margin-bottom:-5px;
border-top:1px solid;color:#0a527e;
border-left:1px solid;color:#0a527e;
border-right:1px solid;color:#0a527e;
}
.home-echoed-posts-post {
margin:10px;
color:black;
}
.home-echoed-posts-email {
margin:10px;
color:black;
}
.home-echoed-posts-date {
margin:10px;
color:black;
}
You are doing it wrong.
To center something you should use (instead of absolute positioning):
.foobar{
margin: 0 auto;
width: 800px;
}
As for "why comments are not expanding the container", it is hard to guess without code, but there are two reasonable possibilities: positioning or floats. There nothing i can do about it. But if they are floated, then easies is to have container with following css:
.container{
overflow: hidden;
}
It is a bit counter-intuitive, but works like charm. You can read more about it here.
Update: and read this article too.
Update 2:
Looks like it is the worts case scenario. You are using positioning .. for everything. YOu really need to learn how to use floats.
.home-post-echoed-container {
width: 600px;
margin: 0 auto;
padding-top: 200px; // im guessing what top:200px was doing
overflow:hidden;
}
.home-echoed-posts {
width:600px;
float: left;
background: #fff;
margin-bottom: -5px;
border: 1px solid #0a527e;
border-bottom: 0;
}
Something like this. But I'm really just guessing.
html, body
{
height:100%;
}
Make sure you include that in the top of your CSS script, else setting .home-main-content to min-height:100%; won't work, because to CSS, if undefined elsewhere, 100% is simply the height of the current div.
Also ensure that you have that same property set if your .home-main-content is surrounded by another div.
I know that this has been addressed in many places, but the template I modified was a bit quirky and I believe that I know what is causing the problem. I just don't know what to do to fix it.
The template sets the left and right borders to 200px. I think what it needed to do was make 2 more columns instead of a border that size. I want the partial grey lines on the sides of the page to go all the way down but they don't. I know it's because the content doesn't go all the way down, but for the life of me I can't figure out what to do with this. Should I just start this all over from scratch?
I apologize ahead of time for the page quality it just has random information in it to hold places.
link to page
Site
#container {
width: 950px;
padding:0px;
margin: 0px;
margin-left: auto;
margin-right: auto;
height:100%;
}
#banner {
text-align: right;
background-color: #E39A2D;
padding: 0px;
margin: 0px;
color: #ffffff;
}
/ here is where it goes a little wrong*/
#outer{
border-left: solid 200px #E39A2D;
border-right: solid 200px #E39A2D;
background-color: #ffffff;
height:100%;
}
#inner{margin:0; width:100%; height:100%; }
#left {
width:200px;
float:left;
position:relative;
margin-left:-200px;
margin-right:1px;
border-left:2px solid #564b47;
height:inherit;
}
#right {
width:200px;
float:right;
position:relative;
margin-right:-200px;
margin-left:1px;
border-right:2px solid #564b47;
height:inherit;
}
#content{
position: relative;
margin: 0px;
height:150%;
}
I'm not looking to make it full page length that I know how to do. I'm just looking to extend the lines all the way down the left and right sides.
Thanks ahead of time.
The borders you want to edit are the ones from the #outer div:
#outer{
border-left: solid 200px #564B47;
border-right: solid 200px #564B47;
}
Anyway your code seems a bit weird, using borders for layout is not the right way to go and it will give you problems. Check this out: http://www.barelyfitz.com/screencast/html-training/css/positioning/