So I am trying to make a simple border for a site, in css:
html{
border-top:3em solid #26282B;
}
I would like to have some white text on top of it, how can I do this? I tried making a class, but it always appears under the border.
You CAN NOT make any text in the border. Use div or something.
Here is the example:
<html>
<head>
<style>
body{margin:0;padding:0;}
.someclass {
width:100%;
height:3em;
background-color:#26282B;
color:white;
}
</style>
</head>
<body>
<div class='someclass'>
Sometext Here
</div>
</body>
</html>
You can put your text in a span or div set a class name and using left, top, right, bottom, fix the position like this:
e.g class="example"
.example {
position:absolute;
left: 5px;
top: 50px;
}
Elsewhere this probably help you:http://www.w3schools.com/tags/tag_legend.asp
You can't write something on top of a border - technically yes, but for all purposes here, no, you can't.
So if you want a text on top a short dark background you write something like that:
In yo HTML:
<div>My suppa text</div>
In yo CSS:
div {
background: #26282B;
color: #fff;
}
<div> here being the first element inside your <body> it still would have a margin before it, that's because of the browser default style.
You can get rid of it by doing that, in yo CSS:
html, body {
margin-top: 0;
padding-top: 0;
}
Now I would suggest you to read about CSS resets.
Yes, you can.
Add this to your style:
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: #000;
How about this:
<!DOCTYPE html>
<html>
<head>
<style>
#container {
border: 10px solid;
padding: 5px;
}
#title {
float: left;
padding: 0 5px;
margin: -20px 0 0 30px;
background: #fff;
}
</style>
</head>
<body>
<div id="container">
<div id="title">Border title</div>
<p>Some content...</p>
</div>
</body>
</html>
Related
For some reason, the first word of my paragraphs keep appearing above my blockquotes. My code structure looks something like this:
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<head>
<style>
blockquote {
display: block;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 0px;
margin-right: 0px;
}
p {
width: 640px;
}
<!-- CSS style to put div side by side -->
<style type="text/css">
.container {
width:600px;
height:190px;
}
#ab-box {
float:left;
width:360px;
height:160px;
background-color:white;
}
#tb-box {
float:left;
width:180px;
height:160px;
background-color:white;
}
</style>
</head>
<body>
<div class="container">
<div id="ab-box">
<blockquote style="border: 2px solid #666; padding: 10px; background-color: #fff; width: 240px"> <b>AUTHOR:</b>
<br><br>{{NAME}}</blockquote>
</div>
<div id="tb-box">
<blockquote style="border: 2px dotted #666; padding: 10px; background-color: #fff; width: 240px"> <b>PUBLISHED:</b>
<br><br>December 1993</blockquote>
</div>
</div>
<div>
<p>Dear *|SUBSCRIBER|* - <br /><br />We're happy to have you onboard!</p>
</div>
</body>
This isn't a perfect representation... But the word "Dear" in the paragraph below keeps appearing above the blockquotes for some reason. The rest of the paragraph moves just fine and is perfectly in line - it's just that one word. And if I duplicate the paragraph, I get the same issue. Please assist; thank you in advance!
close your "style" tag
<style>
blockquote {
display: block;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 0px;
margin-right: 0px;
}
p {
width: 640px;
}
</style>
Hello and welcome to StackOverflow. Your code has two errors: first of all, you opened the style tag two times, firstly after the head open and then after the comment
<!-- CSS style to put div side by side -->
Second, the comment is an Html comment, not a Css one: inside Style tags you cant use html comments
<!-- blabla -->
Instead, you have to write them like this
body {
background: red;
height: 100%;
/*
width: 100%;
display: flex;
Multi line comment
*/
}
Here you can find a more detailed example.
https://www.w3schools.com/css/css_comments.asp
Cheers!
I have this simple piece of HTML.
Why doesn't the background color fill the entire #footer element's background - specifically, including the margin?
<!doctype html>
<html>
<head>
<style>
#footer {
background: #263238;
margin: 100px;
padding: 0;
}
.footer-text {
margin: 0;
color: #fff;
}
</style>
</head>
<body>
<div id="footer">
<div class="footer-text">All Rights Reserved © 2016</div>
</div>
</body>
</html>
You should use padding instead of margin as described by CSS's Box Model.
Margin is providing space beyond the element's box and therefore won't be colored - it's simply space.
Padding on the other hand provides space around the inside of the element's box and is colored and affected by other styles.
<!doctype html>
<html>
<head>
<style>
#footer {
background: #263238;
padding: 100px;
}
.footer-text {
margin: 0;
color: #fff;
}
</style>
</head>
<body>
<div id="footer">
<div class="footer-text">All Rights Reserved © 2016</div>
</div>
</body>
</html>
This is how the css box model works.
Tha background is applied only to the padding and content areas, that is why you don't see the background in the margin.
the fix is simple just change the margin to be padding.
You can use padding.
If you can use margin then it's leave space outside of border and padding it's leave space inside border. So it's works perfect for you using padding.
#footer{background: #263238; padding: 100px;}
.footer-text{margin: 0;color: #fff;}
<div id="footer">
<div class="footer-text">All Rights Reserved © 2016</div>
</div>
Try giving border: 1px solid transparent to the parent element of the p tag.
<!doctype html>
<html>
<head>
<style>
#footer{background: #263238;padding: 100px;}
.footer-text{margin: 0;color: #fff;}
</style>
</head>
<body>
<div id="footer">
<div class="footer-text">All Rights Reserved © 2016</div>
</div>
</body>
</html>
Margin is applied outside the box while padding is applicable inside the box.
Here is an example of margin/padding.
http://www.goer.org/images/html/boxbasic.png
Margin doesn't get included in the Box-model of your div.
You add padding instead of margin. That will get you uniform color in your footer. like this:
#footer {
background: #263238;
margin:0;
padding:100px;
}
But if you are looking for different color on the outside then you can get this using border like this:
#footer {
background: #263238;
margin:0;
padding:0;
border:100px solid green;
}
Now you can include border in your box-model so it doesn't mess up with your page structure. Do this by defining box-sizing for the footer.
#footer {
background: #263238;
margin:0;
padding:0;
border:100px solid green;
box-sizing:border-box;
}
<!doctype html>
<html>
<head>
<style>
#footer {
background: #263238;
padding: 100px;
}
.footer-text {
margin: 0;
color: #fff;
}
</style>
</head>
<body>
<div id="footer">
<div class="footer-text">All Rights Reserved © 2016</div>
</div>
</body>
</html>
I am planning to add colour to the center of the html page. I have tried this:
My html file
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div id="v">
</div>
</body>
</html>
My styles.css
#v {
background: red;
position: center;
}
You can set a height and a width to the div and add a margin like this:
#v {
height: 100px;
width: 100px;
background-color: red;
margin: auto;
}
I would assume that you mean to center an element on the page and then add a background color to that element. Your CSS is not valid although you did come close. if you want to add a background then you need to use background-color instead. If you want to center that element then you can adjust the margin of said element here. is an example that may help.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>center a div and add background color</title>
<style type="text/css">
.wrapper{
width: 100%;
height: 400px;
background-color: blue;
margin: 0 auoto;
}
.centered-element{
width: 50%;
height: 200px;
margin: 0 auto;
background-color: red;
}
p{
text-align: center;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="centered-element">
<p>this div is centered!</p>
</div>
</div>
</body>
</html>
what i have done is gave the div that i wanted to center align a margin of 0 auto; this will center align the div. I hope that helped!
I have created a simple layout using the HTML div tag. I would like for there to be NO margin (meaning no whitespace) at the top of my page. I am able to achieve this in Safari, but for some reason the same HTML code isn't cutting it in Firefox. Here is a jsfiddle of my HTML code: http://jsfiddle.net/WhaGH/
You can't see it in jsfiddle, but if you copy and paste the code into an HTML document and then open it up using Firefox, there is a margin about 21px in height at the top of the page. This top margin does not appear if you open the same HTML file in Safari. I read somewhere else that different browsers use different amounts of default margin and padding with the "html" and "body" tags, hence my inclusion of some CSS in the "head" that sets margin and padding for those tags to 0. Again, this works for Safari but not Firefox (or rather, it works for the left margin but not for the top margin in Firefox). Does anyone know why?
by default Firefox use margin-top: 21.4333px for tag, and to div#header is added to the indentation.
Use padding-top to childs of block to prevent this.
h1 { margin-top: 0px; }
Fix this problem.
You've done the reset of the default values only for body and html, do it for the other elements as well. You might consider to use, in the future, a CSS reset, have a look at HTML5 Boilerplate
http://html5boilerplate.com/html5boilerplate-site/built/en_US/docs/css/
you did't clear your header (add one properties overflow:hidden;)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head>
<style type="text/css">
html,body {
margin:0;
padding:0;
}
</style>
</head>
<body style="width: 800px;">
<div id="header" style="width:800px; height:100px; background-color: blue; border-bottom: solid black 1px;overflow:hidden;">
<h1>This is the Header.</h1>
</div>
<div id="leftcolumn" style="width:199px; height: 500px; background-color: red; float:left; border-right: solid black 1px;">
<p>This is the left column.</p>
</div>
<div id="content" style="width:400px; height: 500px; background-color:gray; float:left;">
<p>This is where the content goes.</p>
</div>
<div id="rightcolumn" style="width:199px; height: 500px; background-color: green; float: left; border-left: solid black 1px;">
<p>This is the right column.</p>
</div>
</body>
</html>
<style type="text/css">
body { margin: 0; padding: 0; }
h1 { margin: 0; }
</style>
I'm trying to place a border after the div tag , but the line showed around the text , not after below the image on left , how can i fix it ?
<html>
<head>
<title> This is an demo </title>
<style>
.left { float: left; }
.content {
clear: both;
border-color: #666666;
border-bottom: 3px solid;
}
</style>
</head>
<body>
<div class="content">
<img class="left" src="61add42atw1dnf1k4h4qzj.jpg" />
<p> This is a not so long paragraph</p>
</div>
</body>
</html>
How can i place the border a little lower ?
Thanks !
You need to clear the current float:
Either:
<br clear="left" /> <!-- or "right" or "all" -->
Or:
<div style="clear: left;"></div> <!-- or "right" or "both" -->
In the .content div, replace the clear:both with overflow:hidden
.content {
overflow: hidden;
border-color: #666666;
border-bottom: 3px solid;
}
Use float:left; for all:
Image has already left class
Div .content should have same i.e; wrapper div
paragraph inside content
I don't understand exactly what you want to achieve here but if you would like to have a div with an img and p below each other then you could just get rid of class="left" in the img and apply float: left to the content class.
<html>
<head>
<title> This is an demo </title>
<style>
.left { float: left; }
.content {
float: left; /* can get rid of this if you want your div to have the page witdh */
border-color: #666666;
border-bottom: 3px solid;
}
</style>
</head>
<body>
<div class="content">
<img src="image.jpg" />
<p> This is a not so long paragraph</p>
</div>
</body>
</html>