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>
Related
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
I have my css button that wont work, it only comes up as a simple hyper link..
I have it all setup right with the css reference and everything.. Heres a look at my code:
.B1 {
background-color:#44c767;
-moz-border-radius:16px;
-webkit-border-radius:16px;
border-radius:16px;
border:4px solid #18ab29;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-family:arial;
font-size:17px;
padding:18px 63px;
text-decoration:none;
text-shadow:1px 0px 8px #2f6627;
}
.B1:hover {
background-color:#5cbf2a;
}
.B1:active {
position:relative;
top:1px;
}
<!DOCTYPE html>
<html>
<title>Tutorial</title>
<head>
<link rel="stylesheet" type="text/css" href="file:///Users/lucasaltmann/Desktop/styles2.css">
</head>
<body bgcolor="Green">
<center>
<h1 style="color:orange">Welcome to CocoaCraft!</h1>
<a class="B1" href="http://cocoacraftnetwork.buycraft.net">Donate</a>
</center>
</body>
</html>
CSS is top and HTML is bottom. It runs fine when I run it on here but its not working for me..
PS: I am running mac snow leopard and firefox (Chrome did not work either)
It works here but not on your computer - well the CSS is probably not loaded correctly. You have an absolute path to the CSS file, so try this instad:
<!DOCTYPE html>
<html>
<title>Tutorial</title>
<head>
<link rel="stylesheet" type="text/css" href="styles2.css">
</head>
<body bgcolor="Green">
<center>
<h1 style="color:orange">Welcome to CocoaCraft!</h1>
<a class="B1" href="http://cocoacraftnetwork.buycraft.net">Donate</a>
</center>
</body>
</html>
Put you .html and style2.css in the same folder and it should work.
Another solution:
Replace your html with this:
<!DOCTYPE html>
<html>
<title>Tutorial</title>
<head>
<style>
.B1 {
background-color:#44c767;
-moz-border-radius:16px;
-webkit-border-radius:16px;
border-radius:16px;
border:4px solid #18ab29;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-family:arial;
font-size:17px;
padding:18px 63px;
text-decoration:none;
text-shadow:1px 0px 8px #2f6627;
}
.B1:hover {
background-color:#5cbf2a;
}
.B1:active {
position:relative;
top:1px;
}
</style>
</head>
<body bgcolor="Green">
<center>
<h1 style="color:orange">Welcome to CocoaCraft!</h1>
<a class="B1" href="http://cocoacraftnetwork.buycraft.net">Donate</a>
</center>
</body>
</html>
Now the CSS is inside the html file.
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 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%;
}
When we normally zoom in or zoom out a webpage (by pressing Ctrl + or Ctrl -) the entire page components remain together like the following screenshot of this page
But when I zoom my webpage instead of zooming to a specific area ,the components get distorted
Here is my html
<!doctype html>
<html>
<head>
<title>Are you ready for the show?</title>
<link rel="stylesheet" href="css/global.css"/>
</head>
<body>
<div id="header">
<a href="home.php">
<img src="../images/logo.png"></img>
<span id="logo_name">Dooms Day</span>
</a>
<span id="login">
LogIn
</span>
</div>
</dody>
</html>
and the css
*
{
margin:0;
padding:0;
}
body
{
font-family:Palatino,Georgio,"Times New Roman",Times,serif;
}
#header
{
position: relative;
width:100%;
background: none repeat scroll 0% 0% rgb(50,51,47);
height:80px;
}
#header a
{
text-decoration: none;
color:white;
}
#logo_name
{
font-size:25px;
}
#header img
{
padding-top:12px;
margin-left:10%;
}
#login
{
width:auto;
height:auto;
font-size:20px;
padding:8px 20px 8px 20px;
background-color: rgb(100,192,0);
margin-left: 60%;
border-radius: 10px
}
What should I do to achieve this effect as its necessary for symmetry?