.helpdesk ul {
width:750px;
list-style-type:none;
list-style-position:outside;
margin:0px;
padding:0px;
text-align: center;
bottom: 100px;
}
.helpdesk li{
padding:12px;
border-bottom:1px solid #eee;
position:relative;
text-align: center
bottom: 100px;
center: 20px;
}
.helpdesk h2 {
margin: o;
display: inline;
}
.helpdesk label {
width:150px;
margin-top: 3px;
display:inline-block;
padding:3px;
text-align: center;
bottom: 100px;
}
<ul>
<li>
<h2>Help Desk</h2>
</li>
<li>
<label for="name">Name:</label>
<input type="text" name="name" placeholder="John Doe"/>
</li>
<li>
<label for="email">Email:</label>
<input type="text" name="email" placeholder="JohnDoe#example.com" />
</li>
<li>
<label for="website">Phone Number:</label>
<input type="text" name="Phone" placeholder="###-###-####" />
</li>
<li>
<label for="message">Message:</label>
<textarea name="message" cols="40" rows="6">
</textarea>
</li>
<li>
<button class="submit" type="submit">Submit </button>
</li>
</ul>
I'm trying to figure out how to move my UL and Li to the middle bottom of the page can't seem to get it right, is there anyway to do this. I'm tried looking online and its only giving me the bottom left or bottom right, when I need bottom center
add style rule margin:auto to .helpdesk ul selector
Related
I'm currently making a form in HTML and trying to get two lists next to each other. The tricky part is, that the first list is cut in half, so it has 2 columns, while the other doesn't. I cannot fixate the column width for the first one for some reason, and the other list is put after the first one. So how could I fix my code, so it would work as I intended to?
Heres the HTML,CSS code:
.form ul,
li {
margin: 0;
padding: 0;
list-style: none;
column-width: 100px;
column-count: 2;
border-spacing: 50px 0;
border-collapse: separate;
}
.form li+li {
margin-top: 10px;
}
#other ul {
display: inline-block
}
#other ul,
li {
column-count: 1;
column-width: 100px;
margin: 0;
padding: 0;
list-style: none;
}
<div class="form"><br><br>
<form>
<label for="name">Name:</label><br>
<input type="text" id="name" name="name"><br><br><br> Who is gonna be the champion?
<ul>
<li>
<input type="radio" id="ham" name="names" value="Hamilton">
<label for="ham">Hamilton</label>
</li>
<li>
<input type="radio" id="rus" name="names" value="Russell">
<label for="rus">Russell</label>
</li>
...
</ul>
<div id="other">
Which team is gonna be the winner overall?
<ul>
<li>
<input type="radio" id="mer" name="teams" value="Mercedes">
<label for="mer">Mercedes</label>
</li>
<li>
<input type="radio" id="rb" name="teams" value="Red Bull">
<label for="rb">Red Bull</label>
</li>
...
</ul>
</div>
</form>
</div>
Where both using the form class, and the second list using the "other" division too.
You can use flexbox to achieve it
.flexbox {
display: flex;
}
.flexbox div {
flex: 0 0 50%; /* cut divs into half */
}
Your HTML will be possibly like below
<div class="flexbox">
<div>
<p>Question 1</p>
<ul>...</ul>
</div>
<div>
<p>Question 2</p>
<ul>...</ul>
</div>
<div>
.form ul,
li {
margin: 0;
padding: 0;
list-style: none;
column-width: 100px;
column-count: 2;
border-spacing: 50px 0;
border-collapse: separate;
}
.form li+li {
margin-top: 10px;
}
#other {
width: 50%;
margin-left: auto;
}
#other ul {
display: inline-block
}
#other ul,
li {
column-count: 1;
column-width: 100px;
margin: 0;
padding: 0;
list-style: none;
}
#other p {
margin-top: 0;
}
.flexbox {
display: flex;
}
<div class="form"><br><br>
<form>
<label for="name">Name:</label><br>
<input type="text" id="name" name="name"><br><br><br>
<p>Who is gonna be the champion?</p>
<div class="flexbox">
<ul>
<li>
<input type="radio" id="ham" name="names" value="Hamilton">
<label for="ham">Hamilton</label>
</li>
<li>
<input type="radio" id="rus" name="names" value="Russell">
<label for="rus">Russell</label>
</li>
...
</ul>
<div id="other">
<p>Which team is gonna be the winner overall?</p>
<ul>
<li>
<input type="radio" id="mer" name="teams" value="Mercedes">
<label for="mer">Mercedes</label>
</li>
<li>
<input type="radio" id="rb" name="teams" value="Red Bull">
<label for="rb">Red Bull</label>
</li>
...
</ul>
</div>
</div>
</form>
</div>
Add container for your lists, then give this container => display: flex
.form ul,
li {
margin: 0;
padding: 0;
list-style: none;
column-width: 100px;
column-count: 2;
border-spacing: 50px 0;
border-collapse: separate;
}
.form li+li {
margin-top: 10px;
}
#other ul {
display: inline-block
}
#other ul,
li {
column-count: 1;
column-width: 100px;
margin: 0;
padding: 0;
list-style: none;
}
.lists-container{
display: flex
}
<div class="form"><br><br>
<form>
<label for="name">Name:</label><br>
<input type="text" id="name" name="name"><br><br><br>
<div class="lists-container">
<div id="first">
Who is gonna be the champion?
<ul>
<li>
<input type="radio" id="ham" name="names" value="Hamilton">
<label for="ham">Hamilton</label>
</li>
<li>
<input type="radio" id="rus" name="names" value="Russell">
<label for="rus">Russell</label>
</li>
...
</ul>
</div>
<div id="other">
Which team is gonna be the winner overall?
<ul>
<li>
<input type="radio" id="mer" name="teams" value="Mercedes">
<label for="mer">Mercedes</label>
</li>
<li>
<input type="radio" id="rb" name="teams" value="Red Bull">
<label for="rb">Red Bull</label>
</li>
...
</ul>
</div>
</div>
</form>
</div>
I'm building a forum and I have a link that can be clicked outside of its text, how can I undo it?
I also have an image inside a tag that can be clicked outside of its image, I want to undo that too.
I have tried - position: relative; but it didn't work.
Here is the HTML code of the image.
<div class="nav-list">
<a class="home_A"href="Home.php">
<img class="homeIcon" src="photos/icon.png">
</a>
</div>
CSS of the image
.homeIcon{
width: 200px;
display:block;
margin:auto;
margin: 0 auto;
}
CSS of the <a> link
.signinForm a{
margin: auto;
display:block;
text-align:center;
margin-top: 7px;
color: #006db6;
font-size: 20px;
}
HTML of the <a> link
<form method="POST" class="signinForm">
<ul>
<li> <h1 class="signinH1">sign in</h1></li>
<li> <input type="text" placeholder="User name"name="username_login"class="username" value="<?php if(isset($_POST['username_login'])){echo $_POST['username_login'];}?>" required></li>
<li> <input type="password" placeholder="Password" name="password_login" class="password" value="<?php if(isset($_POST['password_login'])){echo $_POST['password_login'];}?>" required></li>
<li> <input type="submit" value="Log in"class="signinbutton"></li>
<li>Sign up</li>
</ul>
</form>
Thanks all.
It might have to do with your CSS styles for <a> tags and/or <img> tags.
My guess is that something like the following might fix your issue
.homeIcon {
display: inline-block;
}
Try with something like:
img.homeIcon {
display: inline-block;
}
div.home_A {
align-content:center;
margin: 0 auto;
text-align: center; // Not mandatory but useful
}
Assign display: inline-block of course, also use object-fit:contain on <img> and set the line-height: of <a> to 1 to 1.25 depending on how your font is setup but there's very little play in the value.
:root {
font: 1ch/1 'Segoe UI'
}
body {
font-size: 2ch;
}
a {
font-size: 2.5rem;
line-height: 1.15;
}
a,
img {
display: inline-block;
}
img {
object-fit: contain;
width: 3rem;
height: 3rem;
margin-bottom: -3px;
}
<div class='frame'>
<a class="zOne" href="https://stackoverflow.com/users/2813224/zer00ne">
..::Zer00ne::..
<img src='https://i.ibb.co/Kx33pSY/01.jpg'></a>
</div>
<!--HTML_CODE-->
<div class="nav-list">
<a class="home_A"href="Home.php">
<img class="homeIcon" src="photos/icon.png">
</a>
</div>
<form method="POST" class="signinForm">
<ul>
<li> <h1 class="signinH1">sign in</h1></li>
<li> <input type="text" placeholder="User
name"name="username_login"class="username" value="<?php
if(isset($_POST['username_login'])){echo $_POST['username_login'];}?>" required>
</li>
<li> <input type="password" placeholder="Password" name="password_login"
class="password" value="<?php if(isset($_POST['password_login'])){echo
$_POST['password_login'];}?>" required></li>
<li> <input type="submit" value="Log in"class="signinbutton"></li>
<div class="signUp-block">
<li>Sign up</li></div>
</ul>
</form>
/*CSS_CODE*/
.homeIcon{
width: 200px;
display:block;
margin:auto;
margin: 0 auto;
}
.signUp-block{
display: flex;
flex-direction: row;
justify-content: center;
}
.signinForm a{
margin: auto;
display:inline-block;
text-align:center;
margin-top: 7px;
color: #006db6;
font-size: 20px;
}
.homeIcon {
display: inline-block;
}
I'm trying to set a collection of checkboxes both horizontally and vertically, but they don't come out uniformally.
The labels for each checkbox can vary in size, e.g. one label for a checkbox says "International Casaulty Treaty" whereas another only says WIP.
I was going over this vertical example here.
http://jsfiddle.net/zcuLgbxt/
How to can I neatly arrange them so they are all in alignment both vertically and horizontally?
Thanks very much in advance!
Here is my simple HTML/CSS
li {
margin: 5px;
}
input {
width: 20px;
background-color: blue;
position: relative;
left: 200px;
vertical-align: middle;
}
.vertical-list {
width: 200px;
position: relative;
left: -20px;
display: inline-block;
vertical-align: middle;
}
li{
list-style:none;
}
.horizontal-list{
display: inline;
}
<center>
<ul>
<li>
<input type="checkbox" >
<label class="vertical-list"> label1 label1 label1</label>
<input type="checkbox" >
<label class="horizontal-list" for="myid2">label2</label>
</li>
<li>
<input type="checkbox" >
<label class="vertical-list" >label2label2label2</label>
<input type="checkbox">
<label class="horizontal-list" for="myid2">label2label2</label>
</li>
<li>
<input type="checkbox" >
<label class="vertical-list" > label4 label4 label4</label>
<input type="checkbox" >
<label class="horizontal-list" >label2</label>
</li>
</ul>
</center>
CSS-Tables
li {
margin: 5px;
display: table-row;
}
li * {
display: table-cell;
padding: 0.5em;
}
input {
background-color: blue;
position: relative;
}
.vertical-list {}
li {
list-style: none;
}
.horizontal-list {
display: inline;
}
<ul>
<li>
<input type="checkbox">
<label class="vertical-list"> label1 label1 label1</label>
<input type="checkbox">
<label class="horizontal-list" for="myid2">label2</label>
</li>
<li>
<input type="checkbox">
<label class="vertical-list">label2label2label2</label>
<input type="checkbox">
<label class="horizontal-list" for="myid2">label2label2</label>
</li>
<li>
<input type="checkbox">
<label class="vertical-list"> label4 label4 label4</label>
<input type="checkbox">
<label class="horizontal-list">label2</label>
</li>
</ul>
So I'm in the process of building my website, this is all I have in my body tag:
#social-media {
width: 175px;
margin-left: auto;
margin-right: auto;
padding-top: 10%;
}
#social-media img {
padding: 5px;
}
#social-media ul li {
display: inline;
}
<div id="logo"></div>
<div class="search">
<form action="search.php" method="get">
<input name="keywords" type="text" placeholder="Search for a movie!" autocomplete="off" size="40">
<input type="submit" value="DRINK!">
</form>
</div>
<div id="social-media">
<img src="facebook2.png">
<img src="twitter2.png">
</div>
I'm trying to pin the social-media div to the bottom of the page no matter what device the user is viewing on, is it possible to do this with no wrapper?
If you want it to always appear at the bottom of the screen then use
#social-media {
positioning: fixed;
bottom: 0;
}
The documentation on W3Schools can be found here
If you want to ensure that it is always at the bottom of the actual page (below other content) then try:
#social-media {
clear: both;
}
You seem to need the div to be "absolutely" positioned at the bottom, like this:
#social-media {
width: 175px;
margin-left: auto;
margin-right: auto;
position:absolute;
left:0;
right:0;
bottom:0;
}
#social-media img {
padding: 5px;
}
#social-media ul li {
display: inline;
}
<body>
<div id="logo"></div>
<div class="search">
<form action="search.php" method="get">
<input name="keywords" type="text" placeholder="Search for a movie!" autocomplete="off" size="40">
<input type="submit" value="DRINK!">
</form>
</div>
<div id="social-media">
<img src="facebook2.png">
<img src="twitter2.png">
</div>
</body>
I update this content with a new Jsfidle to show the issue with a max-width of 300px.
On a responsive design, I need to add the "span" tag in front of my radio buttons in order to align my input content with my custom checkbox background.
To review the issue, reduce the windows browser until an option is displayed on two lines
HTML
<ul id="sectors">
<li id="title"><p class="f32l32">Sectors</p></li>
<li>
<label class="search-radio-button f15l18">
<input value="61" name="sectors[]" type="radio" class="radio sectors-radio-button"> Built environment
<span class="Built environment"></span>
</label>
</li>
<li>
<label class="search-radio-button f15l18">
<input value="62" name="sectors[]" type="radio" class="radio sectors-radio-button"> Defence & government
<span class="Defence & government"></span>
</label>
</li>
<li>
<label class="search-radio-button f15l18">
<input value="63" name="sectors[]" type="radio" class="radio sectors-radio-button"> Manufacturing & technology
<span class="Manufacturing & technology"></span>
</label>
</li>
<li>
<label class="search-radio-button f15l18">
<input value="64" name="sectors[]" type="radio" class="radio sectors-radio-button"> Oil, energy & mining
<span class="Oil, energy & mining"></span>
</label>
</li>
<li>
<label class="search-radio-button f15l18">
<input value="65" name="sectors[]" type="radio" class="radio sectors-radio-button"> Transport
<span class="Transport"></span>
</label>
</li>
<li>
<label class="search-radio-button f15l18">
<input value="66" name="sectors[]" type="radio" class="radio sectors-radio-button"> Utilities & infrastructure
<span class="Utilities & infrastructure"></span>
</label>
</li>
CSS
ul#sectors, ul#locations {
display: inline-block;
padding-bottom: 2.5%;
}
#detail-search-container li#title {
width: 100%;
display: inline-block;
padding-bottom: 5%;
padding-top: 6%;
}
#detail-search-container li {
min-height: 20px;
width: 50%;
float: left;
display: inline-block;
}
#detail-search-container li label {
padding-left: 20px;
display: inline-block;
padding-left: 20%;
width: 80%;
}
.search-radio-button span {
width: 20px;
width: 22px;
height: 22px;
float: left;
background: url("http://satafx.com/img/radio.gif");
background-repeat: no-repeat;
margin-bottom: 10px;
margin-top: -3px;
display: inline-block;
margin-left: -20%;
}
.search-radio-button input {
display: none;
}
.search-radio-button input:checked + span, .class_checkbox.checked {
background-position: 0px -20px;
background-position: 0px -26px;
}
I have made some cosmetic changes to your CSS as i'm mentioning below with comments.
1) Remove background-position:
.search-radio-button input:checked + span, .class_checkbox.checked {
background-position: 0px -20px;
background-position: 0px -26px; // remove this
}
2) Set margin-top and left acordingly
.search-radio-button span {
width: 20px;
width: 22px;
height: 22px;
float: left;
background: url("http://satafx.com/img/radio.gif");
background-repeat: no-repeat;
margin-bottom: 10px;
margin-top: 0; //change this
display: inline-block;
margin-left: -9%; //change this
}
Fiddle Demo
Updated Fiddle
Hope you want like this!
If I understand correctly, I just have to put the span before the input...
<li>
<label class="search-radio-button f15l18">
<span class="Built environment"></span>
<input value="61" name="sectors[]" type="radio" class="radio sectors-radio-button"> Built environment
</label>
</li>
I hope this is what you are looking for...