I want to center the submit button on the last div, but i can´t do it.
I try a lot of things, like margin:auto, align-left and right and others asks you make at this page, but it´s imposible for me.
<!DOCTYPE html>
<head>
<meta charset="UTF-8"/>
<title>Mi Revista</title>
<style>
body {
background: #7f7f7f;
}
#container {
width: 800px;
margin: auto;
position: relative;
}
#header {
background: #5783a0;
height: 75px;
}
#contenido {
padding: 1px;
background-color: white;
}
#left {
float:left;
width: 470px;
background-color: pink;
height: 300px;
}
#bordei {
border-style: solid none;
border-width: 2px;
border-color: black white;
background: #efefef;
margin: 0px 0px 2px 10px;
font-weight: bold;
}
#borded {
border-style: solid none;
border-width: 2px;
border-color: black white;
background: #efefef;
margin: 0px 10px 2px 0px;
font-weight: bold;
}
#derecha {
float:left;
width: 330px;
background-color: yellow;
height: 300px;
}
#footer {
height: 50px;
background-color: aquamarine;
clear:both;
}
div form {
display:block
}
#acept {
margin:auto;
}
</style>
</head>
<body>
<div id="container">
<div id="header"> Mi Revista</div>
<div id="contenido"> texto de arriba</div>
<div id="left">
<div id="bordei"> borde uno</div>
formulario izquierda
</div>
<div id="derecha">
<div id="borded">borde derecha </div>
Formulario derecha
</div>
<div id="footer">
<form id="acept">
<input type="submit" name="submit" value="Aceptar"/>
</form>
</div>
</div>
</body>
</html>
I wait for your awnswer, beacuse I can´t do it of any form.
Thaks
Just give alignment center to footer div
<div id="footer" align="center">
Change your CSS slightly as follows
#acept {
width:20px;
margin:0 auto;
}
The problem was that you wasnt specifying a width for the form and due to that it was taking 100% width.And thus the margin:0 auto doesnt work.
I've done a fiddle.Please check it..
Use the text-align:center in #acept is the simplest way.
You could as well use the <center> tag, but is is deprecated. So the best way would be to change
#acept{
margin:auto;
}
to
#acept{
margin:auto;
text-align:center;
}
you can use :
#acept {
margin-left:40%;
width:10%;
}
JSFIDDLE Link
Related
What seems to be an easy HTML page and CSS set up I have come up to an issue. I am trying to make a DIV fill up the rest of the page and meet with the DIV at the bottom.
I have researched all through the web and tried many options I have come across.
It seems the most popular way is to use position:absolute but when I do that my Google map disappears. It will also not let me change the position of the Google Map DIV from relative.
At the moment it is displaying as you can see from my image. I would like the #map DIV to center and fill up the remainder of the space available.
My site in Chrome element view
My HTML code:
<div id="wrapper">
<div id="header">
<h1>Find a Car Park</h1>
</div>
<div id="section">
<input type="text" id="town" placeholder="Search for Town.." onkeypress="handle(event)" />
<input type="button" value="Find Car Parks" onclick="codeAddress()" />
<input type="button" value="View All" onclick="getAllCarParks()" />
<input type="button" value="Your Location" onclick="loadUserScript()" />
</div>
<div id="map">
<div id="googleMap">
</div>
</div>
<div id="footer">
<p>hello</p>
</div>
</div>
</body>
My CSS code:
body{
margin:0;
font-family: 'Cabin', sans-serif;
}
#header {
background-color:#2d89ef;
color:white;
text-align:center;
padding: 20px;
}
#wrapper{
position:absolute;
height:100vh;
width:100vw;
}
#section {
text-align:center;
padding-bottom:15px;
padding-top:15px;
width:100vw;
}
#footer {
background-color:#2c3e50;
color:white;
clear:both;
text-align:center;
padding-top:10px;
padding-bottom:10px;
bottom:0;
position:absolute;
width:100vw;
}
#map {
height:auto;
}
#googleMap{
height:65%;
}
input[type=button], input[type=submit], input[type=reset] {
background-color: #2d89ef;
border: none;
color: white;
padding: 16px 32px;
text-decoration: none;
margin: 4px 2px;
cursor: pointer;
border-radius: 4px;
}
input[type=text] {
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
font-size: 16px;
color: darkgrey;
background-color: white;
background-image: url('../images/searchicon.png');
background-position: 10px 10px;
background-repeat: no-repeat;
padding: 12px 20px 12px 40px;
}
Try using flexbox instead.
https://css-tricks.com/centering-css-complete-guide/
<div style="display:flex;justify-content:center;align-items:center;">
<div></div>
</div>
Try this CSS code on the #map, it will makes your map full width and height of the page :
#map {
display: block;
width: 100%;
height: 100%;
}
Fiddle
Background: I am creating a chat-room page in html/css. The div rm-container contains an area where messages are displayed(div class rm-messages), an area to input the message, as well as a div which contains all the users currently in the chatroom (rm-users).
Problem: I would like rm-users to be on the top right of rm-container, but I am unable to get it to work. I followed the tutorial on positioning from w3schools and in my css, changing rm-container position to relative, and rm-users position to absolute, yet I am unable to get the desired result. Instead, what I get is rm-users it is below rm-messages, as would be expected if the default position had not been changed. I have attached both the css and html files below.
#import url(https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300);
body {
background-color: #F0F0E6;
font-family: 'Open Sans Condensed', sans-serif;
margin: 0;
padding: 0
}
.rm-name {
font-size: 20px;
margin-left:auto;
margin-right:auto;
margin-top:15px;
text-align:center;
max-width:100px;
}
.userbox {
border: 1px solid black;
max-width:300px;
padding-bottom:50px;
margin-left:15px;
margin-top:15px;
}
.rm-container {
position:relative;
background-color: white;
border: 1px groove black;
margin-left:auto;
margin-right: auto;
margin-top: 40px;
max-width: 1000px;
padding-bottom: 100px
}
.rm-messages {
position:static;
border: 1px groove black;
margin-top:10px;
max-width: 700px;
margin-left:15px;
height:400px;
}
.rm-users {
position:absolute;
margin-top: 15px;
border: 1px groove black;
margin-right: 15px;
width: 200px;
height: 50px;
overflow-y: scroll;
overflow-x: scroll;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>room-name</title>
<link rel="stylesheet" href="../public/css/room.css">
</head>
<body>
<img src="something" class="chat_room_pic">
<div class="rm-userbox">
<img src="something" class="userPic">
<h3 class="userName">Username | more chatrooms</h3>
</div>
<div class="rm-container">
<div id="rm-name"> room-name </div>
<div class="rm-messages">
<ul class="messages">
<li>
<div class="msgbox">
<div class="pic"><img src="something>">Username </div>
<div class="msg"><p>Hello there!</p></div>
</div>
</li>
</ul>
</div>
<div class="rm-users">
<ul class="users">
<li><img src="something">
</div>
</div>
</body>
</html>
Just add top: -70px to .rm-users
.rm-users {
border: 1px groove black;
height: 50px;
margin-right: 15px;
margin-top: 15px;
overflow: scroll;
position: absolute;
top: -70px;
width: 200px;
}
I have created this template for an eBay listing. When I open it in any browser I can see the borders perfectly. However when I paste the code into eBays HTML description and preview it, I see nothing. If I add text and images into the code they will show within the confines of the borders but the border will still be invisible.
Any ideas?
#pdcontainer {
font-family: Arial, Helvetica, sans-serif;
color: #000000;
}
.holder {
margin: 0 auto;
width: 1100px;
}
.body {
border: 5px solid #66CCFF;
float: left;
width: 780px;
height: 2700px;
border-right-width: 2px;
}
.sidebar {
border: 5px solid #66CCFF;
float: left;
width: 215px;
height: 2700px;
border-left-width: 3px;
}
.header {
border: 5px solid #66CCFF;
float: left;
width: 1000px;
height: 132px;
}
<!DOCTYPE html>
<html lang="en">
<div id="pdcontainer">
<head>
</head>
<html>
<body>
<div class="header">
</div>
<div class="holder">
<div class="body">
</div>
<div class="sidebar">
</div>
</div>
</body>
</html>
</body>
Try change names of divs - if ebay use same name, it can replace your CSS.
I have been recently designing some content which needs to be side by side and have the height automatically resize, but the height doesn't resize. The div doesn't expand to the size of the items inside of it. Is there a way to allow the div to expand to the size of the elements inside of it?
CSS
* {
padding: 0px;
margin: 0px;
}
body {
font-family: 'Metrophobic', sans-serif;
background-color: #c5c5c5;
background-image: url('../images/noise.png');
}
#container {
width:900px;
background-color: #dbdbdb;
margin-top: 20px;
margin-left: auto;
margin-right: auto;
margin-bottom: 20px;
box-shadow: 0px 0px 5px black;
}
.center_align {
display: inline-block;
margin-left: auto;
margin-right: auto;
}
#header {
height:80px;
font-size: 60px;
padding: 10px;
text-align: center;
}
#menu {
width:900px;
height:50px;
margin-top: 10px;
margin-bottom: 10px;
background-color: #cacaca;
}
.menu_link {
width:224px;
height:50px;
text-align: center;
font-size: 35px;
float: left;
opacity: 0.3;
background-color: #cacaca;
}
.menu_divider {
width: 1px;
height: 50px;
background-color: #dbdbdb;
float:left;
}
#content {
width: 900px;
height: auto;
padding: 10px;
font-size: 20px;
height: auto;
}
.line_container {
margin-top:5px;
margin-bottom:5px;
}
#footer {
width:900px;
height:22px;
padding-top:2px;
text-align: center;
font-size: 14px;
color:black;
}
a:link {
color:black;
text-decoration: none;
}
a:visited {
color:black;
text-decoration: none;
}
a:hover {
color:black;
text-decoration: none;
}
a:active {
color:black;
text-decoration: none;
}
a.link:link {
color:#21525e;
}
a.link:visited {
color:#21525e;
}
a.link:hover {
color:#307f91;
text-decoration: underline;
}
a.link:active {
color:#307f91;
text-decoration: underline;
}
HTML
<html>
<head>
<title>Home</title>
<link rel="shortcut icon" href="../images/favicon.ico" />
<link href="http://fonts.googleapis.com/css?family=Metrophobic" rel="stylesheet" type="text/css" />
<link href="../css/style.css" rel="stylesheet" type="text/css" />
<style type="text/css">
.icon {
width:100px;
height:100px;
border: 3px solid white;
border-radius:25px;
margin-left:10px;
margin-right:10px;
background-position: center center;
background-size: 100px 100px;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
<div class="center_align">
<img src="../images/header_icon.png" alt="header_icon" width="80" height="80" style="margin-right:20px;float:left;" />
<div style="height:80px;float:left;">Title</div>
</div>
</div>
<div id="menu">
Home
<div class="menu_divider"></div>
Tutorials
<div class="menu_divider"></div>
About
<div class="menu_divider"></div>
Contact
</div>
<div id="content">
<div style="width:900px;">
<div class="icon" style="background-image:url('image.jpg');float:left;"></div><div style="float:left;margin-top:20px;">I'm a freelance Web, Iphone, and Game developer.</div>
</div>
</div>
<div id="footer">
© Cameron
</div>
</div>
</body>
</html>
Looks like the problem is that the #footer element isn't properly cleared. Add clear: both; to #footer. This pushes the cleared element below the floated elements, and should functionally result in the same visual fix.
The "container div" basically "forgets" that it is the container for them, so simply add an overflow:auto; to make it remember.
I also tend to add zoom:1 for IE.
The problem is that you are floating elements, and that causes problems with wrapping divs per default (pretty much...).
Here is a working solution, where overflow:hidden is added to the wrapping div: http://jsfiddle.net/s2dxw/2/
The float issue is pretty confusing, and has had a couple of solutions in the past. Here's a good read regarding floats in HTML: http://css-tricks.com/all-about-floats/
Alternatively, you can put some element with the rule clear: both; inside and at the end of the wrapping div.
This should be an easy one for someone. I am creating tabs with CSS (please, I don't need suggestions for how to make them look better, this is what my customer wants). As you can see in the image below, my tabs and my "tab bar" don't line up. I do not know why.
The HTML:
<html>
<head>
<link rel="stylesheet" href="prototype.css" type="text/css" />
</head>
<body>
<div id="container">
<div id="content">
<div id="tabs">
<span id="tab0" class="tab">
No Circuit
</span>
<span id="tab1" class="tab">
Digital Inputs
</span>
</div>
</div>
</div>
</body>
<html>
The CSS:
#container {
margin-left: auto;
margin-right: auto;
margin-top: 15px;
position: float;
width: 900px;
}
#content {
border: 1px solid black;
margin-top: 15px;
padding: 15px;
position: relative;
width: 868px;
}
#tabs {
border-top: 1px solid black;
width: 100%;
}
.tab {
border: 1px solid black;
margin-left: 5px;
margin-top: 2px;
padding: 3px;
}
I appreciate any help.
Try: http://jsfiddle.net/dYz9k/1/
.tab {
border: 1px solid black;
border-top: 0;
margin-left: 5px;
padding: 3px;
display: inline-block
}
I set display: inline-block, and removed the margin-top and border-top.
display: inline-block allows the padding to work as you're expecting.
Hm..not 100% certain if that'a what you're asking, but try setting padding:0 on .tab class
Have you considered using a list, better for Accessibility
Example here http://jsfiddle.net/hdhkn/
HTML
<html>
<head>
</head>
<body>
<div id="container">
<div id="content">
<ul id="tabs">
<li id="tab0" class="tab">
No Circuit
</li>
<li id="tab1" class="tab">
Digital Inputs
</li>
</ul>
</div>
</div>
</body>
<html>
CSS
#container {
margin-left: auto;
margin-right: auto;
margin-top: 15px;
position: float;
width: 900px;
}
#content {
border: 1px solid black;
margin-top: 15px;
padding: 15px;
position: relative;
width: 868px;
}
#tabs {
border-top: 1px solid black;
width: 100%;
list-style:none;
height:40px;
}
.tab {
border: 1px solid black;
border-top:none;
margin-left: 5px;
padding: 3px;
float:left;
display:block;
}
Is this what you want to accomplish? Or do you want your tabs(.tab) to be on top of #tabs?
I've added overflow: hidden to #tabs and changed the margin-left to margin-right.
You're putting padding on inline elements (the tabs), that always causes unexpected results.
Cleaned it up a bit for you.
<html>
<head>
<style type="text/css">
#container {
margin-left: auto;
margin-right: auto;
margin-top: 15px;
width: 900px;
}
#content {
border: 1px solid black;
margin-top: 15px;
padding: 15px;
width: 868px;
}
#tabs {
border-bottom: 1px solid black;
width: 100%;
}
.tab {
border: 1px solid black;
border-bottom:0px solid black;
margin-left: 5px;
margin-top: 2px;
padding: 3px;
float:left;
}
.clear {
display:block;
clear:both;
}
</style>
</head>
<body>
<div id="container">
<div id="content">
<div id="tabs">
<span id="tab0" class="tab">
No Circuit
</span>
<span id="tab1" class="tab">
Digital Inputs
</span>
<span class="clear"></span>
</div>
</div>
</div>
</body>
<html>