I am trying to make a site from a PSD document but I have no idea how to create this shape in my nav.
Is it a big <div> with negative margin-top and some border-radius?
Also, how can this design be achieved on a page using bootstrap? Like the div is coming from outside the center area and the "chat bubble effect" from the client photo.
For first question
border-bottom-left-radius: value;
border-bottom-right-radius: value;
On the second question - the question is not quite clear.
for the bottom radius you can try this code:
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
You can use the properties border-bottom-left-radius: value; and border-bottom-right-radius: value; to create a rounded bottom in an element. Below is an example similar to the screenshot in your post
.div-container {
font-size:12px;
width:220px;
padding:5px 30px;
background: #aaa;
color: #222;
border-bottom-left-radius:50px;
border-bottom-right-radius:50px;
}
.div-right{
padding:5px 30px 6px 30px;
left:40px;
display:inline;
position:relative;
background:#4286f4;
color:white;
border-bottom-left-radius:50px;
border-bottom-right-radius:50px;
}
<div class = "div-container">
916.543.1543
<div class = "div-right">
GET A FREE QUOTE
</div>
</div>
Related
When I use the border-radius property on modal divs (divs that pop up over my normal content), the four corners do not all round themselves. One or two corners will round, but not all four.
Here is a link to the image, I can't yet post images on Stack Overflow (Note the top left corner in the image) https://raw.githubusercontent.com/Randall-Coding/misc/master/border_round_err.png
I have tried using all the different cross-browser attributes for border rounding
-moz-border-radius: 20px; /* Also tried 20px 20px */
-webkit-border-radius: 20px;
-o-border-radius: 20px;
-khtml-border-radius: 20px;
border-radius: 20px;
Here is my CSS code using the mixin (note it looks the same with or without the mixin).
div.contact_window{
background-color: white;
/*border-radius: 20px 20px; */ /*other way I have tried it */
-moz-border-radius: 20px; /* Also tried 20px 20px */
-webkit-border-radius: 20px;
-o-border-radius: 20px;
-khtml-border-radius: 20px;
border-radius: 20px;
border: 3px solid black;
position:absolute;
width: 60%;
min-width:700px;
max-width:800px;
height: 520px;
overflow:scroll;
left:20%;
top: 130px;
z-index:10;
display: none;
display: block; /*DEBUG */
}
div.mask{
background-color: black;
opacity: 0.6;
position:fixed;
height:100%;
width: 100%;
z-index: 1;
top: 0px;
left: 0px;
display:none;
display:block; /*DEBUG */
}
And HTML code is as follows
<div class="contact_window" id='#contact_window'>
<%= render 'contact' %>
</div> <!-- end div.contact_form -->
<div class="mask">
I am rounding the corners of my other divs without any issue.
So I'm wondering if anyone has encountered this issue and/or has some idea what is going on here?
*I'm using Firefox, but this also holds true on my Chromium browser. My operating system is Ubuntu Linux 18.04.
*Here are the links to the SCSS and HTML files.
HTML https://github.com/Randall-Coding/misc/raw/master/index.html
CSS (SCSS) https://github.com/Randall-Coding/misc/raw/master/main.scss
edit* When I inspect the element it still shows border-radius:20px
Have you tried to achieve the rounding without the mixin by simply passing the border radius directly?
Unless you intend on changing the radius of each corner individually, it's probably best that you just pass one value to border-radius that will be applied to each corner. This can be done by doing:
border-radius: 20px;
instead of:
border-radius: 20px 20px;
Try this as your mixin instead (clearer naming):
#mixin border-radius($radius) {
-moz-border-radius: $radius;
-webkit-border-radius: $radius;
border-radius: $radius;
}
and pass one value
#include border-radius(20px);
Ok I broke this down attribute by attribute and it turns out the issue is with the setting
overflow:scroll
Which forces the window to have sharp corners where the scrollbars would be located be.
So the answer is to remove overflow:scroll from the CSS
Try border-radius in % like
border-radius:100%;
I want to display a chat bubble behind some text. Essentially the questions boils down to properly scaling background images.
I am mostly an Android developer and this is easy to do with a .9 image. I want to be able to do the same for an HTML page.
What i want is create a image that i can specify which sections strech and which dont. This would allow me to best scale the image as a background.
Currently my attempt looks like this.
Here is my code for this.
<div style="background-image: url(../home_images/chat_right.png);background-size: 100% 100%; background-repeat:no-repeat;"><em>“What RiteCare has done for my child is an amazing gift. Watching him grow in front of my eyes has been so incredible.” </em> ~Margaret</div>
You can just use plain old CSS. There's no reason to have to stretch and skew an image.
<div class="chatBubble">
<div class="message">
And then, this one time, at band camp....
</div>
</div>
<div class="triangle-down">
</div>
Applicable CSS:
.message {
color: #000;
font-size:14pt;
font-weight:bold;
text-align:left;
}
.chatBubble {
border: 5px solid purple;
border-radius:10px;
background-color:white;
padding:15px;
}
.triangle-down {
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 20px solid purple;
position:relative;
float:right;
right:10%;
}
Example here:
https://jsfiddle.net/fh5gg77r/
I have problem with align two buttons, I want to make something like this download button on this picture http://i.stack.imgur.com/MYt2K.png .
I tried to add padding for left button and margin, but without success.
JSFIDDLE
HTML
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<div class="publish">
<button class="btplus"><i class="fa fa-plus-circle"></i></button><button class="publishbt"> PUBLISH </br> NEWS </button>
</div>
css
.publish{
font-family: 'Roboto', sans-serif;
display:inline-block;
margin-left:80px;
margin-top:12px;
}
.publishbt{
background-color:#FF6900;
border:none;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
color:white;
font-family:'Roboto', sans-serif;
font-weight:bold;
padding:5px;
}
.btplus{
background-color:#FF6900;
border:none;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
color:white;
font-family:'Roboto', sans-serif;
margin-top:5px;
padding-bottom:18px;
font-weight:bold;
}
.fa-plus-circle{
margin-top:10px;
}
.buttonsearch{
height:38px;
width:100px;
background-color: #36545f;
border:none;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}
.fa-search{
color:#dbe2e5;
}
it's a padding issue. You have unequal padding in your button elements. to make both of the buttons the same height, you need to make the padding same.
CSS:
.btplus{
padding:15px 5px; /* no need for a bottom padding. if you want the bottom big, add corresponding padding to your text button too. */
vertical-align:top /* to align with the publish button, which has multiple lines*/
}
.fa-plus-circle{
margin:0px; /*no need for a margin. it pushes the circle down, but creates empty space. */
}
.publishbt{
padding:6px 5px 7px; /*padding adjustment */
}
And you should take off the <br/> from inside the button too. it creates more empty space that is hard to match. If you want a big button, adjust padding to achieve it.
I updated the fiddle here : https://jsfiddle.net/Snowbell92/dvnd98x6/4/
Set the vertical-align property on btplus. One possible solution is to set vertical-align: middle and increase the height of publishbt accordingly so that they align (height: 43px) worked well. You can explore further options of vertical-align.
I'm trying to create a button toolbar like so:
/------+--------+-------\
| left | middle | right |
\------+--------+-------/
All I have to do in this fiddle, is to eliminate the margin between the buttons. But how to do this without using negative values for margin? Is this possible, or exists better ways to create a toolbar?
HTML:
<button class=left>left-button</button>
<button>middle-button</button>
<button class=right>right-button</button>
CSS:
button {
border-radius: 0px;
border: 1px solid green;
margin: 0;
}
.left {
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}
.right {
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
Remove the spaces between the buttons as below:
<button class=left>left-button</button><button>middle-button</button><button class=right>right-button</button>
.
button {
border-radius: 0px;
border: 1px solid green;
margin: 0px;
}
http://jsfiddle.net/4ssd9/7/
just add float:left;
i also wrapped it with container so it will be centered, you can remove them if you want.
see updated fiddle
hope that helps.
You can use float:left; on the button.
button {
border-radius: 0px;
border: 1px solid green;
margin: 0;
float:left; /* Add this */
}
DEMO
Here I have made the required changes please check the fiddle link http://jsfiddle.net/Mohinder/vwK3Z/
what you need to do is make buttons float:left; remove right border from left button and left border from right button the way I have it on fiddle.
And if you want no border-between then add class="mid" to middle button and add .mid { border-left:none; border-right:none; } in your CSS
I'm having a bit of a problem with my codes. I have a transparent/glassy looking navigation bar on my page. I am trying to add a logo over it, however when I do, the logo as well is transparent and can see through it.
I think the problem may be that the navigation bar is coming before the logo, but in my codes, I have the logo coming first.
#nav {
background: #000;
height: 40px;
opacity: 0.15;
border-bottom-right-radius: 0.6em;
border-bottom-left-radius: 0.6em;
}
<div style="border-bottom-right-radius: 0.6em;
border-bottom-left-radius: 0.6em;
box-shadow: 0px 0px 7px #000000;
width: 960px;">
<div id="nav">
</div>
</div>
The logo image is just a regular < img > tag with a bit styling centering it in the center.
Your question indicates the logo is outside the navigation container, but your symptoms indicate that it is a child of the nav bar. Even if it is not, your code is flawed, and you will soon experience similar issues on the children of the nav element.
The CSS opacity setting changes the opacity of the whole element, including children. Try setting a background color using rgba:
#nav {
background: #000;
background: rgba(0,0,0,.15);
height: 40px;
border-bottom-right-radius: 0.6em;
border-bottom-left-radius: 0.6em;
}
The rgba background will fail in older browsers (IE8 and before), the #000 background is a fallback for them.
You could also create a semi-transparent png file and set it as the fallback background, this will work for IE7 and later (and IE6 if you use a png transparency hack):
#nav {
background: url('semitransparent.png');
background: rgba(0,0,0,.15);
height: 40px;
border-bottom-right-radius: 0.6em;
border-bottom-left-radius: 0.6em;
}
If you have the logo inside of the "#nav" it will be transparent. you will have to give the logo a:
.logo{position:absolute;}
And move it over the navigation.
You can try raising the z-level of the image so that it "floats" above the other elements in the visual order.
<img src="image.png" style="z-index: 1000" />
Although it sounds like your image is inheriting styles from the parent element. If you're placing the image inside the #nav element, then this is probably the case. Make sure you set opacity: 1; on the image style in that case.
Side note: You might also want to extract that styling out of the element tag and into your CSS to make it clearer.
i think u should want this .
CSS
#nav {
background: rgba(0,0,0,0.1);
height: 40px;
border-bottom-right-radius: 0.6em;
border-bottom-left-radius: 0.6em;
color:black;
margin:10px 0 0 0;
position:relative;
padding-left:110px;
}
.logo{
position:absolute;
top:0;
left:0;
width:100px;
height:25px;
background:green;
}
HTML
<div style="border-bottom-right-radius: 0.6em;
border-bottom-left-radius: 0.6em;
box-shadow: 0px 0px 7px #000000;
width: 960px;margin:10px 0 0 10px;">
<div id="nav">
<div class="logo">Logo here </div>
your navi here
</div>
</div>
Live demo http://jsfiddle.net/rohitazad/yNMbt/