How can I make this divider with a logo in the centre in CSS? ! I've been trying but didn't even got close yet. What would be the best way to achieve this.
Thank you!
Update
This needs to be placed on top of a bg image so the gaps around the logo must be transparent.
Sorry guys this one is a little tricky I know...
Here's the PNG
Well, if you're background is totally plain then it's relatively straight forward.
The HTML
<header>
<div id="logo">
<img src="http://placehold.it/200x100" alt="Placeholder Image" />
</div>
</header>
The CSS
body {
margin: 0;
background: white;
}
#logo {
width: 200px; /* Width of image */
padding: 40px; /* Creates space around the logo */
margin: 0 auto; /* Centers the logo */
background: white; /* Must be same as body */
position: relative; /* Brings the div above the header:after element */
}
#logo img {
display: block;
}
/* :after pseudo element to create the horizontal line */
header:after {
content: '';
display: block;
width: 100%;
height: 1px;
background: #ccc;
margin-top: -90px; /* Negative margin up by half height of logo + half total top and bottom padding around logo */
}
Working demo here.
EDIT
For situations where the body (or containing div) is not a solid colour, try the following:
HTML
<div id="header">
<div id="logo">
<img src="http://placehold.it/200x100" alt="Placeholder Image" />
</div>
</div>
CSS
body {
margin: 0;
}
#logo {
width: 100%;
}
#logo, #logo:before, #logo:after {
float: left;
}
#logo:before, #logo:after {
content: '';
width: 50%;
min-height: 100px; /* height of image */
border-bottom: 1px solid #ccc;
margin-top: -50px;
}
#logo:before {
margin-left: -120px;
}
#logo:after {
margin-right: -120px;
}
#logo img {
float:left;
padding: 0 20px;
}
Working demo here.
OR even an example based on display: table, but this goes a bit wonky when resizing.
http://jsbin.com/ITAQitAv/10/edit
This would be one approach:
.hr {
height: 50px; /* imageheight */
background: #fff url(http://placekitten.com/100/50) no-repeat center;
}
.hr hr {
top: 50%;
position: relative;
}
<div class="hr"><hr /></div>
This would be another:
.hr2{
display: block;
border-top: 2px solid black;
height: 2px;
}
.hr2 img {
display: block;
margin: auto;
margin-top: -31px; /*img-height /-2 + height / 2 */
/* adjustments for 'margin' to border */
padding: 0 20px;
background: #fff;
}
<div class="hr2"><img src ="http://placekitten.com/100/60"></div>
Demos: http://plnkr.co/edit/DznVp8qB9Yak8VfHVzsA?p=preview
Related
I have two buttons that appear side by side. The idea is that whenever the screen width changes, the buttons will grow or shrink accordingly. This is working fine. However, I'd like to have a 10px distance between the buttons, no matter what the screen width is. In my case as the screen width grows, the gap also grows which I'd like to avoid.
Here is the test code I have been working with:
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<style>
body {
margin:0;
padding: 0;
}
div.buttons {
width: 100%;
box-sizing: border-box;
padding: 0 5px;
}
a.left, a.right {
display: block;
width: 49%;
box-sizing: border-box;
background-color: #f00;
text-align: center;
}
a.left {
float: left;
}
a.right {
float: right;
}
</style>
</head>
<body>
<div class="buttons">
<a class="left" href="">One</a>
<a class="right" href="">Two</a>
</div>
</body>
</html>
I can tell that giving a 1% to the gap will make it grow with the screen, but I'm trying to find a way of giving the gap a fixed size while having the button behave as expected.
EDITED TO ADD: I'm looking for a solution which not only would keep the gap fixed but that will also keep the left and right margins fixed as well. So 5px space to edge, button, 10px gap, button, 5px space to edge.
Thanks for any help you can provide.
I have a solution in this fiddle.
HTML
<div class="buttons">
<div class="button-container">
<a class="button">first</a>
</div><div class="button-container">
<a class="button">second</a>
</div>
</div>
CSS
.buttons {
width: 100%;
box-sizing: border-box;
padding: 0;
}
.button-container {
display: inline-block;
width: 50%;
box-sizing: border-box;
border: none;
padding: 0;
margin: 0;
}
.button {
display: block;
box-sizing: border-box;
background-color: #f00;
text-align: center;
padding: 5px;
}
.button-container:nth-child(odd) .button {
margin-right: 5px;
}
.button-container:nth-child(even) .button {
margin-left: 5px;
}
Key points to take home. Firstly, you need to avoid any whitespace between the inline-block elements .button-container to avoid a rendered space. Otherwise, setting width:50% will end up wrapping (because your have two 50% wide items with an intervening space, which is more that 100% width). Secondly, using .button-container allows you to evenly split the buttons across the page using a set percentage. The spacing between buttons then becomes a margin interior to the container.
That's due to the fact that you links are aligned to the outer borders (via float), not to each other. To change it the way you want, remove the floats and center them, plus add a 10px margin-right on the left one:
(for the snippet I reduced the width to 48% since otherwise it won't fit into a small screen)
body {
margin:0;
padding: 0;
}
div.buttons {
width: 100%;
box-sizing: border-box;
padding: 0 5px;
text-align: center;
}
a.left, a.right {
display: inline-block;
width: 48%;
box-sizing: border-box;
background-color: #f00;
text-align: center;
}
a.left {
margin-right: 10px;
}
<div class="buttons">
<a class="left" href="">One</a>
<a class="right" href="">Two</a>
</div>
So here's a new version, fulfilling your later added additional requirements.
It gives the buttons absolute position and defines their width by defining their left and right borders 5px from the outer border and 5px each from the center (adding up to a 10px distance between them), using calc:
body {
margin:0;
padding: 0;
}
div.buttons {
width: 100%;
height: 1.6em;
}
a.left, a.right {
position: absolute;
display: block;
background-color: #f00;
text-align: center;
}
a.left {
left: 5px;
right: calc(50% + 5px);
}
a.right {
right: 5px;
left: calc(50% + 5px);
}
<div class="buttons">
<a class="left" href="">One</a>
<a class="right" href="">Two</a>
</div>
how can I create menu like on the picture?
Requirements:
Built using Bootstrap columns, must be responsive
In normal state, only Option and icon (green square) can be seen
OnHover: The Suboption (in blue rectangle) expands pushing Option up and also Caption in red rectangle appears, also pushing the whole Option up.
When one Menu item is hovered, all the others must stay down, not moving
Expanding with animation
Here's my fiddle attempt: http://jsfiddle.net/52VtD/7878/
HTML of one item (all are wrapped in a row):
<div class="col-xs-12 col-sm-3 nopadding item">
<div class="mask">
<div class="inner-wrapper">
<p>Option A</p>
<div class="hidding-guy">
<p>Hello</p>
Suboption
Suboption
Suboption
</div>
<i class="origami o-01"></i>
</div>
<div class="btn-red ">CAPTION</div>
</div>
</div>
CSS:
.nopadding {
padding: 0 !important;
margin: 0 !important;
}
.footer-menu-wrapper {
background: #ddd;
position: fixed;
bottom: 0;
width: 100%;
margin: 0;
}
.footer-menu-wrapper .item {
position: relative;
}
.footer-menu-wrapper .item:hover .hidding-guy, .footer-menu-wrapper .item:hover .hidding-guy > * {
height: auto;
}
.footer-menu-wrapper .mask {
border: 1px solid #ccc;
width: 100%;
}
.footer-menu-wrapper .mask .hidding-guy {
height: 0px;
}
.footer-menu-wrapper .mask .hidding-guy > * {
display: block;
height: 0px;
}
.btn-red {
background: #e91333;
color: #fff;
width: 100%;
min-height: 66px;
border: 0px transparent;
text-align: center;
}
Alter your css to:
.footer-menu-wrapper .mask {
border: 1px solid #ccc;
width: 100%;
position: absolute;
background-color: #ddd;
bottom: 0;
}
now it behave like a dropup menu. Keep in mind that you must reset the positioning for the responsive layout like:
#media (max-width: 768px){
.footer-menu-wrapper .mask{
position: relative;
}
}
DEMO
UPDATE DEMO with media query
UPDATE:
Hide the CAPTION - opacity: 0 and show it on hover.
Second hide the options - visibilety: hidden and also show it on hover.
This ist a quick solution! The rest should be simple css styling
DEMO
I know it's been asked a few times, but upon playing around a bit I still couldn't center what I need to. What I'm looking to do it center those buttons vertically on the page. I want to put centered text above it, too.
My (sloppy) code: JsFiddle
HTML:
<div>
</div>
CSS:
div {
text-align: center;
}
a {
text-align: center;
margin: auto;
}
.cbtn {
display:inline-block;
width:60px;
height:60px;
border-radius:50px;
background:transparent;
border: solid gray 1px;
margin: 2px;
-o-transition:.5s;
-ms-transition:.5s;
-moz-transition:.5s;
-webkit-transition:.5s;
transition:.5s;
}
.cbtn:hover {
text-decoration:none;
background:#F3734F;
}
#mail {
background-image:url(http://data.novicode.com/data/img/mail.png);
background-position:50% 50%;
background-repeat:no-repeat;
}
Here is one way of doing it, assuming you want the buttons centered both horizontally and vertically on the page.
The HTML is:
<div class="wrap">
<div class="button-wrap">
</div>
</div>
and the CSS is:
html, body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
.wrap {
height: 100%;
width: 100%;
}
.button-wrap {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
height: 60px;
width: 350px;
margin: auto;
text-align: center;
}
You need to declare the width and height properties of the body and html elements to be 100%, and the same for div.wrap.
The trick is to wrap the links/buttons in div.button-wrap, which is absolutely positioned and given specific width and height values to match the buttons. The height of 60px is based on the height of the .cbtn, and the width of 350px is 5 times (60px + 2x2px + 2x1px + 4x1em) which is about 350px. However, since we can use text-align: center for centering the inline blocks, the exact width is not too critical, just make it wide enough.
The centering works by setting all the position values to 0 (left/right/top/bottom) and then setting margin: auto.
This is all based on CSS 2.1 so it should work in most browsers. The only limitation is the inline-block property, which IE7 does not recognize.
However, since you are using CSS2 animations, inline-block is probably okay.
Fiddle reference: http://jsfiddle.net/audetwebdesign/METYC/
Full page view: http://jsfiddle.net/audetwebdesign/METYC/show
check this :
http://jsfiddle.net/AT8S6/
you can change the width,height and margin property of section for different results .
HTML
<div>
<section>
</section>
</div>
CSS
div {
text-align: center;
height:400px;
width:100%;
border:2px #000 solid;
}
a {
text-align: center;
margin: auto;
}
div section {
width:65%;
height:50%;
margin:20% auto;
}
.cbtn {
display:block;
width:60px;
height:60px;
border-radius:50px;
background:transparent;
border: solid gray 1px;
margin: 2px;
-o-transition:.5s;
-ms-transition:.5s;
-moz-transition:.5s;
-webkit-transition:.5s;
transition:.5s;
float:left;
}
.cbtn:hover {
text-decoration:none;
background:#F3734F;
}
#mail {
background-image:url(http://data.novicode.com/data/img/mail.png);
background-position:50% 50%;
background-repeat:no-repeat;
}
You could set the following rules on the div:
div {
position: absolute;
left: 50%;
height: 50%;
margin-top: -(height of div);
margin-left: -(width of div);
}
Example link below:
http://jsfiddle.net/AT8S6/1/
Hi have had to put the menu bar further down the page so javascript will load a slide show.
I am trying to then push the menu bar up. Can I put in an absolute reference so it appears a t the top.
#left, #middle, #right {
background-color: inherit;
color: inherit;
float: left;
padding-left: 10px;
padding-right: 5px;
}
#left {
width: 15%;
min-width: 10em;
padding-left: 5px;
background: #fff;
}
#middle {
width: 80%;
border-left: 3px dotted #999;;
background: #fff;
}
#header {
width: 100%;
background: #666;
}
#footer {
clear: both;
width: 100%;
background: #fff;
}
#left2 {
width: 15%;
min-width: 10em;
padding-left: 5px;
background: #fff;
margin-top: -500px
}
#middle2 {
width: 80%;
border-left: 3px dotted #999;;
padding top: 500px
}
In Html
<div id="middle2">
<div id="left2">
Although it is completely unclear in your code what the 'menu bar' is, or which class might apply to it, it seems to me you should try absolute positioning in CSS
CSS:
.menubar
{
position:absolute;
top:20px;
left:20px;
}
html:
<div id="some_menu_bar" class="menubar">
your menu goes here
</div>
I am trying to then push the menu bar up.
This makes me think you hope to delay the positioning of the menu bar until some script has executed. You cannot do this with CSS alone*.
*Ok perhaps you can with CSS3 and animations but this isn't well supported at the moment.
I have a box center, and I want to color that box differently depend on the page. I try this
#center {
margin-top: 2px;
padding: 10px 20px; /* CC padding */
width: 100%;
height: 800px;
color: black;
font-size: 11px;
}
#backgroundRed{
background-color: red;
}
#container {
padding-left: 200px; /* LC fullwidth */
padding-right: 240px; /* RC fullwidth + CC padding */
}
#container .column {
position: relative;
float: left;
}
so then I would try this
<div id="containder">
<div id="backgroundRed">
<div id="center" class="column">
abc
</div>
</div>
</div>
however the background of the box does not turn to red, someone explain to me what did I do wrong? btw, I must have class="column"
Maybe what you wanted was this rule?
#backgroundRed div#center {
background-color: red;
}
That means "if div#center is a child of #backgroundRed..."
Your example should make the outer div have a red background.
Try the following code
#backgroundRed{
background-color:red;
overflow:hidden;
}