I have a div inside a div that will not move up into the center where I want it to. It is the image called youthcouncil
HTML
<div id="header">
<img src="file:///E:/Crios%20Óige/Crios%20Oige%20Images/Logo.png" id="logo">
<img src="file:///E:/Crios%20Óige/Crios%20Oige%20Images/Title.PNG" id="title">
<img src="http://www.youtharts.ie/sites/youtharts.ie/files/NYCI%20Logo%20Full%20JPG_2.jpg" id="youthcouncil">
</div>
Corresponding CSS
#header {
height: 100px;
width: 2000px;
background-color: #993333;
margin-top: -10px;
}
#youthcouncil {
height: 80px;
width: 180px;
margin-left: 300px;
margin-top: 5px;
}
#logo {
height: 80px;
width: 180px;
margin-left: 20px;
margin-top: 5px;
}
#title {
height: 80px;
width: 180px;
margin-left: 250px;
margin-top: 5px;
}
UPDATED
I removed some parts for you, to make it easier to see how it works. Now you should be able to add back your other images etc.
Demo: http://jsfiddle.net/UKAEu/2/
HTML
<div id="header">
<img src="http://www.youtharts.ie/sites/youtharts.ie/files/NYCI%20Logo%20Full%20JPG_2.jpg" id="youthcouncil" />
</div>
CSS
#header {
height: 100px;
width: 500px;
background-color: #993333;
}
#youthcouncil {
height: 80px;
width: 180px;
margin-top: 10px;
position: relative; /* make it moveable */
left: 50%; /* push left edge to center */
margin-left: -90px; /* push back half its width */
}
Related
I need my two white divs to stay in the exact same place compared to my black div in the middle. The should stay the exact same distance away from the black div when minimizing the page.
#halvfjerds {
width: 100%;
height: 1050px;
background-color: blue;
}
#halvfjerds .timeline {
background-color: black;
}
#halvfjerds .linje1 {
width: 500px;
height: 100px;
background-color: white;
margin-left: 18vw;
margin-top: 220px;
float: left;
display: block;
position: absolute;
}
#halvfjerds .linje2 {
width: 500px;
height: 100px;
background-color: white;
margin-left: 54vw;
margin-top: 780px;
float: left;
display: block;
position: absolute;
}
.timeline {
height: 95%;
width: 100%;
float: left;
margin-top: 1.4%
}
<div id="halvfjerds">
<div class="timeline">
</div>
<div class="linje1">
</div>
<div class="linje2">
</div>
</div>
Hope someone out there can help!
#halvfjerds .timeline {
background-color:black;
position: relative;
}
I don't know if that is what you need, if it's don't just let me know
You have to set the same margin-left: 18vw;
If not like this solution, so I don't understand
All you need is to give position:absolute style property to divs.
Please see the below code and screenshot. Can anyone please explain why there are white gaps between the divs and how to remove them? I would like the divs sit next to one another without any margin between them
![
<!DOCTYPE html>
<html>
<head>
<style>
body {
color: #b3b3b3;
font-family: arial;
font-size: 14pt;
}
#containerdiv {
width: 1184px;
height: 626px;
position: absolute;
margin-top: -338px;
margin-left: -552px;
top: 50%;
left: 50%;
}
#centerdiv {
display: inline-block;
width: 1024px;
height: 576px;
background-color: #fff;
}
#lowercenterdiv {
background-color: #ff00ff;
width: 1024px;
height: 50px;
text-align: center;
line-height: 50px;
display: inline-block;
}
#lowerleftdiv {
background-color: #00ff00;
width: 80px;
height: 50px;
line-height: 50px;
position: absolute;
}
#leftdiv {
position: absolute;
background-color: #ff000f;
width: 80px;
height: 576px;
display: inline-block;
line-height: 576px;
}
#rightdiv {
position: absolute;
background-color: #000fff;
width: 80px;
height: 576px;
display: inline-block;
line-height: 576px;
text-align: right;
}
#lowerrightdiv {
position: absolute;
background-color: #fff000;
width: 80px;
height: 50px;
text-align: right;
display: inline-block;
line-height: 50px;
}
.arrowimg img {
vertical-align: middle;
}
</style>
</head>
<body>
<div id="containerdiv">
<div id="leftdiv"><img class="arrowimg" src="leftarrow.png"></div>
<div id="centerdiv">
</div>
<div id="rightdiv"><img class="arrowimg" src="rightarrow.png"></div>
<div id="lowerleftdiv">?</div>
<div id="lowercenterdiv">?</div>
<div id="lowerrightdiv">?</div>
</div>
</body>
</html>
You could try to remove all your position: absolutes, as they make things complicated. What you want is: three boxes next to each other, then three boxes next to each other below it. If you float them to the left, you solve this problem. I have amended your CSS, just copy and paste and you can see the gaps disappear because floating elements don't care about whitespaces. There are other difficulties involved with floating, but it does solve your problem.
I have also removed everything I didn't need to get my point across.
#containerdiv {
width: 1184px;
height: 626px;
position: absolute;
margin-top:-338px;
margin-left:-552px;
top:50%;
left:50%;
}
// I added this to float all the divs inside your container to float
#containerdiv div {
float: left;
}
#centerdiv {
// I removed position: absolute from every box, as well as line-heights, align and display
width: 1024px;
height: 576px;
background-color: #fff;
}
#lowercenterdiv {
background-color: #ff00ff;
width: 1024px;
height: 50px;
text-align:center;
}
#lowerleftdiv {
background-color: #00ff00;
width: 80px;
height: 50px;
}
#leftdiv {
background-color: #ff000f;
width: 80px;
height: 576px;
}
#rightdiv {
background-color: #000fff;
width: 80px;
height: 576px;
}
#lowerrightdiv {
background-color: #fff000;
width: 80px;
height: 50px;
}
Add this to your css:
* {
margin: 0;
padding: 0;
}
This is a weird thing in how html is interpreted. The whitespace between the divs is rendered as a space. There are many ways to solve this, and none of them are very pretty.
One way is like this:
<div id="leftdiv">
<img class="arrowimg" src="leftarrow.png">
</div>
<div id="centerdiv">
</div>
<div id="rightdiv">
<img class="arrowimg" src="rightarrow.png">
</div>
<div id="lowerleftdiv">
?
</div>
<div id="lowercenterdiv">
?
</div>
<div id="lowerrightdiv">
?
</div>
Hope its fix
{
margin: 0;
padding: 0;
border-sizing: border-box;
}
I am able to center my elements horizontally, but not vertically. I found couple of questions on stackoverflow regarding the same issue but the suggestions in those didn't work for some reason. Any suggestions? This is what I am going for: http://i62.tinypic.com/n4gzcw.png
Here is what I have so far:
<style>
.container {
width: 100%;
height: 100%;
background-color: red;
position: absolute;
top:0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
.datetime {
width: 50%;
margin-left: auto;
margin-right: auto;
margin-top: 15%;
background-color: white;
text-align: center;
}
.main {
width: 100%;
margin-left: auto;
margin-right: auto;
margin-top: 3%;
background-color: yellow;
text-align: center;
}
.left {
width: 25%;
float: left;
}
.left img {
width: 50%;
height: 50%;
max-width: 80px;
max-height: 80px;
}
.mid {
width: 50%;
text-align: center;
float: left;
padding-top: 5%;
font-size: 1em;
}
.right {
width: 25%;
float: left;
}
.right img {
width: 50%;
height: 50%;
max-width: 80px;
max-height: 80px;
}
.stadium {
width: 50%;
margin-left: auto;
margin-right: auto;
background-color: white;
text-align: center;
}
</style>
<div class="container">
<div class="datetime">26 August 2014<br />12:00pm</div>
<div class="main">
<div class="left"><img src="http://dejaniskra.comze.com/ManchesterUnitedUpcomingFixture/logos/mkdons.png" /></div>
<div class="mid">MK Dons vs Manchester United</div>
<div class="right"><img src="http://dejaniskra.comze.com/ManchesterUnitedUpcomingFixture/logos/manchesterunited.png" /></div>
</div>
<div class="stadium">Stadium:mk - Milton Keynes</div>
</div>
You can wrap your content with .container-inner and add styles:
.container-inner{
height: 150px;
position: absolute;
top: 50%;
margin-top: -75px;
width: 100%;
}
you can find the working example here:
http://jsfiddle.net/Lkfdxm13/
Creating a partial CSS layout and then attempting to adapt it to another strategy can be fraught with problems. My suggestion would be to create a clean set of html wrappers with only background colours and work on employing one of the solutions that you've found, for example How to verticaly align into the center of the content of a div with defined width/height?. Once you have a working layout then you can move your content in.
If you come across a problem that you can't solve then you can post a specific CSS question and the answers will probably be a lot more forthcoming.
i'm trying to recreate this image in pure html and css, or add a little javascript if nessascary:
and here's what i have so far:
i'm trying to move that small orange box near the center up to match the blue line, but she won't budge
.middletop {
position: absolute;
background-color: #fe9800;
width: 26px;
height: 16px;
left: 471px;
}
and here's the entire code:
layout.html
<html>
<head>
<title>LCARS</title>
<link rel="stylesheet" href="static/style.css"/>
</head>
<body>
<div class="topleft">
</div>
<div class="topleft2">
</div>
<div class="middletop">
</div>
<div class="bottomleft">
</div>
<div class="bottomleft2">
</div>
<div class="bottomleft3">
</div>
<div class="bottomleft4">
</div>
<div class="content">
</div>
<div class="content2">
</div>
</body>
<footer>
</footer>
</html>
style.css
body {
background-color: black;
}
.topleft {
background-color: #c498c4;
width: 126px;
height: 90px;
}
.topleft2 {
margin-top: 5px;
background-color: #9b98fe;
width: 463px;
height: 112px;
border-radius: 0 0 0 70px;
}
.bottomleft {
margin-top: 7px;
background-color: #cc6061;
width: 463px;
height: 91px;
border-radius: 70px 0 0 0;
}
.bottomleft2 {
margin-top: 5px;
background-color: #cc6061;
width: 126px;
height: 137px;
}
.bottomleft3 {
margin-top: 5px;
background-color: #fe9800;
width: 126px;
height: 38px;
}
.bottomleft4 {
margin-top: 5px;
background-color: #ffa873;
width: 126px;
height: 180px;
}
.middletop {
position: absolute;
background-color: #fe9800;
width: 26px;
height: 16px;
left: 471px;
}
.content {
background-color: /*#6D6A6A*/black;
position: absolute;
left: 127px;
top: 239px;
border-radius: 35px;
width: 900px;
height: 700px;
}
.content2 {
background-color: black;
position: absolute;
left: 127px;
top: -2;
border-radius: 0 0 0 35px;
width: 900px;
height: 200px;
}
While I advise having a look into using absolute positioning extensively, if you're already doing it and you're happy with it, you just have to set top and you should be good to go:
.middletop {
position: absolute;
background-color: #fe9800;
width: 26px;
height: 16px;
left: 476px;
top:199px /* <-- this is what I added */
}
Here is a demo.
Try using
position: absolute;
top: /*the amount of px from the top to your wanted location*/;
left: /*the amount of px from the left to your wanted location*/;
z-index:1000; /*<= this is to be above all other elements*/
Use the css top:100px;. And to see it use: z-index:100;
When I change the position of my image to fixed it goes off to the right, I cannot figure out how to get it back to the center of my page and still use the position:fixed attribute. Please help
Thank you ahead of time!
CSS:
header {
height: 60px;
color: #413659;
background-color: #413659;
margin-top: 30px;
}
#logo {
height: 100px;
width: 100px;
margin-left: auto;
margin-right: auto;
position: fixed;
top: 10px;
}
HTML:
<header>
<img src="http://i.imgur.com/IdtgpVa.png" alt="DP" id="logo">
</header>
Try this
#logo {
height: 100px;
width: 100px;
margin-left: -50px;
margin-right: auto;
position: fixed;
top: 10px;
left:50%;
}
updated jsFiddle file
Also you can use calc() from CSS3
left: 45%;
left: calc(50% - 50px);
http://jsfiddle.net/S8utY/
Try to use this for your CSS:
header {
height: 60px;
color: #413659;
background-color: #413659;
margin-top: 30px;
}
#logo {
height: 100px;
width: 100px;
margin-left: 45%;
margin-right: auto;
position: fixed;
top: 10px;
}