i am fairly new in coding and need some help. Currently i am trying to form a border around my texts and photo. But somehow I can't do it. It should roughly look like this http://imgur.com/a/fkUba. On the top parts photos and on the bottom ones text.
And my code looks like this
<!DOCTYPE html>
<html>
<head>
<title>Hello World</title>
<style>
img {
border: 5px solid black;
}
</style>
</head>
<body>
<img src="https://pbs.twimg.com/profile_images/770467680012890112/kSz1jtnn.jpg" alt="Coca Cola"
Coca Cola
</body>
</html>
Like this, i can only put a border around the logo.
I know how to text, link (<p> <a href>) but I don't know how to but a proper border around these. This is like 'here is my homework for you' but i really need help!
I would recommend making a class to store your border to cut down on code.
.borders {
border: 1px solid black;
}
Then assign that class to everything that you want to have a border:
<img class="borders" src="https://pbs.twimg.com/profile_images/7704676800128901/kSz1jtnn.jpg"
As for the text you can add some padding to the top and bottom to increase the white space:
h2 {
padding-top: 10px;
padding-bottom: 10px;
padding-left: 10px;
padding-right: 10px;
}
I think you need to set border for your logo like this:
in the css typing code like this.
img{
border: 1px solid black;
}
good luck
Just like you have border around image using this style:
img {
border: 5px solid black;
}
you can have border around almost any element like similar styles like:
p {
border: 5px solid black;
}
a {
border: 5px solid black;
}
Related
I wanted to make a text on a transparent strip with a colored strip on the left side. As in the picture below (the gray stripe should be transparent). The gray stripe would have to expand with the length of the text. If the text did not fit the width of the container, a new line would be created, and the orange bar and the gray bar would expand with the text (new line).
I was just starting to learn CSS and I wanted to achieve that, but I don't know how.
I made this small fiddle.
I've given background color to elements so that you can see how it acts based on amount of text. Change background-color to transparent on your h2 tag to get what you want.
HTML:
<div class="container">
<div class="label">
<h2 class="label-text">
Sample text
</h2>
</div>
</div>
and CSS:
.container {
width: 200px;
border: 1px solid Black;
background-color: gray;
}
.label {
background-color: white;
display: inline-block;
border-left: 10px solid red;
word-wrap: normal;
}
.label-text
{
display: inline-block;
padding-left: 10px;
}
Check this snippet:
#strip{
border: none;
}
#ribbon{
background-color: orange;
width: 15px;
height: 50px;
}
#strip-text{
padding-left: 20px;
background-color: #cccccc;
opacity: 0.6;
width: 185px;
height: 50px;
}
<table id="strip" cellspacing="0" cellpadding="0">
<tr>
<td id="ribbon">
</td>
<td id="strip-text">
EXAMPLE TEXT
</td>
</tr>
</table>
We have used CSS property opacity to add transparency to our strip.
Not sure what you've checked already (please share some code), but I think you want to use border CSS property, e.g.
border-left: 5px solid #ffdd00
EDIT:
Ok, since somebody downvoted this answer without clarification, I've realized by myself that probably OP is looking for total solution for his/her problem (so not only ribbon) - please check solution below then:
.ribbon {
color: #fff;
display: inline-block;
padding: 5px 10px;
border-left: 5px solid orange;
background: rgba(0, 0, 0, 0.25);
}
<div class="ribbon">Some text here</div>
You can achieve transparency by using rgba instead of opacity - it's supported by all modern browsers already.
This solution contains no hacks (or oldschool <TABLE> nodes!), requires only 1 element and is being widely supported by the browsers.
I am trying to draw a triangle with HTML and CSS. But I am unable to do it succesfully.
I looked up the most common solution for drawing triangle in CSS.
This the HTML code:
<html>
<head>
<link rel="stylesheet" href="tiangle.css" type="text/css">
</head>
<body>
<div id = 'triangle-up'></div>
</body>
</html>
This is the CSS code:
#triangle-up {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
}
The code should draw a red colored upward-facing triangle, but it displays a blank white page.
Please help.
Is it possible that your CSS links to the misspelled tiangle.css but your actual file name is spelled correctly (triangle.css)?
#triangle-up {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
}
<div id='triangle-up'></div>
Your code is valid. Are you sure you're actually looking at the correct file? Check your console logs. Are they saying any 404 errors (eg you are not linking your stylesheet correctly)?
There is a typo in your href. It should say triangle instead of tiangle.
I have a div that wraps around my <footer> tag. In the div is an <hr>, which needs to be in the div to have the positioning properties applied. However, it also carries over the coloring of the links in my footer. I don't want the <hr> to be the same color as the links. Is there any way to "escape" this or change the property.
I tried <hr style="color: black;"> but that didn't change anything. If you have any input on how to change the properties despite the set CSS in the div, I would greatly appreciate it.
JS Fiddle: http://jsfiddle.net/o6vmz7t5/1/
HTML
<div id="footer_style">
<hr>
<footer>
Contact
Privacy Policy
Create Account
</footer>
</div>
CSS
#footer_style {
margin: 0 auto;
position: fixed;
bottom:0;
width: 100%;
padding: 20px;
}
#footer_style a {
color: #f2f0e1;
}
#footer_style a:hover {
color: black;
}
hr tags simply have a border-top applied on them
override the hr as below
#footer_style hr {
border-top: 1px solid black;
}
#footer_style hr {
background-color: black;
height:1px;
}
JSFiddle
Whoa, it had me struggling for a minute. Apparently since the hr has no height and you cant see its internal "fill", affecting the color does nothing.
What you actually see is the border, so using border-color did it for me.
Please try below code I have try this code. Using this code solve your problem.
border-color: red;
Instead Using the color: black;
Try using in this way
border: 1px solid #000;
border-width: 1px 0px 0px 0px;
Try it
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;
}
I'm trying to use divs instead of tables to style boxes around my content. The content can be any size and needs to allow the browser to be resized to any degree. Need the background color and border to contain the content. This works fine with tables. How do I get a div to work the same way?
Note: I added "_"s because my non-breaking spaces were getting lost.
Sample Page
Sample image
(source: c3o.com)
Content:
<style type="text/css">
div.box, table.box
{
padding: 10px 1000px 10px 10px;
}
div.box-header, td.box-header
{
border: solid 1px #BBBBBB ;
font-size: larger;
padding: 4px;
background-color: #DDDDDD;
}
div.box-body, td.box-body
{
padding: 6px;
border: solid 1px #BBBBBB ;
border-top: none;
}
</style>
<div class="box">
<div class="box-header">please_help_make_these_divs_stop_overlapping</div>
<div class="box-body">please_help_make_these_divs_stop_overlapping</div>
</div>
<table class="box" width="100%" cellpadding="0" cellspacing="0">
<tr><td class="box-header">tables_make_good_containers_tables_make_good</td></tr>
<tr><td class="box-body">tables_make_good_containers_tables_make_good</td></tr>
</table>
There is no easy way to do this that is crossbrowser friendly that I know of.
At least in firefox you can create an simulated table by setting divs with
display:table;
display:table-row;
display:table-cell;
So that those divs work like table elements. Then the box will contain it's content. Wether that's a good solution or not is debateable.
I've been having similar issues with page layouts myself. Usually I've solved those by setting min-width and overflow:auto;
If you really don't want to use a table you can do this:
div.box div {
overflow: hidden;
zoom: 1; /* trigger haslayout for ie */
}
Next time this kind of problem comes up go to giveupandusetables.com.
One way is to make your boxes floats. Add float:left; to box, box-header, and box-body. Add clear:both; to box-body to force it below box-header. You'll probably need to add clear property to whatever content follows as well.
You will not get right edges of box-header and box-body to align, though. If you want their widths to be the same, you really want a table. Table is a tool to make all cells in the same column to share the widths.
For other ideas, check out this SO question.
Firstly, you should be using semantic markup. If something is a header and content mark it up as such with header and paragraph tags. That will help you move out of the 'table-way' of thinking were you try to emulate your markup and styles like a table, markup should come first, CSS can come after.
The following should do what you want:
<style type="text/css">
* {
margin:0px;
padding:0px;
}
.box {
border: solid 1px #BBBBBB;
margin:10px;
}
.box h3 {
padding: 4px;
border-bottom: solid 1px #BBBBBB;
background-color: #DDDDDD;
}
.box p {
padding: 6px;
}
</style>
<div class='box'>
<h3>please help make these divs stop overlapping</h3>
<p>please help make these divs stop overlapping</p>
</div>
Thinking about markup and style separately is the path to CSS Zen Mastery :o)
This works (actually holds together better than tables in ie7 too)
div.box{
float:left;
width:auto;
margin: 10px 1000px 10px 10px;
}
div.box-header{
float:left;
width:100%;
border: solid 1px #BBBBBB ;
font-size: larger;
padding: 4px;
background-color: #DDDDDD;
}
div.box-body{
clear:left;
float:left;
width:100%;
padding: 4px;
border: solid 1px #BBBBBB ;
border-top: none;
}
NOTE: both boxes have to have same left and right padding or one juts out a bit.
Floats are not needed, but you seem to be confusing the uses of margin vs. padding. The following minor tweaks to your style works as you need it to:
<style type="text/css">
div.box, table.box
{
margin: 10px 1000px 10px 10px;
border: solid 1px #BBBBBB ;
padding: 0px;
}
div.box-header, td.box-header
{
font-size: larger;
padding: 4px;
background-color: #DDDDDD;
border-bottom: solid 1px #BBBBBB ;
}
.box-body, td.box-body
{
padding: 6px;
}
</style>
I've changed the padding on the box to a margin, moved the border to your box, and added an underline to the header.
I had this problem also using Firefox 6.0.1, Opera 10.62, Safari 5.1, but not in IE 9, and the overflow:auto fixed it in all browsers. Nothing else did. I also tried overflow:contain, which also fixed the problem, but it appears that contain is not a valid value for overflow, so I am assuming that, since the value was not valid, auto was substituted.