I want that every second line is grey. It works almost, but on the left and the right side, there are a few Pixels white.
Does anybody knows why?
HTML
<div class="recent">
<h1>Recent Downloads:</h1>
<div class="row">test</div>
<div class="row">test</div>
<div class="row">test</div>
<div class="row">test</div>
<div class="row">test</div>
</div>
CSS
.recent {
position: absolute;
bottom: 0;
right: 0;
height: 30%;
width: 35%;
background-color: white;
-webkit-border-top-left-radius: 8px;
-moz-border-radius-topleft: 8px;
border-top-left-radius: 8px;
border-style: solid;
border-color: white;
}
.recent h1 {
font-size: 16px;
font-weight: normal;
margin-left: 10px;
margin-top: 10px;
margin-bottom: 20px;
}
.row {
background-color: white;
}
.row:nth-child(odd) {
background: #e0e0e0;
}
http://jsfiddle.net/C8drX/4/
You should remove borders from .recent:
.recent {
border: 0px;
}
and maybe add some padding to .row:
.row {
padding: 3px;
}
Here is a JSFiddle
The height of the .recent div is to small. The way I see it, you can do one of four things:
Remove the height property from .recent
increase the height property on .recent
remove a child div from the .recent-div
Like Wil93 sugested, you can remove borders from .recent and add padding to .row
Here is a fiddle where I just removed the height all together:
(/*height:30%;*/)
JSFiddle
It is because you have set
border-color: white;
in
.recent {
position: absolute;
bottom: 0;
right: 0;
height: 30%;
width: 35%;
background-color: white;
-webkit-border-top-left-radius: 8px;
-moz-border-radius-topleft: 8px;
border-top-left-radius: 8px;
border-style: solid;
border-color: white;
}
Check Fiddle you will understand
You can simply remove it using
border:none;
You should also use this, replacing the current css rules:
background-color: white;
-webkit-border-top-left-radius: 8px;
-moz-border-radius-topleft: 8px;
border-top-left-radius: 8px;
}
Your .recent div has a border from your user agent stylesheet because you're setting a border-style. Set it to 0 and use padding in your .row divs instead.
Related
Apologies in advance this is my first post on SO so if I'm not giving what you need I'll try and figure it out. To give context: this is for the css of an .epub if that helps.
I am trying to place an image on the top corner of the border of multiple specific divs. I'm currently using :before, however if the div in question is not the first on the page, the icon isn't actually a part of the border, instead it is just at the top left corner of the page.
I made this JSFiddle to demonstrate what I'm trying to achieve, but it's not quite there. The icon is in the top corner of the div but that's not where I want it, I want it in the top corner of the border. If I remove position:absolute and position:relative from parent and child div then the icon goes to the top corner of the page.
Alternatively to JSFiddle:
.other {
margin-top: 20px;
margin-left: 20px;
margin-right: 20px;
margin-bottom: 20px;
border: 10px solid transparent;
padding-left: 20px;
padding-right: 20px;
padding-top: 10px;
padding-bottom: 20px;
}
.info {
margin-top: 20px;
margin-left: 20px;
margin-right: 20px;
margin-bottom: 20px;
border: 10px solid transparent;
padding-left: 20px;
padding-right: 20px;
padding-top: 10px;
padding-bottom: 20px;
border-image: url(https://i.ibb.co/YDRL4pQ/box.png) 30% round;
position:relative;
}
.info:before {
content: '';
height: 50px;
width: 50px;
position: absolute;
top: 5px;
left: 5px;
background:url(https://i.ibb.co/S5zFz5r/dig-deeper.png);
}
Unrelated text further up the page
<div class="other">
unrelated div further up the page
</div>
<div class="info">div with text for icon</div>
Hopefully I've provided enough info and context! I've searched the site for similar subjects and nothing seems to be quite what I'm looking for, as my end code would look like: . The radius in the bottom corner would be good but not necessary.
Jus use propertys top and left in info:before to move it over the border. See example .... ;-)
.other {
margin-top: 20px;
margin-left: 20px;
margin-right: 20px;
margin-bottom: 20px;
border: 10px solid transparent;
padding-left: 20px;
padding-right: 20px;
padding-top: 10px;
padding-bottom: 20px;
}
.info {
margin-top: 20px;
margin-left: 20px;
margin-right: 20px;
margin-bottom: 20px;
border: 10px solid transparent;
padding-left: 20px;
padding-right: 20px;
padding-top: 10px;
padding-bottom: 20px;
border-image: url(https://i.ibb.co/YDRL4pQ/box.png) 30% round;
position: relative;
}
.info:before {
content: '';
height: 50px;
width: 50px;
position: absolute;
/* use this values for positioning
negative values move it over the border */
top: -10px;
left: -10px;
background: url(https://i.ibb.co/S5zFz5r/dig-deeper.png);
}
<div class="other">
unrelated div further up the page
</div>
<div class="info">div with text for icon</div>
In my nav, I am separating my section with some text and a horizontal line. For each section this repeats. I am doing this as shown below:
.navSectionHeader {
font-size: 1em;
color: #fff;
margin-left: 5px;
margin-bottom: 10px;
font-family: "Roboto";
font-weight: 700 !important;
border-bottom: 2px solid #6c6c6c;
}
/*.navSectionHeader::after {
content: ' ';
display: block;
border: 2px solid;
border-color: #6c6c6c;
margin-left: 0px !important;
}*/
The issue is, my text is now pretty much stuck to the left of the parent div. It should be with some margin to the left while keeping the bottom border start from 0px to the left. When I try to move it with margin-left: 5px; it ends up moving the border-bottom as well. I tried this with ::after as shown in the commented bit, adding !important to the end but nothing changes. Am I doing this the wrong way? Sorry, I'm a front-end noob!
Edit: The section header is in a <span> if it makes a difference.
Use padding instead of margin.
.navSectionHeader {
padding-left: 5px;
}
An example to see difference,
div {
display: inline-block;
width: 100px;
height: 20px;
border-bottom: 1px solid black;
background: red;
color: white;
}
.padding {
padding-left: 5px;
}
.margin {
margin-left: 5px;
}
<div class="margin">margin</div><br>
<div class="padding">padding</div>
I'm trying to stick an image to div block in CSS. I couldn't move 'image' using margin... What can I do? Advice is appreciated. Thank you.
What I want to implement
.bottalk {
background-color: white;
height: 100px;
width: 200px;
margin-top: 20px;
margin-left: 280px;
border-radius: 1.5em;
}
.bottalk p {
padding-top: 5px;
padding-left: 15px;
}
.bot .bottalkwhite {
height: 40px;
margin-left: 250px;
margin-top: 0px;
}
.bottalk button {
background-color: yellow;
color: purple;
padding: 5px 5px;
border: none;
margin-left: 50px;
box-shadow: 3px 3px 2px #666666;
}
<div class="col-6 bot">
<div class="bottalk">
<p>Ready to get started?</p>
<button>Let's talk</button>
</div>
<img src="./img/bottalk.png" alt="bottalk" class="bottalkwhite" />
</div> </div>
Current view
Please ignore the background color: I snipped it from the second image!
I have moved the position of the image inside the div with class bottalk, then I absolutely positioned the image, then all you need to do is to set the top and left position based on the image, (Cropped the image online so please ignore the quality of the output), So now you can position this anywhere. Also I have added background-color:pink to the body to show the image, please ignore this too.
So to summarize. I set the parent div element with class bottalk as position:relative and the child image with class bottalkwhite to position:absolute so that it can be positioned inside the parent. Position absolute will take the position relative to the immediate parent with position:relative, I hope I made my summary clear.
body{
background-color:pink;
}
.bottalk {
position: relative;
background-color: white;
height: 100px;
width: 200px;
margin-top: 20px;
margin-left: 280px;
border-radius: 1.5em;
}
.bottalk p {
padding-top: 5px;
padding-left: 15px;
}
.bot .bottalkwhite {
height: 40px;
position: absolute;
top: 80%;
left: -30px;
}
.bottalk button {
background-color: yellow;
color: purple;
padding: 5px 5px;
border: none;
margin-left: 50px;
box-shadow: 3px 3px 2px #666666;
}
<div class="col-6 bot">
<div class="bottalk">
<p>Ready to get started?</p>
<button>Let's talk</button>
<img src="https://i.stack.imgur.com/7i9bY.gif" alt="bottalk" class="bottalkwhite" />
</div>
</div> </div>
You can use the position: relative; and adjust the values of the top and left properties， like the follow code：
.bottalk {
position: relative;
left: -5px;
top: 10px;
background-color: white;
height: 100px;
width: 200px;
margin-top: 20px;
margin-left: 280px;
border-radius: 1.5em;
}
.bottalk p {
padding-top: 5px;
padding-left: 15px;
}
.bot .bottalkwhite {
height: 40px;
margin-left: 250px;
margin-top: 0px;
}
.bottalk button {
background-color: yellow;
color: purple;
padding: 5px 5px;
border: none;
margin-left: 50px;
box-shadow: 3px 3px 2px #666666;
}
<div class="col-6 bot">
<div class="bottalk">
<p>Ready to get started?</p>
<button>Let's talk</button>
</div>
<img src="./img/bottalk.png" alt="bottalk" class="bottalkwhite" />
</div> </div>
In order to put a image into a exact position relative to its ancestor, you can set position property to absolute then using left-right-top-bottom properties, you can determine its exact position. like this:
.bottalkwhite{
position: absolute;
left: 250px;
top: 0px;
}
though in such a particular css rule definition using id selector instead of class selector sounds more appropriate.
Use position:relative on the wrapper element of the image and position the image via position: absolute, left: 0 and bottom: 0 in the bottom-left corner. Then adjust it's position via transform: translate, to get the desired effect.
Note: I moved the image into the div.botttalk container to position it relative to its parent.
Like this:
body {
background: #715886;
font-family: Open Sans, Arial, sans-serif;
}
.bottalk {
background-color: white;
width: 200px;
margin-top: 20px;
margin-left: 100px;
border-radius: 8px;
padding: 24px 16px;
position: relative;
text-align: center;
color: #715886;
}
.bottalk .bottalkwhite {
position: absolute;
left: 0;
bottom: 0;
height: 40px;
color: white;
transform: translate(-100%, 100%) translate(16px, -16px);
}
.bottalk h4 {
line-height: 1;
margin: 0 0 24px 0;
}
.bottalk button {
cursor: pointer;
color: #715886;
display: inline-block;
background-color: #fbcb33;
font-weight: bold;
padding: 0 32px;
border: none;
line-height: 40px;
font-size: 14px;
box-shadow: 0px 1px 2px #666666;
}
<div class="col-6 bot">
<div class="bottalk">
<h4>Ready to get started?</h4>
<button>Let's talk</button>
<img src="https://i.imgur.com/oeUdlld.png" alt="bottalk" class="bottalkwhite" />
</div>
</div>
The problem is no matter what is inside chat_ttc it will always be 300px.
Snippet:
.chat_ttc {
max-width: 300px;
word-break: break-word;
background: #e5e5e5;
margin-left: 70px;
position: relative;
border-radius: 15px;
border-bottom-left-radius: 0px;
padding: 4px;
padding-left: 6px;
letter-spacing: 0.6;
}
<div class="froma_tc">
<div class="chat_ttc">D</div>
</div>
yaa its because div is block element and it takes 100% of the width
as you have given max-width as 300px width will be always 300px
if you want to take some valid width make div as inline-block
check this snippet
.chat_ttc {
max-width: 300px;
display:inline-block;
word-break: break-word;
background: #e5e5e5;
margin-left: 70px;
position: relative;
border-radius: 15px;
border-bottom-left-radius: 0px;
padding: 4px;
padding-left: 6px;
letter-spacing: 0.6;
}
<div class="froma_tc">
<div class="chat_ttc">D</div>
</div>
Hope this helps
I am using CSS rounded corners for firefox and I have the following problem with content boundaries:
Code
<html>
<head>
<style>
#outter {
width: 200px;
margin: auto;
text-align: center;
border: 1px solid #333;
-moz-border-radius: 15px;
}
#inner {
background: red;
opacity: 0.5;
}
</style>
</head>
<body>
<div id="outter">
<div id="inner">text</div>
</div>
</body>
</html>
Effect
alt text http://img256.imageshack.us/img256/2108/testew.png
I can avoid this problem by defining -moz-border-radius for each outter's child. There is any other way I am missing?
Edit
A harder test with multiple inner divs with different background-color for each one:
<div id="outter">
<div id="inner1" style="background: blue">text</div>
<div id="inner2" style="background: gray">text</div>
...
<div id="innerN" style="background: yellow">text</div>
</div>
You can also do this:
#outter {
width: 200px;
margin: auto;
text-align: center;
border: 1px solid #333;
-moz-border-radius: 15px;
background: red;
}
#inner {
opacity: 0.5;
}
Moving the background to the rounded parent will render correctly, see here for an example: http://jsfiddle.net/mE8En/ (only works in firefox!) add the webkit border radius if you want to support other webkit based browsers as well, like this:
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
Update for edit: To handle the inner divs in firefox subtract a pixel on the inner div to compensate for the border, resulting in this:
#outter {
width: 200px;
margin: auto;
text-align: center;
border: 1px solid #333;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
background: red;
}
#outter > div:first-child {
-moz-border-radius-topleft: 14px;
-moz-border-radius-topright: 14px;
-webkit-border-top-left-radius: 14px;
-webkit-border-top-right-radius: 14px;
}
#outter > div:last-child {
-moz-border-radius-bottomleft: 14px;
-moz-border-radius-bottomright: 14px;
-webkit-border-bottom-left-radius: 14px;
-webkit-border-bottom-right-radius: 14px;
}
#inner {
opacity: 0.5;
}
Note: the radii aren't perfect on the inner divs in webkit, adjust as desired...this is because the rendering isn't pixel perfect between browsers.
Also, if you want these rounded corners in IE without images, check out DDRoundies.