On my site http://goo.gl/BcJtC section "about us" I'd like the picture with the planet to be aligned horizontally in the middle of the DIV.
I tried text-align:center; but it doesn't work. Any idea? Thanks
HTML
<div class="section" id="plan-activite">
<div id="activity-container">
<div id="activity-left"><span class="activity-title">About Us</span><br /><img src="images/planet-water.jpg" class="activity-planet" alt="Picture" /></div>
<div id="activity-right"><p><span class="activity-conclusion">XYZ, naturlig mineralvann, ren natur</span></p><br /><p>XXZ AS was founded May 2011sdqsd.</p><br/>
</div>
</div>
</div><!--END page3-->
CSS
#activity-container
{
width:90%;
background-color:#FFFFFF;
Height:400px;
margin-left: auto;
margin-right: auto;
opacity:0.95;
filter:alpha(opacity=95); /* For IE8 and earlier */
border: 1px solid #efefef;
background: #fff;
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;
-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;
}
#activity-left {
color:#000;
margin: 0 auto;
border-style:solid;
border-right-color:#666;
padding:15px;
width: 30%;
float: left;
position: relative;
}
#activity-right {
font:12px 'Open Sans', "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight:400;
margin: O auto;
padding:15px;
color:#000;
width: 60%;
float: left;
position: relative;
text-align:justify;
-moz-column-count: 1;
-moz-column-gap: 1.5em;
-moz-column-rule: 1px solid #c4c8cc;
-webkit-column-count: 1;
-webkit-column-gap: 1.5em;
-webkit-column-rule: 1px solid #c4c8cc;
}
.activity-planet
{
text-align:center;
margin-top:20px;
margin-left:20px;
}
It will work if you set display: block and margin: 0 auto; to the img {
Related
I have created a heading style with a line below heading.The issue is the line does not align itself with the alignment of text to center or right. It's always on the left side no matter where the text is aligned.
h1 {
margin: 0 0 25px;
font-family: 'Raleway', sans-serif;
font-weight: 300;
color:black;
line-height:2em;
}
h1:after {
content:' ';
position: relative;
display:block;
width: 40px;
margin: 0 0;
border:1px solid #CB9033;
border-radius:4px;
-webkit-border-radius:4px;
-moz-border-radius:4px;
box-shadow:inset 0 1px 1px rgba(0, 0, 0, .05);
-webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, .05);
-moz-box-shadow:inset 0 1px 1px rgba(0, 0, 0, .05);
}
You can use a class for center and right alignment:
h1 {
color:#000;
font-family:'Raleway', sans-serif;
font-weight:300;
line-height:2em;
margin:0 0 25px;
position:relative;
}
h1:after {
border:1px solid #CB9033;
content:'';
display:block;
margin:0;
position:absolute;
width:40px;
}
h1.right {
text-align:right;
}
h1.right:after {
right:0;
}
h1.center {
text-align:center;
}
h1.center:after {
left:50%;
transform:translateX(-50%);
}
<h1 class="right">Test</h1>
<h1 class="center">Test</h1>
<h1>Test</h1>
I have two divs. One with an image and one below with a background (semitranparent) and a text. The last div I give the css margin-top: -25px to make an overlap.
But the image in the first div is placed in between the semitranparent background and the text of the last div.
div.polaroid {
width: 80%;
background-color: white;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
margin-bottom: 25px;
}
div.container {
background-color: rgba(255,0,0,0.7);
text-align: center;
padding: 10px 20px;
margin-top: -50px;
}
<div class="polaroid">
<img src="http://originalen.com/fileadmin/user_upload/skov.jpg" alt="Norway" style="width:100%">
<div class="container">
<p>The Troll's tongue in Hardanger, Norway</p>
</div>
https://jsfiddle.net/Donslund/bsdk804p/1/
div.polaroid {
position:relative;
width: 80%;
background-color: white;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
margin-bottom: 25px;
z-index:1;
}
div.container {
position:relative;
background-color: rgba(255,0,0,0.7);
text-align: center;
margin-top: -37px;
z-index:5;
color:white;
}
<div class="polaroid">
<img src="http://originalen.com/fileadmin/user_upload/skov.jpg" alt="Norway" style="width:100%">
<div class="container">
<p>The Troll's tongue in Hardanger, Norway</p>
</div>
</div>
Here it overlaps like you wanted (I assume).
I am trying to center my logo and a button in a navbar but without success, i already try use vertical-align, position absolute, padding in both, display table, table cell, etc... but anything works!
I can't use CSS3 unfortunately :[.
https://jsfiddle.net/cn23acef/1/embedded/result/
HTML:
<header class="header">
<div class="container">
<div class="header__logo">
<img src="https://pc-celicoo1.c9.io/little-stuffs/client/public/images/main/logos/pubcrawl2.png" height="25" />
</div>
<div class="header__cta">
<a href="#" class="cta">
Reserve <span class="wide__up">seu ingresso</span>
</a>
</div>
</div>
</header>
CSS:
.container {
padding-left: 2%;
padding-right: 2%;
margin-left: auto;
margin-right: auto;
height: 100%;
}
#media only screen and (min-width: 620px) {
.container {
padding-left: 1.8%;
padding-right: 1.8%;
max-width: 688px;
}
}
#media only screen and (min-width: 800px) {
.container {
padding-left: 1.4%;
padding-right: 1.4%;
max-width: 1180px;
}
}
body {
background: black;
margin: 0 auto;
}
.header {
background: #fff;
position: fixed;
z-index: 99999;
width: 100%;
/* -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15); */
/* -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15); */
/* box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15); */
}
.header__logo {
float: left;
}
.header__cta {
float: right;
}
.cta {
display: block;
background: #52C0C2;
color: #fff;
font-family: Oswald, Helvetica, sans-serif;
font-weight: 400;
padding: .735rem 1.25rem;
border-radius: 3px;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .16), 0 2px 10px 0 rgba(0, 0, 0, .12);
}
.cta [class^=i-],
.cta--big [class^=i-] {
margin-right: 1rem;
}
See this code
.container {
padding-left: 2%;
padding-right: 2%;
margin-left: auto;
margin-right: auto;
height: 100%;
}
#media only screen and (min-width: 620px) {
.container {
padding-left: 1.8%;
padding-right: 1.8%;
max-width: 688px;
}
}
#media only screen and (min-width: 800px) {
.container {
padding-left: 1.4%;
padding-right: 1.4%;
max-width: 1180px;
}
}
body {
background: black;
margin: 0 auto;
}
.header {
background: #fff;
position: fixed;
z-index: 99999;
width: 100%;
/* -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15); */
/* -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15); */
/* box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15); */
}
.header__logo {
float: left;
}
.header__cta {
float: right;
}
.cta {
display: block;
background: #52C0C2;
color: #fff;
font-family: Oswald, Helvetica, sans-serif;
font-weight: 400;
padding: .735rem 1.25rem;
border-radius: 3px;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .16), 0 2px 10px 0 rgba(0, 0, 0, .12);
}
.cta [class^=i-],
.cta--big [class^=i-] {
margin-right: 1rem;
}
#media (max-width: 767px){
.header__logo {
float: none;
text-align: center;
}
.header__cta {
float: none;
text-align: center;
}
.header__cta a{
display: inline-block;
}
}
<header class="header">
<div class="container">
<div class="header__logo">
<img src="https://pc-celicoo1.c9.io/little-stuffs/client/public/images/main/logos/pubcrawl2.png" height="25" />
</div>
<div class="header__cta">
<a href="#" class="cta">
Reserve <span class="wide__up">seu ingresso</span>
</a>
</div>
</div>
</header>
.container {
padding-left: 2%;
padding-right: 2%;
margin-left: auto;
margin-right: auto;
height: 100%;
}
#media only screen and (min-width: 620px) {
.container {
padding-left: 1.8%;
padding-right: 1.8%;
max-width: 688px;
}
}
#media only screen and (min-width: 800px) {
.container {
padding-left: 1.4%;
padding-right: 1.4%;
max-width: 1180px;
}
}
body {
background: black;
margin: 0 auto;
}
.header {
background: #fff;
position: fixed;
z-index: 99999;
width: 100%;
/* -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15); */
/* -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15); */
/* box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15); */
}
.header__logo {
float: left;
text-align:right;
width:50%;
}
.header__cta {
float: left;
}
.cta {
display: block;
background: #52C0C2;
color: #fff;
font-family: Oswald, Helvetica, sans-serif;
font-weight: 400;
padding: .735rem 1.25rem;
border-radius: 3px;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .16), 0 2px 10px 0 rgba(0, 0, 0, .12);
}
.cta [class^=i-],
.cta--big [class^=i-] {
margin-right: 1rem;
}
#media (max-width: 767px) {
.header__cta a {
display: inline-block;
}
}
<header class="header">
<div class="container">
<div class="header__logo">
<a href="">
<img src="https://pc-celicoo1.c9.io/little-stuffs/client/public/images/main/logos/pubcrawl2.png" height="25" />
</a>
</div>
<div class="header__cta">
<a href="#" class="cta">
Reserve <span class="wide__up">seu ingresso</span>
</a>
</div>
</div>
</header>
If I am understanding you correctly. When you say center my logo you mean vertically correct?
Like this?
In order to do this all you need to do is paste this code in place of your current img tag.
<img style="margin: 7px 0px 0px;" src="https://pc-celicoo1.c9.io/little-stuffs/client/public/images/main/logos/pubcrawl2.png" height="25">
To vertically adjust all you have to do is play with the margin 7px.
If this does not solve the issue please be more specific and if it is what you were looking for please accept it as the correct answer.
Hope This Helps!
I have a button with a style, and I want to change it to a new style without removing the existing style. So this is my currently button I have: http://jsfiddle.net/XaXg2/1/
HTML: <a id="login-button" class="s3d blue">Search</a>
CSS: #login-button { float: left; height: 28px; line-height: 28px; width: 100px; font-size: 15px; font-weight: 700; color: #FFF; border-radius: 4px; background: #AC3; text-align: center; cursor: pointer; }
I want to apply this new style without removing "login-button" style.
HTML: New Search
CSS:
a.s3d {
clear: both;
-webkit-border-radius:3px;
-moz-border-radius:3px;
border-radius:3px;
-webkit-box-shadow:0 4px 5px rgba(0,0,0,.3);
-moz-box-shadow:0 4px 5px rgba(0,0,0,.3);
box-shadow:0 4px 5px rgba(0,0,0,.3);
display: inline-block !important;
font: 700 13px/36px 'Arial', Helvetica, Clean, sans-serif;
height: 26px;
margin: 0 0 10px;
padding: 0 10px 11px;
position: relative;
text-decoration: none;
text-shadow: 0 1px 1px rgba(255,255,255,.35);
width: 125px; }
a.blue {
background: #65acc8;
background: -webkit-gradient(linear, 0 0, 0 0, from(#65acc8), to(#4586ae));
background: -moz-linear-gradient(#65acc8, #4586ae);
background: linear-gradient(#65acc8, #4586ae);
border-top: 1px solid #a1cdde;
color: rgba(25,45,55,.9); }
a.blue:active {
background: #4586ae;
background: -webkit-gradient(linear, 0 0, 0 0, from(#4586ae), to(#65acc8));
background: -moz-linear-gradient(#4586ae, #65acc8);
background: linear-gradient(#4586ae, #65acc8); }
Use CSS specificity to override your original CSS. Add #login-button to your selectors:
jsFiddle example
#login-button {
float: left;
height: 28px;
line-height: 28px;
width: 100px;
font-size: 15px;
font-weight: 700;
color: #FFF;
border-radius: 4px;
background: #AC3;
text-align: center;
cursor: pointer;
}
a#login-button.s3d {
clear: both;
-webkit-border-radius:3px;
-moz-border-radius:3px;
border-radius:3px;
-webkit-box-shadow:0 4px 5px rgba(0, 0, 0, .3);
-moz-box-shadow:0 4px 5px rgba(0, 0, 0, .3);
box-shadow:0 4px 5px rgba(0, 0, 0, .3);
display: inline-block !important;
font: 700 13px/36px'Arial', Helvetica, Clean, sans-serif;
height: 26px;
margin: 0 0 10px;
padding: 0 10px 11px;
position: relative;
text-decoration: none;
text-shadow: 0 1px 1px rgba(255, 255, 255, .35);
width: 125px;
}
a#login-button.blue {
background: #65acc8;
background: -webkit-gradient(linear, 0 0, 0 0, from(#65acc8), to(#4586ae));
background: -moz-linear-gradient(#65acc8, #4586ae);
background: linear-gradient(#65acc8, #4586ae);
border-top: 1px solid #a1cdde;
color: rgba(25, 45, 55, .9);
}
a#login-button.blue:active {
background: #4586ae;
background: -webkit-gradient(linear, 0 0, 0 0, from(#4586ae), to(#65acc8));
background: -moz-linear-gradient(#4586ae, #65acc8);
background: linear-gradient(#4586ae, #65acc8);
}
On my site http://goo.gl/BcJtC section "about us" I'd like a thin grey border on the right side of my activity-left div, to make a separation with activity-right div.
Unfortunately with my current code it doesn't work. Any idea? Thanks
HTML code:
<div class="section" id="plan-activite">
<div id="activity-container">
<div id="activity-left"><span class="activity-title">About Us</span><br /><img src="images/planet-water.jpg" class="activity-planet" alt="Picture" /></div>
<div id="activity-right"><p><span class="activity-conclusion">XYZ, khkhkhk, ren natur</span></p><br /><p>XXZ AS was founded 2011sdqsd.</p><br/>
</div>
</div>
</div><!--END page3-->
CSS code:
#activity-container {
width:90%;
background-color:#FFFFFF;
Height:400px;
margin-left: auto;
margin-right: auto;
opacity:0.95;
filter:alpha(opacity=95); /* For IE8 and earlier */
border: 1px solid #efefef;
background: #fff;
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;
-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;
}
#activity-left {
color:#000;
margin: 0 auto;
border-style:solid;
border-right-color:#666;
padding:15px;
width: 30%;
float: left;
position: relative;
}
#activity-right {
font:12px 'Open Sans', "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight:400;
margin: O auto;
padding:15px;
color:#000;
width: 60%;
float: left;
position: relative;
text-align:justify;
-moz-column-count: 1;
-moz-column-gap: 1.5em;
-moz-column-rule: 1px solid #c4c8cc;
-webkit-column-count: 1;
-webkit-column-gap: 1.5em;
-webkit-column-rule: 1px solid #c4c8cc;
}
.activity-planet {
text-align:center;
margin-top:20px;
margin-left:20px;
}
Add border: 1px solid #000 to #activity-left. It works for me.
Although I would do border-left: 1px solid #000 for #activity-right as this will extend all the way down.
The border declaration is made up of three parts: color, style and width properties. Style and width are mandatory, with color being optional (inheriting from the text color if not provided).
These properties can be made more specific using the -left, -right, -top and -bottom suffixes, as you have done for the color property.
So at present, all you are missing is the width declaration in order to have a right-hand border. The trouble with that though, is that since you've set a generic style for the whole <div>, adding border-width: 1px, will give the other 3 sides a border in the default color.
To get around this, you can use the shorthand declarations and give all 3 properties just to the right-hand side at once (border-right: 1px solid #000;).