arkadaşlar bu görüntüyü sağlamaya çalıştığımda paragraflar üst üste geçiyor,padding ve margin kullandığımda ise listeyi de aşağıya itiyor.yukarıdaki görüntü gibi sayfa oluşturmak için ne yapmalıyım?
|
|
Paragraflar üst üste geçiyor
- Konbuyu başlatan umit_agdeniz
- Başlangıç tarihi
arkadaşlar bu görüntüyü sağlamaya çalıştığımda paragraflar üst üste geçiyor,padding ve margin kullandığımda ise listeyi de aşağıya itiyor.yukarıdaki görüntü gibi sayfa oluşturmak için ne yapmalıyım?
Görselinizin aynısı için aşağıdaki kod işinizi görecektir. Özel durumlar varsa yazarsanız sevinirim.
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<style type="text/css" title="">
.sol {
width:200px;
float:left;
}
.sol1 {
width:175px;
background-color: #FF0000;
}
.sag{
width:400px;
float:left;
margin-left:50px;
}
.sag1{
width:375px;
margin-bottom:15px;
background-color: #FF0000;
}
.sag2{
width:375px;
margin-bottom:15px;
background-color: #FF0000;
}
.sag3{
width:375px;
background-color: #FF0000;
}
</style>
</head>
<body>
<div class="sol">
<p class="sol1"><br /><br /><br /><br /> Liste Liste Liste Liste Liste Liste Liste Liste Liste Liste Liste Liste Liste <br /><br /><br /><br /><br /></p>
</div>
<div class="sag">
<p class="sag1">Birinci paragraf Birinci paragraf Birinci paragraf Birinci paragraf Birinci paragraf Birinci paragraf Birinci paragraf Birinci paragraf Birinci paragraf Birinci paragraf Birinci paragraf Birinci paragraf </p>
<p class="sag2">İkinci paragraf İkinci paragraf İkinci paragraf İkinci paragraf İkinci paragraf İkinci paragraf İkinci paragraf İkinci paragraf İkinci paragraf İkinci paragraf İkinci paragraf İkinci paragraf </p>
<p class="sag3">Üçüncü paragraf Üçüncü paragraf Üçüncü paragraf Üçüncü paragraf Üçüncü paragraf Üçüncü paragraf Üçüncü paragraf Üçüncü paragraf Üçüncü paragraf Üçüncü paragraf Üçüncü paragraf Üçüncü paragraf </p>
</div>
</body>
</html>arkadaşım çok teşekkür ederim tam istediğim gibi oldu sağolasın