I am not able to design a beautiful border in Menu - html

I am trying to add a border with a cut. And I wrote code of it, I did all the things but not able to make a cut in border (like this).
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.box{
background-color:#fff;
border:none;
color:#000;
font-size:30px;
position:relative;
margin:22px;
}
.box::before {
content:'';
width:100%;
height:130%;
top:-10px;
right:0;
bottom:0;
left:-20px;
position:absolute;
border: 3px solid #36b4c2;
border-width:3px 3px 3px 3px;
}
</style>
</head>
<body>
<button class="box" > Menu </button><br><br>
</body>
</html>
Am I on wrong track. Is there any other tag to add a border with a cut.

Add z-index: -1; in :before selector

Related

Css buttons: Zooming is placing them wrong

I have a site, on the index page I have 5 buttons around a picture.
Without zoom everything looks like I want but when I zoom they get misplaced directly. I tried to use relative units instead of absolute ones but then it got worse.
My code:
.myButton4 {
position:absolute;
transition: .5s ease;
top: 25%;
left: 63%;
background-color:#B28F00;
-moz-border-radius:36px;
-webkit-border-radius:36px;
border-radius:36px;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-family:Times New Roman;
font-size:19px;
font-weight:bold;
padding:16px 34px;
text-decoration:none;
text-shadow:0px 0px 0px #82797f;
}
.myButton4:hover {
background-color:#B28F00;
}
.myButton4:active {
position:relative;
top:1px;
Maybe someone can help me? Someone asked for the html:
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="'css.css"/>
<title>title</title>
</head>
<body><center>
<h1>Välkommen till min sida</h1></center></br></br>
<center>
<img src="indexpic.jpg" width="460" height="580"></center>
text
TEXT
</body>

Rotated Link Text Jumps Around On Hover In Firefox

Works perfectly in IE and Chrome. I feel so betrayed by Firefox. It NEVER causes me problems. Hmpht!
I've tried everything me and Google and you guys here can think of to no avail. So I'll just show you all the bits and hope for some really wonderful person to come along and save the day!
SITE
http://mctesterson.net16.net/
CSS
body {
background:#000000 url(images/backmain.jpg) no-repeat fixed;
overflow-y:scroll;
padding:0;
margin:0;
}
body,html,#menu,#menu:before {
height:100%;
}
#title {
position:relative;
font-family:kaushan,"Lucida Sans Unicode",tahoma,arial;
font-size:60px;
color:#000000;
font-weight:bold;
text-align:left;
padding:0;
margin:0 0 40px -60px;
}
#font-face {
font-family:kaushan;
src:url(images/kaushan.eot);
}
#font-face {
font-family:kaushan;
src:url(images/kaushan.ttf);
}
a:link,a:visited,a:hover,a:active {
font-family:kaushan,"Lucida Sans Unicode",tahoma,arial;
color:#CE0000;
font-size:25px;
font-weight:bold;
text-decoration:none;
outline:none;
}
#menu {
position:relative;
text-align:center;
padding:0;
margin:0;
}
#menu:before,#menumiddle {
display:inline-block;
vertical-align:middle;
}
#menu:before {
content:"";
}
#menurotate {
background:url(images/backmain.png) repeat;
float:left;
border:1px solid #000000;
border-radius:5px;
-webkit-transform:rotate(40deg);
-moz-transform:rotate(40deg);
-ms-transform:rotate(40deg);
-o-transform:rotate(40deg);
transform:rotate(40deg);
box-shadow:8px 8px 33px -4px #000000,-8px -8px 33px -4px #000000;
-moz-box-shadow:8px 8px 33px -4px #000000,-8px -8px 33px -4px #000000;
-webkit-box-shadow:8px 8px 33px -4px #000000,-8px -8px 33px -4px #000000;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter:alpha(opacity=100);
-moz-opacity:10;
-khtml-opacity:10;
opacity:10;
padding:10px;
margin:0 20px;
}
#menurotate:hover {
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
filter:alpha(opacity=70);
-moz-opacity:0.7;
-khtml-opacity:0.7;
opacity:0.7;
}
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US">
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<link rel="stylesheet" href="main.css" type="text/css"/>
<meta name="description" content="Things and stuff."/>
<meta name="keywords" content="web design,fiction,blog,"/>
<meta name="robots" content="noindex,follow"/>
<title>Oh Edie!</title>
</head>
<body>
<div id="menu">
<div id="menumiddle">
<div id="title">Oh Edie!</div>
<div id="menurotate">About</div>
<div id="menurotate">Web Design</div>
<div id="menurotate">Fiction</div>
<div id="menurotate">Blog</div>
<div id="menurotate">Contact</div>
</div>
</div>
<div class="clear"></div>
</body>
</html>
Thank you in advance for all your lovely help :o)
To avoid this text effect and still have this opacity effect,
you may set hover the links a translucide mask instead switching opacity;
#menurotate:hover:before {
content:'';
position:absolute;
top:-0px;
left:-0px;
right:-0px;
bottom:-0px;
background:rgba(255,255,255,0.4);
border-radius:5px;
box-shadow:0 0 20px rgba(255,255,255,0.6)
}
or to reduce this jumpy effect, a transition could smoother this defaut :
#menurotate {transition:0.5s;}
And as mentionned , id can only be used once per document, turn id="menurotate" into class="menurotate" and update selectors #menurotate to .menurotate in style sheet.

