Gå til innhold

Mazå

Medlemmer
  • Innlegg

    179
  • Ble med

  • Besøkte siden sist

Innlegg skrevet av Mazå

  1. Det jeg skal ha inn er en drop down meny, når jeg setter den inn under nav så blir det bare kluss. Noen som kunne fortalt meg hvor jeg skal sette den inn? nedenfor ser du html og css fil. og en egen css og html for drop down menyen som skal inn. Menyen skal se ut som denne her: http://www.handy-htm...n-menu-updated/

    Ble litt lang post men håper dere forstår an.

     

    HTML:

    <!DOCTYPE html>
    <html lang="en" dir="ltr">
    <head>
    <title>Basic 89</title>
    <meta charset="iso-8859-1">
    <link rel="stylesheet" href="styles/layout.css" type="text/css">
    <!--[if lt IE 9]><script src="scripts/html5shiv.js"></script><![endif]-->
    </head>
    <body>
    <div class="wrapper row1">
     <header id="header" class="clear">
    <hgroup>
      <h1><a href="#">HTML5</a></h1>
      <h2>HTML5 Website Template</h2>
    </hgroup>
    <nav>
      <ul>
    	<li><a href="#">Text Link</a></li>
    	<li><a href="#">Text Link</a></li>
    	<li><a href="#">Text Link</a></li>
    	<li><a href="#">Text Link</a></li>
    	<li class="last"><a href="#">Text Link</a></li>
      </ul>
    </nav>
     </header>
    </div>
    <!-- content -->
    <div class="wrapper row2">
     <div id="container" class="clear">
    <!-- Slider -->
    <section id="slider"><a href="#"><img src="images/demo/960x360.gif" alt=""></a></section>
    <!-- main content -->
    <div id="homepage">
      <!-- services area -->
      <section id="services" class="clear">
    	<article class="one_quarter">
    	  <figure><img src="images/demo/32x32.gif" width="32" height="32" alt=""></figure>
    	  <strong>Lorum ipsum dolor</strong>
    	  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc non diam erat. In fringilla massa ut nisi ullamcorper.</p>
    	  <p class="more"><a href="#">Read More »</a></p>
    	</article>
    	<article class="one_quarter">
    	  <figure><img src="images/demo/32x32.gif" width="32" height="32" alt=""></figure>
    	  <strong>Lorum ipsum dolor</strong>
    	  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc non diam erat. In fringilla massa ut nisi ullamcorper.</p>
    	  <p class="more"><a href="#">Read More »</a></p>
    	</article>
    	<article class="one_quarter">
    	  <figure><img src="images/demo/32x32.gif" width="32" height="32" alt=""></figure>
    	  <strong>Lorum ipsum dolor</strong>
    	  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc non diam erat. In fringilla massa ut nisi ullamcorper.</p>
    	  <p class="more"><a href="#">Read More »</a></p>
    	</article>
    	<article class="one_quarter lastbox">
    	  <figure><img src="images/demo/32x32.gif" width="32" height="32" alt=""></figure>
    	  <strong>Lorum ipsum dolor</strong>
    	  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc non diam erat. In fringilla massa ut nisi ullamcorper.</p>
    	  <p class="more"><a href="#">Read More »</a></p>
    	</article>
      </section>
      <!-- / services area -->
      <!-- ########################################################################################## -->
      <!-- ########################################################################################## -->
      <!-- ########################################################################################## -->
      <!-- ########################################################################################## -->
      <!-- / latest work -->
      <section id="latest">
    	<article>
    	  <figure>
    		<ul class="clear">
    		  <li class="one_third"><img src="images/demo/290x180.gif" width="290" height="180" alt=""></li>
    		  <li class="one_third"><img src="images/demo/290x180.gif" width="290" height="180" alt=""></li>
    		  <li class="one_third lastbox"><img src="images/demo/290x180.gif" width="290" height="180" alt=""></li>
    		</ul>
    		<figcaption><a href="#">View All Our Recent Work Here »</a></figcaption>
    	  </figure>
    	</article>
      </section>
      <!-- / latest work -->
    </div>
    <!-- main content -->
    <div id="content">
      <section id="posts" class="last clear">
    	<ul>
    	  <li>
    		<article class="clear">
    		  <figure><img src="images/demo/180x150.gif" alt="">
    			<figcaption>
    			  <h2>Indonectetus facilis leo nibh</h2>
    			  <p>This is a W3C compliant free website template from <a href="http://www.os-templates.com/" title="Free Website Templates">OS Templates</a>. For full terms of use of this template please read our <a href="http://www.os-templates.com/template-terms">website template licence</a>.</p>
    			  <footer class="more"><a href="#">Read More »</a></footer>
    			</figcaption>
    		  </figure>
    		</article>
    	  </li>
    	  <li class="last">
    		<article class="clear">
    		  <figure><img src="images/demo/180x150.gif" alt="">
    			<figcaption>
    			  <h2>Indonectetus facilis leo nibh</h2>
    			  <p>You can use and modify the template for both personal and commercial use. You must keep all copyright information and credit links in the template and associated files. For more HTML5 templates visit <a href="http://www.os-templates.com/">free website templates</a>.</p>
    			  <footer class="more"><a href="#">Read More »</a></footer>
    			</figcaption>
    		  </figure>
    		</article>
    	  </li>
    	</ul>
      </section>
    </div>
    <!-- right column -->
    <aside id="right_column">
      <h2 class="title">Categories</h2>
      <nav>
    	<ul>
    	  <li><a href="#">Free Website Templates</a></li>
    	  <li><a href="#">Free CSS Templates</a></li>
    	  <li><a href="#">Free XHTML Templates</a></li>
    	  <li><a href="#">Free Web Templates</a></li>
    	  <li><a href="#">Free Website Layouts</a></li>
    	  <li><a href="#">Free HTML 5 Templates</a></li>
    	  <li><a href="#">Free Webdesign Templates</a></li>
    	  <li><a href="#">Free FireWorks Templates</a></li>
    	  <li><a href="#">Free PNG Templates</a></li>
    	  <li class="last"><a href="#">Free Website Themes</a></li>
    	</ul>
      </nav>
      <!-- /nav -->
    </aside>
    <!-- / content body -->
     </div>
    </div>
    <!-- Footer -->
    <div class="wrapper row3">
     <footer id="footer" class="clear">
    <p class="fl_left">Copyright © 2012 - All Rights Reserved - <a href="#">Domain Name</a></p>
    <p class="fl_right">A HTML<a href="http://www.os-templates.com/" title="Free Website Templates">5 Templates</a></p>
     </footer>
    </div>
    </body>
    </html>
    

     

    CSS:

    /*
    HTML 5 Template
    File: Layout CSS
    */
    html{overflow-y:scroll;} /* Forces a scrollbar when the viewport is larger than the websites content - CSS3 */
    body{margin:0; padding:0; font-size:13px; font-family:Georgia, "Times New Roman", Times, serif; color:#919191; background-color:#232323;}
    .clear:after{content:"."; display:block; height:0; clear:both; visibility:hidden; line-height:0;}
    .clear{display:block; clear:both;}
    html[xmlns] .clear{display:block;}
    * html .clear{height:1%;}
    a{outline:none; text-decoration:none;}
    code{font-weight:normal; font-style:normal; font-family:Georgia, "Times New Roman", Times, serif;}
    .fl_left{float:left;}
    .fl_right{float:right;}
    img{margin:0; padding:0; border:none; line-height:normal; vertical-align:middle;}
    .imgholder, .imgl, .imgr{padding:4px; border:1px solid #D6D6D6; text-align:center;}
    .imgl{float:left; margin:0 15px 15px 0; clear:left;}
    .imgr{float:right; margin:0 0 15px 15px; clear:right;}
    /*----------------------------------------------HTML 5 Overrides-------------------------------------*/
    address, article, aside, figcaption, figure, footer, header, hgroup, nav, section{display:block; margin:0; padding:0;}
    q{display:block; padding:0 10px 8px 10px; color:#979797; background-color:#ECECEC; font-style:italic; line-height:normal;}
    q:before{content:'“ '; font-size:26px;}
    q:after{content:' „'; font-size:26px; line-height:0;}
    /* ----------------------------------------------Wrapper-------------------------------------*/
    div.wrapper{display:block; width:100%; margin:0; padding:0; text-align:left;}
    .row1, .row1 a{color:#C0BAB6; background-color:#333333;}
    .row2{color:#979797; background-color:#FFFFFF;}
    .row2 a{color:#FF9900; background-color:#FFFFFF;}
    .row3, .row3 a{color:#919191; background-color:#232323;}
    /*----------------------------------------------Generalise-------------------------------------*/
    #header, #container, #footer{display:block; width:960px; margin:0 auto;}
    nav ul{margin:0; padding:0; list-style:none;}
    h1, h2, h3, h4, h5, h6{margin:0; padding:0; font-size:16px; font-weight:bold; font-style:normal; line-height:normal; text-transform:uppercase;}
    address{font-style:normal;}
    blockquote, q{display:block; padding:8px 10px; color:#979797; background-color:#ECECEC; font-style:italic; line-height:normal;}
    blockquote:before, q:before{content:'“ '; font-size:26px;}
    blockquote:after, q:after{content:' „'; font-size:26px; line-height:0;}
    form, fieldset, legend{margin:0; padding:0; border:none;}
    legend{display:none;}
    input, textarea, select{font-size:12px; font-family:Georgia,"Times New Roman",Times,serif;}
    .one_quarter, .two_quarter, .three_quarter, .four_quarter{display:block; float:left; margin:0 20px 0 0;}
    .one_quarter{width:225px;}
    .two_quarter{width:470px;}
    .three_quarter{width:715px;}
    .four_quarter{width:960px; float:none; margin-right:0; clear:both;}
    .one_third, .two_third, .three_third{display:block; float:left; margin:0 30px 0 0;}
    .one_third{width:300px;}
    .two_third{width:630px;}
    .three_third{width:960px; float:none; margin-right:0; clear:both;}
    .lastbox{margin-right:0;}
    /*----------------------------------------------Header-------------------------------------*/
    #header{padding:20px 0;}
    #header hgroup{float:left; margin:0 0 20px 0;}
    #header hgroup h1, #header hgroup h2{font-weight:normal; text-transform:none;}
    #header hgroup h1{font-size:36px;}
    #header hgroup h2{font-size:13px;}
    #header nav{display:block; float:right; margin:10px 0 0 0; padding:20px 0; color:#C0BAB6; background-color:#232323;}
    #header nav ul{padding:0 20px;}
    #header nav li{display:inline; margin-right:25px; text-transform:uppercase;}
    #header nav li.last{margin-right:0;}
    #header nav li a{color:#C0BAB6; background-color:#232323;}
    #header nav li a:hover{color:#FF9900; background-color:#232323;}
    /*----------------------------------------------Content Area-------------------------------------*/
    #container{padding:30px 0;}
    #container section{display:block; width:100%; margin:0 0 30px 0; padding:0;}
    #container .last{margin:0;}
    #container .more{text-align:right;}
    /* ------Slider-----*/
    #container #slider{margin-bottom:50px;}
    /* ------Homepage-----*/
    #container #homepage{display:block; width:100%; line-height:1.6em;}
    #container #homepage #services{padding:0 0 30px 0; border-bottom:1px solid #DEDEDE;}
    #container #homepage #services article{}
    #container #homepage #services figure{display:inline; float:left;}
    #container #homepage #services strong{float:left; margin:8px 0 0 10px; padding:0; font-size:14px; font-weight:bold; text-transform:uppercase;}
    #container #homepage #services p{display:block; margin:0; padding:5px 0 0 0; clear:both; line-height:1.6em;}
    #container #homepage #latest{padding:0 0 30px 0; border-bottom:1px solid #DEDEDE;}
    #container #homepage #latest article{}
    #container #homepage #latest article figure{}
    #container #homepage #latest article figure ul{margin:0; padding:0; list-style:none;}
    #container #homepage #latest article figure ul li{}
    #container #homepage #latest article figure ul li img{padding:4px; border:1px solid #D6D6D6;}
    #container #homepage #latest article figure figcaption{display:block; width:100%; margin-top:20px; text-align:right;}
    /* ------Main Content-----*/
    #container #content{float:left; width:630px; line-height:1.6em;}
    #container #content #posts{}
    #container #content #posts ul{margin:0; padding:0; list-style:none;}
    #container #content #posts ul li{display:block; width:100%; margin-bottom:30px;}
    #container #content #posts ul li.last{ margin-bottom:0;}
    #container #content #posts ul li article{}
    #container #content #posts ul li article figure{}
    #container #content #posts ul li article figure img{float:left; width:180px; height:150px; margin:0; padding:4px; border:1px solid #D6D6D6;}
    #container #content #posts ul li article figure figcaption{display:block; float:right; width:410px;}
    #container #content #posts ul li article figure h2{font-size:14px;}
    #container #content #posts ul li article figure footer{}
    /* ------Right Column-----*/
    #container #right_column{float:right; width:280px;}
    #container #right_column h2.title{margin-bottom:15px; padding-bottom:15px; border-bottom:1px solid #DEDEDE;}
    #container #right_column nav{display:block; width:100%;}
    #container #right_column nav ul{margin:0; padding:0; list-style:none;}
    #container #right_column nav li{margin:0 0 3px 0; padding:0;}
    #container #right_column nav li.last{margin-bottom:0;}
    #container #right_column nav a{display:block; margin:0; padding:5px 10px 5px 20px; color:#666666; background:url("../images/orange_file.gif") no-repeat 10px center #FFFFFF; text-decoration:none; border-bottom:1px dotted #666666;}
    #container #right_column nav a:hover{color:#FF9900; background-color:#FFFFFF;}
    /*----------------------------------------------Footer-------------------------------------*/
    #footer{padding:20px 0;}
    #footer p{margin:0; padding:0;}
    

     

    Drop Down meny html:

    <ul id="nav" class="drop">
     <li><a href="#">Home</a></li>
     <li>About Us
    <ul>
      <li><a href="#">History</a></li>
      <li><a href="#">Clients</a></li>
      <li><a href="#">Testimonials</a></li>
      <li><a href="#">Staff</a>
    	<ul>
    	  <li><a href="#">George Orsmond</a>
    		<ul>
    		  <li>Web Design</li>
    		  <li>Graphic Design</li>
    		  <li>HTML</li>
    		  <li>CSS</li>
    		</ul>
    	  </li>
    	  <li><a href="#">Dave Macleod</a></li>
    	</ul>
      </li>
      <li><a href="#">FAQs</a></li>
    </ul>
     </li>
     <li>Services
    <ul>
      <li><a href="#">Web Design</a></li>
      <li><a href="#">Graphic Design</a></li>
      <li><a href="#">Logo Design</a></li>
    </ul>
     </li>
     <li>Products
    <ul>
      <li class="dir"><a href="#">Templates</a></li>
      <li class="dir"><a href="#">Stock Images</a>
    	<ul>
    	  <li><a href="#">Category 1</a></li>
    	  <li><a href="#">Category 2</a></li>
    	  <li><a href="#">Category 3</a></li>
    	  <li><a href="#">Category 4</a></li>
    	  <li><a href="#">Category 5</a></li>
    	</ul>
      </li>
      <li><a href="#">Featured</a></li>
      <li><a href="#">Top Rated</a></li>
      <li><a href="#">Resources</a></li>
    </ul>
     </li>
     <li><a href="#">Gallery</a></li>
     <li>Contact Us
    <ul>
      <li><a href="#">Contact Form</a></li>
      <li><a href="#">How to get here</a></li>
      <li><a href="#">View the map</a></li>
    </ul>
     </li>
    </ul>
    

     

    CSS for drop down meny:

    <style>
    /*---- CROSS BROWSER DROPDOWN MENU ----*/
    ul#nav {margin: 0 0 0 200px;}
    ul.drop a { display:block; color: #fff; font-family: Verdana; font-size: 14px; text-decoration: none;}
    ul.drop, ul.drop li, ul.drop ul { list-style: none; margin: 0; padding: 0; border: 1px solid #fff; background: #555; color: #fff;}
    ul.drop { position: relative; z-index: 597; float: left; }
    ul.drop li { float: left; line-height: 1.3em; vertical-align: middle; zoom: 1; padding: 5px 10px; }
    ul.drop li.hover, ul.drop li:hover { position: relative; z-index: 599; cursor: default; background: #1e7c9a; }
    ul.drop ul { visibility: hidden; position: absolute; top: 100%; left: 0; z-index: 598; width: 195px; background: #555; border: 1px solid #fff; }
    ul.drop ul li { float: none; }
    ul.drop ul ul { top: -2px; left: 100%; }
    ul.drop li:hover > ul { visibility: visible }
    </style>
    

  2. Hei, vet ikke om dette er rett plass å spør om, men gjør det alikavell siden jeg ikke vet hvor jeg skal poste det.

    Litt info om oppgaven min:

    Har da et prosjekt der jeg skal lage et lite klipp i after effects på max 1 minutt. Det skal vise forskjellige "yrker" kan man si. Alt av arbeidet er laget i Adobe Illustrator/Photoshop. Problemet mitt ligger i Adobe After Effects. Det som er planen min er at en figur skal gå/springe framover, hoppe over noen kasser, så spretter der opp noen tekster/nytt bilde laga i photoshop. Er nybegynner i after effects da.

     

    Spørsmål:

    Så det jeg lurer på er hvordan får jeg ting/figurer til å flytte på seg i after effects? Hvordan få et nytt bilde som spretter opp når den figuren kommer/hopper på kassen?

     

    Takk på forhånd

  3. Hei, vet ikke om dette er rett plass å spør om, men gjør det alikavell siden jeg ikke vet hvor jeg skal poste det.

     

    Litt info om oppgaven min:

    Har da et prosjekt der jeg skal lage et lite klipp i after effects på max 1 minutt. Det skal vise forskjellige "yrker" kan man si. Alt av arbeidet er laget i Adobe Illustrator/Photoshop. Problemet mitt ligger i Adobe After Effects. Det som er planen min er at en figur skal gå/springe framover, hoppe over noen kasser, så spretter der opp noen tekster/nytt bilde laga i photoshop. Er nybegynner i after effects da.

     

     

    Spørsmål:

    Så det jeg lurer på er hvordan får jeg ting/figurer til å flytte på seg i after effects? Hvordan få et nytt bilde som spretter opp når den figuren kommer/hopper på kassen?

     

     

    Takk på forhånd :D

  4. Hei, forrige uke så kjøpte jeg meg en HP Envy m6 1104eo. Den har etprogram som heter HP Simplepass. Plutselig i dag så virket den ikke. Har virket greit til i går.

     

     

    Noen som vet hva jeg må gjøre for å få det til å virke igjen?

     

     

    Takk på forhånd :D

×
×
  • Opprett ny...