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/
Related
I am trying to make the in my website always fit in the browser size. Right now, if I go to my website with a smaller screen, everything is messing together. Here is one and css example in my codes
html
<div class="contactus">
<h2>Contact Us</h2>
<h3>PhoneNumber</h3>
<h3>812-123-4567</h3>
<h3>Email</h3>
<h3>qwerty#asd.com</h3>
</div>
CSS
div.contactus {
position:absolute;
right:20px;
top:150px;
border: 2px solid;
border-color:#333;
width:100px;
font:20px;
In order to make it responsive you need to keep the code of the CSS in relative units because whey you make it with fixed units the code will not adapt to the screen so you will have to make your code something like this:
div.contactus {
position:absolute;
right:5%;
top:25%;
border: 2px solid;
border-color:#333;
width:100%;
font:20px;}
If the percentages are not ok just keep playing with them until you like it.
Responsive media queries would be extremely helpful, but the biggest problem I'm seeing is that your container (.contactus) is not wide enough to accommodate the text you're trying to place. Try changing the contactus width to 400px. However, on a smaller screen, you should have a media query that updates font size and container size based on the viewport width.
First of all welcome to our community, first read this topic to help you answers better questions and get more precise response: https://stackoverflow.com/help/how-to-ask
About your question, you have to explain better what you mean with "messing together".
I made a simple fiddle to help you with your responsive issues : https://jsfiddle.net/nLxa1745/
HTML
<div class="main">
<img class="user-pic" src="http://placehold.it/250x150">
<div class="contact-box">
<h4 class="user-name">Contact Us</h4>
<ul class="info-contact">
<li>
phonenumber
</li>
<li>
812-123-4567
</li>
<li>
email
</li>
<li>
qwerty#blabla.com
</li>
</ul>
</div>
</div>
CSS
body {
font-family: sans-serif;
color: #3f3f3f;
}
li{
margin: 5px 0px 0px 20px;
}
.main {
border: 2px solid gray;
width: 250px;
margin: auto;
box-shadow: 2px 2px 5px 1px gray;
}
.user-pic {
border-bottom: 2px solid gray;
}
.user-name {
margin-left: 15px;
margin-bottom: 0;
color: #B77425;
}
.info-contact {
list-style-type: none;
padding: 0;
}
#media only screen
and (min-width : 600px) {
.main {
width: 100%;
height: 150px;
}
.user-pic {
border-right: 2px solid gray;
float: left;
}
.contact-box {
float: left;
}
}
P.S. I'd recommend a reading about headings also https://webdesign.tutsplus.com/articles/the-truth-about-multiple-h1-tags-in-the-html5-era--webdesign-16824
I'm new with css, but the thing that i'm trying to do is slightly complicated, at least for me. I have a picture that i want to cover with a circle, transparent from the inside, black from the outside.
this is what I've accomplished so far:
.roundedBorder {
border: 1px solid #1EC865;
border-width: 4px;
border-radius: 81px;
}
.img { position:absolute; top:6px; left:6px; width:81px;
}
<img class=img src="http://suptg.thisisnotatrueending.com/archive/13559636/images/1295334728830.jpg">
<div style="position:absolute;width:70px;height:70px;border-width: 4px;position:absolute;" class="roundedBorder">
</div>
https://jsfiddle.net/dmL56kek/
now i'm looking to cover the outer of circle with a solid color.
PS: i don't want to apply any style on the image because it won't work in my case.
A little change is css would help and i have used width:78px with a calculation that width of outer div is 70px and border is 4px from left and right.
.roundedBorder {
border: 1px solid #1EC865;
border-width: 4px;
border-radius: 81px;
}
.img { position:absolute; top:8px; left:8px; width:78px; border-radius:100%;}
<img class=img src="http://suptg.thisisnotatrueending.com/archive/13559636/images/1295334728830.jpg">
<div style="position:absolute;width:70px;height:70px;border-width: 4px;position:absolute;" class="roundedBorder">
</div>
This question already has answers here:
How to create a custom shape - css
(3 answers)
Closed 7 years ago.
I am trying to use css to create a background like the yellow in the diagram included.
I have spent some time experimenting with using the :after but I can't get the triangle into the right place, and to be the right width.
I don't really want to use an image if I can use css.
<aside class="quickcontactform">
<div class="quickcontactformheader">
<h2>Need help evicting a tenant?</h2>
<h3>Don't Delay</h3>
<p>Please complete the form below</p>
</div>
<p>'ere is more content sire</p>
<p>a be a pleased with it I am</p>
</aside></div>
And some css
.quickcontactform {
width:350px;
float:right;
background:#fff;border-radius:10px;
overflow:hidden;
}
.quickcontactformheader {
background:#f0cf35;
position:relative;
}
.quickcontactformheader:after {
content:'';
position:absolute;
bottom:0px;
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid red;
}
checkout my fiddle: https://jsfiddle.net/r6er318z/
I have modified your css a bit
HTML
<aside class="quickcontactform">
<div class="quickcontactformheader">
<h2>Need help evicting a tenant?</h2>
<h3>Don't Delay</h3>
<p>Please complete the form below</p>
</div>
<p>'ere is more content sire</p>
<p>a be a pleased with it I am</p>
</aside>
CSS
.quickcontactform {
width:350px;
float:right;
background:#fff;
border-radius:10px;
overflow:hidden;
}
.quickcontactformheader {
background:#f0cf35;
position:relative;
}
.quickcontactformheader:after {
content:'';
position:absolute;
top:100%;
width: 0;
height: 0;
border-left: 175px solid transparent;
border-right: 175px solid transparent;
border-top: 30px solid #f0cf35;
}
I need to implement a menucard in to a website. My customer wants, that it looks exactly like on the card in the restaurant.
Is it with HTML possible to put a border-line directly under the text like on the image below ("Hauptgerichte")? And if yes, how could I realize that?
Thanks!
If you want the border to touch the text, you can adjust the line-height to something small:
p
{
border-bottom: 1px solid black;
line-height: 10px;
}
http://jsfiddle.net/kz43g/
Here is 1 variant - here is a fiddle.
html:
<div>
<p> some text </p>
</div>
css:
*{
padding:0;
margin:0;
}
div{
border-bottom:1px solid #000;
}
p{
margin-bottom:-5px;
}
i just put negative bottom margin to the text container (in this case the p tag)
This is possible in HTML / CSS: Example
HTML:
<h3 class="yourClass">Text place</h3>
CSS :
.yourClass{
width:300px;
border-bottom: 1px solid #000;
text-indent:50px;
line-height:80%;
}
In this example I'm changing the line height to move the text under the line and the then using text-indent to move it to the correct positioning. It should give you the desired results. There are a few ways to do this, but this will require less HTML.
Here is a JS Bin that shows how this could be done. I added a border to the bottom of the paragraph and a little padding to the left. Then I changed the line height of the paragraph so it would sit right on the border.
You could try working with:
text-decoration: underline;
I choose to use the border property for easy customization.
CSS from JS Bin:
p {
border-bottom:1px solid #333;
line-height: 50%;
padding: 0 0 0 40px;
}
Pure CSS solution is possible with pseudoelement after, see fiddle. The distance from text is done by the bottom:3px:
.underline {
position:relative;
}
.underline::after {
content: '';
width: 100%;
position:absolute;
bottom: 3px;
left:0;
border-bottom: 1px solid black;
}
edit: the line-height solution looks better :)
Put the text inside of a div. Then, make the div a set width. Then, add a border to the div.
<div id="title">
<h2> Hauptgerichte </h2>
</div>
/*CSS*/
#title{
width: 50px;
border-bottom: 2px solid #000000;
}
Put the header in H tags, then target the H tag with CSS and apply border bottom.
HTML
<div id="content">
<h1>title</h1>
</div>
CSS
#content h1{
Border-bottom:1px solid #999;
Width: 150px;
}
This is my first post. I'm still learning CSS and your help is much appreciated.
I have been trying to create a Div that contains an image with a transparent overlay with a semi transparent border at the bottom. On hover, a second transparent overlay is added making the bottom border darker. I then have another div containing some title text, the title text should change colour on hover anywhere in the parent Div as well as the whole thing be linked on click.
The closest thing to it is on Vimeo here:
http://vimeo.com/categories
I have managed to achieve all of this and it has been working fine in IE and Firefox and safari etc. But with IE10 the text no longer changes colour on hover nor is the div clickable.
Here's my CSS:
.videoCatThumbImg {
position:relative;
background:#FFFFFF;
width: 178px;
height: 178px;
padding: 5px 5px 5px 5px;
margin: 10px 0px 0px 0px;
border: 1px solid #CCCCCC;
line-height:normal;
float:left;
}
.videoCatTskin {
position: absolute; top: 5px; left: 5px;
}
.videoCatThumbHover {
position: absolute; top: 5px; left: 5px; display: none;
}
.videoCatThumbImg:hover .videoCatThumbHover{
display: block;
}
.videoCatTitle {
position:absolute;
top:5px; left:5px;
display:block;
width:173px;
height:26px;
padding:152px 0px 0px 5px;
Font-size:18px;
font-weight:bold;
color: #ffffff;
}
.videoCatTitle:hover {
color: #5798ca;
}
and here's my HTML:
<div class="videoCatThumbImg">
<img src="http://www.mydomain.com/images/vcat/image_thumb.gif" alt=""/>
<img class="videoCatTskin" src="http://www.mydomain.com/images/vcat/thumb_hover.png" alt=""/>
<img class="videoCatThumbHover" src="http://www.mydomain.com/images/vcat/thumb_hover.png" alt=""/>
<div class="videoCatTitle">Some Text Here</div>
</div>
Any advice on what I'm doing wrong is very welcome.
Similar to this answer, try adding a background (transparent image or same-color will work), to the hover classes that don't have it (.videoCatThumbImg:hover).
Just had the problem. None of the solutions were working (border, background, hasLayout).
In the end, I switched to XHTML 1 Strict doctype and it worked, if it can help...