Elements break on Window Resize

Please consider that I am a newbie in CSS!
I am trying to build a simple webpage having some CSS properties, but the problem is that my webpage is alright in fully maximized window but the design breaks down when I try to re-size the browser window.
Webpage source :
<html>
<head>
<title>Registration From</title>
<style type="text/css">
body
{
background-color:#d2d2ff;
margin:0;
padding:0;
width:100%;
}
header
{
margin:0px;
padding:0px;
height:90px;
background-color:#a0b7e0;
box-shadow:0px 0px 90px #00000f;
}
footer
{
margin-top:40%;
height:40px;
background-color:#a0b7e0;
box-shadow:0px 0px 30px #00000f;
position:relative;
}
.text_h
{
text-align:center;
color:white;
font-size:65px;
text-shadow:2px 2px 1px #555555;
}
.text_f
{
text-align:center;
color:#ffffff;
font-size:15px;
text-shadow:2px 2px 1px #555555;
padding-top:0.7%;
}
cont1
{
height:43%;
width:12%;
border:1px solid black;
background-color:#c9c9c9;
float:left;
margin-top:2%;
margin-left:1%;
border-radius:7px;
box-shadow:0px 2px 15px #00000f;
}
cont2
{
height:73%;
width:84%;
border:1px solid black;
background-color:#e2e2e2;
float:left;
margin-top:2%;
margin-left:2%;
border-radius:7px;
box-shadow:0px 2px 15px #00000f;
vertical-align: top;
}
.ql
{
text-align:left;
color:#829fd7;
font-size:20px;
font-weight:bold;
text-shadow:0px 0px 1px #ffffff;
padding-left:4%;
}
.list
{
color:#1f1f1f;
font-size:18px;
text-shadow:0px 1px 1px #555555;
list-style-type: circle;
}
a
{
text-decoration:none;
}
a:hover
{
color:white;
font-weight:bold;
padding-left:4%;
}
</style>
</head>
<body>
<header>
<div class="text_h">Basic Homepage</div>
</header>
<cont1>
<p class="ql">Quick Links</p>
<ul class="list">
<li>Homepage</li><br>
<li>Contact Us</li><br>
<li>About Us</li><br>
<li>Message</li><br>
<li>Registration</li>
</ul>
</cont1>
<cont2></cont2>
<footer>
<div class="text_f">© 2014 Neeraj Singh</div>
</footer>
</body>
</html>
Can anyone please suggest me the right way to do it?
So I see a couple issues with your code that I would definitely go ahead and fix:
1) <cont1> and <cont2> are not valid HTML tags. If you want to differentiate between two of the same tags, use classes or ids.
2) The top of your document is missing some key items which make a page render correctly. Replace <html> with <!DOCTYPE html> and add the following meta tags before your <title> tag:
<meta charset='utf-8' />
<meta HTTP-EQUIV="Pragma" CONTENT="no-cache">
<meta HTTP-EQUIV="Expires" CONTENT="-1">
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
As for your question, it depends on your definition of when a design 'breaks down.' If you're talking about the word wrap of the header, you can apply a mid-width to your css, which will force the page to be scrollable when the screen becomes too small. To avoid future issues with this, you could put the min-width on the html and body elements of the page. Like:html, body { min-width:800px;}. Hope that helps to get you started!
What you will need to do is use CSS Media Queries to apply styling at specific screen size breakpoints. The should look like this:
#media screen and (min-width:###px ) and (max-width: ###px ) {
/* enter styles that appliy here */
}
Use these for diferent screen sizes. I use one for mobile phones and one for tablets. These can go either at the top or bottom of your stylesheet. But for readability keep the together.

