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; }
Related
I want to border add in below picture
and I want border add like
option text before and after and whole box
border css before after or background how can achieve it?
I see it says in the comments "not possible with legend an fieldset", but but it exactly reproduces the above:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<style>
body{
display: flex;
}
fieldset {
border-radius: .4em;
border-color: gray;
border-width: 1px;
}
legend:after {
content: '*';
color: red;
}
fieldset div {
display: grid;
grid-template-columns: auto auto;
grid-gap: .5em;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>Option:</legend>
<div>
<label for="not_toasted">Not Toasted</label>
<input type="radio" id="not_toasted" name="option">
<label for="toased">Toasted</label>
<input type="radio" id="toased" name="option">
</div>
<br>
</fieldset>
</form>
</body>
</html>
I am trying to create Google's Advanced Search page copy. I am new to programming and I'm having 2 problems. First is that link titled "google search" should be inside the gray bar positioned at the start of the page. Second, I am trying to write css code to reverse positions of texts and their correlated input fields, because I noticed in Google's html that it is also coded in reverse and then corrected from initial position.
Help would be greatly appreciated!
.label {
color: rgb(218, 32, 32);
margin-left: 15px;
padding: 15px;
margin-bottom: 15px;
} */
html, body {
padding: 0;
margin: 0;
font-size: 16px;
}
.navbar {
padding: 20px;
text-align: right;
size: default;
}
.navbar a {
margin: 0 10px;
color:black;
text-decoration: none;
}
.navbar a:hover{
text-decoration: underline;
}
.content {
margin-top:100px;
text-align:center;
}
#textbox {
font-size: large;
height: 30px;
width: 500px;
border-radius: 25px;
}
.graybar{
background-size: 75% 50%;
background: #f1f1f1;
font: 13px/27px Arial,sans-serif;
height: 60px;
width: 100%;
}
#image {
height: 33px;
width: 92px;
margin: 15px;
}
.margin {
margin-left: 10px;
margin-right: 10px;
margin-bottom: 10px;
}
body {
font-family: arial,sans-serif;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Advanced Search</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<div class="graybar">
<img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" id=image>
<div class=navbar>
<a href="index.html">
Google Search
</a>
</div>
</div>
<div class="label">Advanced Search</div>
<h3 style="font-weight:normal">Find pages with...</h3>
<form action="https://google.com/search">
<input class="margin" value autofocus="autofocus" id="xX4UFf" name="as_q" type="text">
<label for="xX4UFf" class="float">all these words:</label>
<br>
<input class="margin" value autofocus="autofocus" id="CwYCWc" name="as_epq" type="text">
<label for="CwYCWc" class="float">this exact word or phrase:</label>
<br>
<input class="margin" value autofocus="autofocus" id="mSoczb" name="as_oq" type="text">
<label for="mSoczb" class=float>any of these words:</label>
<br>
<input class="margin" value autofocus="autofocus" id="t2dX1c" name="as_eq" type="text">
<label for="t2dX1c" class="float">none of these words:</label>
<br>
<input type="submit">
</form>
</body>
</htmL>
Here is how website looks
Assuming that you can change your HTML, flexbox is the solution to both of your issues.
Let's start with your header. You need your image and your text to be both in the grey box, with the image on the left side and the text on the right side.
If you set your header to use display: flex, then you can specify justify-content: space-between to tell the browser to render the child elements with as much space as is possible between them. For two children, that will result in the first child being on the left, and the second child being on the right. If there were more children, they'd be spaced evenly between (eg left, middle, right for three children etc.)
In your case, this would simply require adding the appropriate styling to the .graybar class which is serving as your header:
.graybar {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.graybar {
display: flex;
flex-direction: row;
justify-content: space-between;
background-size: 75% 50%;
background: #f1f1f1;
font: 13px/27px Arial, sans-serif;
height: 60px;
width: 100%;
}
.navbar {
padding: 20px;
text-align: right;
size: default;
}
.navbar a {
margin: 0 10px;
color: black;
text-decoration: none;
}
.navbar a:hover {
text-decoration: underline;
}
#image {
height: 33px;
width: 92px;
margin: 15px;
}
body {
font-family: arial, sans-serif;
}
<div class="graybar">
<img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" id=image>
<div class=navbar>
Google Search
</div>
</div>
I've left the other styling as you had in your original.
CSS's flexbox is extremely powerful; you can use it for your other issue with the labels/inputs as well, if you can modify your HTML. Looking at the actual Google advanced search page here, your HTML doesn't actually look anything like the original, so I'm assuming you're not restricted to keeping the same HTML as you have in your original post.
Let's instead structure our HTML like this:
<div class="row">
<input type="text" id="allwords" >
<label for="allwords">All these words</label>
</div>
We can now apply display: flex to each row and leverage the flex-direction property to reverse the order of the children so that the label is displayed prior to the input.
.row {
display: flex;
flex-direction: row-reverse;
justify-content: flex-end;
}
label {
display: block;
margin-right: 8px;
}
<div class="row">
<input type="text" id="allwords">
<label for="allwords">All these words:</label>
</div>
Generally I wouldn't recommend doing it like this, but I'm equally unsure why you're trying to force inputs before labels in your HTML. :)
For more information about CSS's flexbox, I highly recommend this guide from CSS-Tricks.
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%;
I have applied padding for only top and bottom of a div. The padding attribute is working homogeneously for the form element,but not for the div which is parent to the form as shown in the image below.
Output:-
#content {
font-family: arial;
margin-top: 30px;
background: #99ccff;
padding: 10px 0px
}
#content form {
background: #990000;
padding: 10px 0px;
}
<div id="content">
<form>
<label for="mid">MID:</label>
<input type="text" name="mid" id="mid" class="input" />
<input type="submit" name="sbmit" id="sbmit" value="Submit" />
</form>
</div>
Firefox,Opera and Chrome all showing the same result.
I want to know why padding for the div is not showing homogeneous behaviour with respect to top and bottom layout with this regard?
If you put that CSS and HTML into a blank HTML file, the default user agent stylesheet is causing that problem - it gives the <form> element a default bottom margin of 1em that you need to override with form { margin: 0; }
Try using <div class="content"> instead. The id only gives the div and ID and does not assign the css class.
Simply add a comma to the #content, form ¿Is this what you were looking for?
#content {
font-family: arial;
margin-top: 30px;
background: #99ccff;
padding: 10px 0px
}
#content, form {
background: #990000;
padding: 10px 0px;
}
<div id="content">
<form>
<label for="mid">MID:</label>
<input type="text" name="mid" id="mid" class="input" />
<input type="submit" name="sbmit" id="sbmit" value="Submit" />
</form>
</div>
I'm trying to insert a search field in my header (black zone) but doesn't work. I want the search field inline with "SimpleCMS"...
See this screenshot to understand:
I want it on the same line as the header text...
There's my HTML code:
<div id="header"><h1><?php echo($header_text); ?></h1>
<div style="float: right;">
<form action="search.php" method="get">
<input type="text" name="q" id="q" value="Search..." />
<input type="submit" value="Search" />
</form>
</div>
</div>
And my CSS:
#header
{
padding: 5px 10px;
background: #000;
color: #FFF;
text-align: left;
}
The problem is that you use a <h1> element. This will span over the whole width (see here) of the top so that every other element will be placed below it. Use a <span> instead and style it according to your needs. Using position-absolute as alpaca lips nao suggests might work as well.
Update: Use position: absolute;
#header
{
padding: 5px 10px;
background: #000;
color: #FFF;
text-align: left;
position: relative;
}
#header div form {
position: absolute;
top: 75px;
right: 25px;
}