Ich habe Probleme mit der Ausrichtung meines Textes für eine BBC-Replikat-Website

Ich habe vor allem Probleme beim Ausrichten meines Textes im vierten Abschnitt/Orange Div oder Content-Abschnitt genannt. Ich möchte, dass der Text im Inhaltsbereich div linksbündig ausgerichtet wird, egal wie ich meinen Randabstand einstelle, er richtet meinen Text nicht an der oberen linken Ecke meines Inhaltsbereichs div aus. Hier ist, was mein Code wie folgt aussieht:Ich habe Probleme mit der Ausrichtung meines Textes für eine BBC-Replikat-Website

<head> 

    <title>Technology</title> 

    <style type="text/css"> 

    #top-bar{ 

    width:1000px; 
    margin:0 auto; 
    background-color:#FFFFFF; 
    height:50px; 





    } 

    body{ 
    margin:0; 
    padding:0; 
    font-family:Helvetica, Arial , sans-serif; 
    } 

    #logo{ 
    margin-top:4px; 
    width:100px; 
    float:left; 

    } 



    .topbar-section{ 
    float:left; 
    border-left:1px grey solid; 
    height:100%; 
    } 

    #sign-in{ 


    border-right:1px grey solid; 
    width:150px; 
    height:100%; 

    } 

    #signin-text{ 

    position:relative; 
    left:30px; 
    top:15px; 
    font-weight:bold; 


    } 

    #empty-sec{ 
    border-right:2px grey solid; 
    width:80px; 

    } 

    .topbar-menu{ 
    font-weight:bold; 
    font-size:90%; 
    padding:13px 14px 0 0; 
    height:35px; 


    } 

    #search{ 

    width:80%; 
    background-color:grey; 
    border:none; 
    font-weight:bold; 
    backgroun-image:searchicon; 

    } 

    #searchicon{ 


    position:relative; 
    left:140px; 
    top:-35px; 
    margin-left:-3px; 
    } 

    #red-bar{ 
    margin-top:20px; 
    width:1000px; 
    margin:0 auto; 
    background-color:#BB1919; 
    height:56px; 
    } 

    #redbar-text{ 
    float:right; 
    margin-top:10px; 
    margin-right:27px; 
    margin-bottom:10px; 
    color:#FFFFFF; 
    font-family:Helvetica; 
    font-size:160%; 
    border:3px black solid; 
    padding-bottom:0px; 

    } 

    #dark-red{ 


    background-color:#A91717; 
    width:1000px; 
    margin:0 auto; 
    height:50px; 

    } 

    .redbar-section{ 
    float:left; 
    border-left:0.5px black solid; 
    height:100%; 
    } 

    .redbar-menu{ 
    font-weight:bold; 
    color:#ffffff; 
    font-family:Height; 
    font-size:90%; 
    padding:13px 14px 0 0; 
    height:80%; 


    } 

    #downpointer{ 

    position:relative; 
    left:40px; 
    bottom:18px; 


    } 

    #more{ 
    color:#FFFFFF; 
    margin-left:4px; 
    } 

    #content-section{ 
    background-color:orange; 
    height:600px; 
    } 

    #content-text{ 
    text-align:left; 
    } 



    </style> 

</head> 

<body> 

<div id="top-bar"> 

<img id="logo" src="bbclogo.png"> 

<div id="sign-in" class ="topbar-section"> 

    <span id="signin-text"> Sign In</span> 

</div> 

<div id="empty-sec" class="topbar-section"> 




</div> 

<div class="topbar-section topbar-menu"> 

News 

</div> 

<div class="topbar-section topbar-menu"> 

Sports 

</div> 

<div class="topbar-section topbar-menu"> 


Weather 
</div> 

<div class="topbar-section topbar-menu"> 

TV 

</div> 

<div class="topbar-section topbar-menu"> 

Radio 

</div> 

<div class="topbar-section topbar-menu"> 

CBBC 


</div> 
<div class="topbar-section topbar-menu"> 

CBeebies 

</div> 

<div class="topbar-section topbar-menu"> 

More... 

</div> 

<div class="topbar-section topbar-menu"> 

<form > 
<input id="search" type="text" placeholder="Search..."> 



</form> 

<img id ="searchicon"src="searchicon.png"> 


</div> 

</div> 

<div id="red-bar"> 
<span id="redbar-text">Find local news</span> 
</div> 

<div id ="dark-red"> 

<div class="redbar-section redbar-menu"> 

Home 

</div> 

<div class="redbar-section redbar-menu"> 

UK 

</div> 

<div class="redbar-section redbar-menu"> 

World 

</div> 


<div class="redbar-section redbar-menu"> 

Business 

</div> 


<div class="redbar-section redbar-menu"> 

Politics 

</div> 


<div class="redbar-section redbar-menu"> 

Tech 

</div> 


<div class="redbar-section redbar-menu"> 

Health 

</div> 


<div class="redbar-section redbar-menu"> 

Education 

</div> 


<div class="redbar-section redbar-menu"> 

Entertainment & Arts 

</div> 


<div class="redbar-section redbar-menu"> 

Video and Audio 

</div> 


<div class="redbar-section redbar-menu"> 


<div id="more"> 
More 
</div> 
<img id="downpointer" src="downpointer.png"> 

</div> 




</div> 

</div> 

<div id="content-section"> 


<span id="content-text"> dadadadaa</span> 


</div> 












</body>

Quelle

2016-04-17 Jane Poe

Es wäre gut, wenn Sie eine Geige bieten könnten, so dass es einfacher für andere ist, Ihnen zu helfen –

Ich weiß nicht, was eine Geige ist. Stackoverflow erlaubt mir nicht, einen Screenshot der Ausgabe meines HTML zu posten. –

Sie können Ihre html, CSS und Javascripts hier einfügen. Jeder kann darauf zugreifen, bearbeiten und testen. Daher müssen wir keine Datei erstellen und den gesamten Code manuell kopieren. [JsFiddle] (https://jsfiddle.net/) –

Try this:

<div style="text-align:left;"> 
    <span id="content-text"> dadadadaa</span> 
    </div>

Fiddle: https://jsfiddle.net/02hfrvvx/

Quelle

2016-04-17 11:46:38

Das scheint zu funktionieren, wenn ich meinen Code ausführen ist Geige (https://jsfiddle.net/noblegas/gk57neco/3/), aber es funktioniert nicht, wenn ich öffne mein Code in jedem Internet-Browser –

setzen Sie den Rest Ihres Codes hier –

hinzufügen "clear: both;" zu # content Schnitt Stil:

#content-section{ 
    background-color:orange; 
    height:600px; 
    clear: both; 
}

Quelle

2016-04-17 11:56:14

Danke, das hat funktioniert. Was sollte die klare Funktion tun? –

bedeutet dies "keine schwebenden Elemente auf der linken oder der rechten Seite erlaubt", wahrscheinlich war es aufgrund anderer divs Float-Attribute. –

im ".redbar-Menü", verwenden Sie "line-height: 51px;" anstelle der Polsterung oben, und auch Höhe einstellen: 100%; Als Anmerkung, spielen Sie bitte mit den Chrome-Entwicklertools, um Ihre CSS- und JS-Probleme zu finden. viel Glück

Quelle

2016-04-17 19:27:25

Ich habe Probleme mit der Ausrichtung meines Textes für eine BBC-Replikat-Website

Antwort

Verwandte Themen