I'm working in a project and I have this
<html>
<head>
<title><?php $title; ?></title>
<link rel="stylesheet" type="text/css" href="recursos/css/main.css">
<link rel="stylesheet" type="text/css" href="recursos/css/menu.css">
<meta charset="utf-8">
<script type="text/javascript" src="js/jquery-ui-1.10.4.custom/js/jquery-1.10.2.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.10.4.custom/js/jquery-ui-1.10.4.custom.min.js"></script>
<script type="text/javascript" src="js/menu.js"></script>
</head>
<body>
<header class="centrado">
<div class="loginregister"></div>
<div class="espacio"></div>
<div class="menu">
<p class="home">Home</p>
</div>
<hr>
</header>
Now I'm working in the menu bar and I want to put the <p> home in the center of the menu div
When I put margin-top: 10px to centre the home button it moves all the menu div
I have this css:
body {
background-image: url('../../img/madera.jpg');
}
.centrado {
height: 100%;
width: 80%;
background-color: red;
margin: 0 auto;
}
.menu {
height: 50px;
width: auto;
background-color: blue;
border-radius: 15px;
}
.espacio {
height: 10px;
}
.home {
text-align: center;
background-color: yellow;
width: 60px;
margin-top: 10px;
border-radius: 15px;
}
What can I do?
Use padding-top on .menu instead of margin-top on .home.
use position relative and absolute concept
.menu {
height: 50px;
width: auto;
background-color: blue;
border-radius: 15px;
position:absolute;//it make parent
}
.home {
text-align: center;
background-color: yellow;
width: 60px;
margin-top: 10px;
border-radius: 15px;
position:relative;// it make child now
}
now if you change css of home its doesn't effect all element
fore more see http://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/
Try this
<header class="centrado">
<div class="loginregister"></div>
<div class="espacio"></div>
<div class="menu">
<center>
<p class="home">Home</p>
</center>
</div>
<hr>
</header>
add float property float:left;
Try this code:
DEMO
.home {
text-align: center;
background-color: yellow;
width: 60px;
margin-top: 15px;
border-radius: 15px;
float:left;
}
If you want to make vertical center then simple adjust the line-height for menu to 50px that make text inside menu vertical-align middle.
.menu {
height: 50px;
line-height:50px;
width: auto;
background-color: blue;
border-radius: 15px;
}
Related
Hello I want to try get this title to be in the centre. as shown here it just does not go to the centre and its really annoying me.
screenshot of issue: https://i.imgur.com/tJhbKS1.jpg
If there is anyway in which you can also make this better that would be great. My goal is eventually to maker the centre box stretch 100% of the screen down
My main focus for this post is to make the text in the centre body box to basically have the title test to be in the centre and then the
test to be underneath a little bit in the centre so when I write it will be in the centre and when it reaches the end of the box it will make a new line/.
I also want it so the box is fixed to where it is and it doesn't ever move.
* /*Main Navbar (at top) */ .navbar {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: darkgrey;
border-bottom: 0.05px solid black;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
a:hover:not(.active) {
background-color: #a0a0a0;
border-bottom: 0.05px solid black;
border: 0.05px solid black;
}
/*The body in the center of website */
.body-container {
height: 100%;
width: 50%;
margin-left: auto;
margin-right: auto;
}
.menu {
padding: 20px;
display: flex;
margin-left: auto;
margin-right: auto;
width: auto;
background-color: darkgrey;
text-decoration-color: black;
}
.body-container .menu .title {
margin-left: auto;
margin-right: auto;
text-align: center;
padding-left: 50%;
}
.body-container .body-text {
text-align: center;
margin-top:10%;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="./css/header.css">
<link rel="stylesheet" type="text/css" href="./css/site.css">
</head>
<body>
<ul class="navbar">
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li style="float: right; ">Login</li>
</ul>
<div class="body-container">
<div class="menu">
<div class="title">
<h1>test</h1>
</div>
<div class="body-text">
<p>test </p>
</div>
</div>
</div>
</body>
</html>
Remove padding-left:50%; in .body-container .menu .title to center your headline. Furthermore, you used display:flex, this will occur that the subline doesn't get centered.
Have a look into this Codepen.
https://codepen.io/dmnktoe/pen/wOyxor
(Update: I would recommend you, not to use an absolute position for your element, since it isn't very responsive.)
I tried this and worked:
.body-container .menu .title {
margin-left: auto;
margin-right: auto;
text-align: center;
.body-container .body-text {
text-align: center;
margin: auto;
display: block;
position: absolute;
top: 115px;
left: 315px;
I always use margin: 0 auto; and it works almost all the times
I'm learning css and html and i have this problem, where the margin-left and margin-right in the ".logo" div class don't want to center the div. Please help because i done reserch, i checked the code and everything looks good, so I have no idea whats going on.
body
{
background-color: #303030;
color: #ffffff;
}
.wrapper
{
width:100%;
}
.header
{
width:100px;
padding:40px 0;
}
.logo
{
width:450px;
font-size:48px;
border: 1px solid white;
margin-left: auto;
margin-right: auto;
}
<html lang="pl">
<head>
<meta charset="utf-8"/>
<title>site</title>
<link rel="stylesheet" href="style.css" type="text/css"/>
</head>
<body>
<div class="wrapper">
<div class="header">
<div class="logo">
LOGO
</div>
</div>
</div>
</body>
</html>
Your header is only 100px while your logo is 450px, you can check this fiddle for demo.
.wrapper {
width: 100%;
}
.header {
width: 1000px;
padding: 40px 0;
}
.logo {
width: 450px;
font-size: 48px;
border: 1px solid white;
margin-left: auto;
margin-right: auto;
}
I've created a nice header for my site but when I try to add content after that such as a simple paragraph it's just getting placed in the same spot under my header container. I've attempted some clear fixes but that did not solve my issue. Thanks for your help in advance!
#back-container {
width: 1214px;
height: 809px;
background-image: url("coffee-beans 2.jpg");
}
#page-container {
width: 900px;
height: 100%;
background-color: rgba(214,214,214, .8);
margin-left: auto;
margin-right: auto;
}
header {
width: auto;
height: 130px;
background-color: D8A071;
border-bottom: 3px solid 864C1B;
position: fixed;
font-family: "Trattatello";
}
#logo {
margin-top: -75px;
}
nav {
float: right;
width: 550px;
padding-top: 40px;
}
nav a {
text-decoration: none;
color: black;
border-radius: 20px;
border: 2px solid black;;
background-color: 864C1B;
padding-top: 15px;
margin-right: 20px;
display: inline-block;
text-align: center;
width: 100px;
height: 45px;
}
<html>
<head>
<title>New Coffee Site</title>
<link rel="stylesheet" type="text/css" href="coffeestyles.css">
</head>
<body>
<div id = "back-container">
<div id = "page-container">
<header>
<img id = "logo" src = "coffelogo1.png">
<nav>
Home
Menu
About us
Something
</nav>
</header>
<article>
<p>
asdfasfasfasfasfasfasfasf
</p>
</article>
</div>
</div>
</body>
</html>
Your header is fixed and so anything after it in the HTML will flow beneath it. Move the <header> to be outside of the .page-container and add margin to the top of the .page-container that is equal to the height of your header. This will push the content down so that it starts at the same point as your header ends.
You also need to add where your header will be with top:0; and width:100%;.
Here is a fiddle showing the changes I mae: http://jsfiddle.net/87c9wduf/
It has to do with the position: fixed. Add margin-top to the element you are using as a container that will move everything down.
I essentially want the divs (which are red dots) to stay on the same location on a world map, thus I don't want the divs to move when the browser is resized vertically and horizontally. I'm not sure if I need to be focusing on the div properties or the background's.
Below is my CSS code, ALSO any feedback on my CSS code in general is welcome! I'm new to web design, thanks! :
Here is my HTML:
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<title>My World</title>
</head>
<body>
<div id="home" class="home">
<div id="dallas" class="box, dallas"></div>
<div id="hongkong" class="box"> </div>
<div id="capetown" class="box"></div>
<div id="seoul" class="box"></div>
<div id="mumbai" class="box"></div>
<div id="northampton" class="box"></div>
<div id="sanfrancisco" class="box"></div>
<div id="newyork" class="box"></div>
</div>
</body>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="interactive.js" type="text/javascript" charset="utf-8"></script>
</html>
And my CSS
/*****************
MAIN
******************/
body {
background: url('worldmap.jpg');
background-position: center center;
background-attachment: fixed;
background-size: cover;
}
#home {
}
/* Button Design */
.box {
width: 15px;
height: 15px;
background-color: #FE2E64;
text-shadow: 0 1px 0 rgba(255,255,255,0.2);
border-radius: 100%;
}
/*****************
HOME BUTTONS (Placement only)
******************/
.home {
position: relative;
}
#dallas {
margin-left: 22.5%;
margin-top: 7%;
}
#hongkong {
margin-left: 81.2%;
margin-top: 1.5%;
}
#capetown {
margin-left: 55%;
margin-top: 15%;
}
#seoul {
margin-left: 85%;
margin-top: -22.5%;
}
#mumbai {
margin-left: 69.5%;
margin-top: 4.5%;
}
}
#northampton {
margin-left: 29%;
margin-top: -8.5%;
}
#sanfrancisco{
margin-left: 15%;
margin-top: 0%%;
}
#newyork {
margin-left: 28%;
margin-top: -2%;
}
/*****************
HOVER
******************/
#dallas:hover {
background-color: #F5A9BC;
cursor: pointer;
}
#hongkong:hover {
background-color: #F5A9BC;
cursor: pointer;
}
#capetown:hover {
background-color: #F5A9BC;
cursor: pointer;
}
#seoul:hover{
background-color: #F5A9BC;
cursor: pointer;
}
#mumbai:hover{
background-color: #F5A9BC;
cursor: pointer;
}
#northampton:hover {
background-color: #F5A9BC;
cursor: pointer;
}
#sanfrancisco:hover {
background-color: #F5A9BC;
cursor: pointer;
}
#newyork:hover {
background-color: #F5A9BC;
cursor: pointer;
}
.home {
position: relative;
}
I think you have to make it position: FIXED
If you want to make sure they do not move at all you could try
position:fixed;
This would be in the css for the dots. This would not move the dots anywhere on the page.
Just set a fixed width on your .home div. Example -
.home{
width: 720px;
}
For some reason, my text just wont get centrally aligned. It is a little to the left. Even when I do text-align: right, it does not go to the place where it should. Here's my HTML file:
<html>
<head>
<title>foo</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="icon" type="image/x-icon" href="images/favicon.png" />
<link rel="icon" type="image/png" href="images/favicon.png" />
<link rel="icon" type="image/gif" href="images/favicon.png" />
</head>
<body>
<div id="strapwrap">
<div id="strap">
<div id="menu"><span id="sub">Home</span> <span id="sub">Plans</span><span id="sub">FAQ</span></div>
<div id="logo">
<img src="images/logo.png" />
</div>
</div>
</div><div id="container">
<div id="login_thingy">
//all the login form, and some content goes here, unfortunately, it does not get centrally aligned.
</div>
</div>
Here's my style.css
body{
margin: 0;
background-image: url('http://athile.net/library/blog/wp-content/uploads/2011/11/grass02-300x300.png');
}
#strapwrap{
background-color: #000000;
color: white;
width: 100%;
height: 75px;
top: 0;
bottom: 0;
right: 0;
left: 0;
}
a{
color: inherit;
text-decoration: inherit;
}
#strap{
width: 80%;
margin: auto;
margin-top: 0;
margin-bottom: 0;
}
#menu{
font-size: 25px;
height: 75px;
float: right;
margin: 0;
padding-top: 25px;
padding-bottom: 25px;
word-spacing: 25px;
}
#sub:hover{
border-bottom: 1px dotted #ffffff;
}
#login_thingy{
width: 80%;
margin: auto;
margin-top: 15px;
font-size: 35px;
padding: 15px;
text-align: center
}
Wrap your div text inside <p>
<div id="login_thingy">
<p>all the login form, and some content goes here, unfortunately, it does not get centrally aligned.</p>
</div>
Side Note: It's a good practice to not to place direct text content inside the div
Fiddle
Demo Fiddle
Change your CSS to add/alter:
#container{
text-align:center; /* new addition */
}
#login_thingy {
width: 80%;
display:inline-block; /* replace margin auto */
margin-top: 15px;
font-size: 35px;
padding: 15px;
}
All you need is to set text-align:center on the parent element (#container) then display:inline-block; on the child (#login_thingy). You can then remove any use of margin:auto
use
#container{
text-align:center
}
DEMO
Apply fixed width to the contents of login_thingy div and add margin-left:auto;margin-right:auto; to the contents of login_thingy div.
Like
<div id="login_thingy">
<div style="width:50%;margin-left:auto;margin-right:auto;">all the login form, and some content goes here, unfortunately, it does not get centrally aligned.</div>
</div>
First of all HTML comments are like this: <!-- TEXT HERE -->
Second of all you code is wrong. In the CSS part you have type this:
#login_thingy{
width: 80%;
margin: auto;
margin-top: 15px;
font-size: 35px;
padding: 15px;
text-align: center
}
Without a semicolon (;) at the end of text-align: center; which may be the reason you are getting this error. So the correct code is:
#login_thingy{
width: 80%;
margin: auto;
margin-top: 15px;
font-size: 35px;
padding: 15px;
text-align: center;
}
If that doesn't work, just use a normal header and put it inside a div if you wish. Like so:
<h2 id="login_thingy"> TEXT HERE </h2>
Hope this helped.