I have used a 12 column format. (refer the web view image) there are two divs marked in yellow and red each has a width of 50% each.
I have coded it in such a way that when the device width has reduced the width of each divs will be set to 100% so that the content in each of the div sections are placed one below the other when viewed from a mobile or any device with lesser width. But as seen in the screenshot of the mobile view(1 & 2) that is not the case. the second div has moved out of the screen.
I have not used any bootstrap. My HTML and CSS codes are as follows
/********DEFAULTS*******/
nav,header,footer
{
display:block;
}
body
{
line-height: 1;
margin :0;
}
/********NAV BAR*******/
nav
{
width:100%;
margin:0;
}
nav ul
{
background-color: #eee;
overflow: hidden;
margin:0;
padding:0;
}
ul.topnav li
{
list-style: none;
float : left;
margin:0;
padding:0;
}
ul.topnav li.topnav-right
{
float : right;
}
ul.topnav li a
{
display : block;
text-decoration : none;
min-height:16px;
text-align:centre;
padding:14px;
text-transform: uppercase;
color:#665;
}
ul.topnav li a:hover
{
background-color: #0000ff;
color:#fff;
}
ul.topnav li.dropdownicon
{
display: none;
}
.container
{
width : 100%;
margins: auto;
padding-top: 4%;
padding-bottom: 4%;
background:
}
/********custom style*******/
#section-1-gradient
{
background:#076DFF;
background-image: -webkit-linear-gradient(#076DFF, #65A5FF);
background-image: -o-linear-gradient(#076DFF, #65A5FF);
background-image: -moz-linear-gradient(#076DFF, #65A5FF);
background-image: linear-gradient(#076DFF, #65A5FF);
}
h1.large
{
color:#fff;
font-size: 56px;
margin:0;
line-height: 70px;
}
div.leftside-col
{
margin-left:30%;
}
div.rightside-col
{
margin-left:15%;
}
input[type="text"]
{
font-size: 20px;
width:400px;
min-width: 100px;
padding:5px;
}
input[type="password"] /* added by shamil*/
{
font-size: 20px;
width:400px;
min-width: 100px;
padding:5px;
}
form h2
{
color:white;
}
.row
{
width:100%;
display:flex;
flex:wrap;
align-items:center;
}
.row::after
{
display:table;
clear: both;
content:"";
}
.col-1{width:8.33%;}
.col-2{width:16.66%;}
.col-3{width:25%;}
.col-4{width:33.33%;}
.col-5{width:41.66%;}
.col-6{width:50%;}
.col-7{width:58.33%;}
.col-8{width:66.66%;}
.col-9{width:75%;}
.col-10{width:83.33%;}
.col-11{width:91.66%;}
.col-12{width:100%;}
/********MOBILE*******/
#media screen and (max-width : 680px)
{
ul.topnav li:not(:nth-child(1))
{
display: none;
}
ul.topnav li.dropdownicon
{
display:block;
float: right;
}
ul.topnav.responsive li.dropdownicon{
position: absolute;
top:0;
right:0;
}
ul.topnav.responsive{
position: relative;
}
ul.topnav.responsive li{
display:inline;
float : none;
}
ul.topnav.responsive li a
{
display: block;
text-align: left;
text-transform: uppercase;
}
.col-6
{
width:100%;
margin:0;
}
div.rightside-col,
div.leftside-col
{
width:15%;
}
}
<! DOCTYPE html>
<html>
<head>
<title>
Anime Shop
</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav>
<ul class="topnav" id="dropdownClick">
<li>Home</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
<li class="topnav-right">Sign up</li>
<li class="topnav-right">Sign in</li>
<li class="dropdownicon">☰</li>
</ul>
</nav>
<div class="container" id="section-1-gradient">
<div class="row">
<div class= "col-6">
<div class= "leftside-col">
<h1 class="large">
Crazy radness
</h1>
<h1 class="large">
Made for Otaku
</h1>
<form>
<div class= "leftside-col">
<h2>Username</h2>
<input class="inputbox" type="text" name="Username "placeholder="Username">
<h2>Password</h2>
<input class="inputbox" type="password" name="Password "placeholder="Password">
</div>
</form>
</div>
</div>
<div class= "col-6">
<div class= "rightside-col">
<iframe width="560" height="315" src="https://www.youtube.com/embed/uC_SgMzlr6U" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
</div>
</div>
<script>
function dropdownMenu()
{
var x= document.getElementById("dropdownClick");
if(x.className === "topnav")
{
x.className = "topnav responsive";
/*change topnav to topnav.responsive*/
}
else
{
x.className = "topnav";
}
}
</script>
</body>
</html>
Can someone please point out where I am going wrong?
you can add below code to your media query
.row {
flex-direction: column;
}
then just fix your margin and paddings
what I found is its taking 50% of the size even when it is in a smaller size and as there will be a minimum width so it is overflowing to the left try to make it reactive
Related
I want my menu to stay on its place while I scroll, but when I add the following in my CSSposition:fixed; the whole thing goes out of the place from where I want it to be.
In this jsfiddle you can see how it is now and how I want it to be. The only thing wrong with it, is that if I change the position to fixed it doesn't stay where I want it to be anymore.
<!DOCTYPE html>
<html>
<head>
<link href='https://fonts.googleapis.com/css?family=Satisfy' rel='stylesheet' type='text/css'>
<title>random</title>
<!-- <link rel="stylesheet" type="text/css" href="styles/style.css"> -->
</head>
<body>
<div id="container">
<div id="headcontainer">
</div>
<div id="menu">
<div id="logo">
<p>
Hier komt een logo
</p>
</div>
<ul>
<li>
Home
</li>
<li>
Over
</li>
<li>
Contact
</li>
<li>
Producte
</li>
</ul>
</div>
<div id="content">
<div class="text-box">
</div>
<div class="text-box">
</div>
</div>
</div>
</body>
</html>
<style>
/*Global*/
* {
margin: 0px;
}
body {}
h1,
h2,
h3,
h4,
h5,
h6 {}
h1 {}
h2 {}
h3 {}
h4 {}
a {}
img {}
#container {
margin-left: auto;
margin-right: auto;
width: 100%;
}
#headcontainer {
width: 100%;
height: 100vh;
background-color: pink;
}
/* navigation */
#menu {
height: 100px;
width: 100%;
background-color: rgba(0, 0, 255, 0.1);
max-height: 100px;
border: 1px solid black;
border-top: none;
}
#menu li {
display: inline-block;
text-decoration: none;
padding-left: 20px;
position: relative;
padding-right: 20px;
}
#menu ul {
float:right;
height:100%;
width: auto;
line-height: 100px;
margin-right:25px;
}
#menu ul li {
}
#menu ul li:hover {
cursor:pointer;
color: white;
}
#logo {
height: 50px;
width: auto;
background-color: red;
float: left;
margin-top: 0px;
margin-top: 30px;
margin-left: 60px;
}
/*content*/
#content {
width:100%;
height:1000px;
min-height:500px;
margin-left: auto;
margin-right: auto;
}
.text-box {
width:40%;
height:auto;
background-color:blue;
min-height:100px;
float:left;
margin-left:5%;
margin-right:5%;
margin-top:50px;
}
</style>
EDIT:
I'm trying to achieve something like this:
http://themes.lucky-roo.com/resume-cv/berg-v1.7/HTML_Template/home-1-static-image.html
Ok, i see what you want and i think you will code this behaviour in Javascript.
This kind of solution will be okay for you ??
Démo : http://jsfiddle.net/cc48t
$(window).scroll(function () {
if ($(window).scrollTop() > 100) {
$('#scroller').css('top', $(window).scrollTop());
}
}
);
Use menu inside the headercontainor and give position: fixed; fom #menu
<!DOCTYPE html>
<html>
<head>
<link href='https://fonts.googleapis.com/css?family=Satisfy' rel='stylesheet' type='text/css'>
<title>random</title>
<!-- <link rel="stylesheet" type="text/css" href="styles/style.css"> -->
</head>
<body>
<div id="container">
<div id="headcontainer">
<div id="menu">
<div id="logo">
<p>
Hier komt een logo
</p>
</div>
<ul>
<li>
Home
</li>
<li>
Over
</li>
<li>
Contact
</li>
<li>
Producte
</li>
</ul>
</div>
</div>
<div id="content">
<div class="text-box">
</div>
<div class="text-box">
</div>
</div>
</div>
</body>
</html>
<style>
/*Global*/
* {
margin: 0px;
}
body {}
h1,
h2,
h3,
h4,
h5,
h6 {}
h1 {}
h2 {}
h3 {}
h4 {}
a {}
img {}
#container {
margin-left: auto;
margin-right: auto;
width: 100%;
}
#headcontainer {
width: 100%;
height: 100vh;
background-color: pink;
}
/* navigation */
#menu {
position: fixed;
height: 100px;
width: 100%;
background-color: rgba(0, 0, 255, 0.1);
max-height: 100px;
border: 1px solid black;
border-top: none;
}
#menu li {
display: inline-block;
text-decoration: none;
padding-left: 20px;
position: relative;
padding-right: 20px;
}
#menu ul {
float:right;
height:100%;
width: auto;
line-height: 100px;
margin-right:25px;
}
#menu ul li {
}
#menu ul li:hover {
cursor:pointer;
color: white;
}
#logo {
height: 50px;
width: auto;
background-color: red;
float: left;
margin-top: 0px;
margin-top: 30px;
margin-left: 60px;
}
/*content*/
#content {
width:100%;
height:1000px;
min-height:500px;
margin-left: auto;
margin-right: auto;
}
.text-box {
width:40%;
height:auto;
background-color:blue;
min-height:100px;
float:left;
margin-left:5%;
margin-right:5%;
margin-top:50px;
}
</style>
Since you are not using JQuery, You can achieve it through the simple javascript
var header = document.querySelector('div'),
title = header.querySelector('ul'),
fix_class = 'fixnav';
function stickyScroll(e) {
if( window.pageYOffset > 310 ) {
title.classList.add(fix_class);
}
if( window.pageYOffset < 310 ) {
title.classList.remove(fix_class);
}
}
// Scroll handler to toggle classes.
window.addEventListener('scroll', stickyScroll, false);
<style>
/*Global*/
* {
margin: 0px;
}
body {}
h1,
h2,
h3,
h4,
h5,
h6 {}
h1 {}
h2 {}
h3 {}
h4 {}
a {}
img {}
#container {
margin-left: auto;
margin-right: auto;
width: 100%;
}
#headcontainer {
width: 100%;
height: 100vh;
background-color: pink;
}
/* navigation */
.fixnav{
position:fixed;
z-index:9999;
top:0;
}
#menu {
height: 100px;
width: 100%;
background-color: rgba(0, 0, 255, 0.1);
max-height: 100px;
border: 1px solid black;
border-top: none;
transition: 1s all;
}
#menu li {
display: inline-block;
text-decoration: none;
padding-left: 20px;
position: relative;
padding-right: 20px;
}
#menu ul {
float:right;
height:100%;
width: auto;
line-height: 100px;
margin-right:25px;
}
#menu ul li {
}
#menu ul li:hover {
cursor:pointer;
color: white;
}
#logo {
height: 50px;
width: auto;
background-color: red;
float: left;
margin-top: 0px;
margin-top: 30px;
margin-left: 60px;
}
/*content*/
#content {
width:100%;
height:1000px;
min-height:500px;
margin-left: auto;
margin-right: auto;
}
.text-box {
width:40%;
height:auto;
background-color:blue;
min-height:100px;
float:left;
margin-left:5%;
margin-right:5%;
margin-top:50px;
}
</style>
<!DOCTYPE html>
<html>
<head>
<link href='https://fonts.googleapis.com/css?family=Satisfy' rel='stylesheet' type='text/css'>
<title>random</title>
<!-- <link rel="stylesheet" type="text/css" href="styles/style.css"> -->
</head>
<body>
<div id="container">
<div id="headcontainer">
</div>
<div id="menu">
<div id="logo">
<p>
Hier komt een logo
</p>
</div>
<ul>
<li>
Home
</li>
<li>
Over
</li>
<li>
Contact
</li>
<li>
Producte
</li>
</ul>
</div>
<div id="content">
<div class="text-box">
</div>
<div class="text-box">
</div>
</div>
</div>
</body>
</html>
Fiddle: https://jsfiddle.net/sank8893/mvmbtcby/3/
I create a jsfiddle.
I just add those lines in #menu and it works for me:
position : fixed;
top: 0;
The menu doesn't move.
JS:
$(document).ready(function() {
$(window).scroll(function () {
//if you hard code, then use console
//.log to determine when you want the
//nav bar to stick.
console.log($(window).scrollTop())
if ($(window).scrollTop() > 100) {
$('#nav_bar').addClass('navbar-fixed');
}
if ($(window).scrollTop() < 100) {
$('#nav_bar').removeClass('navbar-fixed');
}
});
});
Css:
.navbar-fixed{
position:fixed;
z-index:auto;
Top:0px;
}
Since you need this css to be appended only when you have scrolled a certain height in your webpage, Using this js code you can append navbar-fixed class to menu div after scrolling a certain amount of height.
Add the following script it will work fine
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script>
$(window).scroll(function () {
if ($(window).scrollTop() > 650) {
$('#menu').css('position', 'fixed').css('top', '0');
} else {
$('#menu').css('position', 'static');
}
});
</script>
Add these styles to your menu in css
.
position: fixed
top:0
The combination of these 2 will make sure the menu stays where it has to stay : always at the top.
As #Error404 said:
the fixed elements goes out of the normal flow of the document and this
is why you can position it on the top of the screen.
I'm doing a project on recreating the Google homepage with html and css. I am for the most part finished with the project, but I've noticed a few quirks that are irritating me. I've spent a great deal of time on each of these quirks, but can't get things to way I want them to look. These are the following quirks:
The icon in the top right-hand corner isn't inline with the rest of the text.
For some reason I can't center the buttons properly.
Not sure how to handle the white space surrounding the grey footer.
JSFiddle of The Code
If you have any input on any of the above issues, I would forever be thankful!
<body>
<div id="wrapper">
<div id="header">
<ul class="navbar">
<li class="navli"> +You
</li>
<li class="navli">Gmail
</li>
<li class="navli">Images
</li>
<li class="navli" id="icon">
<img src="http://bit.ly/1NHEwTW" height="auto" width="30" />
</li>
<li class="navli">theonlybrianlie#gmail.com
</li>
</ul>
</div>
<div id="body">
<div class="logo">
<img src="https://www.google.com/images/srpr/logo11w.png" />
</div>
<div class="searchbar">
<input type="text" id="search1" />
</div>
<div id="buttons">
<input class="button" id="googlesearch" value="Google Search" type="submit">
<input class="button" id="secondbutton" value="I'm Feeling Lucky" type="submit">
</div>
</div>
<div id="footer">
<div id="leftfoot">
<ul>
<li class="lf"> Advertising
</li>
<li class="lf"> Business
</li>
<li class="lf"> About
</li>
</ul>
</div>
<div id="rightfoot">
<ul>
<li class="rf"> Privacy
</li>
<li class="rf"> Terms
</li>
<li class="rf"> Settings
</li>
</ul>
</div>
</div>
</div>
.button {
font-family:Arial;
font-size:11px;
font-weight:bold;
display:inline;
height:30px;
border:1px solid #dcdcdc;
background:#f2f2f2;
padding-left: 10px;
}
body, html {
height:100%
}
#wrapper {
min-height:100%;
position: relative;
padding:0;
margin:0;
}
.logo img {
display:block;
width: 269px;
height:95px;
margin:auto;
margin-top: 80px;
padding-top: 112px;
}
#header {
width:100%;
height:100px;
/*background-color:green*/
;
}
.navbar {
/*background-color: red;*/
float: right;
}
.navli {
display: inline-block;
font-family: Arial;
}
.navli a {
text-decoration:none;
color: #404040;
font-size: 13px;
padding-left: 15px;
}
.navli a:hover {
text-decoration:underline;
}
#icon {
margin-top:10px;
padding-left:15px;
bottom:0;
position:relative;
}
.searchbar {
width:400px;
height:28px;
margin: auto;
display:block;
/*background-color:red;*/
padding-top:10px;
}
#search1 {
width:400px;
height:28px;
margin: auto;
}
#buttons {
display:block;
/*background-color:blue;*/
height: 22px;
width:250px;
margin: auto;
margin-top: 10px;
}
#footer {
position: absolute;
bottom:0;
height:60px;
width:100%;
background-color:#f2f2f2;
clear:both;
display:block;
border-top: 1px solid #e4e4e4;
}
#leftfoot {
width:300px;
left:0;
/*background-color:blue;*/
display: inline-block;
}
.lf {
display: inline-block;
}
.lf a {
text-decoration:none;
color: #404040;
font-size: 13px;
font-family: Arial;
padding-left: 15px;
}
.lf a:hover {
text-decoration: underline;
}
#rightfoot {
width:250px;
float:right;
/*background-color:blue;*/
padding:0;
margin:0;
}
.rf {
display: inline-block;
margin:auto;
}
.rf a {
text-decoration:none;
color: #404040;
font-size: 13px;
padding-left: 15px;
font-family: Arial;
}
.rf a:hover {
text-decoration: underline;
}
For your top right icon not inline with the rest of the menu, i would alter the CSS like this
.navli {
display: inline-block;
font-family: Arial;
float: left;
height: 30px;
line-height: 30px;
}
#icon {
/* margin-top: 10px; */
padding-left: 15px;
/* bottom: 0; */
/* position: relative; */
}
For your buttons not centering:
Add text-align:center; to #buttons
And for the white space on footer:
There's a margin on your body, so change your body,html to this:
body, html {
height: 100%;
margin: 0;
}
UPDATE
Here's the JSFiddle - Full Screen Preview - JSFiddle View
I'll try to answer these as concisely as possible:
1- the heading is inline, and your icon is taller than the rest of the inline elements. play with the margin and padding for your text elements there.
2- place your buttons in a div or section element of their own, and use text-align: center to center them on the page
3- add a class="container-fluid" to your footer element.
Can someone please tell me why my 'header' div and 'pageInnerWrap' div are overlapping...been messing about with position absolute but cant get it...any help appreciated...ta
<div id="pageWrap">
<div id="pageInnerWrap" class="push">
<div id="header" class="push">
<div class="inner-wrap">
<a id="A2" href="Home.aspx"><img src="/images/logo_new.png" alt="Azi Map" /></a>
<div style="position:relative;float:right">
<%--Login Stuff--%>
<div class="loginDisplay" style="width:33%">
<asp:LoginView ID="HeadLoginView" runat="server" EnableViewState="false">
<AnonymousTemplate>
<img src="/images/btn_login.png" alt="Login" />
Login |
<a id="A4" href="~/Account/Register.aspx" runat="server" title="Sign up for your 30 days free trial">Free Trial</a>
</AnonymousTemplate>
<LoggedInTemplate>
Welcome <span class="bold"><asp:Label id="UserLogonID" runat="server"></asp:Label></span>,
<br />
[<asp:HyperLink ID="hlChangePassword" runat="server" NavigateUrl="~/Account/ChangePassword.aspx">Change Password</asp:HyperLink>]
[<asp:LoginStatus ID="HeadLoginStatus" runat="server" LogoutAction="Redirect" LogoutText="Log Out" LogoutPageUrl="~/Home.aspx"/>]
<br />
</LoggedInTemplate>
</asp:LoginView>
<p style="text-align:right">
<asp:Label ID="lblFreeTrialDays" runat="server" Text=""></asp:Label>
</p>
</div>
</div>
<ul id="nav">
<li><img src="/images/btn_layers.png" alt="Layers" />Layers</li>
<li><img src="/images/btn_maps.png" alt="Layers"/>Maps</li>
<li><img src="/images/btn_admin.png" alt="Layers"/>Admin</li>
</ul>
<div id="mobile-btn">
<img src="imgs/menu_btn.png" alt="Menu Button" />
</div>
</div>
</div><%--header--%>
<div style=" margin: 0 auto; width: 2000px; height: 1200px">
<div id="mainContent" class="main" style="background:white;">
<asp:ContentPlaceHolder ID="MainContent" runat="server"/>
<div style= "visibility:hidden;>
<div id="AlertDiv" class="AlertStyle">
<asp:Image ID="Image1" runat="server" ImageUrl="~/images/loading.GIF"/>
</div>
</div>
</div>
</div>
</div>
<div id="mobile-nav-items">
<ul>
</ul>
</div>
</div>
CSS
* {
box-sizing: border-box;
}
html, body, div {
border: 0 none;
margin: 0;
padding: 0;
}
body { padding-top:150px; }
#pageWrap { position: relative; }
#pageInnerWrap { position: relative; }
div#header { background:#1E4964; color:#fff; font:14px/1.5em Arial, sans-serif; font-weight:600; position:fixed; width:100%; top:0; }
div#header .inner-wrap { max-width:1900px; margin:0 auto; width:95%; padding:0 2.5%; }
div#header a { color:#fff; position:relative; text-decoration: none; }
div#header a:active { top:1px; }
header #page-header-top { background:#000; }
header #page-header-top .inner-wrap { padding-top:10px; padding-bottom:10px; height:40px; text-align:right; overflow: hidden; }
header #page-header-top .inner-wrap a { background:#153447; }
header #page-header-top img { position: relative; top:4px; left:-4px; }
header #page-header-top a:hover { text-decoration: underline; }
header #mobile-btn { display:none; }
header a#logo { float:left; margin:38px 0; }
div#heade ul#nav { float:right; margin:0; }
div#heade ul#nav li { display:inline-block; text-align:center; }
div#heade ul#nav li a { padding:20px 30px; display:inline-block; }
div#heade ul#nav li a:hover { background:#185070; }
div#heade ul#nav li a#active { background:#153447; }
div#heade ul#nav li a img { margin:0 auto 20px; display:block; }
header .clear { clear:both; }
#mobile-nav-items { display:none; }
#mobile-btn { display:none; float:right; margin:35px 0; padding:10px 10px 5px; cursor: pointer; position: relative; }
#mobile-btn:active { top: 1px; }
#media only screen and (max-width : 1200px) {
header ul#nav li a { padding-left:20px; padding-right:20px; }
}
#media only screen and (max-width : 950px) {
header #mobile-btn { display:block; }
header #mobile-btn:hover { background:#153447; }
header #mobile-btn.menu-open { background:#153447; }
header #mobile-btn img { width:20px; }
#mobile-nav-items {
display:block;
}
ul#nav { display: none; }
}
/* change on scroll */
div#header,
div#header * {
-webkit-transition: all 0.3s ease-in;
-moz-transition: all 0.3s ease-in;
-o-transition: all 0.3s ease-in;
transition: all 0.3s ease-in;
}
header.scrolled #page-header-top .inner-wrap { height:0; padding-top:0; padding-bottom:0; }
header.scrolled a#logo { margin:12px 0 5px; }
header.scrolled ul#nav li a img { height:0; margin:0; }
header.scrolled #mobile-btn { margin:10px 0 3
px; }
Not surprised you have a problem with this code, get your indentation right, I think you're missing a closing </div> and there's a missing quotation mark:
<div style= "visibility:hidden;>
I tried to clean it up, but gave up, only you know which part should be where.
For example put siblings on the same tabulation level:
<div id="header" class="push">
<div class="inner-wrap">
<a id="A2" href="Home.aspx"><img src="/images/logo_new.png" alt="Azi Map" /></a>
<div style="position:relative;float:right">
...
</div>
...
<div />
</div>
</div>
Also on SO, you need 4 spaces or a tab before your code block, but not more, just look at your question, half of the code is unnecessary leading whitespace.
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 */
}
See the below images:
the website as viewed in chrome
http://i48.tinypic.com/2rr9zf7.png
the website as viewed in dreamweaver:
http://i50.tinypic.com/mcvey9.png
The problem is the carousel doesnt line up with the navbar at the top (see top right).
it seems to be out of line by 1mm
I believe it may have to do something with the navbar (see second image). As you can see the contact button falls below the rest of the buttons.
my theory is that its causing the carousel to be out of alignment.
HTML:
<!DOCTYPE HTML>
<html>
<head>
<link href="../CSS/styles.css" rel="stylesheet" type="text/css">
<link href='http://fonts.googleapis.com/css?family=PT+Sans+Caption' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="outer">
<img src="../Images/webimages/banner top.jpg" />
</div>
<div id="topnav">
<ul id="list-nav">
<li>Home</li>
<li>About Us</li>
<li>Services</li>
<li>Technologies</li>
<li>Contact</li>
</ul>
</div>
<div id="carousel">
<iframe src="../Carousel/HTML/carousel.html" height="280" width="900" scrolling="no" frameborder="0"> </iframe>
</div>
<div id="mainbody">
<div id="bigbuttons">
<img src="../Images/webimages/Meettheteam.jpg">
</div>
</div>
</div>
</body>
</html>
CSS:
/* Reset */
a img {
border: none;
}
html, body {
padding:0;
margin:0;
}
a {
text-decoration: none;
}
ul, li {
list-style-type: none;
}
img.floatLeft {
float: left;
margin: 0px;
}
*
{
margin: 0;
padding: 0;
}
body {background-color:#F1F1F1; }
#outer { width: 900px; margin: auto; }
#topnav { width: 900px; margin: auto; }
#mainbody { width: 900px; margin:auto; clear:both; }
#list-nav li{display:inline-block;width:20%;float:left;}
#carousel { width: 900px; height: 280px; margin:auto; clear:both; }
#bigbuttons { width: 220px; height: 80px; margin:auto; margin-top: 9px; clear:both; float:left }
ul#list-nav li a {
text-decoration:none;
font-family:Arial, Helvetica, sans-serif;
padding:5px 0;
width: auto;
background:#999;
color:#eee;
float: left
}
ul#list-nav li a {
text-align:center;
border-left: 1px solid #fff;
width: 100%;
}
ul#list-nav li a:hover {
background:#CCC;
color:#ffff;
}
ul#list-nav li a:hover {
background:#CCC;
color:#ffff;
}
#content-fullwidth { width:100%; }
Check the code for the carousel that you are filling the iframe with. Looks like your issue is there, not with the code you have provided us.