• Locked
1 reply [Last post]
Tue, 2014-09-02 00:17
SeanNZ
SeanNZ's picture
Offline
newbie
New Zealand
Last seen: 8 years 39 weeks ago
New Zealand
Timezone: GMT+12
Joined: 2014-09-01
Posts: 1
Points: 2

Hi,

I'm really new to this so please excuse my ignorance. I'm laying out a webpage using CSS (working from a book) and its been going well until that is I split the layout of the first elements into an Image box and an aside on the at the top of the page. The x3 columns beneath then stopped displaying horizontally and displayed vertically stacked one on top of the other.

Any idea where I have gone wrong? I know its a "big question" so if I can clarify please let me know. Appreciate any help or advice on offer.

Here's my CSS and HTML:

body {
width:960px;
margin: 0 auto;
}
 
#content {
overflow:auto;
height:100%;
}
 
#header {
margin:8px;
text-align:left;
font-family:courier new, sans-serif;
}
 
#figure {
margin:8px;
margin-right:10px;
width:450x;
height:380px;
}
 
#nav {
background-color:#efefef;
padding-top:1px;
padding-bottom:15px;
height:30px;
margin:8px;
text-align:right;
}
 
.aside {
background-color:#efefef;
width:450px;
height:376px;
float:right;
padding:2px;
margin:8px 8px 0px 10px;
text-align:center;
}
 
.column1, .column2, .column3 {
background-color:#efefef;
padding:2px;
width:300px;
float:left;
margin:8px;
text-align:center;
}
 
#footer {
background-color:#efefef;
padding-top:1px;
padding-bottom:15px;
margin:8px;
height:25px;
text-align:center;
}
 
li {
display:inline;
padding: 5px;
}

HTML:

<!doctype html>
<html lang="en">
<head>
<title>by design</title>
<meta charset="utf-8"/>
<meta name="description" content="by design">
<meta name="keywords" content="web design, HTML 5,">
<meta name="author" content="Sean">
<meta name="robots" content="noindex, nofollow">
<link href="../css/links.css" rel="stylesheet" type="text/css" media="all"/>
<link href="../css/html.css" rel="stylesheet" type="text/css" media="all"/>
</head>
<body>
<div id="header">
<h1>By Design</h1>
</div> 
<div id="nav">
<ul>
<li><a href="../default.html">HOME</a></li>
<li><a href="html.html">HTML</a></li>
<li><a href="">CSS</a></li>
<li><a href="">JAVASCRIPT</a></li>
<li><a href="">ABOUT ME</a></li>
<li><a href="">CREDITS</a></li>
</ul>
</div>
<div class="aside">
<p>column0<p/>
</div>
<div id="content">
<div id="figure">
<img src="../images/htmldsign.jpg" alt=html image"/>
</div>
<div class="article column1">
<h4>HTML</h4> 
<p>.</p>
</div>
<div class="article column2">
<h4>CSS</h4>
<p></p>
<p></p>
<br/>
</div>
<div class="article column3">
<h4>Javascript</h4>
<p> </p> 
<p> </p> 
<br/>
<br/>
</div>
</div>
<div id="footer">
<p><b></b>:&copy;2014</p>
</div>
</body>
</html>

AttachmentSize
CSSlayoutissue.jpg148.71 KB
Top
Tags:
Wed, 2014-09-03 19:49
#1
Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 3 weeks 5 days ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5344
Points: 2965

Hi SeanNZ, Validate your

Hi SeanNZ,
Validate your markup, you are missing a double quote here:
<img src="../images/htmldsign.jpg" alt=html image"/>
May be other typos.

Top
  • Locked