I want to make a thin line border that goes across the width of the web page. The way I’m doing it right now is by putting a <p> tag in the <div> element because without anything inside my <div> nothing shows up and making the text the same color as the background.
But is there a more efficient way of making a line border without having to put a <p> tag inside my <div> element?
HTML:
<div class="lineborder">
<p>line</p>
</div>
CSS:
.lineborder {
background-color: #4f5054;
}
.lineborder p{
color: #4f5054;
}
Use hr tag. It will run across the web page.
Then you can style it like so:
hr {
background: red;
border: 1px solid pink;
height: 10px;
/* More styles */
}
Related
If I wanted to print out some text in div Tag could I implement a border into this or would I need to have a border line of code outside of the Div Tag and have the Div Tag in between. Or could I combine a Div Tag with a border
Possible solution
Your question was a bit confusing, maybe for me? Anyways, I don't know if is this what you wanted, but if it is, you are welcome!
Implement border inside a <div> tag
Firstly you need to set border-box to your div tag. This means you have to include different CSS code for browsers, such as -moz, or -webkit. Obviously you have to specify the height and width to your object, as well as border and background colour. You can also set the margin, but it's not necessary.
Your code should look like this:
HTML
<!-- You can put even <p> tag, or any text tag into div -->
<div>
Some text...
</div>
CSS
div {
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
width: 100px; /* Set your div width */
height: 100px; /* Set your div height */
border: 10px solid red; /* Optional amount for border, as well as colour*/
background: #d9dbda;
margin: 10px; /* This is optional */
}
If you want to see this sample in your browser, click here.
If you want to underline text, you should probably opt for text-decoration: underline;
.underline { text-decoration: underline; }
<p class="underline">This sentence has a line</p>
<p>Only <span class="underline">part of this sentence</span> has a line</p>
`.
But since I'm not quitte sure what it is you want to accomplish yet and you've asked for styling with borders with other elements (maybe for borders/lines at the top or on the side, or for different styling purposes). I'll add another example with a border. This will also be make it easier to style with different colors, width, etc
.solid-border{
border-color: black;
border-width: 1px;
border-top-style: solid ;
border-bottom-style: solid ;
}
<div class="solid-border">
<p>So just some lines for this sentence right?</p>
</div>
<div>
<p>Or maybe just a <span class="solid-border">small part with lines like</span> this?</p>
</div>
I am trying to make a coupon-type dashed border with <h1> text and an image inside. I am able to create the text, but can't figure out how to also get the picture in there, too.
I am using blogger because I don't really know how to code. Here's what I have so far:
<style>h1 {border-style: dashed;
background-color:coral;}</style>
<h1>Never Pay Full Price for Summer Camp Again. Get Free Coupons, Discount & Special Offers from CampCoupons.com!</h1>
I'd love to get an image inside the border, too, but can't figure out how.
An image is not semantically a heading and should not be placed within a h1 (or any other hN tag). Rather use a wrapping section/aside/div (depending on your use case) to combine a heading with an image like below.
.wrap {
background: coral;
border: dashed;
}
<div class="wrap">
<h1>Heading</h1>
<img src="http://placehold.it/400/200/" />
</div>
One solution is to "put" your image in the <h1> using background-image and background-position in CSS like this :
#test{
border : 1px dashed black;
background-image : url('https://bcs-solution.com/wp-content/uploads/2017/11/Logo_Develop-H100-250x100.jpg;');
background-repeat: no-repeat;
height: 100px;
background-position:0px 15px;
width: 255px;
}
<h1 id="test">
My title 1
</h1>
Once you see this one I think This is useful for you.
h1 {
border-style: dashed;
background-color: coral;
padding-left: 10px;
}
<h1>h1 heading text</h1>
I am working on a web page with various section titles: About, Projects, Contact, etc.
These titles will be on top of a background image. I want them to stand out. So, I want to fill the background with white.
(The titles' text are dark blue.)
The problem is that, if I only designate a background-color, the elements stretch across the page. I need them to each have a custom width (with the 3px padding of white around them). Do I have to have a separate CSS style class for each title with a width designation?
The titles are all < h3 > elements.
Here is the CSS style I have now:
.sectionTitle{
background-color: #ffffff;
padding: 3px;
}
Your h3 tags stretch across the page because they are block elements (naturally 100% width of parent).
If you force your h3's to display as inline-block elements, their width will shrink to the minimum needed to accommodate the text node within - I imagine this is what you are trying to achieve.
body {
background: #e6e6e6;
}
.sectionTitle {
background-color: #ffffff;
padding: 3px;
display: inline-block;
}
<h3 class="sectionTitle">
Some title
</h3>
Of course this can potentially cause issues depending on the rest of your markup so you may have to wrap your h3 in a block element such as a div to keep your title in it's own row.
body {
background: #e6e6e6;
}
.sectionTitle {
background-color: #ffffff;
padding: 3px;
display: inline-block;
}
<div>
<h3 class="sectionTitle">
Some title
</h3>
</div>
If you want each title to have different padding you can just create a separate class for the color and padding.
.sectionTitle{
background-color: #ffffff;
}
.padding3{
padding: 3px;
}
.padding3{
padding: 2px;
}
Then assign the color class to each heading and the specific padding class
<h3 class="sectionTitle padding2">Hello</h3>
<h3 class="sectionTitle padding3">Hello</h3>
Or if you want each heading to have the same padding just assign them all to the css class you have provided above.
I have a HTML document with inline CSS that my professor asked to have the CSS within the head tag and have the same rending from the original HTML with inline CSS. I think I'm done but somehow the <hr> within the HTML with inline CSS looks thicker than the other one.
I already tried adding a height: declaration property but it renders even thicker than I want.
Original HTML: http://jsfiddle.net/2k66T/
Modified HTML: http://jsfiddle.net/dd63m/
Edit: Here are the instructions from the professor;
Write a CSS document in order to define the style of the following web
page (I refer this to as "Original HTML") in a right way. Add and erase in the original
page everything you think that is necessary. Use the on-line validator
of the World Wide Web Consortium to be sure that your work fulfills
the standards.
Real question is... why are you using HR?
Let's render a border on the div wrapping your logo image.
Have a fiddle! - http://jsfiddle.net/dd63m/11/
Updated fiddle - http://jsfiddle.net/8VTd8/3/
I have given the div wrapping your logo an ID of logo. I removed the br break tags, we can apply margins in the CSS. The font tag is no longer used.
HTML
<h1>MyTSC</h1>
<div id="logo">
<img src="./img/TSCLogo.jpg" alt="TSC">
</div>
<h2>My courses for Fal 2013</h2>
<ul>
<li>COSC 4330 Computer Graphics</li>
<li>IMED 1416 Wed Design I</li>
<li>ITNW 2413 Networking Hardware</li>
</ul>
The logo div is currently 300px wide, change to what you want. Note: margin: 0 auto; essentially this is centering your div. margin-bottom is applied to create those extra spaces. The border is applied to your logo div giving a consistent line across browsers.
CSS
body{
background-color: grey;
color: white;
}
h1{
text-align: right;
margin-bottom: 30px;
}
div{
text-align: center
}
ul{
font-style: italic;
}
#logo { width: 300px; margin: 0 auto; border-bottom: solid 1px #FFF; }
#logo img { margin-bottom: 30px;}
add background: white; in your css not color:white
like this
hr{
width: 50%;
height: 3px;
background: white;
}
They all have the same height, the one with the default color(no color specified) has a gradient effect so it looks a little thin.
Code for the Test fiddle
<hr width="50%" color="black">
<br />
<br />
<hr>
<br />
<br />
<hr id="test">
Js Fiddle
I want to be able to highlight the text (paragraph) without it going across the entire page. Can someone help me confine this paragraph?
here is a link to a screen shot image showing the problem i am having: http://imageshack.us/photo/my-images/402/print1xs.png/
Heres my HTML code:
<div id="content">
<p> I like to play with pokemon <br>
They are a fun way to relax
<br>
Go pokemon.
</p>
</div>
Heres my CSS:
#content{
margin: 200px 0 0 73px;
}
#content p{
font-size: 2em;
}
#content p{
font-size: 2em;
display: inline-block;
background-color: magenta;
}
Enter the following tag at the beginning of the highlighted text: <span style="background color: #FFFF99">. You can use any color you want, though this text highlights it in light yellow.
If you want to "highlight" the whole paragraph, set a background color for the paragraph. Also, to keep it from stretching the whole way across your div just change the paragraph width, like so:
.highlighted{background-color: #ffff00; width: 100px;}