I'm not entirely sure how I managed to jack this up.
http://pretty-senshi.com
If you take a look at that, where the left item and right item are, the right item is sticking out for whatever reason, so I think I'm doing something wrong. Or maybe my coding/css is jacked up, I'm not entirely sure about the coding anyway, I just know it "works" somewhat. See below.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US"><br />
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Pretty Senshi - Sailor Moon </title>
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
<link rel="stylesheet"
href="http://pretty-senshi.com/log/wp-content/themes/BLANK-Theme/style.css"
type="text/css" />
<link rel="pingback" href="http://pretty-senshi.com/log/xmlrpc.php" />
</head>
<body class="home blog logged-in admin-bar">
<body>
<div id="container">
<div id="rightHalf"></div>
<div style="text-align: center;"><caption>
<img src="http://pretty-senshi.com/images/design.png" alt="text" id="picture">
</caption></div>
<div id="wrapper"><div id="leftcolumn">
<div class="headernav">Navigation</div>
About Us<br>
Gallery<br>
Links In/Out<br>
</div>
<div id="content">
<div class="post-1 post type-post status-publish
format-standard hentry category-uncategorized" id="post-1"></div>
<div class="header">Welcome</div>
<div class="entry">
<p>The site isn’t ready yet. This site is not ONLY dedicated to
Sailor Moon but to all anime.</p>
<div id="commentbar">
<div class="left">left stuff</div>
<div class="right">right stuff</div></div>
</div>
<div id="footer"></div>
</body>
</html>
And here is the CSS to it:
/*
Theme Name: Pretty Senshi
Theme URI: http://pretty-senshi.com
Description:
Author: Megan Riffey
Author URI: http://hateyourway.org
Version: 1
*/
body {background: url(http://pretty-senshi.com/images/sideone.png);
background-repeat:repeat-x;background-color: #fcefd8;
margin-top:0px;line-height: 20px;font-size: 10.5pt;
font-family: Tahoma;color:#998574;}
div#container {
width:100%;z-index: -1;}
.header {font-weight: bold;
font-size: 14px;
color: #D4556A;
FONT-FAMILY: verdana;
text-align: justify;
letter-spacing: 0px;
line-height: 25px;
background: url(http://pretty-senshi.com/images/header.png) left no-repeat;
padding-right:3px;
padding-left: 10px;
padding-bottom: 3px;
padding-top: 3px;
text-align:center;}
.headernav {font-weight: bold;
font-size: 13px;
color: #D4556A;
FONT-FAMILY: verdana;
text-align: justify;
letter-spacing: 0px;
line-height: 25px;
background: url(http://pretty-senshi.com/images/header.png) left no-repeat;
padding-right:20px;
padding-left: 3px;
padding-bottom: 3px;
padding-top: 3px;
text-align:right;}
.header:first-letter {color:#b970be;}
.headernav:first-letter {color:#b970be;}
div#picture {z-index: -1;width:780px;margin: 0 auto;text-align:center;}
#rightHalf {
background: url(http://pretty-senshi.com/images/sidetwo.png);
background-repeat:repeat-x;
width: 50%;
position: absolute;
right: 0px;
height: 100%;
z-index: -1;}
p {padding: 10px;z-index: 1;}
#wrapper {position:relative;
margin:0 auto;
width: 650px;
height:100%;}
#content {
float: right;
text-align:justify;margin-top:-80px;
width: 440px;z-index: 999;height:100%;}
#leftcolumn {position:absolute;
text-align:justify;
width: 200px;margin-top:-80px;
float: left;z-index: 999;height:100%;}
#commentbar {width:100%;padding:10px;}
.left {float:left; width:50%;}
.right {float:right; width:50%;text-align:right;}
A:link, A:visited, A:active {
color:#175f8b;
text-decoration:none;
text-transform:uppercase;
font-size: 9pt;
font-weight:bold;}
A:hover{
color:#d76b92;
text-decoration:none;
text-transform:uppercase;
cursor:default;
border-bottom: 1px solid #7d8f9a;
font-weight:bold;}
#date
{font:10pt "Century Gothic", sans-serif;
border-top:2px solid #d4aabc;
margin-top:10px;
color:#7ea558;
text-align:right;
font-weight:bold;
text-transform:uppercase;}
div.comment a {
width:100px
float:left;
height:22px;
background-color:#72a2c6;
text-align:center;
display:block;
letter-spacing:0px;
text-shadow:none;
text-transform:uppercase;
margin-top:-16px;
padding:3px;
opacity:.8;
filter:alpha(opacity=80);
filter:"alpha(opacity=80)";}
What can I add or change to make it align with the body text?
It is because you are using padding: 10px; in #commentbar, just remove it and you are good to go..and secondly just saw this that you are also using padding: 10px; for p in your CSS, so if you remove that too, both things will align exactly same
The padding is causing your mis-alignment...remove the padding in this CSS declaration and it will line up
#commentbar {
width: 100%;
/*padding: 10px;*/
}
Related
I'm just starting with HTML and PHP and I ran into the following problem:
When having a PHP command the webpage shows wrong colors!
With PHP command (<?php phpinfo( ); ?>)
Without PHP command:
It's pretty clear to see that the navbar elements change color, depending on the command, but why?
I can't get this fixed, no matter what I do. Here's my other code:
PHP-Source-File:
<!DOCTYPE HTML>
<html>
<head>
<title>PHP-Info</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<link rel="stylesheet" href="./css/index.css" type="text/css" media="all">
</head>
<body>
<ul class="navbar">
<li class="navbar"><a class="navbar" href="index.php">Home</a></li>
<div style="float: right;">
<li class="navbar"><a class="navbar" href="">Server-Info</a></li>
<li class="navbar"><a class="navbar active" href="phpinfo.php">PHP-Info</a></li>
</div>
</ul>
<div>
<?php phpinfo( ); ?>
</div>
</body>
</html>
Stylesheet:
* {
margin: 0;
padding: 0;
font-family: Tahoma, sans-serif;
font-size: 100%;
}
body {
margin-top: 55px;
}
ul.navbar {
position: fixed;
top: 0;
width: 100%;
height: 5.4%;
list-style-type: none;
overflow: hidden;
background-color: rgba(33, 33, 33, 0.35);
}
li.navbar {
float: left;
}
li a.navbar {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover.navbar {
border-bottom: 4px solid dodgerblue;
}
li a.active.navbar {
background-color: #666666;
border-bottom: 4px solid #666666;
}
In your CSS stylesheet I see you have :hover and :active before your classes. Try switching them around, like this:
li a.navbar:hover {
border-bottom: 4px solid DodgerBlue;
}
li a.navbar:active {
background-color: #666666;
border-bottom: 4px solid #666666;
}
EDIT: Plus you had a period . instead of a colon : before active.
It is also a good idea to capitalize your color names. DodgerBlue instead of dodgerblue. Some browsers are strict about this.
Simply trying to get my page to scroll, simply added 'br' to test. This can be seen in the file below -
<?php
session_start();
if (isset($_GET['logout'])) {
session_destroy();
unset($_SESSION['username']);
header("location: login.php");
}
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<title>Menu Flexbox</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-hQpvDQiCJaD2H465dQfA717v7lu5qHWtDbWNPvaTJ0ID5xnPUlVXnKzq7b8YUkbN" crossorigin="anonymous">
<link rel="stylesheet" href="css/style6.css">
<link rel="shortcut icon" href="images/icons/favicon.png" />
<link href='http://fonts.googleapis.com/css?family=Hind:400,300,600,500,700&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="css/style9.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<script src="js/index.js"></script>
</head>
<body>
<div class="row">
<div class="col-md-2">
<div class="table" id="main">
<div class="table-cell">
<div class="menu">
<div class="menu-item"><i class="fa fa-home"></i><span>Home</span></div>
<div class="menu-item"><i class="fa fa-globe"></i><span>Panel</span></div>
<div class="menu-item"><i class="fa fa-user"></i><span>Profile</span></div>
<div class="menu-item"><i class="fa fa-envelope"></i><span>Support</span></div>
<a class="menu-item" href="index.php?logout='1'"><i class="fa fa-power-off"></i><span>Logout</span></a>
</div>
</div>
</div>
</div>
</div>
<div>
<a target="_blank" style="display: block; position: fixed; bottom: 45px; right: 10px; width: 200px;" href=""><img src="https://i.imgur.com/EV5CGy2.png" alt="logo"/></a>
<a target="_blank" style="display: block; position: fixed; bottom: 15px; right: -24px; width: 200px;" href="http://www.abr.business.gov.au/ABN/View/93742390655"><img src="" alt=""/>ABN: 93 742 390 655</a>
</div>
<div id="wrap1">
<div class="ml-auto pt-5">
<?php if (isset($_SESSION['username'])) : ?>
Welcome, <strong><?php echo $_SESSION['username']; ?></strong>.
<?php endif ?>
</div>
</div>
<div id="wrap">
<br><br><br><h1 style="font-weight: 300; padding-left: 80px">Shopping cart -</h1>
<p style="font-weight: 300; padding-left: 80px ">Check out with your items</p>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
example
<br>
example
<br>
example
<br>
</div>
</body>
<script type="text/javascript">
var Tawk_API=Tawk_API||{}, Tawk_LoadStart=new Date();
(function(){
var s1=document.createElement("script"),s0=document.getElementsByTagName("script")[0];
s1.async=true;
s1.src='https://embed.tawk.to/5b7d1d95afc2c34e96e7ca57/default';
s1.charset='UTF-8';
s1.setAttribute('crossorigin','*');
s0.parentNode.insertBefore(s1,s0);
})();
</script>
<?php if (isset($_SESSION['success'])) : ?>
<div class="error success" >
<h3>
<?php
echo $_SESSION['success'];
unset($_SESSION['success']);
?>
</h3>
</div>
<?php endif ?>
</script>
</html>
enter image description here
I simply can not scroll down -
Please ensure you let me know if you need anything other than what has been provied
CSS -
body{
margin: 0;
overflow: hidden;
}
#main{
position: fixed;
top: 0;
left: 0;
width: 15%;
height: 100%;
background-color: #ddeaf1;
}
.table{
display: table;
width: 100vw;
height: 100vh;
}
.table-cell{
display: table-cell;
vertical-align: middle;
text-align: center;
}
.menu{
background-color: white;
width: 30%;
margin: auto;
display: flex;
align-content: flex-start;
flex-flow: row wrap;
justify-content: space-around;
border-radius: 10px;
-moz-box-shadow: 0px 0px 5px 0px #c0c0c0;
-webkit-box-shadow: 0px 0px 5px 0px #c0c0c0;
-o-box-shadow: 0px 0px 5px 0px #c0c0c0;
box-shadow: 0px 0px 5px 0px #c0c0c0;
filter:progid:DXImageTransform.Microsoft.Shadow(color=#c0c0c0, Direction=NaN, Strength=5);
}
#media all and (max-width: 900px){
.menu{
width: 80%;
}
}
.menu-item{
font-size: 17px;
flex: 1;
padding: 25px;
transition: all .2s;
cursor: pointer;
color: #636363;
background-color: white;
border-radius: 10px;
position: relative;
}
.menu-item > span{
display: block;
position: absolute;
text-transform: uppercase;
font-size: 10px;
font-weight: 200;
color: white;
left: 5px;
right: 5px;
border-radius: 5px;
background-color: #226eab;
padding: 5px;
opacity: 0;
transition: all .2s .1s;
transform: translateY(70px);
z-index: -1;
}
.menu-item:hover{
-moz-box-shadow: 0px 0px 5px 0px #c0c0c0;
-webkit-box-shadow: 0px 0px 5px 0px #c0c0c0;
-o-box-shadow: 0px 0px 5px 0px #c0c0c0;
box-shadow: 0px 0px 5px 0px #c0c0c0;
filter:progid:DXImageTransform.Microsoft.Shadow(color=#c0c0c0, Direction=NaN, Strength=5);
flex: 2;
color: #226eab;
transform: scale(1.1);
z-index: 3;
}
.menu-item:hover > span{
transform: translateY(35px);
opacity: 1;
}
#wrap{
width: 95%;
min-width: 900px;
margin-left: 18%;
}
#wrap1{
width: 95%;
min-width: 900px;
margin-left: 80%;
}
Any suggestions would be greatly appreciated, this is my first project so don't judge to hard :)
Remove overflow: hidden; from your CSS body element. If you do not want to let page elements cause your page to be wider than the actual viewport’s width, replace it with max-width: 100vw; and overflow-x: hidden;. vw is the unit for a percentage of the viewport width.
You have added
overflow: hidden;
to the body, so you can't scroll. Please remove the hidden so that you can scroll
please check you have enough data (> your view port) for scrollbar to appear.
Please refer here for css changes if needed
enter link description here
enter link description here
enter link description here
Try css on body
overflow-y: scroll;
*remove overflow:hidden on body
I am trying to join the the footer-document to the index-file. But it does not work and I suspect there i something wrong with my css-file.
html {background: url("bakgrund.gif");}
/*https://pixabay.com/ Gratis bilder Creative Commons CC0*/
html { overflow-y: scroll;}
body {
background: white;
border: 1px solid #0000ff;
font-family: calibri, arial, sans-serif;
width: 750px;
margin: 25px auto;
padding: 0;
}
header {
height: 175px;
background-color: #edffff;
margin-top: -16px;
padding: 0;
}
nav {
height: 35px;
background-color: #edffff;
padding-left: 10px;
}
section {
width: 550px;
float: left;
min-height: 400px;
}
article {
width: 550px;
float: left;
background-color: yellow;
}
aside {
width: 200px;
float: right;
background-color: lightgrey;
}
footer {
clear: both;
position: relative;
height: 55px;
padding: 5px ;
text-align: center;
background-color: magenta;
}
address {
font-size: 12px;
font-style: normal;
}
/* Menykataloger */
ul {
margin: 0;
padding: 0;
}
#meny li {
display: inline;
padding: 5px 1px;
}
#meny li a {
margin: 0 5px 0 5px;
padding: 5px 15px;
text-align: center;
font-family: arial;
font-size: 13px;
font-weight: bold;
color: black;
border: 1px solid black;
border-radius: 5px;
background: yellow;
}
#meny li a:hover {
background: #CCEBFF;
color: black;
}
#meny a:link, #meny a:visited {
color: black;
text-decoration: none;
}
#meny a:active {
color: white;
}
#meny a#current {
background: white;
}
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="stil.css" type="text/css">
</head>
<body>
<nav>
<ul id="meny">
<li>Hem</li>
<li>AAA</li>
<li>BBB</li>
<li>CCC</li>
</ul>
</nav>
<section>
<h2>Huvudrubrik</h2>
<p>Huvudinnehåll</p>
<article>
<h2>Rubrik 1</h2>
<p> Innehåll 1 med rubriker</p>
</article>
<article>
<h2>Rubrik 2</h2>
<p> Innehåll 2 med rubriker
</p>
</article>
</section>
<aside>
Nyhetsbrev H-spalt
</aside>
<?php include("fot.php"); ?>
The result is wrong with the interpretation of the border. It just encircles the head and not the whole area.
I Get your problem
why dont you start your file with < ? php at begining and close it at the end
instead which you've used like this => "< ? php include("fot.php");" ?> at the end of your second file if you can see.
and save the main html file with the extension .php
trust me nothing will happen to your html code all the html contents will run fine even if you save the file in .php
and the second thing is you can include in two ways
i.e
include 'filename';
or
require 'filename'; you better include at the starting of the file
who would know if that included file may come to use right from the begining
Thanking you!
I could not understand what you are trying to do, but your problem is due to float: left for section tag. There are many alternatives to float like flex and grid,, so don't prefer float. It will cause many problems. Your problem is listed here.
There is no problem with your php.
I have created an active navigation bar that underlines the link for the page that you are currently on using PHP. My aim is for the link to appear underlined and in a different color. The underline works but the color doesn't change.
I have positioned the .on class,the class that the PHP will activate, after other applicable css styles so I don't think that there is any conflict. I even tried using !important to see if that had any affect but alas no.
header.php
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link href='http://fonts.googleapis.com/css?family=Special+Elite' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'>
<!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"> </script><![endif]-->
<title><?php echo "LWM Marketing"; ?></title>
<link rel="stylesheet" type="text.css" href="css/style.css"/>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" />
<link rel="stylesheet" type="text/css" media="all" href="css/text.css" />
<script src="//platform.linkedin.com/in.js" type="text/javascript"></script>
<?=#$css;?>
</head>
<body>
<div class="wrapper">
<header>
<a class="header-logo" href="index.php"><h1 id="main-logo">LWM PR & Comms</h1></a>
<ul class="nav">
<li class="<?php if ($section == "index") { echo "on";} ?>">About</li>
<li class="<?php if ($section == "services") { echo "on";} ?>">Services and Previous Work</li>
<li class="<?php if ($section == "contact") { echo "on";} ?>">Contact</li>
</ul>
</header>
<div id="content">
index.css
#content>*{
width:300px;
}
#content{
height:1025px;
}
h2{
font-family: 'Special Elite', helvetica, arial, verdana, sans-serif;
padding-left: 15px;
position: relative;
top:20px;
}
#linkedin{
position: relative;
top:30px;
left:5px;
}
#logo-cloud{
position: relative;
left:380px;
top:-150px;
width:600px;
}
#main-blurb{
font-family: 'Raleway', helvetica, arial, sans-serif;
font-size: 18px;
padding-left: 15px;
position: relative;
top: -125px;
width:600px;
}
#main-blurb p{
margin: 0px 0px 40px 40px;
text-indent: 15px;
width:600px;
}
#main-blurb p:last-child{
text-align: center;
font-size: 24px;
}
#divider{
width:960px;
position: relative;
top:-125px;
left:12px;
border-top-width: 1px;
border-top-style: dashed;
border-top-color: #B6B8BA;
padding-top:15px;
}
#twitter-timeline{
position: relative;
top:-580px;
left:682px;
}
footer{
position: relative;
top:-30px;
}
.hidden{
display:none;
}
style.css (with the class that the PHP activates)
/* General Styling */
body{
font-family: 'Raleway', helvetica, arial, verdana, sans-serif;
background-image:url("images/paper.png");
}
.wrapper{
width:960px;
margin: auto;
}
a {
color:#000000;
text-decoration:none;
}
a:hover{
color:#434991;
}
a:active{
color:#FF9436;
}
/* Logo (Header) */
.header-logo{
display:block;
width:247px;
height:111px;
text-indent:-9999px;
background: url("images/logo.gif") no-repeat;
margin:15px 0px 10px 15px;
float:left;
position:relative;
left:40px;
}
/* Main-Nav */
.nav li{
list-style-type: none;
display:inline-block;
font-size: 23px;
margin-top:90px;
float:left;
position:relative;
left:25px;
top:-12px;
}
.nav a{
font-family: 'Special Elite', sans-serif;
padding-top:5px;
border-left: 1px dotted #878787 ;
padding:2px 5px 0px 30px;
}
.nav li:first-child a {
border: 0;
}
.on{
text-decoration:underline;
color:#FF9436;
}
/* Footer */
footer{
font-family: 'Special Elite', sans-serif;
width:100%;
float:left;
}
footer p{
display:inline;
}
footer div{
border-top-width: 1px;
border-top-style: dashed;
border-top-color: #B6B8BA;
padding-top:15px;
}
footer div li{
list-style-type: none;
display: inline-block;
font-size: 15px;
margin-left: 80px;
}
footer div li p{
font-size: 12px;
}
Can anybody see why the color property is having no affect? Is it being overridden by something that I haven't noticed or is there something else that I am totally overlooking?
Thanks.
Did you style ".on a" this would be required.
I am trying to make a drop-down menu using jQuery/JavaScript, but my menu won't show anything.
Here is my code:
JavaScript:
function toggleMenu(target){
if($(target).css("display")=='none'){
$("#drop_down, drop_menu").hide(500);
$(target).toggle(500);
}
header.php
<?php
?>
<div id="header" class="absolute" >
<ul>
<li class="float_left"><p class="pointer" onclick="toggleMenu('#drop_search')">Search</p></li>
<li class="float_left"><p class="pointer" onclick="toggleMenu('#drop_login')">Log in</p></li>
<li class="float_left"><p class="pointer" onclick="toggleMenu('#drop_chart')">My Cart</p></li>
<li class="float_left"><p class="pointer" onclick="toggleMenu('#drop_menu')">Menu</p></li>
</ul>
<div class="clear_both"></div>
<br/>
<div id="drop_down"class="right">
<div id="drop_search" class="hidden">
<p>Search</p>
</div>
<div id="drop_login" class="hidden">
<p>login</p>
</div>
<div id="drop_chart" class="hidden">
<p>cart</p>
</div>
<div id="drop_menu" class="hidden">
<p>menu</p>
</div>
</div>
</div>
sorry for the long css, i just like to pack it into one file
style.css
body{
position: relative;
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
font-family: sans-serif;
}
body table{
border-collapse: collapse;
width: 100%;
}
body th, body tr, body td{
padding: 0;
}
body h1, body h2,body h3,body h4,body h5,body h6,body p{
margin: 0px;
}
body p{
font-size: 12px;
}
body h6{
font-size: 14px;
}body h5{
font-size: 16px;
}body h4{
font-size: 18px;
}body h3{
font-size: 20px;
}body h2{
font-size: 24px;
}body h1{
font-size: 28px;
}
body ul,body li{
list-style: none;
margin: 0px;
padding: 0px;
}
body img{
border: none;
}
body hr{
margin: 0px;
border: none;
height: 1px;
}
body a:link{
text-decoration: none;
}
body a:visited{}
body a:hover{}
body .relative{
position: relative;
}
body .absolute{
position: absolute;
}
body .fixed{
position: fixed;
}
body .float_left{
float: left;
}
body .float_right{
float: right;
}
body .clear_both{
clear: both;
}
body input, body select, body textarea{
border-radius: 5px;
}
body .input_text{}
body .input_select{
border-radius: 5px;
font-size: 11px;
}
body .input_option{
background-color: #f6f6f6;
color: #333333;
}
body .input_option_inactive{
background-color: #f6f6f6;
color: #888888;
}
body .input_submit{
background: url("../images/submit.png");
border: none;
font-weight: bold;
color: #efefef;
cursor: pointer;
border-radius: 20px;
height: 20px;
}
body .input_submit:hover{
color: #ffffff;
text-shadow: 0 0 3px #efefef;
}
body .input_submit_inactive{
background: url('#');
border:none;
}
body .input_submit_inactive:hover{
color: #333333;
text-shadow: 0 0 3px #434343;
}
body .input_textarea{}
body .top{
vertical-align: top;
}
body .middle{
vertical-align: middle;
}
body .bottom{
vertical-align: bottom;
}
body .left{
text-align: left;
}
body .center{
text-align: center;
}
body .right{
text-align: right;
}
body .spacer{
width: 10px;
height: 10px;
}
body .bold{
font-weight: bold;
}
body .italic{
font-style: italic;
}
body .strip{
text-decoration: line-through;
}
body .hidden{
display: none;
}
body .show{
display: block;
}
body .pointer{
cursor: pointer;
}
body .scroll-y{
overflow-y: scroll;
}
#whole{
width: inherit;
height:100%;
margin-left: auto;
margin-right: auto;
vertical-align: top;
}
.black{color: #000000;}
.white{color: #ffffff;}
.red{color: #ff0000;}
.green{color: #00ff00;}
.blue{color: #0000ff;}
.yellow{color: #ffff00;}
.toska{color: #00ffff;}
.pink{color: #ff00ff;}
header.css
#header{
right: 0;
top: 0;
}
#header li{ height: 20px;
background: #960000;
}
#header li p{
margin: 0 15px;
color: #cccccc;
height: 12px;
line-height: 20px;
font-weight: bold;
}
#header li p:hover{
color: #f6f6f6;
}
#header #drop_down{
background: url('../images/black20.jpg');
}
Can anyone can help ?
Remove your class="hidden" and set default to style="display: none" (or hide on page load).
You have a sintaxe error in your function
Try with this function
function toggleMenu(target){
if($(target).is(":hidden")){
$("#drop_down div").hide(500);
}
$(target).toggle(500);
}
And give me some feedback...
This code might work as per your requirement. I have not changed your code just remove class="hidden" entirely.
Note: You have not mention your css so i assume as per class names defined by you.
Please let me know if i am lagging some where....
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js" type="text/javascript"></script>
<style type="text/css">
#header {
border:1px solid red;
width:100%;
}
.pointer {
cursor:pointer;
}
.absolute {
position:absolute;
}
.float_left {
float:left;
}
.right {
float:right;
}
.clear_both {
clear:both;
}
</style>
</head>
<body>
<div id="header" class="absolute">
<ul>
<li class="float_left">
<p class="pointer" onclick="toggleMenu('#drop_search');">Search</p>
</li>
<li class="float_left">
<p class="pointer" onclick="toggleMenu('#drop_login')">Log in</p>
</li>
<li class="float_left">
<p class="pointer" onclick="toggleMenu('#drop_chart')">My Cart</p>
</li>
<li class="float_left">
<p class="pointer" onclick="toggleMenu('#drop_menu')">Menu</p>
</li>
</ul>
<div class="clear_both"></div>
<br/>
<div id="drop_down" class="right">
<div id="drop_search">
<p>Search</p>
</div>
<div id="drop_login">
<p>login</p>
</div>
<div id="drop_chart">
<p>cart</p>
</div>
<div id="drop_menu">
<p>menu</p>
</div>
</div>
</div>
<script type="text/javascript">
$("#drop_down div").hide();
function toggleMenu(target)
{
if($(target).css("display") != 'none')
{
$(target).hide(500);
}
else
{
$("#drop_down div").hide(500);
$(target).show(500);
}
}
</script>
</body>
</html>