I have a button that I was to put on top of my background image, but whenever I put it down it fills the whole screen. Could someone show me how to put it at the top left of the page? https://www.codecademy.com/byteSurfer77914/codebits/cV0Szc/edit
I don't see your button anywhere, but look at a few of my comments in your code and you should get an idea of where to start modifying your code.
<!DOCTYPE html>
<html>
<p> <!--you can't have a p tag in the <head>-->
</p>
<head>
<link rel='stylesheet' href='style.css'/>
<script src='script.js'></script>
</head>
<body><p2><!--No such thing as a p2 tag-->
</p2>
</body>
</html>
Now your CSS
body {
background-image: url('http://i.ytimg.com/vi/E_gnIn3IBdI/maxresdefault.jpg');
background-repeat: no-repeat;
background-size: cover;
}
//You have multiple body tags. So your css above is being overwritten by this next block. You probably want this to be assigned to an a tag or a button.
body {
display: inline-block;
padding: 8px 13px;
background: #073763 url('http://dabuttonfactory.com/button.png?w=1&h=42&bgt=gradient&bgc=f40808&ebgc=073763') repeat-x;
background: -moz-linear-gradient(#f40808, #073763);
background: -o-linear-gradient(#f40808, #073763);
background: -webkit-linear-gradient(#f40808, #073763);
background: linear-gradient(#f40808, #073763);
border-radius: 8px;
color: #fff;
font: normal 400 26px/1 "Pacifico", cursive;
text-align: center;
text-shadow: 1px 1px 0 #000;
}
Related
I was wondering if it's possible to achieve transparent text inside a container with a solid background color. The transparent text allows you to see the image behind the container.
Something like this
Found this with a google search. The image was created in photoshop. Can this effect be achieved with CSS? If so, how?
Just curious.
I hope this will be what you are looking for
<!DOCTYPE html>
<html>
<head>
<style>
body {
background: url(https://lh3.googleusercontent.com/-iFUzJopkFgY/VfZYTJZtC4I/AAAAAAAAArw/mmFz7fGW0VQ/w1920-h1080/never_alone___-wallpaper-1920x1080.jpg) repeat;
margin: 10px;
}
h1 {
background-color: #fff;
overflow: hidden;
display: inline-block;
padding: 10px;
font-weight: bold;
font-family: arial;
font-size: 200px;
}
span {
background: url(https://lh3.googleusercontent.com/-iFUzJopkFgY/VfZYTJZtC4I/AAAAAAAAArw/mmFz7fGW0VQ/w1920-h1080/never_alone___-wallpaper-1920x1080.jpg) -20px -20px repeat;
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
display: block;
}
.Container {
text-align: center;
}
</style>
</head>
<body>
<div class="Container">
<h1><span>LOS ANGELES</span></h1>
</div>
</body>
</html>
All you just want to do is setting -webkit-text-fill-color or color to transparent and -webkit-background-clip to text. Simple :)
Another approach is by using clip-path and by using an SVG image as the mask - the SVG image itself can contain text. This has support in WebKit and Gecko but not IE ( http://caniuse.com/#feat=css-masks )
https://css-tricks.com/clipping-masking-css/
I am playing with various css properties to see how they work. And my question is, why is it when I set "margin-top" that is more negative than -20px my link doesn't move more upwards any more. Setting a more negative value like -21px and above doesn't move the link more to the top at all.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Nav</title>
<style>
nav { /*height: 60px;*/ border: 2px solid black;}
a {
display: inline-block;
text-decoration: none;
background-color: lightgreen;
color: grey;
font-weight: bold;
padding: 20px;
border-bottom: 2px solid red;
margin-top: -20px; /* more negative value doesn't move the link more to the top */
}
</style>
</head>
<body>
<h1>Testing</h1>
<nav>
link 1
</nav>
<p>some text so we can see how it is affected when setting various properties</p>
</body>
</html>
For inline (inline-block) elements it appears they don't go beyond their height (can't say/find why), so if you for example change padding greater that 20px, you can have a negative margin as big.
If you do change the anchor to a block level element though, the negative margin applies properly.
Sample 1 - padding
nav { /*height: 60px;*/ border: 2px solid black;}
a {
display: inline-block;
text-decoration: none;
background-color: lightgreen;
color: grey;
font-weight: bold;
padding: 40px;
border-bottom: 2px solid red;
margin-top: -40px; /* more negative value doesn't move the link more to the top */
}
<h1>Testing</h1>
<nav>
link 1
</nav>
<p>some text so we can see how it is affected when setting various properties</p>
Sample 2 - block element
nav { /*height: 60px;*/ border: 2px solid black;}
a {
display: block;
text-decoration: none;
background-color: lightgreen;
color: grey;
font-weight: bold;
padding: 20px;
border-bottom: 2px solid red;
margin-top: -40px; /* more negative value doesn't move the link more to the top */
}
<h1>Testing</h1>
<nav>
link 1
</nav>
<p>some text so we can see how it is affected when setting various properties</p>
It will never go more negative because there is a h1 tag which dosen't have any spaces above it to do the margin
you have to use position:absolute; to make a tag move freely
All the elements in your example have what is called (are in) a "Normal Flow". The very first element in the flow is <h1> which is block element, it occupies the whole available width and makes the line break. When you use negative margin-top you go up to the element above. 20px of padding is the available negative margin for the element. To go out of the "Normal flow" you can use position: absolute. To stay in the flow you may use position: relative, and use top: -21px;.
I have a problem with 2 buttons with CSS. I want to align two buttons next to each other. But CSS does not even like I wanted it. Because a button is bottom and a another button is top. See image: http://home.arcor.de/freedownload/buttonwrong.jpg
Maybe you have a solution for me? That would be fully appreciated.
Here is HTML Code:
<head>
<link href="formular.css" type="text/css" rel="stylesheet">
</head>
<span id="form1"><input type="text" id="form_username" name="username"></span><span id="form2"><input type="image" src="loginbutton.png"></span>
And here is CSS Code:
#form_username {
background: white url(username.png) left no-repeat;
background-position: 8px;
color: #adadad;
padding: 8px;
padding-left: 32px;
font-family: Verdana;
font-size: 12px;
width: 200px;
border: 1px solid #e4e4e4;
outline: 3px solid #efefef;
}
Try adding this style to your #form_username
float: left;
Demo
I have some css, which when inside my CSS file isn't applied to my designer in Visual Studio, but is applied to the page when I publish it. This issue is slowing down site development massively as I'm trying to pick up CSS as I go...
Here's a sample bit of CSS:
.header {
background-color: #ccc;
border-bottom: 1px solid #666;
color: #222;
display: block;
font-size: 20px;
font-weight: bold;
padding: 100px 100px 100px 100px;
text-align: center;
text-decoration: none;
text-shadow: 0px 1px 0px #fff;
background-image: -webkit-gradient(linear, left top, left bottom,
from(#ccc), to(#999));
}
Me applying the CSS on the page:
<header>
<asp:Label ID="lblQuestion" runat="server" Font-Bold="True" Font-Size="16pt" Text="Your question goes here..." CssClass="header"></asp:Label>
</header>
Me adding the CSS to the page:
<link rel="stylesheet" type="text/css" href="mycss.css" media="only screen and (max-width: 480px)" />
I'm pretty new to CSS, so I'm hoping someone can tell me what I'm doing that is stopping Visual Studio rendering the CSS properly in the designer...
Also, if I put my CSS tags directly in the page then it works, but I'd much rather keep my CSS out in it's own file, where it can be reused.
Example style working:
<style>
.header {
background-color: #ccc;
border-bottom: 1px solid #666;
color: #222;
display: block;
font-size: 20px;
font-weight: bold;
padding: 100px 100px 100px 100px;
text-align: center;
text-decoration: none;
text-shadow: 0px 1px 0px #fff;
background-image: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#999));
}
</style>
Thanks
I suggest taking a look at Jeff Widmer's blog post, Why does Visual Studio not resolve my CSS class names?
Basically, site relative path's aren't supported by Visual Studio. It is the same reason why intellisense doesn't work for javascript.
He offers a fix for this issue:
<link href="/content/default.css" rel="stylesheet" type="text/css" />
<% if (false) {%>
<link href="../../content/default.css" rel="stylesheet" type="text/css" />
<% } %>
UPDATE:
The problem here was the media element in the link tag for the css. It doesn't appear that VS knows what that tag is and thus doesn't try to resolve the url.
In this case, the css file is in the same folder as the page, so it would work. But, if the css file is moved into another folder, then it would stop working and the fix above would solve the issue.
Greetings. I'm having troubles with the following legacy code. It's fine in everything except IE7, where the submit button disappears. Space is still left for it on the page, but it doesn't show. I've tried various ways of forcing hasLayout, but without success. Any suggestions?
XHTML (XHTML 1.0 Strict DOCTYPE):
<div id="headerFunctionality" class="clearfix">
<div id="headerSearch" class="clearfix">
<form action="http://foo.com" method="GET">
<label for="q">Search</label>
<input id="q" name="q" type="text" class="text" />
<input type="submit" id="btn_search" value="Search">
</form>
</div>
</div>
CSS:
#headerFunctionality {
float: right;
display: inline;
margin: 24px 14px 25px 0;
}
#headerSearch{
float: left;
margin-left: 20px;
width: auto;
}
#headerSearch label{
position: absolute;
top: -5em;
color: #FFF;
}
#headerSearch input.text{
width: 133px;
height: 18px;
border: 1px solid #999;
font-size: 0.69em;
padding: 2px 3px 0;
margin: 0 6px 0 0;
float: left;
}
/* Replace search button with image*/
input#btn_search {
width: 65px;
height: 20px;
padding: 20px 0 0 0;
margin: 1px 0 0 0;
border: 0;
background: transparent url(../images/btn.search.gif) no-repeat center top;
overflow: hidden;
cursor: pointer; /* hand-shaped cursor */
cursor: hand; /* for IE 5.x */
}
form>input#btn_search { /* For non-IE browsers*/
height: 0px;
}
input#btn_search:focus, input#btn_search:hover {
background: transparent url(../images/btn.search.over.gif) no-repeat center top;
}
have you made sure that display:block has been added to the css on the input? That oughta do the trick.
This sounds like a text-indent / image-to-replace-button issue in IE6.0 and 7.0. This solution has worked for me a few times.
Make a separate stylesheet for these browser versions and put this code in your header:
<!--[if lt IE 8]>
<link rel="stylesheet" type="text/css" href="ie7-and-down.css" />
<![endif]-->
In the CSS file, try something like this (you can change this to input#btn_search or whatever you're targeting specifically)
#btn_search {
width: 85px;
height: 20px;
padding: 20px 0 0 0;
margin: 1px 0 0 0;
border: 0;
background: transparent url(../images/btn.search.gif) no-repeat center top;
cursor: pointer; /* hand-shaped cursor */
cursor: hand; /* for IE 5.x */
font-size: 0;
color: #fff;
text-align: right;
text-indent: 0;
}
"color" should be the same colour as your background.
"width" should be like 20-30 pixels MORE than the width of your image.
More information and help can be found here: http://mydrupalblog.lhmdesign.com/theming-search-submit-button-css-cross-browser-compatible-solution
There are two things I can see from the code that could cause this:
1 - the image btn.search.gif is either completely transparent, the colour of the background or not found. The button has no background colour and no border, so would not appear if not for the image/text
2 - the button visibility is set to none, which leaves space on the page but doesn't render the button. Can you look at the styles in firebug?
I finally sorted this by removing the:
form>input#btn_search { /* For non-IE browsers*/
height: 0px;
}
I had always included this with CSS image replacements after reading it somewhere ages ago, but leaving it out doesn't seem to have affected any other browser and has fixed the problem in IE7.
if you add a name attribute, does it work?
The problem likely comes from the Guillotine Bug. It's a bug in IE6 and IE7 that occurs when certain mixtures of :hover, float, and layout are present (see link for details). I believe that inserting this:
<div class="clear"><!-- --></div>
right before </form> and then applying the following CSS to it:
.clear {clear:both;}
would fix it.