#google1 {
width: 30%;
height: 30%;
}
#google {
text-align: center;
margin: 200px auto;
position: relative;
}
#gsearch {
height: 30px;
width: 50%;
}
#form {
text-align: center;
top: -30px;
position: relative;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
display: inline;
}
li {
float: left;
}
a {
display: block;
width: 60px;
color: #7e7070;
}
a:link {
text-decoration: none
}
a:visited {
text-decoration: none
}
#topbar {
position: relative;
right: 0;
top: 0;
margin-right: 200px;
}
#grid,
#bell {
opacity: 0.4;
}
<html>
<head>
<meta charset="utf-8"/>
<title>GOOGLE</title>
<link rel="stylesheet" href="styleg.css"/>
</head>
<body>
<div id="wrapper">
<div id="google">
<img src="google1.jpg" img id="google1" alt="google1"/>
<div id="form">
<form action="" method="post" name="gsearch"></form>
<input type="text" input id="gsearch" name="gsearch">
</div>
</div>
</div>
<div id="topbar">
<ul>
<li>Shan</li>
<li>Gmail</li>
<li>Images</li>
<li><img src="grid.png" alt="grid" img id="grid"></li>
<li><img src="bell.png" alt="bell" img id="bell"></li>
</ul>
</div>
</body>
What I want to do is align the bell.png and grid.png with the other text links to the top right of how google home page would look like.
Right now it displays at the bottom left inline. I have tried absolute positioning, but then I would have to fine tune it with top and left adjustments to get it right.
Q: Is there a simpler way of moving the entire block to the top right and align it?
HTML
<html>
<head>
<meta charset="utf-8"/>
<title>GOOGLE</title>
<link rel="stylesheet" href="styleg.css"/>
</head>
<body>
<div id="wrapper">
<div id="google">
<img src="google1.jpg" img id="google1" alt="google1"/>
<div id="form">
<form action="" method="post" name="gsearch"></form>
<input type="text" input id="gsearch" name="gsearch">
</div>
</div>
</div>
<div id="topbar">
<ul>
<li>Shan</li>
<li>Gmail</li>
<li>Images</li>
<li><img src="grid.png" alt="grid" img id="grid"></li>
<li><img src="bell.png" alt="bell" img id="bell"></li>
</ul>
</div>
</body>
CSS code is as follows:
#google1{
width:30%;
height:30%;
}
#google{
text-align: center;
margin:200px auto;
position: relative;
}
#gsearch{
height:30px;
width:50%;
}
#form{
text-align: center;
top:-30px; position:relative;
}
ul{
list-style-type:none;
margin:0;
padding:0;
display:inline;
}
li{
float:left;
}
a{
display:block;
width:60px;
color:#7e7070;
}
a:link{text-decoration: none}
a:visited{text-decoration: none}
#topbar{
position:relative; right:0; top:0; margin-right: 200px;
}
#grid, #bell{opacity:0.4;}
In your code, position: absolute is the way to go.
#google1 {
width: 30%;
height: 30%;
}
#google {
text-align: center;
margin: 200px auto;
position: relative;
}
#gsearch {
height: 30px;
width: 50%;
}
#form {
text-align: center;
top: -30px;
position: relative;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
display: inline;
}
li {
float: left;
}
a {
display: block;
width: 60px;
color: #7e7070;
}
a:link {
text-decoration: none
}
a:visited {
text-decoration: none
}
#topbar {
position: absolute;
right: 0;
top: 0;
}
#grid,
#bell {
opacity: 0.4;
}
<html>
<head>
<meta charset="utf-8"/>
<title>GOOGLE</title>
<link rel="stylesheet" href="styleg.css"/>
</head>
<body>
<div id="topbar">
<ul>
<li>Shan</li>
<li>Gmail</li>
<li>Images</li>
<li><img src="grid.png" alt="grid" img id="grid"></li>
<li><img src="bell.png" alt="bell" img id="bell"></li>
</ul>
</div>
<div id="wrapper">
<div id="google">
<img src="google1.jpg" img id="google1" alt="google1"/>
<div id="form">
<form action="" method="post" name="gsearch"></form>
<input type="text" input id="gsearch" name="gsearch">
</div>
</div>
</div>
</body>
I restructured your HTML and modified your CSS to place the nav elements at the top right. I set text-align:right on #topbar so that the items will be aligned to the right side. I also set the <li> elements to display:inline-block so that they will all appear on the same line but still accept some margin.
#google1 {
width: 30%;
height: 30%;
}
#google {
text-align: center;
margin: 200px auto;
position: relative;
}
#gsearch {
height: 30px;
width: 50%;
}
form#search_form {
text-align: center;
top: -30px;
position: relative;
}
#topbar {
text-align:right;
}
#topbar ul {
list-style:none;
margin: 0;
padding: 0;
}
#topbar ul li {
display:inline-block;
vertical-align:middle;
margin:0 0 0 1em;
}
#topbar ul li a {
color: #7e7070;
text-decoration: none
}
#topbar ul li a #grid,
#topbar ul li a #bell {
opacity: 0.4;
}
<div id="topbar">
<ul>
<li>Shan</li>
<li>Gmail</li>
<li>Images</li>
<li><img src="grid.png" alt="grid" img id="grid"></li>
<li><img src="bell.png" alt="bell" img id="bell"></li>
</ul>
</div>
<div id="wrapper">
<div id="google">
<img src="google1.jpg" id="google1" alt="google1" />
<form action="" method="post" name="gsearch" id="search_form">
<input type="text" input id="gsearch" name="gsearch">
</form>
</div>
</div>
Related
hello, Please see image, i have to make red box text aligned with "my heading", right now i have fixed this manually but when i resize the window it's going outside.
I know i can make it align if i do not use position absolute but its necessary to use position absolute because i have to call this section dynamically on each page.
so what should i do for this ??
this is my code
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
body{
margin:0px;
}
.name-list{
position: absolute;
right: 167px;
}
.name-list ul{
list-style: none; padding-left: 0px;
}
.name-list ul li{
float: left; padding-right: 10px;
background:red; color: white;
}
.box{
background:#38383d; padding: 10px; float: right; color: white; width:20%;
}
</style>
</head>
<body>
<div class="name-list">
<ul>
<li >Name</li>
<li>Surname</li>
</ul>
</div>
<div class="box">
<br>
<h2>My Heading</h2>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
body{
margin:0px;
}
.name-list{
position: absolute;
}
.name-list ul{
list-style: none; padding-left: 0px;
}
.name-list ul li{
float: left; padding-right: 10px;
background:red; color: white;
}
.box{
background:#38383d; padding: 10px; float: right; color: white; width:20%;
}
</style>
</head>
<body>
<div class="box">
<div class="name-list">
<ul>
<li >Name</li>
<li>Surname</li>
</ul>
</div>
<br>
<h2>My Heading</h2>
</div>
</body>
<style type="text/css">
body{
margin:0px;
}
.name-list{
position: absolute;
}
.name-list ul{
list-style: none; padding-left: 0px;
}
.name-list ul li{
float: left; padding-right: 10px;
background:red; color: white;
}
.box{
background:#38383d; padding: 10px; float: right; color: white;
}
</style>
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div class="box">
<div class="name-list">
<ul>
<li >Name</li>
<li>Surname</li>
</ul>
</div>
<br>
<h2>My Heading</h2>
</div>
</body>
I think this will help you..
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
body{
margin:0px;
}
.name-list{
position: absolute;
left: 10px;
}
.name-list ul{
list-style: none; padding-left: 0px;
}
.name-list ul li{
float: left; padding-right: 10px;
background:red; color: white;
}
.box{
padding: 10px; float: right; color: white; width:250px;
}
.custom {background:#38383d;display: inline-flex;float: right;position: relative; }
</style>
</head>
<body>
<div class='custom'>
<div class="name-list">
<ul>
<li >Name</li>
<li>Surname</li>
</ul>
</div>
<div class="box">
<br>
<h2>My Heading</h2>
</div>
</div>
</body>
</html>
Since you can't change your html the best route would be to use percentages to place and size your .name-list
I've got the best results with this code:
.name-list{
position: absolute;
right: 3%;
width:18%
}
Code snippet:
body{
margin:0px;
}
.name-list{
position: absolute;
right: 3%;
width:18%
}
.name-list ul{
list-style: none;
padding-left: 0px;
}
.name-list ul li{
float: left;
padding-right: 10px;
background:red;
color: white;
}
.box{
background:#38383d;
padding: 10px;
float: right;
color: white;
width:20%;
}
<div class="name-list">
<ul>
<li >Name</li>
<li>Surname</li>
</ul>
</div>
<div class="box">
<br>
<h2>My Heading</h2>
</div>
Unfortunately that's the best I can do without tinkering with your html.
use these css to get your result, hope this will helpful to you.
body {
margin: 0px;
}
.name-list {
position: absolute;
left: 10px;
}
.name-list ul {
list-style: none;
padding-left: 0px;
}
.name-list ul li {
float: left;
padding-right: 10px;
background: red;
color: white;
}
.box {
background: #38383d;
padding: 10px;
float: right;
color: white;
width: 20%;
position:relative;
}
<html>
<body>
<div class="box">
<div class="name-list">
<ul>
<li >Name</li>
<li>Surname</li>
</ul>
</div>
<br>
<h2>My Heading</h2>
</div>
</body>
</html>
I just started learning HTML and decided I wanted to try to build a simple blog. I decided I wanted a navigation bar with links to other HTML files. I thought I had done this perfectly until I ran it and discovered that only the "Home" link works (which is the HTML file that I had put the href tags in) the other 4 links showed up as links but weren't clickable. All the files are located in the same folder.
<head>
<title>Music Project</title>
<link href="MusicProject.css" rel="stylesheet" />
<div id="header">
<h1 align="center" style="margin-top: -155px"><img src="logo.png" alt="logo" id="logo" height="500" width="700" /></h1>
</div>
<div id="nav">
<ul>
<li>Home</li>
<li>Artists</li>
<li>Mixtapes/Albums</li>
<li>Suggestions</li>
<li>About</li>
</ul>
</div>
</head>
#header {
background-color: #888888;
height:380px;
margin:0px;
padding:0px;
}
body {
background-color: #C0C0C0;
margin:0px;
padding:0px;
}
#main {
overflow: auto;
}
#content {
float:left;
}
#side {
float:left;
}
#nav {
height: 42px;
background-color: #888888;
}
#nav ul {
list-style-type:none;
height:30px;
padding:0px;
margin:0px;
}
#nav ul li {
float:left;
margin:10px;
width:246px;
text-align:center;
font-family:"Arial";
font-size: 23px;
color: #00004B;
}
#nav ul li a {
display: inline;
width: 246px;
}
As said you need to place your <header>, and <content> in the <body> tags.
This should help you out:
<html lang="en">
<head>
<meta charset="utf-8">
<title>Music Project</title>
<link href="MusicProject.css" rel="stylesheet">
<style>
#header {
background-color: #888888;
height: 380px;
margin: 0px;
padding: 0px;
}
body {
background-color: #C0C0C0;
margin: 0px;
padding: 0px;
}
#main {
overflow: auto;
}
#content {
float: left;
}
#side {
float: left;
}
#nav {
height: 42px;
background-color: #888888;
}
#nav ul {
list-style-type: none;
height: 30px;
padding: 0px;
margin: 0px;
}
#nav ul li {
float: left;
margin: 10px;
width: 246px;
text-align: center;
font-family: "Arial";
font-size: 23px;
color: #00004B;
}
#nav ul li a {
display: inline;
width: 246px;
}
</style>
</head>
<body>
<header>
<div id="header">
<h1 style="margin-top: -155px; text-align:center;"><img src="logo.png" alt="logo" id="logo" height="500" width="700" /></h1>
</div>
<div id="nav">
<ul>
<li>Home</li>
<li>Artists</li>
<li>Mixtapes/Albums</li>
<li>Suggestions</li>
<li>About</li>
</ul>
</div>
</header>
<content>
<!-- Page content here -->
</content>
</body>
</html>
Fiddle
Here is a link to help you learn the basics. Link
<html>
<head>
<meta charset = "utf-8/">
<title> Jquery </title>
<script type = "text/javascript" src = "http://code.jquery.com/jquery-1.11.3.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script type = "text/javascript" src = "jsi/Scriptz.js" > </script>
<link rel = "stylesheet" type = "text/css" href = "RizzStyle.css"/>
<!-- Start Skider -->
<link rel="stylesheet" type="text/css" href="engine1/style.css" />
<script type="text/javascript" src="engine1/jquery.js"></script>
<!-- End Slider-->
</head>
<body onload = "Slider();" background = "black.jpg" >
<div id = "header">
<div id = "nav">
<div class = "Logo"> <img src = "Logo.png" border = "0" /> </div>
<div id = "nav_wrapper">
<ul>
<li> Home</li><li>
About Us</li><li>
Explore <img src = "Arrow.png"/>
<ul>
<li>Series/Movies</li>
<li>Sports</li>
<li>Games</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<div id = "container" >
<div id="wowslider-container1">
<div class="ws_images"><ul>
<li><img src="data1/images/north.jpg" alt="North" title="North" id="wows1_0"/></li>
<li><img src="data1/images/wolf.jpg" alt="content slider" title="Wolf" id="wows1_1"/> </li>
<li><img src="data1/images/android.jpg" alt="Android" title="Android" id="wows1_2"/></li>
</ul></div>
<div class="ws_bullets"><div>
<span><img src="data1/tooltips/north.jpg" alt="North"/>1</span>
<span><img src="data1/tooltips/wolf.jpg" alt="Wolf"/>2</span>
<span><img src="data1/tooltips/android.jpg" alt="Android"/>3</span>
</div></div>
<div class="ws_shadow"></div>
</div>
<script type="text/javascript" src="engine1/wowslider.js"></script>
<script type="text/javascript" src="engine1/script.js"></script>
<div class = "shadow">
</div>
</div>
</body>
</html>
body{
padding:0;
margin:0;
overflow-y:scroll;
font-family: sans-serif;
font-size: 18px;
}
#container {
width:1200px;
height:1000px;
margin: 70px auto;
border : 1px solid;
background-color: aliceblue;
top:0;
}
#header{
width : 100%;
height: 60px;
background-color:#212121;
box-shadow: 0px 4px 2px #333;
top:0px;
z-index: 1000;
margin: 0 auto;
position:fixed;
white-space: nowrap;
}
#header h1{
width : 1024px;
margin : 0px auto;
padding:12px;
color:white;
}
.shadow{
background-image : url(shadow.png);
background-repeat: no-repeat;
background-position: top;
width: 864px;
height:144px;
margin: -60px auto;
}
.Logo{
float:left;
height: 60px;
padding:5px 3px;
line-height:40px;
}
.Logo img{
width:60%;
}
#nav{
background-color: #212121;
}
#nav_wrapper{
width:960px;
margin:0 auto;
text-align: left;
}
#nav ul{
list-style-type: none;
padding: 0;
margin: 0;
position: relative;
}
#nav ul li{
display:inline-block;
}
#nav ul li :hover{
background-color: #FF0000;
}
#nav ul li img{
vertical-align: middle;
padding-left:10px;
width:20;
}
#nav ul li a,visited{
color:#ccc;
display:block;
padding: 15px;
text-decoration: none;
}
#nav ul li a:hover{
background-color:#FF0000;
text-decoration: none;
height:50%;
}
#nav ul li: hover ul{
display: block;
}
#nav ul ul{
position:absolute;
background-color:#212121;
}
#nav ul ul li{
display:block;
}
Hello guys, I have been following a tutorial on Youtube on how to create a dropdow list. Everything was going great untill I inputted - display: none in the css for dropdown and nothing appears but when I disable it appears underneath the correct tab which is explore. Any Idea how I can fix this?
Please check the following code. I hope this solves your problem.
You can find the updated CSS between the /*********************************/ comment.
<html>
<head>
<meta charset="utf-8/">
<title>Jquery</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script type="text/javascript" src="jsi/Scriptz.js">
</script>
<link rel="stylesheet" type="text/css" href="RizzStyle.css" />
<!-- Start Skider -->
<link rel="stylesheet" type="text/css" href="engine1/style.css" />
<script type="text/javascript" src="engine1/jquery.js"></script>
<!-- End Slider-->
<style type="text/css">
body {
padding: 0;
margin: 0;
overflow-y: scroll;
font-family: sans-serif;
font-size: 18px;
}
#container {
width: 1200px;
height: 1000px;
margin: 70px auto;
border: 1px solid;
background-color: aliceblue;
top: 0;
}
#header {
width: 100%;
height: 60px;
background-color: #212121;
box-shadow: 0px 4px 2px #333;
top: 0px;
z-index: 1000;
margin: 0 auto;
position: fixed;
white-space: nowrap;
}
#header h1 {
width: 1024px;
margin: 0px auto;
padding: 12px;
color: white;
}
.shadow {
background-image: url(shadow.png);
background-repeat: no-repeat;
background-position: top;
width: 864px;
height: 144px;
margin: -60px auto;
}
.Logo {
float: left;
height: 60px;
padding: 5px 3px;
line-height: 40px;
}
.Logo img {
width: 60%;
}
#nav {
background-color: #212121;
}
#nav_wrapper {
width: 960px;
margin: 0 auto;
text-align: left;
}
#nav ul {
list-style-type: none;
padding: 0;
margin: 0;
position: relative;
}
#nav ul li {
display: inline-block;
}
#nav ul li:hover {
background-color: #FF0000;
}
#nav ul li img {
vertical-align: middle;
padding-left: 10px;
width: 20;
}
#nav ul li a,
visited {
color: #ccc;
display: block;
padding: 15px;
text-decoration: none;
}
#nav ul li a:hover {
background-color: #FF0000;
text-decoration: none;
height: 50%;
}
/*********************************/
#nav ul li:hover ul {
display: block;
}
#nav ul ul {
position: absolute;
background-color: #212121;
display: none;
}
/*********************************/
#nav ul ul li {
display: block;
}
</style>
</head>
<body onload="Slider();" background="black.jpg">
<div id="header">
<div id="nav">
<div class="Logo">
<a href="Main.html">
<img src="Logo.png" border="0" />
</a>
</div>
<div id="nav_wrapper">
<ul>
<li> Home
</li>
<li>
About Us
</li>
<li>
Explore <img src = "Arrow.png"/>
<ul>
<li>Series/Movies
</li>
<li>Sports
</li>
<li>Games
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<div id="container">
<div id="wowslider-container1">
<div class="ws_images">
<ul>
<li>
<img src="data1/images/north.jpg" alt="North" title="North" id="wows1_0" />
</li>
<li>
<a href="http://wowslider.com/vi">
<img src="data1/images/wolf.jpg" alt="content slider" title="Wolf" id="wows1_1" />
</a>
</li>
<li>
<img src="data1/images/android.jpg" alt="Android" title="Android" id="wows1_2" />
</li>
</ul>
</div>
<div class="ws_bullets">
<div>
<span><img src="data1/tooltips/north.jpg" alt="North"/>1</span>
<span><img src="data1/tooltips/wolf.jpg" alt="Wolf"/>2</span>
<span><img src="data1/tooltips/android.jpg" alt="Android"/>3</span>
</div>
</div>
<div class="ws_shadow"></div>
</div>
<script type="text/javascript" src="engine1/wowslider.js"></script>
<script type="text/javascript" src="engine1/script.js"></script>
<div class="shadow">
</div>
</div>
</body>
</html>
First of all im a bit confused but i will do my best to explain my problem and what i want.
I have a div and inside that div i have another div, i want that div to move to left and right, nothing more, it has to follow the same path as the image when resizing (see my project).
How do i make that div that is behind the white circle always do the same path as the circle ?
body {
margin: 0;
width:100%;
}
body > div {
height: 200px;
}
.header {
background-color: transperent;
height: 100px;
color: white;
}
.product {
margin-top:0px;
height: 600px;
background-color: blue;
color: white;
float:left;
width:50%;
margin:0;
padding:0;
display: inline-block;
}
.product2 {
height: 600px;
margin-top:0px;
background-color: red;
color: white;
width:50%;
float:left;
margin:0;
padding:0;
position: relative;
display: inline-block;
}
.product2 img{
position: absolute;
right: 0;
bottom: 0;
}
.main{
background-image: url("http://i.imgur.com/Y5hHusa.png");
height:650px;
}
#crew {
height:50px;
clear:both;
background-color: tomato;
color: darkgrey;
}
.stick {
position: fixed;
top: 0;
}
.tour {
background-color: black;
color: darkgrey;
}
.pricing {
background-color: gold;
color: black;
}
.contact {
background-color: black;
color: white;
}
.menu {
float: right;
font-size: 18px;
list-style: outside none none;
margin-top: -5px;
margin-right: 50px;
}
.menu li a {
color: blue;
display: block;
text-decoration: none;
}
.menu li {
display: inline;
float: left;
padding-right: 23px;
}
.menu li a:hover{
background-color:none;
color:red;
}
.div_form {
height:35%;
width:40%;
margin-top:36%;
margin-left:41%;
background-color:blue;
}
.product2 .div_form{
}
.product2 .div_form .form_title{
position:absolute;
z-index:1;
margin-top:270px;
margin-left:1em;
font-size:3em
}
.product2 .div_form .form_circulo{
z-index:1
}
.product2 .div_form .div_email .input_first_email{
margin-top: -70%;
margin-left:50%;
height:3em;
border-radius:5px;
padding:1em;
width:45%;
}
.product2 .div_form .divbtnsubmit{
background-color:red;
margin-left:60%;
width:20em;
height:3em;
border-radius:1em;
text-align:center;
margin-top:1em;
width:45%
}
.product2 .div_form .divbtnsubmit .btnsumnitform
{
font-size:2em;
color:white;
position:absolute;
padding:.3em;
margin-left:-3.5em
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link href="styles.css" rel="stylesheet" type="text/css" >
<title> Layout </title>
</head>
<body>
<div class="main">
<div class="header">
<img src="http://i.imgur.com/48nYArD.png">
<ul class="menu">
<li>Home </li>
<li>Product Tour </li>
<li>Pricing </li>
<li>Try </li>
<li>Vision</li>
</ul>
</div>
<div class="product">
</div>
<div class="product2">
<img src="http://i.imgur.com/3UTs03w.png">
<div class="div_form">
</div>
</div>
</div>
</div>
<div id="crew">
</div>
<div class="tour">
</div>
<div class="pricing">
</div>
<div class="contact">
</body>
</html>
PS: Sorry for argumentation, my english isnt the best, hope you can understand.
Regards,
Duarte Andrade.
The problem is you're trying to position the div_form div vertically by giving it a margin-top of 36%. But a margin with a value in % is always relative to the width of the container, not the height. See the W3C.
The simplest solution is, because you know the height of the container (product2) is 600px, is to set the margin to 36% of 600px, or 216px.
body {
margin: 0;
}
.product {
height: 600px;
background-color: blue;
color: white;
float: left;
width: 50%;
margin: 0;
padding: 0;
display: inline-block;
}
.product2 {
height: 600px;
background-color: red;
color: white;
width: 50%;
float: left;
margin: 0;
padding: 0;
position: relative;
display: inline-block;
}
.product2 img {
position: absolute;
right: 0;
bottom: 0;
}
.div_form {
height: 35%;
width: 40%;
margin-top: 216px; /* This is what I changed */
margin-left: 41%;
background-color: blue;
}
<div class="main">
<div class="header">
<div class="product">
</div>
<div class="product2">
<img src="http://i.imgur.com/3UTs03w.png">
<div class="div_form">
</div>
</div>
</div>
</div>
Or if you really need a percentage of the parent's height, you would remove the margins and give the div position:absolute in the same way as the img. Then you can use left:41%; top:36%; but you will also need to experiment with the z-indexes a bit to get their stacking order right again.
I'm having problems with the navigation bar on my website. All I want is for it to say where it is, right under the logo/slogan- even when you zoom out or in in your browser.
Here's the HTML:
<html>
<head>
<title> Chaotix Studios </title>
<style>
* {
background-color:#E6E6E6;
font-family:Lato,Tahoma,Arial,Sans-Serif;
}
#coolMenu a:link{
color:#FFFFFF;
}
#top{
text-align:center;
padding-top:100px;
}
#coolMenu,
#coolMenu ul {
list-style: none;
}
#coolMenu {
float: left;
padding-left:550px;
padding-right:500px;
position:absolute;
}
#coolMenu > li {
float: left;
}
#coolMenu li a {
display: block;
height: 2em;
line-height: 2em;
padding: 0 1.5em;
text-decoration: none;
background-color:#000000;
}
#coolMenu ul {
position: absolute;
display: none;
z-index: 999;
}
#coolMenu ul li a {
width: 80px;
}
#coolMenu li:hover ul {
display: block;
}
#body-main{
text-align:center;
}
</style>
</head>
<body>
<div id="top">
<div id="top-wrapper">
<div id="logo">
<img src="http://i.imgur.com/4ReSeS7.png"><br>
<h3>Chaos Awaits.</h3><br>
</div>
</div>
</div>
<div id="body">
<div id="body-wrapper">
<div id="body-main">
<ul id="coolMenu">
<li>Lorem</li>
<li>Mauricii</li>
<li>
Periher
<ul>
<li>Hellenico</li>
<li>Genere</li>
<li>Indulgentia</li>
</ul>
</li>
<li>Tyrio</li>
<li>Quicumque</li>
</ul>
</div>
</div>
</div>
</body>
What I want it to look like all the time: http://i.imgur.com/RWXYTu0.png
Zoomed Out: http://i.imgur.com/BoJV0WB.png
Hope this helps.. Little modifications in Css
#coolMenu {
text-align:center; /*Added */
width:100%; /*Added */
}
#coolMenu > li {
display: inline-block; /*Added */
}
Removed Css
#coolMenu {
float: left;
padding-left:550px;
padding-right:500px;
position:absolute;
}
#coolMenu > li {
float: left;
}
I added wrapper to contain all of them and just centered it with margin: 0 auto;
<html>
<head>
<title> Chaotix Studios </title>
<style>
* {
background-color:#E6E6E6;
font-family:Lato,Tahoma,Arial,Sans-Serif;
}
#wrapper {
margin: 0 auto;
width: 500px;
}
#coolMenu a:link{
color:#FFFFFF;
}
#top{
text-align:center;
padding-top:100px;
}
#coolMenu,
#coolMenu ul {
list-style: none;
}
#coolMenu {
float: left;
position:absolute;
}
#coolMenu > li {
float: left;
}
#coolMenu li a {
display: block;
height: 2em;
line-height: 2em;
padding: 0 1.5em;
text-decoration: none;
background-color:#000000;
}
#coolMenu ul {
position: absolute;
display: none;
z-index: 999;
}
#coolMenu ul li a {
width: 80px;
}
#coolMenu li:hover ul {
display: block;
}
#body-main{
text-align:center;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="top">
<div id="top-wrapper">
<div id="logo">
<img src="http://i.imgur.com/4ReSeS7.png"><br>
<h3>Chaos Awaits.</h3><br>
</div>
</div>
</div>
<div id="body">
<div id="body-wrapper">
<div id="body-main">
<ul id="coolMenu">
<li>Lorem</li>
<li>Mauricii</li>
<li>
Periher
<ul>
<li>Hellenico</li>
<li>Genere</li>
<li>Indulgentia</li>
</ul>
</li>
<li>Tyrio</li>
<li>Quicumque</li>
</ul>
</div>
</div>
</div>
</div>
</body>
to center anything use
margin: 0 auto
In your case, set this in #body
#body {
margin:0 auto;
}
It still isn't center as expected right? because of your float: left in the li, replace with display: inline-block
#coolMenu > li {
display:inline-block;
}
Here is the final demo: http://jsfiddle.net/jbwsT/1/
They're not centered correctly. Use absolute is a bad way to center dynamic text. Is better to use only on divs with a exact value.
The best form:
Use display:inline-block in the texts.
And in the ul, use text:align: center
JSFIDDLE
ONLINE DEMO
Fixed below.
Some changes include:
the 50% relative position trick for the nav.
simplified mark-up.
auto left/right margins for centering.
<head>
<title> Chaotix Studios </title>
<style>
* {
background-color: #E6E6E6;
font-family: Lato,Tahoma,Arial,Sans-Serif;
}
#header {
text-align: center;
padding-top: 100px;
}
.container {
width: 940px;
margin: 0 auto;
clear: both;
}
.centered {
text-align: center;
}
#coolMenu,
#coolMenu ul {
list-style: none;
margin: 0;
padding: 0;
}
#coolMenu a:link {
color: #FFFFFF;
}
#coolMenu {
float: left;
position: relative;
left: 50%;
}
#coolMenu > li {
float: left;
position: relative;
left: -50%;
}
#coolMenu li a {
display: block;
height: 2em;
line-height: 2em;
padding: 0 1.5em;
text-decoration: none;
background-color: #000000;
}
#coolMenu ul {
position: absolute;
display: none;
z-index: 999;
}
#coolMenu ul li a {
width: 80px;
}
#coolMenu li:hover ul {
display: block;
}
</style>
</head>
<body>
<div id="header">
<div id="logo" class="container centered">
<img src="http://i.imgur.com/4ReSeS7.png"><br>
<h3>Chaos Awaits.</h3><br>
</div>
<div id="primary-nav" class="container centered">
<ul id="coolMenu">
<li>Lorem</li>
<li>Mauricii</li>
<li>
Periher
<ul>
<li>Hellenico</li>
<li>Genere</li>
<li>Indulgentia</li>
</ul>
</li>
<li>Tyrio</li>
<li>Quicumque</li>
</ul>
</div>
</div>
<div id="body" class="container">
<h1>
Test header
</h1>
<p>
Test paragraph
</p>
<p>
Test paragraph
</p>
</div>
</body>
</html>
the only thing that works for me.
margin: 0 auto;
width: fit-content;
on your element
It worked for me, hope it work for you
add at the end of your code (if you want just center the page delete the first row "transform: scale(0.8)"
in CSS editor
body {
transform: scale(0.8); /* for zooming */
transform-origin: 1 0; /* for center position */
transform-origin: top; /* for center to top position */
}