I am currently trying to design some Call-to-action buttons, and I have made a dynamic width button, which is built by a left and right container and then a middle container holding all the text.
The picture in the middle is a 50 px and repeating.
My problem is, that when the picture is <=50px, the green colours in the background picture appears correct. When it is >50px (and the background-picture is repeating) the green color appears to change.
Does anyone know what I have done wrong?
Here is two pictures showing the problem:
The blurred one: http://d.pr/i/fz2b
The correct one: http://d.pr/i/cjgp
EDIT:
I am doing it as follows:
<a href="#">
<div class="left"></div>
<div class="middle">Link text here</div>
<div class="right"></div>
</a>
My backgrounds in .left and .right aren't repeating. My background-picture is only repeating on overflow - and when it overflows the picture changes it's green color. :-)
you have not done any thing wrong. It is because Image stretches it blur's rather try using png image in a div with proper background color as you desire
Here's an example
Fiddle
Heres a simple html
<div class="cont">
<img src="http://www.iconsdb.com/icons/preview/moth-green/right-circular-xxl.png" class="img"/>
Let me know if you have any doubts
Related
I am a bit new to Angular Material and how to correctly lay things out.
What I am trying to do is have an image at the top of my page that is always the size of the viewable area. Something similar to https://www.rent.com. Notice the top image is exactly the size of the viewable area, no matter if I resize the screen.
Here is what I've tried so far:
html
<div class="container">
<mat-card>
<img mat-card-image src="../../assets/download.jpg" alt="Download image">
</mat-card>
</div>
css
.container {
height: 100vh;
}
This does correctly make the image the same size as the viewable area, but it does that by cutting off the bottom of the image. I would rather have the image stretch/shrink instead of just being cut off, but I am not quite sure how to achieve that.
I'm making a box based layout and I'm having issues with the gutters in bootstrap 3. Since they've been changed to be padded since bootstrap 2, every time I want to add padding to a box it completely destroys the gutter. I can't seem to find a way of remedying the problem.
I use a .box class to highlight the box from it's gutter and give them background colours and images. I want padding inside the box for the text so it's not right on the edge of the box walls, so I made a .box-inner class, but I can't just apply padding to it :/
<div class="col-md-12">
<div class="row">
<div class="col-md-6">
<div class="box">
<div class="box-inner">
<h1>Test2</h1>
</div>
</div>
</div>
</div>
</div>
Any help would be very appreciated! I've been banging my head against the wall for hours.
Fiddle here, I highlighted the problem areas with a comment:
http://jsfiddle.net/kbj8dd0e/6/
Sure you can add padding. Just add it to the .box.
Have a look at this:
http://jsfiddle.net/kbj8dd0e/5/
(note that I changed the col-md to col-xs to make it show better in that small fiddle pane, but the same should work for any col class.)
All I did was move the padding to the .box class to be able to remove the redundant .box-inner. I also removed all your instances of <div class="row"><div class="col-md-12">...</div></div> as this just adds markup and serves no purpose whatsoever.
Or am I missing something here?
I want to frame a div surrounding divs having higher z-index.
(The framed div will contain a slideshow with elements, animated and with wierd margins, and the masking divs are supposed to hide the the texts being animated from the side.)
I'm thinking something like:
<div class="fullwith mask"></div>
<div class="mask leftpadding"></div>
<div id="slideshow" style="width:640px;height:405px;"></div>
<div class="mask rightpadding"></div>
<div class="fullwith mask"></div>
I've created this fiddle that by no means work, please fill the gap or tell me if I'm off the mark here.
I have a div (class="sidebar") that I want to display on the right hand side of my content area. I've set the content area as the container, then placed the sidebar inside that, specified height, width, background color and floated it right.
It's displaying in firebug, but not appearing on the screen.
I'm currently learning CSS so any tips/advice on what I'm missing are welcome.
Any advice available will be gratefully received.
Thanks in advance,
Tom Perkins
You can view my code here:
http://jsfiddle.net/tomperkins/v3yqf/
Because HTML elements have transparent background color by default. Giving the element a background color and you can see it immediately:
.sidebar {
background: orange;
}
See: http://jsfiddle.net/v3yqf/3/ ( http://jsfiddle.net/v3yqf/3/embedded/result if your screen is narrow)
Try placing your sidebar div before your content div. Also, you will see it better if you specify background: green instead of color: green ;)
Edit:
So, use
<div class="sidebar"></div>
<div class="content"></div>
instead of
<div class="content"></div>
<div class="sidebar"></div>
I have a div (sub area of page with scroll bar) that has some text, an image and a table.
The background color defined for the div -
<div style="background-color: white">
does not fill the area to the top, the top arrow of the scroll bar is above the area filled with the background color (by about the width of one line). Adding a br at the top fixes it, but moves stuff too far down.
I read two potential solutions. One suggested I set a fixed height for the div. That would require changing the height by trial-and-error every time I changed the content of the page. Next. The other suggestion said to add this at the end, just before the /div -
</div>
<div class="clear"></div>
</div>
but that has no effect.
There are several different pages that get loaded into the scrolling area, using SSI's, and some of those included pages use divs, and some of those are floats and some absolutes.
Thanks for any help.
EDIT
Adding the following, which I didn't realize was needed with the "clear", still doesn't work
<style type="text/css">
.clear {
clear:both;
height:1px;
overflow:hidden;}
</style>
Ad
I just wrote this up and it seems to keep the background color no matter how much content you put in it...
<div style='background:#abc;overflow:auto;'>
<p>a bunch of content goes here</p>
</div>
you can, of course, set a height to that but more likely it would be in some div wrapper...