i am trying to remove the extra line in the page footer, i tried to edit my css but its useless , i have 4 css IDs on the page content , search, button_style and ad which is acting as my footer here , the porblem that i need remove the blue line below the page as you see in the screen shot , here is my code
#content {
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
border: 6px solid #BDF4FC ;
width: 50%;
height: 150px;
margin: 0px auto;
text-align: left;
padding: 15px;
margin-top: 10%;
background-color: #ffffff;
}
#search {
height: 42px;
border: medium solid #63D1F2;
font-size: 24px;
font-style: normal;
color: #CCC;
font-weight: bolder;
vertical-align: middle;
margin-left:7%;
margin-top:7%;
position:relative;
text-indent:10px;
}
#button_style {
background-image: url(images/search_button.png);
height: 44px;
width: 92px;
background-color: #FFF;
border: 0px none #FFF;
vertical-align: middle;
margin-top:7%;
margin-left:1px;
}
#ad {
width:auto;
height:190px;
background-color:#FFF;
margin-top:5%;
border-top-width: 10px;
border-top-style: solid;
border-top-color: #12ADDA;
border-right-color: #EDEDED;
border-bottom-color: #EDEDED;
border-left-color: #EDEDED;
padding-top:40px;
float: none;
}
<body>
<div id="buttonsmenu">
HOME | LOGIN | REGISTER | ABOUT US | HELP
</div>
<div id="content">
<form action="" method="get">
<input name="search" type="text" id="search" onfocus="clearContents(this);" onchange="RestContents(this);" value="Search Reservation" size="40" /><input type="submit" value="" id="button_style"/>
</form>
</div>
<div id="ad"></div>
</body>
</html>
any suggestions ?
I just think that is padding in your <body> try this
CSS
html, body {padding-bottom:0;}
do that and then if you were sizing you body tag or anything just make sure you don't give it any padding on the bottom.
Related
I'm almost done, but my problem is the background of the text , I even try the opacity but the underline of the box appear.
.block {
display: inline-block;
border: 2px solid white;
padding: 5px;
margin-top: 1em;
}
.paddingbox{
padding: 60px;}
.boxed {
float: left;
color: white;
padding: 0 5px;
margin-top: -2em;
}
<div class="paddingbox"><center>
<div class="block">
<span class="boxed">
<h1 style="color:white;"><?php echo get_the_title(); ?></h1></span>
</div></center></div>
With backgroun color
without background color
I'm trying to achive is like this, but it have a back ground like in the picture above
I tried fieldset and this happen
The behavior can be achieved with a fieldset tag.
.block{
display: inline-block;
border: 2px solid white;
}
.title{
color: white;
font-size: 1.5em;
text-align: center;
}
body{
background: purple;
}
<fieldset class="block">
<legend class="title">
Services
</legend>
</fieldset>
I get help of positions for solve this question!
div {
position: relative;
width: 400px;
padding: 10px;
border: 1px solid;
}
span {
position: absolute;
top: -10px;
left: 40%;
background-color: #FFF;
font-weight: bold;
}
<div>
<span>About Us</span>
</div>
I'm trying to create a header bar at the top of a page on my website and I'm having trouble with the layout. Below is my desired result:
goal http://ambiguities.ca/images/goal.png
Here is the html:
<div id="page_wrapper">
<div id="header_wrapper">
<div id="banner_wrapper">
<div id="header_banner">
<div class="header_format">Site Name</div>
</div>
</div>
<div id="user_management">
<div class="header_format">Login / Register</div>
</div>
<div id="user_search">
<form method="post" action="?search">
<input id="search_box" type="search" name="search" autocomplete="off" placeholder="Search..." />
</form>
</div>
</div>
</div>
and the css:
body{
margin:0;
padding:0;
}
#page_wrapper {
width: 100%;
min-width: 800px;
}
#header_wrapper {
width: 100%;
height: 30px;
background-color: #E6E6E6;
border-bottom-color: #D8D8D8;
border-bottom-style: solid;
border-bottom-width: 1px;
}
#banner_wrapper {
float: left;
width: 100%;
}
#header_banner {
margin: 0 180px 0 160px;
}
#user_management{
float: left;
height: 30px;
width: 160px;
margin-left: -100%;
border-right-color: #D8D8D8;
border-right-style: solid;
border-right-width: 1px;
}
#user_search {
padding-top: 2px;
float: left;
height: 30px;
width: 180px;
margin-left: -181px;
border-left-color: #D8D8D8;
border-left-style: solid;
border-left-width: 1px;
}
#search_box {
height: 26px;
width: 176px;
margin: 0;
}
.header_format {
font-family: Verdana;
font-size: 10px;
text-align: center;
line-height: 30px;
vertical-align: middle;
}
I understand that this might not be the most efficient code. My real problem lies in the fact that in the user_search div when a padding of 2 at the top is added the search box becomes unusable by mouse click. If anyone can help me by pointing me in the right direction or showing me a better way of doing this it would be much appreciated.
First, remove the 'padding-top' value from '#user_search', use the following CSS:
#user_search {
float: left;
height: 30px;
width: 180px;
margin-left: -181px;
border: 1px solid #D8D8D8;
}
Second, add a 'margin-top' value to '#search_box' and that should do the trick.
#search_box {
height: 26px;
width: 176px;
margin: 5px 0 0 0;
}
Demo: http://jsfiddle.net/8Frnq/
Question:
I'm trying to adapt the comment box from this site
http://www.mentby.com/Group/mono-aspnet-list/input-data-cannot-be-coded-as-a-valid-certificate.html
to my site.
I have successfully copied it, but I want to vertical-align the labels in the center.
It's working, but for some odd reason not for the last one.
Can anybody tell me what I am doing wrong / what I am missing ?
Obviously, it has something to do with textarea.
Here is what I have:
<!DOCTYPE html>
<html>
<head>
<title>Comment</title>
<style type="text/css" media="all">
label
{
cursor: text;
}
#commentForm
{
/*width: 80%;*/
width: 500px;
margin-top: 10px;
padding-bottom: 10px;
background-color: #f6f6f6;
border-right: 1px solid #e1e1e1;
border-bottom: 1px solid #e1e1e1;
border-left: 1px solid #e1e1e1;
}
#commentForm div.rowHolder
{
margin-bottom: 5px;
/*float: left;*/
}
.commentFormLabel
{
background: #efefef url(separator.gif) repeat-x top;
padding: 2px 10px 2px 10px;
margin: 0 0 20px 0;
border-bottom: 1px solid #e1e1e1;
font: bold 13pt "sans-serif", arial, verdana;
letter-spacing: -1px;
line-height: 16pt;
color: #000;
}
#commentForm label
{
display: inline-block;
width: 100px;
padding-right: 10px;
text-align: right;
/*float: left;
vertical-align: middle;
*/
font-family: "sans-serif", arial, verdana;
font-size: 9pt;
color: #333;
}
#commentForm input, #commentForm textarea
{
width: 314px;
/*float: left;*/
border: 1px solid #e7e7e7;
padding: 2px;
}
#commentForm .lblVertAlign
{
display: table-cell; vertical-align: middle;
/*background-color: Red;*/
}
</style>
</head>
<body>
<div id="commentForm">
<div class="commentFormLabel">Post a Comment</div>
<div class="formHolder">
<div class="rowHolder">
<div class="lblVertAlign">
<!--
<span style="vertical-algin: middle;">Name</span>
-->
<label for="name">Name</label>
<input id="name" name="name" value="" />
</div>
</div>
<div class="rowHolder">
<div class="lblVertAlign">
<label for="email">Email</label>
<input id="email" name="email" value="" />
</div>
</div>
<div class="rowHolder">
<div class="lblVertAlign">
<label for="website">Website</label>
<input id="website" name="website" value="http://" />
</div>
</div>
<div class="rowHolder" style="padding: 0px; margin: 0px;">
<div class="lblVertAlign">
<label for="comment">Comment</label>
<textarea id="message" name="message"></textarea>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
You need to modify the vertical-align of the input elements:
http://jsfiddle.net/7VstA/2/
#commentForm input, #commentForm textarea
{
width: 314px;
/*float: left;*/
border: 1px solid #e7e7e7;
padding: 2px;
vertical-align: middle;
}
I am currently working with an input field that will do search for my page. But I am undergoing some css styling issues. I have placed inside the input field the submit button which is an image of a magnifying glass. the problem is that the button does not stay in its place through cross browsers. It looks ok in firefox but others browsers it looks bad.
How can i get the submit button to stay inside the input field at all times? EXAMPLE
thank you!
CSS related to object
<style>
.search-input {
padding: 0 5px 0 22px;
border: 2px solid #DADADA;
height: 30px;
font-size: 12px;
line-height: 30px;
border-radius: 25px;
-moz-border-radius: 25px;
-webkit-border-radius: 25px;
background: #FFF; /* old browsers */
}
.search-input li {
list-style: none outside none;
}
.search-submit {
width: 13px;
height: 13px;
border: none;
background: url(http://webprolearner2346.zxq.net/css-test2/images/mag-glass.png) no-repeat;
display: block;
position: absolute;
right: 170px;
text-indent: -9999em;
top: 60px;
}
.search{
float: right;
margin-right: 30px;
margin-top: 35px;
}
</style>
HTML
<div id="header">
<div class="search"><input type="text" class="search-input" name="search" value="Search"/><input type="submit" class="search-submit" /></div>
</div>
Use this much better approach I came across. It works well and tested with web developer tools. Cheers#!!!
HTML
<div id="header">
<form id="search">
<input id="searchField" type="text" />
<input id="searchSubmit" type="submit" value="" />
</form>
</div>
CSS
#search{
float: right;
margin-right: 30px;
margin-top: 35px;
}
#searchField{
border: 1px solid #FFEDE8;
float: left;
height: 20px;
padding-right: 25px;
width: 140px;}
#searchSubmit{
background: url("http://webprolearner2346.zxq.net/css-test2/images/mag-glass.png") no-repeat scroll 0 0 transparent;
border: medium none;
cursor: pointer;
height: 20px;
margin-left: -22px;
margin-top: 5px;
width: 20px;
}
I am trying to work out how I can put a border around my page. Here is my html and css:
<html>
<head>
<title>Royal Aura club</title>
<link rel="stylesheet" type="text/css" href="restyle.css" / >
</head>
<body>
<main id="main">
<div id="header">
<h1> Royal Aura club</h1>
<div id="nav">
<div class="navitem">Home</div>
<div class="navitem">Restaurant </div>
<div class="navitem">Gallery</div>
<div class="navitem">Guest list</div>
</div> <div class="navitem">Job Vancancies</div>
<div id="content">
<div id="textblock">
<h2>Why Royal Aura?</h2>
<p>
Royal Aura club and restaurant is located in Mayfair just a walk away from the Ritz.
We will guarantee you will have a ball of a time with our brilliant DJ playing the tunes while your sipping cocktails away and dancing the night away.
<p>
Aura is a glamorous and sophisticated club that has a beautiful decor to get the mood. If you fancy doing VIP in style drop us a e-mail, we will be glad to help. Not to mention our fabulous food dishes we serve are to die for.
Please make sure you e-mail us 24 hours before the day you want to come and party or dine.
</p>
</div>
</body>
</html>
Css-
body {
front-family: verdana, arial, sans-serif;
margin:0;
padding: 0;
background-color: #FFFDED;
border:0px;
}
#main {
background-color: #FFFFFF;
width: 280px;
margin: 50px auto;
border: 0px solid;
}
#header {
border-bottom:none
}
#content {
padding: 6em 1em;
border: none;
margin: 20px;
}
#footer {
}
h1 {
font: bold 1.5em Tahoma, arial, sans-serif;
color: #826BA9;
font-style: italic;
background-image: url(relogo.jpg);
background-repeat: no-repeat;
padding: 1em 1em 1em 120px;);
background-repeat: no-repeat;
padding: 1em 1em 1em 100px;
}
.navitem {
float: left;
border-right: 3px solid #999999;
border-top:1px solid #999999;
text-align: left;
}
#textblock {
background-color: #D4CAE2;
width: 300px;
border: 4px solid #000000;
padding: 10px 7px;
float: left;
font-size: 110%;
text-align: left;
height: 400px
}
a:link {
text-decoration: none;
color: #000000;
padding-left: 0.em;
padding-right: 0.5em;
float: right;
}
a:visited {
text-decoration: none;
color: #826BA9;
padding-left: 0.5em;
padding-right: 0.5em;
}
a:hover {
text-decoration: none;
color: #826BA9;
background-color: #F4E8F0;
display: block;
}
body {
border: 5px solid red;
}
This is all you need to do:
html{
border: solid;
}
I don't think <main> is a valid tag. Also, make sure to close your tags.
Replace this:
</body>
</html>
With this:
</div>
</div>
</body>
</html>
And replace this:
<main id="main">
With this:
<div id="main">
Lastly, replace this:
#main {
background-color: #FFFFFF;
width: 280px;
margin: 50px auto;
border: 0px solid;
}
Wtih this:
#main {
background-color: #FFFFFF;
width: 280px;
margin: 50px auto;
border: 1px solid red; /* width, style, colour */
}
And change the border property accordingly.
If you want a border around the entire page, put that border property within body{} in your CSS.
try this, wouldnt say its the proper way tho
body {
background-color: green;
border: 5px solid white;
padding: 100%;
margin: 0;
}
You will need to adjust the properties to match your desired result, but this should place a border around your page.
#main {
border: 1px solid red;
}