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;
}
https://jsfiddle.net/xjL3j8nr/4/ – EJJ