I was wondering if it's possible to create a responsive web grid full a width of 1200px, with an exact border of 1px on each square of the grid.
You can see what I'm trying to do here:
http://machinas.com/wip/machinas/website/grid/
I'm using fluid squares for this:
http://fluidsquares.com/
I set each square to bg-color white, and the wrapper around has a bg-color grey, and each square has margin in percentage to give it a border but it doesn't give exact 1px border. Anyone know if it's possible somehow?
this is what the code is so far for each square:
a {
margin: 0.1% 0.1% 0 0;
padding-bottom: 15%;
width: 16.56%;
}
0.09% will give 1 pixel border ( closest as you can get )
a {
margin: 0.09% 0.09% 0 0;
padding-bottom: 15%;
width: 16.56%;
}
Related
I am having trouble getting the grey box on my page, https://com-bb-dev.com.edu to automatically resize to the width of the borders on the two boxes that are above it on every resolution. On 1440x900 it looks normal, or how I want it to look for every user, however I am using my second monitor here on a different resolution to test for issues such as this.
Here is what I have tried so far:
#loginText {
padding: 12px 80px 18px 80px;
background: #5f6062;
display: inline-block;
width: 912px;
border-top: 6px solid #DADADA;
margin-left: 10.6%;
text-align: center;
}
By default this div is not displaying as an inline box. Its entire container for whatever reason takes up the entire width of the screen(this is by default as far as I know). Thank you.
You need to make the following changes to the #loginText CSS:
Remove padding-right: 80px;
Remove padding-left: 80px;
Change margin-right: auto;
Change margin-left: auto;
Add width: 1072px;
Your issue is that your margins were percentage based, which scales on all resolutions. Your box above is an absolute size (1072px); this should make it match and center it as well.
I think I understand what you're trying to ask. The reason why the width of the gray box doesn't always match that of the two above boxes is because while the upper boxes have a set width, the gray box resizes with the browser window width (since it has a percentage margin on both sides).
Amend your style definition to this:
#loginText {
background: none repeat scroll 0 0 #5F6062;
border-top: 6px solid #DADADA;
margin: 0 auto;
padding: 12px 0;
text-align: center;
width: 1072px;
}
And I believe that gives you the behaviour you're seeking. If this isn't what you were looking for, let me know and I'll be happy to help further. Good luck!
I'm trying to build an 'elastic' website in CSS and HTML; I want there to be 6 squares along the width of the screen; I have the width of the squares scaling to the screen size, but I want to keep my squares square. Is there any way I can set the height of my div's to the same size as the div width (which is being set off of a % value).
See DEMO.
Basically, give the element the same value for the width and padding-bottom so that it will stay as a square as you scale the page.
.square {
background-color: red;
width:15%;
height:0px;
padding-bottom:15%;
display: inline-block;
}
Read more about fluid squares here.
Yes, the most common solution is to use a 1px by 1px image and make it full width with a variable height:
Demo: http://jsfiddle.net/57xhg/1/
CSS:
.wrap {
background: red;
margin: 0 auto;
width: 100px;
}
.wrap img {
width: 100%;
height: auto;
}
You can do it by using background-repeat-x and background-repeat-y property by providing the elastic line you want to draw
I want to achieve result as drawn on the image (red square is region, always fixed size, black square is the screen). I have no idea how to do this, unless here is a magical way of getting current size of screen and using conditional statements in CSS. Thanks!!
Here is the img: http://glothriel.org/uploads/layout.png
You can do it with a fixed width div and margin: 0 auto;
div {
width: 500px;
margin: 0 auto;
height: 500px;
background: red;
}
DEMO
hey hoping someone can help me. It's for my portfolio I'm building at www.pxlmin.com/portfolio
What I want is for the background color to take up the whole width, and it does, but when I resize the window down-to say half the width-I just get white space off to the side, (when I scroll to the right), so what I'm wondering is how can I get the background of both the center and the container to extend off to the left.. I have width 100% but it's obviously not doing the trick. Thanks.
Remove width: 100%; from #portContainer and #middlePort. Hope this would solve your issue.
You could add the main background color to the body tag:
body{
margin: 0;
padding: 0;
background: #EFE6D9
}
or use a background image which has the stripes in - but as the above remove the 100% width or set the left and right borders to 0. The white bit is probably 6 pixels which is the the borders being added to the width.
#middlePort {
background: #E8DED0;
height: 300px;
border: 3px solid #E2DAD0;
padding-top: 49px;
}
or
#middlePort {
background: #E8DED0;
height: 300px;
width: 100%;
border-bottom: 3px solid #E2DAD0;
border-top: 3px solid #E2DAD0;
padding-top: 49px;
}
ahha, figured it out.. just set a min-width greater than the amount of the content you need to fill with the background. in my case div #middleport min-width: 1500px;
Amazing the amount of pages that have these fall off backgrounds though (when viewport width reduced and scolled to the right).. tinygrab.com, nodejs.org to name a couple..
Hi,
Can anyone help me to create below mentioned design in css3. I've tried the following property, but still having the problem to get the exact design
background:#c6d92d;
height: 5em;
width: 20em;
-moz-border-radius: 1em 4em 1em 4em;
border-radius: 5em 5em 1em 1em;
padding:20px;
Thanks
You need more than one div to achieve that.
You must put two other divs (one at left and one at right) white with radius over a black background.
This is an effect I achieved in my site : http://dystroy.org/re7210/ (click "Toutes les recettes").
You do it like this :
_________
/ \
div C | div A | div B
/ \
C and B are white div covering 100% of cells having a black background (which is visible only where the border-radius isn't 0).
In this case, the div at the right of the main one has this css :
#divB {
background-color: white;
border-radius: 0 0 0 10px;
}
Here's my final effect :
And here's my "divB", which should make evident where I have white over black and where I have black over white :
(As you can see, I found easier to compose all this using a table but you probably can do it without table)
The properties you are looking for are:
border-top-left-radius and border-top-right-radius
http://www.css3.info/preview/rounded-border/