I am trying to center the div with id="center" both vertically and horizontally within the body tag without distorting the placement of the content: M, cicle div and Coming soon... text. Can't really get it to work even though it should be a simple thing..
HTML:
<body>
<div id="center">
<div class="circle"><div>M</div></div>
<h2>Coming soon...</h2>
</div>
</body>
CSS:
* {
margin: 0;
padding: 0;
font-family: futura;
}
body {
height: 100%;
width: 100%;
background-color: black;
}
h2 {
color: #f6c003;
font-family: serif;
font-style: italic;
font-weight: 400;
font-size: 0.9em;
margin-top: 10px;
}
.circle {
text-align: center;
width: 50px;
height: 50px;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
background: #f6c003;
}
.circle div {
float:left;
width:50px;
padding-top:25px;
line-height:1em;
margin-top:-0.5em;
text-align:center;
color:black;
font-style: bold;
font-weight: 700;
font-family: serif;
font-size: 2.5em;
}
Fiddle
You can use some absolute positioning to get it done
#center {
position:absolute;
left:50%;
top:50%;
margin: -33px 0 0 -43px;
}
The key being that you have negative margins of half the width and half the height to properly position th element ( fixed size only )
Also make sure your body is set to position: relative; in order for the absolute positioning to work correctly.
<style>
body {
height: 100%;
width: 100%;
background-color: black;
}
h2 {
color: #f6c003;
font-family: serif;
font-style: italic;
font-weight: 400;
font-size: 0.9em;
margin-top: 10px;
}
.circle {
text-align: center;
width: 50px;
height: 50px;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
background: #f6c003;
}
.circle div {
float:left;
width:50px;
padding-top:25px;
line-height:1em;
margin-top:-0.5em;
text-align:center;
color:black;
font-style: bold;
font-weight: 700;
font-family: serif;
font-size: 2.5em;
}
#center
{
position:absolute;
left:50%;
top:50%;
}
</style>
<body>
<div id="center">
<div class="circle"><div>M</div></div>
<h2>Coming soon...</h2>
</div>
</body>
As much as I hate tables, tables do a good job of vertically aligning. Maybe there's a better way?
<body>
<table>
<tr>
<td>
<div id="center">
<div class="circle"><div>M</div></div>
<h2>Coming soon...</h2>
</div>
</td>
</tr>
</table>
</body>
Style:
table {
width: 100%;
height: 100%;
border-spacing: 0px;
border-collapse: collapse;
}
.center {
margin: auto;
}
Related
I was doing some CSS, and my divs keep piling up underneath each other. I tried using position on them but it didn't work. My work is below. The picture I have in it will not be available to you as it is from my computer, but I hope you can get the idea of what my issue is(The sitelingo and Capture12 are the ones piling up):
#logomain {
font-family: museo-sans-rounded, sans-serif;
font-size: 33px;
color: white;
font-weight: 600;
padding-top: 13px;
padding-left: 470px;
}
#sitelingo {
font-family: museo-sans-rounded, sans-serif;
font-size: 14px;
font-weight: bold;
position: relative;
color: white;
padding-left: 232px;
padding-top: 24px;
}
#barone {
position: fixed;
float: left;
width: 50%;
height: 70px;
background-color: #0A4076;
}
#bartwo {
postition: fixed;
float: right;
width: 50%;
height: 70px;
background-color: #0A4076;
}
#login {
padding-left: 400px;
position: absolute;
}
body {
margin: 0;
}
.bold {
font-weight: bold;
}
<head>
<title>Duolingo</title>
</head>
<body>
<div id="barone">
<div id="logomain"> duolingo </div>
</div>
<div id="bartwo">
<div id="sitelingo"> Site language: English </div>
<div id="login"> <img src="images/Capture12.png" /> </div>
</div>
</body>
</html>
A couple of issues:
You set a position:fixed to #barone. This will position the element relative to the actual screen.
You have elements positioned absolute, when the screen resizes, it will overlap with other elements
A padding left is set on your logo, this makes it out of viewpoint
Maybe you may want something as depicted below
#logomain {
font-family: museo-sans-rounded, sans-serif;
font-size: 33px;
color: white;
font-weight: 600;
padding-top: 13px;
/* padding-left: 470px;*/
}
#sitelingo {
font-family: museo-sans-rounded, sans-serif;
font-size: 14px;
font-weight: bold;
position: relative;
color: white;
/*padding-left: 232px;*/
padding-top: 24px;
}
#bar_container {
background-color: #0A4076;
}
#barone {
/* position: fixed;*/
height: 70px;
background-color: #0A4076;
display: inline-block;
}
#bartwo {
postition: fixed;
float: right;
height: 70px;
background-color: #0A4076;
}
#bartwo *{
display:inline-block;
}
#login {
position:relative;
/*padding-left: 400px;
position: absolute; */
vertical-align: middle;
top:0;
}
#login img{
width:100px;
height:100%;
}
body {
margin: 0;
}
.bold {
font-weight: bold;
}
<head>
<title>Duolingo</title>
</head>
<body>
<div id="bar_container">
<div id="barone">
<div id="logomain"> duolingo </div>
</div>
<div id="bartwo">
<div id="sitelingo"> Site language: English </div>
<div id="login"> <img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRgKSOJmOr8tNodELaCLPrI1T2XE7iwrpuxPDGuFeoJwlJC4AVKZw" /> </div>
</div>
</div>
</body>
</html>
as you can see the border right is all the way at the right of the header I want to move it closer to the middle text.
[1]: https://i.stack.imgur.com/HRYwR.png
#header {
font-family: "NotoNashkArabic", "ProximaNova-regular", "Helvetica Neue", "Helvetica", Roboto, Arial, sans-serif;
margin: 0;
background-color: #2E7061;
margin-left: auto;
margin-right: auto;
width: 100%;
height: 80px;
}
#title {
color: white;
text-align: center;
padding:10px 5px 20px 5px;
margin-right: 20px;
margin: -.1px;
font-size: 1.7em;
border-right: 1px solid white;
}
html
<body>
<div id="header">
<img src="Capture1.png"/>
<p id="title">THE Text</p>
</div>
</body>
Could you add this to your css #title
display: inline-block;
which will be,
#title {
display: inline-block;
color: white;
text-align: center;
padding:10px 5px 20px 5px;
margin-right: 20px;
margin: -.1px;
font-size: 1.7em;
border-right: 1px solid white;
I hope it solves your problem
The code you provided is not enough to reproduce what you show in the image. But I'll assume your image is floated left for now.
#header {
font-family: "NotoNashkArabic", "ProximaNova-regular", "Helvetica Neue", "Helvetica", Roboto, Arial, sans-serif;
margin: 0;
background-color: #2E7061;
margin-left: auto;
margin-right: auto;
width: 100%;
height: 80px;
}
#header img{
float: left;
}
#title {
color: white;
text-align: right;
padding-right: 20px;
margin-right: 20px;
margin: -.1px;
font-size: 1.7em;
border-right: 1px solid white;
width: 50%;
margin-left: 200px;
height: 100%;
line-height:80px;
}
<body>
<div id="header">
<img src="http://placehold.it/200x80.png">
<p id="title">THE Text</p>
</div>
</body>
What I did here was:
Set width: 50% on your #title. (Arbitrary value)
I set the left margin to the width of your image (I guessed at 200px.) The reason is because the picture overlaps the width of the <p>-tag when the image is floated. I consider it more concise to have the values without overlap.
I aligned the text right to get it close to the border. Use 'padding-right' to control the space between text and border.
I removed vertical padding and set the line-height to the height of the header/image to get the text vertically centered and the border to reach from top to bottom of the header.
Other things to note:
margin-right: 20px; // This has no meaning...
margin: -.1px; // ...since it gets overridden by this.
I'm looking to add a center text title in the middle of my page and it won't show up. Code seems correct, don't see a bug.
<div id="welcome_text_div">
<p id="welcome_text"> Welcome </p>
</div>
#welcome_text_div {
position: absolute;
background-color:red;
width:800px;
height:300px;
top: 50%;
margin-top: -150%;
left: 50%;
margin-left: -400px;
}
#welcome_text {
color: white;
font-family: sans-serif;
text-transform: uppercase;
font-weight: bold;
font-size: 55px;
text-align: center;
}
You just need to use text-align: center and it should center automatically. BTW I see you are using ids often which is very bad practice. IDs should be used for javasscript selectors while class for css.
.center-text {
text-align:center;
}
.title-text {
// Do css formating here
}
<div class="center-text title-text">
<p class="page-title"> Welcome </p>
</div>
try this
#welcome_text_div {
position: absolute;
background-color:red;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
#welcome_text {
color: white;
font-family: sans-serif;
text-transform: uppercase;
font-weight: bold;
font-size: 55px;
text-align: center;
width: 800px;
line-height: 300px;
}
<div id="welcome_text_div">
<p id="welcome_text"> Welcome </p>
</div>
<div id="welcome_text_div">
<p id="welcome_text"> Welcome </p>
</div>
#welcome_text_div {
position: absolute;
background-color:red;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
#welcome_text {
color: white;
font-family: sans-serif;
text-transform: uppercase;
font-weight: bold;
font-size: 55px;
text-align: center;
width: 800px;
line-height: 300px;
}
You can achieve this with flexbox.
All you need to do to the container is define its width and height (and give it a bg color):
#welcome_text_div {
background-color:red;
width:800px;
height:300px;
}
Then add these three lines to set the flexbox display context, and center it vertically and horizontally:
display:flex;
align-items:center;
justify-content:center;
Then remove all the extra formatting from your inner div.
#welcome_text_div {
background-color:red;
width:800px;
height:300px;
display:flex;
align-items:center;
justify-content:center;
}
#welcome_text {
color: white;
font-family: sans-serif;
text-transform: uppercase;
font-weight: bold;
font-size: 55px;
}
https://jsfiddle.net/k5zve6bf/
I have a problem I can't figure out in css. At the bottom of an imageslider I have three circles, but they need to be a bit responsive so that everyone on a laptop from 13' till 21' can see them at their exact position. But when I resize the screen, these circles loose their position and will be placed a bit higher or lower. Here is the example I am talking about, you will see when you resize the screen, the circles are not in their original good position, at the bottom of the image.
I am working towards this. The code I have is the following:
CSS
.bxslider {
margin: 0;
padding:0;
}
#bijschrift {
position: relative;
left: 65%;
height: auto;
bottom: 250px;
float: left;
z-index: 9999;
}
#bijschrifthoofd {
z-index: 9999;
opacity: 0.8;
padding-left: 10px;
padding-right: 10px;
background-color: #212121;
}
#bijschrifthoofd span {
width: auto;
color: white;
font-family: 'Open Sans', sans-serif;
font-weight: 500;
line-height: 45px;
font-size: 150%;
}
#bijschriftonder {
z-index: 9999;
opacity: 0.8;
margin-top: 10px;
padding-left: 10px;
padding-right: 10px;
background-color: #212121;
float: left;
}
#bijschriftonder span {
width: auto;
color: white;
font-family: 'Open Sans', sans-serif;
font-weight:100;
line-height: 45px;
font-size: 22px;
}
#cirkelcontainer {
width: 100%;
height: auto;
position: relative;
bottom: 200px;
z-index: 9999;
display: block;
}
.circle
{
display:table-cell;
width:80px;
height:80px;
border-radius:40px;
font-size:16px;
color:white;
vertical-align: top;
text-align:center;
background:#00ccff;
float: left;
font-family: 'Open Sans', sans-serif;
font-size: 22px;
line-height: 80px;
}
.circle2 {
display:table-cell;
margin-left: 2%;
z-index: 9999;
width:80px;
height:80px;
border-radius:40px;
font-size:16px;
color:white;
vertical-align: top;
text-align:center;
background:#e05c50;
float: left;
font-family: 'Open Sans', sans-serif;
font-size: 22px;
line-height: 80px;
}
.circle3 {
display:table-cell;
margin-left: 10%;
z-index: 9999;
width:80px;
height:80px;
border-radius:40px;
font-size:16px;
color:white;
vertical-align: top;
text-align:center;
background:#0099cc;
float: left;
font-family: 'Open Sans', sans-serif;
font-size: 22px;
line-height: 80px;
}
HTML
<ul class="bxslider" >
<li><img src="fotos/Untitled-5.jpg" title="Funky roots" /></li>
<li><img src="fotos/Untitled-4.jpg" title="The long and winding road" /></li>
<li><img src="fotos/Untitled-3.jpg" title="Happy trees" /></li>
</ul>
<div id="bijschrift">
<div id="bijschrifthoofd"><span>UW SPRINGPLANK NAAR INSPIRATIE</span></div>
<div id="bijschriftonder"><span>En authentieke waterpret</span></div>
</div>
<div style="clear:both"></div>
<div id="cirkelcontainer">
<div class="circle">O</div>
<div class="circle2">IB</div>
<div class="circle3">T</div>
</div>
</body>
</html>
I'm not sure where is the "exact position" of the circles. I'm assuming it's over the image at the bottom, like this:
http://jsfiddle.net/Y65mW/1/
So I changed the circles Html like this:
<div id="circle1" class="circle">O</div>
and the Css so we can use a single circle style definition:
.circle {
position: absolute;
width:80px;
height:80px;
border-radius:40px;
...
}
#circle1 {
left: 60px;
background:#00ccff;
}
You should still add a 'min-width' property to the whole site.
I updated the solution here http://jsfiddle.net/Y65mW/3/embedded/result/
The solution was quite obvious: I had to position the circles to absolute so it wouldn't affect the position of my next divs, and add a 'margin-left: -width px' to it. In this case: "margin-left: -50px;".
I'm trying to build a website for some coursework and my two middle columns are being pushed over to the left for some reason. The header, nav bar and footer all align vertically but the two floated divs in the middle are being forced to the left.
HTML
<html>
<head>
<title>Churches Of Norwich</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link type="text/css" rel="stylesheet" href="site.css">
</head>
<body>
<div id="bg">
<div id="content">
<div id="headboxspacer"></div>
<div id="head-box">Churches of Norwich</div>
<div id="navbar" style="float: none">
<div id="tabs">
<ul>
<li>Home</li>
<li>Map</li>
<li>Churches</li>
<li>Comments</li>
<li>Gallery</li>
</ul>
</div>
</div>
<div id="container" style="overflow:hidden;width: 100%">
<div id="homeboxleft" style="clear: both">Testing</div>
<div id="homeboxright" style="clear: both" >Right</div>
</div>
<div id="footer"> footer </div>
<div id="bottomspacer"></div>
</div>
</div>
</body>
</html>
CSS
#content {
width: 1200px ;
height: max-content;
margin-left: auto ;
margin-right: auto ;
}
#headboxspacer{
height:50px;
width:100%;
}
#head-box{
background-color: #003651;
height: 120px;
width: 100%;
padding: 10px;
margin: 5px;
text-orientation: inherit;
font-family: sans-serif;
font-size: 65pt;
color: #FEE7BE;
font-style: normal;
text-align: center;
}
#navbar{
height: 50px;
background-color: #003651;
width: 100%;
margin: 5px;
padding: 10px;
font-family: sans-serif;
font-size: 20pt;
color: #FEE7BE;
font-style: normal;
text-align: center;
text-decoration-line: underline;;
width: 100%;
}
#tabs ul {
margin: 0 ;
padding: 0 ;
list-style: none ;
display: inline ;
}
#tabs ul li {
margin: 0 ;
padding: 10px ;
display: inline ;
text-align: center ;
list-style: none ;
font-family: Arial, Helvetica, sans-serif ;
}
#tabs li a {
color: #FEE7BE;
background-color: #003651 ;
padding: 8px ;
text-decoration: none ;
display: inline ;
}
#tabs li a:hover {
color: gainsboro ;
background-color: #003651 ;
}
#container{
width: 1200px;
}
#homeboxleft{
background-color: #FEE7BE;
height: 500px;
width: 50%;
float: right;
margin: 0px;
opacity: 10%;
filter:alpha(opacity=10);
text-orientation: inherit;
font-family: sans-serif;
font-size: 10pt;
color: #003651;
font-style: normal;
text-align: center;
}
#homeboxright{
background-color: #FEE7BE;
height: 500px;
width: 50%;
float: left;
margin: 5px;
text-orientation: inherit;
font-family: sans-serif;
font-size: 10pt;
color: #003651;
font-style: normal;
text-align: center;
}
#mainbox{
background-color: #FEE7BE;
height: 500px;
width: 100%;
opacity: 0.6;
}
#footer{
background-color: #003651;
height: 120px;
width: 100%;
padding: 10px;
margin: 5px;
text-orientation: inherit;
font-family: sans-serif;
font-size: 65pt;
color: #FEE7BE;
font-style: normal;
text-align: center;
clear: both;
}
#bottomspacer{
height:100px;
width:100%;
}
because the padding of the navbar is added to the width of the navbar.
you have to use the box model solution with an inner div
http://css-discuss.incutio.com/wiki/Box_Model_Hack#Box-in-a-box
then you have the same widths and appearance in all browsers
Your "container" which holds the two columns is set to "width =100%".
It means that the div will spread on the entire width of the page.
Try deleting this width attribute, and beside that delete all float attributes.
I have also attached a screenshot.
and this is the fullscreen preview of the fiddle:
http://fiddle.jshell.net/zHBhs/2/show/
I think your problem is the inline css here:
<div id="homeboxleft">Testing</div>
<div id="homeboxright">Right</div>
//-------------------^-------------just removed the clear:both inline css here
and in your this css class just removed the margin property:
#homeboxright{
background-color: #FEE7BE;
height: 500px;
width: 50%;
float: left;
margin: 0; // <------------------made margin for all sides to 0
text-orientation: inherit;
font-family: sans-serif;
font-size: 10pt;
color: #003651;
font-style: normal;
text-align: center;
}
try this and see if this solves, checkout the fiddle here: http://jsfiddle.net/zHBhs/2/
do some work on these css classes as well:
#head-box{
padding:0; // change paddings to 0
margin: 5px 0; // just apply to top and bottom margins
}
#navbar{
margin: 0; // change paddings to 0
padding:10px 0; // just apply to top and bottom margins
}
#footer{
margin: 0; // change paddings to 0
padding:10px 0; // just apply to top and bottom margins
}
Get both of the sides, left and right in a main div. Then apply this css:
#maindiv{
overflow:hidden;
border-bottom:1px solid rgba(200,200,200,0.3);
border-top:1px solid rgba(200,200,200,0.3);
}
#left{
width:60%;
float:left;
overflow:hidden;
}
#right{
overflow:hidden;
}
Note: The right div will be attached with left one, If you want to float it to right, Apply float:right; to it. But float to only left is suggested :)
An Example for both sides using the above trick.