I would love to figure out how to create a button with CSS that has 'brackets' on each side. To clarify, not just the brackets you get by typing them, but larger brackets, like this:
You can use the before and after pseudo selectors with the content attribute:
button {
font-size: 15px;
font-weight: bold;
background: none;
border: none;
white-space: nowrap;
}
button::before {
content: "[ ";
font-size: 1.5em;
}
button::after {
content: " ]";
font-size: 1.5em;
}
button.bigtext {
font-size: 80px;
}
<button>Some Text</button>
<br />
<button class="bigtext">Some Text</button>
Here an approach where you can edit size thickness and length of the brackets involving box-shadow
.brackets {
width: 200px;
height: 50px;
box-shadow: inset 0px 0px 0px 5px black;
background: white;
position: relative;
}
.button {
height: 50px;
width: 80%;
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
border: none;
background: white;
font-size: 1.6em;
font-weight: bold;
}
<div class="brackets">
<button class="button">
Button
</button>
</div>
There are a few things you can do to achieve this.
First and easiest: Create a button background in Photoshop or whatever and use that as your button background.
Second: Type the brackets and button text you want and then style the separate pieces.
HTML:
<div class="button">
<p><span class="large">[</span>Button<span class="large">]</span></p>
</div>
CSS:
p {
font-size: 20px;
}
.large {
font-size: 40px;
}
Those are they straight forward ways I can think of that are really quick and easy.
Not sure I follow the question. Just put a bracket around it. Example below.
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1252"><title>Title Here </title>
</head>
<body>
<br>
<center>Your Title</center>
<br>
Some Text Data Here
<style type="text/css">
#modernbricksmenu { padding: 0; width: 100%; background: transparent; voice-family: ''}''; voice-family: inherit; }
#modernbricksmenu ul { font: bold 11px Arial; margin:0; margin-left: 40px; /*margin between first menu item and left browser edge*/ padding: 0; list-style: none; }
#modernbricksmenu li { display: inline; margin: 0 2px 0 0; padding: 0; text-transform:uppercase; }
#modernbricksmenu a { float: left; display: block; color: white; margin: 0 1px 0 0; /*Margin between each menu item*/
padding: 5px 10px; text-decoration: none; letter-spacing: 1px; background-color: black; /*Default menu color*/ border-bottom: 1px solid white; }
#modernbricksmenu a:hover { background-color: gray; /*Menu hover bgcolor*/ }
#modernbricksmenu #current a { /*currently selected tab*/ background-color: #D25A0B; /*Brown color theme*/ border-color: #D25A0B; /*Brown color theme*/ }
#modernbricksmenuline { clear: both; padding: 0; width: 100%; height: 5px; line-height: 5px; background: #D25A0B; /*Brown color theme*/ }
#myform { /*CSS for sample search box. Remove if desired */ float: right; margin: 0; padding: 0; }
#myform .textinput { width: 190px; border: 1px solid gray; }
#myform .submit { font: bold 11px Verdana; height: 22px; background-color: lightyellow; } </style>
<div id="modernbricksmenu"> <ul> <li style="margin-left: 1px">
Home</li> <li>
New</li> <li id="current">
Revised</li> <li>
[Tools]</li> <li>
Forums</li> </ul>
</div>
<div id="modernbricksmenuline"> </div>
</body>
</html>
I didn't want to change my template, so I've come up with a pure CSS solution.
It'll also work with every background.
.btn {
position: relative;
border: none;
background: none;
padding: 8px 24px;
}
.btn::before,
.btn::after {
position: absolute;
top: 0;
bottom: 0;
width: 8px;
border: 2px solid #000;
content: "";
}
.btn::before {
left: 0;
border-right-width: 0;
}
.btn::after {
right: 0;
border-left-width: 0;
}
<a class="btn btn-primary">Buttton</a>
Related
The problem is that the elements are not appearing next to each other as I want them to.
all three elements are already on float left and in the right order but they are still not lining up in the right way.
(so probably, the problem is that some elements are position:absolute or relative while they don't need to. The problem is: you can't change that without disrupting the drop-up menu of #Timer. That)
green_button {
background-color: #027fed;
color: white;
border-radius: 2px;
cursor: pointer;
float: right;
position: relative;
}
.green_button:active {
background-color: #eee;
color: black;
}
.keuze {
position: absolute;
width: 100px;
height: 100px;
float: left
}
#timer {
color: black;
background: #eee;
border: none;
padding-left: 10px;
font-size: 12px;
border-radius: 2px;
float: left;
padding: 12px 12px;
cursor: pointer;
list-style-type: none;
position: Relative;
margin-top: -14px;
width: 80px;
}
#timer:hover {
color: white;
background: #027fed;
}
li {
background-color: #eee;
font-size: inherit;
width: 150px;
position: relative;
float: left;
bottom: 31px;
left: 0;
display: block;
font-size: 12px;
text-decoration: none;
font-family: tahoma;
color: black;
width: 50px;
height: auto;
border: 1px solid #;
border-width: 1px 1px 0 0;
background: #eee;
background-color: rgb(238, 238, 238);
padding-left: 10px;
line-height: 38px;
border-radius: 2px;
height: auto;
line-height: 1em;
padding: 5px 10px;
width: 129px;
margin-bottom: 1px;
margin-left: 431px;
}
li:hover {
cursor: pointer;
background-color: #027fed;
color: white
}
.list {
display: none;
list-style-type: none;
position: absolute !important;
}
.keuze:hover .list {
display: block
}
.messages_compose {
padding: 10px;
margin-bottom: auto;
}
.messages_textarea_container {
display: inline-block;
width: 400px;
margin-left: 10px;
}
.messages_textarea {
border: 3px solid lightgray;
margin-top: 0;
margin-bottom: 10px;
padding: 5px;
width: 400px;
height: 40px;
resize: none;
float: left;
border-radius: 2px;
position: absolute;
}
.button {
border: none;
font-size: 12px;
padding: 12px 12px;
height: 40px text-align: center;
}
<div class="messages_compose">
<div class="vraag">CV</div>
<div class="messages_textarea_container">
<textarea class="messages_textarea"></textarea>
<button class="button green_button">Stuur</button>
<ul class="keuze">
<button id="timer">1 Jaar</button>
<div class="list">
<li id="jaar">jaar</li>
<li id="maand">maand</li>
<li id="week">week</li>
<li id="dag">dag</li>
</div>
</ul>
</div>
<script>
document.getElementById("jaar").onclick = function() {
jaar()
};
document.getElementById("maand").onclick = function() {
maand()
};
document.getElementById("week").onclick = function() {
week()
};
document.getElementById("dag").onclick = function() {
dag()
};
</script>
<script src="../scripten.js"></script>
</div>
If you want them side by side (if width allows), to make things simpler, make sure they are inline elements.
textarea and button are inline elements by default and unsorted-list are block element by default
Inline Elements
Block Elements
So basically, all you need is to change your ul to display: inline-block;
* {
padding: 0;
margin: 0;
vertical-align: text-top;
}
green_button {
background-color: #027fed;
color: white;
border-radius: 2px;
cursor: pointer;
}
.green_button:active {
background-color: #eee;
color: black;
}
.keuze {
display: inline-block; /* added */
width: 100px;
list-style: none;
}
.keuze li {
width: 100%;
}
#timer {
color: black;
background: #eee;
border: none;
padding-left: 10px;
font-size: 12px;
border-radius: 2px;
padding: 12px 12px;
cursor: pointer;
list-style-type: none;
width: 80px;
}
<div class="messages_compose">
<div class="vraag">CV</div>
<div class="messages_textarea_container">
<textarea class="messages_textarea"></textarea>
<button class="button green_button">Stuur</button>
<ul class="keuze">
<button id="timer">1 Jaar</button>
<div class="list">
<li id="jaar">jaar</li>
<li id="maand">maand</li>
<li id="week">week</li>
<li id="dag">dag</li>
</div>
</ul>
</div>
</div>
In addition, I have removed all your float and position from your css which I think as #Temani Afif says, you were just trying fix the issue by adding more to it.
I also have added followings just to make it tidier which is irrelevant to your issue. (That is to remove the default margin, padding and vertical align from all html elements to make it tidier and avoid unexpected behavior of different browsers)
* {
padding: 0;
margin: 0;
vertical-align: text-top;
}
I am using HTML lists for dropdown menus in my navbar. The problem I have come across is that when the browser window is small, the dropdown goes off-screen to the left.
I am wondering on the best way to simply center it and stretch the content across 100% at a small screensize.
The problem is the notifications menu (hover over the little envelope).
I've put up some code I ripped from the site which gives you an idea: http://codepen.io/anon/pen/eBeYXd
Hover over the far-right item and the menu will appear, make the browser the size of a mobile screen and see the dropdown move off to the left being cut off.
Code below:
<div class="navigation-main">
<div class="container group">
<ul class="header-navbar">
<!-- notes test -->
<li class="dropdown pull-right alerts-box">
<img src="/templates/default/images/comments/envelope.png" alt=""/> <span class="badge badge-important">1</span> <b class="caret"></b>
<ul class="dropdown-menu">
<li><strong>liamdawe</strong> replied to "test a test test a test test a test test a test te…"</li>
<li class="divider"></li><li>Clear all</li>
<li class="divider"></li>
<li>See all</li>
</ul>
</li>
<!-- notes test -->
</ul>
</div>
</div>
CSS code:
*, *:before, *:after {
box-sizing: inherit;
}
.navigation-main {
position: fixed;
top: 0;
width: 100%;
height: 49px;
z-index: 10001;
background-color: #222;
}
.header-navbar {
list-style: none;
padding: 0;
margin: 0;
}
.header-navbar>li {
float: left;
}
.header-navbar>.pull-right {
float: right;
}
.header-navbar>li>a {
display: block;
color: #999;
padding: 14px;
}
.header-navbar>.active>a {
color: #FFF;
background-color: #000;
}
.header-navbar>li>a:hover {
color: #FFF;
text-decoration: none;
}
.header-navbar>.header-brand>a {
line-height: 0;
padding: 9px 14px;
margin-left: -14px;
}
.header-search {
padding: 9px 0;
}
.header-search .search-field {
width: auto;
background-color: #333;
border: 1px solid #5c5c5c;
outline: none;
line-height: 19px;
height: 30px;
color: #fff;
margin: 0;
}
.dropdown:hover .dropdown-menu {
display: block;
}
.header .dropdown-menu {
border-top-width: 1px;
}
.header .dropdown:hover .caret {
border-top-color: #FFF;
}
.header-avatar {
padding: 9px 0 9px 14px;
}
.dropdown {
position: relative;
}
.caret {
display: inline-block;
width: 0;
height: 0;
vertical-align: middle;
border-top: 4px solid #999;
border-right: 4px solid transparent;
border-left: 4px solid transparent;
content: ""
}
.dropdown-menu {
position: absolute;
top: 49px;
left: 0;
z-index: 999;
float: left;
min-width: 160px;
padding: 5px 0;
margin: 0;
list-style: none;
text-align: left;
background-color: #222;
border: 1px solid #000;
box-shadow: 0 3px 12px rgba(0, 0, 0, .15);
display: none;
}
.dropdown-menu li {padding: 0 15px 2px;}
.dropdown-menu .divider {
*width: 100%;
height: 1px;
padding: 0px;
margin: 9px 0;
*margin: -5px 0 5px;
overflow: hidden;
background-color: #383838;
}
.dropdown-menu a {
display: block;
clear: both;
line-height: 26px;
color: #999;
white-space: nowrap;
padding: 2px;
}
.dropdown-menu li>a:hover, .dropdown-menu li>a:focus {
text-decoration: none;
color: #fff;
}
.pull-right .dropdown-menu {
right: 0;
left: auto;
}
.pull-right {
float: right;
}
.nav-avatar {
vertical-align: middle;
background-color: #333;
}
play with min-width: or max-width: and probably allow your text to wrap
something like this
.dropdown-menu a {
display: block;
clear: both;
line-height: 26px;
color: #999;
min-width: 200px;
white-space: wrap;
padding: 2px;
}
I am new to learning HTML and CSS. I am attempting to recreate some of the design interfaces of a certain site, but have run into a problem. The navigation menu, though in the header, appears below it for some reason. I have attempted multiple combinations of fixes but they do not end up working and I am too much of a novice to completely understand why it may be doing such a thing. I have uploaded my site and left the directories open to explore. The code is very small, so it should be somewhat easier to point out my mistake.
http://razorcloud.cz.cc/
HTML:
<body class="body">
<header class="header">
<img style="padding-left: 20px" src="images/versace-logo.bmp" width="230" height="120" />
<div class="bottom-header">
<div class="navigation-bar">
<ul>
<li>
Home
<div class="dropdown-container dropdown-shadow">
<div class="dropdown-column">
<p>This is a simple test to determine how dynamic and fluid the dropdown-container is.</p>
</div>
</div>
</li>
</ul>
<ul>
<li>
Video
</li>
</ul>
</div>
</div>
<!--<div class="header-alert">
This website is still under development!
</div>-->
</header>
CSS:
.body
{
margin: auto;
width: 95%;
clear: both;
}
.body a
{
color: inherit;
}
.header
{
background-color: black;
color: white;
display: block;
font-family: "GillSansStdRegular";
margin-bottom: 20px;
position: relative;
}
.bottom-header
{
display: block;
position: relative;
padding: 0 20px;
}
.navigation-bar
{
color: white;
display: inline-block;
font-size: 12px;
float: right;
text-transform: uppercase;
}
.navigation-bar > ul
{
border: transparent 1px solid;
border-bottom: 0;
float: left;
height: 34px;
list-style: none;
margin-left: 5px;
}
.navigation-bar > ul a
{
display: block;
line-height: 16px;
margin-right: 23px;
padding: 0px 2px 0px 2px;
text-decoration: none;
}
.navigation-bar > ul:active a
{
background-color: white;
}
.navigation-bar > ul:hover a
{
color: black;
height: 31px;
background: white;
}
.navigation-bar > ul:hover .dropdown-container
{
display: block;
}
.dropdown-column
{
}
.dropdown-container
{
color: black;
display: none;
position: absolute;
z-index: 99;
left: 0;
width: 100%;
border-color: black;
border-top: 2px;
border-top-style: solid;
}
.dropdown-shadow
{
margin-top: 0;
background: url("../images/backgrounds/submenu-bg.png");
-webkit-box-shadow: 0 3px 3px 0 rgba(000,000,000,0.16);
-moz-box-shadow: 0 3px 3px 0 rgba(000,000,000,0.16);
box-shadow: 0 3px 3px 0 rgba(000,000,000,0.16);
}
.dropdown-shadow:after
{
display: block;
clear: both;
}
.header-alert
{
background-color: white;
border-bottom: 2px solid black;
color: black;
font-family: "GillSansStdLightRegular";
font-size: 110%;
text-align: center;
text-transform: uppercase;
width: 100%;
}
You need to float your elements. Inside the header the<img/> should be set to float:left and the navigation container (.navigation-bar) needs to be set to float:right. And you'll need to add a clearfix after the floats:
FIDDLE
I'm trying to build a page that has a lightbox - but I don't want any javascript on it.
I found a tutorial on how to do this, but when I started to add it, I noticed that everytime I click on the link, it scrolls down ever so slightly, hiding the top border of the page.
How can I stop this? Because it ruins the look of the site
HTML
<div id="container">
<div id="header-row">
<div class="logo span4">
<h1>Title <span>.</span></h1>
</div>
</div>
<div id="content">
<p></p>
</div>
</div>
<ul id="lightboxes">
<li id="close"></li>
<li id="lightbox-form">
<div class="box">
<h3>About</h3>
<p>
</p>
x
</div>
<!--[if IE]>
<div class="ie-bg"></div>
<![endif]-->
</li>
</ul>
CSS
html, body {
background: #f8f8f8 url(../img/pattern.jpg);
height: 100%;
width: 100%;
margin: 0;
padding: 0;
border-top: 2px solid #e75967;}
strong { font-weight: 700; }
a:hover { text-decoration: none; }
::-moz-selection { background: #e75967; color: #fff; text-shadow: none; }
::selection { background: #e75967; color: #fff; text-shadow: none; }
.logo h1 {
margin-top: 7px;
padding-left: 50px;
font-family: 'Lobster', cursive;
font-size: 38px;
font-weight: 400;
color: #555;
}
.logo h1 span { color: #e75967; }
#container {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
overflow: auto;}
/* ---------------------------------------------------------- */
/* LIGHTBOXES
/* ---------------------------------------------------------- */
#lightboxes {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
list-style-type: none;
text-align: left;
overflow: hidden;}
#lightboxes li {
width: 100%;
height: 9999px;
position: relative;
background: rgba(0,0,0,.5);}
#lightboxes .box {
position: absolute;
width: 400px;
height: 400px;
left: 50%;
top: 50px;
border: 10px solid #999;
margin-left: -230px;
background-color: #fff;
padding: 20px;}
#lightboxes h3 {
font-weight: normal;
font-size: 1.8461em;
margin: 0 0 0.4583em 0;}
#lightboxes a.close {
position: absolute;
top: 20px;
right: 20px;
display: block;
width: 20px;
line-height: 20px;
text-align: center;
background-color: #ddd;
text-decoration: none;
font-weight: bold;
color: #999;
font-size: 1.2em;}
#lightboxes a.close:hover {
background-color: #999;
color: #fff;}
#lightboxes #close {
background-color: transparent;
z-index: -1;}
Here is a JSFiddle
Sorry for all the code - but it wont let me post it without it
x
using #close in a link like this makes your browser jump to that ID
Haven't pinpointed exactly on which elements it makes a difference, but you can simply add this your your CSS:
*
{
box-sizing: border-box;
-moz-box-sizing: border-box;
}
And it won't jump any more.
I would like to have a little triangle underneath the the text that points up when the user hovers over the different tabs. Here is a bit of code I'm working with.
css navbar
* {
margin: 0;
padding: 0;
list-style: none;
}
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
margin: 10px;
}
.tab {
width: 100%;
padding: 5px;
background: #fff;
color: #000;
cursor: pointer;
font-weight: bold;
border-bottom: 1px solid black;
position: relative;
}
.tab:hover {
background: #a0a0a0;
}
.tab:hover span {
display: block;
}
.tab_child {
padding: 15px;
background: #fff;
}
.selected {
background: #a0a0a0;
}
.contain * {
float: left;
width: 100px;
}
span.triangle {
background-image: url("http://www.inner.org/torah_and_science/mathematics/images/triangle.gif");
background-repeat: none;
display: none;
height: 14px;
width: 16px;
position: absolute;
top: 25px;
left: 25%;
}
<div class="contain">
<div id="one" class="tab selected">Link1</div>
<div id="two" class="tab">Link2</div>
<div id="three" class="tab">Link3</div>
<div id="four" class="tab">Link4</div>
<div id="five" class="tab">Link5</div>
</div>
I think this is probably what you're looking for:
Fiddle
Also, please use semantic markup:
If your using HTML5 wrap your navigation in <nav> tags.
Your links (if they really are going to be links) should be <a> elements.
For a list of links like you have it is advised to use a list (<ul> & <li>).
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
float: left;
width: 20%;
}
nav a {
display: block;
padding: 5px;
border-bottom: 1px solid black;
background: #fff;
color: #000;
font-weight: bold;
position: relative;
}
nav a:hover,
.active {
background: #bbb;
}
nav a:hover:after {
content: "";
display: block;
border: 12px solid #bbb;
border-bottom-color: #000;
position: absolute;
bottom: 0px;
left: 50%;
margin-left: -12px;
}
<nav>
<ul>
<li>Link1</li>
<li>Link2</li>
<li>Link3</li>
<li>Link4</li>
<li>Link5</li>
</ul>
</nav>
Here is a modification to your jsfiddle:
I've added a <span class="arrow"></span> to contain the triangles in the HTML:
<div class="tab_container">
<div id="test1-header" class="accordion_headings header_highlight" >Home<span class="arrow"></span></div>
<div id="test2-header" class="accordion_headings" >About<span class="arrow"></span></div>
<div id="test3-header" class="accordion_headings" >Work<span class="arrow"></span></div>
<div id="test4-header" class="accordion_headings" >Social<span class="arrow"></span></div>
<div id="test5-header" class="accordion_headings" >Contact<span class="arrow"></span></div>
</div>
Here are the changes made to your menu which reduce the size of the triangle and position them at the bottom center of each menu item when hovered over:
CSS:
/*
.accordion_headings:hover{
background:#00CCFF;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid red;
}
*/
.accordion_headings{
position:relative;
}
.accordion_headings .arrow{
display:none;
}
.accordion_headings:hover .arrow{
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid red;
display:block;
position:absolute;
bottom:0;
left:49%;
}
Here is a fiddle that uses an background-image that will display over the hovered menu item. It not pretty but further css should help with that.
UPDATE
Sorry I must have misread that. Here is a working fiddle with a smaller arrow pointing in the proper direction.