I am running into a bit of trouble trying to get the mid section content div to appear under the top div. What I mean is that the bottom div is overlapping and appearing underneath, or on the bottom of, the top div.
Here are two images and the code to give you a better idea of what I am trying to write:
Here is what it looks like in browser:
Here is what it should look like:
Here is the HTML:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link href="style/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="topBar">
<div id="wrapper">
<!--top left phone number and icon start-->
<div id="leftTop">
<div id="facebookTop">
<a href="#">
<img src="images/facebook-icon.png" alt="GreatOrlandoDiscounts Become our friend on Facebook!" />
</a>
</div>
<p class="topLeftNumber">Call us at: <mark class="orange">1-800-544-7646</mark></p>
</div>
<!--top left phone number and icon end-->
<!--top right phone number and icon start-->
<div id="rightTop">
<div id="twitterTop">
<img src="images/twitter-icon.png" alt="GreatOrlandoDiscounts Follow us on Twitter" />
</div>
<p class="topRightNumber">Call us at: <mark class="orange">1-800-544-7646</mark></p>
</div>
<!--top left phone number and icon end-->
<!--Left nav bar start-->
<div id="leftNavBar">
<!--left nav dropdown start-->
<div id="navBarLeft">
<div id="dropdownContainerLeft">
<div id="menuLeft">
<ul>
<li class="home">HOME</li>
<li class="attractions">THEME PARKS
<ul>
<li class="attractions">Disney</li>
<li class="attractions">Universal Studios</li>
<li class="attractions">SeaWorld</li>
<li class="attractions">Busch Gardens</li>
<li class="attractions">Dinner Shows</li>
</ul>
</li>
<li class="attractions">WATER PARKS
<ul>
<li class="attractions">Disney</li>
<li class="attractions">Universal Studios</li>
<li class="attractions">SeaWorld</li>
<li class="attractions">Busch Gardens</li>
<li class="attractions">Dinner Shows</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<!--left nav dropdown end-->
</div>
<!--Left nav bar end-->
<!--Right nav bar start-->
<div id="rightNavBar">
<!--Right nav dropdown start-->
<div id="navBarRight">
<div id="dropdownContainerRight">
<div id="menuRight">
<ul>
<li class="attractions">DINNER SHOWS
<ul>
<li class="attractions">Disney</li>
<li class="attractions">Universal Studios</li>
<li class="attractions">SeaWorld</li>
<li class="attractions">Busch Gardens</li>
<li class="attractions">Dinner Shows</li>
</ul>
</li>
<li class="attractions">ATTRACTIONS
<ul>
<li class="attractions">Disney</li>
<li class="attractions">Universal Studios</li>
<li class="attractions">SeaWorld</li>
<li class="attractions">Busch Gardens</li>
<li class="attractions">Dinner Shows</li>
</ul>
</li>
<li class="attractions">SERVICES
<ul>
<li class="attractions">Disney</li>
<li class="attractions">Universal Studios</li>
<li class="attractions">SeaWorld</li>
<li class="attractions">Busch Gardens</li>
<li class="attractions">Dinner Shows</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<!--Right nav dropdown end-->
</div>
<!--Right nav bar end-->
<!--Main image start - ONLY CHANGE IMAGE IN INLINE CODE-->
<div id="mainImage">
<img class="main" src="images/main-image.jpg" alt="Discount Walt Disney World Tickets" />
</div>
<!--Main image end-->
<!--Logo start-->
<div id="logo">
<a href="http://www.greatorlandodiscounts.com">
<img src="images/logo.png" alt="Great Orlando Discount Tickets" />
</a>
</div>
<!--Logo end-->
</div>
</div>
<!--Middle section start-->
<div id="midSecWrapper">
<!--midSpacer start-->
<div id="midSpacer"></div>
<!--midSpacer end-->
</div>
<!--Middle section end-->
</body>
</html>
Here is my CSS:
#charset "utf-8";
/* CSS Document */
body {
margin: 0 auto;
background-image:url(../images/body-bg.jpg);
background-repeat:repeat;
}
#topBar {
width: 100%;
height: 58px;
background-image:url(../images/top-bar.png);
background-repeat:repeat-x;
position: relative;
z-index:0;
}
#wrapper {
width: 980px;
height: 501px;
position:relative;
z-index:100;
margin: 0 auto;
}
#logo {
width: 260px;
height: 185px;
position:relative;
z-index:999;
margin: 0 auto;
}
#leftTop {
width: 350px;
height: 58px;
float: left;
z-index:200;
}
#rightTop {
width: 360px;
height: 58px;
float: right;
z-index:300;
}
#mainImage {
width: 980px;
height: 401px;
float: left;
clear: left;
position: absolute;
z-index: -100;
margin-top: 100px;
left: 0px;
top: -2px;
}
#facebookTop {
float:left;
margin: 4px 10px 0px 0px;
}
#twitterTop {
float:right;
margin: 4px 0px 0px 10px;
}
#leftNavBar {
width: 340px;
height: 40px;
float: left;
clear: both;
z-index:600;
}
#rightNavBar {
width: 360px;
height: 40px;
float: right;
clear: right;
z-index:700;
}
#midSecWrapper {
margin: 0 auto;
width: 980px;
height: 501px;
}
#midSpacer {
width: 980px;
height: 30px;
background-image:url(../images/spacer.png);
background-repeat:repeat-x;
}
.topLeftNumber {
font-family:"Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
font-size: 18px;
font-weight:bold;
color: #e1ebf4;
margin-top: 15px;
}
.topRightNumber {
font-family:"Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
font-size: 18px;
font-weight:bold;
color: #e1ebf4;
margin-top: 15px;
text-align:right;
}
mark.orange {
color:#fa7252;
background: none;
}
.twitterTop {
}
/*Nav bar style left*/
#menuLeft {
padding: 5px 0px 0px 0px;
margin:0;
}
#menuLeft ul{
padding:0;
margin:0;
}
#menuLeft li{
position: relative;
float: left;
list-style: none;
margin: 0;
padding:0;
}
#menuLeft li a{
font-size: 12px;
width:110px;
height: 30px;
display: block;
text-decoration:none;
text-align: center;
line-height: 30px;
font-family: Arial, Helvetica, sans-serif;
text-shadow: 1px 1px 2px #9d9d9d;
color: #454f54;
}
#menuLeft li a:hover{
background-image: url(../images/nav-hover-bg.jpg);
color: #fa7252; background-color: #e1ebf4;
}
#menuLeft ul ul{
position: absolute;
top: 30px;
visibility: hidden;
background-color: #e1ebf4;
color: #22293c;
}
#menuLeft ul li:hover ul{
visibility:visible;
color: #22293c;
}
/*Nav Bar Style left end*/
/*Nav bar style right*/
#menuRight {
padding: 5px 0px 0px 0px;
margin:0;
}
#menuRight ul{
padding:0;
margin:0;
}
#menuRight li{
position: relative;
float: left;
list-style: none;
margin: 0;
padding:0;
}
#menuRight li a{
font-size: 12px;
width:120px;
height: 30px;
display: block;
text-decoration:none;
text-align: center;
line-height: 30px;
font-family: Arial, Helvetica, sans-serif;
text-shadow: 1px 1px 2px #9d9d9d;
color: #454f54;
}
#menuRight li a:hover{
background-image: url(../images/nav-hover-bg.jpg);
color: #fff; background-color: #e1ebf4;
}
#menuRight ul ul{
position: absolute;
top: 30px;
visibility: hidden;
background-color: #e1ebf4;
color: #22293c;
}
#menuRight ul li:hover ul{
visibility:visible;
color: #22293c;
}
/*Nav Bar Style right end*/
Looks like you did not set
clear:both;
so the bar is floating up
if you can provide the url then i can tell you exactly which/where to add
I see you set the top's bar position as relative but relative to what?: you dont't specify a top, left, right nor a bottom relative amount. Also, you should set your midSecWrapper's clear property to both:
#topBar {
width: 100%;
height: 58px;
background-image:url(../images/top-bar.png);
background-repeat:repeat-x;
/* position: relative; */
z-index:0;
float: left;
}
#wrapper {
width: 980px;
height: 501px;
/* position:relative; */
z-index:100;
margin: 0 auto;
float: left;
}
#midSecWrapper {
margin: 0 auto;
width: 980px;
height: 501px;
clear: both;
}
You can test it with this fiddle.
I posted this in the comment section, but I thought I would post it as an answer. I may be a solution and possibly help someone else out with a similar problem.
I was actually able to make it work by putting a #wrapperContainer around the entire top div. I set it like this:
wrapperContainer {
margin: 0 auto;
width:100%;
height:505px;
}
That contained all of the elements and allowed me to drop the midSecWrapper in place under the image.
Is that good, or good code, or is there a "right way" to do it? I always assumed that if the site functions the way I want it to and it validates, it is good to go.
Related
When I zoom in my page, all the elements go to left side, they are not collapsed but i want the web page to be on center when I zoom. I have made a container class and added a margin:auto to it bu it does not change anymore. Hope somebody answer it exactly.
#font-face {
font-family: irsans;
src:url('../fonts/irsans.woff2');
}
body{
margin:0;
}
.container{
margin:0 auto;
max-width:100%; /* requierd width */
background:red;
}
header {
width: 100%;
margin: auto;
height: 150px;
background-color: #FCFCFC;
}
.topnav{
position: absolute;
left: 334px;
top: 2px;
width: 552px;
height: 18px;
display: inline-block;
}
.topnav_items a{
margin: 2px;
font-size: 11px;
font-family: irsans;
color: #333;
float: left;
list-style: none;
padding: 0 5px;
}
.topnav_items li a:hover, .topnav_items li a:active {
text-decoration: none;
color: #8B9498;
}
<div class="container">
<header>
<div class="topnav">
<ul class="topnav_items">
<li class="fa fa-envelope-o" style="font-size:11px;">ارتباط با برنامه</li>
<li class="fa fa-bar-chart" style="font-size:11px;">پیش بینی مسابقات</li>
<li class="fa fa-desktop" style="font-size:11px;">تبلیغات</li>
<li class="fa fa-download" style="font-size:11px;">نرم افزار مسابقات پیامکی 90</li>
</ul>
</div>
</header>
</div>
Put your container(better call it wrapper) insidw the header.
Give the Container a fixed with using the with of ur topnav.
put margin to margin: 0 auto;
tkae out all atribute related to position: absolut from ur topnav.
(If ur not happ with the result u can also try to give container a relative with. For example with: 50% margin: 0 25%;)
<header>
<div class="container">
<div class="topnav">
<ul class="topnav_items">
<li class="fa fa-envelope-o" style="font-size:11px;">ارتباط با برنامه</li>
<li class="fa fa-bar-chart" style="font-size:11px;">پیش بینی مسابقات</li>
<li class="fa fa-desktop" style="font-size:11px;">تبلیغات</li>
<li class="fa fa-download" style="font-size:11px;">نرم افزار مسابقات پیامکی 90</li>
</ul>
</div>
</div>
</header>
#font-face {
font-family: irsans;
src:url('../fonts/irsans.woff2');
}
body{
margin:0;
}
.container {
margin: 0 25%;
max-width: 552px;
}
header {
width: 100%;
margin: auto;
height: 150px;
background-color: #FCFCFC;
}
.topnav {
width: 100%;
height: 18px;
display: inline-block;
}
.topnav_items a{
margin: 2px;
font-size: 11px;
font-family: irsans;
color: #333;
float: left;
list-style: none;
padding: 0 5px;
}
.topnav_items li a:hover, .topnav_items li a:active {
text-decoration: none;
color: #8B9498;
}
When I try to minimize this page/resize it to a size smaller than my screen, espicially when it is minimized in a vertical manner (where the height of the page is longer than the width) the footer becomes blank/white and the background-image becomes shorter.
Take a look here.
<!DOCTYPE html>
<html>
<head>
<link href="style2.css" type="text/css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Cinzel" rel="stylesheet">
<script src="https://use.fontawesome.com/4c228f39e6.js"></script>
<title>Magna Golf</title>
</head>
<body>
<nav class = "top-navigator">
<div class ="float-left">Magna Golf</div>
<div class ="float-right">
<ul>
<li class ="navi-links">Contact Us</li>
<li class ="navi-links"> Members Login</li>
<li class ="navi-links">About Us</li>
<li class ="navi-links">Guests</li>
<li class ="navi-links">Adena Meadows</li>
</ul>
</div>
</nav>
<div class = "center-container">
<div class ="logo"><img src ="horse.png" alt="Magna Golf Logo>" width="130px"</img>
</div>
<div class ="footer">
<div class="footer-text">Check Us out on Social Media
</div>
<div class="footer-social">
<ul>
<li class="social-links"><a class = "social" href="#" target="_blank">Facebook</a></li>
<li class="social-links"><a class = "social" href="#" target="_blank">Twitter</a></li>
<li class="social-links"><a class = "social" href="#" target="_blank">Instagram</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
CSS---
*{
margin:0;
padding:0;
box-sizing: border-box;
}
body{
}
a{
color:gold;
text-decoration: none;
}
a:hover{
color:white;
}
.top-navigator{
width:100%;
height:50px;
background-color:rgba(0,0,0,0.4);
backgroud-color:grey;
}
.float-left{
color:gold;
font-family:Cinzel, serif;
letter-spacing: 0.1em;
word-spacing: 0.0em;
width:160px;
font-size:20px;
position:relative;
top:25%;
margin-left:4%;
}
.float-right{
font-family:Cinzel, serif;
text-transform:lowercase;
font-size:12px;
width:530px;
position:relative;
margin-left:58%;
bottom:20%;
}
.navi-links{
display:inline;
margin-left:25px;
}
.center-container{
width:100%;
height:calc(100vh - 50px);
background-image:url("http://magnagolf.com/images/slideshow/bgd3.jpg"); background-size:100%;
background-repeat: no-repeat;
}
.logo{
width:75px;
position:relative;
margin:0 auto;
top:12px;
}
.footer{
width:100%;
position:absolute;
height:20px;
bottom:0; /*to get footer to sick to bottom*/
/*
background-color:rgba(0,0,0,0.4);
*/
}
.footer-text{
width:300px;
height:20px;
text-align:center;
font-family:Cinzel, serif;
font-size:14px;
color:white;
position:relative;
margin-Left:1%;
}
.footer-social{
font-family:Cinzel, serif;
font-size:13px;
width:260px;
position:relative;
bottom:23px;
margin-left:78%;
}
.social-links{
display:inline;
color:white;
margin-left:15px;
}
.social{
color:white;
}
The background image is a url so take sometime to post the code in your editor to see what I mean.
Cheers friends,
Because .center-container's background isn't covering the whole div when the viewport is narrow. Your footer doesn't become blank... it's just positioned over a white background when .center-container's background image doesn't cover the bottom of that element, so the white text/links in the footer on top of a white background means you can't see the contents of the footer.
Changing the background to background-size: cover will ensure the background is applied to the whole div regardless of the shape of .center-container when you resize the window.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {}
a {
color: gold;
text-decoration: none;
}
a:hover {
color: white;
}
.top-navigator {
width: 100%;
height: 50px;
background-color: rgba(0, 0, 0, 0.4);
backgroud-color: grey;
}
.float-left {
color: gold;
font-family: Cinzel, serif;
letter-spacing: 0.1em;
word-spacing: 0.0em;
width: 160px;
font-size: 20px;
position: relative;
top: 25%;
margin-left: 4%;
}
.float-right {
font-family: Cinzel, serif;
text-transform: lowercase;
font-size: 12px;
width: 530px;
position: relative;
margin-left: 58%;
bottom: 20%;
}
.navi-links {
display: inline;
margin-left: 25px;
}
.center-container {
width: 100%;
height: calc(100vh - 50px);
background-image: url("http://magnagolf.com/images/slideshow/bgd3.jpg");
background-size: cover;
background-repeat: no-repeat;
}
.logo {
width: 75px;
position: relative;
margin: 0 auto;
top: 12px;
}
.footer {
width: 100%;
position: absolute;
height: 20px;
bottom: 0;
/*to get footer to sick to bottom*/
/*
background-color:rgba(0,0,0,0.4);
*/
}
.footer-text {
width: 300px;
height: 20px;
text-align: center;
font-family: Cinzel, serif;
font-size: 14px;
color: white;
position: relative;
margin-Left: 1%;
}
.footer-social {
font-family: Cinzel, serif;
font-size: 13px;
width: 260px;
position: relative;
bottom: 23px;
margin-left: 78%;
}
.social-links {
display: inline;
color: white;
margin-left: 15px;
}
.social {
color: white;
}
<!DOCTYPE html>
<html>
<head>
<link href="style2.css" type="text/css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Cinzel" rel="stylesheet">
<script src="https://use.fontawesome.com/4c228f39e6.js"></script>
<title>Magna Golf</title>
</head>
<body>
<nav class="top-navigator">
<div class="float-left">Magna Golf</div>
<div class="float-right">
<ul>
<li class="navi-links">Contact Us</li>
<li class="navi-links"> Members Login</li>
<li class="navi-links">About Us</li>
<li class="navi-links">Guests</li>
<li class="navi-links">Adena Meadows</li>
</ul>
</div>
</nav>
<div class="center-container">
<div class="logo"><img src="horse.png" alt="Magna Golf Logo>" width="130px" </img>
</div>
<div class="footer">
<div class="footer-text">Check Us out on Social Media
</div>
<div class="footer-social">
<ul>
<li class="social-links"><a class="social" href="#" target="_blank">Facebook</a></li>
<li class="social-links"><a class="social" href="#" target="_blank">Twitter</a></li>
<li class="social-links"><a class="social" href="#" target="_blank">Instagram</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
Your Problem
The background image is a landscape image. Resizing the page will resize the image, but only within it's proportions (it is constrained).
When you resize to an area where the image will not cover some of the page, the footer (with white text) will appear on top of the page background (which is white), and thus the text will seem to "disappear".
Solutions
One way to solve this is to add the background-size:cover style to .container_center, to turn off the constraints on image resizing, and just make it fill the visible area. Note that in some situations, this will crop the image, and for people with really big monitors, it may appear stretched.
However, you could (and should) also make a mobile site view using media queries, and simply change the overall look of your site at that point - some of your links disappear at smaller screen widths...
I want to make a website and I am paragraphs with border. I tried margin on css but doesn't work. How to make paragraph margin on this?
This is my HTML code:
body{
margin:0px;
font-family:Calibri;
background-color:#58d68d ;
}
/* Navigation Bar */
ul{
margin:0px;
padding:0px;
overflow:hidden;
background-color:white;
top:0px;
width:100%;
}
li.brand{
margin-left:100px;
}
li.active{
background-color:#FAFAFA;
}
li.right{
float:right;
}
li.right-space{
float:right;
margin-right:100px;
}
li{
float: left;
}
li, a{
font-size:18px;
display:block;
color:#58d68d;
text-align:center;
padding:7px 12px;
text-decoration:none;
transition:0.4s;
}
li:hover, a:hover{
background-color:#FAFAFA;
}
/* Intro */
h1{
margin-top:20px;
margin-left:100px;
font-size:100px;
color:white;
margin-bottom:0px;
}
h2{
margin-top:0px;
margin-bottom:50px;
margin-left:100px;
color:white;
max-width:1000px;
opacity:0.7;
}
/* Packs Section */
div.packs{
width:100%;
height:500px;
background-color:white;
}
p{
margin:50px;
display:inline;
padding:7px 12px;
border-left:6px solid red;
background-color:lightgrey;
}
<!-- Navigation Bar -->
<nav>
<ul>
<!-- Left -->
<li class="brand">Packet.ml</li>
<li class="active">About</li>
<!-- Right -->
<li class="right-space">Application</li>
<li class="right">Download</li>
<li class="right">Packets</li>
</ul>
</nav>
<!-- Intro -->
<header>
<h1>Packet</h1>
<h2>Any application, software programm or game in one place! Packets everywhere!</h2>
</header>
<!-- Packs Section -->
<section>
<div class="packs">
<p>Edition Packet</p>
<p>Full Packet</p>
<p>User Pro Packet</p>
</div>
</section>
I tried margin:50px;, but not work. This command action only on margin-left and right.
Any ideas?
marginwon't work in inline elements, which you are setting the p so set p as inline-block
body {
margin: 0px;
font-family: Calibri;
background-color: #58d68d;
}
/* Navigation Bar */
ul {
margin: 0px;
padding: 0px;
overflow: hidden;
background-color: white;
top: 0px;
width: 100%;
}
li.brand {
margin-left: 100px;
}
li.active {
background-color: #FAFAFA;
}
li.right {
float: right;
}
li.right-space {
float: right;
margin-right: 100px;
}
li {
float: left;
}
li,
a {
font-size: 18px;
display: block;
color: #58d68d;
text-align: center;
padding: 7px 12px;
text-decoration: none;
transition: 0.4s;
}
li:hover,
a:hover {
background-color: #FAFAFA;
}
/* Intro */
h1 {
margin-top: 20px;
margin-left: 100px;
font-size: 100px;
color: white;
margin-bottom: 0px;
}
h2 {
margin-top: 0px;
margin-bottom: 50px;
margin-left: 100px;
color: white;
max-width: 1000px;
opacity: 0.7;
}
/* Packs Section */
div.packs {
width: 100%;
height: 500px;
background-color: white;
}
p {
margin: 50px;
display: inline-block;
padding: 7px 12px;
border-left: 6px solid red;
background-color: lightgrey;
}
<!-- Navigation Bar -->
<nav>
<ul>
<!-- Left -->
<li class="brand">Packet.ml
</li>
<li class="active">About
</li>
<!-- Right -->
<li class="right-space">Application
</li>
<li class="right">Download
</li>
<li class="right">Packets
</li>
</ul>
</nav>
<!-- Intro -->
<header>
<h1>Packet</h1>
<h2>Any application, software programm or game in one place! Packets everywhere!</h2>
</header>
<!-- Packs Section -->
<section>
<div class="packs">
<p>Edition Packet</p>
<p>Full Packet</p>
<p>User Pro Packet</p>
</div>
</section>
You are using display: inline; for paragraphs, try display: inline-block; instead.
Here is an working example:
body {
margin: 0px;
font-family: Calibri;
background-color: #58d68d;
}
/* Navigation Bar */
ul {
margin: 0px;
padding: 0px;
overflow: hidden;
background-color: white;
top: 0px;
width: 100%;
}
li.brand {
margin-left: 100px;
}
li.active {
background-color: #FAFAFA;
}
li.right {
float: right;
}
li.right-space {
float: right;
margin-right: 100px;
}
li {
float: left;
}
li,
a {
font-size: 18px;
display: block;
color: #58d68d;
text-align: center;
padding: 7px 12px;
text-decoration: none;
transition: 0.4s;
}
li:hover,
a:hover {
background-color: #FAFAFA;
}
/* Intro */
h1 {
margin-top: 20px;
margin-left: 100px;
font-size: 100px;
color: white;
margin-bottom: 0px;
}
h2 {
margin-top: 0px;
margin-bottom: 50px;
margin-left: 100px;
color: white;
max-width: 1000px;
opacity: 0.7;
}
/* Packs Section */
div.packs {
width: 100%;
height: 500px;
background-color: white;
}
p {
margin: 50px;
display: inline-block;
padding: 7px 12px;
border-left: 6px solid red;
background-color: lightgrey;
}
<!DOCTYPE HTML>
<html lang="en-us">
<head>
<title>Packet</title>
<!-- PLUGINS -->
<link rel="icon" href="packet.ico" />
<script src="plugin/mobile.js"></script>
<link rel="stylesheet" type="text/css" href="plugin/packet.css">
</head>
<body>
<!-- Navigation Bar -->
<nav>
<ul>
<!-- Left -->
<li class="brand">Packet.ml
</li>
<li class="active">About
</li>
<!-- Right -->
<li class="right-space">Application
</li>
<li class="right">Download
</li>
<li class="right">Packets
</li>
</ul>
</nav>
<!-- Intro -->
<header>
<h1>Packet</h1>
<h2>Any application, software programm or game in one place! Packets everywhere!</h2>
</header>
<!-- Packs Section -->
<section>
<div class="packs">
<p>Edition Packet</p>
<p>Full Packet</p>
<p>User Pro Packet</p>
</div>
</section>
</body>
</html>
here i try to fix submenu .. when i drag cursor on menu then the image slider which is below the menu goes down..
HERE IS IMAGE 1
and when i hover mouse on menu then look like this
image2
code
/* CSS Document */
body{
padding:0px;
margin:0px;
}
img{
border:0px;
}
.flt{
float:left;
}
#wh_bg{
width:1000px;
margin:auto;
}
#bg_bg{
width:1000px;
float:left;
margin-left: -40px;
margin-top: -50px;
}
/*top panel starts here*/
#top{
width:1000px;
float:left;
}
.top1{
width:500px;
float:left;
height:176px;
display:inline;
background:url(../images/top1.jpg) no-repeat;
}
.logo{
float:left;
margin:89px 0px 0px -15px;
position:relative;
top: 0px;
left: 0px;
}
#menu{
width:1000px;
float:left;
height:56px;
}
.men_tp{
width:900px;
float:left;
display:inline;
padding:24px 0px 0px 70px;
}
.men_tp a{
float:left;
color:#686666;
font:bold 12px/15px tahoma;
text-decoration:none;
margin-left:25px;
}
.contecntA {
width: 400px;
height: 480px;
padding-top: 60px;
font-family: Candara;
font-variant: normal;
}
.contPersz {
width: 990px;
height: 900px;
margin-bottom: 10px;
margin-top: 210px;
padding-right: 10px;
margin-left:70px;
}
.imggsas
{
margin-left: 40px;
width:240%;
margin-top: -30px;
}
.img_wrperas
{
background-image:url("images/Malaysian-Flag.png");
width: 1050px;
height: 562px;
margin-bottom: 10px;
margin-top: -90px;
margin-left: 35px;
}
.corporate
{
background-image:url("images/Malaysian-Flag.png");
width: 1050px;
height: 562px;
margin-bottom: 10px;
margin-top: 80px;
margin-left: 35px;
}
.wrap {
width: 100%; /* Spans the width of the page */
height: 40px;
margin: 0; /* Ensures there is no space between sides of the screen and the menu */
z-index: 99; /* Makes sure that your menu remains on top of other page elements */
position: relative;
background-color: #366b82;
}
.navbar {
height: 50px;
border-right: 1px solid #54879d;
width: 109%;
margin: 0px;
padding: 0px;
}
.navbar li {
height: auto;
width: 131px;
/* Each menu item is 150px wide */
float: left;
/* This lines up the menu items horizontally */
text-align: center;
/* All text is placed in the center of the box */
list-style: none;
/* Removes the default styling (bullets) for the list */
font: normal bold 12px/1.2em Arial, Verdana, Helvetica;
padding: 0;
margin: 0;
background-color: #366b82;
}
.navbar a {
padding: 18px 0;
/* Adds a padding on the top and bottom so the text appears centered vertically */
border-left: 1px solid #54879d;
/* Creates a border in a slightly lighter shade of blue than the background. Combined with the right border, this creates a nice effect. */
border-right: 1px solid #1f5065;
/* Creates a border in a slightly darker shade of blue than the background. Combined with the left border, this creates a nice effect. */
text-decoration: none;
/* Removes the default hyperlink styling. */
color: white;
/* Text color is white */
display: block;
}
.navbar li:hover, a:hover {
background-color: #54879d;
}
.navbar li ul {
display: none;
/* Hides the drop-down menu */
height: auto;
margin: 0;
/* Aligns drop-down box underneath the menu item */
padding: 0;
/* Aligns drop-down box underneath the menu item */
}
.navbar li:hover ul {
display: block;
/* Displays the drop-down box when the menu item is hovered over */
}
.navbar li ul li {
background-color: #54879d;
}
.navbar li ul li a {
border-left: 1px solid #1f5065;
border-right: 1px solid #1f5065;
border-top: 1px solid #74a3b7;
border-bottom: 1px solid #1f5065;
}
.navbar li ul li a:hover {
background-color: #366b82;
}
/*i add this css code for link box*/
.navbar li ul li ul li {
margin-top:-50px;
margin-left:130px;
display:block;
}
.b:hover .a {
visibility:visible;
display:block;
}
.a {
margin-top:-5px;
visibility:hidden;
display:none;
}
.topnaviation
{
float:right;
display:inline-block;
margin-right: 400px;
}
div.topnaviationleft ul {
list-style: none outside none;
margin-left: 0px;
display:inline-block;
}
div.topnaviationleft li {
float: left;
}
.indxim
{
width:1050px;
height:800px;
margin-top: -20px;
}
.blankSeparator {
margin:10px 0;
display: block;
}
<body>
<div id="headerrrr">
<ul>
<li>Home</li>
<li>About Us</li>
<li>+603 2201 1665</li>
</ul>
</div>
<div id="wh_bg">
<div id="bg_bg">
<div><img class="logo" src="images/logo.png" alt="" width="320" height="60" /></div>
<div class="social">
<ul>
<li>Connect US :</li>
<li><img src="images/fb.jpg" alt="facebook" /></li>
<li><a><img src="images/linkde.jpg" alt="facebook" /></a></li>
</ul>
</div>
<div id="wrap">
<ul class="navbar">
<li>HOME</li>
<li>ABOUT US
<ul id="Ul1">
<li><a id="A1" href="Company_Profile.html">Company Profile</a></li>
<li>Our Philsohpy</li>
<li>CEO Profile</li>
<li>Board of Directors</li>
<li>Our People</li>
<li>Global Partnership</li>
<li>Career</li>
</ul>
</li>
<li>TRAINING
<ul id="Ul2">
<li><a id="A2" href="Academics.html">Academics</a></li>
<li>Corporate</li>
<li>Our Personnel</li>
</ul>
</li>
<li>PUBLISHING </li>
<li>CONFERENCES</li>
<li>EXHIBITION</li>
<li>RESEARCH
<ul id="subnavlist">
<li class="b"><a id="subcurrent" href="About_gjbssr.html">About GJBSSR</a>
<ul class="c">
<li class="a"> Link
</li>
</ul>
</li>
<li>Data Collection Services
</li>
<li>Editing & Proof Reading
</li>
</ul>
</li>
<li id="active">CONTACT US
</li>
</ul>
</div>
<div align="center">
<img class="imaeslidr" src="images/Slider Animation/Slider2.gif" alt="" width="1050" height="375" />
</div>
<div class="blankSeparator"> </div>
<div class="indxim" style="background-image: url('images/Malaysian-Flag.png'); width: 1050px; height: 800px;">
<div class="contecntA ">
<div class="indpara">
<h2 class="hindx">About US</h2>
<p class="paraindex"><strong>Global Academy of Training and Research</strong> is a consulting firm that offers training and research services in whole disciplinesof studies. Its goal is to provide a platform for Young Scholar, Academic & Corporate Researcher, and Trainers to discuss and frame strategies for the betterment of their goals and organization success...</p>
<h2 class="hindx">Training</h2>
<p class="paraindex"><strong>Global Academy of Training and Research</strong> offers broad range of academic and corporate Seminar programs for all public and private sector Universities and Companies. Global Academy of Training and Research goals is to uplift individual’s skills...</p>
<h2 class="hindx">Research</h2>
<p class="paraindex"><strong>Global Academy of Training and Research </strong>provides customized information and research collation to bring innovative and provocative insight into any emerging agenda for our clients. We excel in delivering insight needed to perform....</p>
</div>
<div class="sidebar">
<h2 class="indxparaz">HOT LINKS</h2>
<ul class="sidebar">
<li>Up Coming Events</li>
<li>Membership</li>
<li>Registration</li>
<li>Our Personnel</li>
<li>Gallery</li>
</ul>
<br /><br />
<h2 class="indxparaz2">Our Personnel</h2>
<span class="con_txtslider"> <img src="images/personeslider.gif" alt="" /> </span></div>
</div>
</div>
<div class="blankSeparator"> </div>
<div class="footer22">
<h2 class="footerhead">Newsletter</h2>
<hr /><input id="Text1" class="footertxt" type="text" /><br /> <input id="Submit1" class="footerbutton" type="submit" value="submit" />
<div>
<h2 class="footerhead1">UpComing Events</h2>
<div class="foopara2"><a class="eventss" href="Upcomngevents.html">Events Available</a></div>
</div>
<h2 class="footerhead2">Contact Us</h2>
<div class="foopara">Call now to find out how: +603 2201 1665 info#gatrenterprise.com</div>
<br /><br />
<div class="ffpara">
<p class="ffpara">© Copyright 2014, Global Acdemy of Training & Research</p>
</div>
<div class="ffpara2">
<p class="ffpara2">T: +603 2201 1665 E:info#gatrenterprise.com</p>
</div>
</div>
</div>
</div>
</body>
</html>
so how i fix this menu and submenu ??
Add this properties to your #headerrrr and #wrap:
Always in the top of screen:
#wrap{
position:fixed;
top:0;
}
In the top of the website:
#wrap{
absolute;
top:0;
}
I made this : jsfiddle Demo
I have the line :
<div id="footer">
<h1><a class="link" href="http://www.centerwow.com">mysite</a></h1>
</div>
How can I center the link mysite in the div footer on the center. width and height it Should be under about(menu).
I try to put position absolute and relative and somehow I destroyed something else.
thanks for any help.
my code:
body {
background: #CC3366 url(images/temp.png) center 130px no-repeat ;
overflow:hidden;
font-family: Arial;
font-size: 30px;
line-height: 32px;
}
#container {
width: 1000px;
overflow: hidden;
position: relative;
height: 450px;
margin: 0 auto;
}
#all_pages {
position: absolute;
left: 0;
top: 0;
width: 3000px;
}
.page {
width: 1000px;
height: 400px;
float: left;
text-align: center;
margin-top: 50px;
}
.page img {
margin-top: 50px;
}
#menu {
background: #000;
}
#menu ul {
list-style: none;
width: 457px;
height: 35px;
margin:auto;
}
#menu ul li {
float: left;
color: #888;
width: 150px;
line-height: 35px;
text-align: center;
cursor: pointer;
}
.active {
color: #fff !important;
}
h1 a {
color: #000000;
text-decoration: none;
}
#footer a{
position:absolute;
bottom:80px;
margin: 0 auto;
}
#footer{
position:relative;
background: #CC3366;
width:100%;
height:1000px;
}
<h1><a class="link" style="position:absolute; left:30px; top:30px;" href="http://www.centerwow.com">portfolio</a></h1>
<div id="container">
<div id="all_pages">
<div class="page">
<h1>Home Page</h1>
<img src="images/home.png" width="300">
</div> <!-- page1 -->
<div class="page">
<h1>About Us Page</h1>
<img src="images/about.png" width="300">
</div> <!-- page2 -->
<div class="page">
<h1>Contact Us Page</h1>
<img src="images/contact.png" width="300">
</div> <!-- page2 -->
</div> <!-- #all_pages -->
</div> <!-- #container -->
<div id="menu">
<ul>
<li id="1" class="link CC3366 active">Home</li>
<li id="2" class="link 33FF66">About</li>
<li id="3" class="link FFFF33">Contact Us</li>
</ul>
</div> <!-- #menu -->
<div id="footer">
<h1><a class="link" href="http://www.centerwow.com">mysite</a></h1>
</div>
Is something like this Fiddle what you're looking for?
Try this:
position :relative
top:50% ;
Left:50%;
works or not?