So I have two divs that are overlapping and I don't know what caused it to.
Here's the URL:
http://dennis-reviews.netne.net/
As a side problem:
How can I center the navigation list at the top?
change #container_info to this:
#container_info {
height: 185px;
width: 1024px;
margin: 0px auto;
overflow: hidden;
}
and to center add this css rule:
#navigation ul {
width: 1024px;
margin:0px auto;
}
Use following property in CSS for the footer div clear: left;
Your class .info need to have max-height:180px;in the css
If you add clear: left; to the #footer then that will fix it.
#footer {
height: 80px;
width: 100%;
background: #1A1A1A;
clear: left;
}
If you're unsure how this works there's a good article on CSS-Tricks that explains it all.
Related
http://pixphoriad.haneuri.net/index2.php
The top div for the header centers fine but for some reason the content in the footer is not centered. Here's the css for the footer:
div#footer {
background-color: #000;
color: #fff;
position:relative;
height:350px;
clear: both;
margin-left: auto;
margin-right: auto;
text-align: center;
width: 100%;
}
apply these rules to center tag...
overflow: auto;
display: inline-block;
Btw, center tag is obsolete, i had never seen it until now. But whatever..
I like overall site...It shows passion.
Define the width you want and give margin like this:
div#footer {
width: 500px;
margin: 0 auto; /* or `10px auto` to add margin top and bottom */
text-align: center; /* align text center aligned*/
}
I would suggest that you add the following lines to your div#footer:
overflow: auto;
display: inline-block;
Everything looks fine in both the HTML & CSS, so the div in question should be centered on the page. I have included some code snippets below, but the real code can be found here: http://jsfiddle.net/stbx08mk/
test-div at the bottom should be centered in the 1024 area, but it isn't. Why not?
#page-wrapper {
background-color: white;
margin: 0 auto;
overflow: auto;
padding: 0;
width: 1024px;
}
#test-div {
background-color: orange;
float: left;
height: 100px;
margin: 0 auto;
width: 800px;
}
Based on your fiddle, you need to adjust your #test-div style to float: none; and clear: both;
#test-div {
background-color: orange;
clear: both;
float: none;
height: 100px;
margin: 0 auto;
width: 800px;
}
Your JSFiddle Updated
floating divs to center "works" with the combination of display:inline-block and text-align:center.
First, remove the float attribute on the inner divs. Then, Text-align:center on the main outer div. And for the inner divs, display:inline-block.
Just tested it - display:inline-block on the inner divs works. Might also be wise to give them explicit widths too.
For your problem
Check this fiddle
Remove float:left; and add clear:both; to #test-div.
It just worked for me..
This will solve your problem
Try it..
The reason your #test-div is not centered, is because you're using the property float: left; on it in your CSS. The auto margins don't work on floated elements.
Try removing the float: left; property to get your desired result.
Float: left is whats making it ignore your margin: 0 auto;
Make sure your <html> and <body> tags take up the entire width of the browser and the margin and padding are both 0. This caused my content to be almost centered, but a little bit offset from center. Use this CSS:
html, body {
width: 100%;
margin: 0;
padding: 0;
}
In addition, in your #test-div use:
#test-div{
margin: 0 auto;
}
Link to site
/*Align width 1170px*/
.align-1170{
height: 100%;
width: 1170px;
margin: 0 auto;
}
/*Align vertically*/
.align-vertically{
height: 100%;
display: table;
}
/*Header*/
header{
height: 60px;
width: 100%;
background-color: #1ccb56;
}
.logo{
display: table-cell;
vertical-align: middle;
}
.author{
float: right;
display: table-cell;
vertical-align: middle;
}
Why Can't I use float:right; to move "Author: projekcior.com" to right side
(with vertically alignment)?
Why my h3 tag is so wide? (650px)
Thanks!
An element that is floated is automatically display: block;
use
h3 { display:inline-block; }
to manage your h3 width.
Let me answer your question in steps.
Why Can't I use float:right; to move "Author: projekcior.com" to right side (with vertically alignment)?
Maybe because, you're not setting the margins to it. It actually is to the right side of the web page. I just tried to use margin for it.
p.white {
margin: 20px;
}
Using this, it came down a bit from the top corner.
Why my h3 tag is so wide? (650px)
Because you've not set any of the width: value to the element, so browser would automatically set the width. I used width property to minimize the size.
h3 {
width: 200px;
}
Here is the screen shot for your page.
Hey Komon i guess you didn't write a proper css for your webpage so i tried to correct your page see the mentioned below CSS :-
CSS
.align-vertically {
border: 1px solid;
}
.align-1170 {
height: 100%;
margin: 0 auto;
width: 1170px;
}
.logo {
float: left;
}
h3 {
border: 1px solid;
display: inline-block;
font-family: 'Lato',sans-serif;
font-size: 1.5em;
}
.author {
float: right;
}
see the css and try to understand where u made mistake actually your parent div were not floated that's why your child div are not in control....
apply this css i guess through this you will achieve your desired results...
I was building a static html page for creating a wordpress theme.but now i notice that 48px margin is above the body element(I found it with chrome developer tools).i can fix it by just adding a -48px margin but what exactly is causing this problem,can someone help me.
My CSS
body{
font-size:18px;
line-height:1.72222;
color:#34495e;
font-family:Ubuntu;
margin:0
}
aside {
background: #31373d;
height: 100%;
position: fixed;
width: 20%;
font-weight: normal;
color:#fff;
}
.main {
margin-left: 20%;
}
.content{
width: 65%;
max-width: 760px;
margin: 3rem auto;
}
Look at this live JSfiddle Demo - http://jsfiddle.net/aq96b/1/embedded/result/
It's the line
margin: 3rem auto;
in your .content that's causing this (if I properly understand the problem). Unchecking/removing that margin will move the content back up to the top left of your .main div.
To maintain a similar effect with the content position, you could add padding to the .main of the same amount ie
padding: 3em;
Remove the margin: 3rem auto; from .content.
DEMO HERE
It's coming from the div .content. To correct this you should add overflow:hidden to .main
Example
.main {
margin-left: 20%;
overflow: hidden;
}
Alternatively you can set .content to inline-block. This will also correct the issue.
Example
.content {
display: inline-block;
}
would you know why my picture link doesn't work when inside a container (the picture is the white triangle on the right side)? Note that it works fine when outside this block.
Thanks
CSS:
.block {
position: relative;
display: block;
clear: both;
overflow: hidden;
box-sizing: border-box;
margin-right: auto;
margin-left: auto;
padding-right: 20px;
padding-left: 20px;
width: 100%;
}
.block img {
float: right;
margin-left: 40px;
}
Adding this CSS should fix your issue:
.arrow-circle{
position:relative;
z-index: 9999;
}
i think .block is coming up on the image.. set z-index of image very high . or do this one.
.block {
position: relative;
display: block;
clear: both;
overflow: hidden;
box-sizing: border-box;
margin-right: auto;
margin-left: auto;
padding-right: 20px;
padding-left: 20px;
width: 100%;
pointer-events:none;
}
i had done this using inpect element on chrome ..
and link worked...
#touchPointContainer {
position: relative;
height: 600px;
pointer-events: none;
}
I don't think it's a z-index issue since the position of .block is relative. However tough point out the issue with the very little info given.. provide some deatils or jsfiddle link
Your issue is that #touchPointContainer is positioned over the button. The suggested "pointer-events: none;" solution is a firefox hack that is not widely supported.
The z-index solution was the correct one, but for z-index to work you have to add position:relative to the element so Gurpreet Singh nailed it.
The image needs to be given a positioning context so that the Z-index will apply
.block img {
float: right;
margin-left: 40px;
position:relative;
z-index: 100; /* probably any number more than 1 will do */
}