Forum'da ara:
Ara


« Önceki başlık :: Sonraki başlık »  
Yazar Mesaj
Mesaj08.12.2011, 18:57 (UTC)    
Mesaj konusu: tasarım hatası düzeltme.

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> &amp; <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;}
-----------------------------------------------------------------------------------
Mesaj09.12.2011, 06:32 (UTC)    
Mesaj konusu:

T.Üstü
_________
Kod:
<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">


t.altı
______
<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>
<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> &amp; <a href="http://www.dubaiapartments.biz/hotels/" target="_blank">Hotels - Dubai</a></p>
</div>

</div>
</div>

Css
_____
table {margin-left: auto;margin-right: auto}
h1#title{display: none;}
h2#title span {display: none;}
div.header{display: none;}
li.nav_element{list-style-type: none;}
li.nav_element{display: none;}
/* 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;}
Mesaj09.12.2011, 17:11 (UTC)    
Mesaj konusu: teşekkür ederim

yardımınız için teşekkür ederim; ancak sorun çözülemedi. Yapılan değişiklik sadece resmi sayfa altına indiriyor. Yazılar yine sağa kaymış durumda. aslında ben bunu Nvu programında düzeltip yeniden bedavasiteme aktarıyorum ama hata aynen tekerrür ediyor.
Önceki mesajları göster:   


Powered by phpBB © 2001, 2005 phpBB Group
Türkçe Çeviri: phpBB Türkiye & Erdem Çorapçıoğlu