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>
Related
I have two images that I need to be layered side-by-side.
This is what image 1 looks like now, utilizing the following code:
<section id="4" class="pt-sm-3 pt-md-5 pb-2">
<div class="row text-center">
<div class="col-md-1">
</div>
<div class="col-md-3">
<img class="lazyload img-responsive product-images"
style="max-width: 100%; height: auto; margin: 0 auto;"
data-src="#Url.Content("./redImage.png")"
src="#Url.Content("~/Themes/21Rocs/Content/Images/loading(2).gif")" />
</div>
<div class="col-md-3">
<img class="lazyload img-responsive product-images"
style="max-width: 100%; height: auto; margin: 0 auto;"
data-src="#Url.Content("./blueImage.png")"
src="#Url.Content("~/Themes/21Rocs/Content/Images/loading(2).gif")" />
</div>
</div>
</section>
I would like to have the images overlay on top of each other like the following:
How would I go about setting that up in CSS? I tried to use this approach but can't get the layer to fit properly. Please help. Thank You!
You should use negative margins to make these thing
I set a class to col-md-3 called overlay and i styled this on style.css
Hope this works
.overlay {
margin-right: -100px;
}
<link rel = "stylesheet" href="style.css">
<section id="4" class="pt-sm-3 pt-md-5 pb-2">
<div class="row text-center">
<div class="col-md-1">
</div>
<div class="col-md-3 overlay">
<img class="lazyload img-responsive product-images"
style="max-width: 100%; height: auto; ;"
data-src="#Url.Content("./redImage.png")"
src="https://wallpapercave.com/wp/wp3260204.jpg" />
</div>
<div class="col-md-3">
<img class="lazyload img-responsive product-images"
style="max-width: 100%; height: auto; ;"
data-src="#Url.Content("./blueImage.png")"
src="https://cdn.wallpapersafari.com/44/96/ow6U0D.jpeg" />
</div>
</div>
</section>
</section>
Something like adding position: relative; transform: translateX(-50px) translateY(-50px); z-index: -1; as styling to the second image could be a quick fix. (You would probably need to amend the translateX/translateY values to get them where you need them - no other elements on the page will be affected by this transform)
My website has a menubar which is in the main component html and inside this html is also the app-selector of another component:
MainComponent.html
<div style="height:200px">This is my Menubar</div>
<app-test></app-test>
I would like to display 3 boxes in my testComponent.html.
I am using flexLayout: https://github.com/angular/flex-layout
<div fxLayout="column" fxLayoutAlign="space-between none" style="height: 100%">
<div style="background-color: red">
T1
</div>
<div style="background-color: blue">
T2
</div>
<div style="background-color: yellow; height: 200px">
T3
</div>
</div>
The problem is that because there is a menubar, i get a scrolling behaviour but I just want the last box to end at my screen bottom. See here: http://prntscr.com/nhwcbp
How can I achieve this?
https://stackblitz.com/edit/flex-layout-angular-material-xssepa
put below style in style.css:
html, body { height: 100%; width: 100%; margin: 0; }
Remove height: 100vh and make use of flexbox
<div fxLayout="column" style="height:100%">
<div fxLayout="row" fxLayoutAlign="center">
<mat-card fxFlex="50">
<div fxLayout="row">
<div fxFlex="30" class="action-blurb">This is a blurb.</div>
<div fxFlex="30" class="action-blurb" fxFlexOffset="5">This is a blurb.</div>
<div fxFlex="30" class="action-blurb" fxFlexOffset="5">This is a blurb.</div>
</div>
</mat-card>
</div>
<div fxFlex="">
<app-test></app-test>
</div>
</div>
I hope this should do the trick as per this demo
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
I have a row
<div class="row">
</div>
I'm inserting some dynamic content inside this container
with the following snippet
<div class="col-md-2 " style="padding-bottom:2px;margin-left: 1px;" >
<img src="{{imgurl}}" width="40px" height="40px">
</div>
Ex code looks like:
<div class="row">
<div class="col-md-2 " style="padding-bottom:2px;margin-left: 1px;" >
<img src="{{imgurl}}" width="40px" height="40px">
</div>
<div class="col-md-2 " style="padding-bottom:2px;margin-left: 1px;" >
<img src="{{imgurl}}" width="40px" height="40px">
</div>
<div class="col-md-2 " style="padding-bottom:2px;margin-left: 1px;" >
<img src="{{imgurl}}" width="40px" height="40px">
</div>
<div class="col-md-2 " style="padding-bottom:2px;margin-left: 1px;" >
<img src="{{imgurl}}" width="40px" height="40px">
</div>
.......
</div>
here I want the content to display from center,
means
if it has only one image show it in center,
if it has 2 images show those 2 images in center
like wise if I have 6 images it should display in a complete row,
If it has more show them in next row middle
How to do this?
EDIT
My question is if there is only one .col-md-2 show that in center of the page,if there are multiple .col-md-2 then show both at the middle,if there are six then it covers all the page
Use css for center align
text-align:center;
Try to use like this.. You can center any element within its parent.
.center-block() {
display: block;
margin-left: auto;
margin-right: auto;
}
.container {
width: 940px;
}
use
.text-center
its a bootstrap class. have a look at the bootply
Updated
G.L.P Solution Worked for me
.center-block{
display: block;
margin-left: auto;
margin-right: auto;
}
and call this class in col-md-3 div each div u call it like that
so final code is
<div class="row">
<div class="col-md-2 center-block" style="padding-bottom:2px;margin-left: 1px;" >
<img src="{{imgurl}}" width="40px" height="40px">
</div>
<div class="col-md-2 center-block" style="padding-bottom:2px;margin-left: 1px;" >
<img src="{{imgurl}}" width="40px" height="40px">
</div>
<div class="col-md-2 center-block" style="padding-bottom:2px;margin-left: 1px;" >
<img src="{{imgurl}}" width="40px" height="40px">
</div>
<div class="col-md-2 center-block" style="padding-bottom:2px;margin-left: 1px;" >
<img src="{{imgurl}}" width="40px" height="40px">
</div>
i'm sorry man my reputation is low so i cant rate or comment on ur comment.
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>