CSS: Grenze nicht richtig angezeigt

Ich versuche, einen vertikalen linken Rand über mehrere Elemente zu erstellen, und ich habe versucht, ein paar der am besten bewerteten Vorschläge aus this thread, aber ohne Erfolg.CSS: Grenze nicht richtig angezeigt

Derzeit sieht die Grenze wie folgt aus:

(ja, es ist so pathetisch schwarze Linie)

Natürlich, was ich will ist eigentlich für die Linie, die die gesamte linke aufzunehmen Seite der Seite. Alle Ratschläge werden sehr geschätzt!

Meine ERB-Datei:

<h1 class="p1_vs_p2"><%= @game.player.name %> vs <%[email protected] %></h2> 
<h2 class="player_chose"> You chose <%= @game.player.weapon.capitalize %></h2> 
<h2 class="computer_chose"><%= @game.computer.name %> chose <%[email protected] %></h2> 
<div style="clear: both;"></div> 

<% if @game.outcome == Game::POSSIBLE_OUTCOMES[0] %> 
    <h2 class="victory_message"> Congratulations, you win!</h2> 
<% elsif @game.outcome == Game::POSSIBLE_OUTCOMES[1] %> 
    <h2 class="tie_message"> It's a tie!</h2> 
<% else %> 
    <h2 class="defeat_message">You lost this time.</h2> 
<% end %> 

<h4> <a href="/" class="play_again">Play Again</a> </h4> 
<div class="vertical_line">

Meine CSS-Datei:

html { 
    height: 100% 
} 

body { 
    background-color: #f4f1ec; 
} 

input[type="radio"]{ 
    margin: 0 5px 0 10px; 
} 

table.center { 
    margin-left:auto; 
    margin-right:auto; 
    } 

.title { 
    padding-top: 40px; 
    text-align: center; 
    font-family: 'Raleway', sans-serif; 
    color: #6495ED; 
    padding-bottom: 100px; 
} 

.input_name_button { 
    position: fixed; 
    text-align: center; 
    top: 50%; 
    left: 50%; 
    margin-top: -50px; 
    margin-left: -100px; 
} 

.play_button { 
    text-align: center; 
    padding-top: 30px; 
} 

.p1_vs_p2 { 
    padding-top: 40px; 
    text-align: center; 
    font-family: 'Raleway', sans-serif; 
    color: #B0C4DE; 
    padding-bottom: 100px; 
} 

.player_chose { 
    color: #6495ED; 
    float: left; 
    padding-left: 200px; 
} 


.computer_chose { 
    color: #FFA07A; 
    float: right; 
    padding-right: 50px; 
} 

.victory_message { 
    color: #8FBC8F; 
    text-align: center; 
    bottom: 0px; 
    width: 100%; 
    padding-bottom: 300px; 
    position: fixed; 
} 

.tie_message { 
    color: #FFDEAD; 
    text-align: center; 
    bottom: 0px; 
    width: 100%; 
    padding-bottom: 300px; 
    position: fixed; 
} 

.defeat_message { 
    color: #F08080; 
    text-align: center; 
    bottom: 0px; 
    width: 100%; 
    padding-bottom: 300px; 
    position: fixed; 
} 

a.play_again { 
    color: #A9A9A9; 
    text-align: center; 
    bottom: 0px; 
    width: 100%; 
    padding-bottom: 100px; 
    position: fixed; 
    font-family: 'Raleway', sans-serif; 
    text-decoration: none; 
} 

.vertical_line { 
    width: 4px; 
    background-color: black; 
    height: 100%; 
    float: left; 
}

Lassen Sie mich wissen, wenn Sie etwas anderes und ich werde glücklich sein, es zu schaffen. Vielen Dank. :)

Quelle

2017-03-03 IainK

haben Sie versucht, den gesamten Inhalt in ein div zu legen und seine Randeigenschaften so zu machen?

border-top-style: none; 
border-right-style: none; 
border-bottom-style: none; 
border-left-style: solid;

Quelle

2017-03-03 23:29:10

ich gerade versucht, alle Inhalte für die Seite in einem div Einwickeln und angewandt, um den Styling Sie zur Verfügung gestellt, aber es hat nur eine leicht größer blac k Zeile erscheint stattdessen am oberen Rand der Seite? Ich bin ein bisschen noob, wenn es um CSS geht haha, also vergib mir! Oh, und danke für die Antwort! – IainK

Ich musste nur dir helfen .. Ich habe es auf W3shools versucht und es hat gut funktioniert: P –

Sie können folgende CSS Stylesheet hinzufügen:

body { 
    margin-left: 0; 
    border-left: 5px solid black; 
}

Sie können auch ein paar Ränder zu entfernen, die Ihre Überschriften erstellen.

Quelle

2017-03-03 23:31:11

Hey! Danke für die Antwort. Dies funktionierte größtenteils, aber am oberen und unteren Rand der Seite blieb eine kleine Lücke. Irgendwelche Ideen? – IainK

