I'm not sure where my code is messed up, but I'm trying to get my code to center. Here is what I have so far:
The problem that I am running into is that the page won't actually center. When it loads, the left margin is only a 10px. I'm sure there is a conflict somewhere, or I just borked something, and I've been searching for hours now, and have found nothing. Here is the following code:
body {
background-color: #12121D;
}
#contain {
display: block;
width: 1000px;
margin: 0 auto;
}
.version{
text-align:right;
font-family: Calibri, sans-serif, serif;
text-decoration:none;
color:#00F;
}
#header {
width: 1000px;
height: 230px;
}
#logo {
width: 600px;
margin: 50px 0px 0px 10px;
padding: 0px;
float: left;
position: absolute;
}
#banner {
text-align: right;
float: right;
z-index: -1;
}
#menu {
height: 80px;
margin: 0 auto;
}
#main {
height: 500px;
width: 850px;
margin-left: 75px;
/*position: absolute;*/
z-index: 4;
/*float: left*/;
}
#content {
width: 850px;
height: 500px;
float: left;
margin-left: 0px;
}
And the html follows as:
<body>
<div id="contain">
<div id="header">
<div id="logo"> <img src="images/logo.png" alt="logo" />
<br />
<a class="version" href="JavaScript:changeSheets(1)">View Mobile<a/>
</div>
<div id="banner"><img src="images/banner.png" alt="banner"/></div>
</div>
<div id="menu">
<div class="pages">
<ul>
<li>Front Page</li>
<li>Reviews</li>
<li>Releases</li>
<li>About Me</li>
<li>Contact Info</li>
</ul>
</div>
</div>
<div id="main">
<div id="content">
<div class="why" id="whyBackground"> <img src="images/reviewsites.png" alt="reviewsites"/>
<h1>Why am I doing this?</h1>
<br />
Insert text here
<h1>What is my goal?</h1>
Insert text here
</div>
</div>
</div>
</div>
</body>
Hi there is Your code:
http://jsfiddle.net/w9Zgc/2/
On my screen larger 1920px page is centered. I think that you have screen resolution close to 1024px width so than left margin left equal 10px is quite reasonable. Another advice is to reset padding and margin of body
body, html {
padding:0;
margin: 0;
}
One thing that will help you center a div is to specify the width, and then set the right & left margins to auto:
#main{
width: 850px;
margin-left: auto;
margin-right: auto;
}
Judging from your link at http://jsbin.com/itiwez/2/edit
I removed #charset "utf-8" in your CSS and it instantly worked (at least in your jsbin demo). Is your CSS file actually in UTF-8 format?
FYI: Why specify #charset "UTF-8"; in your CSS file?
Related
I´m trying to put the navigation bar in the header div but its being pushed out of it.. so the navigation bar is appearing in the center of the page.
Do you have any suggestions on how to fix this? Thanks for the help!
Here´s my HTML
<body>
<div class="fondo">
<div class="header"> <!--barra de navegacion -->
<div class="logo">
<object data="/Users/MaxRuizTagle/Desktop/guardado por illustrator/been.svg" type="image/svg+xml" alt="logo">
<!--[if lte IE 8 ]-->
<img src="/Users/MaxRuizTagle/Desktop/guardado por illustrator/images/been.png" alt="Logo"/>
<!--[endif]-->
</object>
</div>
<div class="container">
<div class="sixteen columns">
<ul id="nav">
<li> HOME</li>
<li>SPEISEKARTE</li>
<li>RESERVIERUNG</li>
<li>LOCATION</li>
<li>JOBS</li>
<li>KONTAKT</li>
<li>DJs</li>
</ul>
</div>
</div>
<div class="footer">
</div>
</div>
</div>
</body>
and CSS
body {
margin: 0 0 0 0;
height:1000px;
font-family: 'Myriad Pro', 'Helvetica Neue', Arial, sans-serif;
}
.fondo {
min-width:100%;
min-height: 80%;
background-image: url('../Img/imagenes/fotoportada.jpg');
background-size: cover;
position: absolute;
background-repeat: no-repeat;
}
.header {
min-width: 100%;
min-height: 100px;
max-height:100px;
background-color:rgb(255,255,255);
}
.footer {
background-color:rgb(28,92,144);
min-width: 100%;
height:400px;
position: absolute;
top: 100%;
}
ul#nav {
margin: 147px 0 0 120px;
float: left;
}
ul#nav li{
margin-right: 30px;
font-size: 1.1em;
display: inline;
}
.logo {
max-width: 20%;
}
.logo object, img {
min-width:100%;
float:left;
position: relative;
top:-25px;
}
You've set a top margin of 147px to the ul#nav element. that's why it's pushed down. change that and set a proper value.
ul#nav {
/* margin: 147px 0 0 120px; */
float: left;
}
JSBin Demo.
You're pushing the element down to the middle of the page with margin, and your float:left is causing it to appear below the logo.
Try this CSS:
ul#nav {
margin-left: 20%;
}
I had same kind of issue, turned out to be an extra closed tag without an opening tag.
I managed to make my footer to stick to the bottom of the window, then avoid my content div... but now, it's overlapping for about 15px before dropping below.
I want the footer to drop, but to never overlap the content. I think it may have something to do with my margins, but my tweaking has not yet solved this.
Any suggestions?
Adding margin-bottom:15px doesn't seem to help, because it's only shown once the footer overlaps enough to push the footer down. Then the margin is shown, but not before that small amount of overlap.
The #push div is supposed to make this all possible, from what I understood on Twitter's bootstrap example.
CSS:
* {
margin: 0;
padding: 0;
}
html {
height: 100%;
}
body {
margin: 0;
height: 100%;
}
#wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -50px;
min-width: 900px;
}
.main_nav {
list-style-type: none;
margin: 0;
width: 160px;
float: left;
padding-left: 40px;
overflow: hidden;
}
#bio_content {
width: 700px;
min-height: 445px;
margin-bottom: 15px;
float: left;
}
#bio_text {
padding: 10px;
}
#push {
height: 50px;
}
#footer {
height: 50px;
width: 100%;
float: left;
}
HTML:
<body>
<div id="wrapper">
<div id="header">
<h1></h1>
</div>
<ul class="main_nav">
<li>Home</li>
<li>About</li>
<li>Music</li>
<li>Services</li>
<li>Gallery</li>
<li>Contact</li>
</ul>
<div id="bio_content">
<div id="bio_text"></div>
</div>
<div id="push"></div>
</div>
<div id="footer">
<div id="footer_content"></div>
</div>
</body>
</html>
I thin it's a float issue. A fiddle would help diagnose this better. I would suggest doing this
<body>
<div id="wrapper">
<div id="header">
<h1></h1>
</div>
<ul class="main_nav">
<li>Home</li>
<li>About</li>
<li>Music</li>
<li>Services</li>
<li>Gallery</li>
<li>Contact</li>
</ul>
<div id="bio_content">
<div id="bio_text"></div>
</div>
<div style="clear:both"></div> //add this to clear the bio_content div
<div id="push"></div>
</div>
<div id="footer">
<div id="footer_content"></div>
</div>
</body>
</html>
You need to clear the styles in your footer. Add a clear:both to your footer css.
#footer {
clear: both;
height: 50px;
width: 100%;
}
I have the following HTML source:
<div id="page">
<div id="header">
<!-- end header div -->
</div>
<div id="dropdown">
<!--navigator menu is here!-->
</div>
<div id="main">
<!--main is here!-->
</div>
<div id="sidebar">
<!--sidebar menu is here!--></div>
<div id="footer">
</div>
<!-- end page div -->
</div>
<div id="leftshadow"></div>
<div id="rightshadow"></div>
</body>
And this is the CSS source
/* html selectors ---- */
html, body {
font-family: 'Arial Unicode MS';
margin: 0;
padding: 0;
background-repeat: repeat-x;
background-color: white;
direction: rtl;
font-size: 10.3pt;
}
/*page -----------*/
#page {
width: 900px;
padding: 0px;
margin: 0 auto;
direction: rtl;
position: relative;
z-index: 100;
z-index: 5;
background-image: url("images/bgimage.png");
}
#leftshadow {
width: 100px;
height: 900px;
background-image: url("images/leftshadow.png");
position: absolute;
right: 1220px;
z-index: none;
top: -50px;
}
#rightshadow {
width: 100px;
height: 900px;
background-image: url("images/rightshadow.png");
position: absolute;
right: 345px;
z-index: none;
top: -25px;
}
/* header ---------- */
#header {
height: 110px;
top: 0px;
line-height: 30px;
background-image: url("images/header.png");
background-position-x: center;
background-repeat: repeat-x;
}
/* main -------------- */
#main {
line-height: 21px;
font-family: arial;
width: 625px;
padding: 30px;
position: relative;
right: 205px;
padding-bottom: 80px;
direction: rtl;
top: 42px;
padding-right: 60px;
min-height: 750px;
text-align: justify;
}
Normally I got this result
But in Internet-Explorer I got this result
I know that if I will insert the
<div id="leftshadow"></div>
<div id="rightshadow"></div>
******Live example here! http://lawb.co.il/******
Into the #page Div the problem could be solved, but the only problem is that the shadow than is complatly on the content, und not behund him
Can you pleas help me with this?
wish for help, thanks!
Any reason as to why you are using images to create shadows when you could use CSS3 box-shadow?
If you are going to use this approach I would change your HTML structure like so:
<div id="page">
<div id="leftshadow"></div>
<div id="header">
<!-- end header div -->
</div>
<div id="dropdown">
<!--navigator menu is here!-->
</div>
<div id="main">
<!--main is here!-->
</div>
<div id="sidebar">
<!--sidebar menu is here!-->
</div>
<div id="footer">
<!-- footer -->
</div>
<!-- end page div -->
<div id="rightshadow"></div>
</div>
And then float the right shadow div to the right and the left shadow div to the left. Most likely you are seeing inconsistencies because
you are not using a reset, and stuff is relatively positioned. You really don't need to position everything relative and the shadows if inside the #page container won't need to be positioned absolute.
I just have a silly issue (I think...) with a div tag in html.
I want to positionate a background relative image at top left corner, half image outside its container.
Issue is that container doesn't fill to all Its content. I try to use "overflow: auto" property but left corner image turns hidden.
My html:
<div class="content">
content of the page
</div>
<footer id="footer">
<div class="column" id="footer-izda">
<span id="logo-sup"> </span>
<span>conecta con nosotros</span>
<ul>
<li class="twitter">outside of box </li>
<li class="facebook">outside of box</li>
</ul>
</div>
<div class="column" id="footer-dcha">
<div class="module widget_nav_menu deepest">Copyright © 2013</div>
</div>
</footer>
My CSS:
.content{
margin-bottom: 2%;
}
footer{
background-color: #333333;
color: #EDEDED;
padding: 1%;
display: block;
/*overflow: auto;*/
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}
.column #logo-sup{
background: url('http://formate21.es/wp-content/themes/master/images/footer.png') left top no-repeat;
width: 26px;
height: 26px;
top: -25px;
left: 0;
float: left;
position: absolute;
}
#footer-izda {
float: left;
width: 50%;
position: relative;
text-align: left;
}
I wrote this on jsfiddle: http://jsfiddle.net/ecXba/10/
Any suggestion?
Put below code just before </footer> tag.
<div style="clear:both;"></div>
Hope this helps!
In my code below, case #1 works correctly. The "advice-area" div stays to the right of the "rating-box".
However, case #2 does not work when the text extends beyond one line. This causes the "advice-area" div to move below the "rating-box"
What is the best way to fix this? Thanks.
<html>
<head>
<style type="text/css">
.wrapper {
width: 400px;
list-style: none;
}
.row {
border-bottom: 1px solid #E5E5E5;
padding: 15px 0;
font-size: 14px;
clear: both;
}
.rating-box {
float: left;
height: 70px;
position: relative;
width: 60px;
}
.thumbs {
float: right;
width: 20px;
}
.number {
position: absolute;
top: 16px;
left: 5px;
}
.advice-area {
display: inline-block;
margin-left: 35px;
}
.advice-content {
font-size: 16px;
margin: 0 0 10px 0;
}
.advice-action {
display: inline-block;
}
.add-box {
display: inline;
margin-left: 30px;
}
.add-box a {
display: inline-block;
}
.share-button {
display: inline;
margin-left: 30px;
cursor: pointer;
}
.flag {
display: inline;
margin-left: 30px;
cursor: pointer;
}
</style>
</head>
<body>
<ul class="wrapper">
<li class="row">
<div class="rating-box">
<div class="thumbs">
<div> Up </div>
<div> Down </div>
</div>
<div class="number">1</div>
</div>
<div class="advice-area">
<div class="advice-content">Case #1: This is correct</div>
<div class="advice-action">
<div class="add-box">Plan</div>
<div class="share-button"> Share </div>
<div class="flag"> Flag </div>
</div>
</div>
</li>
<li class="row">
<div class="rating-box">
<div class="thumbs">
<div> Up </div>
<div> Down </div>
</div>
<div class="number">2</div>
</div>
<div class="advice-area">
<div class="advice-content">Case #2: But this really long text does not want to stay right next to the "Up" and "Down" links</div>
<div class="advice-action">
<div class="add-box">Plan</div>
<div class="share-button"> Share </div>
<div class="flag"> Flag </div>
</div>
</div>
</li>
</ul>
</body>
I'd restrict the width for the .advice-content or .advice-area div (or whatever div is around the content you're floating).
When you enter text into a floated div the div will auto-size its width accordingly, and if it expands too wide it'll automatically wrap over to the next line. Think about how wrapping works for words in text.
So, all you need to do is to restrict the width of that particular div, and it'll never grow wide enough to wrap to the next line.
Unless if you're in IE: in which case it'll do whatever the hell it wants ;)
Floating elements, rather than inline blocks, are probably what you want in this situation. I managed to get what looks like a useful outcome by moving the number div above the up/down div in the code, and then floating both to the left. I then tweaked the margins until the spacing looked decent.
CSS changes:
.number {
float: left;
}
.thumbs {
float: left;
width: 20px;
margin-left: 20px;
}
.advice-area {
margin-left: 80px;
}
HTML changes:
<div class="rating-box">
<div class="number">1</div>
<div class="thumbs">
<div> Up </div>
<div> Down </div>
</div>
</div>
limit the width on .advice-content and it will show how you want it to.
.advice-content {
font-size: 16px;
margin: 0 0 10px 0;
width:300px;
}
worked for me in IE7 & 8 / Firefox / Opera / Chrome / Safari