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/
Related
I need to align my text.
Current it reads in the nav menu:
Home
Visit us Shop Our History
I need it to be on the same line, and not have home above the rest.
.navigation {
background-color: #333333;
Width: 1024px;
color: #fefefe;
font-size: 120%;
}
#current {
border-bottom: 3px;
border-style: solid;
border-color: #ff0000;
border-top: 0px;
border-left: 0px;
border-right: 0px;
width: 200px;
}
<nav class="navigation">
<p>
<div id="current"> Home </div>
Visit Us
Shop
our History
</p>
</nav>
I am SUPER new to this niche.
You can use flexbox here
.navigation {
...
display: flex;
align-items: center;
}
.navigation {
background-color: #333333;
width: 1024px;
color: #fefefe;
font-size: 120%;
display: flex;
align-items: center;
}
#current {
border-bottom: 3px;
border-style: solid;
border-color: #ff0000;
border-top: 0px;
border-left: 0px;
border-right: 0px;
width: 200px;
}
<nav class="navigation">
<p>
<div id="current"> Home </div>
Visit Us
Shop
our History
</p>
</nav>
Using an 'inline element' like <span> as opposed to a 'block-level element' like <div> will fix that.
MDN
.navigation {
background-color: #333333;
Width: 1024px;
color: #fefefe;
font-size: 120%;
}
#current {
border-bottom: 3px;
border-style: solid;
border-color: #ff0000;
border-top: 0px;
border-left: 0px;
border-right: 0px;
width: 200px;
}
<nav class="navigation">
<p>
<span id="current">Home</span>
Visit Us
Shop
our History
</p>
</nav>
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:
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.
what i have in the code:
wrapper div outemost which in css i made to width of auto so all the inner divs have to align
inside my container div which inside of wrapper container div contains both sidebars which should be same height. Instead they don't do this and Im not sure why. Instead of having two sidebars I would like to keep the right sidebar and strect the content from the left sidebar from the left to the right sidebar.
Another major problem is that the right sidebar keeps overflowing its text and when i tried overflow:hidden it just hid evrything outside of the sidebar div which isn't what I want
here is jsfiddle so you can better see it. I want to stop overflowing on the right sidebar
and when the left sidebar is width to touch the right sidebar then under the content of the leftsidebar is where i want the buttons becuase they go out the screen when I widen the width.
http://jsfiddle.net/b6bW4/
<!DOCTYPE html>
<html lang="en">
<html>
<title>Building Blocks to Html</title>
<head>
<SCRIPT language=JavaScript>
var updated = document.lastModified document.write("Last modified: " + updated)
</script>
<script src="start.js"></script>
<meta name="keywords" content="HTML, Hyper Text Markup Language, />
<meta name="description" content="HTML in easy steps. Introductory tutorial for beginners." / >
<meta name="author" content="Miguel Castaneda" />
<meta charset="UTF-8">
<meta name="robots" content="all, nofollow" />
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<META HTTP-EQUIV="Expires" CONTENT="-1">
</head>
<body>
<div id="wrapper">
<!-- wrapper holds everything should be auto -->
<div id="mod"></div>
<!-- end of mod -->
<center>
<a name="top"></center>
<center>
Bottom
</center>
<div id="mainmenu">
<ul>
<li>
Home
</li>
<!-- 5 table spacing links//-->
<li>
HTML
</li>
<li>
Python
</li>
<li>
Widgets
</li>
<li>
Contact Us
</li>
</ul>
</div>
<!-- end of mainmenu -->
<div id="container">
//container holds content and sidebar
<div id="sidebar">
<p>HELLLLLLLLLLLEEEwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwMwwwwwwwwwwwwwwwwwwwwwwwwwEwwwwwwawawakdjadjlkajdlk;asmdksm.a</p>
</div>
<!-- end of sidebar -->
<div id="content">
<p >
<!-- browser picks first one in array if not in cpu then goes to 2nd font //-->
<tt>
Programmer: Miguel Castaneda(iSten23)
<br>
</br>
Head First HTML5 Programming
<br>
</br>
THIS SITE IS FOR EXPERIMENTAL PURPOSES, IS NOT INTENDED FOR COMMERCIAL PURPOSES.
</p>
</tt>
</div>
<!-- end of content -->
</div>
<!-- end of containeer-->
<center>
Top
<div id="leftrightB" >
<UL id="ul-list">
<li>
<a id="rightB"href="basic5.html" class="addborder" >
<img src="arrow1.png" height="40" width="40" alt="Link to next page">
</a>
</li>
<li>
<a id="leftB"href="basic7.html" class="addborder">
<img src="arrow.png" height="40" width="40" alt="Link to next page">
</a>
</li>
</ul>
</div>
<!--end of leftrightB -->
<div id="footermenu">
<ul>
<li>
Home
</li>
<!-- 5 table spacing links//-->
<li>
HTML
</li>
<li>
Python
</li>
<li>
Widgets
</li>
<li>
Contact Us
</li>
</ul>
</div>
<!-- END OF FOOTERMENU -->
<a name="bottom"></div>
<!-- END OF WRAPPER-->
</body>
<style>
#ul-list li {
}
a:hover {
color: #00f000;
text-shadow: 0px 2px green;
}
.addborder:hover {
border: 1px solid #000000;
}
#sidebar {
position: absolute;
right: 0;
margin-top: 2px;
background-color: #8cc63f;
border-top: 1px solid #fff;
border-bottom: 1px solid #fff;
font-size: 10px;
line-height: 1;
padding: 0px 5px 0px 5px;
width: 10%;
height: 480px;
background-image: radial-gradient(hsla(0, 0%, 87%, 0.31) 9px, transparent 10px), repeating-radial-gradient(hsla(0, 0%, 87%, 0.31) 0, hsla(0, 0%, 87%, 0.31) 4px, transparent 5px, transparent 20px, hsla(0, 0%, 87%, 0.31) 21px, hsla(0, 0%, 87%, 0.31) 25px, transparent 26px, transparent 50px);
background-size: 30px 30px, 90px 90px;
background-position: 0 0;
<!-- //white-space: nowrap;
//overflow: hidden;
//word-wrap: break-word -->
}
#wrapper {
width: auto;
}
#content {
position: absolute;
left: 0;
background-color: #8cc63f;
border-top: 1px solid #fff;
border-bottom: 1px solid #fff;
font-size: 10px;
line-height: 1;
padding: 0px 5px 0px 5px;
width: 10%;
height: 480px;
}
<!-- img {
border-width: 1px;
border-color: Black;
}
--> .table {
display: table;
<!-- Allow the centering to work */ --> margin: 0 auto;
}
ul#ul-list {
min-width: 696px;
list-style: none;
padding-top: 20px;
}
ul#ul-list li {
display: inline;
}
#mainmenu {
width: auto;
height: 35px;
font-size: 16px;
font-family: Tahoma, Geneva, sans-serif;
font-weight: bold;
text-align: center;
text-shadow: 3px 2px 3px #333333;
background-color: #8AD9FF;
border-radius: 8px;
position: absolute;
top: 50px;
left: 0;
right: 0;
margin-left: 0;
margin-right: 0;
}
#mainmenu ul {
height: auto;
padding: 8px 0px;
margin: 0px;
}
#mainmenu li {
display: inline;
padding: 20px;
}
#mainmenu a {
text-decoration: none;
color: #00F;
padding: 8px 8px 8px 8px;
}
#mainmenu a:hover {
color: #F90;
background-color: #FFF;
}
#footermenu {
width: auto;
height: 35px;
font-size: 16px;
font-family: Tahoma, Geneva, sans-serif;
font-weight: bold;
text-align: center;
text-shadow: 3px 2px 3px #333333;
background-color: #52D7E5;
//main color of the menu border-radius: 8px;
position: absolute;
bottom: 0px;
left: 0;
right: 0;
margin-left: 0;
margin-right: 0;
}
#footermenu ul {
height: auto;
padding: 8px 0px;
margin: 0px;
}
#footermenu li {
display: inline;
padding: 20px;
}
#footermenu a {
text-decoration: none;
color: #00F;
// padding: 8px 8px 8px 8px;
}
#footermenu a:hover {
color: #F90;
background-color: #17861A;
//color of gover over iterm
}
rightleftB {
display: table-cell vertical-align: bottom;
}
#wrapper {
width: 100%;
}
</style>
</html>
I think you need this...
Result
body{
overflow: hidden;
}
I currently have 4 Divs, each of which contains a hyperlink. Each hyperlink is a member of the navigation bar at the top of a website. The rightmost link must line up with elements below it. I should be able take a vertical line ruler and see the rightmost elements align at the right-most edge of the page.
My rendered HTML looks great in Chrome, but not in FireFox, or IE: the links are not as wide and the page looks weird because the fourth link doesn't hit the right edge of the page.
I believe this has to do with font width definitions, however I do not know what to manually set.
FireFox CSS Computed Text:
font-family Lucida Sans Unicode
font-size 16px
font-weight 600
font-style normal
font-size-adjust none
color #EEFFFF
text-transform none
text-decoration none
letter-spacing normal
word-spacing 0
line-height 23px
text-align start
vertical-align baseline
direction ltr
-moz-tab-size 8
-moz-font-feature-settings normal
-moz-font-language-override normal
-moz-text-blink none
-moz-text-decoration-color #EEFFFF
-moz-text-decoration-line none
-moz-text-decoration-style solid
text-overflow clip
Chrome Computed Style:
background-attachment: scroll;
background-clip: border-box;
background-color: #D00;
background-image: none;
background-origin: padding-box;
border-bottom-color: #B00;
border-bottom-style: solid;
border-bottom-width: 1px;
border-left-color: #B00;
border-left-style: solid;
border-left-width: 1px;
border-right-color: #B00;
border-right-style: solid;
border-right-width: 1px;
border-top-color: #B00;
border-top-style: solid;
border-top-width: 1px;
color: white;
cursor: auto;
display: inline;
float: none;
font-family: 'Lucida Sans Unicode';
font-size: 16px;
font-weight: 600;
height: auto;
line-height: 23px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
padding-bottom: 17px;
padding-left: 10px;
padding-right: 10px;
padding-top: 17px;
text-decoration: none;
width: auto;
---Append---
<div id="LinkContainer">
<div class="Link">
Variable Length Text A
</div>
<div class="Link">
Variable B
</div>
<div class="Link">
Variable Length Text C Really Long
</div>
<div class="Link">
Var D
</div>
</div>
#LinkContainer
{
position:absolute;
float: left;
margin-top:165px;
margin-bottom:5px;
margin-left:225px;
width:680px;
}
.Link
{
float:left;
margin: 0px 1px 0px 1px;
padding: 00px 0px 20px 0px;
color: #EFF;
font-weight:600;
font-family:Lucida Sans Unicode;
font-size: 16px;
}
.mnu-hover
{
background: #C00;
text-decoration: none; /* color: #FFF; */;
border: solid 1px #B00;
padding: 15px 10px 15px 10px;
margin: 0 0 0 0;
color: #EEE;
}
.mnu-hover:hover
{
background: #D00;
border: solid 1px #B00;
padding: 17px 10px 17px 10px;
color: #FFF;
}
This isn't something you can fix. If the text has to look perfect in every browser on every OS, use an image.
<ul id="LinkContainer">
<li class="=Link">
Variable Length Text A
</li>
<li class="=Link">
Variable B
</li>
<li class="=Link">
Variable Length Text C Really Long
</li>
<li class="=Link">
Var D
</li>
</ul>
.Link a {
background-image:url(title_sprite.png);
background-repeat:no-repeat;
height:40px;
text-indent:-999em;
}
.Link a.var_a {
background-repeat:no-repeat;
background-position:0 0;
width:200px;
}
.Link a.var_b {
background-repeat:no-repeat;
background-position:0 -45px;
width:150px;
}
.Link a.var_c {
background-repeat:no-repeat;
background-position:0 -90px;
width:75px;
}
.Link a.var_d {
background-repeat:no-repeat;
background-position:0 -135px;
width:90px;
}