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.
Related
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.
I am unable to remove default top margin after many attempts. Below is my html and css code. Please suggest where I am lacking?
HTML file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
<title>Sample</title>
</head>
<body>
<div id="maincontainer">
<div id="header">
<h1>Sample</h1>
</div>
</div>
<div id="contents">
Body of page
</div>
</body>
</html>
CSS File
html, body
{
margin:0 auto;
padding:0;
border:0;
background:#fff;
font-family:Times New Roman;
font-size: 16px;
width:1024px;
}
#maincontainer
{
margin:0;
padding:5px;
}
#header
{
margin:0;
padding:0;
height:100px;
background:#8A0808;
text-align:left;
}
h1
{
margin:0;
padding:0 0 0 10px;
font-size: 60px;
font-weight:normal;
color:#fff;
}
padding: 5px; on the #maincontainer might be your issue. There's going to be 5px of white surrounding anything inside of the #maincontainer div.
I seem to be having an issue with my Science project.
For some reason in Safari and Firefox (Haven't tested Chrome), There seems to be a padding/margin on the top menu, the iframe seems to be working fine, I'll replace it with a div for now and links to nowhere, yet the top of the document doesn't and has what I guess would be a top border, I don't recall adding it though. I honestly can't see whats wrong.
<!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>Science Project</title>
<style>
html, body {
margin: 0 0 0 0;
padding: 0;
width: 100%;
height: 100%;
background-color:#000;
}
div.header {
background-image: linear-gradient(to bottom, #FFFFFF 0%, #E0E0E0 100%);
height: 100px;
width: 100%;
font-family:Arial, Helvetica, sans-serif;
color: #000;
border-bottom:20px solid #09F;
border-top-left-radius:12px;
}
p.title {
padding-top: 20px;
padding-left:20px;
}
div.menu {
width:100%;
height:80px;
border-bottom-left-radius:12px;
background-color:#fff;
border-bottom: 1px solid #000;
}
a.button {
display:table-cell;
width:120px;
height:80px;
border-bottom-left-radius: 10px;
background-color:#999;
text-decoration:none;
color:#FFF;
text-align:center;
font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif;
}
.content {
height:calc(100% - 221px);
width:100%;
}
</style>
</head>
<body>
<div class='header'>
<p class='title'>The Big Bang Theory Explained.</p>
</div>
<div class='menu'>
<a class='button' target='content'><div class="centertext"><p>What is the big bang?</p></div></a>
</div>
<div class="content"></div>
</body>
</html>
If you could let me know what exactly I'm doing wrong here, I was able to get this to work last time. I'm just finding this rather odd.
jsfiddle: http://jsfiddle.net/ny4fH/
Thanks!
Josh
You are experiencing margin-collapse.
<p class='title'>The Big Bang Theory Explained.</p>
Paragraphs, by default have a top and bottom margin. This is the problem. You can prevent margin collapse with:
.header { overflow: hidden }
Or other fancy tricks described here. (Fiddle)
your code is ok.
Just remember to reset values of the tags you use. In this case it was the paragraph tag.
p { margin: 0; }
You can as well avoid paragraphs margins by hiding the parent (.header) overflow
.header { overflow: hidden; }
I'm having problems to align correctly the buttons on side by side. I need to build a solution without use the float resource. See it:
<!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>Documento sem título</title>
<style type="text/css">
* {
margin:0px;
padding:0px;
}
a {
display:inline-block;
padding: .63em;
border:1px solid #ccc;
position:relative;
}
.b2 {
padding: .0em 1em .0em 2.1em;
text-decoration:none
}
.icon {
position:absolute;
width:16px;
height:16px;
background-color:#999;
top:50%;
margin-top:-8px;
left:2px;
}
</style>
</head>
<body>
<div style="background-color:#f0f0f0; margin-top:50px; position:relative; height:22px; padding:4px;"> <span class="icon"></span>
<div style="display:inline-block; width:2px; height:22px; background-color:#666;"></div> <span class="icon"></span>
<span class="icon"></span><span>Casa d wqe dde qeasd sd</span>
</div>
<h2 style="background:#999"> test</h2>
<span class="icon"></span><span>Casa d wqe dde qeasd sd</span>
</body>
</html>
Try this here:
div .b2 {
top:-6px;
}
Demo
What about using an unordered list item? See this jsFiddle: jsFiddle
You set it to be inline using the CSS properties like this:
li {
list-style:none;
display:inline;
}
As you can see from the example below, I have a black background and red links to emphasize this problem of dotted borders showing up on my links when they are clicked. I added border-style:none but it doesn't seem to have any effect. Is there some other way to remove the dotted border appearing around the links when they are clicked?
<!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>Untitled Document</title>
<style type="text/css">
html, body
{
height: 100%;
margin: 0;
padding: 0;
font-weight:normal;
font-size:12pt;
font-family: Verdana, Arial, Helvetica, serif, sans-serif;
background:black;
}
#linksouter
{
margin: 0;
padding: 0;
border-style:solid;
border-width:0px;
position:absolute;
top: 0px;
left: 0px;
width: 80px;
text-align:left;
}
#linksinner
{
margin: 80px 0 0 .5em;
width:100%;
display:inline;
height:100%;
}
#linksinner a
{
color:red;
text-decoration: none;
display:block;
margin: 5px 0 0 0;
border-style:none;
}
</style>
</head>
<body>
<div id="linksouter">
<div id="linksinner">
1
1
1
1
1
</div>
</div>
</body>
</html>
the border you see is called an outline. you can get rid of it by putting this style into your a rules:
outline:none;
personally i always define it as a blanket a rule near the top of my stylesheets (i really dislike outlines even though i know they have a use)
a { outline:none; }
hope this helps
That´s not the border, it is the outline.
You can disable it by setting:
a {
outline: none;
}
I believe you need to define all the rules for your link such as Link, Hover, Active, and Visited.
More information: http://www.echoecho.com/csslinks.htm
Have you tried using those pseudo selectors on links?
like
a:hover
a:active
Coz when you set the css in just using a, it will only change the static appearance on the link.