Hoi, ik wil graag het uiterlijk van mijn site gaan verbeteren zodat het na 1.5 jaar eindelijk eens een keer klaar is en dat ik dan aan de inhoud kan gaan werken. Maar mij wilt het na al die tijd echt gewoon niet lukken dus ik wil graag jullie goeie hulp hebben.
Mijn problemen zijn:
1. Als je de index.php bekijkt en je maakt de pagina kleiner, half scherm groot dan zie je dat alle kolommen elkaar overlappen en ik wil juist dat dit niet gebeurt, dat alles gewoon strak naast elkaar blijft staan.
http://theresistance.heliohost.org/index.php
2. Onderaan de pagina staat de footer als je dus de pagina verkleint dan zul je zien dat de hele tekst en plaatjes buiten de footer treden hoe kan ik die gewoon daar in hun goede positie houden(zoals bij volledig scherm)?
3. Als je naar contact pagina gaat met een klein scherm dan zie je een horizontale balk in message, ook dat wil ik niet en ik wil dat het gewoon netjes in het midden blijft staan.
4. Dan wil ik graag dat het menu in het midden blijft staan, zodra ik iets toevoeg of het bijvoorbeeld FORUM verwijder dan blijft alles zo staan en is het niet meer gecentreerd, hoe doe je dit automatisch in css?
5. Voel je vrij als je in php of css oid. iets ziet staan dat fout is in de code of verbeterd kan worden om het te vertellen tegen mij zodat ik het zo volledig mogelijk kan optimaliseren, dat is namelijk het doel op dit moment!
Ik zou jullie zo ongelooflijk dankbaar zijn als deze 5 dingen lukken, ik ben al zo onwijs lang (1,5 jaar) hiermee bezig.:shocked::thumb::thumb:
Hieronder staat al mijn css.
Contact.css
index.php
contact.css
contact.php
de content.css die je in het midden ziet op index.php:
content.php:
het menu, ddsmoothmenu.css:
en nog 1 voor het menu, ddsmoothmenu-v.css:
Mijn problemen zijn:
1. Als je de index.php bekijkt en je maakt de pagina kleiner, half scherm groot dan zie je dat alle kolommen elkaar overlappen en ik wil juist dat dit niet gebeurt, dat alles gewoon strak naast elkaar blijft staan.
http://theresistance.heliohost.org/index.php
2. Onderaan de pagina staat de footer als je dus de pagina verkleint dan zul je zien dat de hele tekst en plaatjes buiten de footer treden hoe kan ik die gewoon daar in hun goede positie houden(zoals bij volledig scherm)?
3. Als je naar contact pagina gaat met een klein scherm dan zie je een horizontale balk in message, ook dat wil ik niet en ik wil dat het gewoon netjes in het midden blijft staan.
4. Dan wil ik graag dat het menu in het midden blijft staan, zodra ik iets toevoeg of het bijvoorbeeld FORUM verwijder dan blijft alles zo staan en is het niet meer gecentreerd, hoe doe je dit automatisch in css?
5. Voel je vrij als je in php of css oid. iets ziet staan dat fout is in de code of verbeterd kan worden om het te vertellen tegen mij zodat ik het zo volledig mogelijk kan optimaliseren, dat is namelijk het doel op dit moment!
Ik zou jullie zo ongelooflijk dankbaar zijn als deze 5 dingen lukken, ik ben al zo onwijs lang (1,5 jaar) hiermee bezig.:shocked::thumb::thumb:
Hieronder staat al mijn css.
Contact.css
Code:
@font-face {
font-family: 'Segoe UI';
src: url('segoeui.ttf');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'Segoe UI Light';
src: url('segoeuil.ttf');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'Segoe UI Bold';
src: url('segoeuib.ttf');
font-weight: normal;
font-style: normal;
}
::-webkit-scrollbar {
width: 12px;
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
}
::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
html {
overflow: -moz-scrollbars-vertical;
overflow-y: scroll;
}
body {
background-color: #213D65;
color: #213D65;
font-size: 13px;
font-family: 'Segoe UI';
}
#container {
width: 70%;
margin: 0 auto;
margin-bottom: 20px;
}
#logo {
width: 395px;
height: 105px;
margin: 0 auto;
margin-bottom: 10px;
background-image: url(../images/header.gif);
}
#menu {
width: 100%;
height: 36px;
background-color: #2F5388;
border: 1px solid #2B4A7B;
border-radius: 5px;
box-shadow: 2px 2px 5px #1D1E23;
font-family: "Segoe UI Bold";
font-size: 13px;
margin-bottom: 20px;
}
#footer {
background-color: #2F5388;
width: 100%;
height: 60px;
border: 1px solid #2B4A7B;
border-radius: 5px;
box-shadow: 2px 2px 5px #1D1E23;
clear: both;
}
#footercontainer {
width: 70%;
margin-top: 4px;
}
#footleft {
background-image: url(../images/footer.gif);
background-repeat: no-repeat;
background-size: 37px 56px;
width: 10%;
height: 56px;
float: left;
margin-left:40px;
}
#footcenter {
float: left;
width: 80%;
margin-top: 10px;
color: #A4CAF3;
font-size: 12px;
text-align: left;
}
#footright {
float: right;
width: 10%;
height: 25px;
margin-top: 15px;
margin-right: -260px;
}
#contactimg:hover {
opacity: 0.6;
filter: alpha(opacity=60); // IE
}index.php
PHP:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="google-site-verification" content="HZ5CFSYeGBL9lI3JR8dTdApPE9DoZwTL4OyAGwovGZI" />
<meta name="description" content="Do you want to know the ****h about everything? How the elite/illuminati control you? How to become really healthy and at peace? Start reading this!" />
<meta name="keywords" content="Illuminati, NWO, New World Order, Conspiracy, ****h, Health, Ayurveda, GMO, Death, Disease, Hoax, Freemasons, Elite, 911, False Flags, Lies, Spirituality, Cultivation, New Age Movement, World Trade Center, Twin Towers, History, Pease, Buddhism, Religion" />
<meta name="expires" content="never" />
<title>The Resistance - Free your mind with the ****h.</title>
<link rel="shortcut icon" href="images/favicon.ico" />
<link rel="stylesheet" type="text/css" href="css/ddsmoothmenu.css" />
<link rel="stylesheet" type="text/css" href="css/ddsmoothmenu-v.css" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script type="text/javascript" src="css/ddsmoothmenu.js"></script>
<script type="text/javascript">
ddsmoothmenu.init({
mainmenuid: "smoothmenu1",
orientation: 'h',
classname: 'ddsmoothmenu',
contentsource: "markup"
})
ddsmoothmenu.init({
mainmenuid: "smoothmenu2",
orientation: 'v',
classname: 'ddsmoothmenu-v',
method: 'hover', // set to 'hover' (default) or 'toggle'
arrowswap: true,
contentsource: "markup"
})
</script>
<script type="text/javascript">
$('button').click ->
# Increment the value
$counter = $('.updates')
val = parseInt $counter.text()
val++
# Animation
$counter
.css({opacity: 0})
.text(val)
.css({top: '-10px'})
.transition({top: '-2px', opacity: 1})
</script>
</head>
<body>
<div id="container">
<div id="logo"></div>
<div id="menu">
<div id="smoothmenu1" class="ddsmoothmenu">
<ul>
<li><a href="index.php">Home</a></li>
<li><a href="index.php?page=about"><s>Disclaimer</s></a></li>
<li><a href="index.php?page=****h">The ****h!</a></li>
<li><a href="index.php?page=catagories">Categories</a>
<ul>
<li><a href="index.php?page=health"><s>Health</s></a>
<ul>
<li><a href="index.php?page=ayurveda"><s>Ayurveda</s></a></li>
<li><a href="index.php?page=allopathic"><s>Allopathic medicine</s></a></li>
<li><a href="index.php?page=rawfoods"><s>Raw foods</s></a></li>
<li><a href="index.php?page=vitamins"><s>Vitamins</s></a></li>
</ul>
</li>
<li><a href="index.php?page=cultivation"><s>Self cultivation</s></a>
<ul>
<li><a href="index.php?page=newage"><s>New Age Movement</s></a></li>
<li><a href="index.php?page=buddhism"><s>Buddhism</s></a></li>
<li><a href="index.php?page=yoga"><s>Yoga</s></a></li>
<li><a href="index.php?page=psychology"><s>Psychology</s></a></li>
</ul>
</li>
<li><a href="index.php?page=conspiracies">Conspiracies</a>
<ul>
<li><a href="index.php?page=****hmovement">****h movement</a></li>
<li><a href="index.php?page=mindcontrol"><s>Mind control</s></a></li>
<li><a href="index.php?page=illuminati"><s>The Illuminati</s></a></li>
</ul>
<li><a href="index.php?page=breatharianism"><s>Breatharianism</s></a></li>
</li>
</ul>
</li>
<li><a href="index.php?page=forum"><s>Forum</s></a></li>
<li><a href="index.php?page=contact">Contact</a></li>
</ul>
</div>
</div>
<div id="content">
<?php
if (!isset($_GET['page'])) {
include('content.php');
}
else {
$page = 'page/'.$_GET['page'].'.php';
if (file_exists($page)) {
include($page);
}
else {
include ('404.php');
}
}
?>
</div>
<div id="footer">
<div id="footercontainer">
<div id="footleft"></div>
<div id="footcenter">www.the-resistance.tk is designed by Rebel, 2014-2016.<br>All information on this site may be quoted and shared.</div>
<div id="footright"><a href="index.php?page=contact"><img id="contactimg" src="images/contact-alt.gif" alt="" /></a></div>
</div>
</div>
</div>
</body>
</html>contact.css
Code:
.top {
float: left;
width: 95.5%;
padding: 13px 14px 13px 35px;
background-color: #2F5388;
color: #FFF;
font-size: 15px;
font-family: "Segoe UI Bold";
line-height: 10px;
text-align: center;
border: 1px solid #2B4A7B;
border-radius: 5px 5px 0px 0px;
box-shadow: 2px 2px 5px #1D1E23;
}
.bottom {
float: left;
width: 95.5%;
background-color: #FFF;
padding: 30px 15px 30px 35px;
margin-bottom: 20px;
text-align: center;
border: 1px solid #2B4A7B;
border-radius: 0px 0px 5px 5px;
box-shadow: 2px 2px 5px #1D1E23;
}
#form {
width: 60%;
margin: 0 auto;
}
#form .row {
display: block;
overflow: auto;
margin-top: 10px;
}
#form .row .label {
float: left;
width: 100px;
text-align: right;
line-height: 28px;
padding-right: 10px;
margin-right: 10px;
}
.name, .email {
outline: none;
float: left;
color: #2B4A7B;
height: 20px;
width: 250px;
padding: 3px 10px 3px 10px;
background: #FFFFFF;
border: 1px solid #2B4A7B;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
textarea {
outline: none;
float: left;
color: #2B4A7B;
width: 400px;
max-width: 400px;
height: 150px;
max-height: 150px;
padding: 7px 10px 7px 10px;
border: 1px solid #2B4A7B;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
#context {
float: left;
font-size: 10px;
font-family: 'Segoe UI Light';
line-height: 25px;
margin-left: 0px;
}
input:hover, textarea:hover {
border: 1px solid #A4CAF3;
}
input:focus, textarea:focus {
color: #A4CAF3;
background: #2F5388;
-webkit-box-shadow: inset 2px 2px 7px 0px rgba(29,30,35,0.35);
-moz-box-shadow: inset 2px 2px 7px 0px rgba(29,30,35,0.35);
box-shadow: inset 2px 2px 7px 0px rgba(29,30,35,0.35);
}
::-webkit-input-placeholder {
color: #2F5388;
}
:-moz-placeholder { /* Firefox 18- */
color: #2F5388;
}
::-moz-placeholder { /* Firefox 19+ */
color: #2F5388;
}
:-ms-input-placeholder {
color: #2F5388;
}
input[type=submit] {
float: left;
outline: none;
font-family: 'Segoe UI Bold';
color: #2B4A7B;
background-color: #FFFFFF;
margin: 10px 0 0 120px;
padding: 6px 15px;
border: 1px solid #2B4A7B;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
cursor: pointer;
}
input[type=submit]:hover {
color: #A4CAF3;
background-color: #2B4A7B;
}contact.php
PHP:
<html>
<head>
<meta name="robots" content="noindex,nofollow">
<link rel="stylesheet" type="text/css" href="../css/contact.css" />
</head>
<body>
<header class="top">
Contact form
</header>
<div class="bottom">
<form id="form" action="index.php?page=send" method="post">
<div class="row">
<div class="label">Your name:</div>
<div class="input">
<input type="text" class="name" name="name" placeholder="Full name please" />
</div>
</div>
<div class="row">
<div class="label">Your email:</div>
<div class="input">
<input type="text" class="email" name="email" placeholder="rebel@the-resistance.tk" />
</div>
</div>
<div class="row">
<div class="label">Your message:</div>
<div class="input">
<textarea name="message" placeholder="What is it that you want to talk about?"></textarea>
</div>
</div>
<div class="row">
<input type="submit" name="submit" value="Send message" />
</div>
</form>
</div>
</body>
</html>de content.css die je in het midden ziet op index.php:
Code:
#leftcontainer {
float: left;
width: 64%;
height: auto;
color: #213D65;
line-height: normal;
font-size: 13px;
font-family: "Segoe UI";
}
.left_top {
float: left;
width: 100%;
border: 1px solid #2B4A7B;
border-radius: 5px 5px 0px 0px;
box-shadow: 2px 2px 5px #1D1E23;
padding: 13px 14px 13px 35px;
background-color: #2F5388;
color: #FFF;
font-size: 15px;
font-family: "Segoe UI Bold";
line-height: 10px;
}
.left_top_date {
float: right;
padding-right: 25px;
font-size: 11px;
font-family: "Segoe UI";
}
.left_bot {
float: left;
width: 100%;
background-color: #FFF;
border: 1px solid #2B4A7B;
border-radius: 0px 0px 5px 5px;
box-shadow: 2px 2px 5px #1D1E23;
padding: 30px 14px 30px 35px;
margin-bottom: 20px;
}
#rightcontainer {
float: right;
height: auto;
width: 25%;
color: #213D65;
line-height: normal;
font-size: 13px;
font-family: "Segoe UI";
}
.right_top {
float: right;
width: 100%;
height: 10px;
border: 1px solid #2B4A7B;
border-radius: 5px 5px 0px 0px;
box-shadow: 2px 2px 5px #1D1E23;
padding: 13px 24px 13px 24px;
background-color: #2F5388;
color: #FFF;
font-size: 15px;
font-family: "Segoe UI Bold";
line-height: 10px;
}
.right_bot {
float: right;
width: 100%;
background-color: #FFF;
float: right;
border: 1px solid #2B4A7B;
border-radius: 0px 0px 5px 5px;
box-shadow: 2px 2px 5px #1D1E23;
padding: 20px 24px 20px 24px;
height: auto;
margin-bottom: 20px;
}
.link:link, .link:visited {
outline: none;
font-family: 'Segoe UI Bold';
color: #2F5388;
background-color: #FFFFFF;
padding: 5px 15px;
text-decoration: none;
border: 1px solid #2B4A7B;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
.link:hover, .link:active {
outline: none;
font-family: 'Segoe UI Bold';
color: #A4CAF3;
background-color: #2B4A7B;
padding: 6px 15px;
text-decoration: none;
border: 1px solid #2B4A7B;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
.quote {
background: #FCFDFF;
color: #213D65;
padding: 10px 15px 10px 15px;
border: 1px dotted #A4CAF3;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
.left_quote {
float: left;
}
.right_quote {
float: left;
margin-left: 30px;
}content.php:
PHP:
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/content.css" />
</head>
<body>
<div id="leftcontainer">
<header class="left_top">
Work in progress
<div class="left_top_date">
7 februari 2016
</div>
</header>
<div class="left_bot">
Hi people. It hase been a while sinds i worked on this website, progress is so verry slow, i am sorry for this.
<br>There was a little problem that came on my path that i had to first figure out, this understanding is still being ponderd upon and could be a decision in closing this website.
<br>For now i will proceed with this website, only some major changes will be made regarding what i would tell and how i would write it.
<br>So i ask you to have a little more patience with me, i will be posting what i have learned in a short time!
<br>I have made a start as you can see (The ****h!)
<br><br>If you have any questions or would like to help me you can email me at rebel@the-resistance.tk.
<br>Or you could send me a email through the website, i have it finally working! (85%)
</div>
<header class="left_top">
UN Agenda 2030: Sustainable Development
<div class="left_top_date">
8 november 2015
</div>
</header>
<div class="left_bot">
A blueprint to enslave humanity trough a ONE WORLD- government (UN), religion (spirituality),
<br>currency (digital chip) and army (NATO). Also called the New World Order.
<br>This is Agenda 21 on steroids! Which pope Francis announced to the world during his visit in America last September.
<br><br>Futher information will be coming.
</div>
<header class="left_top">
Under construction..
<div class="left_top_date">
1 may 2015
</div>
</header>
<div class="left_bot">
This website is still being developed, so come back every once in a while.
<br>Don't forget to bookmark this page!
<br><br>The music below is what really motivates me about all of this stuff, just wanted to share this with you.
<br><br><audio src="freedom.mp3" controls></audio>
</div>
<header class="left_top">
Short introduction
<div class="left_top_date">
15 april 2015
</div>
</header>
<div class="left_bot">
Hi, my name will be Rebel here and i live in Holland.
<br>English is not my birth language also i'm kinda dyslectic, so if you notice some letters missing or entire words spelled wrong let me know and i will correct it right away.
<br>
<br>The reason for this site is that i have been studying some heavy material sinds 2008.
<br>Everything started with a couple of life questions and all of those questions only let to more questions.
<br>After 7 years of doing some obsessive research on allot of different topics almost all questions have been answerd.
<br>The more i learned the more is saw what was really happening in the world.
<br>The picture and message below says it all.
<br>
<br>There is a invisible war going on and you do not know anything about it!
<br>It is a war that is right infront of your nose and you do not even see it.
<br>The only thing that you can see is the world that hase been pulled over your ears.
<br><br><img src="http://www.thesleuthjournal.com/wp-content/uploads/2014/11/plugged-in-to-television-tv-mind-control-brain-washing-unplug.jpg" height="200" width="300">
<br>I have found some really important stuff that the world needs to know. I can no longer shut my mouth!
<br>There is allot to tell to you and this can not be done in a few weeks. So please be patient with me.
<br>I will tell you all that i know in great detail, even some things that i found out by myself that you can not find
<br>anywhere on the web. These things must become public right away!
<br>This information becomes more and more critical with every day passing, your own survival literally depends on it!
<br>All will be explained and supported with real solid evidence.
<br><br>Before there will be any real import information placed upon this website, i first want to finish the design.
<br>When that is finished i will introduce myself some more and explain my reasons for this website.
<br>This is a must read before continuing with all the other stuff because you need to know the basics first in order to
<br>graduate to the higher levels of knowledge.
<br><br>A working contact form will be made a soon as possible, if you are seeing one right now it probably wont work yet.
<br>When it is done i will place a message on this main page so you guys can send me stuff or just leave a message.
<br><br>I think it is really importent for us to work together to produce all the information on this site, because i alone can not research everything that is out there.
<br>So i'm making this a shared project, 'of the people, by the people, for the people'.
<br>If you think you have some valuable stuff dont hesitate to send it to me!
<br>Don't worry, i will keep your privacy to myself!
<br>I'm the only one who hase access to this site and nobody else is working for me, nor i for anyone else.
<br>Together we can make this site the best, most effective and updated site that anyone can find on the web, with the
<br>most accurate and importent knowledge that we all need to know.
<br>This can only be done by working as a team, united as one we can stand tall!
<br><br>~Rebel
<br><center><img src="images/fist.gif">
<br><b>Join the fist!</b></center>
</div>
<header class="left_top">
Testing
<div class="left_top_date">
4 march 2015
</div>
</header>
<div class="left_bot">
<div class="quote" style="width:300px; height:100px;">
<div class="left_quote">
<b>Quote</b>:
</div>
<div class="right_quote">
<q>All ****h goes through three stages.
<br>First it is ridiculed.
<br>Then it is violently opposed.
<br>Finally it is accepted as self-evident.</q>
<br>
<br>~Schoepenhouer
</div>
</div>
</div>
</div>
<div id="rightcontainer">
<header class="right_top">
Website statistics
</header>
<div class="right_bot">
Online viewers: <script type="text/javascript" src="stats/online.php"></script>
<br>Total visitors: <?php $bestand = "stats/visits.php"; if(!is_file($bestand)) { $fp = fopen($bestand, 'a'); fwrite($fp, "<?\\n//"); fclose($fp); chmod($bestand, 0666); } $con = file_get_contents($bestand); $st = substr_count($con, ";"); if(strpos($con, $_SERVER['REMOTE_ADDR']) === FALSE) { $fp = fopen($bestand, 'a'); fwrite($fp, $_SERVER['REMOTE_ADDR'].";"); fclose($fp); $st++; } unset($con); echo "" . $st; ?>
<br>
<br><?php echo "Last modified: ".date( "j F Y", getlastmod() ); ?>
</div>
<header class="right_top">
Donate & Support
</header>
<div class="right_bot">
Do you like this website? Please consider contributing to this worthy cause to free humanity from there chains.
<br>A small donation from everyone will help to improve the development of this website.
<br>So, are you ready to become a active sponsor?
<br><br>
<a class="link" href="index.php?page=donate"><s>Donate now!</s></a>
<br><br>
Or you can help us out by becoming our partner. Send me the banner of your company and the link to your website and people will start visiting your website!
<br><br>
<a class="link" href="index.php?page=partner"><s>Become a partner</s></a>
</div>
<header class="right_top">
Next vision: 2020
</header>
<div class="right_bot">
<script type="text/javascript"> today = new Date(); BigDay = new Date("January 1, 2020"); msPerDay = 24 * 5000000; timeLeft = (BigDay.getTime() - today.getTime()); e_daysLeft = timeLeft / msPerDay; daysLeft = Math.floor(e_daysLeft); e_hrsLeft = (e_daysLeft - daysLeft)*24; document.write("<b>" + daysLeft + " </b>days till ...");</script>
<br><br><br>
<a class="link" href="index.php?page=countdown"><s>Read more..</s></a>
</div>
</div>
</body>
</html>het menu, ddsmoothmenu.css:
Code:
.ddsmoothmenu{
width: 100%;
height: 40px;
display: none;
}
.ddsmoothmenu ul{
z-index: 100;
margin: 0;
padding: 0;
list-style-type: none;
line-height: 20px;
height: 40px;
width: 500px;
margin: 0 auto;
}
/*Top level list items*/
.ddsmoothmenu ul li{
position: relative;
display: inline;
float: left;
}
/*Top level menu link items style*/
.ddsmoothmenu ul li a{
display: block;
color: white;
padding: 8px 13px;
color: #2d2b2b;
text-decoration: none;
height: 21px;
}
* html .ddsmoothmenu ul li a{ /*IE6 hack to get sub menu links to behave correctly*/
display: inline-block;
}
.ddsmoothmenu ul li a:link, .ddsmoothmenu ul li a:visited{
color: white;
}
.ddsmoothmenu ul li a.selected { /*CSS class that's dynamically added to the currently active menu items' LI A element*/
background: #2B4A7B !important;
color: #A4CAF3;
}
.ddsmoothmenu ul li a:hover{
background: #2B4A7B; /*background of menu items during onmouseover (hover state)*/
color: #A4CAF3;
}
/* sub menus */
.ddsmoothmenu ul li ul{
position: absolute;
left: -3000px;
display: none; /*collapse all sub menus to begin with*/
visibility: hidden;
height: auto;
width: auto;
background-color: #2F5388;
box-shadow: 2px 2px 5px #1D1E23;
-webkit-border-bottom-right-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-moz-border-radius-bottomright: 5px;
-moz-border-radius-bottomleft: 5px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
}
/*Sub level menu list items (alters style from Top level List Items)*/
.ddsmoothmenu ul li ul li{
display: list-item;
float: none;
}
/*All subsequent sub menu levels vertical offset after 1st level sub menu */
.ddsmoothmenu ul li ul li ul{
top: 0;
}
/* Sub level menu links style */
.ddsmoothmenu ul li ul li a{
width: 160px; /*width of sub menus*/
padding: 7px;
margin: 0;
padding-left: 10px;
-webkit-border-bottom-right-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-moz-border-radius-bottomright: 5px;
-moz-border-radius-bottomleft: 5px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
}
/* Holly Hack for IE \*/
* html .ddsmoothmenu{height: 1%;} /*Holly Hack for IE7 and below*/
/* ######### CSS classes applied to down and right arrow images ######### */
.downarrowclass{
position: absolute;
top: 15px;
right: 7px;
}
.rightarrowclass{
position: absolute;
top: 10px;
right: 5px;
}
.leftarrowclass{
margin-right: 5px;
}
/* ######### Mobile menu container CSS ######### */
div.ddsmoothmobile{ /* main mobile menu container */
background: #414141;
color: white;
position: fixed;
top: 0;
left: 0;
width: 200px; /* width of mobile menu */
height: 300px;
overflow: hidden;
visibility: hidden;
border-radius: 0 0 10px 0;
box-shadow: 0 0 10px gray;
}
div.ddsmoothmobile a{
color: white;
text-decoration: none;
}
div.ddsmoothmobile div.topulsdiv{ /* Single DIV that surrounds all top level ULs before being flattened, or the ULs on the "frontpage" of the menu */
position: relative;
background: #414141;
overflow-y: auto;
width: 100%;
height: 100%;
}
div.ddsmoothmobile ul{ /* style for all ULs in general inside mobile menu */
list-style: none;
width: 100%;
top: 0;
left: 0;
background: #414141;
margin: 0;
padding: 0;
}
div.ddsmoothmobile div.topulsdiv ul.submenu{ /* top level ULs style */
}
div.ddsmoothmobile ul.submenu{ /* sub level ULs style */
position: absolute;
height: 100%;
overflow-y: auto;
}
div.ddsmoothmobile ul li{
border-bottom: 1px solid gray;
position: relative;
}
div.ddsmoothmobile ul li.breadcrumb{ /* breadcrumb LI that's added to the top of every sub level UL */
cursor: pointer;
padding: 10px;
background: #2B4A7B;
}
div.ddsmoothmobile ul li a{
display: block;
padding: 6px;
}
div.ddsmoothmobile ul li a:hover{
background: #2B4A7B;
}
/* ############# Animated Drawer icon (mobile menu toggler) CSS ############# */
.animateddrawer{
font-size: 10px; /* Base font size. Adjust this value to modify size of drawer icon */
width: 3em;
height: 2.8em;
outline: none;
position: fixed; /* BY default, make toggler fixed on screen */
display: none;
top: 10px; /* Position at upper right corner */
right: 10px;
background: white;
z-index: 1000;
}
.animateddrawer:before, .animateddrawer:after{
position: absolute;
content: '';
display: block;
width: 100%;
height: 0.6em; /* height of top and bottom drawer line */
background: #2B4A7B;
border-radius: 2px;
top: 0;
left: 0;
opacity: 1;
-webkit-transition: all 0.3s ease-in; /* set transition type and time */
transition: all 0.3s ease-in;
}
.animateddrawer:after{
top: auto;
bottom: 0;
}
.animateddrawer span{
width: 100%;
height: 0.6em; /* height of middle drawer line */
background: #2B4A7B;
position: absolute;
top: 50%;
margin-top: -0.3em; /* set this to - half of middle drawer line height */
border-radius: 2px;
-ms-transform-origin: 50% 50%;
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
-webkit-transition: all 0.3s ease-in 0.3s; /* set transition type and time */
transition: all 0.3s ease-in 0.3s;
}
.animateddrawer span::after{
content: '';
display: block;
width: 100%;
height: 0.6em; /* height of middle drawer line */
background: #2B4A7B;
border-radius: 2px;
position: absolute;
-ms-transform-origin: 50% 50%;
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
-webkit-transition: all 0.3s ease-in 0.3s; /* set transition type and time */
transition: all 0.3s ease-in 0.3s;
}
.animateddrawer.open{
}
.animateddrawer.open:before{ /* style when .open class is added to button */
top: 50%;
margin-top: -0.3em; /* set this to - half of top drawer line height */
opacity: 0;
}
.animateddrawer.open:after{ /* style when .open class is added to button */
bottom: 50%;
opacity: 0;
}
.animateddrawer.open span{ /* style when .open class is added to button */
-ms-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.animateddrawer.open span:after{ /* style when .open class is added to button */
-ms-transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
}en nog 1 voor het menu, ddsmoothmenu-v.css:
Code:
.ddsmoothmenu-v{
display: none;
}
.ddsmoothmenu-v ul{
margin: 0;
padding: 0;
width: 170px; /* Main Menu Item widths */
list-style-type: none;
}
.ddsmoothmenu-v ul li{
position: relative;
float: none;
}
/* Top level menu links style */
.ddsmoothmenu-v ul li a{
display: block;
overflow: auto; /*force hasLayout in IE7 */
color: white;
text-decoration: none;
padding: 6px 23px 6px 6px;
border-bottom: 1px solid #778;
border-right: 1px solid #778;
}
.ddsmoothmenu-v ul li a:link, .ddsmoothmenu-v ul li a:visited, .ddsmoothmenu-v ul li a:active{
background: #1c5a80; /*background of menu items (default state)*/
color: white;
}
.ddsmoothmenu-v ul li a.selected{ /*CSS class that's dynamically added to the currently active menu items' LI A element*/
background: lightblue !important;
color: navy;
}
.ddsmoothmenu-v ul li a:hover{
background: lightblue; /*background of menu items during onmouseover (hover state)*/
color: navy;
}
/*Sub level menu items */
.ddsmoothmenu-v ul li ul{
position: absolute;
width: 170px; /*Sub Menu Items width */
top: 0;
font-weight: normal;
visibility: hidden;
}
/* Holly Hack for IE \*/
* html .ddsmoothmenu-v ul li { float: left; height: 1%; }
* html .ddsmoothmenu-v ul li a { height: 1%; }
/* End */
Laatst bewerkt:
