CSS - Images side by side in Wordpress - html

I have tried using the code provided at http://jsfiddle.net/heera/X3b5g/1/, and when I input my own variable names/images in the fiddle it works fine.
But I then put the CSS code into my child theme style.css and the HTML in my page and the images show one on top of the other, not side by side as I need. I'm not using variables that could be clashing and I'm driving myself insane with this - it is something in Wordpress that stops this from working.
.my-side-by-side {
display: inline-block;
margin-left: auto;
margin-right: auto;
height: 50px;
}
#my-button-centred {
text-align:center;
}
HTML:
<div id="my-button-centred">
<a href=""https://itunes.apple.com/us/app/belize-travel-guide-paid/id792977226?mt=8">
<img class="my-side-by-side" border="0" alt="" src="http://hotguidebelize.com/wp-content/uploads/apple-store.png" alt="" /></a>
<a href="https://play.google.com/store/apps/details?id=com.app_belizeguide.layout">
<img class="my-side-by-side" border="0" alt="" src="http://hotguidebelize.com/wp-content/uploads/google-store.png"/></a>
</div>
If I take out the div id and just use the div class, I do get the buttons side by side, but then they are not centred. What am I doing wrong?

Your code is working perfectly in fiddle: right here
Can you check the source code while testing it, and make sure no other styles overwriting it?,
if so try adding !important in the end of overwrited styles

Whenever you use a child theme you have to be mindful of any CSS from the parent theme. You may have to override some things from the parent theme.
some examples might be
margins
padding
position
display
You will have to inspect the element to see every CSS value that is being set that is not in your child theme and find which one(s) are causing it to display improperly.

Related

I need to nullify (not to counter) effect of parent CSS file

First of all, I am working on "rtl" directional web pages.
And, I am using bootstrap component called "breadcrumbs", in my shop.html template. Therefore, I want my breadcrumbs in right to left direction.
<div class="breadcrumb">
<div class="container" align="right">
<a class="breadcrumb-item" href="{% url 'bookrepo:home' %}">صفحہ اول</a>
<span class="breadcrumb-item active"> خریداری </span>
</div>
</div>
I have made my own shop.css file for cutomized styling. Now, issue is that though I have done align:"right" in my template.
But parent file of bootstrap overriding its placement to left. By (https://maxcdn.bootstrapcdn.com/bootstrap/scss/_breadcrumb.scss):
.breadcrumb-item {
float: left;
}
So, it is like that now:
Where I want it to float:right. So what I did in my shop.css is that:
.breadcrumb-item {
float: right;
}
But it didn't go according to plan. It is ruining orientation of breadcrumb. Have a look at it:
So, it means I don't want it to float in neither direction. When I un-apply both it works fine.
Have a look at it:
Obviously, I can erase float:right from my shop.css. So, now guide me to the way to nullify bootstrap's css effect which is float:left.
you need to clear the float
.breadcrumb-item {
clear:both;
float: right;
}

Trouble using addiontal css in wordpress to center a div class

I am having issues centering a div class in the footer of my WordPress website (using a CPO theme).
I want to call the variable I created in HTML and format it using the additional CSS in the theme of my WordPress site.
After creating div class example I want to use auto margins to center the logo using CSS
#example {
margin-left: auto ;
margin-right: auto ;
}
<div class="example">
<div class="ctwg-social">
<a class="ctwg-social-link ctwg-social-facebook" href="https://www.facebook.com/example" title="Facebook"><span class="ctwg-social-icon"></span></a>
</div>
</div>
I've also tried calling <class id="example"> but that didnt work either.
To center an image: make it into block of its own and apply the margin properties to it. Add this to your css:
display: block;
playing with the max-width: #%; worked for me, thank you for the answer Andrew!

img in <div> not floating right

I have a div that is width 100%: Inside that div I am trying to float the image to the right.
<div class="card-panel valign-wrapper "
style="height: 50px; width: 100%; position: fixed; top: 290px;
background: white; z-index:3; ">
<h5 class="valign" class="right-align">Beer Menu</h5>
<img id = "moreInfo" style="vertical-align: middle; float: right" src="img/more.png"
height="30" width="30">
</div>
I have been playing with chrome inspect element trying a bunch of different ways to float the image to the right end of the screen and leave the text to the left but not working.
Here is an image with surrounding code:
Couple suggestions:
Use a separate CSS file. It will be easier to keep track of your CSS. Different rules might be taking precedence and it will be more clear if you use a separate file. It will also be easier to debug your CSS issue.
I am not sure why you have your with Beer Menu as a part of the class "right-align". Arent you aligning this left and trying to align the image of the three dots right? This is a little confusing.
You can always try the "right:0px;" CSS rule. I cant help you code something that works perfectly without being able to try it myself but that could solve your problem. You could also give "position:absolute;" a shot
Just be sure to clean up your CSS and it will all become easier.
EDIT:
Its not the best but adding this to your image worked for me:
right: 0px;
top: 10px;
position: absolute;
by just looking at that screenshot, you might try to give your img a position of relative. that generally fixes float problems. but don't forget to clearfix your parent element so the div doesn't collapse on itself.
I would also recommend not positioning everything as fixed, usually run into responsive issues with that unless initially positioned by JS, if so, my bad.
but with float issues, its usually positioning that screws it up.
good luck!
This is what I did, and it worked in my browser:
<h5 class="valign right-align" style="float:left">Beer Menu</h5>
While rest of the code remains the same.
Try putting them in a table and align the column content to right. Something like
<table style="width">
<tr>
<td><h5>Beer Menu</h5></td>
<td align="right"><img /></td>
</tr>

