slm arkadaşlar. summer field tasarımını siteme uyarlamaya çalışıyorum; ancak sayfalardaki içerik sağ tarafa kayarak görünümü bozuyor. sol tarafta epeyce bir boşluk kalıyor. beynim uyuştu artık, yardım edebilecek arkadaşlar varsa memnun olurum.
üst
<title>Summer Fields</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
</head>
<body>
<div id="bgwrap">
<div id="container">
<div id="header">
<ul>
<li class="skiplink"><a href="#content">Skip to Content</a></li>
<li class="skiplink"><a href="#navigation">Skip to Navigation</a></li>
<li><a href="#">Search</a></li>
<li><a href="#">Help</a></li>
<li><a href="#">Faq</a></li>
</ul>
</div>
<div id="wrapper">
<div id="content">
<div id="mainpicbox">
<div id="mainpic">
<h2>Maybe a big background image here</h2>
<h3>Some little text here perhaps</h3>
<p><a href="#">Click here</a></p>
</div>
</div>
--------------------------------------------------------------------------------------------
alt
<div id="gallery">
<p class="entrytext"><img src="sunflower.jpg" style="width: 130px; height: 130px; float:right;" alt="placeholder" />Our Photo Gallery</p>
<ul><li><a href="#"><img src="sunflower.jpg" alt="placeholder" /></a></li>
<li><a href="#"><img src="sunflower.jpg" alt="placeholder" /></a></li>
<li><a href="#"><img src="sunflower.jpg" alt="placeholder" /></a></li>
<li><a href="#"><img src="sunflower.jpg" alt="placeholder" /></a></li>
</ul>
<p>This area can be a photo gallery, or perhaps you could replace the images with an amazon book list with affiliate links. If you want you could add a tad of javascript to this area and when you mouseover the small image it can show bigger in the image to the right.</p>
</div>
</div>
</div>
<div id="logobox">
<h1>Summer Fields</h1>
<h2>Your slogan here</h2>
</div>
<div id="navigation">
<ul>
<li><a href="#">Main Page</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Our Services</a></li>
<li><a href="#">Free Tips</a></li>
<li><a href="#">Locations</a></li>
<li><a href="#">Contacts</a></li>
</ul>
</div>
<div id="extra">
<p class="stripnav">Our Services</p>
<p>Some little heading line here that talks about this area.</p>
<p><img src="sunflower.jpg" style="width: 70px; height: 80px;" alt="placeholder" /><a href="#">Some link here</a><br />And some more text below it to continue on.</p>
<p>Maybe this is more text about this link area.</p>
<p><img src="sunflower.jpg" style="width: 70px; height: 80px;" alt="placeholder" /><a href="#">Some link here</a><br />And some more text below it to continue on.</p>
<p>Maybe this is more text about this link area.</p>
<p><img src="sunflower.jpg" style="width: 70px; height: 80px;" alt="placeholder" /><a href="#">Some link here</a><br />And some more text below it to continue on.</p>
<p>Maybe this is more text about this link area.</p>
</div>
<div id="footer">
<ul>
<li><a href="#">Main Page</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Our Services</a></li>
<li><a href="#">Free Tips</a></li>
<li><a href="#">Locations</a></li>
<li><a href="#">Contacts</a></li>
<li><a href="http://www.websitestyle.com">Design by Website Style</a></li>
</ul>
<p>Courtesy of <a href="http://www.openwebdesign.org" target="_blank">Open Web Design</a> & <a href="http://www.dubaiapartments.biz/hotels/" target="_blank">Hotels - Dubai</a></p>
</div>
</div>
</div>
------------------------------------------------------------------------------------------------
css
/* Globals */
html,body{margin:0;padding:0}
body{font: 76% arial,sans-serif;text-align:center; background-color: #ccc;}
a{ color: #981793;padding:10px;}
/* Primary Divs */
div#header { height: 4em; background-color: white; color:black; border-bottom: 2px solid #fcf;}
div#wrapper { margin-top: 5px; }
div#container{text-align:left}
div#content p{line-height:1.4}
div#navigation{background:#fff}
div#extra{background:#fff}
div#footer{background: #fff;color: #000; border-top: 2px solid #fcf; }
div#footer p{margin:0;padding:5px 10px}
div#container{width:700px;margin:0 auto; }
div#bgwrap { background: #4b4b4b url(bg3.jpg); width: 800px; margin: 0 auto;}
div#content{float:right;width:495px}
div#navigation{float:left;width:200px}
div#extra{float:left;clear:left;width:200px;}
div#footer{clear:both;width:100%}
/* TABLES */
table {border: 2px solid #69f; border-collapse:collapse; width:90%; margin-left: 3ex; }
td {background-color: #fff; padding:3px; border: 1px solid #ccc; color:#000;}
th {text-align:left;border: 1px solid #fff}
thead th {color:#fff; font-size:1.5em; background-color: #990 ; padding: 10px 6px}
tbody th {color:#fff; font-size:1.15em; background-color: #69f ; padding: 6px}
tbody th.sub {font-size: .90em; color:#fff; background-color: #336; padding: 6px}
/* TEXT STYLES */
div#content a:link, div#content a:visited { padding:0; color:#600; text-decoration:none; border-bottom: 1px solid #69f; }
div#content a:hover {background-color: #990; color:#fff; }
div#content h1 { font-size: 2.5em; color:#600; margin-top: 0; text-transform:uppercase; letter-spacing: 1px;}
div#content h2 { font-size: 2em; color: #69f; line-height: 1.3em; letter-spacing: -1px;}
div#content h3 { font-size: 1.5em; color: #990;}
div#content h4 { font-size: 1.25em; color: #966;}
div#content h5 {font-size: 1em; font-weight:bold;}
div#content h1,h2,h3,h4,h5 {padding:0 5px 0px;}
acronym {border-bottom: 1px dotted #966; cursor:help; }
form,submit { padding:0; margin:0; } /* removes extraneous padding around the form */
code { border: 1px dotted #69f; background-color: #990; color:#fff; margin-left: 3ex;}
blockquote { border: 1px solid #69f; background-color: #990; color:#fff; margin: 3ex; font-style:italic;}
/* Horizontal Navigation Menu */
#header ul { margin:0; text-align: right; padding-top: 1.6em; padding-bottom:0;}
#header ul li { list-style-type:none; display:inline;}
#header ul li a:link, #header ul li a:visited { display:inline; padding-top: 3em; text-decoration:none; color:gray; border-left: 2px solid gray;}
#header ul li a:hover { border-bottom: 1px solid gray; background: #fff url(arrow2.gif) center center no-repeat;}
.skiplink a:link, .skiplink a:visited { visibility: hidden;}
/* Vertical Navigation Menu */
#navigation { margin-bottom: 15px; }
#navigation ul { list-style-type:none; margin:0; padding:0; }
#navigation ul li {line-height: 4px; border-bottom: 1px solid gray;}
#navigation ul li a:link,#navigation ul li a:visited { text-decoration:none; color:black; text-transform:uppercase; display:block; }
#navigation ul li a:hover { background: #fff url(arrow.gif) left center no-repeat; padding-left: 25px; font-weight:bold; }
#navigation p{margin:0 10px 10px}
/* Logobox */
#logobox { background-color: white; width: 200px; border: 1px solid #fcf; text-align:center;}
#logobox h1 { border-top: 1px solid #600; }
#logobox h1, #logobox h2 { background-color: #69f; color: white; margin: 5px; margin-bottom: 0; padding: 8px; font-size: 1.3em; text-transform: uppercase; border-right: 1px solid #600; border-left: 1px solid #600;}
#logobox h2 { margin-top: 0; margin-bottom: 5px; font-size: 1em; border-bottom: 1px solid #600;}
/* Main pic area above content */
div#mainpicbox { height: 250px; border: 1px solid #fcf; margin-left: 10px; padding: 10px; margin-bottom: 15px;}
div#mainpic { height: 250px; background:green url(greendown.jpg) top left repeat-x; color:white; }
div#mainpic h2 { color:#fff; font-size: 2.75em; margin-top:0; padding-top: 2em; padding-left: 20px; margin-bottom:0; }
div#mainpic h3 { padding-left: 20px; color:#330;}
div#mainpic p, div#mainpic a:link, div#mainpic a:visited { display:inline; margin:0; color:#fff; margin-left: 10px;font-weight:bold; font-size: 1.2em; text-decoration:none; }
div#mainpic a:hover {color:#600; background-color:inherit; }
/* Extra section */
.stripnav { background: green url(greenhoriz.jpg) top left repeat; margin:0; padding: 6px; color:white; text-transform:uppercase; font-weight:bold; padding-top: 10px; padding-left: 10px; margin-bottom: 10px;}
div#extra p {margin-left: 0; }
div#extra img { float:left; padding: 3px; margin: 2px; margin-left:0; border: 1px solid #fcf; }
div#extra p a:link, div#extra p a:visited { padding:0; color: #600; font-weight:bold; padding-bottom: 1px; text-decoration:none;}
div#extra p a:hover { text-decoration:underline;}
/* Photo Gallery Area */
div#gallery { border-top: 2px solid #fcf; padding-top: 15px;}
div#gallery img {width: 50px; height: 50px; padding: 2px; border:1px solid #fcf;}
div#gallery ul { list-style-type:none; margin:0; padding:0;}
div#gallery ul li {display:inline;}
div#gallery ul li a:link, div#gallery ul li a:visited {display:inline; border-bottom:0;}
div#gallery ul li a:hover {background-color:inherit;}
/* Footer Area */
div#footer ul { list-style-type:none; margin:0; padding:0; padding-top: 2px; text-align:right; font-size: .8em; }
div#footer ul li { list-style-type:none; display:inline; border-left: 1px solid gray;}
div#footer ul li a:link,#footer ul li a:visited { display:inline; text-decoration:none; color:black; text-transform:uppercase;}
div#footer ul li a:hover {text-decoration:underline;}
div#footer p {text-align:center; margin-top: 5px;}
/* Content Area */
div#content img { border: 1px solid #fcf; padding: 2px; margin: 3px; margin-left: none; }
div#content p {padding-left: 5px;}
/* Bonus Styles */
p.rightsidelink { text-align:right;}
.rightsidelink a:link, .rightsidelink a:visited { padding:0; color:#600; font-weight:bold; text-decoration:none;}
.rightsidelink a:hover {text-decoration:underline;}
.entrytext { margin-top: 0; font-size:larger; font-weight:bold;}
.bright { font-size: 1.5em; color:#600; text-transform:uppercase;}
-----------------------------------------------------------------------------------
