I have a Get in Touch button on the bottom of this page:
In the mobile version (less than 770px) of the site I would like it to be centered.
HTML:
<div class="white, home_contact_btn wpb_column vc_column_container vc_col-sm-4">
<div class="wpb_wrapper">
<a class="laborator-btn btn btn-index-1 btn-type-standard contact-btn btn-primary btn-normal" target="" title="GET IN CONTACT" href="http://www.estiponagroup.com/dev/contact/">GET IN TOUCH</a>
</div>
</div>
CSS
.home_contact_btn a{
margin:0 auto;
text-align:center;
}
An anchor is inherently an inline element and can be centered by applying text-align:center; to its parent element:
.wpb_wrapper{
text-align:center;
}
Additionally, if you wanted it to be centered without targeting the parent, you can make the inline element display as a block level element and then center the text inside of it.
.home_contact_btn a{
display:block;
text-align:center;
}
And finally, if you have a certain width you want to have on the button, add that width and then you can use the auto-margins from your code.
.home_contact_btn a{
display:block;
text-align:center;
width:50%;
margin:0 auto;
}
set to the parent container text-align:center;
#media (max-width:700px){
.wpb_wrapper{
text-align:center;
}
.home_contact_btn a{
text-align:center;
}
}
fiddle
Simply use this :
.home_contact_btn a{
display : block;
text-align : center;
margin : 0 auto;
}
Alternatively, use this :
.wpb_wrapper {
text-align : center;
}
Both of them works, but I'll recommend you using the first option because in the second option all anchors (<a> elements) will be centered.
If you don't have any other anchor in the parent element of your 'Get in Touch' button, then second option will also work as expected.
Related
I am going to create a cascading menu with divs, for example when an <a> hovered another div shows:
I can create it with li and ul but want to do it with div.
My problem: When mouse pointer is on <a> the div shows but when mouse pointer come to div, div will disappear (display:none;)
this is my demo
<div id="topDiv">
<img src="http://www.balit.ir/kgl/pic/user/logo.png" id="logo"/>
<div id="rightTopMenu">
<a href="about.html">About KGL
<div class="hoverMenuDiv">
About Samuel
About Hoshange
About GhochAli
</div>
</a>
Contact KGL
KGL Website
KGL Gallery
</div>
My CSS:
body{
margin:0;
}
#topDiv{
position:absolute;
background: black;
}
#logo{
width:65px;
height:auto;
margin-left:40px;
}
#rightTopMenu{
float:right;
margin-top:20px;
}
#rightTopMenu a{
position:relative;
color: white;
display: inline-block;
text-align: center;
text-decoration:none;
width: 103px;
}
.hoverMenuDiv{
position:absolute;
top:40px;
background:#CAD20E;
display:none;
text-align:center;
width:130px;
}
#rightTopMenu a:hover, #rightTopMenu a:focus{
color:#CAD20E;
}
#rightTopMenu a:hover+.hoverMenuDiv{
display:block;
}
JSFiddle
In your CSS, you need
.hoverMenuDiv:hover{
display:block;
}
This ensures that when you hover over the div, it will stay there.
Also, in my JSFiddle, I've put your HTML to this:
About KGL
<div class="hoverMenuDiv">
About Samuel
About Hoshange
About GhochAli
</div>
You can't have <a> tags in <a>'s.
Here is a second JSFiddle with the previous work done, but also deleting top in .hoverMenuTop. I think it looks better this way and behaves how most websites would.
You have to add this when the user is inside menu.
.hoverMenuDiv:hover{
display:block;
}
also remove top from this class .hoverMenuDiv
fiddle
This selector is too broad. It is targeting ALL of your anchors.
#rightTopMenu a { ... }
You need to only select the immediate child:
#rightTopMenu > a {
Also, consider using an unordered list as your menu container, not nested A-tags.
See: http://www.dhtmlgoodies.com/?whichScript=dhtmlgoodies_menu3
Consider using the '>' selector instead of the '+' selector, like this:
#rightTopMenu:hover>.hoverMenuDiv{
display:block;
}
The '+' selector is used for finding subsequent tags, but .hoverMenuDiv is actually a child tag of #rightTopMenu.
See w3 schools for a quick reference on this.
I want to make the horizontal boxes with the size of 200 x 200 pixel each. I decide to use the ul li. and you guys know well that I must apply the float:left attribute to the li tag to make it horizontal.
My problem is that when I apply the float:left to the li element, all content in li completely breaks its container. I noticed this because I append the border style to the main container and all the content is in the new line below the main container.
Here is my code
HTML :
<div class="content-box">
<h3 class="box-header">Recent Files</h3>
<ul class="horizontal-content">
<li>
<div class="filebox">
</div>
</li>
</ul>
</div>
and the css :
.content-box {
position:relative;
width:800px;
border:1px solid #dadada;
margin-left:10px;
padding:10px;
}
ul.horizontal-content {
list-style:none outside none;
}
ul.horizontal-content > li {
float:left;
display:block;
padding:10px;
}
.filebox {
position:relative;
padding:15px;
width:200px;
height:200px;
border:1px solid #dadada;
background-color:#ecf0f1;
}
Now you see all of my code, please help me figure out what I have done wrong.
You dont really need float:left to make it horizontal. Just add display:inline-block and remove float
ul.horizontal-content > li {
padding:10px;
background:grey;
display:inline-block
}
DEMO
Add:
ul.horizontal-content {
overflow: auto;
}
here use overflow:auto and here is link of demo Click Here
I have been trying many of the solutions but they won't solve. I will create the JSfiddle for you guys to see what went wrong
Okay, all problems are solved with clear:both
How to show an edit link on the profile picture just like the one on facebook but positioned at the right-top corner of the image?
HTML Code:
<div class="topgrid">
<a href="#"><img src="C:/images/users/image1.png"/>
<span class="image" id="image">Edit Picture</span>
</a>
</div>
CSS Code:
.image {
color:#033;
font-size:12px;
background:#FFF;
display:none;
top:0;
right:0;
width:80px;
position:absolute;
}
.topgrid:hover .image{
display:block;
cursor:pointer;
}
.topgrid {
background-color:gray;
height:100px;
width:100px;
position:relative;
}
I am here using the fixed width of the span element, but when I don't specify the width of the span element, the element doesn't appears at the absolute top right-corner . So i have to adjust the right property as:
right:13%;
which is not the standard way to do it. I need your valuable suggestions!
I am also attaching the tried out fiddle here!
http://jsfiddle.net/nQvEW/81/
Try this Fiddle
css:
.image {
position:relative;
color:#033;
font-size:12px;
background:#FFF;
display:none;
top:0;
}
.topgrid:hover .image{
display:block;
cursor:pointer;
position:relative;
width:auto;
background:none;
top:-205px;
}
.topgrid {
text-align:right;
width:300px;
height:200px;
margin:20px;
}
Is this what your looking for ?
The span element has no fixed width and remains in the top-right corner!
.image {
color:#033;
font-size:12px;
background:#FFF;
display:none;
width:auto;
float:right;
}
.topgrid:hover .image{
display:block;
margin:0 auto;
cursor:pointer;
}
.topgrid {
background-color:gray;
height:100px;
width:100px;
position:relative;
}
Here's the updated Fiddle: http://jsfiddle.net/b6Yw6/15/
What i have done is :
made the span width to auto and gave float:right.
Removed position:absolute;top:0;right:0 property from span. Add them if it causes browser compatibility problems
You can also do
.image{
background:transparent;
color:white;
font-weight:500;
}
to make it look good!
Here's the new Fiddle as per your request! Tell me if there's anymore changes to be made.
First step is to have the image be a background image rather than a straight-up <img> tag. This will allow you to add child nodes.
Add one such child node: the edit link. Make it appear where you want it, ignore the "only when hovering" part for now.
When you're ready, add display:none. Then, in the :hover style for the container, (ie. #container:hover>#editlink), add display:block. Done.
Or you can use the dynamic html tag generations every time on hover
ive got a list set up with a background image set to the left of each of the lines of text
although they dont seem to line up, i put a span around the text to try and reposition the text but it didnt seem to work
heres the code im using..
HTML
<ul class="price-features">
<li><span>One page website with contact form</span></li>
<li><span>Social Media Integration</span></li>
<li><span>One year hosting + Domain registration</span></li>
</ul>
CSS
.price-features{
margin-top:30px;
}
.price-features li{
background-image:url(/images/prices/orange-arrow.png);
background-repeat:no-repeat;
background-position:left;
padding-left:15px;
height:30px;
border-bottom:#999 1px solid;
background-color:#996;
}
.price-features li span{
padding-top:5px;
}
http://i.stack.imgur.com/rV1LM.png
Padding only affects block-level elements. You'll need to either change your span to be a block-level element or override the default display to be block or inline-block.
.price-features li span{
display: block;
padding-top:5px;
}
For some reason this text isn't being centered.
#highlightheader
{
background-color:#006600;
color:white;
font-size:30px;
text-align:center;
font-weight:bold;
}
<span id="highlightheader">example text</span>
http://tinkerbin.com/eoJprUq5 (jfiddle going too slow, used this one instead)
EDIT: i ONLY want the text to be highlighted, not have a whole green bar across.
span is an inline tag
add display:block to css
http://tinkerbin.com/oBgV5mcU
a span is an inline element, whereas a block element like <div> would work... alternatively add display: block; to your css.
You should use a div around the span, especially since you want a heading here. As mentioned in the other answers, span should be used for inline elements. You're using it right for highlighting but positioning should be done through div.
Try that:
div.center{
text-align:center;
}
#highlightheader
{
background-color:#006600;
color:white;
font-size:30px;
font-weight:bold;
}
<div class=center>
<span id="highlightheader">example text</span>
</div>
Add a display: block; to the #highlightheader. <span> is an inline element!
Hi there try to use this with your css
padding:0px 50px 0px 50px;
Because you use SPAN and span is an inline element. Use display:block in CSS or better p-tag <p> or div with width:100% to center your text.
Edit:
#highlightheader {
text-align:center;
}
#highlightheader span {
background-color:#006600;
color:white;
font-size:30px;
text-align:center;
font-weight:bold;
}
<p id="highlightheader"><span>example text</span></p>
Span is an inline element. This means its width will auto fit to the size of its contents. Instead, change the span to a p tag - a block element. Block elements have a default with of 100% of the parent.
You can see a demo here