I have a background image and I will wish add a border and a background white with a width of 18cm.Here is below an exemple:
We have the background image with a border and a background white inside..
Here is my realization below...
My result is still mediocre I know but how to do to create the same thing?
I search to create a border with a background white...
HTML
<div class="img_reg">
<div class="contenair_reg">
<span class="regtxtcolor"><i class="far fa-address-card"> Personal Information:</i></span>
<p>Please use English letters and numbers in all field for registration before creating an account.</p>
</div>
</div>
CSS
.contenair_reg{
padding-top: 60px;
padding-left: 320px;
}
.regtxtcolor{
font-size: 26px;
font-family: 'Open Sans', sans-serif;
text-transform: uppercase;
color: #C22312;
font-weight: bold;
}
Is it my HTML blocks are OK ?
hi what I did was enclosed the < p > element in a div with class .reg_content_container so I could add a border below it. Please run snippet, thanks.
body{
height:100%;
background:url('https://edmontongazette.com/wp-content/uploads/2018/07/California.jpg');
background-size:cover;
}
.body_padding{
padding:60px 30px 0px 30px;
}
.contenair_reg{
padding:15px;
background-color:white;
border-radius:5px;
}
.regtxtcolor {
font-size: 26px;
font-family: 'Open Sans', sans-serif;
text-transform: uppercase;
color: #C22312;
font-weight: bold;
}
.contenair_reg p{
margin-bottom:8px;
}
.reg_content_container{
border-bottom:3px solid #C22312;
}
<html>
<body>
<div class="body_padding">
<div class="contenair_reg">
<span class="regtxtcolor"><i class="far fa-address-card"> Personal Information:</i></span>
<div class="reg_content_container">
<p>Please use English letters and numbers in all field for registration before creating an account.</p>
</div>
</div>
</div>
</body>
</html>
You probably need to set a background-color and a margin. Use the padding for the background, not for separate from it's container.
.contenair_reg
Also you need a border bottom to the p tag, try something like this codepen
.img_reg {
background-image: url(https://static1.squarespace.com/static/5459ec52e4b04d305f68f1ed/t/548a8e17e4b0dd3cb0247e7b/1418366488991/?format=2500w);
width: 100vw;
height: 100vh;
}
.contenair_reg{
position: absolute;
top: 50%;
left: 50%;
width: 70%;
height: 20%;
padding: 30px;
background-color: white;
transform: translate(-50%, -50%);
border-radius: 6px;
}
.regtxtcolor{
font-size: 26px;
font-family: 'Open Sans', sans-serif;
text-transform: uppercase;
color: #C22312;
font-weight: bold;
}
p{
padding-bottom: 5px;
border-bottom: 2px solid #C22312;
}
.box{
background:url('https://preview.ibb.co/kv4XHU/66.jpg');
background-size:cover;
background-repeat:no-repeat;
height: 300px;
}
.box { padding: 150px 35px 0 35px; }
.box-content {
padding:15px;
background-color: #ffffff;
border-radius: 5px;
}
.box-icon {
font-size: 24px;
font-family: 'Open Sans', sans-serif;
text-transform: uppercase;
color: #C22312;
font-weight: 700;
}
.box-content p { margin-bottom: 12px; }
.box-text{ border-bottom:3px solid #C22312; }
<div class="box">
<div class="box-content">
<span class="box-icon"><i class="far fa-address-card"> Personal Information:</i></span>
<div class="box-text">
<p>Please use English letters and numbers in all field for registration before creating an account.</p>
</div>
</div>
</div>
Related
#bannercontainer{
height: 200;
width: 960;
}
#banner1{
height: 100px;
width: 960px;
background-color: white;
}
#banner2 {background-color: #4D4C4C;
color: white;
height: 100px;
width: 960px;
position: static;
}
.logo {
width: 433px;
height: 199px;
float: left;
}
.linkcontainer{
height: auto;
width: auto;
vertical-align: bottom;
position: absolute;
bottom: 0px;
}
a:active{ color: grey;
font-weight: bold;
background-color: white;
}
a, a:visited { color: white;
text-decoration: none;
}
#link {
padding-top: 10px;
margin-right: 30px;
margin-bottom:20px;
font-size:15pt;
font-weight: bold;
font-family:Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
display:inline-block;
position:relative;
float:right;
}
.selector {
background-color: white;
color: #4D4C4C;
padding-left: 5px;
padding-right: 5px;
padding-bottom: 3px;
font-weight: bold;
}
<div id="bannercontainer">
<div id="banner1">
<div id="logo"><img src="img/Dulwich Design Banner.png" width="434" height="200" alt=""></div>
</div>
<div id="banner2">
<div id="link"><div id="selector">Home</div></div>
<div id="link">About</div>
<div id="link">Blog</div>
<div id="link">Contact</div><div id="link"> Projects</div>
</div>
</div>
So, while a user is on a given page, I would like the link to be white and the "selector" class to have a white background and grey text, essentially for the colours to be reversed while the page is active. Any help would be greatly appreciated.
Reason why it's not working it's because your element is using id instead of class for selector
So from this:
<div id="link">
<div id="selector">
Home
</div>
</div>
Change it to this:
<div id="link">
<div class="selector">
Home
</div>
</div>
And your css, update your .selector and add .selector a for the text color:
.selector {
background-color: white;
padding-left: 5px;
padding-right: 5px;
padding-bottom: 3px;
font-weight: bold;
}
.selector a {
color: #4D4C4C;
}
Fiddle
Also note that it's not good to have the same id on multiple elements, you should use class instead. I'm referring to multiple elements with links id.
Somehow one of the group of the same block elements on the picture gets inexplicably big height. Styles shown on the pic don't suggest that kind of behavior for this element. In fact, height isn't even set for those h3's.
Browser screenshot
The html is
<section class="about-us">
<div class="wrapper clearfix">
<h2 class="about-us-heading section-heading red-black-stressing-line-at-left">About Us</h2>
<p class="about-us-statement section-saying about-us-saying">This is who we are - or at least who we strive to be...</p>
<div class="about-more">
<p class="about-saying">If you can't explain it simply, you don't understand it enough.</p>
The more you know
</div>
<div class="about-work-details">
<h3 class="about-details-heading typography-icon">Typography</h3>
<p class="about-details-text">...</p>
</div>
<div class="about-work-details">
<h3 class="about-details-heading curve-with-dots-icon">Full icon set</h3>
<p class="about-details-text">...</p>
</div>
<div class="about-work-details">
<h3 class="about-details-heading triangular-ruler-icon">Accurate</h3>
<p class="about-details-text">...</p>
</div>
</div>
</section>
Three same div.about-work-details elements.
The default css is
.about-us{
background-color: #fff;
position: relative;
}
.about-us-heading{
color: #272d32;
}
.about-us-statement{
color: #4e5860;
margin-bottom: 3.9em;
}
.about-more{
width: 16.875em;
float:left;
margin-right: 1.875em;
}
.about-saying{
font-family: "Open Sans", sans-serif;
font-size: 1.75em;
line-height: 1.4285;
color: #4e5860;
}
.about-more-link{
display: inline-block;
font-family: "Raleway", sans-serif;
line-height: .77;
padding: 1em 2.625em 1em 1.25em;
text-decoration: none;
font-weight: 600;
color: #fff;
text-transform: uppercase;
background: #ff3c1f url(../images/left-arrow.gif) 12.7em .95em no-repeat;
margin-top: 4.25em;
transition: background-color 0.5s;
}
.about-work-details{
width: 16.875em;
float:left;
margin-right: 1.685em;
margin-bottom: 8.1875em;
position: relative;
min-height: 16.875em;
border: 1px solid #edeff2;
}
.about-work-details:last-of-type{
margin-right: 0;
}
.about-details-heading{
font-family: "Open Sans", sans-serif;
font-weight: 700;
font-size: 1.25em;
color: #303030;
text-transform: uppercase;
padding: 0.85em 0 1em 3em;
margin: 1.70em 0 0 1em;
}
Media query modifications
#media screen and (max-width: 860px){
.about-work-details{
width: 70%;
margin: 3em auto;
min-height: 0;
float: none;
}
.about-us{
padding-bottom: 1px;
}
.about-work-details:last-of-type {
margin-right: auto;
}
}
Seems like a floating item behavior issue.
Try removing/commenting float:left; from .about-more.
I've put together some HTML + CSS code to have a grey circle with a number inside of it. If I wanted to create another color of the circle (say orange), what would be the easiest way to do it. I would want to leave the original code in place because I'm still using grey circles.
Here's my jsfiddle:
http://jsfiddle.net/huskydawgs/5f4kuLk5/6/
Here's my HTML
<div class="circle">
<span class="number">1</span>
</div>
Here's my CSS:
.circle {
border-radius: 100%;
height: 2em;
width: 2em;
text-align: center;
background: #616161;
margin: 0 auto;
}
.circle .number {
margin-top: 0.10em;
font-size: 1.5em;
font-weight: bold;
font-family: sans-serif;
line-height: 1.4em;
color: #ffffff;
}
Add a class to your second element and use that to override the main circle styles with a different background colour:
.circle {
border-radius: 100%;
height: 2em;
width: 2em;
text-align: center;
background: #616161;
margin: 0 auto;
}
.circle.orange {
background: orange;
}
.circle.red {
background: red;
}
.circle .number {
margin-top: 0.10em;
font-size: 1.5em;
font-weight: bold;
font-family: sans-serif;
line-height: 1.4em;
color: #ffffff;
}
<div class="circle">
<span class="number">1</span>
</div>
<div class="circle orange">
<span class="number">2</span>
</div>
<div class="circle red">
<span class="number">3</span>
</div>
Mark background as !important.
See my codepen. I look to make the blue background color scale to fit with the text, "My Pet". I tried display: inline and padding, but I couldn't figure out how to set the background to fit with the text responsively, rather than being full width. Also, how can I set the opacity of the background color but not the text?
After googling, I still struggle to find a solution.
HTML:
<div class="myDiv">
<div class="bgImage">
<h1>My Pet</h1>
</div>
</div>
CSS:
.myDiv h1 {
font-family: 'Gabriela', serif;
color: #FFF;
margin: auto;
text-align: center;
font-size: 3.5em;
border-radius: 20px;
background-color: #2ba6cb;
/* padding: 0.5em 0.2em 0.8em 0.5em;*/
}
Is this what you're trying to achieve?
.myDiv {
text-align: center;
}
.myDiv h1 {
display: inline-block;
font-family: 'Gabriela', serif;
color: #FFF;
font-size: 3.5em;
border-radius: 20px;
background: rgba(43, 166, 203, 0.5 /* alpha value for background */);
padding: 0.5em 0.2em 0.8em 0.5em;
}
<div class="myDiv">
<h1>My Pet</h1>
</div>
even shorter
width: max-content;
.myDiv h1 {
font-family: 'Gabriela', serif;
color: #FFF;
margin: auto;
text-align: center;
font-size: 3.5em;
border-radius: 20px;
background-color: #2ba6cb;
width:max-content;
padding:2px 20px;
}
<div class="myDiv">
<div class="bgImage">
<h1>My Pet</h1>
</div>
</div>
Is that what you were trying to get? This way you can set opacity of bgImage
.myDiv h1 {
font-family: 'Gabriela', serif;
color: #FFF;
margin: auto;
text-align: center;
font-size: 3.5em;
}
.myDiv {
text-align:center;
}
.myDiv .bgImage{
display:inline-block;
background-color: #2ba6cb;
border-radius: 20px;
padding: 0.5em 0.2em 0.8em 0.5em;
}
<div class="myDiv">
<div class="bgImage">
<h1>My Pet</h1>
</div>
</div>
You can just display your h1 as a table-cell and add the required padding around the text.
Note the last two rules to selector below....
.myDiv h1 {
font-family: 'Gabriela', serif;
color: #FFF;
margin: auto;
text-align: center;
font-size: 3.5em;
border-radius: 20px;
background-color: #2ba6cb;
display: table-cell;
padding: 0 0.5em ;
}
Just wondering how to get rid of the unnecessary looking spaces
in my heading. I want my header to look similar to the capture 2 (2nd picture) but there are unnecessary spaces that I can't seem to get rid of. I ran it through jsfiddle:
http://jsfiddle.net/yT6h6/ and I can still see the spaces even though I don't think there was anything wrong with the code. Please take a look at this and greatly appreciated if you can help me.
HTML Code:
<div class="content">
<div class="heading"><b style="font-size:14px; font-family:'Arial', Gadget, sans-serif"><b style="font-size:9px;">Home \\ Current Students \\</b>
</b>
<br />FBE Degrees & Electives
<br>
<span class="style11">FBE Degrees & Other Courses for FBE students including Elective courses</span>
</div>
CSS Code:
.heading {
height: auto;
width: 525px;
background-color: #333333;
font-family:"Courier New", Courier, monospace;
font-size: 28px;
color: #DBDBDB;
padding-left: 30px;
font-weight: bold;
padding-top: 5px;
margin-top: 5px;
padding-bottom: 5px;
padding-right: 20px;
background-repeat: no-repeat;
background-position: left center;
}
.content {
height: auto;
float: left;
width: 575px;
background-repeat: repeat;
background-color: #FFFFFF;
}
.style11 {
font-size: 10px;
font-family: Arial, Helvetica, sans-serif;
line-height: 15px;
color: #336666;
}
a.link5:link {
color: #FFFFFF;
}
a.link5:visited {
color: #FFFFFF;
}
a.link5:hover {
color: #E9E8C7;
}
a.link5:active {
color: #E9E8C7;
}
try this one remove line-height and add display:block
.style11 {
font-size: 10px;
font-family: Arial, Helvetica, sans-serif;
display:block;
color: #336666;
}
I think you firstly need to seriously tidy up that HTML and use some more natural elements. The heading should be a H of some level, probably h1. The paragraph tags make more sense for the text. Everything will be far cleaner and easier to solve if you do this. Here's my suggestion that changes the HTML and fixes your margin issues.
HTML
<div class="content">
<div class="heading">
<p class="crumbs">Home \\ Current Students \\</p>
<h1>FBE Degrees & Electives</h1>
<p class="subheading">FBE Degrees & Other Courses for FBE students including Elective courses</p>
</div>
</div>
CSS
p {
font-size: 10px;
font-family: Arial, Helvetica, sans-serif;
color: #336666;
}
a {
color:#fff;
text-decoration:none;
}
.heading {
background:#333333;
padding:20px;
}
.heading p {
margin:0;
padding:0;
line-height:10px;
}
h1 {
margin:0;
margin-bottom:5px;
font-family:"Courier New", Courier, monospace;
font-size:28px;
line-height:36px;
color:#DBDBDB;
}
Fiddle here:
http://jsfiddle.net/yT6h6/6/
It can be simplified more actually (I left some of your classes in there even though they aren't used), but this is at least a lot neater to work with.
Hey i've tried your code see at: http://jsbin.com/awonek/1/edit
Looks fine to me.
could code try
div#heading{
margin-bottom:-20px;
}
what browsers have you tried it in?
Added some changes: See http://jsbin.com/uvurev/1/edit
<div class="content">
<div class="heading">
Home \\ Current Students \\
<h2 class="M_logo_text">FBE Degrees & Electives</h2>
<span class="style11">FBE Degrees & Other Courses for FBE students including Elective courses</span>
</div>
</div>
CSS
div.heading {
height: auto;
width: 525px;
background-color: #333333;
font-family:"Courier New", Courier, monospace;
color: #DBDBDB;
padding-left: 30px;
font-weight: bold;
padding-top: 5px;
margin-top: 5px;
padding-bottom: 5px;
padding-right: 20px;
background-repeat: no-repeat;
background-position: left center;
}
.content {
height: auto;
float: left;
width: 575px;
background-repeat: repeat;
background-color: #FFFFFF;
}
.style11 {
font-size: 10px;
font-family: Arial, Helvetica, sans-serif;
line-height: 15px;
color: #336666;
}
a.link5{
font-size:9px; font-family:'Arial', Gadget, sans-serif
margin-right: -2px;
text-decoration: none;
}
a.link5:link {
color: #FFFFFF;
}
a.link5:visited {
color: #FFFFFF;
}
a.link5:hover {
color: #E9E8C7;
}
a.link5:active {
color: #E9E8C7;
}
/*
added style
*/
b.type1{
font-size:9px; font-family:'Arial', Gadget, sans-serif
}
h2.M_logo_text{
font-size: 20px;
margin:0px;
}