Div Katmanı Ve Css Sorunsalı?

Osmanosaman · 2 Ağustos 2010

Arkadaslar merhaba
Bir div katmanı içinde yazılan yazıların katmanın dışına cıkmamasını nasıl engelleyebilirim..

Bide mesela div katmanın içinde bir başka katman var bunun etrafında olucak sekilde yazılar nasıl sıralanır diger katmanın içine girmeden nasıl bir yöntem uygulanmalı?

Osicen · 2 Ağustos 2010

şu siteye bak http://www.webders.com/kategori/adobe-dreamweaver/

mgsmus · 2 Ağustos 2010

Biraz daha açıklayıcı olursanız yardımcı olabilirim.

Osmanosaman · 2 Ağustos 2010

Söyle anlatıyım bir tane div var 300px 300px degerinde
bunu içinde 50px 50px sol üst köseye dayalı bir resim alanı için div var
ben büyük divin içine küçük div katmanı girmicek sekilde yazı yazmak istiyorum büyük div katmanının dışınada taşmıcak sekilde

penguin · 2 Ağustos 2010

Dıştaki div'i şu şekilde düzenle.

<div style="padding: 0px;"><img src="space.png" style="width: 50px; height: 50px; align: top left;"/></div>

Osmanosaman · 2 Ağustos 2010

Arkadasım aradgım sonuc bu degil bunda sorun yok zaten yapamadıgım

div in içine yazılan yazıların cok uzun oldugunda diz dışına cıkması bunu nasıl engelliyebilirim...

mgazi · 2 Ağustos 2010

Dışta ki büyük div katmanına height:300px; verme. Height değerini kendi otomatik olarak ayarlasın.

orcnd · 2 Ağustos 2010

overflow:hidden dersen gizler taşanları
overflow:scroll dersen scroolbar çıkartır

Osmanosaman · 2 Ağustos 2010

height te sorun yok

---------- saat 15:08 eklendi ---------- önceki mesaj saat 15:06 eklenmişti ----------

taşan yazıların bi alt satıra geçmesini saglıyamıyormuyuz peki.. css le

ti3st0o0 · 2 Ağustos 2010

50 px olan kücük div in özelliklerine float:left eklemeyi bi dene eğer olmazsa elimde css ile ilgili döküman var onu gönderebilirim bi ara ...

mgazi · 2 Ağustos 2010

Sorunun height olmadığına eminmisin?

HTML:

<!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" dir="ltr" lang="tr-TR"> 
<head> 
<title>Flyco Traingin Solutions-Aviation Training</title> 
<meta http-*****="Content-Type" **********text/html; charset=utf-8" /> 
<style type="text/css">@import "style.css";</style> 

</head> 
<body> 

<div id="kapsa">
<img src="http://www.lipsum.com/images/lipsum07.gif" />



Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pharetra aliquet vulputate. Suspendisse laoreet blandit diam quis tristique. Praesent urna nulla, accumsan nec lacinia in, pharetra id erat. Donec condimentum, enim sit amet porta aliquet, nibh risus pretium dui, sit amet commodo felis leo sit amet purus. Pellentesque metus dolor, dapibus id placerat eget, elementum dapibus libero. Mauris a massa ut leo porta ultricies ut at libero. Proin metus mauris, sodales ac lacinia vitae, iaculis nec enim. Curabitur pellentesque consectetur elit, in hendrerit turpis aliquam eu. Nulla sodales sollicitudin arcu sit amet fermentum. Vivamus ac nunc massa. Sed neque quam, pulvinar ac venenatis ut, adipiscing tristique ligula. Vestibulum ac gravida orci. Duis hendrerit enim et erat semper ac iaculis nunc adipiscing. Integer pharetra justo vitae massa semper non fringilla odio iaculis. Cras ac convallis dui.

Nulla imperdiet tristique tempor. In eget urna vel ligula blandit consequat vel a justo. Nam non ante quis nunc imperdiet vestibulum. Aliquam dui mauris, molestie et porttitor id, pretium vel nulla. Praesent at lorem quis diam rhoncus viverra ac ac purus. Integer et elit purus. Cras a sollicitudin nibh. Donec ante velit, ultricies a viverra a, fermentum in nunc. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec laoreet egestas urna, a cursus libero ultrices sit amet. Cras et augue dui, at fringilla diam. Donec rutrum libero id magna ultrices sodales. Curabitur eget elit sit amet lectus interdum suscipit.

Suspendisse posuere, magna vel porttitor elementum, felis purus condimentum orci, sed cursus dui libero nec leo. Suspendisse sit amet risus ipsum, at porta felis. Donec condimentum neque ac lorem lobortis sit amet ullamcorper tellus auctor. Morbi at eros nec lacus aliquet ornare a a felis. Nam dapibus accumsan iaculis. Vivamus dolor augue, sodales ac accumsan et, tincidunt ac enim. Quisque est sem, ullamcorper vel semper nec, gravida vitae eros. Donec bibendum gravida lectus, et porttitor dolor pharetra ut. Duis nec dui nunc. Cras in lacus eget erat molestie egestas non id arcu. Nunc vel neque quis velit dapibus adipiscing. Quisque in volutpat enim. Etiam cursus iaculis interdum. Nam tincidunt consectetur elit ut condimentum. Aenean ultrices, urna a eleifend tincidunt, lacus arcu commodo justo, congue porta metus nulla nec tortor. In hac habitasse platea dictumst.