DIV images doesn't show in Firefox

I have two animated .gif images in my webpage, but they are not being displayed in Firefox. It works on IE, Safari and Chrome. I have read other posts but I couldn't find a solution that works. Could someone help please?
This is the url:
http://www.lokalbericht.unibe.ch
Following is the code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Lokalbericht - Hermann Burger</title>
<style type="text/css">
.text_body {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
}
body {
background-color:#000000;
background-image:url(images/intro/background_paper.jpg);
background-position:center 50px;
background-repeat:no-repeat;
background-attachment:fixed;
}
div.soon {
content:url(images/intro/coming_soon.gif);
position: relative;
width:650px;
height:170px;
top:350px;
left:30%;
}
div.lokalbericht {
content:url(images/intro/animation.gif);
width:160px;
height:20px;
position: absolute;
top:300px;
left:45%;
}​​
</style>
</head>
<body>
<div class="soon"> </div>
<div class="lokalbericht"> </div>
​
I checked your link. Try this...
div.soon {
background-image:url(images/intro/coming_soon.gif);
position: relative;
width:650px;
height:170px;
top:350px;
left:30%;
}
div.lokalbericht {
background-image:url(images/intro/animation.gif);
width:160px;
height:20px;
position: absolute;
top:300px;
left:45%;
}​​
Try this :
content: css property which you have set for load background image is creating problem so just replaced it with background-image into both given class div.soon ,div.lokalbericht
background-image:url(images/intro/coming_soon.gif);
background-image:url(images/intro/animation.gif);
In place of :
content:url(images/intro/coming_soon.gif);
I hope this helps you!!
Firefox doesn't support the content property in the same way as Chrome — on img elements and/or when the source is an image.
So you need to use background property instead of content or you need to use :before property the classes like below.
div.soon:before {
content:url(images/intro/coming_soon.gif);
position: relative;
width:650px;
height:170px;
top:350px;
left:30%;
}
div.lokalbericht:before {
content:url(images/intro/animation.gif);
width:160px;
height:20px;
position: absolute;
top:300px;
left:45%;
}​​

Responsive HTML + CSS custom break line - IMAGE

I've been trying to write a code for this for some time but with no success.
What I want to accomplish:
This part isn't hard to do static, but responsive concept gives me nuts.
How should look on small screens:
How it looks now:
Like you see, When I start to resize my window it all start good , but then, in one point the right line go to a new line.
Fiddle:
I made an example of this on Fiddle : http://jsfiddle.net/Gbcfs/8/
CODE:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
.line{width:41%; background-color: #a6a6a6; height:1px; display:inline; margin:17px 2px 2px; float:left; min-width:2px;}
h2 {float:left;}
</style>
</head>
<body>
<div class="line"></div>
<h2>How it works</h2>
<div class="line"></div>
</body>
</html>
I would do this with a border.
Try this:
<h2><span>Heading 2</span></h2>
body {
background-color:#fff;
}
h2 {
border-bottom:solid 1 px black;
text-align:center;
}
h2 span {
background-color:#fff;
padding-bottom:3px;
margin-bottom:-3px;
display:inline-block;
}
http://jsbin.com/aguxoz/1/edit
you can use this code ........... i think this is very helpful..
<div><div class="line"></div>
<h2 style="padding-top:8px">How it works</h2>
<div class="line"></div></div>
.line{width:41%; background-color: #a6a6a6; height:1px; display:inline; margin:17px 2px 0 2px; float:left; min-width:2px;}
h2 {float:left;}
I assume your problem have dependancy on font-size too,
try with the following CSS
<style>
.line{width:30%; background: #a6a6a6 0 50% repeat-x; display:inline; margin:2px 2px 2px; float:left; }
h2 {float:left;}
.autowidth
{
width:auto;
}
</style>
along with the follwoing mark-up
<div class="autowidth">
<div class="line"></div>
<h2>How it works</h2>
<div class="line"></div>
<div>
This can help to an extent.