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
Related
I'd think this would be easy, so I am sure I am missing something simple.
I have a button I am trying to style on my website.
Here is the css used to style it.
button.popmake-contact-us {
display: inline-block;
height: 50px;
line-height: 50px;
padding-right: 30px;
padding-left: 30px;
position: relative;
font-family: 'Special Elite', 'Inconsolata', 'Droid Sans', serif!important;
font-size: 20px;
background-color: rgb(247, 210, 104);
color: rgb(255,255,255);
text-decoration: none;
text-transform: uppercase;
border-color: #EDE5B1;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
text-shadow: 0px 1px 0px rgba(0,0,0,0.5);
-ms-filter: "progid:DXImageTransform.Microsoft.dropshadow(OffX=0,OffY=1,Color=#ff123852,Positive=true)";
zoom: 1;
filter: progid:DXImageTransform.Microsoft.dropshadow(OffX=0,OffY=1,Color=#ff123852,Positive=true);
-moz-box-shadow: 0px 2px 2px rgba(0,0,0,0.2);
-webkit-box-shadow: 0px 2px 2px rgba(0,0,0,0.2);
box-shadow: -2px -2px 0px rgba(95, 91, 77, 0.13);
-ms-filter: "progid:DXImageTransform.Microsoft.dropshadow(OffX=0,OffY=2,Color=#33000000,Positive=true)";
filter: progid:DXImageTransform.Microsoft.dropshadow(OffX=0,OffY=2,Color=#33000000,Positive=true);}
.contact_popup_button {position: fixed;bottom: 0px;right: 0px;z-index: 9999;}
And this is the HTML for the button.
<footer>
<!--copyright info-->
<p class="footer-copyright">© Copyright 2015 | Sporting Life Bar . All Rights Reserved. </p>
<!--Form Submission Button-->
<div class="contact_popup_button" style="cursor: pointer;"><button class="popmake-contact-us" style="cursor: pointer;">Contact Us</button></div>
I can practice styling it within Chromes Inspeciton tools, but once I add it to the style.css file in the child theme..it goes back to the default style. I can't figure out WHY it is doing this!
The website in question I've got live on the staging site if you want to take a look at that. http://staging.sportinglifebar.com/
The button is kept at the very bottom right of the website. Praying someone can help point me in the correct direction!
If it is helpful, I am using the wordpress plugin "Popup Maker" to style the form and create to pop up. You have to define a class for the button to activate the popup.
You have a mistake in your selector
.popmake-contact-us input[type="button"] {
font-family: helvetica;
color: #666666;
font-size: 12px;
border:3px solid;
border-color: #000;
}
will look an input with type= button with a parent class of popmake-contact-us
So what you want is a button with a class
button.popmake-contact-us{ ..style..}
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".
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 have a navigation bar but want to add images to it, so that rather than text links, the nav bar is made up of buttons consisting of an image and text which have a hover effect etc.
But as some of the link names are dynamic I can't make the buttons in photoshop so was wondering how to make this type of nav bar in just html and css.
Any ideas?
EDIT
To clarify i have the following image sample nav button
and want to add text beneath this to form the buttons on the nav bar if that makes it clearer.
You can do a lot just with CSS
The basic idea is to change attributes of each state of the button using pseudo classes .cssclass:hover to mouse over state and .cssclass:active to mouse down.
normal
/* style of the button in normal state */
button.css3button{
padding: 0.5em;
background-color: lightblue;
border: 4px outset green;
color: green;
border-radius: 4px;
}
:hover
/* properties that change when mouse over */
button.css3button:hover {
background-color: lightgreen;
}
:active
/* properties that change when mouse down */
button.css3button:active {
color: yellow;
border: 4px inset red;
}
Live Demo: JSFIDDLE
more complex styling examples with CSS3:
<button type="button" name="" value="" class="css3button">submit</button>
button.css3button {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #ffffff;
padding: 10px 20px;
background: -moz-linear-gradient(
top,
#bfc2ff 0%,
#82b4ff 25%,
#4664fa);
background: -webkit-gradient(
linear, left top, left bottom,
from(#bfc2ff),
color-stop(0.25, #82b4ff),
to(#4664fa));
-moz-border-radius: 30px;
-webkit-border-radius: 30px;
border-radius: 30px;
border: 3px solid #ffffff;
-moz-box-shadow:
0px 3px 11px rgba(000,000,000,0.5),
inset 0px 0px 1px rgba(49,141,212,1);
-webkit-box-shadow:
0px 3px 11px rgba(000,000,000,0.5),
inset 0px 0px 1px rgba(49,141,212,1);
box-shadow:
0px 3px 11px rgba(000,000,000,0.5),
inset 0px 0px 1px rgba(49,141,212,1);
text-shadow:
0px -1px 0px rgba(000,000,000,0.2),
0px 1px 0px rgba(255,255,255,0.3);
}
Demo: JSFIDDLE
you can of course change sizes, colors, gradients for each state :hover :active :visited on your own taste, you can style almost anything <a> <span> <div> <button>
This question isn't really suited for this forum. It is for specific problems, not basic tutorials. There are plenty of good tutorials out there you can find by doing a simple google search that walk you through basic CSS and how to achieve this.
But just to get you started, you could do something like this: http://jsfiddle.net/wgBTZ/
HTML:
<ul>
<li><a href="#" >One</a></li>
<li><a href="#" >Two</a></li>
<li><a href="#" >Three</a></li>
<li><a href="#" >Four</a></li>
</ul>
CSS:
li {
float:left;
width: 100px;
height: 40px;
background:#CCC;
margin:0 0 0 15px;
}
a {
color: black;
text-decoration:none;
float:left;
width: 100px;
height: 40px;
background:#CCC;
}
a:hover {
background:#000;
color:white
}
Edit: This is just the basic mechanics. With CSS3 you can take what I've done above and actually build some pretty cool stuff.
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);
}