2016-05-10 14 views
0

Sehr neue Codierung,Borders verursacht Ausrichtungsprobleme mit divs und Absätze

Hauptsächlich suchen border Hilfe und navbar Frage der Trennung von Wörtern

HTML

<!DOCTYPE html> 
<html> 
    <link type="text/css" rel="stylesheet" href="stylesheet.css" /> 

    <head> 
    <title>Rock Coast</title> 
    <meta charset="utf-8" /> 
    <link rel="stylesheet" type="text/css" href="main.css"> 
    </head> 
    <header> 
    <img src="http://s32.postimg.org/5bebu6mbl/Image_5_8_16_at_12_10_PM.jpgHome"></img> 
    <div id="nav"> 
     <span><a href="#">Home</a></span> 
     <span><a href="#"><button>Televeisions</button></a></span> 
     <span><a href="#">Electronics</a></span> 
     <span><a href="#">Services</a></span> 
    </div> 
    </header> 

    </body> 
    <div id="black"> 
    <h1> Something Occurs</h1> 
    <p>Within this space is some text, or other graphical representations of things that this page displays</p> 
    </div> 
    <h1> Products </h1> 
    <div id="parent"> 
    <span id="first"> <b>Product Name</b> </span> 
    <span id="second"> <b>Product Name</b></span> 
    <span id="third"> <b>Product Name</b> </span> 
    </div> 
    <div id="left"> 
    <pre> 
    This is a product 
    description 
    It takes up a few 
    lines of space. 
    <span style= "color:#b25a03;font-style:bold;"><strong>________________________ </strong></span> 

      Dimensions 
    Product might go 
    Info:  here 

       Another 
    More  piece of 
    Info:  data 

    <span style= "color:#b25a03;font-style:bold;"><strong>________________________ </strong></span> 

    Buy it now! 
    </pre> 
    </div> 
    <div id="center"> 
    <pre> 
    This is a product 
    description 
    It takes up a few 
    lines of space. 
    <span style= "color:#b25a03;font-style:bold;"><strong>________________________ </strong></span> 

      Dimensions 
    Product might go 
    Info:  here 

       Another 
    More  piece of 
    Info:  data 

    <span style= "color:#b25a03;font-style:bold;"><strong>________________________ </strong></span> 

    Buy it now! 
    </pre> 
    </div> 
    <div id="right"> 
    <pre> 
    This is a product 
    description 
    It takes up a few 
    lines of space. 
    <span style= "color:#b25a03;font-style:bold;"><strong>________________________ </strong></span> 

      Dimensions 
    Product might go 
    Info:  here 

       Another 
    More  piece of 
    Info:  data 

    <span style= "color:#b25a03;font-style:bold;"><strong>________________________ </strong></span> 

    Buy it now! 
    </pre> 
    </div> 
    </body> 

</html> 

CSS

header { 
    height: 5.5em; 
    background: gray; 
    color: Black; 
    text-align: justify; 
    overflow: hidden; 
} 
img { 
    float: left; 
} 
header { 
    height: 5.5em; 
    background: gray; 
    color: Black; 
    text-align: justify; 
    overflow: hidden; 
} 
img { 
    float: left; 
} 
#nav { 
    width: 600px; 
    text-align: center; 
    margin-top: 2.5em; 
} 

#nav span a { 
    color: black; 
    text-decoration: none; 
    padding: 10px; 
    background:white; 
} 



h1 { 
    color: #e5780d; 
    font-family: Courier; 
    letter-spacing: 3px; 
    margin-left:.5%; 

} 
p{margin-left:.5%; 
    word-spacing:4px } 

#black { 
    margin: 3px solid black; 
    word-spacing: 4px; 
    margin:left:.75%; 
} 

h3 { 
    color: #e5780d; 
    font-family: Courier; 
    letter-spacing: 3px; 
} 

span { vertical-align: baseline; } 

#first { font-size:16px; 
     margin-left:5.5%; 
     } 

#second {font-size:16px; 
     margin-left:9.1%} 

#third{font-size: 16px; 
     margin-left:8.6%} 

