I have this code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>TheGelu - Coming Soon</title>
<style type="text/css">
body {
background: #474747 url(http://line25.com/wp-content/uploads/2009/letterpress/demo/bg.png);
}
p.margin {
margin-left:300px;
}
p.box {
margin-left:300px;
}
h1 {
font: 60px Helvetica, Arial, Sans-Serif; letter-spacing: -5px;
color: #999; text-shadow: 0px 3px 8px #2a2a2a;
}
boxy {
border: 0px solid #db9b20;
text-align: center;
background-color: #f0f0f0;
padding: 0px 0px 0px 0px;
margin: 4px 0px 4px 0px;
moz-box-shadow: 5px 5px 5px #000;
-moz-border-shadow: 0pc;
-khtml-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
-moz-box-shadow:0px 0px 0px 3px rgba(240, 240, 240, 1);
-webkit-box-shadow:0px 0px 0px 3px rgba(240, 240, 240, 1);
box-shadow:0px 0px 0px 3px rgba(240, 240, 240, 1);
}
</style>
</head>
<body><h1><center>TheGelu *-*</center></h1>
<p class="margin"><img src="RoundRound.png" alt="" width="136" height="137" /><img src="arrowSignal.png" alt="" width="318" height="126" /></p><div style="width:400px;height:300px;float:right;-webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px;background-color:#FFFFFF;-webkit-box-shadow: #000000 2px 2px 2px;-moz-box-shadow: #000000 2px 2px 2px; box-shadow: #000000 2px 2px 2px;">Pretty Text Here!</div>
</body>
</body>
</html>
And I want the box to be exactly next to the arrow (on the right). How can I do that? I've tried float but I don't know how to put it up.
Live version at http://thegelu.bl.ee/test.html
Is this what you want?
1. p.margin, add float:left;
2. text box div, also add float:left;
Done.
Edit:you mean like this?
Because your arrow uses an image and that image has a transparent background that is wider than the image itself.
Solutions:
1. modify your image and remove the blank space
2. no need to modify image, just add margin-left:-90px; to your text box div
You can move the div in your p.margin and specify on it style="display: inline-block".
Related
I'm developing my first web application using Google App Engine. Now, while the core backend program is working and ready, I'm having some trouble working with the UI of the website. Now, the width of my website is extending beyond the given screen, which I do not want.
You can see the live version of the site here:
http://deploymentapp.appspot.com/
Now, the site is still under development, please pardon my terrible try at web designing for now.
As can be seen from the site, the width of the whole site is extending beyond the screen width.
Here's the HTML code:
<html>
<head>
<title>Live Quora Feed</title>
<style type = "text/css">
*
{
margin:0px;
padding:0px;
}
body
{
width:100%;
background-image: url("http://www.bluelinerny.com/wp-content/uploads/2011/03/quora_illustration_1.jpg");
background-position: top center;
background-repeat:no-repeat;
}
input.button {
width:40px;
position:absolute;
right:20px;
bottom:20px;
background:#09C;
color:#fff;
font-family: Tahoma, Geneva, sans-serif;
height:30px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
border: 1p solid #999;
}
input.button:hover {
background:#fff;
color:#09C;
}
orm has no structure, no color, and no personality. We can change that with a little bit of code. First, we are going to style the form tag itself.
form {
background: -webkit-gradient(linear, bottom, left 175px, from(#CCCCCC), to(#EEEEEE));
background: -moz-linear-gradient(bottom, #CCCCCC, #EEEEEE 175px);
margin:auto;
position:relative;
width:550px;
height:450px;
font-family: Tahoma, Geneva, sans-serif;
font-size: 14px;
font-style: italic;
line-height: 24px;
font-weight: bold;
color: #09C;
text-decoration: none;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
padding:10px;
border: 1px solid #999;
border: inset 1px solid #333;
-webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
}
input {
width:375px;
display:block;
border: 1px solid #999;
height: 25px;
-webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
box-shadow: 0px 0px 8px rgba(0, 0, 0.1, 0.3);
}
#form
{
position:relative;
left:730px;
top:300px;
}
</style>
</head>
<body bgcolor = "black">
<div id = "form">
<form method = "post">
<div>
<label>
<span>Enter your query</span><input id="name" type="text" name="rssquery" />
</label>
<input type="submit" value="Submit Form" />
</div>
<div class="text">
<p>This is some demonstration text</p>
<p>This is some more wonderful text</p>
</div>
</div>
</form>
</body>
</html>
Also, I have copied most of the CSS from another source.
How can resolve this problem?
Your problem lies in #form.
Your left won't always be the right amount.
You need to use % instead of px.
This is called responsive web design.
If you want it non-obstructing the quora logo, I seem to have fixed it by changing left to 50%
You need to turn your css to be responsive.
Instead of using px in #form, just use % like this:
#form {
margin-top:300px;
margin-left:55%;
}
There is a nicer way to have the same result. It's to float the form to the right and set a margin-right.
#form {
float:right;
margin-right:15%
margin-top:300px;
}
Behind responsive there is much more then this, if you want to read more start from this link: http://learn.shayhowe.com/advanced-html-css/responsive-web-design
border-radius is not working on IE-8 . Need help.
I am using the following code
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>Border</title>
<style type="text/css">
.mc-button {
positon:relative;
behavior: url(/PIE-1.0.0/PIE.htc);
-webkit-box-shadow: #999 0 0 12px;
border: 1px solid #696;padding: 60px 0;text-align: center;
width: 200px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: #666 0px 2px 3px;
-moz-box-shadow: #666 0px 2px 3px;
box-shadow: #666 0px 2px 3px;
background: #EEFF99;
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#EEFF99), to(#66EE33));background: -webkit-linear-gradient(#EEFF99, #66EE33);
background: -moz-linear-gradient(#EEFF99, #66EE33);background: -ms-linear-gradient(#EEFF99, #66EE33);
background: -o-linear-gradient(#EEFF99, #66EE33);
background: linear-gradient(#EEFF99, #66EE33);
-pie-background: linear-gradient(#EEFF99, #66EE33);
}
</style>
</head>
<body>
<input class="mc-button" type="button" value="submit"/>
</body>
</html>
That code i am using for a button. But I am not finding any way to solve. I checked previous questions and as well as answers ,but those solutions are not working.
border-radius is not supported by IE8.
To check browser compabitility the http://caniuse.com site is a great resource.
My page renders incorrectly (not how I want) on the first load, then when refreshed is correct. It's has to do with the "display:inline-block" I think. I've done a lot of research but I can't seem to figure this one out. And yes.... I've cleared my cache before loading it, I get the same result.
first load:
after refresh:
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html><head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="header">
<div id="ribbon-start"></div>
<div id="ribbon-shade"></div>
<div id="banner">
<div id="titles">
<div id="name">The Person</div>
<div id="profession">Their Profession</div>
</div>
<div class="tip"></div>
<div class="nav-butts">
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
</div>
</div>
</div> <!-- header -->
<div style="height:900px; width:1px"></div><!-- SCROLL TEST -->
<div id="footer">
<div id="toTop">^</div>
</div> <!-- footer -->
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jqueryeasing.js"></script>
<script type="text/javascript" src="js/sticky.js"></script>
<script type="text/javascript" src="js/behaviour.js"></script>
</body>
</html>
and the CSS
body{
background-color:#00FFFF;
}
#ribbon-start{
z-index:-2;
position:absolute;
top:10px;
left:0px;
width:49px;
height:100px;
background-color:#181818 ;
}
#ribbon-shade{
z-index:-1;
position:absolute;
top:10px;
left:25px;
width: 0;
height: 0;
border-top: 11px solid transparent;
border-bottom: 10px solid transparent;
border-right:24px solid #909090 ;
}
#banner{
margin:21px 0 0 17px;
width:90%;
height:100px;
background-color:black ;
-webkit-box-shadow: -6px -4px 17px rgba(0, 0, 0, 0.75);
-moz-box-shadow: -6px -4px 17px rgba(0, 0, 0, 0.75);
box-shadow: -6px -4px 17px rgba(0, 0, 0, 0.75);
}
#titles{
display:inline-block;
}
#name{
margin: 0 0 0 80px;
font-size:84px;
font-family: 'RalewayLight', sans-serif;
color: white;
display:inline-block;
}
#profession{
margin: 0 0 0 10px;
font-size:34px;
font-family: 'RalewayLight', sans-serif;
color: white;
display:inline-block;
}
#banner .tip{
display:inline-block;
margin: 0 -49px 0 0;
float:right;
width: 0;
height: 0;
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
border-left: 50px solid black;
}
.nav{
margin:0 0 0 17px;
width:90%;
height:100px;
}
.nav-butts{
display:inline-block;
padding:8px 8px 8px 8px;
background-color:black;
border-radius:38px;
margin:8px 0 0 0;
float:right;
}
.circle{
margin:5px 8px 0 8px;
display:inline-block;
height:60px;
width:60px;
background-color:white;
border-radius:30px;
}
.sticky {
margin-top:10px;
position: fixed;
left:-8px;
top:-8px;
z-index: 100;
border-top: 0;
}
.sticky .nav-butts{
-webkit-box-shadow: 0px -2px 30px rgba(0, 0, 0, 0.75);
-moz-box-shadow: 0px -2px 30px rgba(0, 0, 0, 0.75);
box-shadow: 0px -2px 30px rgba(0, 0, 0, 0.75);
}
#toTop{
position:fixed;
text-align:center;
left:10%;
bottom:-15px;
height:60px;
width:70px;
font-size:64px;
background-color:black;
font-family: 'RalewayThin', sans-serif;
color: white;
border-radius:20px;
cursor:pointer;
}
#font-face
{
font-family: RalewayBold;
src: url('fonts/Raleway-Bold.otf');
}
#font-face
{
font-family: RalewayLight;
src: url('fonts/Raleway-light.otf');
}
It worked fine for me on the first load. I have worked with php in the past and found that an error appears underneath at the first load but disappears at the second load. Try different browsers. One may just be acting up.
I've included this line
<META HTTP-EQUIV="CACHE-CONTROL" CONTENT="NO-CACHE">
This clears the problem but isn't really the answer to this question. This code makes the browser call for the styles instead of using cached ones for every load, I believe.
I am having issues with rounding corners, they keep wanting to crop off on the left side by a few pixels. Below is the code I am using. I've tried increasing numbers and decreasing numbers; I've added a wrapper; I've tried all different solutions I can find for searching, but it still crops off. Can anyone give me a hand since I don't seem to be very handy? And apparently I can't post a picture of what it looks like either.
<style>
.image
{
width: 200px;
position:relative;
-webkit-border-radius: 14px;
-moz-border-radius: 14px;
-khtml-border-radius: 14px;
border-radius: 14px;
overflow: hidden;
}
#slideshow
{
margin:0 0 0 0;
position:relative;
width:200px;
height:133px;
padding: 10px;
overflow:hidden;
-webkit-border-radius: 14px;
-moz-border-radius: 14px;
-khtml-border-radius: 14px;
border-radius: 14px;
box-shadow: 0 0 20px rgba(0,0,0,0.3);
}
#slideshow > div
{
position:absolute;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script>
$(function() {
$("#slideshow > div:gt(0)").hide();
setInterval(function()
{
$('#slideshow > div:first')
.fadeOut(2000)
.next()
.fadeIn(2000)
.end()
.appendTo('#slideshow');
}, 3000);
});
</script>
<div id="slideshow">
<div class="image"><img alt="" class="icon-action" src="img url" width="200"/></div>
<div class="image"><img alt="" class="icon-action" src="img url" width="200"/></div>
<div class="image"><img alt="" class="icon-action" src="img url" width="200"/></div>
</div>
I had the very same problem when the border-radius spec came out. Turns out you have to add border-radius to the <img> tag. Then you can either keep or remove the <div>'s border-radius property.
Essentially you need to be dealing with nested rounded corners which are fairly helpfully generator with this useful tool.
http://joshnh.com/tools/get-your-nested-border-radii-right.html
I've been able to solve this issue using the following css. This has worked on my sites I hope it can help you out with your problem. Not sure if it's a argument you are missing or not.
.classname {
-moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
-webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
box-shadow:inset 0px 1px 0px 0px #ffffff;
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf) );
background:-moz-linear-gradient( center top, #ededed 5%, #dfdfdf 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf');
background-color:#ededed;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
border:1px solid #dcdcdc;
display:inline-block;
color:#777777;
font-family:arial;
font-size:15px;
font-weight:bold;
padding:6px 24px;
text-decoration:none;
text-shadow:1px 1px 0px #ffffff;
}
You can try this:
div.circle
{
width: 10px;
height: 10px;
background: white;
border-radius: 28px;
-moz-border-radius: 64px;
-webkit-border-radius: 64px; padding:32px;
border: 2px black;
color:white;
text-align:center;
-webkit-box-shadow: 0 0 1px rgb(255,0,0);
-moz-box-shadow: 0 0 1px rgb(255,0,0); box-shadow: 0 0 1px rgb(255,0,0);
}
I am making an application with jquery mobile. In my login screen I have a submit button. On this button I want to apply this CSS class.
input.submit {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #ffffff;
padding: 8px 20px;
background: -moz-linear-gradient(
top,
#007ca5 0%,
#8080f5);
background: -webkit-gradient(
linear, left top, left bottom,
from(#007ca5),
to(#8080f5));
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border: 1px solid #ffffff;
-moz-box-shadow:
0px 1px 6px rgba(0,0,0,0.9),
inset 0px 0px 5px rgba(161,142,016,0.6);
-webkit-box-shadow:
0px 1px 6px rgba(0,0,0,0.9),
inset 0px 0px 5px rgba(161,142,016,0.6);
text-shadow:
0px -1px 3px rgba(255,255,255,0),
0px 1px 0px rgba(255,255,255,0);
}
And used this class like this in my HTML
<INPUT name=submit value=Inloggen type=submit class="submit">
Now I think the problem is that my CSS is not specific enough. Because when I am going to look at my code with Firebug I get this div
<div class="ui-btn ui-btn-corner-all ui-shadow ui-btn-up-g" data-theme="g" aria-disabled="false">
<span class="ui-btn-inner ui-btn-corner-all">
<span class="ui-btn-text">Inloggen</span>
</span>
<input class="submit ui-btn-hidden" type="submit" value="Inloggen" name="submit" aria-disabled="false">
</div>
So can anybody help me, I am not that good in making my CSS more specific.
Check that you embedded your custom style sheet after jquery mobiel css file ex:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1" />
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link href="Style/jquery.mobile-1.0.1.css" rel="stylesheet" type="text/css" />
<script src="Scripts/jquery-1.7.1.js" type="text/javascript"></script>
<script src="Script/jquery.mobile-1.0.1.js" type="text/javascript"></script>
<style type="text/css">
input.submit
{
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #ffffff;
padding: 8px 20px;
background: -moz-linear-gradient(
top,
#007ca5 0%,
#8080f5);
background: -webkit-gradient(
linear, left top, left bottom,
from(#007ca5),
to(#8080f5));
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border: 1px solid #ffffff;
-moz-box-shadow: 0px 1px 6px rgba(0,0,0,0.9), inset 0px 0px 5px rgba(161,142,016,0.6);
-webkit-box-shadow: 0px 1px 6px rgba(0,0,0,0.9), inset 0px 0px 5px rgba(161,142,016,0.6);
text-shadow: 0px -1px 3px rgba(255,255,255,0), 0px 1px 0px rgba(255,255,255,0);
}
</style>
<script type="text/javascript">
</script>
</head>
<body>
<form>
<div data-role="page">
<div data-role="content">
<input name="submit" value="Inloggen" type="submit" class="submit">
</div>
</div>
</form>
</body>
</html>