CSS ile Arama Butonu Biçimlendirme

EmreEfe

Hectopat
Katılım
14 Kasım 2015
Mesajlar
222
Daha fazla  
Cinsiyet
Erkek
Merhaba, ASP.NET öğrenmek amaçlı CSS ve ASP.NET kullanarak bir site yazaya çalışıyorum. Fakat arama Textboxu ayarladığım yere değilde aşağı kayıyor. Düzeltemedim bir türlü.


Ekran Alıntısı.PNG


CSS Kodları:
Kod:
body {
    background: #d5d5d5;
    font-family: 'Trebuchet MS', Arial, 'Comic Sans MS'
}

*{
    margin : 0;
    padding: 0;
    border: 0;
}

#wrapper{
    width: 960px;
    height: 1100px;
    margin : 0 auto;
   
}

header{
    float: left;
    width:100%;
    height:45px;
    background-color:#fff;

}

header .logo{
    float: left;
    width:89px;
    border-right: 1px solid #ff0000;
    background-color: #fff;
    text-align: center;
    line-height:45px;
    color: #990000;

}

header nav{
    width: 609px;
    height: 45px;
    border-right: 1px solid #ff0000;
    line-height: 45px;
}

header nav ul{
    list-style-type: none;
}

header nav ul li {
    float: left;
    margin-left: 15px;
    color:#555;
}

header .arama-wrap{
    float:left;
    width: 260px;
    height: 45px;

}

ASP.NET Kodu:
PHP:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="default.aspx.cs" Inherits="jupiter._default" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Deneme</title>

    <link href="/style.css" rel="stylesheet" />

</head>
<body>
    <form id="form1" runat="server">
        <div id="wrapper">
       
                 <header>

                            <div class="logo">
                                LOGO
                            </div>
                           
                                <nav>
                                     <ul>

                                            <li> Anasayfa </li>
                                            <li> Konular </li>
                                            <li> Duyurular </li>
                                            <li> İletişim </li>

                                     </ul>
                                 </nav>



                                <div class ="arama-wrap">

                                   
                                    <asp:TextBox ID="txtArama" CssClass="txtArama" runat="server"></asp:TextBox>


                                </div>
                 </header>  

        </div>
    </form>
</body>
</html>
 
Son düzenleme:
Float uyguladığın nesnelerin kapsayıcısına ya "overflow: hidden" uygula ya da kapsayıcıyı kapatmadan "clear: both" değerini taşıyan bir "div" ekle. Diğer yandan olmamasının sebebi kapsayıcı içindeki her şeye "float" uygulamışsın ama "nav" için uygulamamışsın. Bu yüzden normal olarak sıralamıyor. Float değerini "nav" içinde uygularsan problemin çözüme kavuşur.
 
Float uyguladığın nesnelerin kapsayıcısına ya "overflow: hidden" uygula ya da kapsayıcıyı kapatmadan "clear: both" değerini taşıyan bir "div" ekle. Diğer yandan olmamasının sebebi kapsayıcı içindeki her şeye "float" uygulamışsın ama "nav" için uygulamamışsın. Bu yüzden normal olarak sıralamıyor. Float değerini "nav" içinde uygularsan problemin çözüme kavuşur.
Düzeldi, teşekkürler.
 
Uyarı! Bu konu 9 yıl önce açıldı.
Muhtemelen daha fazla tartışma gerekli değildir ki bu durumda yeni bir konu başlatmayı öneririz. Eğer yine de cevabınızın gerekli olduğunu düşünüyorsanız buna rağmen cevap verebilirsiniz.

Technopat Haberler

Yeni konular

Geri
Yukarı