#left { 
    float: left; 
    text-align: justify; 
    display: inline-block; 
    color: white; 
    margin-left: 2%; 
    background: #e5780d; 
    width: 14%; 
    border-radius: 10px; 
    font-size:12px; 
    font-style:Bold; 
} 

#center { 
    display: inline-block; 
    float: left; 
    margin-left: 2.001%; 
    color: white; 
    background: #e5780d; 
    width: 14%; 
    border-radius: 10px; 
    font-size:12px; 
    font-style:Bold 
} 

#right { 
    display: inline-block; 
    float: left; 
    text-align: left; 
    color: white; 
    margin-left: 2.002%; 
    background: #e5780d; 
    width: 14%; 
    border-radius: 10px; 
    font-size:12px; 
    font-style:Bold; 
} 

Fiddle

+0

https://jsfiddle.net/xjL3j8nr/4/ – EJJ

Antwort

0

machte ich eine schnelle Gabel Ihrer ursprünglichen codepen nur um zu sehen, wenn ich Ihnen helfen kann, eine Vorstellung davon, was Sie tun. Kurz vor einem vollständigen Tutorial ist das schnelle und schmutzige, dass Sie das richtige Markup verwenden müssen und die Dinge dann auch intelligent gruppieren müssen.

Ich habe nur das Nav für Sie gebaut, weil kurz vor der Arbeit für Sie würde ich gerne sehen, dass Sie auch ein wenig lernen. Der HTML-Code sieht ungefähr so ​​aus:

<header> 
    <img src="http://s32.postimg.org/5bebu6mbl/Image_5_8_16_at_12_10_PM.jpgHome" /> 
    <nav role="navigation"> 
     <a href="#">Home</a> 
     <a href="#">Televisions</a> 
     <a href="#">Electronics</a> 
     <a href="#">Services</a> 
    </nav> 
</header> 
<main> 
<p>Content goes here</p> 
</main> 

Und das grundlegende CSS etwas aussehen würde:

body{ 
background:black; 
} 
header { 
    background: #789; 
    color: Black; 
    font-family:sans-serif; 
} 
header *{ 
    display:inline-block; 
    border-radius:4px; 
} 
nav { 
    background:white; 
    position:relative; 
    top:-2rem; 
    padding:.7rem 1rem; 
    padding-right: 4rem; 
} 
nav a{ 
    text-decoration:none; 
    color:black; 
    padding:.4rem .6rem; 
} 
nav a:hover{ 
    border:1px solid black; 
    background:lightgray; 
} 
main{ 
    margin-top:10px; 
    padding-top:.5rem; 
    height:100%; 
    border-radius:1rem; 
    background:white; 
} 

Hoffentlich, wenn Sie an der codepen sehe ich für Sie getan haben, werden Sie mindestens eine haben off Springen Punkt und ich kann alle spezifischen Fragen beantworten, die Sie haben können.

*** EDIT ** Der HTML-Code für die Block-Elemente ich wahrscheinlich so etwas wie tun würde:

<section> 
    <div> 
     Block stuff goes here. 
    </div> 
    <div> 
     Block stuff goes here. 
    </div> 
    <div> 
     Block stuff goes here. 
    </div> 
    </section> 

ich auch Kurse zu jedem möchte hinzufügen, wahrscheinlich so dass Sie diese äußeren Gruppierungen individuell steuern kann.

Das letzte, was ich tun würde, ist lernen, flexbox zu verwenden, und wenden Sie die entsprechenden CSS auf den äußeren Abschnitt.

Ich hoffe, ich half! :)

+0

Was würden Sie empfehlen, die orangefarbenen Blockabsätze zu erstellen? Ich kann sagen, basierend auf dem Layout, die divs nur tun, um auf der Seite und nicht wirklich Teil der Haupt – EJJ

+0

Ich würde ein div oder '

' Element für die gesamte Gruppe von ihnen, aber dann jeder wäre in seinem eigenen div. Ich werde ein Bearbeitungsbeispiel zu meiner tatsächlichen Antwort hinzufügen. – jensenmk89

+0

Danke für die Hilfe, ich habe eine Menge html/css-Klassen online gemacht, aber das Zusammensetzen aller Komponenten war der schwierige Teil. – EJJ