I'd like to add a blue dot down below the menu. (Only with current page)
How should I do with CSS?
https://dayup5.website/home/
Please help, Thank you.
<Nav>
<m1>首頁</m1><br><m2>Top</m2>
</Nav>
#Nav{
text-align:center;
line-height:1;
}
m1{
font-size:14px;
letter-spacing:6px;
font-weight:lighter;
}
m2{
font-size:8px;
letter-spacing:2px;
-webkit-transform:scale(0.67);
display:inline-block;
font-weight:lighter
}
Consider using css ::before or ::after pseudo element
m1 {
position:relative;
}
m1::before {
background: blue;
width: 5px;
height: 5px;
content: " ";
position: absolute;
top:20px;
left: 50%;
margin-left:-2.5px;
display: inline-block;
border-radius: 50%;
}
<Nav>
<m1>首頁</m1><br>
</Nav>
Related
Here is my code:
ul li {
display: inline-block;
position: relative;
top: -15px;
width: 800px;
border: 1px solid gray;
}
#home {
position: relative;
margin-left: -35px;
display: inline-block;
}
<nav>
<ul>
<li><a class="vari" href="..." id="home"><span>Home</span></a>
</li>
<li><a class="vari" href="">Music videos</a>
</li>
</ul>
</nav>
The “Music videos” text doesn’t get a full border but something and the “Home” text doesn’t get any border — why?
I want a border and a width of 800px for both of them.
Please check this fiddle Demo. As you need both menu in one line so i used display:inline-block on a and border on ul. Hope this will solve your issue. Ty
You need to remove the margin-left property:
#home {
position:relative;
display:inline-block;
}
Try to check this codepen: http://codepen.io/anon/pen/LVwdXj
Check this link https://jsfiddle.net/5n6e5vx9/ .Remove margin-left from home id
#home {
position:relative;
//margin-left:-35px;
display:inline-block;
}
Remove margin-left:-35px; as this property is keeping 'Home' out of the border.
please try this one:
Demo
Css Code:
ul li {
display: inline-block;
position: relative;
top: -15px;
width: 800px;
border: 1px solid gray;
}
#home {
position:relative;
display:inline-block;
text-decoration:none;
padding:5px;
}
#music
{
text-decoration:none;
padding:5px;
}
Problem is about , it works great on desktop but on mobile fails....
[http://jsfiddle.net/9vv914uL/][1]
i want to make this divider responsive... because it is working very well on higher resolutions , as you can see....
and bonus is to make words inside tag in different colors...
this is css stylesheet:
.divider {
text-align:center;
font-family: 'montserrat';
}
.divider hr {
margin-left:auto;
margin-right:auto;
width:40%;
}
.left {
float:left;
}
.right {
float:right;
}
this is
<div style="padding-top:10px; padding-bottom:20px;"class="divider">
<hr class="left" style="margin-top:12px;"/>BLUE RED<hr class="right" style="margin-top:12px;"/>
</div>
I dont know what to say about this problem, this is just plain text. I must go back to the stars <3
:)
There are other ways that this can be handled that would work better for what you are trying to do. In my example, I am using both a heading element and an empty div. The text in the heading element can be expanded as much as you would like without needing to worry about available space, and the solution is responsive out of the box.
HTML
<h3 class="divider">
<span>Title</span>
</h3>
<div class="divider">
<span></span>
</div>
CSS
.divider {
border-color: #000;
border-style: solid;
border-width: 0 0 1px;
height: 10px;
line-height: 20px;
text-align:center;
overflow: visable;
}
.divider span {
background-color: #FFF;
display: inline-block;
padding: 0 10px;
min-height: 20px;
min-width: 10%;
}
Fiddle: http://jsfiddle.net/6uux0cbn/1/
I'd probably do it like this rather than messing with floats:
.divider {
text-align: center;
}
.divider:after {
content: "";
height: 1px;
background: #000;
display: block;
position: relative;
top: -8px; /* this value depends on the font size */
}
.divider > span {
background: #fff;
padding: 0 10px;
position: relative;
z-index: 1;
}
<div class="divider"><span>BLUE RED</span></div>
HTML:
<div style="padding-top:10px; padding-bottom:20px;"class="divider">
<hr class="left" style="margin-top:12px;"/>
<div class="title">BLUE RED</div>
</div>
CSS:
.divider {
text-align:center;
font-family: 'montserrat';
position:relative;
height: 68px;
}
.div hr {
width:100%;
position: absolute;
z-index: 888;
}
.title {
position: absolute;
left:50%;
width:100px;
margin-left: -50px;
z-index: 9999;
top:15px;
background: white;
}
so I have this little beginning of a site and I want the top menu to stay on top of anything else. I used position:fixed and now it does stay on top of everything except for one div that display a logo... I tried using z-index but that didn't help. How do I force that header to stay on top without using Js if possible...
The "blackBar" passes on top of the heading but it's the only this that does...
<body>
<div id="pageBloc">
<header>
<nav>
<ul>
<li>Stuff1</li>
<li>Stuff2</li>
<li>Stuff3</li>
<li>Stuff4</li>
<li>Stuff5</li>
</ul>
</nav>
</header>
<div id="topBloc">
<div id="blackBar">
<p id="logo"><img src="Images/logoSmall.png" alt="logo"</p>
<h1 id="titrePrincipal">MyTitle</h1>
<h2 id="soustitrePrincipal">SubTitle/h2>
</div>
</div>
<section id="temporatySection">
</section>
</div>
</body>
Here's the CSS
body, html
{
margin: 0px;
padding: 0px;
height:100%;
}
#pageBloc
{
height:100%;
}
/*Header*/
header
{
text-align:center;
background-color: #26292E;
height: 40px;
width: 100%;
position:fixed;
}
nav ul, nav li
{
margin-top:5px;
text-transform:uppercase;
display: inline-block;
list-style-type:none;
}
#topBloc
{
background: url('Images/backgroundBloc12.jpg') fixed center;
background-size:cover;
width: 100%;
height: 100%;
}
#blackBar
{
background: rgba(38,41,46,0.80);
position:absolute;
bottom:15%;
width: 100%;
}
#logo
{
padding: 3px;
text-align: center;
}
#titrePrincipal
{
display:none;
text-align:center;
color: white;
}
#soustitrePrincipal
{
text-align: center;
color:black;
}
#temporarySection
{
height: 1000px;
}
Add position: relative; z-index: -1; to #logo.
Then, make sure that you add z-index: -2 to #blackbar.
See here: http://jsfiddle.net/davidpauljunior/gGMzD/1/
Instead of position fixed, you can try
position: absolute
top: 0
left: 0
right: 0
z-index: 100
but if you must use position fixed, you can disregard this and see the answer above.
css
.bottomdotline{
border-bottom-style: dotted;
border-bottom-width:2px;
display:table-cell;
width:100%;
}
html
<td >Name: <span class="bottomline"> <? echo $name; ?></span></td>
<td ></td>
How can I make the bottom border after text, if I use next rows will be affected of the width. fyi: the php value will display on top of border
My goal:
Name:__________________
I found similar post and answer here How to underline blank space in CSS?
But I want to use class
Add css:
.bottomline:after{
content: " ";
border-bottom-style: dotted;
border-bottom-width:2px;
display:table-cell;
width:200px;
}
Here is live example http://jsfiddle.net/aghd7/
The problem is that the span has no width . Easiest solution is to make it have
display:inline-block
and min-width
Here's another solution.
<div class="container">
<h1 class="offset-border">Hello World</h1>
</div>
And the CSS.
.container{
overflow:hidden;
}
.offset-border{
display: inline-block;
padding-right: 10px;
position: relative;
}
.offset-border::after{
background: #000 none repeat scroll 0 0;
bottom: 6px;
content: "";
display: inline-block;
height: 1px;
left: 100%;
position: absolute;
width: 5000px;
z-index: -1;
}
Use this below code.... same as example..
ul {
display: inline-block;
}
li {
display: inline-block;
margin-right: 10px;
position: relative;
}
.underline:after {
border-bottom: 2px solid #000;
content: '';
position: absolute;
left: 0;
right: 0;
width: 50%;
bottom: 0;
margin: 0 auto;
}
<ul>
<li class="underline">Lesson Planner</li>
<li>Two</li>
<li>Three</li>
</ul>
Please take a look at this laytout which i built with divs:
First of all you can ignore Header section
So Content has to be centered exactly at the center and it has a fixed width which is easy, but Left Column needs to extend from left side until it reaches Content and here is the difficult part, since the gap betwen Left Column and Content can be any length it's hard to know what width to set.
Now i know it would be fairly easy to do this with javascript but i would like to avoid that if possible.
EDIT as requested here is the code:
<div class="left_column"></div>
<div class="content"></div>
.left_column{
width:100px;
height:100px;
float:left;
}
.content{
width:100px;
height:100px;
margin:auto;
position:relative;
}
Take a look at Object-Oriented CSS. In particular, check out their grids page
tried percentages?
overflow: auto;
padding: 10px;
width: 45%;
try float left float right as well as display inline, you could also try width auto but that don't work too well
float:left;
width:auto;
height: auto;
display: inline;
there is also one more trick used in menus
<div id="mail_menu">
<ul>
<li><a href=something</a></li>
</ul>
</div>
css
#mail_menu {
position: relative;
top: 0px;
left: 0px; /* LTR */
z-index: 3;
color: #000;
}
#mail_menu ul {
list-style-type: none;
}
#mail_menu li {
display: inline;
float:left;
margin: 0px;
padding: 3px;
}
#mail_menu a {
color: #000;
background: #FFF;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
margin: 1px;
border-color:#CCC;
border-width:1px 0;
padding: 2px;
float:left;
border-width:1px;
border-style:solid;
border-bottom-color:#aaa;
border-right-color:#aaa;
border-top-color:#ddd;
border-left-color:#ddd;
border-radius:3px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
}
#mail_menu a:hover {
color: #0000DD;
text-decoration: none;
background-image: url(/images/lyel.png);
background-repeat: repeat-x;
}
css to middle something
.middle {
display: block;
width: 50em;
margin-left: auto;
margin-right: auto
}
and finally some table values for display to mess with
.td {
display: table-cell;
display:inline
}
.wrap{
position: inherit;
}
.tr {
display: table-row;
display:inline
}
table {
border-collapse: collapse;
}
th {
text-align: left; /* LTR */
padding-right: 1em; /* LTR */
border-bottom: 3px solid #ccc;
}
I would use percentages, but go 1% short of where you should. I've found a lot of times a browser will "round up" a pixel or something, so if you have your percentages totaling 100%, any extra added will push a div below.
For instance, if you wanted two divs, one on the right and one on the left, have one of them have width:49%; and the other width:50%;.
This can be accomplished using this hack, please try this:
div.header { height: 50px; line-height: 50px; background-color: #222; color: #eee; }
div.wrapper { background-color: #b261da;position: relative;z-index: 0; }
div.wrapper div.content { width: 600px;margin: 0 auto; background-color: #6189fe; color: #fefefe; }
div.wrapper div.left-column { background-color: #00fe72; position: relative;width: 550px;float: left;z-index: -1000; }
with this markup:
<div class="header">Header</div>
<div class="wrapper">
<div class="left-column">Left Column</div>
<div class="content">Content</div>
</div>
Note the left-column will be cutted if you resize the screen too much. Either way, I hope it helps.