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
Related
I thought setting all margin and padding to 0 would fix this problem. I notice when I took out the p tags out of the sign div that the margin decreases a little but there looks to still be 1px of white margin between to the topbar div and newbar div that I cannot get rid of. Could someone take a look at this? Here's the code --> http://codepen.io/Chris-Brennan/pen/JYYqrN
Thanks,
Chris
<div id="container">
<div id="topbar">
<div class="fixedwidth">
<div id="bearLogo">
<img src="http://hrsbstaff.ednet.ns.ca/hughson/images/Icons/Icon.bear.gif" alt"bear">
</div>
<div id="signin">
<a href="#"><img src="https://cdn4.iconfinder.com/data/icons/berlin/32x32/sign-out.png"><p>Topbar</p>
</div></a>
<div id="topmenu">
<ul>
<li>Home</li>
<li>News</li>
<li>Food</li>
<li>Weather</li>
<li>Iplayer</li>
<li>Bears</li>
<li>More...</li>
</ul>
</div> <!--end-topmenu-->
<div id="searchBox">
<input type="text" placeholder="Search" />
</div>
</div> <!--end-fixedwidth-->
</div> <!--end-topbar-->
<div class="break"></div>
<div id="newsbar">
<div class="fixedwidth">
newsbar
</div>
</div>
</div> <!--end-container-->
*{
border-box:sizing;
padding:0px;
margin:0px;
font-family:verdana,helvetica,arial,sans-serif;
}
/*----------------
TOP BAR
-----------------*/
#topbar {
background:#009966;
width:100%;
height:40px;
color:white;
margin:0px;
padding:0px;
}
.fixedwidth {
width:1000px;
height:40px;
margin:0 auto;
padding:0px;
}
#bearLogo{
float:left;
border-right:1px solid #99CCCC;
padding-right:30px;
}
#signin{
float:left;
border-right:1px solid #D8D8D8;
padding:0px 20px 0 20px;
font-weight:bold;
font-size:0.8em;
width:160px;
}
#signin img{
position:relative;
left:5px;
top:5px;
}
#signin p{
position:relative;
top:-23px;
left:44px;
}
#signin a{
color:white;
text-decoration:none;
}
#topmenu{
}
#topmenu ul{
list-style:none;
}
#topmenu li{
padding:12px 20px 12px 20px;
border-right:1px solid #D8D8D8;
float:left;
font-size:0.8em;
}
#topmenu a{
color:white;
}
#searchBox{
float:left;
padding:8px 0px 0 10px;
}
#searchBox input{
width:105px;
height:20px;
border:none;
padding:0px 6px;
font-size:0.7em;
background-image:url("https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcR2KAItPd4K87egTfclFiqNByGRK94bRks2XTO_5Vbyo8W0O_pPSA");
background-repeat:no-repeat;
background-position:right center;
}
.break{
clear:both;
}
/*----------------
NEWS BAR
-----------------*/
#newsbar{
float:left;
width:100%;
height:100px;
background:red;
}
A lot of mistakes:
Your #signin div has an extra margin which is coming outside.
Your markup is invalid. You have encapsulated <li> inside <a> tag, which is a crime.
Solutions
#signin {height: 40px;}
#container {background-color: #009966 !important;}
The above is a hack.
Preview:
Fiddle: http://codepen.io/anon/pen/QjyWBd
Like previously mentioned your code could do with a little restructuring but the issue that's causing this specific problem is the top css statement:
#signin p {
position:relative;
top:-23px;
left:44px;
}
I tend not to use negative margins for this reason. If you remove the top statement, the margin disappears. It does move your p tag out of its intended position, but this can be fixed by adding a float:left; to #signin img{ and line-height:36px; to #signin p{ (I would also probably use 3em insetad of 36px).
https://jsfiddle.net/ac0qv98t/
Setting the height of div with id "signin" would solve this problem easily
#signin {
border-right: 1px solid #d8d8d8;
float: left;
font-size: 0.8em;
font-weight: bold;
height: 100%;
padding: 0 20px;
width: 160px;
}
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;
}
I took a break after doing a little bit and everything is fine. I come back to see my header has a gap between the top of the page and itself. I don't know why, I must of not saved or something, but I can't figure out what's wrong...
http://jsfiddle.net/Zevoxa/tCxaU/
HTML
<div id="header">
<img id="logo" src="/img/logo.png">
<div id="nav">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
CSS
/*-- HEADER --*/
#header {
position:relative;
top:0px;
width:100%;
background-color:#2C2E31;
border-bottom:#242426 solid 2px;
}
img#logo {
display: block;
margin-left:auto;
margin-right:auto;
margin-top:20px;
margin-bottom:20px;
}
#nav ul li {
list-style-type:none;
display:inline;
margin-bottom:0px;
padding-bottom:0px;
}
/*-- CONTENT --*/
body {
margin:0px;
padding:0px;
background-color:#2A2B2D;
}
Your issue is margin-top on the #logo.
One solution is to add that top 20px spacing as padding on the #header rather than a margin on the #logo.
http://jsfiddle.net/JRPwr/
/*-- HEADER --*/
#header {
position:relative;
top:0px;
width:100%;
background-color:#2C2E31;
border-bottom:#242426 solid 2px;
padding-top:20px;
}
img#logo {
display: block;
margin-left:auto;
margin-right:auto;
margin-bottom:20px;
}
#nav ul li {
list-style-type:none;
display:inline;
margin-bottom:0px;
padding-bottom:0px;
}
/*-- CONTENT --*/
body {
margin:0px;
padding:0px;
background-color:#2A2B2D;
}
Alternate solutions are mentioned in the following StackOverflow question:
Margin on child element moves parent element
In img#logo, use margin-top: 0px;
im just trying to do a normal Navigation but i seem to fail at it since i haven't done something like that in a long time. So here is what i got:
<div id="Top">
<div id="Navi">
<div class="Link">
link1
</div>
<div class="Link">
link2
</div>
</div>
</div>
and:
#Top {
width:100%;
min-height:100px;
height:15%;
max-height:200px;
background-color:#C6E466;
border-bottom-width:2px;
border-bottom-style:solid;
border-bottom-color:#4E6011;
position:relative;
}
#Navi {
width:100%;
position:absolute;
top:-1px;
left:-5px;
}
.Link {
height:20px;
margin-left:10px;
min-width:150px;
width:10%;
max-width:200px;
float:left;
background-color:#121212;
color:white;
text-decoration:none;
}
I just want to have:
- a complete header at the Top, which is #Top, convering the whole area at the top from left to right (width:100%).
- In the #Top header i want to display some Links done via #Navi. However i want to display #Navi in the bottom right corner of #Top. So i figured i would do #Top to position relative and #Navi position:absolute, but it doesnt work.
- Then i wanted the link color to be white, but somehow it doesnt work - why?
- Why do i need to use which i think is not cool? Without using the complete #Navi div wouldn't show up!
Thanks a lot!
try giving #Navi
bottom:0px and right:0px;
#Top {
width:100%;
min-height:100px;
height:15%;
max-height:200px;
background-color:#C6E466;
border-bottom-width:2px;
border-bottom-style:solid;
border-bottom-color:#4E6011;
position:relative;
}
#Navi {
width:100%;
position:absolute;
bottom: 0px;
}
.Link {
height:20px;
margin-left:10px;
min-width:150px;
width:10%;
max-width:200px;
background-color:#121212;
color:white;
text-decoration:none;
float: right;
}
not sure what are you trying, but here is a link: http://jsfiddle.net/4JdmH/
<div id="Top">
<div id="Navi">
<div class="Link">
link1
</div>
<div class="Link">
link2
</div>
<div class="clr"></div>
</div>
</div>
#Top {
width:100%;
min-height:100px;
height:15%;
max-height:200px;
background-color:#C6E466;
border-bottom: 2px solid #4E6011;
position:relative;
}
#Navi {
position:absolute;
bottom:0px;
right:0px;
}
.Link {
height:20px;
margin-left:10px;
min-width:150px;
width:10%;
max-width:200px;
float:left;
background-color:#121212;
color:white;
text-decoration:none;
}
.clr {
clear: both;
}
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.