Sie haben wahrscheinlich einige Elemente, die Ränder haben, wie h1s und so. Sie müssen diese Ränder zurücksetzen, indem Sie ihnen den Wert "0" geben. –

Hmm, ich habe nur "Rand" innerhalb meiner CSS-Datei verwendet, wenn es sich um Klassen auf verschiedenen Seiten bezieht. Könnte das immer noch das Problem sein? – IainK

den relevanten Teil des CSS in einem div wickeln und den linken Rand zu diesem

Hier DIV gelten, was das mit Ihrem Code führt (ohne Berücksichtigung der Skripte, die Sie nicht gebucht haben, was das ist Grund für all die „%“ Sachen in dem Inhalt):

html { 
 
    height: 100% 
 
} 
 

 
body { 
 
    background-color: #f4f1ec; 
 
} 
 

 
input[type="radio"]{ 
 
    margin: 0 5px 0 10px; 
 
} 
 

 
table.center { 
 
    margin-left:auto; 
 
    margin-right:auto; 
 
    } 
 

 
.title { 
 
    padding-top: 40px; 
 
    text-align: center; 
 
    font-family: 'Raleway', sans-serif; 
 
    color: #6495ED; 
 
    padding-bottom: 100px; 
 
} 
 

 
.input_name_button { 
 
    position: fixed; 
 
    text-align: center; 
 
    top: 50%; 
 
    left: 50%; 
 
    margin-top: -50px; 
 
    margin-left: -100px; 
 
} 
 

 
.play_button { 
 
    text-align: center; 
 
    padding-top: 30px; 
 
} 
 

 
.p1_vs_p2 { 
 
    padding-top: 40px; 
 
    text-align: center; 
 
    font-family: 'Raleway', sans-serif; 
 
    color: #B0C4DE; 
 
    padding-bottom: 100px; 
 
} 
 

 
.player_chose { 
 
    color: #6495ED; 
 
    float: left; 
 
    padding-left: 200px; 
 
} 
 

 

 
.computer_chose { 
 
    color: #FFA07A; 
 
    float: right; 
 
    padding-right: 50px; 
 
} 
 

 
.victory_message { 
 
    color: #8FBC8F; 
 
    text-align: center; 
 
    bottom: 0px; 
 
    width: 100%; 
 
    padding-bottom: 300px; 
 
    position: fixed; 
 
} 
 

 
.tie_message { 
 
    color: #FFDEAD; 
 
    text-align: center; 
 
    bottom: 0px; 
 
    width: 100%; 
 
    padding-bottom: 300px; 
 
    position: fixed; 
 
} 
 

 
.defeat_message { 
 
    color: #F08080; 
 
    text-align: center; 
 
    bottom: 0px; 
 
    width: 100%; 
 
    padding-bottom: 300px; 
 
    position: fixed; 
 
} 
 

 
a.play_again { 
 
    color: #A9A9A9; 
 
    text-align: center; 
 
    bottom: 0px; 
 
    width: 100%; 
 
    padding-bottom: 100px; 
 
    position: fixed; 
 
    font-family: 'Raleway', sans-serif; 
 
    text-decoration: none; 
 
} 
 

 
.wrapper_for_left_border { 
 
    border-left: 2px solid black; 
 
}

<div class="wrapper_for_left_border"> 
 
<h1 class="p1_vs_p2"><%= @game.player.name %> vs <%[email protected] %></h2> 
 
<h2 class="player_chose"> You chose <%= @game.player.weapon.capitalize %></h2> 
 
<h2 class="computer_chose"><%= @game.computer.name %> chose <%[email protected] %></h2> 
 
<div style="clear: both;"></div> 
 

 
<% if @game.outcome == Game::POSSIBLE_OUTCOMES[0] %> 
 
    <h2 class="victory_message"> Congratulations, you win!</h2> 
 
<% elsif @game.outcome == Game::POSSIBLE_OUTCOMES[1] %> 
 
    <h2 class="tie_message"> It's a tie!</h2> 
 
<% else %> 
 
    <h2 class="defeat_message">You lost this time.</h2> 
 
<% end %> 
 

 
<h4> <a href="/" class="play_again">Play Again</a> </h4> 
 
</div>

Quelle

2017-03-03 23:35:05 Johannes

Hey, ich habe versucht, dies zu tun, aber abhängig davon, wo ich das div starte, nimmt die vertikale Linie immer nur ein kleines Segment der Seite ein. Wenn ich dich nicht völlig missverstanden habe, dann entschuldige mich! – IainK

schauen Sie sich den Ausschnitt an, den ich hinzugefügt habe – Johannes

Hey Johannes - danke, dass du dir die Zeit genommen hast, ein Snippet mit aufzunehmen. Leider habe ich das schon versucht (und ich habe es gerade noch einmal mit genau dem CSS versucht, das du benutzt hast), und all das macht die schwarze Linie von der Mitte der Seite an den Anfang der Seite.Irgendwelche Ideen, warum dies passieren könnte? Danke noch einmal! – IainK

CSS: Grenze nicht richtig angezeigt

Antwort

Verwandte Themen