This question already has answers here:
How to remove the space between inline/inline-block elements?
(41 answers)
Closed 6 years ago.
I made a website with HTML/CSS and I was working with my page navigator when I saw that there was a white space between my background and border of two words.
A, d I don't now how to remove that white space here is a picture
The link buttonsar left above is there someone that now how to remove that?
My code.
<html>
<head>
<style>
#h1index {color : black; text-align: center; background: linear-gradient(to bottom,#F2F2F2,#94A394); border-style: solid; border-radius: 25px; border-color: black;}
body {background-color: #F8F8F8;} <!-- achtergrond kleur -->
#tekstindex {color : black;}
#homelink {background: linear-gradient(to bottom,#F2F2F2,#94A394); border-style: solid; border-color: black transparent black black; text-decoration: none; border-radius: 25px 0px 0px 25px; font-size: 25px; padding-left: 5px; }
#projectslink {background: linear-gradient(to bottom,#F2F2F2,#94A394); border-style: solid; border-color: black transparent black transparent; text-decoration: none; font-size: 25px; }
</style>
</head>
<body>
home <!-- hompage link --> projects <!-- link naar projects pagina -->games<!-- linkinaar games pagina -->
<h1 id="h1index"> welcom to the codenoob website </h1> <!-- welcom message -->
<p id="tekstindex">latest news.</p>
</body>
</html>
Inline elements are sensitive to white space in your code. Just remove it.
#h1index {
color: black;
text-align: center;
background: linear-gradient(to bottom, #F2F2F2, #94A394);
border-style: solid;
border-radius: 25px;
border-color: black;
}
body {
background-color: #F8F8F8;
}
<!-- achtergrond kleur --> #tekstindex {
color: black;
}
#homelink {
background: linear-gradient(to bottom, #F2F2F2, #94A394);
border-style: solid;
border-color: black transparent black black;
text-decoration: none;
border-radius: 25px 0px 0px 25px;
font-size: 25px;
padding-left: 5px;
}
#projectslink {
background: linear-gradient(to bottom, #F2F2F2, #94A394);
border-style: solid;
border-color: black transparent black transparent;
text-decoration: none;
font-size: 25px;
}
home<!-- hompage link -->projects
<!-- link naar projects pagina -->games
<!-- linkinaar games pagina -->
<h1 id="h1index"> welcom to the codenoob website </h1>
<!-- welcom message -->
<p id="tekstindex">latest news.</p>
Obviously, it is due to the space between two words.
You should use <span> to wrap the two words and apply the style on <span>
try floating the buttons to the left. float:left. Also, setting the position to relative might work.
Related
Here's an example I am trying:
<div class=red>
<img src="https://i.imgur.com/huxFtq5.png" width=50%>
</div>
<style>
.red
{
border: 1px #BC8000 solid;
background: #FDF5E5;
padding-top: 10px;
padding-left: 10px;
padding-right: 5px;
padding-bottom: 5px;
}
</style>
The output is:
My question is how to make image transparent? The div background should stay 'yellow'.
Update: I am using a markdown software where I embed the HTML along with CSS. Could it be the software itself or, is there a way to tweak HTML?
Apply a class to your image or style it directly as inline css with a transparent background color. Some browsers may accidentally put a white or black BG Color on img.
<html>
<head>
<style>
.red {
border: 1px #BC8000 solid;
background: yellow;
padding-top: 10px;
padding-left: 10px;
padding-right: 5px;
padding-bottom: 5px;
}
</style>
</head>
<body>
<div class=red>
<img style="background-color: transparent;" src="https://i.imgur.com/huxFtq5.png" width=50%>
</div>
</body>
</html>
.red{
border: 1px #BC8000 solid;
background: yellow;
padding-top: 10px;
padding-left: 10px;
padding-right: 5px;
padding-bottom: 5px;
}
<div class=red>
<img src="https://i.imgur.com/huxFtq5.png" width=50%>
</div>
I am trying to create a button with 3 horizontal dots as in the attached screenshot with the below css class and unicode Character “…” (U+2026).
But when I apply background it takes more width and height, can any one please suggest.
In the attached screenshot, I need the first image but getting the second image.
.test:after {
content: '\2026';
font-size: 25px;
background-color: #D0D0D0;
}
<div class="test"></div>
How about this?
Placing a <div> inside the button allows us to fine tune the position of the dots.
button {
border: 2px solid #9fa2a4;
height: 18px;
border-radius: 5px;
background: linear-gradient(#fbfbfb, #d1d1d1); /* gives the "gradient */ color background"
}
.dots {
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; /* The Arial font appears to have "square" dots */
font-size: 36px; /* The size of the dots */
line-height: 0; /* helps vertically position the dots */
margin-top: -10px; /* helps "raise" the dots higher */
letter-spacing: -2px; /* "squeezes" the dots closer together */
}
<button>
<div class="dots">...<div>
</button>
mostly achieved the required style with the code. Now trying to add empty background before and after 3 dots in the result image.
.horizontal-dots {
cursor: pointer;
width: 19px;
height: 14px;
background-image: radial-gradient(circle, black 1.5px, transparent 2.0px);
background-size: 6px 16px;
background-color: #EEEEEE;
border-top: 1px solid #CCCCCC;
border-right: 1px solid #CCCCCC;
border-bottom: 1px solid #CCCCCC;
border-left: 1px solid #CCCCCC;
border-radius: 0.2em;
margin-left: 14px;
}
.horizontal-dots:hover {
border: solid .2px #0198E1;
}
<div class="horizontal-dots">
</div>
This question already has answers here:
CSS margin terror; Margin adds space outside parent element [duplicate]
(7 answers)
What are the default margins for the html heading tags (<h1>, <h2>, <h3>, etc.)?
(4 answers)
Closed 2 years ago.
Trying to make a little database for projects for personal use, not sure how to word it but...
what i want:
what i got:
current code:
#Header {
text-align: center;
vertical-align: top;
color: #FFF;
border: 4px #000 solid;
border-top: ;
border-right: ;
border-bottom: ;
border=left: ;
padding: 20px;
background-color: #000;
}
body {
Background: #FFF;
}
a {
border: 2px #000 solid;
border-radius: 2px;
padding: 8px;
text-decoration: none;
}
<body>
<h1 id="Header">What do you want to do?</h1>
<br>
Games   Code<br><br><br>
Articles
</body>
I used a screenshot editor to create the image of what i want, how can i change the code to get the desired effect?
Thanks for your time and hopefully your response.
I would strongly recommend wrapping your sections into containers or HTML5 elements and style them accordingly
See pen HTML and CSS:
https://codepen.io/aystarz52/full/LYpLYBp
HTML
<body>
<div class="container">
<h1 id="Header">What do you want to do?</h1>
</div>
<br>
<div class="page-content-container">
Games   Code<br><br><br>
Articles
</div>
</body>
CSS
body, html {
background: #FFF;
padding:0;
margin:0;
}
.container {
text-align:center;
border: 4px #000 solid;
padding: 10px 0;
background-color: #000;
}
#Header {
color: #FFF;
}
.page-content-container {
padding:10px;
}
a {
border: 2px #000 solid;
border-radius: 2px;
padding: 8px;
text-decoration: none;
}
Is this more or less what you hoped for?
Set padding and margin to zero for the body, set a margin on the header and position at the top of the body....
body{margin:0;padding:0;box-sizing:border-box}
#Header {
text-align: center;
vertical-align: top;
color: #FFF;
border: 4px #000 solid;
border-top: ;
border-right: ;
border-bottom: ;
border=left: ;
padding: 20px;
background-color: #000;
margin:0;
top:0;
}
body {
Background: #FFF;
}
a {
border: 2px #000 solid;
border-radius: 2px;
padding: 8px;
text-decoration: none;
}
<h1 id="Header">What do you want to do?</h1>
<br>
Games   Code<br><br><br>
Articles
What you can do is subtract 10px from the padding-bottom of #Header and add it to padding-top:
#Header {
padding: 30px 0 10px; <--plus ten on top, minus ten on bottom
}
#Header {
text-align: center;
color: #FFF;
border: 4px #000 solid;
padding: 30px 0 10px;
background-color: #000;
}
body {
Background: #FFF;
}
a {
border: 2px #000 solid;
border-radius: 2px;
padding: 8px;
text-decoration: none;
}
<body>
<h1 id="Header">What do you want to do?</h1>
<br>
Games   Code<br><br><br>
Articles
</body>
To achieve what you want, the easiest way is to increase padding-top on #Header.
Your CSS has some issues, though. I'm listing them here:
border-top: ;
border-right: ;
border-bottom: ;
Omitting the right side of the declaration is not allowed. You need to either add values to assign to those CSS properties, or remove the lines completely.
border=left: ;
I'm assuming this is just a typo - it has to be border-left. Aside from that, same as stated previously. You must assign a value, or remove the declaration.
Background: #FFF;
CSS property names never contain capital letters. Instead, use background: #FFF;
#Header {
text-align: center;
vertical-align: top;
color: #FFF;
border: 4px #000 solid;
border-top: ;
border-right: ;
border-bottom: ;
border=left: ;
padding: 40px 20px 20px; /* short for 40px top, 20px left & right, 20px bottom */
background-color: #000;
}
body {
Background: #FFF;
}
a {
border: 2px #000 solid;
border-radius: 2px;
padding: 8px;
text-decoration: none;
}
<body>
<h1 id="Header">What do you want to do?</h1>
<br>
Games   Code<br><br><br>
Articles
</body>
Set margin-top:0px; in #Header style, That should work for you.
I am creating a website for a school project. I currently have it up and working but need help with my social media icons to stay on the back ground image. I am using css to size them but I think I am missing something. If someone could please guide me towards the correct code. Thanks
This my code for the social media button
.fa {
padding: 20px;
font-size: 30px;
width: 50px;
text-align: center;
text-decoration: none;
margin: 5px 2px;
}
.fa:hover {
opacity: 0.7;
}
.fa-facebook {
background: #3B5998;
color: white;
}
.fa-twitter {
background: #55ACEE;
color: white;
}
.fa-snapchat-ghost {
background: #fffc00;
color: white;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
.fa-instagram {
background: #125688;
color: white;
}
when I scroll to the end of the page the its white with the social media icons displaying.
Sorry left the html off here is the html
</form>
</div>
</div>
<div style="padding-bottom:16px">
<div Class="module mid">
<h2>Welcome to Uniforms Today.</h2>
<div class="module h1">
<h1>The website that helps parents and kids get their school
uniforms.</h1>
</div>
</div>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com
/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</body>
</html>
You can use 2 background attribute on 1 class but as I researched it is a little tricky.
Instead of using 1 colour attribute, you need to use a gradient colour attribute like this following code:
.fa-facebook {
background-image: url('[facebook-icon-link]'), linear-gradient(to right, #3B5998, #3B5998);
background-position: center, center;
background-repeat: no-repeat, no-repeat;
background-size:contain,contain;
}
You can follow the guideline from this link: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds
I made my left border width greater, and there is black instead of my text's background color (Screenshot and Code below).
I already tried:
background-size: 80px 60px;
I want it to remain as the text background color (rest of navbar).
HTML:
home
<!-- hompage link -->
projects
<!-- link naar projects pagina -->
games
<!-- linkinaar games pagina -->
<h1 id="h1index"> welcom to the codenoob website </h1>
<!-- welcom message -->
<p id="tekstindex">latest news.</p>
CSS:
#h1index {
color: black;
text-align: center;
background: linear-gradient(to bottom,#F2F2F2,#94A394);
border-style: solid;
border-radius: 25px;
border-color: black;
}
body {
background-color: #F8F8F8;
}
#tekstindex {
color: black;
}
#homelink {
background: linear-gradient(to bottom,#F2F2F2,#94A394);
border-style: solid;
border-color: black transparent black black;
text-decoration: none;
border-radius: 25px 0px 0px 25px;
font-size: 25px;
border-left-width: 15px;
}
Change this:
#homelink {
border-left-width: 15px;
}
To this:
#homelink {
padding-left: 15px;
}
JSfiddle: https://jsfiddle.net/j5157mc0/