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>
Related
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.
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.
I am having trouble make a jsfiddle that reproduces my problem, but I have one that demonstrates the basic layout I am dealing with.
http://jsfiddle.net/LurUM/4/
<div style="width: 73%; float: left;">
<!-- table here -->
</div>
<div style="width: 23%; float: right;">
<!-- sidebar here -->
</div>
I have a table on a page like this one, but it is not the correct width, it is much wider, colliding with the right side bar and going past it. I tried setting the table's width to 100% and going to a fixed table-layout. The width behaved exactly as I wanted it to, but then some of the texts in the cells of the table were spilling out and colliding with text in other columns. What I want is for the cells to become taller and the text to go onto a new line instead of spilling over, but if I understand correctly the fixed layout is preventing this.
Am I understanding the situation correctly? What's the solution? And why did the table have so much extra width to begin with?
Try this code:
<table style="table-layout: fixed; width: 100%">
<tr>
<td style="word-wrap: break-word">
LongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongWord
</td>
</tr>
</table>
The word-wrap: break-word property will wrap long words onto the next line and adjust words so that they don't break mid-word. When used in conjunction with table-layout: fixed; it will prevent the table bounds from overflowing.
If there is other content that must remain aligned with your table then keep the divs, otherwise I would suggest using id names for the tables, and moving all styles to the applicable style sheet. Your tables will then be getting their width setting directly from css instead of overflowing a parent container. I would also suggest that you use only one float, which ever is topmost on your page. This will keep the html cleaner i.e. easier to read and debug.
<div class="leftSide">
<table>html</table>
<p>other stuff that must be aligned with table</p>
</div>
<table id="rightTable">table that will float around other content</table>
<div>other content will continue to float until space is used up</div>
CSS
.leftSide {float: left; width: 40%; margin-right 20px; }
.leftSide table {width: 90%; }
.leftSide p {other css}
The html is easier to read this way, and specificity is used to drill down to the elements within the div, the table will be 90 percent of the width of its parent div and will no longer overflow the container (unless you put some giant image in there). Other CSS can be added including the word-wrap and break-word mentioned in other answers.
w3 has the definitive answers for CSS specificity and other inheritance issues like the one your facing http://www.w3.org/TR/selectors/
I am trying to position a loading image in the buttom right of the page, but everything works fine except margin-bottom.
<div id="preload">
<div align="right" style="margin-bottom:40px; margin-right:50px;">
<img src="http://thc-racing.ucoz.com/design/loading.gif" alt="" />
<br>
<a style="color:#00ff24;"><b>Please wait while the page is loading...
<br>If the website doesn't load within one minute please refresh your page!</b>
</a>
</div>
</div>
Can anybody tell me what or how to make it work?
Thanks
It's the nature of margins vs padding. Since margins sit outside of the element, they won't render unless there's another element following. You could use bottom-padding of 1px on the parent; that should trigger the render.
You should assign position absolute and use bottom and right proprietes.
http://jsfiddle.net/7yrUy/
<div id="preload">
<div align="right" style="position:absolute; bottom:40px; right:50px">
<img src="http://thc-racing.ucoz.com/design/loading.gif" alt="" />
<br><a style="color:#00ff24;"><b>Please wait while the page is loading...<br>If the website doesn't load within one minute please refresh your page!</b></a>
</div>
try absolute position and use bottom/right instead of respective margins:
<img src="http://thc-racing.ucoz.com/design/loading.gif" alt="" style="position: absolute; bottom:40px; right:50px;"/>
Here - http://jsfiddle.net/maximua/SKcvr/
If you want it in the bottom right of the page just use this css:
.yourClass {
position: absolute;
right: 0;
bottom: 0;
}
If you want to change the amount of pixels change 0 to what you want
I had a case where I needed to add display: inline-block.
I can't explain why this worked, but it did! :-) Hope it helps someone.
Even when set display:block to parents and child divs, the margin bottom may not work. The best thing to solve this, after testing with paddings and big margin top values, is using position:relative; for the parent container, and position:absolute; for the child div. The div and other elements have already the display-block for default, so we don‘t need to declare it, as follows:
.parent{
position:relative;
height: 20rem;
/* A big value for height will help you to see the “margin-bottom” with clarity. */
}
.child{
position:absolute;
bottom:0.25rem;
/* or whatever measurement you want: 1rem, 1em, 15px, etc. Be AWARE that it‘s not “margin-bottom” property; it‘s just “bottom” within the absolute position. */
}
In the HTML just consider:
<header class="parent">
<p>This is your main container which has 20rem of height.</p>
<div class="child">
<p>This text is very close to the bottom.</p>
</div>
</header>
In the CSS I consider only the most relevant properties. You can add colors, backgrounds, font-families and so on, which will not affect the layout. I just coded the key properties to create the “effect margin-bottom”.
Example more fancy.
I want that banner image to fit the white container instead of go over the side to the right, but I can't seem to ignore the margin on the left. I've tried all I know; from max-width to setting the margin at 0px but nothing works.
This is the code I currently have:
<p style="text-align: center;" dir="ltr">
<img class="aligncenter size-full wp-image-504" title="bannercommunity"
src="image.png"
alt="" width="960" height="140" />
</p>
Any and all help would be appreciated, thanks!
You can just add width: 100% to the <img>. Note that having the browser resize images is inefficient, so you should avoid it if you can and resize the image to the correct size that you want to use instead.
Although I am against inline styles, I would suggest you to go with this:
CSS Way
.body .wp-image-504.aligncenter { width: 100% !important; }
Screenshot
Remove the width and height values, give the style this way.
Thanks for the help folks, but I discovered that by adding
'position: relative; left: -20px; width: 960px;'
in the styles field did the trick for me. So, setting the position of the image relative to the container, then matching the image width to the width of the container (while adding a minus number in order to nullify the left margin) worked.
In your case, you need to add style="display: inline-block;" to the parent P tag of the image. Or you have to remove style="display: block;" in the "aligncenter" class of this image. Both of them will solve your problem.
Thanks Nick's suggestion, I've revised my answer in comment.