Hey if anyone is able to assist it would be much appreciated, I have no idea how to move the following textbox to where I want it to be.
This is my HTML Code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="Stylesheet.css">
</head>
<body>
<img src="../Resources/MainBrowser.png" alt="SearchEngineGIF" class="custom2">
<img src="../Resources/SearchEngineGIF.gif" alt="SearchEngineGIF" class="custom1">
<input type="text" placeholder="Insert Keyword Here">
</body>
</html>
And here is the CSS behind it:
.custom1 {
display: block;
margin-left: auto;
margin-right: auto;
transform: translateY(-210px);
width: 23%;
}
.custom2 {
display: block;
margin-left: auto;
margin-right: auto;
transform: translateY(+25px);
width: 25%;
}
input[type=text]{
width:20%;
border:2px solid #000000 ;
border-radius:4px;
margin:8px 0;
outline:none;
padding:8px;
box-sizing:border-box;
transition:.3s;
font-size: 20px;
text-align: center;
}
input[type=text]:focus{
border-color:dodgerBlue;
box-shadow:0 0 8px 0 dodgerBlue;
}
input[type=text]::placeholder{
font-family: Calibri;
font-size: 20px;
font-style: italic;
text-align: center;
}
It would also be useful if anyone knew how to make it not move when zooming in and out, Setting the position to fixed doesnt help as I am moving a gif inside of the Image by transforming it up/ down y pixels
EDIT - MainBrowser.png is the whole image above "Insert Keyword Here" textbox, minus "Geoorgle" which is SearchEngineGIF.gif
Instead you can just use the form tag
<form style="width:25%;height:auto;">
<img src="yourimage.jpg" style="width:25%;">
<br>
<input type="text" style="width:20%;"><img src="searchimage.jpg" style="width:5%;">
</form>
Change the source of the images and the width according to your need.
You can also use the table tag if you want
And about the image not moving, once you fix the position, put the top and left parameters for the form in the style.
Example:
top:25%;
left:25%;
Related
When I want to make an element with div, it creates a space between the content and the border. (blue line). Using span causes the element to break, displaying the content outside the borders.
http://i66.tinypic.com/23k4xsp.png
This is my CSS code:
#main1 {
margin-left: 40%;
background-color: lightgrey;
width: 20%;
border: 5px;
padding: 5px;
border-style: solid;
border-color: grey;
border-width: 2px;
text-align: left;
}
body {
text-align: center;
background-color: yellow;
font-family: "Arial";
}
And my HTML:
<!DOCTYPE html>
<html>
<head>
<title>BMI</title>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<div id="main1">
<h3>BMI calculator</h3>
<form action="results.php" method=""post"">
<input type="radio" name="gender" value="man">Man<br>
<input type="radio" name="gender" value="vrouw">Vrouw<br><br>
Lengte:<br>
<input type="text" name="lengte"><br>
Gewicht:<br>
<input type="text" name="gewicht"><br><hr>
<button action="submit">Submit</button>
</form>
</div>
</body>
</html>
Is there any workaround? I'm fairly new to webdesign, I couldn't find anything on the webz... Thanks
The space (line blue) comes because the <h3> tag has a default margin. If you set it to margin: 0 the space will disapear.
h3{
margin: 0;
}
Also, I cannot reproduce your line break: JSFiddle.
This is actually caused by the h3 tag. The header tags by default come with a margin both above and below the element.
Try adding to your CSS:
h3 { margin-top: 0; }
How do I get border radius to work in IE?
I have an <input type=image> element in my html. In my css I have border-top-right-radius:12px; and border-bottom-right-radius:12px.
Everything works in Chrome and Firefox, but in IE11, the image shows up with square corners instead of rounded corners.
I also have this meta tag in my html:
<meta http-equiv="X-UA-Compatible" content="IE=9" />
The code is below.
CSS:
body .overlay {
background-color: rgba(0, 114, 198,.7);
height:100%;
position:relative;
}
body .layer {
background: url('photo-homebanner.jpg') 55%;
position:relative;
top:0;
left:0;
width:100%;
height:100%;
}
body .goldenDiv {
width:665px;
height:326px;
position:fixed;
z-index:100;
margin-top:-38px;
margin-left:-8px;
}
body h1 {
color:white;
text-align:center;
font-family:sans-serif;
padding-top:22px;
padding-bottom:5px;
font-size:45px;
}
body h3 {
color:white;
text-align:center;
font-family:sans-serif;
font-weight:100;
padding-bottom:14px;
}
body h3.hidden {
visibility:hidden;
padding-bottom:0px;
position:absolute;
top:220px;
left:190px;
}
body input:focus {
outline:none;
}
body .prettyInput {
align-content: center;
padding-left: 20px;
padding-right: 70px;
margin-left: 106px;
width: 350px;
height: 61px;
font-size: 18px;
font-weight: 600;
border-radius: 15px;
border: hidden;
margin-bottom: 40px;
}
body .inputOverlap {
position:absolute;
top:167px;
top:166px\9;
left:485px;
z-index:3;
border-top-right-radius:12px;
border-bottom-right-radius:12px;
}
body hr {
color:white;
position:absolute;
top: 77px;
left:120px;
align-content:center;
}
#-moz-document url-prefix() {
body .inputOverlap {
position:absolute;
top:168px;
left:485px;
z-index:3;
border-top-right-radius:12px;
border-bottom-right-radius:12px;
}
}
HTML:
<body>
<div class="goldenDiv">
<div class="layer">
<div class="overlay">
<h1>Stay ahead of industry news!</h1>
<hr width="450px"/>
<h3>Let us send you the latest from our Marketing Department.</h3>
<input id="emailAddress" type="text" class="prettyInput" required placeholder="Your email address here" />
<input onclick="sendEmail()" type="image" width="57px" height="57px" class="inputOverlap" src="submitButton.jpg" />
<h3 class="hidden" id="hiddenValidation">*Please enter a valid email address.</h3>
<h3>100% privacy, no spam, just news.</h3>
</div>
</div>
</div>
</body>
The issue seems to be with IE's rendering of input[type="image"]- if you give it a border attribute you can see that the image is rendered ignoring the border-radius property.
Easiest way to fix would be to wrap the input[type="image"] in a div, apply the positioning, border, and sizing properties to the div (apply sizing to the input[type="image"] as well), and tag the div with overflow:hidden;.
Stylistic notes (unrelated to the problem):
border-radius: 0 12px 12px 0; means the same thing as
border-top-right-radius:12px;
border-bottom-right-radius:12px;
but is less than half the locs. I suggest only using the verbose versions if you need to adjust only one corner and want whatever the others were set to to be preserved.
The height and width attributes on your image should be set in the CSS not on the input[type="image"]. Those attributes have been frowned upon for a very long time, especially since the CSS ones accomplish the same thing.
I'm new in html and css so i have a question.
I am messing around with some stuff but after placing some images on my page i can't click on my links anymore.
HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/style.css" media="screen" title="no title" charset="utf-8">
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<title>Rijschool Houben</title>
</head>
<body>
<div id="header"></div>
<div id="header-pic"><img src="image/test.png"></div>
<p>
<div id="nav-bar">
<ul>
<li>|Home|</li>
<li>Info|</li>
<li>Prijzen|</li>
<li>Acties|</li>
<li>Machtiging|</li>
<li>Theorie|</li>
<li>Begeleid rijden|</li>
<li>Bromfiets|</li>
<li>Contact|</li>
</ul>
</div>
</p>
<p>
<div id="icon-main">
<i class="fa fa-mobile" style="font-size:28px;"></i><a>046-4524501</a><br />
<i class="fa fa-paste" style="font-size:18px;"></i><a>raymond#rijschoolhouben.nl</a><br />
<i class="fa fa-facebook-official" style="font-size:20px;"></i><a>Volg ons op Facebook!</a>
</div>
</p>
<p>
<div id="img-1">
<img src="image/1.jpg" alt="Scooter" width="330px" height="400px"/>
</div>
<div id="img-2">
<img src="image/2.jpg" alt="Geslaagde 1" width="337px" height="400px"/>
</div>
<div id="img-3">
<img src="image/3.jpg" alt="Geslaagde 2" width="337px" height="400px"/>
</div>
<div id="img-4">
<img src="image/4.jpg" alt="Geslaagde 3" width="337px" height="400px" />
</div>
<div id="img-5">
<img src="image/5.jpg" alt="Geslaagde 4" width="337px" height="400px" />
</div>
<div id="img-6">
<img src="image/6.jpg" alt="Geslaagde 5" width="337px" height="400px" />
</div>
</p>
</body>
</html>
CSS:
div#header{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100px;
background-color: white;
}
div#header-pic{
position: fixed;
height: 50px;
left: 500px;
}
div#nav-bar{
position: fixed;
padding-top: 130px;
left: 0;
width: 100%;
white-space: nowrap;
}
div#nav-bar ul{
list-style: none;
text-align: center;
background-color: #323232;
padding: 10px 0;
}
div#nav-bar li{
display: inline;
}
div#nav-bar li a{
text-decoration: none;
color: white;
padding: 14px 16px;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
}
div#icon-main{
position: fixed;
color: #323232;
padding: 10px;
}
div#icon-main i{
padding: 5px;
}
div#icon-main a{
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
}
div#img-1 {
position: fixed;
left: 0;
padding-top: 184px;
width: 100%;
}
div#img-2 {
position: fixed;
padding-top: 184px;
padding-left: 255px;
}
div#img-3 {
position: fixed;
padding-top: 184px;
padding-left: 915px;
}
div#img-4 {
position: fixed;
padding-top: 184px;
padding-left: 585px;
}
div#img-5{
position: fixed;
padding-top: 184px;
padding-left: 1245px;
}
div#img-6 {
position: fixed;
padding-top: 184px;
padding-left: 1575px;
}
i know the code is bad but i hope someone can help me!
Here is a fiddle.
-Ryan
I looked at your external code. Please add your HTML and CSS to your question in Stack Overflow.
From the external HTML you have the following code:
<a>046-4524501</a>
Which does not work as a link.
You have this code
Home
That works as you would expect it to.
Change this line:
<a>046-4524501</a>
to
046-4524501
Where the href="Where you want the link to go".
It's all about the value for "href"
I did notice you are doing non-responsive html which means it is not mobile friendly or will look the same in smaller browser windows.
Your code is messy but your doing okay.
First off wrap everything you are putting in the header in the header div
The images are floating up to the top over your nav due to the position:fixed
Remove all the empty <p></p> between your div's
Use floats on your images and width of a percentage of 100% plus wrap them in a container/div
If you need me to I can see if I can redo all your html and CSS but think for you would learn better to try it out for yourself.
You could always go look at the HTML5 boilerplate out there and use them to guide you on how to construct good code.
I see that you are trying to create a row of images. Instead of using a system of DIVs why don't you use the more flexible (and more responsive) structure of a list?
Then you can use float: for lining them up in a row and basic CSS to give them sizes. The images will be specified as a background for these li elements (better practice).
Like this: http://codepen.io/Attrexx/pen/KVvwXP
You are placing divs containing the images using padding. That's why you can not use links in the menu. Div blocks cover your links.
Try using something like:
selector {
position: absolute; /* or `fixed` like in your css; see below*/
top: 100px; /* pixels from the top */
left: 100px; /* pixels from the left */
/* you can also use `bottom` and `right` */
}
For example:
div#img-3 { /* or just `#img-3`; see below */
position: absolute;
top: 184px;
left: 915px;
}
Check this w3 schools article for more information on positioning.
Not related to the question:
If you are using CSS's id selector (#), I suggest not to use element selector (e.g. div). So rather than div#img-3 try using just #img-3.
Try avoiding using id selectors at all. You can use class rules, and happily after some time they will result in saving you a lot of work.
If you are using HTML5 then try using semantic elements.
Avoid using fixed position when you don't need to (your page is an example of such page).
Paragraphs (p) shouldn't be used in the same way as div. It may result in bad habit for semantic sites.
Rather than using positioning (position), experiment with float or different display types (e.g. inline-block). Use it only when it is really needed.
Read about HTML Responsive Web.
I've looked at similar questions relating to this but I can't seem to find anyone having the same problem.
I'm attempting to us CSS in order to make a sumbit button an image. Here's the code
HTML
<input type="submit" class="search" alt="search" >
CSS
input.search {
background-image:url(../search-icon2.png);
width:35px;
height:35px;
}
This returns a broken image in the web page even though the image "search-icon2.png" is exactly 35px x 35px and is in the correct place on the server.
If anyone could suggest what might the problem be, it would be greatly appreciated.
Thanks in advance. J
You could add the image into the same location as the css file with the css having the url('search-icon2.png'). This would verify your path is truly correct and it's not another issue. If you still have an issue could maybe check the spelling of the image??
HTML
<a class="buttonImage">
<span class="left_img"> Hello this is coding
</span>
<span class="right_img"></span>
</a>
CSS
.buttonImage {
display:inline-block;
vertical-align:top;
text-decoration:none;
}
.buttonImage .left_img {
background: url('http://i.stack.imgur.com/634e1.png') no-repeat 0 0;
float:left;
line-height: 15px;
padding: 7px 0 5px 8px;
color: #1b1d60;
cursor: pointer;
}
.right_img {
background: url('http://i.stack.imgur.com/SyeSO.png') no-repeat 0 0;
float:left;
height: 27px;
width:7px;
cursor: pointer;
}
.buttonImage:hover .left_img, .buttonImage:hover .right_img {
background-position:0 -26px;
color:#fff;
}
Fiddle Demo
It will work fine just follow the following steps:
Search button image size must not be greater than whatever you initialize width and height in your css rule.
That means if you give width:100px and height:30px so images must be the same size.Just re-size your image with the help of Image editor software my personal preference is Adobe Photoshop.If your image size is greater than css rule so images may not come or image will be broken.I have edited your html as well as css.
<!DOCTYPE html>
<html>
<head>
<style>
input.search{
background-image:url(url.jpg);
text-indent:-9999px;
width: 100px;
height: 30px;
border:2px solid rgb(0,102,153);
}
</style>
</head>
<body>
<input type="submit" class="search" alt="search">
</body>
</html>
Hope the answer!
I've been following a tutorial from a book on html and css.
I tried doing a plain header design like youtube's but I can't seem to get the search box and the button to display properly.The button is rendered about 10px lower than the search box as if it had the top padding set.
Can be seen here http://www.wourm.com/index.html
can anyone see why it's happening?
[EDIT : Adding html and CSS to this page]
<!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 content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Awtunes.com</title>
<link href="awtunes.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="container">
<div class="header">
<div class="logo floatL"><img src="images/logo.png" alt="Awtunes.com logo"/></div>
<div id="find-videos" class="search floatL" style="top:0px;" >
<form id="searchVideos" name="searchVideos" method="get" action="/">
<input name="q" type="text" class="searchBox" id="searchBox" /><input type="submit" class="searchbutton" value="" />
</form>
</div>
<div class="menu floatL">
<ul>
<li>Videos</li>
<li>Music Videos</li>
<li>Trailers</li>
<li>Create Account</li>
<li>Sign in</li>
</ul>
</div>
</div>
</div>
</body>
</html>
and the css
.awtunes {
font-family: "Courier New", Courier, monospace;
}
.container {
width: 980px;
top: 0px;
margin-left: auto ;
margin-right: auto ;
}
.floatL {
float: left;
position:relative;
}
.floatR {
float: right;
position:relative;
}
.searchBox {
border-style:none;
border-width:0px;
width: 360px;
background-image: url(images/search_bar.png);
background-repeat:no-repeat;
height: 40px;
font-size: 18px;
}
.searchbutton {
border-style:none;
border-width: 0px;
background-repeat:no-repeat;
background-image: url(images/search_button.png);
background-repeat: no-repeat;
width: 55px;
height: 40px;
}
.logo {
width: 122px;
height: 50px;
}
.menu {
width:430px;
}
.search {
width: 425px;
height: 40px;
}
.split {
background-image: url(images/split.jpg);
background-color: #C0C0C0;
background-repeat: no-repeat;
width: 1px;
height: 18px;
}
ul
{
list-style-type: none;
padding: 0px;
margin: 0px;
}
li
{
background-image: url(images/split.jpg);
background-repeat: no-repeat;
float: left;
margin: 0 0.15em;
}
if this code comes from a book you better buy a new one.. serious. to get the button aligned just add your floatL class to both of you input fields.
I suggest a CSS reset such as the YUI CSS reset. A cursory check in IE and FF shows some pretty serious inconsistency already. If you use a CSS reset stylesheet, this will at least set your code on a level playing field between browsers. YUI CSS Reset: http://developer.yahoo.com/yui/reset/
Once you have a resource like this in place, many quirks of layout are already handled.
It seems to be because of .searchBox { font-size: 18px; }. If you take all the other styles off of the input.searchBox, you can see that changing the font-size changes the size of the plain old text input, which changes the height of the container of the text input and the button.
I also think it would be a good idea to add your HTML and CSS to this question so that if someone is looking at this question in the future and your site is different, they can still learn from your question!
.searchbutton { vertical-align: top; }
A quick fix to your current code would be to add something like:
.searchbutton {
position: relative;
top: -15px;
}
carolclarinet is right here -- the font-size attribute is the problem (at least in FireFox). I'm not sure if you're using the IE Developer Tools to check your CSS issues, but I'd recommend using it as well as FireBug for FireFox. They'll let you play around with your styles without the tedious modify/save/refresh cycle.