Hyperlinks not working on images

I have uploaded my page here so that you can see clearly what I am referring to:
http://www.emmasteed.co.uk/new/
The menu section works fine it is the larger button icons at the bottom: Portfolio, Get in touch and About me.
I have hyperlinked these images as you will see in the code however nothing happens when I hover over them or try to click. What am I doing wrong? This is driving me crazy!
<div class="largemenubutton"><img src="images/portfolio.png" alt="Portfolio" border="0" /></div>
<div class="largemenubutton"><img src="images/getintouch.png" alt="Contact me!" border="0" /></div>
<div class="largemenubutton"><img src="images/aboutme.png" alt="About" border="0" /></div>
.largemenubutton {
width:283px;
height:259px;
margin-top:20px;
float:left;
display:block;
text-align:center;
}
Remove the z-index -1 there:
.mainimage {
z-index: -1;
}
For keeping the drop shadow do the following:
<div class="header">
<div class="container">
remove the mainhome width and apply to the container in the css:
.container {
width: 850px;
}
Also use that container for wrapping the same way the main content for the site.
and then for the drop shadow (customize as you please):
.header {
box-shadow: 0 0 0 10px black;
}
This is the fiddle that represents more or less this: http://jsfiddle.net/9q7PX/
Two possible solutions come to mind:
1) Wrap the img element in a div, and wrap that div with your a element.
2) Nix the img element from your DOM, and instead make it a background-image of a div (in CSS). Then wrap that div with your a element.
I have finally managed to figure a way round this. I would like to thank everyone for their answers and advice as without this I probably would never have found this solution. The z-index setting on the previous div was the problem I had to get round.
Basically i created another div tag to contain my large menu buttons and placed this outside of the previous div which held my slider image which was set at z-index -1 as i wanted my image to sit behind a drop shadow above. This then allowed the links on the images to work.
Hope this makes sense and helps anyone else who has this problem.

HTML div with a background

I'm making a website (Although I know nothing about HTML & Photoshop).
Its quite a challenge for me and I'm pretty happy with what I got so far.
Now I want to make boxes / floating squares on the site.
So I wanted to do this by using a the div but I have no clue how :#
<div id="div1" style="background-image: url(../bg_content_middle.png);height: 129px">
HELLO IS THIS A BOX?
</div>
I have this in my style.css:
#div1 {Background: url("bg_content_middle.png");}
bg_content_middle.png is a 1 pixel high "bar" which I want between top and bottom.
And thats not even working :(
Please help me.
You're mixing in-line CSS with external CSS rules. The inline style with ../bg_content_middle.png is overriding the other background image url of bg_content_middle.png. You only need to define it once.
In this case you could go for a pure CSS solution:
<div id="div1">HELLO I AM A BOX ^_^</div>
#div1 {
background-color: #900;
border: #f33 1px solid;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}
Please don't number your divs though, call them something relevant like <div id="content">.
Hope that helps
1) Make the B in background lower-case
2) Is the image in the same directory as style.css? If not, you'll have to link to the correct directory.
well, if all you want your div to have a backround, you can have something as simple as this example from this tutorial:
<body>
<div style="background: green">
<h5 >SEARCH LINKS</h5>
<a target="_blank" href="http://www.google.com">Google</a>
</div>
</body>
First of all, you only need to define this particular style once, but inline styles (styles within the tag's <style> attribute.) take precedence. You should remove the inline style in this case, since it's redundant and double check your image paths just in case. Remember that css paths can be document relative, in which case they refer to the location of the css file, and are not relative to the HTML page.
If it's one pixel high you might want to set the repeat property as well. put this in the element's CSS:
background-repeat: repeat-y;
And set a width equivalent to the image width.
You need to set the position : absolute in your css. From there you can use top, left and height to position and size your tags