• Locked
1 reply [Last post]
Tue, 2013-04-30 10:49
vaux
vaux's picture
Offline
newbie
Last seen: 9 years 3 weeks ago
Timezone: GMT+10
Joined: 2013-04-30
Posts: 1
Points: 2

Hi, I'm developing a website at the moment and struggling a bit with aligning a few components inside of a section.

The section highlighted in red consists of 3 elements, the image, textboxes and button, but no matter what I try I can't seem to get them aligned correctly, or to stay within the defined bounds of the section.

The section highlighted in green is in the header and I can't seem to drag any other objects (images or otherwise) into that top section aside from the found.it logo.

I'd appreciate any help as to how I might overcome these issues.

This is my design I'd like to achieve:

CSS:

head{
	background-color: rgb(0,0,0);
	position: fixed;
	width: 100%;
	height:43px;
	display: block;
	text-align: center;
	float: center;
	z-index:-1;
 
}
 
head input {
margin-top:500px;;
 
}
 
 
footer
{
	left:0;
	right:0;
	bottom:0;
	position: fixed;
	clear: both;
	text-align: center;
	font-family: ERASLGHT;
}
 
 
 
 
body 
{
	margin: 0 auto;
	width: 980px;
	background-image:url('http://i46.tinypic.com/r1cuo2.png');
	font-family:'ERASLGHT';
}
 
@import url(<a href="http://fonts.googleapis.com/css?family=Roboto+Condensed:400,300" rel="nofollow">http://fonts.googleapis.com/css?family=Roboto+Condensed:400,300</a>);
 
 
section, article, footer 
{
	font-family: 'Roboto Condensed', sans-serif;
	background-color: rgba(0,0,0,0.1);
 
}
section, article{
margin: 12px;
}
a:link {
  color: black ;
  text-decoration: none ;
}
 
a:hover {
  color: rgb(128,128,128);
}
 
 
#title{
font-size:2.0em;
width:704px;
height:64px;
margin-top:24px;
padding:12px;
margin-bottom:-12px;
}
#profile{
font-size:2.0em;
width:704px;
height:128px;
margin-top:24px;
padding:12px;
margin-bottom:-12px;
}
#profile h3, h4{
margin-top:-110px;
margin-left: 138px;
}
#post{
width:728px;
height:88px;
}
#post img{
	margin:12px;
	height:100%;
	float:top;
}
#post input{
float:top;
margin-left:150px;
margin-top:-100px;
}
 
 h2
{	
	font-size: 2.2em;
	letter-spacing: 0em;
	text-align: left;
}
 h3
{	
	font-size: 1.3em;
	letter-spacing: 0em;
	text-align: left;
}
 h4
{	
	font-size: 0.6em;
	letter-spacing: 0em;
	text-align: left;
}
 
::-webkit-scrollbar {
 
    width: 8px;
}
 
::-webkit-scrollbar-track {
 
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    border-radius: 8px;
}
 p {
 	font-family: 'Roboto Condensed', sans-serif;
 }
::-webkit-scrollbar-thumb {
    border-radius: 8px;
	background:rgba(0,0,0,0.5);
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}
article 
{
	padding:12px;
	height: 700px;
	overflow-y: scroll;
	float:left;
	width: 704px;
	background-color: #0000E6 transparent;
}
 
#friends
{
	padding:12px;
	margin-top:-76px;
	float:right;
	width:176px;
}
#followed
{
	padding:12px;
	float:right;
	width:176px;
 
}
 
ul,li {
	list-style: none;
}
 
#trends
{	
	padding:12px;
	float:right;
	width:176px;
}

HTML:

<!DOCTYPE html>
<html>
<head>
	<title>Found.it</title>
		<a href="index.htm"><img src="resources/images/logo.png" border="0" alt=""></a>
		<!--<a href="profile.htm"><img src="resources/images/search.png" border="0" alt="" align="right"></a>-->
		<link href="resources/css/reset.css" rel="reset" />
		<link href="resources/css/style.css" rel="stylesheet" />
 
 
		<form>
		<input type="text" name="textPost">
		</form>
 
</head>
 
<body>
 
	<section id="post">
	<form>
			<input type="text" name="textPost"></br>
			<input type="text" name="tagPost">
		</form>
		<img src="resources/images/prof1.jpg" alt="blah">
 
	</section>
 
	<!-- -->
 
	<article>
	</article>
 
	<section id="friends">
		<a href="friends.htm"><h2>Friends</h2></a>
 
	</section>
	<section id="followed">
		<a href="followed.htm"><h2>Followed</h2></a>
 
 
		<p>
			<ul>
 
			</ul>
		</p>
 
	</section>
	<section id="trends">
		<a href="trends.htm"><h2>Trends</h2></a>
		<p>
			<ul>	
 
			</ul>
		</p>
 
	</section>
 
</body>
	<footer>
		<p>Found.it 2013</p>
	</footer>
</html>

Cheers, Vaux

Top
Tags:
Wed, 2013-05-01 07:24
#1
gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 12 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Basic misunderstanding

I think you're confusing the head and header elements. See http://dev.w3.org/html5/markup/.

When you added %flow elements to the head element, the head was closed, and the body element was automagically added. That has likely caused other error cascades.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Top
  • Locked