<img src="logo.jpg">
<div class="fadehover">
<div class="a" ><img src="kulte_gray.jpg" /></div>
<div class="b" ><img src="kulte.jpg" /></div>
</div>
Actually I want to center the image exactly above the div container. Ok i tried with a simple <center> tag it works but im not sure if this is the smart solution for all browsers. Any ideas? smthing like align it over the div?
<style>
#logo {
display: block;
margin: 0 auto;
}
</style>
↑ This will center the #logo within its parent container.
<div class="fadehover">
<img src="logo.jpg" id="logo">
<div class="a" ><img src="kulte_gray.jpg" /></div>
<div class="b" ><img src="kulte.jpg" /></div>
</div>
OR:
<!-- If you cannot put #logo into .fadehover
for some reason -->
<div id="same-width-as-fadehover">
<img src="logo.jpg" id="logo">
</div>
<div class="fadehover">
<div class="a" ><img src="kulte_gray.jpg" /></div>
<div class="b" ><img src="kulte.jpg" /></div>
</div>
Related
Would you help me please make appear pictures in one column? It needs to be full width with no space between those images.
Thanks in advance.
What I want it to look like
What I have
Code:
img,
.image {
display: block;
height: 350px;
margin: 0;
width: 50%;
}
<section class="main">
<div class="container">
<div class="full-width">
<div class="vibe_editor clearfix">
<div class="v_module v_column col-md-12 fullwidth v_first">
<style>
<div class="v_module v_text_block about_us">
<p>
<a href="http://www.kurzon.cz/wp-content/uploads/2015/10/homepage-o-nas.jpg?189db0">
<img class="alignnone size-big wp-image-3125" width="768" height="282" alt="o-nas1" src="http://www.kurzon.cz/wp-content/uploads/2015/10/homepage-o-nas-768x282.jpg?189db0">
</a>
<a href="http://www.kurzon.cz/wp-content/uploads/2015/10/2048x1536-orange-red-solid-color-background.jpg?189db0">
</p>
</div>
</div>
<div class="v_module v_column col-md-12 fullwidth v_first">
</div>
</div>
</div>
</section>
href="http://www.kurzon.cz/wp-content/uploads/2015/10/homepage-o-nas.jpg?189db0"> <img class="alignnone size-big wp-image-3125" width="768" height="282" alt="o-nas1" src="http://www.kurzon.cz/wp-content/uploads/2015/10/homepage-o-nas-768x282.jpg?189db0"> </a> <a href="http://www.kurzon.cz/wp-content/uploads/2015/10/2048x1536-orange-red-solid-color-background.jpg?189db0"> </p> </div> </div> <div class="v_module v_column col-md-12 fullwidth v_first"> </div> </div> </div> </section>
The p tag has padding by default remove it?
Also remove unwanted <style> tag
Im trying to make an image header with a full width , but the image always take the container width and not 100% width (even if i put the div outside the container). i have tried almost everything and nothing worked and this answers here didnt help. it may be done if i change the .container width in a custom css but this will ruin the entire site design.
code:
<body style="background-color: #eee">
<div class='container-fluid'>
<div class="row" style='width: 100%'>
<div class='' style='height: 10px; margin: 0 0;padding: 0 0 ; width:100%'>
<img class='' src="images/shape1.png" style='height: 100%; width:100%; margin-bottom: 13px'>
</div>
</div>
<div class='row text-center rowStyle' >
<img id='leftLogo' src="images/kslogo.png">
<img id='rightLogo' src="images/kglogo.png">
<div class='searchContainer'>
<table class='table-responsive searchTable'>
<tr>
<td width='15%'>
<img class='searchButton' src="images/btn-search.png" >
</td>
<td width='85%'>
<input type='text' class="form-control searchInput">
</td>
</tr>
</table>
</div>
<div class="row " style="margin-top: 40px; margin-left: auto !important;margin-right: auto !important ; width: 76%" >
<div class="text-center col-md-4 items" >
<img src='images/btnlog-in.png' class='buttonsLocation'>
<img class="" src="images/Aricles03.png" alt="Generic placeholder image">
</div><!-- /.col-lg-4 -->
<div class="text-center col-md-4 items" >
<img src='images/btnlog-in.png' class='buttonsLocation'>
<img class="" src="images/Aricles01.png" alt="Generic placeholder image">
</div><!-- /.col-lg-4 -->
<div class=" text-center col-md-4 items" style=' position: relative ;'>
<img src='images/btnlog-in.png' class='buttonsLocation'>
<img class="" src="images/Aricles02.png" style=''>
</div><!-- /.col-lg-4 -->
</div><!-- /.row -->
</div>
</div>
<div style='height: 80px; margin-top: 84px;padding: 0 0 ; width:100%; background-color: #e3e3e3;'>
</div>
</body>
EDIT: added full code + screenshot
Im using bootstrap3
any help would be appreciated,
Thanks
May it be, that you forget to close the "<div class='container-fluid'>" tag?
the class .container-fluid has the left and right padding set to 15px. So if you don't need that just override it.
Try:
<div class="container-fluid">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12" style="height: 10px; padding-left: 0; padding-right: 0;">
<img src="images/shape1.png" style="height: 100%; width:100%; margin-bottom: 13px">
</div>
</div>
Am trying to middle a set of icons to the middle of screen, below is the code:
<div data-role="content" class="ui-content ui-body-a" style="vertical-align: middle" data-theme="a">
<fieldset class="ui-grid-a icon-set" style="vertical-align: middle" data-theme="b">
<div class="ui-block-a center" style="vertical-align: middle">
<a href="test">
<div>
<img src="css/images/test5.png" style="width: 80px;height: 80px"/>
</div>
<div>
Login
</div>
</a>
</div>
<div class="ui-block-b center">
<a href="#settings" data-transition='slide'>
<div> <img src="css/images/test4.png" style="width: 80px;height: 80px"/></div>
<div>Settings</div>
</a>
</div>
<div class="ui-block-a center">
<a href="test">
<div> <img src="css/images/test2.png" style="width: 80px;height: 80px"/></div>
<div>Aboutus</div>
</a>
</div>
<div class="ui-block-b center">
<a href="test">
<div> <img src="css/images/test1.png" style="width: 80px;height: 80px"/></div>
<div>Contact Us</div>
</a>
</div>
</fieldset>
</div>
vertical-align does not work as most people would expect - this property is only available for tables or elements that have style of table-cell or similar (http://www.w3schools.com/cssref/pr_class_display.asp)
you will need to give the DIV element a default size for this to work as well... check this JSBin example and this StackOverflow answer for more insight
Do this:
<div data-role="content" class="ui-content ui-body-a" style="text-align: center;" data-theme="a">
and then this for any div you want to center:
style="margin:0 auto;"
How to make red banner ad shown in the top of : http://forum.creditcardpaymentgateways.in/index.php same as shown in this site: http://www.creditcardpaymentgateways.in ?
I've tried to use this code but not working out:
<div id="anu-utility2" WIDTH="525" style="margin:auto auto">
<img style="display:block;width:529px;margin:auto auto" WIDTH="529" HEIGHT="75" src="http://www.creditcardpaymentgateways.in/images/banners/celebrationoffer4.jpg" title="Click here" /></div>
I want to remove the light colored background rectangle behind the red banner(used in the forum):
The forum is in PHPBB and Site is in Joomla.
you should move anu-utility2 to into rt-utility3
Your Example Source Code:
<div id="rt-utility" class="feature-shadows-light">
<div id="rt-utility2">
<div id="rt-utility3">
**<div id="anu-utility2" width="525" style="margin: auto auto">
<a href="http://www.creditcardpaymentgateways.in/pc-tech-support-payment-gateway-new-offer-from-mumbai-based-comapny.html">
<img style="display: block; width: 529px; margin: auto auto" width="529" height="75"
src="http://www.creditcardpaymentgateways.in/images/banners/celebrationoffer4.jpg"
title="Click here"></a></div>**
<div class="rt-grid-6 rt-alpha">
</div>
<div class="rt-grid-2 rt-omega">
</div>
<div class="clear">
</div>
</div>
</div>
</div>
Do you want same as the below image.
You need the gradient image and the below code to achieve this
css:
img
{
border:none;
}
#bannerbg
{
background:url(gradient-div.png) repeat-x;
background-color:#FFFFFF;
height:75px;
}
HTML:
<div id="bannerbg">
<div id="anu-utility2" WIDTH="525" style="margin:auto auto">
<img style="display:block;width:529px;margin:auto auto" WIDTH="529" HEIGHT="75" src="http://www.creditcardpaymentgateways.in/images/banners/celebrationoffer4.jpg" title="Click here" /></div>
</div>
When i display below, the text 'Here is some text' is below the image - i want it to show to the right of the image?
<div style="width:50px;">
<img src="http://assets.devx.com/MS_Azure/azuremcau.jpg" alt="blah" width="70" height="70" />
</div>
<div style="width:150px;">
<h2>Here is some text</h2>
</div>
<div style="width:50px; display: inline-block;">
<img src="http://assets.devx.com/MS_Azure/azuremcau.jpg" alt="blah" width="70" height="70" />
</div>
<div style="width:150px; display: inline-block">
<h2>Here is some text</h2>
</div>
changed float:left to display:inline-block. This is a better solution because it doesn't remove items from the document flow. Make sure you specify a width for every one though.
<div style="float: left; margin-right: 10px;">
<img src="http://assets.devx.com/MS_Azure/azuremcau.jpg" alt="blah" width="70" height="70" />
</div>
<div style="width: 300px;">
<h2>Here is some text</h2>
</div>
<br style="clear: both;" />
This should work.