Nam euismod, nisl ut tincidunt pharetra, libero tellus tempor sem, nec mollis ante turpis nec eros. Sed magna justo, tempus a congue quis, vestibulum ullamcorper ipsum. Integer arcu purus, blandit eget interdum sit amet, fringilla vitae diam. Mauris nulla quam, fermentum sit amet feugiat ac, molestie hendrerit lectus. Donec tincidunt, justo eu tempus gravida, enim felis mollis tortor, id tincidunt tortor metus at ipsum. Cras posuere, nibh et interdum commodo, est purus eleifend felis, sit amet tristique elit ante sed erat. Duis sed nunc lorem. Cras felis augue, euismod ut tempor vel, pulvinar ac enim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras accumsan sagittis risus et fringilla. Nunc justo neque, hendrerit eu sollicitudin eget, tristique nec tellus. Vestibulum nunc tortor, molestie id molestie eget, accumsan ut lorem. Fusce sed pellentesque quam.

Nulla blandit, augue lacinia ornare gravida, metus mi varius leo, nec adipiscing nunc tortor auctor est. Duis non tortor at sapien malesuada aliquet. Morbi ultricies ipsum mi, vel hendrerit mi. Suspendisse vitae tortor sapien, sit amet pharetra risus. Cras consequat metus at magna congue lobortis. Cras ipsum dui, ullamcorper eu pretium at, pharetra sed massa. Donec ac felis nisi. Sed non leo erat. Sed dignissim lectus convallis erat convallis vitae cursus elit mattis. Nullam varius dictum elementum. Pellentesque mattis facilisis vulputate. Curabitur quis congue lorem.

</div>
 

</body> 
</html>

Css

Kod:

#kapsa {
width:300px;
background:#ff0000;
margin:0px;
padding:0px;
}
#kapsa img{ float:left;}

Eğer #kapsa sınıfına height:300px; değerini eklersen sorunun ne olduğunu anlarsın.

Osmanosaman · 2 Ağustos 2010

dostum haklısın ben sana bişey demiyorum senin yaptıgını bende height için yapıyorum ama benim sorunum width te senin gibi yazılar bir alt satıra gecmiyo bende

Neyden kaynaklanıyo olabilir ?

mgazi · 2 Ağustos 2010

Pardon. Ben sorunun yükseklikte olduğunu düşünmüştüm. Sen html ve css kodlarını buraya eklersen, çözüm bulunabilmesi için daha iyi olur.

Osmanosaman · 2 Ağustos 2010

----------------------------------------------Css Kodları----------------------------------------------------
.tutorial
{
width:47%;
margin:10px;
float:left;
word-spacing : normal;
text-align : left;
letter-spacing : 0;
line-height :1em;
font-size :.8em;
}
.tutorial-line
{
width:100%;
background:#ffd100;
-moz-border-radius: 1px;
-webkit-border-radius:1px;
height:3px;

}
.tutorial-header
{
height:25px;
text-align:left;
width:100%;
padding:3px;
font-weight:bold;
}

.tutorial-content
{
border:1px solid red;
padding:0;
margin:0;
width:100%;
min-height:175px;

}
.tutorial-picture
{
width:100px;
height:100px;
margin:5px;
border:1px dotted red;
}
.tutorial-footer
{

height:20px;
width:100%;
border:1px dotted red;
}
.tutorial-date
{
height:11px;
width:90px;
font-weight:bold;
text-align:right;
float:right;
margin:5px;
}
.tutorial-date-picture
{
height:11px;
width:11px;
float:left;
background-image:url(images/calendar.gif);
}

---------------------------------------------------------------------------------------------------
Html kodları-------------------------------------------------------------------------------
<div class="tutorial">
<div class="tutorial-line">
</div>
<div class="tutorial-header">
Visual Studio da 2008 de mukemmel code Snippetlar<br />Tıklada oku bakalım
</div>
<div class="tutorial-line">
</div>
<div class="tutorial-content">
<div class="tutorial-picture">
Picture-Here
</div>asdddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd
Writing anything
</div>
<div class="tutorial-footer">
<div class="tutorial-date">
<div class="tutorial-date-picture"></div>
23.06.1988
</div>
</div>
</div>
-----------------------------------------------------------------------------------------------------------

Bu konularda yeniyim arkadaslar gereksiz yere cok div acmış olabilirim maruz görün

mgazi · 2 Ağustos 2010

Verdiğin kodları aynen çalıştırdım fakat dediğin gibi birşey olmadı. Ben chrome, ff 4, ve ie 8 de denedim. Bir sorun yok.

Osmanosaman · 2 Ağustos 2010

burda içerik kısa kalmıs aaaaaaaaaaaaaaaaalı yerler uzatırsan onları aaaaaaaaaaaaaaaaasaaaaaaaaaaaaa diye yeteri kadarı dısarı tasdıgını görüceksin sorunum o...

benim attıgım bu div baska divin içnde oldugundan dahaa kucüktü cunku width degeri yuzdelik yukarıdan direk alırsan sayfaya göre %47 alınca width degeri buyuyo o yuzden yazdıgım iöerik az gelmiş uzatıp bakarsın anlıcaksın bak...

mgazi · 3 Ağustos 2010

Dediğin gibi yaptım. Uzun bir içerik koydum. %47'lik değeri de 300px'e çektim yine de dediğin gibi olmadı. Herşey normal.

Div Katmanı Ve Css Sorunsalı?

Osmanosaman

Öğrenci

Osicen

Öğrenci

mgsmus

Asistan

Osmanosaman

Öğrenci

penguin

Profesör

Osmanosaman

Öğrenci

mgazi

Asistan

orcnd

Dekan

Osmanosaman

Öğrenci

ti3st0o0

Öğrenci

mgazi

Asistan

Osmanosaman

Öğrenci

mgazi

Asistan

Osmanosaman

Öğrenci

mgazi

Asistan

Osmanosaman

Öğrenci

mgazi

Asistan

Benzer konular

SDN Haberleri

Son mesajlar

Forum istatistikleri

Sosyal ağlar