4 replies [Last post]
faustnero
faustnero's picture
Offline
newbie
Last seen: 10 years 14 weeks ago
Timezone: GMT-4
Joined: 2012-10-25
Posts: 3
Points: 4

Hi guys. I just need help regarding my homework which is about responsive web design. I have a problem concerning about the layout, because it contains a little navigation on the left side corner and entirely the right wide columns are for the paragraph content. I have managed to get the header the picture in order as what they're ask to look like, and my only problem is the positioning of the paragraphs.

The work should look like this:

What I have so far is this:

As you guys can see, i put a background color so it shows the part of the page that overlaps/unerlaps the content it shouldn't over/underlapping to. I can't use 'float' though, because the paragraphs will come out of the general border. Thank you very much for the time guys.

pav
pav's picture
Offline
Regular
Last seen: 9 years 31 weeks ago
Timezone: GMT+1
Joined: 2012-10-18
Posts: 33
Points: 41

Using floats should not be a

Using floats should not be a problem if you wrap all your paragraphs in a single Div container. Its more like a 2 col layout.
For being responsive in potrait mode, just set the floats to none.

faustnero
faustnero's picture
Offline
newbie
Last seen: 10 years 14 weeks ago
Timezone: GMT-4
Joined: 2012-10-25
Posts: 3
Points: 4

pav wrote: Using floats

pav wrote:

Using floats should not be a problem if you wrap all your paragraphs in a single Div container. Its more like a 2 col layout.
For being responsive in potrait mode, just set the floats to none.

It still wouldn't work. I tried what you said and the paragraphs went out of the general grey border which they aren't suppose to in the picture.

Here are my codes:
HTML

<!DOCTYPE HTML>
 
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link href="css.css" rel="stylesheet" type="text/css" />
	</head>
 
	<body>
		<section  id="main">
			<header id="header">
			<img id="image" src="pcgamer.jpg" height="100" width="100" />
			<h1>Gaming</h1>
			</header>
 
			<nav id="navbar">
				<ul>
					<li><a href="#">Home</a></li>
					<li><a href="#">News</a></li>
					<li><a href="#">Gallery</a></li>
					<li><a href="#">About</a></li>
				</ul>
			</nav>
			<div id="paragraphs">
			<article  id="content1">
				<h4>Subtitle</h4>
				<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. </p>
			</article>
 
			<article  id="content2">
				<h4>Subtitle</h4>
				<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. </p>
			</article>		
			</div>
		</section>
	</body>
</html>

CSS:

/* css.css */
#main {
	border: 5px solid grey;
	border-radius: 30px;
	font-family: monospace;
}
#header {
	color: teal;
	text-shadow: 5px 5px 5px grey;
	text-align: center;
	font-size: 32px;
}
#image {
	float: right;
	margin-right: 20px;
}
#navbar {
	background-color: yellow;
	borde: 3px solid black;
	margin: 20px;
	width: 130px;
	padding: 10px;
	float: left;
 
}
#content1 {
	background-color: lime;
	borde: 3px solid black;
	padding: 10px;
	font-size: 1em;
	margin: 50px;
}
#content2 {
	background-color: lime;
	borde: 3px solid black;
	padding: 10px;
	font-size: 1em;
	margin: 50px;
}
#paragraphs {
	float: right;
}

pav
pav's picture
Offline
Regular
Last seen: 9 years 31 weeks ago
Timezone: GMT+1
Joined: 2012-10-18
Posts: 33
Points: 41

Specify width for

Specify width for #paragraphs. Instead of repeating styles in #content1, #content2 - haave a single class and call it in each paragraph. You might want to get rid of margin right/left/top.

And just a tip - since you are trying to create a responsive layout better to define the width in % instead of pixel. So if your main container width is 960px , the nav bar is 130px-
the width of navbar in % would be (130/960)*100. Do not get tempted to round off the decimal places , leave it as it is.

faustnero
faustnero's picture
Offline
newbie
Last seen: 10 years 14 weeks ago
Timezone: GMT-4
Joined: 2012-10-25
Posts: 3
Points: 4

pav wrote: Specify width for

pav wrote:

Specify width for #paragraphs. Instead of repeating styles in #content1, #content2 - haave a single class and call it in each paragraph. You might want to get rid of margin right/left/top.

And just a tip - since you are trying to create a responsive layout better to define the width in % instead of pixel. So if your main container width is 960px , the nav bar is 130px-
the width of navbar in % would be (130/960)*100. Do not get tempted to round off the decimal places , leave it as it is.

thank you very much!