Jump to content

maxibaw

Members
  • Posts

    9
  • Joined

  • Last visited

maxibaw's Achievements

Newbie

Newbie (1/7)

0

Reputation

  1. Sorry i got another problem while i make this website. Ive putted in an gallery made in lightroom. i got it to work perfect on my first try, but im making one called macro picture, city and landscape. Landscape work perfect anyone can help me how i can get the same design/layout on my other sites on macro and city? (the picture on macro and city is just same as on landscape atm ) link to website:http://www.hsrysstad.com/katrine2
  2. Hey it worked perfect, i changed to another document type and typed <center> </center> and workes good now. Thx Sorry for double post
  3. Hey it worked perfect, i changed to another document type and typed <center> </center> and workes good now. Thx
  4. I see, thx. Lets hope i get it to work correct:D
  5. hmm that one didnt i understand. what code i put in under there?
  6. Hey! Does anyone of you know how I can center my website + navigation/menu ? ive tried the css code float left/position middle, but that didnt work. I know the Home, About, Service site is middle/center, but the problem is on the portfolio/gallery site,My website adress is: http://www.hsrysstad.com/katrine2 I really hope someone can help me. I got exam Wednesday so kinda want to get it down before so I know it. Thx
  7. Hello. i need help with navigation /menu stuff. i have made this website with this menu/navigation style:How can i have same navigation/menu on my portfolio site?ive tried to copy but it just comes wrong . index site/front page: portfolio site: code for my index sitehtml: <!DOCTYPE HTML><html><head> <title>Graphic designer Katrine </title> <meta name="description" content="website description" /> <meta name="keywords" content="website keywords, website keywords" /> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <!-- stylesheets --> <link href="css/style.css" rel="stylesheet" type="text/css" /> <link href="css/colour.css" rel="stylesheet" type="text/css" /> <!-- modernizr enables HTML5 elements and feature detects --> <script type="text/javascript" src="js/modernizr-1.5.min.js"></script></head><body><div id="main"><!-- begin header --><header><div id="logo"></div><nav><ul class="sf-menu" id="nav"><li><a href="index.html">HOME</a></li><li class="selected"><a href="about.html">ABOUT ME</a></li><li><a href="#">MY PORTFOLIO</a><ul><li><a href="portfolio_one.html">PORTFOLIO 1</a></li><li><a href="portfolio_two.html">PORTFOLIO 2</a></li></ul></li><li><a href="service.html">SERVICE</a></li><li><a href="contact.php">CONTACT</a></li></ul></nav></header><!-- end header --><!-- begin content --><div id="site_content"><ul class="slideshow"><li class="show"><img width="940" height="450" src="images/images/_2166862977.jpg" alt="" /></li> <li><img width="940" height="450" src="images/images/_4343600683.jpg" alt="" /></li> <li><img width="940" height="450" src="" alt="" /></li> </ul> </div> <!-- end content --> <!-- begin footer --> <footer> <p>Copyright © 2012 www.testtest.com. All Rights Reserved. <p><a href="www.twitter.com/......"><img src="images/twitter.png" alt="twitter" /></a> <a href="www.facebook.com/....."><img src="images/facebook.png" alt="facebook" /></a> </p> </footer> <!-- end footer --> </div> <!-- javascript at the bottom for fast page loading --> <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.easing-sooper.js"></script> <script type="text/javascript" src="js/jquery.sooperfish.js"></script> <script type="text/javascript" src="js/image_fade.js"></script> <!-- initialise sooperfish menu --> <script type="text/javascript"> $(document).ready(function() { $('ul.sf-menu').sooperfish(); }); </script></body></html> CSS code: @font-face { font-family: Jenna Sue; src: url('../fonts/JennaSue-webfont.eot'); src: local("Jenna Sue"), url('../fonts/JennaSue-webfont.ttf');}@font-face { font-family: News Cycle; src: url('../fonts/NewsCycle-Regular.eot'); src: local("News Cycle"), url('../fonts/NewsCycle-Regular.ttf');}html { height: 100%;}* { margin: 0; padding: 0;}/* tell the browser to render HTML 5 elements as block */article, aside, figure, footer, header, hgroup, nav, section { display:block;}body {font: normal .80em arial, sans-serif;background-color: #121413;}p { padding: 0 0 25px 0; line-height: 1.7em;}img { border: 0;}h1, h2, h3, h4, h5, h6 { font: normal 350% 'Jenna Sue', arial, sans-serif; margin: 0 0 5px 0; padding: 0;}h2 { font: normal 170% 'Jenna Sue', arial, sans-serif; margin: 0; padding: 0 0 8px 0;}h3 { font: normal 150% arial, sans-serif;}h4, h5, h6 { margin: 0; padding: 0 0 5px 0; font: normal 110% arial, sans-serif; line-height: 1.5em;}h5, h6 { font: italic 95% arial, sans-serif; padding-bottom: 15px;}a, a:hover { outline: none; text-decoration: none;}a:hover { text-decoration: none;}ul { margin: 2px 0 22px 17px;}ul li { list-style-type: circle; margin: 0 0 0 0; padding: 0 0 4px 5px;}ol { margin: 8px 0 22px 20px;}ol li { margin: 0 0 11px 0;}#main, #header, #logo, #menubar, #site_content, #footer { margin-left: auto; margin-right: auto;}#main { width: 950px; margin: 20px auto;}header {width: 950px;height: 150px;background-image: url(../images/header.jpg);}#logo {width: 500px;float: left;height: 180px;background: transparent;padding: 0;}#logo h1 { font: normal 450% 'Jenna Sue', arial, sans-serif; padding: 6px 0 0 20px;}#logo h1 a:hover { text-decoration: none;}#site_content { width: 950px; overflow: hidden; margin: 4px auto 0 auto; padding: 0;}#left_content { float: left; text-align: justify; width: 444px; padding: 20px 0 5px 25px; margin: 0;}#left_content ul { margin: 2px 0 22px 0px;}#left_content ul li { list-style-type: none; margin: 0 0 0 0; padding: 2px 0 2px 28px; line-height: 1.5em;}#right_content { float: right; width: 450px; padding: 0; min-height: 450px;}#right_content img { float: left;}footer { height: 54px; width: 930px; float: right; margin: 20px auto 20px auto; padding: 0px 20px 0 0; border-radius: 7px 7px 7px 7px; -moz-border-radius: 7px 7px 7px 7px; -webkit-border: 7px 7px 7px 7px; font: 160% 'News Cycle', arial, sans-serif; text-align: right;}footer p { padding: 0 0 10px 0;}footer a, footer a:hover { text-decoration: none;}/* styling for the slideshow on the homepage */ul.slideshow { width: 950px; height: 450px; overflow: hidden; position: relative; margin: 0; padding: 0;} ul.slideshow li { position: absolute; margin: 0; padding: 0; left: 0; right: 0; list-style: none;} ul.slideshow li.show { z-index: 500;} ul img { border: none;} #slideshow-caption { width: 950px; height: 90px; position: absolute; bottom: 0; left: 0; z-index: 500;} #slideshow-caption .slideshow-caption-container { padding: 20px 25px 0 25px; z-index: 1000;} #slideshow-caption p { padding: 0; font: normal 130% arial, sans-serif;}/* form styling */.form_settings { margin: 0;}.form_settings p { padding: 0 0 10px 0;}.form_settings span { padding: 5px 0; float: left; width: 170px; text-align: left;} .form_settings input, .form_settings textarea { padding: 4px; width: 252px; font: 100% 'trebuchet ms', arial, sans-serif; border: 0; border-bottom: 1px solid; background: transparent;} .form_settings .submit { font: 220% 'Jenna Sue', arial, sans-serif; border: 0; width: 100px; margin: 0 0 0 162px; height: 33px; padding: 2px 0 3px 0; cursor: pointer; border-radius: 6px 6px 6px 6px; -webkit-border-radius: 6px 6px 6px 6px; -moz-border-radius: 6px 6px 6px 6px;}.form_settings textarea, .form_settings select { font: 100% 'trebuchet ms', arial, sans-serif; border: 1px solid; border-radius: 6px 6px 6px 6px; -webkit-border-radius: 6px 6px 6px 6px; -moz-border-radius: 6px 6px 6px 6px; width: 250px; overflow: auto;}.form_settings select { width: 304px;}.form_settings .checkbox { margin: 4px 0; padding: 0; width: 14px; border: 0; background: none;}/* styling for the blog page */#blog_container h4 { font: normal 300% 'Jenna Sue', arial, sans-serif; margin: 0 0 15px 0; padding: 5px 0;}#blog_container h4.select { width: 475px;}.blog { background: url(../images/calendar.png) no-repeat; width: 54px; height: 46px; float: left; margin: 0 15px 0 0;}.blog h2 { font: bold 90% arial, sans-serif; text-shadow: none; text-align: center; margin: 0; padding: 4px 0 0 0;} .blog h3 { font: 140% arial, sans-serif; text-shadow: none; margin: 0; text-align: center; padding: -10px 0 0 0;} #blog_text { padding: 20px; overflow: auto; height: 100%;}#blog_text h1 { font: normal 300% 'Jenna Sue', arial, sans-serif;; margin: 0 0 15px 0; padding: 5px 0;}/* stylesheet for sooperFish by www.sooperthemes.com -- author: jurriaan roelofs */html body ul.sf-menu ul,html body ul.sf-menu ul li { width: 180px;}html body ul.sf-menu ul ul { margin: 0 0 0 180px;}ul.sf-menu,ul.sf-menu * { margin: 0; padding: 0;}ul.sf-menu { display: block; position: relative;} ul.sf-menu li { display: block; list-style: none; float: left; position: relative;} ul.sf-menu li:hover { visibility: inherit; /* fixes IE7 'sticky bug' */ }ul.sf-menu a { display: block; position: relative;} ul.sf-menu ul { position: absolute; left: 0; width: 150px; top: auto; left: -999999px;} ul.sf-menu ul a { zoom: 1; /* IE6/7 fix */ }ul.sf-menu ul li { float: left; /* Must always be floated otherwise there will be a rogue 1px margin-bottom in IE6/7 */ width: 150px;} ul.sf-menu ul ul { top: 0; margin: 0 0 0 150px;}ul.sf-menu li:hover ul,ul.sf-menu li:focus ul,ul.sf-menu li.sf-hover ul,ul.sf-menu ul li:hover ul,ul.sf-menu ul li:focus ul,ul.sf-menu ul li.sf-hover ul,ul.sf-menu ul ul li:hover ul,ul.sf-menu ul ul li:focus ul,ul.sf-menu ul ul li.sf-hover ul,ul.sf-menu ul ul ul li:hover ul,ul.sf-menu ul ul ul li:focus ul,ul.sf-menu ul ul ul li.sf-hover ul { left: auto;} ul.sf-menu li:hover ul ul,ul.sf-menu li:focus ul ul,ul.sf-menu li.sf-hover ul ul,ul.sf-menu ul li:hover ul ul,ul.sf-menu ul li:focus ul ul,ul.sf-menu ul li.sf-hover ul ul,ul.sf-menu ul ul li:hover ul ul,ul.sf-menu ul ul li:focus ul ul,ul.sf-menu ul ul li.sf-hover ul ul,ul.sf-menu ul ul ul li:hover ul ul,ul.sf-menu ul ul ul li:focus ul ul,ul.sf-menu ul ul ul li.sf-hover ul ul { left: -999999px;}/* autoArrows CSS */span.sf-arrow { width: 7px; height: 7px; position: absolute; top: 20px; right: 5px; display: block; overflow: hidden; /* making sure IE6 doesn't overflow and expand the box */ font-size: 1px;}ul ul span.sf-arrow { right: 5px; top: 20px; background-position: 0 100%;}/* theming the menu */nav { height: 44px; width: 950px; float: right; margin: -20px auto 20px auto; border-radius: 7px 7px 7px 7px; -moz-border-radius: 7px 7px 7px 7px; -webkit-border: 7px 7px 7px 7px;}/* Theming the menu */ul#nav { float: left;}ul#nav ul { padding-bottom: 15px;}ul#nav li a { padding: 3px 25px 6px 25px; font: 170% 'News Cycle', arial, sans-serif; text-decoration: none; margin-right: 2px;} HTML code for portfolio: <!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"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Project: </title><meta name="description" content="" /><meta name="keywords" content="" /><link href="script/style.css" rel="stylesheet" type="text/css" /><!--[if lt IE 7]><link href="script/ie.css" rel="stylesheet" type="text/css" /><![endif]--><!--[if IE 7]><link href="script/ie7.css" rel="stylesheet" type="text/css" /><![endif]--> <!-- stylesheets --><link href="css/style.css" rel="stylesheet" type="text/css" /> <link href="css/colour.css" rel="stylesheet" type="text/css" /> <!-- modernizr enables HTML5 elements and feature detects --><script type="text/javascript" src="js/modernizr-1.5.min.js"></script> <link rel="stylesheet" href="script/lightbox.css" type="text/css" media="screen" /><script type="text/javascript" src="js/prototype.js"></script><script type="text/javascript" src="js/scriptaculous.js?load=effects"></script><script type="text/javascript" src="js/lightbox.js"></script></head> <body><div id="wrapper"><div id="header"><div id="navigation"><ul><li><a href="#" >my services</a></li><li><a href="#" my work</a></li><li><a href="#" onclick="Effect.ScrollTo('content'); return false;">about me</a></li><li><a href="#" onclick="Effect.ScrollTo('hire_me'); return false;">get in touch</a></li></ul> <div id="social"><ul><li>find me on:</li><li><a href="#">Twitter</a>,</li><li><a href="#">Facebook</a></li></ul></div> <!--social ends--></div> <!--navigation--></div> <!--header ends--> <div id="portfolio"><div id="portfolio_container"><ul><li><a href="file:///C|/Users/abcde/Desktop/images/_2213653.JPG" rel="lightbox[portfolio]" title="Sample 1"><img src="file:///C|/Users/abcde/Desktop/images/_2213653.JPG" alt="" width="280" height="160" /></a></li> <li><a href="file:///C|/Users/abcde/Desktop/images/_2213659.JPG" rel="lightbox[portfolio]" title="Sample 2"><img src="file:///C|/Users/abcde/Desktop/images/_2213659.JPG" alt="" width="280" height="160" /></a></li> <li><a href="file:///C|/Users/abcde/Desktop/images/_5023770.JPG" rel="lightbox[portfolio]" title="Sample 3"><img src="file:///C|/Users/abcde/Desktop/images/_5023770.JPG" alt="" width="280" height="160" /></a></li> <li><a href="file:///C|/Users/abcde/Desktop/images/_5023795.JPG" rel="lightbox[portfolio]" title="Sample 4"><img src="file:///C|/Users/abcde/Desktop/images/_5023795.JPG" alt="" width="280" height="160" /></a></li> <li><a href="file:///C|/Users/abcde/Desktop/images/_0083716549.jpg" rel="lightbox[portfolio]" title="Sample 5"><img src="file:///C|/Users/abcde/Desktop/images/_0083716549.jpg" alt="" width="280" height="160" /></a></li> <li><a href="file:///C|/Users/abcde/Desktop/images/_5023769.JPG" rel="lightbox[portfolio]" title="Sample 6"><img src="file:///C|/Users/abcde/Desktop/images/_5023769.JPG" alt="" width="280" height="160" /></a></li><li><a href="file:///C|/Users/abcde/Desktop/images/_5023801.JPG" rel="lightbox[portfolio]" title="Sample 1"><img src="file:///C|/Users/abcde/Desktop/images/_5023801.JPG" alt="" width="280" height="160" /></a></li><li><a href="file:///C|/Users/abcde/Desktop/images/_5023817.JPG" rel="lightbox[portfolio]" title="Sample 1"><img src="file:///C|/Users/abcde/Desktop/images/_5023817.JPG" alt="" width="280" height="160" /></a></li><li><a href="file:///C|/Users/abcde/Desktop/images/_0268393276.jpg" rel="lightbox[portfolio]" title="Sample 1"><img src="file:///C|/Users/abcde/Desktop/images/_0268393276.jpg" alt="" width="280" height="160" /></a></li><li><a href="file:///C|/Users/abcde/Desktop/images/_2166862977.jpg" rel="lightbox[portfolio]" title="Sample 1"><img src="file:///C|/Users/abcde/Desktop/images/_2166862977.jpg" alt="" width="280" height="160" /></a></li><li><a href="file:///C|/Users/abcde/Desktop/images/_1295460725.jpg" rel="lightbox[portfolio]" title="Sample 1"><img src="file:///C|/Users/abcde/Desktop/images/_1295460725.jpg" alt="" width="280" height="160" /></a></li><li><a href="file:///C|/Users/abcde/Desktop/images/_2405159944.jpg" rel="lightbox[portfolio]" title="Sample 1"><img src="file:///C|/Users/abcde/Desktop/images/_2405159944.jpg" alt="" width="280" height="160" /></a></li><li><a href="file:///C|/Users/abcde/Desktop/images/_2805052996.jpg" rel="lightbox[portfolio]" title="Sample 1"><img src="file:///C|/Users/abcde/Desktop/images/_2805052996.jpg" alt="" width="280" height="160" /></a></li><li><a href="file:///C|/Users/abcde/Desktop/images/_4671231169.jpg" rel="lightbox[portfolio]" title="Sample 1"><img src="file:///C|/Users/abcde/Desktop/images/_4671231169.jpg" alt="" width="280" height="160" /></a></li><li><a href="file:///C|/Users/abcde/Desktop/images/_4343600683.jpg" rel="lightbox[portfolio]" title="Sample 1"><img src="file:///C|/Users/abcde/Desktop/images/_4343600683.jpg" alt="" width="280" height="160" /></a></li><li><a href="file:///C|/Users/abcde/Desktop/images/_3256288562.jpg" rel="lightbox[portfolio]" title="Sample 1"><img src="file:///C|/Users/abcde/Desktop/images/_3256288562.jpg" alt="" width="280" height="160" /></a></li><li><a href="" rel="lightbox[portfolio]" title="Sample 1"><img src="file:///C|/Users/abcde/Desktop/images/_6103566210.jpg" alt="" width="280" height="160" /></a></li><li><a href="file:///C|/Users/abcde/Desktop/images/_6381705729.jpg" rel="lightbox[portfolio]" title="Sample 1"><img src="file:///C|/Users/abcde/Desktop/images/_6381705729.jpg" alt="" width="280" height="160" /></a></li><li><a href="" rel="lightbox[portfolio]" title="Sample 1"><img src="file:///C|/Users/abcde/Desktop/images/_2465309878.jpg" alt="" width="260" height="352" /></a></li><li><a href="" rel="lightbox[portfolio]" title="Sample 1"><img src="file:///C|/Users/abcde/Desktop/images/_0459394848.jpg" alt="" width="260" height="352" /></a></li><li><a href="" rel="lightbox[portfolio]" title="Sample 1"><img src="file:///C|/Users/abcde/Desktop/images/_0182784610.jpg" alt="" width="260" height="352" /></a></li><li><a href="" rel="lightbox[portfolio]" title="Sample 1"><img src="file:///C|/Users/abcde/Desktop/images/_6115293323.jpg" alt="" width="260" height="352" /></a></li><li><a href="" rel="lightbox[portfolio]" title="Sample 1"><img src="file:///C|/Users/abcde/Desktop/images/_4826787356.jpg" alt="" width="260" height="352" /></a></li><li><a href="" rel="lightbox[portfolio]" title="Sample 1"><img src="file:///C|/Users/abcde/Desktop/images/_2876085773.jpg" alt="" width="260" height="352" /></a></li> </ul><div class="clear"></div></div> <!--portfolio container ends--></div> <!--portfolio ends--> <a href="#" id="backtotop" onclick="Effect.ScrollTo('wrapper'); return false;">back to top</a> </div> <!--wrapper ends--> <div id="footer"> <div id="footer_container"> <p>Copyright John Smith, 2009</p> </div> </div> <!--footer ends--></body></html> CSS code for portfolio/gallery: ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input{ margin:0; padding:0;}ul{ list-style:none;}fieldset{ border:0;}a,a:link,a:visited,a:hover{ color:#00f; text-decoration:none;}a:focus,a:hover{ text-decoration:underline;}a img{ border:0;}.clear{ clear:both;}body{ position:relative; background:#161514 url(../images/body_bg.jpg) center top no-repeat; color:#000; font:62.5% Georgia,Arial,sans-serif;}#header{ width: 932px; height: 103px; padding: 37px 0px 0px 28px; margin: 0px 0px 40px 0px; background: url(../images/header_bg.jpg) bottom no-repeat;}#logo{ display: block; width: 337px; height: 38px; float: left; margin: 0px 0px 25px 0px; background: url(../images/logo.jpg) no-repeat; text-indent: -99999px;}#navigation{ width: 900px; height: 31px; padding: 9px 30px 0px 2px; clear: both;}#navigation ul{ float: left;}#navigation ul li{ float: left; font-size: 18px; color: #a8a5a4; margin: 0px 24px 0px 0px;}#navigation ul li a{ font-size: 18px; color: #a8a5a4;}#social{ float: right;}#social ul li{ float: left; font-size: 18px; color: #a8a5a4; margin: 0px 5px 0px 0px;}#social ul li a{ font-size: 18px; color: #7488ef;}#teasers{ width: 960px; height: 195px; margin: 0px 0px 35px 0px;}#teasers h2{ color: #dddc67; font-size: 18px; margin: 0px 0px 20px 0px; font-weight: normal;}#teasers p{ font-size: 14px; color: #dedbda; line-height: 135%;}.teaser_container{ width: 271px; height: 195px; float: left; padding: 0px 0px 0px 29px;}#portfolio{ width: 958px; /*height: 408px;*/ margin: 0px 0px 40px 0px; border: 1px solid #21211f; background: url(../images/portoflio_bg.png);}#portfolio_container{width: 958px;/*height: 380px;*/padding: 28px 0px 0px 0px;height: 5000px;}#portfolio_container ul li{ display: inline; float: left; width: 280px; height: 160px; margin: 0px 0px 28px 28px; border: 1px solid #21211f;}#portfolio_container ul li img{ float: left;} #content{ float: left; width: 932px; clear: both; padding: 0px 0px 36px 28px;}#text{ width: 587px; float: left; padding: 0px 34px 0px 0px;}#text p{ font-size: 14px; color: #dedbda; margin: 0px 0px 24px 0px;}#my_skills{ width: 219px; float: left;}#my_skills h2{ font-size: 14px; color: #dddc67; margin: 0px 0px 24px 0px;}#my_skills ul li{ width: 219px; float: left; font-size: 14px; margin: 0px 0px 2px 0px; color: #a8a5a4;}#my_skills ul li span{ float: left;}#my_skills ul li img{ float: right;}#hire_me{ width: 928px; height: 33px; clear: both; color: #a8a5a4; padding: 13px 0px 0px 30px; margin: 0px 0px 24px 0px; border: 1px solid #1f1f1d; background: #0f0f0e;}#hire_me p{ color: #a8a5a4; font-size: 18px; font-style: italic;}#hire_me p a{ color: #dddc67;}#backtotop{ color: #dddc67; font-size: 18px; font-style: italic; padding: 0px 0px 0px 29px; text-decoration: underline;}#footer{ width: 100%; height: 66px; clear: both; margin: 33px 0px 0px 0px; border-top: 1px solid #1f1f1d; background: #0f0f0e;}#footer_container{ width: 940px; margin: 0 auto; padding: 24px 0px 0px 29px;}#footer_container p{ color: #dedbda; font-size: 14px;} .replace{ position:relative; margin:0; padding:0; /* \*/ overflow:hidden; /* */}.replace span{ display:block; position:absolute; top:0; left:0; z-index:1;}.skiplink{ display:none;}#wrapper{ width: 960px; margin:0 auto;}
  8. Hey, thx for the reply, but i want a more creative gallery. not that standard one^^ like it get bigger when you click on it, or fullscreen. you know code for that ?
  9. Hey, im having exam in web design this week, and i wonder if anyone know an easy code to make an image gallery? i couldnt get fancybox to work. Thx
×
×
  • Create New...