I was trying to align a div to the center inside of another div. I searched, and all answers say to put "margin:auto;" or "margin: 0px auto;". I tried both, and neither will work.
My CSS is:
#slider div
{
margin:0px auto;
width:620px;
}
EDIT: I've tried all that has been suggested so for, no change for anything.
Could it be that #slider is Jquery???
As requested, here is the entire pages code:
<html>
<head>
<script type="text/javascript" src="C:\Users\Pam\Desktop\jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="C:\Users\Pam\Desktop\easyslider1.7\js\easyslider1.7.js"></script>
<style type="text/css">
body
{
margin-top:0px;
margin-bottom:0px;
margin-left:0px;
margin-right:0px;
background-image:url('./bg.jpg');
}
#headerCon
{
display:block;
background-color:#151515;
width:100%;
height:40px;
padding-left:auto;
padding-right:auto;
position:fixed;
}
#header
{
width:950px;
height:100%;
margin-right:auto;
margin-left:auto;
}
#menu
{
margin-left:10%;
}
#title
{
background-image:url('./title.png');
background-repeat:no-repeat;
display:block;
height:123px;
margin:0px auto;
text-align:center;
}
#container
{
text-align:center;
display:block;
width:850px;
margin-right:auto;
margin-left:auto;
height:100%;
/* background-color:#dfdfdf; */
max-padding:100%;
position:relative;
}
a.link
{
text-decoration:none;
font-weight:bold;
font-family:Arial,Helvetica,sans-serif;
display:block;
width:100px;
height:30px;
border-right:1px solid #000000;
float:left;
color:#00af64;
padding-left:0px;
padding-top:10px;
text-align:center;
}
a.link:hover
{
text-decoration:none;
font-weight:bold;
font-family:Arial,Helvetica,sans-serif;
display:block;
width:100px;
height:30px;
border-right:1px solid #000000;
float:left;
color:#00af64;
padding-left:0px;
padding-top:10px;
text-align:center;
background-color:#252525;
}
p
{
color:#fff;
font-family:Arial,Helvetica,sans-serif;
}
#button1
{
margin-left:34%;
}
/* EASY SLIDER */
#slider div
{
position: absolute;
top: 50%;
left: 50%;
margin-top:2px;
margin-left:2px;
width:620px;
}
#sliderContain
{
position:absolute;
margin-left:3px;
margin-top:3px;
}
#slider ul, #slider li{
margin:0;
padding:0;
list-style:none;
}
#slider, #slider li{
width:620px;
height:230px;
overflow:hidden;
}
#transBorder
{
background-color:#111111;
opacity:0.60;
filter:alpha(opacity=60); /* For IE8 and earlier */
display:block;
height:236px;
width:626;
position:absolute;
z-index:-1;
float:up;
}
#slider1prev
{
display:none;
}
#slider1next
{
display:none;
}
</style>
</head>
<body>
<div id="headerCon">
<div id="header">
<div id="menu">
Home
Monsters
Areas
Trades
Classes
</div>
</div>
</div>
<div>
<br />
<br />
</div>
<div id="container">
<div id="title"> </div>
<div id="sliderContain">
<div id="slider">
<ul>
<li><img src="./reddragon.png"/></li>
<li><img src="./swamp.png"/></li>
<li><img src="./town.png"/></li>
</ul>
</div>
</div>
<div id="transBorder">
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$("#slider").easySlider({
auto: true,
continuous: true,
nextId: "slider1next",
prevId: "slider1prev"
});
});
</script>
</body>
</html>
It would be easier to see what's up if you posted the whole code.
Anyway use this css for child div:
position: relative;
margin: 0 auto;
And this css for the parent one:
text-align:center;
margin: 0 auto;
And tell me if it works or not.
You can use absolute positioning​
#one {
background: red;
position: relative;
}
#two {
width: 300px;
height: 150px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -75px; /* negative half of height */
margin-left: -150px; /* negative half of width */
background: blue;
} ​
http://jsfiddle.net/3kj6A/
You can try this:
#slider div
{
position: absolute;
left: 50%;
margin-left:-310px;
width:620px;
}
If that does not work, you can do the same as above, just change the margin-left to:
margin-left:-25%;
Hope that helps.
jQuery stuff can be aligned with CSS, if "#slider div" is still not aligned, you should check the other elements in the CSS, they could be affecting #slider.
Or your problem might be that the code should be:
#slider {
code in here
}
You do not need to state that the element is a div. "#slider div" refers to the div in the slider(child div), not the slider it self(parent div). Correct me if I had misunderstood.
Related
I'm leaving the first post. I'd be happy if you help my code.
I'm making my homepage layout, But I was in trouble.
I want disable scrollbar of Main Contents Section when Navigation Drawer button is clicked.
I tried to #drawer-toggle:checked~html{overflow:hidden} but it's not working.
If you have any other way, please teach me.
body,html{
margin:0 auto;
height:100%
}
footer{
height:40px;
line-height:40px;
text-align:center
}
footer,header{
background:#ccc;
display:table-row
}
header{
background:#000;
color:#fff;
height:50px;
line-height:50px;
padding-left:50px;
position:fixed;
top:0;
width:100%;
z-index:7
}
main{
background:#eee
}
#container{
margin-top:50px
}
#drawer{
background:#fff;
height:100%;
left:-300px;
overflow-x:hidden;
padding:10px;
top:0;
width:85%;
max-width:250px;
z-index:9
}
#drawer,#drawer-toggle-label{
position:fixed
}
#drawer-toggle{
display:none
}
#drawer-toggle:checked~#drawer{
left:0;
top:0
}
#drawer-toggle:checked~#drawer-toggle-label{
background:rgba(0,0,0,.54);
height:100%;
width:100%
}
#drawer-toggle-label{
background:rgba(0,0,0,0);
height:50px;
left:0;
top:0;
width:50px;
z-index:8
}
#drawer-toggle-label:active{
background:#5c6bc0
}
#drawer-toggle-label:before{
background:#fff;
box-shadow:0 5px 0 #fff,0 10px 0 #fff;
content:'';
height:2px;
left:16px;
position:absolute;
top:19px;
width:18px
}
#wrapper{
display:table;
width:100%;
height:100%
}
<body>
<div id=wrapper>
<header>Header</header>
<div id=container>
<input type=checkbox id=drawer-toggle>
<label for=drawer-toggle id=drawer-toggle-label></label>
<nav id=drawer>
Drawer
<ul><li>Menu
<li>Menu
<li>Menu
</ul>
</nav>
<main>
<center>
<table style=height:1000px;width:640px;background:#fff>
<tr><td style=vertical-align:top>Main Contents
</table>
</center>
</main>
</div>
<footer>Footer</footer>
</div>
</body>
You're hoping to achieve something with CSS that is called the parent selector which isn't available, you cannot select a parent element of the clicked element in pure CSS. Your ~ selector only selects siblings (elements with the same parent) in the code. Besides this, your code has some lacking apostrophes and unclosed tags. I've updated your code, and added a JavaScript solution on the go.
var element = document.getElementById('drawer-toggle');
element.addEventListener('click', function(e) {
document.getElementsByTagName('body')[0].classList.toggle('hide-scroll');
})
body, html {
margin:0 auto;
height:100%;
}
footer {
height:40px;
line-height:40px;
text-align:center
}
footer, header {
background:#ccc;
display:table-row
}
header {
background:#000;
color:#fff;
height:50px;
line-height:50px;
padding-left:50px;
position:fixed;
top:0;
width:100%;
z-index:7
}
main {
background:#eee
}
#container {
margin-top:50px
}
#drawer {
background:#fff;
height:100%;
left:-300px;
overflow-x:hidden;
padding:10px;
top:0;
width:85%;
max-width:250px;
z-index:9
}
#drawer, #drawer-toggle-label {
position:fixed
}
#drawer-toggle {
display:none
}
#drawer-toggle:checked~#drawer {
left:0;
top:0
}
#drawer-toggle:checked~#drawer-toggle-label {
background:rgba(0,0,0,.54);
height:100%;
width:100%
}
#drawer-toggle-label {
background:rgba(0,0,0,0);
height:50px;
left:0;
top:0;
width:50px;
z-index:8
}
#drawer-toggle-label:active {
background:#5c6bc0
}
#drawer-toggle-label:before {
background:#fff;
box-shadow:0 5px 0 #fff,0 10px 0 #fff;
content:'';
height:2px;
left:16px;
position: absolute;
top:19px;
width:18px
}
#wrapper {
display:table;
width:100%;
height:100%
}
.hide-scroll {
overflow: hidden;
}
<div id="wrapper">
<header>Header</header>
<div id="container">
<input type="checkbox" id="drawer-toggle">
<label for="drawer-toggle" id="drawer-toggle-label"></label>
<nav id="drawer">
Drawer
<ul>
<li>Menu</li>
<li>Menu</li>
<li>Menu</li>
</ul>
</nav>
<main>
<center>
<table style="height:1000px;width:640px;background:#fff">
<tr><td style="vertical-align:top">Main Contents
</table>
</center>
</main>
</div>
<footer>Footer</footer>
</div>
When clicking the label, we toggle a class on the body which disables the overflow, thus disabling scrolling.
I'm trying to split my container in multiple square box with different dimensions. I used jsfiddle to show you my project:
http://jsfiddle.net/y0j55ooL/
#import url(http://fonts.googleapis.com/css?family=Roboto);
#menu {
text-align:center;
}
#menu li {
display: inline;
}
#menu ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 100%;
}
#menu a{
padding:0 30px;
color: #C0C0C0;
font-family: 'Roboto', sans-serif;
}
body {
background-color: #454343;
text-align: center;
}
#container {
margin:1% auto;
border: 0.1em solid;
}
#footer{
position: absolute;
bottom: 0;
left: 0;
width:100%;
background-color:#333;
height:3em;
line-height:3em;
text-align:left;
}
This is the index.html page:
<!DOCTYPE html>
<html>
<head>
<style>
#import url(main.css);
</style>
</head>
<body>
<div id="menu">
<ul>
<li>Il mio PC</li>
<li>prova</li>
</ul>
</div>
<div id="container">
ciao
</div>
<div id="footer">
prova
</div>
</body>
Now I'd like to split container like this image:
http://thumbs.dreamstime.com/z/cool-new-web-template-large-icons-28075027.jpg
I'd like to create inside container a rounded square box much bigger than others. On the right and on the bottom of this big square I would some little square box.
I tried table and table-cell with display attribute but my result wasn't acceptable. I must use only css and html.
Thanks.
Use positioning. I've just shown you a quick demo below of how this could be done:
html,body{margin:0;padding:0;}
.wrapper{
width:100%;
height:600px;
background:gray;
position:relative;
}
.bigImg{
height:45%;
width:55%;
background:url(http://placekitten.com/g/300/300);
position:absolute;
top:10%;
left:15%;
}
div{
display:inline-block;
height:20%;
width:25%;
position:absolute;
}
.one{
background:red;
left:75%;
top:10%;
}
.two{
background:blue;
left:75%;
top:35%;
}
.three{
background:green;
left:15%;
top:60%;
}
.four{
background:orange;
left:45%;
top:60%;
}
.five{
background:yellow;
left:75%;
top:60%;
}
<div class="wrapper">
<div class="bigImg"></div>
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
<div class="four"></div>
<div class="five"></div>
</div>
I am new to CSS and have been trying lately to position the DIV where I wish too, but some properties like float and margin and confusing me. In the image below I am trying to place the white div to the right of the logo.
Since I am not able to post pictures yet on the post, I uploaded here
Html :
<body>
<header>
<div class="header">
<div class="logo">
<img src="images/logo.png" />
</div>
<nav>
<div class="navigation">
</div>
</nav>
</div>
</header>
</body>
css :
.header {
max-width:1200px;
min-width:200px;
height:170px;
margin:0 auto;
margin-top:10px;
background-color:rgba(0, 0, 0, 0.5);
border-radius:3px;
}
.logo {
width:230px;
}
.logo img {
margin-left:20px;
margin-top:31px;
border-right:solid #FFF 1px;
padding-right:33px;
height:auto;
width:auto;
}
.navigation {
width:500px;
height:100px;
margin-left:200px;
background-color:#FFF;
position:fixed;
}
Change .navigation's position:fixed; to position:inline-block; and add margin-top to make them in line vertically depending on how tall each is
Or you could float:left; both of them
Replace below .logo img and .navigation with your CSS with this, here is the fiddle
.logo img {
margin-left:20px;
margin-top:31px;
border-right:solid #FFF 1px;
padding-right:33px;
height:auto;
width:auto;
float:left;
}
.navigation {
width:500px;
height:100px;
margin-left:200px;
margin-top:31px;
background-color:#FFF;
position:fixed;
}
place float:left; in your .logo img {...} class
place margin-top:31px; in your .navigation {...} class
I have a certain Header with my Logo and title. Just to the right of the Title Mobility group I want to create a nav bar that touches the bottom of the header with different tabs all the way to the right of the header. Messing around I was able to create something, but I can't seem to position it correctly.
http://jsfiddle.net/jHJK2/
http://jsfiddle.net/jHJK2/embedded/result/
I just can't figure out how to add this navigation bar to my header div.
HTML code:
<div id="page">
<div id="header">
<a href="http://wireless.fm.intel.com/test/index.php">
<img src="http://wireless.fm.intel.com/test/logo2.png" border=0 >
</a>
<h2><a href="http://moss.ger.ith.intel.com/sites/MWG-IS/Pages/Default.aspx" border=0>Mobility Group</a></h2>
<div id="navigation">
About
Reports
Documents
Checklists
License Tools
Presentations
Software Releases
</div>
</div>
<div id="main"></div>
<div id="footer"></div>
</div>
CSS Code:
html, body {
padding:0;
margin:0;
height:100%;
}
#page {
min-height:100%;
position:relative;
height:100%;
}
#header {
background-color:#115EA2;
height:100px;
width:97.5;
}
#main {
width:1300px;
margin-left:auto;
margin-right:auto;
background-color:#F1F2F3;
min-height:90%;
height:auto;
height:89%;
margin:0 auto -50px;
vertical-align:bottom;
}
#footer {
position:fixed;
width:100%;
bottom:0;
height:35px;
background-color: #115EA2;
}
#header img {
float:left;
display:inline;
}
#header h2 {
text-align:center;
font-size:44px;
color:#FFFFFF;
left:0px;
top:20px;
font-weight:bold;
font-family: Sans-serif;
float:left;
margin-top:20px;
margin-left:20px;
text-decoration:none;
}
#header h2, a, a:visited, a:hover, a:active {
color: #FFFFFF;
text-decoration: none;
}
Navigation Bar Code:
#navigation {
position:relative;
top:0;
left:0;
right:0;
bottom:0;
width:70%;
background-color:gray;
color:green;
height:35px;
text-align:center;
padding-top:15px;
}
#navigation a {
font-size:14px;
padding-left:15px;
padding-right:15px;
color:black;
text-decoration:none;
}
#navigation a:hover {
color:blue;
}
Update
Just wanted to say Thank you all for your help.
Adapting your current method to a more html5 approach, you can use header and nav tags do better markup your document. Absolute positioning also gives you better control over your elements. You would set the header to a relative position, and the nav to absolute, and offset it by the height of your header.
nav {
position: absolute;
top: 100px;
left: 0;
right: 0;
bottom: 0;
min-width: 800px;
text-align: left;
height: 20px;
padding: 10px 20px;
}
Here is your updated fiddle
And here is an update with the nav to the right, a bit messy though:
http://jsfiddle.net/jHJK2/5/
Not 100% sure if this is how you want it since your request wasn't very clear, but here's what I made.
http://jsfiddle.net/jHJK2/2/
Changes:
HTML:
<div id="header">
<div id="navigation"> //moved this before the other elements
About
Reports
Documents
Checklists
License Tools
Presentations
Software Releases
</div>
<a href="http://wireless.fm.intel.com/test/index.php">
<img src="http://wireless.fm.intel.com/test/logo2.png" border=0>
</a>
<h2><a href="http://moss.ger.ith.intel.com/sites/MWG-IS/Pages/Default.aspx" border=0>Mobility Group</a></h2>
</div>
CSS:
#navigation {
width:100%;
background-color:gray;
color:green;
height:35px;
text-align:center;
padding-top:15px;
}
#navigation a {
font-size:14px;
padding-left:15px;
padding-right:15px;
color:black;
text-decoration:none;
}
#navigation a:hover {
color:blue;
}
Make the following CSS changes:
Demo in jsFiddle
#header {
background-color:#115EA2;
height:100px;
width:97.5;
position: relative;
}
#navigation {
position:absolute;
/* top:0;
left:0;*/
right:0;
bottom:0;
width:70%;
background-color:gray;
color:green;
height:35px;
text-align:center;
padding-top:15px;
}
This is kinda embarrasing for me, since ive been working with CSS for such a long time for a living, that i would be considered an expert.
Yet! Experts also learn new things daily.
Well, my problem is, that this sample code with a full stretched Bg image is working fantastic in both Chrome and FF, it should work in IE too (atleast IE8) But i just cant get it to work, the image shows but the text wraps underneat the image like if the content box was not set to relative positioning.
I hope you can help me out.
<html>
<head>
<style> body, html {
margin:0px; padding:0px;
background-color:#fff;
font-family:Tahoma, Geneva, sans-serif;
font-size:12px;
}
img.bg {
min-height: 100%;
min-width: 1024px;
width: 100%;
height: auto;
position: fixed;
top: 0;
left: 0;
}
#media screen and (max-width: 1024px){
img.bg {
left: 50%;
margin-left: -512px; }
}
#spacer { height:20px; }
#content { width:900px; margin:0 auto; padding:10px; position:relative; }
#header { height:117px; }
#logo { float:left; width:101px; height:117px; }
#menu { float:left; height:50px; width:749px; margin-left:50px; margin-top:70px; }
#menu ul { list-style:none; margin:0px; padding:0px; }
#menu ul li { padding:0px; margin:0px; float:left; line-height:50px; padding-left:10px; margin-right:10px; }
h1 { margin:0px; padding:0px; color:#333333; font-size:16px; text-decoration:underline; margin-bottom:10px; }
#menu ul li a { color:#333; text-decoration:none; }
#lftmen { float:left; width:140px; margin-top:70px; }
#lftmen ul { margin:0px; padding:0px; list-style:none; }
#lftmen ul li { height:30px; background-image:url(img/lftbg.png); border:1px dashed #999; margin-bottom:10px; }
#lftmen ul li a { color:#fff; line-height:30px; text-decoration:none; margin-left:20px; font-size:14px; }
#lftmen ul li a:hover { color:#333; }
#midcont { line-height:16px; float:left; margin-top:60px; background-image:url(img/contbg.png); width:729px; margin-left:10px; font-size:12px; padding:10px; }
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></head>
<body>
<img src="img/bg.jpg" class="bg" />
<div id="content">
<div id="header">
<div id="logo"><img src="img/logo.png" /></div>
<div id="menu">
<ul>
<li>Opdatering: Zhoop rekrutere butikker i Aalborg</li>
</ul>
</div>
<div style="clear:both;"></div>
</div>
<div id="lftmen">
<ul>
<li>Forside</li>
<li>Se video</li>
<li>Udbyd tilbud</li>
<li>Information</li>
<li>Kontakt</li>
<li>Hent: android</li>
</ul>
</div>
Well first of all why would you use <img/> to define the page background pattern.
It is more suitable to define this kind of background directly in css.
e.g.:
body {
background: url(img/bg.jpg) 0 0 no-repeat;
...
}