i am trying to add a footer to my website but the text keeps moving around.
<div id="footer">
<div id="footerchild">
1
</div>
<div id="footerchildone">
2
</div>
<div id="footerchildtwo">
3
</div>
<div id="footerchildthree">
4
</div>
</div>
and the css
#footer {
margin-left: 100px;
background: #812;
box-shadow: 1px 2px 40px 1px #444;
border: 1px solid black;
width: 1040px;
height: 300px;
position: absolute;
}
#footerchildone {
float: right;
margin-right: 500px;
margin-top: -22px;
}
#footerchildtwo {
float: right;
margin-right: 350px;
margin-top: -22px;
}
#footerchildthree {
float:right;
margin-top: -22px;
margin-right: -250px;
}
I want each column to be centrated with a specific distance, but when i move for instance childthree, the second child follows with it. It shouldnt be like that because i have given each of them a separate div. What is the problem?
I think u are trying to accomplish this:
http://jsfiddle.net/65GaS/5/
It's that simple or I misunderstood you.
http://jsfiddle.net/vvjAJ/
HTML
<div id="footer">
<div id="footerchild">1</div>
<div id="footerchildone">2</div>
<div id="footerchildtwo">3</div>
<div id="footerchildthree">4</div>
</div>
HTML
#footer
{margin-left: 100px;background: #812;box-shadow: 1px 2px 40px 1px #444;border: 1px solid black;width: 1040px;height: 300px;position: absolute;}
#footerchild{float:left;width:260px;margin-top: 50px;text-align:center;}
#footerchildone{float: left;width:260px;text-align:center;margin-top: 50px}
#footerchildtwo{float: left;width:260px;text-align:center;margin-top: 50px}
#footerchildthree{float:left; margin-top: 50px;text-align:center;width:260px;}
You need to add text-align:center to center the text for parent div and make every child div as position:relative; display:inline-block; automatically it will align center for parent div and make sure to remove float:right for child divs. hope this will work for you.
Related
I have a div 'imgcontainer' and a div 'commentcontainer'. Representing a large image and a white box filled with comments below. I want to add a third image that sits on top of the two, vertically centered.
So basically what I'm trying to do is this: https://d13yacurqjgara.cloudfront.net/users/488816/screenshots/1726057/1_1x.jpg
My problem is that I can't figure out how to integrate the CSS to do this into my code below. What can I add to the 'profilepic' div in order to set that image to sit midway between the imgcontainer and commentcontainer ?
HTML
<div id="timeline">
<div class="block2x3 block">
<div class="imgcontainer">
<img src="top-picture.jpg" />
<div class="profilepic">
<img src="facepic.png" />
</div>
</div>
<div class="commentcontainer">
<div class="peoples">
<strong class="people name">Joe Schmoe</strong> and 42 other people bought this
<p>Have commented on your wall post</p>
</div>
</div>
</div>
CSS3
#media (max-width:1860px) {
#timeline .block .imgcontainer img {width:100%;}
#timeline div[class*="block"][class*="x1"] {height:150px;}
#timeline div[class*="block"][class*="x2"] {height:300px;}
#timeline div[class*="block"][class*="x3"] {height:450px;}
#timeline div[class*="block2x3"] .imgcontainer {height:60%; position:relative; z-index:1;}
#timeline div[class*="block2x3"] .commentcontainer {height:40%; z-index:2;}
.profilepic {
margin: 40px 0px 0px 0px;
border: 7px solid white;
border-radius: 70px;
}
On your CSS to center the 'profile' pic you can add this to you CSS:
.profilepic {
/*margin: 40px 0px 0px 0px; INSTED OF THIS */
margin-left: auto; /* USE */
margin-right: auto; /* THIS */
border: 7px solid white;
border-radius: 70px;
}
but first you will have to add this to you css file:
html { width: 100%; height: 100%; margin: 0; padding: 0; }
body { width: 100%; height: 100%; margin: 0; padding: 0; }
Hope it works :')
I have a header that I would like to keep centered inside a parent image div both horizontally and vertically at all times when the parent div does not have a fixed width and height but instead has a responsive width and height using Twitter Bootstrap 3.1's responsive columns.
HTML:
<div id ="firstholder" class= " col-sm-4 col-md-4 col-lg-4">
<a href="home.html" title="Home" class="imglink">
<div class="item1"><h1 class="slickfont1" >Home</h1>
</div><img src="/images/slide2.JPG" alt="City Lights Image" class="img-responsive" >
</a>
</div>
#firstholder {
display:inline-block;
float:left;
margin:0;
padding:0;
height:auto;
position:relative;
}
a.imglink {
background: #fff;
display: inline-block;
width:100%;
height:auto;
position:relative;
}
.item1 {
height:150px;
width: 150px;
margin: 0 auto;
position:absolute;
z-index:100;
vertical-align:middle;
}
.slickfont1 {
z-index:10;
color: #fff;
position:absolute;
font-family: 'Bowlby One SC', cursive;
font-size: 37px;
font-weight:lighter;
position: absolute;
text-shadow:0 0 0 transparent, -2px 2px 2px #1542bd;
}
Thanks :)
You can use this nice method by Chris Coyier at CSS Tricks, he uses percentages and CSS3's transform:translate to achieve what you need. Centering Percentage Width/Height Elements
Now as you're using Bootstrap, so you're to tweak it for yourself.
The code from Chris Coyier:
.center {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 40%;
height: 50%;
}
Better to go to CSSTricks (using above link) and study the whole Post (you'll also find the reason of using it and why its better than other methods of centring).
I hope this helped you.
I am not sure if I understood you right, but let's start from here:
CSS:
div.center {
display: table-cell;
width: 200px;
height: 200px;
vertical-align: middle;
text-align: center;
border: 1px solid #000;
background-color: #ccc;
}
div.inner {
margin: 0 auto;
}
HTML:
<div class="center">
<div class="inner">
<div class="title">
Title Here
</div>
</div>
</div>
Is this what you are trying to do? assuming the gray background is an image? SAMPLE HERE
I have a facebook app and I am working on the front-end now. I am just getting started with css and html, so this might be a silly question- sorry for that.
What I am trying to do is to divide the page in two sections. I've created two divs for that, but the problem is the way they are positioned. My code is the following:
<style>
.choose_div{
width: 20%;
height: auto;
padding: 1px;
left: 0px;
border: 2px;
}
.frame_div{
right:0px;
height: auto;
width: 80%;
border: 2px 2px 2px 2px;
position: relative;
}
</style>
<div id="choose_div">
<ul>
<li class="li_choose">
<div class="li_div">
<p>Save</p>
<img src="arrow.jpg" id="arrow_save" style="width:10%;height:10%">
<hr>
</div>
</li>
</ul>
</div>
<div id="frame_div">
<iframe id="frame_opened">
</div>
I thought that right:0px; for one and left:0px;for the other would position them properly, but they are just one at the bottom of the other.
Can anyone please help with this?
This is the normal way to do what you ask, using float:left;. There were a few other issues with your styles though:
You were targetting .choose_div the class (.), not the id (#)
You need to use box-sizing:border-box when you're doing this otherwise the padding and border is added on top of width:20% making the width larger than 20%.
jsFiddle
#choose_div {
width: 20%;
height: auto;
padding: 1px;
border: 2px;
float:left;
box-sizing:border-box;
}
#frame_div {
height: auto;
width: 80%;
border: 2px 2px 2px 2px;
float:left;
box-sizing:border-box;
}
As for left and right, they can be used to align to a particular side of the screen if using position:absolute. position:relative simply shifts the element a particular amount, for example left:2px would shift the element 2 pixels to the left.
position:absolute positions the element on its closest ancestor that has a position of non-static. Then left/right/top/bottom can be used to indicate the sides of the ancestor.
for the div which to be shown write:
float:left
And for the right one:
float:right
<style>
#choose_div{
width: 20%;
height: auto;
padding: 1px;
left: 0px;
border: 2px;
float:left;
}
#frame_div{
float:right;
right:0px;
height: auto;
width: 80%;
border: 2px 2px 2px 2px;
position: relative;
}
</style>
If you add borders you must shrink your divs' witdh. Or they overflows the parent section and seen top-bottom.
<style>
html,body{margin:0;}
#choose_div{
display:block;
float:left;
width: auto;
height: 100%;
padding: 1px;
}
#frame_div{
float:right;
height: auto;
width: 80%;
height: 100%;
border: 2px 2px 2px 2px;
border-left:solid 2px #000000;
padding:10px;
overflow:hidden;
}
</style>
<body>
<div id="choose_div">
<ul>
<li class="li_choose">
<div class="li_div">
<p>Save</p>
<img src="arrow.jpg" id="arrow_save" style="width:10%;height:10%">
</div>
</li>
</ul>
</div>
<div id="frame_div">
<iframe id="frame_opened">
</div>
I've used Inkscape to create a very simple icon in a site I'm developing. The icon is absolutely positioned over the border of two side-by-side elements.
In Chrome it looks great:-
But in IE7 not so..:-
Am I doing something wrong? There is no transparency in the coloured part of my image, as far as I can tell.
Here's the code I'm using to display the images:-
<div class="roadmapstep">
<div class="roadmapnumber">1</div>
<h4>Header 1</h4>
<div class="nextarrow"><img src="nextarrow.png"></div>
</div>
<div class="roadmapstep">
<div class="roadmapnumber">2</div>
<h4>Header 2</h4>
<div class="nextarrow"><img src="nextarrow.png"></div>
</div>
CSS for the div containing the image is:-
.nextarrow {
position: absolute;
top: 65px;
margin-right: -35px;
right: 0;
width: 65px;
height: 40px;
}
CSS for the divs with the border:
.roadmapstep {
width: 220px;
height: 150px;
border-left: 1px solid black;
border-top: 1px solid black;
border-bottom: 1px solid black;
float: left;
position: relative;
}
Use z-index to position an image above another
Add z-index:1000; to .nextarrow
DEMO
Try giving the different class name to second div and position:absolute. it works!!
DEMO 2
I've got three div elements within one class, which in html document it looks like that:
<div class="content">
<div id="content_head">
<!--CONTENT HEAD CODE-->
</div>
<div id="between_ads">
<!-- ADS HERE -->
</div>
<div id="content_middle">
<!--CONTENT MIDDLE CODE-->
</div>
</div>
And css code for these:
.content
{
position: relative;
width: 75%;
float: left;
left: -52px;
margin: 5px 0 10px 0;
border-right: 1px solid #D9D9D9;
}
.content #content_head
{
/*position: relative;*/
width: 100%;
float: left;
border-bottom: 1px solid #D9D9D9;
}
.content #content_middle
{
/*position: relative;*/
width: 100%;
float: left;
margin: 5px 0 0 0;
border-top: 1px solid #D9D9D9;
border-bottom: 1px solid #D9D9D9;
}
/*BETWEEN ADVERTS*/
.content #between_ads
{
position: static;
width: 100%;/*737px;*/
height: 10px;
/*margin: 302px 0 0 -17px;*/
margin: auto;
padding: 0;
background: #000;
}
/*BETWEEN ADVERTS*/
The problem is, that resulted code for BETWEEN ADVERTS looks like this:
http://i.stack.imgur.com/ZU2FD.png - black bar over window "Polecane" that's highlighted in blue - but this div element should be placed here:
http://i.stack.imgur.com/ww0Ko.png - where is the yellow highlight.
Setting .content to position: absolute and rest to relative brakes totally the layout of .content class.
I'm quite new to html and css and still not everything understand.
Cheers
Try taking out the position and float of all your divs. Divs naturally like to be sitting one on top of another so adding positioning css disrupts it I would think.