I have a menu and I want to centre it using CSS.
Current code:
.menu {
margin:10px 0 10px 20px;
float:right;
}
.menu li {
padding:0 20px 0 20px;
border-left:1px solid #FFF;
border-right:1px solid #DDD;
float:left;
}
.menu li.first {
border-left:none;
}
What would I add/change/remove to make the menu display centre and not left/right? thanks!
One of the easiest ways to do this is to set both the left and the right margin to auto and give the element a fixed width:
.menu {
width: 500px; // or whatever
margin-left: auto;
margin-right: auto;
}
The W3C recommends that if you want your .menu element to be closely fit around the content, you may want to use absolute positioning and 50% margins instead, like this:
.menu {
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
}
You can see how this works on the W3C page. However, the first method is more common (and readable).
Related
i'm having a problem and i can't find a solution that fits, i'm have two divs and the second one moves out to below of the 1º one when i resize below 800px (1ºdiv width + 2ºdiv width). What i want it's to fix the elements (not position 'fixed'), but i want them side to side no matter what, like in the facebook page or google, when i resize they stay in same place even if they go 'outside' the window. http://jsfiddle.net/VLt9m/. Thanks in advance.
#wrapper {
padding:92px 0 0 0;
width:100%;
float:left;
}
#content a {
text-decoration: none;
}
#block1{
background-color: #FFC374;
width:400px;
height:400px;
margin:0;
float: left;
position: relative;
}
#b1Title{
width:400px;
height:100px;
margin:0;
background-color: #FFD190;
opacity: 0.8;
position: absolute;
}
#b1Title h1{
color: #222;
font-size: 200%;
margin: 8% 0 0 12%;
}
#block2{
background-color:#449DCC;
width:400px;
height:400px;
margin:0;
float: left;
position: relative;
}
#b2Title{
width:400px;
height:100px;
margin:0;
background-color:#80B7D7;
opacity: 0.8;
position: absolute;
}
#b2Title h1{
color: #222;
font-size: 200%;
margin: 8% 0 0 12%;
}
If you wish, you can do it with media query. But, here is a quick fix with max-width
Working Demo
Add this to block
max-width:400px;
width:50%;
And this to title
max-width:400px;
width:100%;
Update
Give fixed width to wrapper
Working Demo
#wrapper {
padding:92px 0 0 0;
width:800px;
float:left;
}
If my guess is right, then you need to give min-width:800px; to Wrapper.
#wrapper{
padding:92px 0 0 0;
min-width:800px;
float:left;
overflow:auto;}
See here
I've been struggling for hours to try and get this simple border to appear on top of a div of a set height, but it's just not happening. I've checked out z-indexing and ':after', but nothing seems to be working.
The content's parent is: (establishes the content to be in the middle of the page)
#content {
position: relative;
margin-left:auto;
margin-right:auto;
top: 50px;
width:800px;
}
The content is then filled by the div-class "greycontent":
.greycontent {
position: relative;
z-index: 1;
height: 350px;
background: url(images/stacked_circles.png) repeat;
}
The area that is now covered by the background URL attempts to contain a border (away from edges):
.fill {
position:relative;
z-index: 2;
border-style: solid;
border-width: 2px;
border-color: red;
}
It just won't work. If my description was unclear, this image should clear up what I'm trying to convey:
Thank you!
JsFiddle
Just in case you do not want to put a ::before or ::after elements, you can simply use the background-clip property.
.myDiv {
background-clip: padding-box;
}
Exemple: https://codepen.io/geekschool/pen/JBdpdj
Is this what your trying to achieve? jsFiddle
#content {
position: relative;
margin: 0 auto;
top: 50px;
width:800px;
overflow:hidden;
background:#ccc;
width:800px;
}
.greycontent {
position: relative;
z-index: 1;
height: 350px;
width:350px;
border:1px solid #fff;
background:#ccc;
margin:0 auto 60px;
}
Updated your jsFiddle.
I have turned to this guide to solve my problem of vertically centering my text within the div. And I believe to understand what it says, but it still doesn't work.
.number {
position: relative;
height:50px;
margin: -25px 0 0 0;
top: 50%;
background-color: #00ff00;
}
Here is the fiddle, which recreates the problem. I want the green area (.number) to be centered vertically within the button (.numberElement)
Where is my problem? I reckon jQuery Mobile is complicating things and creating structures I am not foreseeing...
Thank you!
Sandro
You need to make some changes to your css like so:
.numberElement {
position: absolute;
width:30%;
height:200px;
margin:0px;
display:table;
}
.numberElement .ui-btn-inner {
display:table-cell;
vertical-align:middle;
}
Working Demo
Your top property of .number is not working fine, as i can see in your fiddle. Try changing it from top to margin-top. It will center around margin-top:60px;
Also dont forget to remove the line in .number
margin: -25px 0 0 0;
here is the correct answer as i think
.numberElement {
position: absolute;
width:30%;
height:200px;
margin:0px;
}
.number {
position: relative;
height:50px;
margin: 50px 0;
line-height:50px;
top: 50%;
background-color: #00ff00;
}
#grid {
position:absolute;
padding:0px;
margin:0px;
border:solid 1px #ff0000;
height:400px;
width:400px;
}
I having difficulties setting my footer properly. I have a Bottom navigation bar as part of my footer which is working fine(color:#7A7A7A). The issue is with the copy right information that follows. It has an address and phone number. I am wanting that this side of the footer to have a black bakcground(#000). This part is labeled in the css under copyRight which i am not get any results. Any Ideas of what may be wrong?
Here is my Live EXAMPLE.
Thank you
CSS
html, body {
margin:0;
padding:0;
height:100%; /* needed for container min-height */
background:#333333;
font-family: trebuchet, 'trebuchet ms', 'tahoma', sans-serif;
font-size:small;
color:#5e5e5e;
line-height: 130%;
}
/****** COLORBLOCK: this is the orangey-yellow bar behind the wrapper in the background. ******/
#colorblock {
position: absolute;
top: 60px;
left: 0px;
background: #c69a55;
z-index: 0;
height: 65px;
width: 100%;
padding: 0px;
margin: 0px;
}
/**************************************************/
div#container {
position:relative; /* needed for footer positioning*/
margin:0 auto; /* center, not in IE5 */
width:925px;
background:#f0f0f0;
height:auto !important; /* real browsers */
height:100%; /* IE6: treaded as min-height*/
min-height:100%; /* real browsers */
border-right: 15px solid #000000;
border-left: 15px solid #000000;
}
div#contentArea {
padding:1em 1em 5em; /* bottom padding for footer */
}
div#contentArea p {
text-align:justify;
padding:0 1em;
}
#content {
margin-left: 240px;
margin-right: 0 auto;
background: #ebebeb;
padding: 5px;
width:635px;
height: 400px;
}
/****** TOP BANNER: This is the banner with Greg's List logo and main navigation. Also includes the styles for the main navigation links. ******/
div#header {
/*padding:1em;*/
height: 175px;
border-top:15px solid #000000;
}
div#header p {
margin:0;
}
/****** LEFT COLUMN: This is the left gray column next to the content. Features the styling for the log-in form and the location links. ******/
#left2 {
float: left;
width: 200px;
background: #dddddd;
-moz-border-radius: 10px;
border-radius: 10px;
margin-right: 15px;
padding: 5px;
height: 400px;
}
/****** FOOTER: This is the junk at the bottom of the page. Do NOT remove the clear div; it's what makes it stick to the bottom. ******/
div#footer {
position:absolute;
width:100%;
bottom:0; /* stick to bottom */
background:#7A7A7A;
border-bottom:15px solid #000000;
}
div#footer p {
padding:1em;
margin:0;
}
a.footer {
color: #c7c7c7;
font-size: 80%;
padding-right: 20px;
letter-spacing: 1px;
}
p {
margin:0 0 1em;
}
#copyRight{
background:#000;
color: #FFF;
font-size: 75%;
bottom: 0;
}
.left{float:left;}
.right{float:right;}
</style>
You're floating the contents of #copyRight so it needs to be floated in order to contain them properly. Add this to #copyRight:
float: left;
width: 100%;
Read Brilliand detailed explanation below
Add overflow:hidden in #copyRight
So your CSS should look like this:
#copyRight{
background:#000;
color: #FFF;
font-size: 75%;
bottom: 0;
overflow:hidden
}
The problem you are having is that most elements, including divs, do not by default expand to contain floating elements. Since everything within copyRight is floating, it behaves as though it were empty, and shrinks to nothing.
There are many ways to make an element expand to contain floating elements. My personal favorite is to set overflow to just about anything - hidden being the most common.
#copyRight{
overflow: hidden;
}
Another way is to make the containing element float too, though it's then liable to cause the same problem with the element trying to contain it. Also, floating causes shrinkwrapping, so you have to set an explicit width:
#copyRight{
float: left;
width: 100%;
}
A similar result can be achieved using various display declarations, such as display: inline-block. This avoids propagating the problem to the parent element:
#copyRight{
display: inline-block;
width: 100%;
}
Apparently back in 2004 it was considered a wonderful new idea to solve such a problem by inserting a clearing element with the :after pseudo-class instead of the older method of adding a <div style="clear:both;"></div>. Those tricks would also solve your problem, though clearing floats and containing them are not quite the same thing.
Is there a simple way to style element like this?
Supposed to be used on a mobile so CSS3 is fully available. Can't think of a simple way. Images are out of question.
It has to be this blocky and there supposed to be a text within (this is a blocky 8-bit button)
This jumps off of feeela's beginnings, but it's different enough to warrant its own answer.
Rather than putting a colored block overly, it only adds red-colored elements, allowing background to show through. HOWEVER, to calculate it properly (so that they're square corners!) I had to set a fixed width height. There's probably some sort of wacky way to do this with percentages, but for proof of concept it was too headachey to contemplate. Since the requirement is for fixed height variable width, this should work.
The pseudo-elements need to have content or they will "collapse". The content can be empty, but that property needs to be set.
CSS:
/* main button block */
.button {
display:inline-block;
background: #f00;
position: relative;
line-height: 60px;
text-align: center;
padding: 0 20px;
height: 60px;
margin-left: 0.5em;
}
/* common background color to all */
.button, .button::before, .button::after {
background-color: #f00;
}
/* shared styles to make left and right lines */
.button::before, .button::after {
content: "";
position: absolute;
height: 50px;
width: 5px;
top: 5px;
}
/* pull the left 'line' out to the left */
.button::before {
left: -5px;
}
/* pull the right 'line' out to the right */
.button::after {
right: -5px;
}
Fiddle: http://jsfiddle.net/3R9c5/2/
How about this?
HTML:
<div class="block">(text goes here)</div>
CSS:
body {background:#1990D7;}
.block {background:#FF1200; line-height:52px; margin:8px auto; width:359px;
position:relative; text-align:center; font-weight:bold; color:yellow}
.block::before {display:inline-block; background:#FF1200; content:'';
position:absolute; top:4px; left:-4px; bottom:4px; width:4px;}
.block::after {display:inline-block; background:#FF1200; content:'';
position:absolute; top:4px; right:-4px; bottom:4px; width:4px;}
Edit: updated after the latest insights into the demands of the question.
You can insert each of that four blocky-corners by appending pseudo elements via ::before or ::after.
e.g.:
.button {
background: #f00;
position: relative;
}
/* corner top left */
.button::after {
position: absolute;
top: 0; left: 0;
width: 5px; height: 5px;
background: #00f;
}
/* corner top right */
.button::after {
position: absolute;
top: 0; right: 0;
width: 5px; height: 5px;
background: #00f;
}
/* corner bottom left */
/* … */
The CSS border-radius attribute
maybe this will help you. Or you can just add new class, "cadre" for example
.cadre
{
border-radius: 10px;
}
to your css file, then affect it to the div.
I don't think border-radius can accomplish that. This is the simplest way I can think of:
http://jsfiddle.net/DpLdt/
CSS:
body {
background:blue;
}
div#clipcorners {
width:500px;
height:200px;
background:red;
position:relative;
margin:100px auto;
}
span#a,span#b {
position:absolute;
width:10px;
height:180px;
top:10px;
background:red;
}
span#a {
left:-10px;
}
span#b {
right:-10px;
}
HTML:
<div id="clipcorners">
<span id="a">
</span>
<span id="b">
</span>
</div>