2 replies [Last post]
Fookes74
Fookes74's picture
Offline
newbie
Derbyshire, UK
Last seen: 2 years 40 weeks ago
Derbyshire, UK
Joined: 2016-11-18
Posts: 4
Points: 6

Hi,

When I say that I'm a beginner with CSS (and HTML), I mean it!

Im trying to style my page to look very similar to this: http://intro-webdesign.com/CSS/assignment-2/index.jpg but I'm struggling to get the 3 images vertically whilst allowing the text to sit next to them. I presumed 'inline-block' was the way to go but I can only get the images vertical by using 'block'.

This is the HTML i am working with (which I am not allowed to alter):

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Ultimate Frisbee - Home</title>
	<link rel="stylesheet" href="css/hw1.css">
</head>
<body>
	<header>
		<h1>Ultimate Frisbee</h1>
		<nav>
			<a href="index.html" class = "active">Home</a>
			<a href="teams.html">Teams</a>
			<a href="history.html">History</a>
			<a href="http://www.usaultimate.org/index.html" target="_blank">USA Ultimate</a>
		</nav>
	</header>
		<main>
			<aside class = "left">
			<a href="https://commons.wikimedia.org/wiki/File%3AUltimate_Frisbee%2C_Jul_2009_-_17.jpg"><img src="https://upload.wikimedia.org/wikipedia/commons/5/5d/Ultimate_Frisbee%2C_Jul_2009_-_19.jpg" alt="Creative Common Ultimate Photo" title="By Ed Yourdon [CC BY-SA 2.0 (<a href="http://creativecommons.org/licenses/by-sa/2.0" rel="nofollow">http://creativecommons.org/licenses/by-sa/2.0</a>)], via Wikimedia Commons"/> </a>
 
			<a href="https://commons.wikimedia.org/wiki/File%3AUltimate_Frisbee_Colorado_Cup_2005.jpg"><img alt="Ultimate Frisbee Colorado Cup 2005" src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/7d/Ultimate_Frisbee_Colorado_Cup_2005.jpg/512px-Ultimate_Frisbee_Colorado_Cup_2005.jpg"/></a>
 
 
			<a href="https://www.flickr.com/photos/paradisecoastie/15409853738/" title="Ultimate Frisbee"><img src="https://farm4.staticflickr.com/3948/15409853738_7dbfbfbac7_k.jpg"  alt="Ultimate Frisbee"></a>
		</aside>
			<section class = "right">
				<h2>Watch your Head </h2>
			<p>Ultimate Frisbee is a sport that I never played myself, but it's popularity is something hard to ignore in many Midwestern college towns.  Students (and people who wish they were still students) spend the few briefs months of good weather, sprinting down fields, hurling frisbees, and yelling "Stack!!".</p>
			<p>What I find much more entertaining is the large number of people who continue to play when the weather gets windy and the night sky darkens around oh....4:15pm.  The sight of frisbees boomeranging in the wind is topped only by the knowledge that even when you can't seem, those same plastic discs of death are probably hurtling through the dark night sky at 8 or 9 o'clock in the evening.
			</p>
			<p>Ultimate Frisbee requires a great deal of stamina and dexterity.  Not surprisingly, the <abbr title = "International Olympic Committee">IOC</abbr> officially recognized Ultimate as a sport in 2015.   It can go up against other sports for inclusion in  Olympic games.</p>
	</section>
</main>
</body>
</html>

I have done the following in CSS:

body{
	margin: 2%;
	font-size: 110%;
}
 
header{
	background: #A0A3A3;
	padding-top: 1%;
	padding-bottom: 1%;
	background-image: url(../images/flywheel.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	font-size: 130%;
	border: none;
}
 
h1{
	text-align: center;
	font-variant: small-caps;
	color: #FFFFFF;
	font-family: arial, serif, century;
	border-radius: 8px;
}
 
nav{
	font-variant: normal;
	font-size: 120%;
	font-weight: bold;
	color: #F9E6E6;
	text-align: center;
}
 
nav a{
	display: inline-block;
	background-color: #FFFFFF; opacity: 0.5; filter: alpha (opacity=40);
	text-decoration: none;
	width: 15%;
	padding: 13px;
	margin: 25px;
	border-radius: 7%;
}
 
nav a:hover{
	background: #B3B3B3;
	color: #0006CC;
}
 
nav a:focus{
	background: #B3B3B3;
	color: #0006CC;
}
 
nav a:active{
	border: 3px solid #000000;
}
 
aside{
	display: inline-block;
}
 
img{
	display: block;
	max-width: 15%;
	max-height: auto;
	padding: 10px;
	background-color: #697C44;
}
 
h2{
	display: inline-block;
}

Please be gentle with me and kindly offer some guidance as to how I can reach my goal. Any friendly help / guidance would be appreciated.

Thank you.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 14 hours 28 sec ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9743
Points: 3822

Maybe

You could go with inline-block, but you need it on section, too. You will also have to dicker with other properties or risk the problem of different results from different browsers.

My first thought would be to float the aside and set a new block context on section.

    html {
        padding: 0;}
 
    body {
        background-color: white;
        color: black;
        font: 100%/1.5 sans-serif;
        margin: 0;}
 
    p {
        font-size: 1em;}
 
    /* end boilerplate */
 
    main h2 {
	margin-top: 0;}
 
    aside {
	float: left;
	text-align: center;
	width: 250px;}
 
    aside img {
	margin: 1em 0;
	max-width: 200px;}
 
    section {
	overflow: hidden;}

BTW, always and by always, I mean every time, scale your images and set the compression to appropriate values for the web page. For example on that first, huge image (3.5MB), a simple one line instruction reduces the size to less than 10KB; that's a factor of 3.5x103.

gt@lavern:/var/www/html$ convert Ultimate_Frisbee.jpg -scale 5% +repage -quality 70 shrunk-frisbee.jpg

cheers,

gary

ps: How are you going to learn if I do your homework for you? Wink

AttachmentSize
shrunk-frisbee.jpg 9.05 KB

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

Fookes74
Fookes74's picture
Offline
newbie
Derbyshire, UK
Last seen: 2 years 40 weeks ago
Derbyshire, UK
Joined: 2016-11-18
Posts: 4
Points: 6

Thanks for the response,

Thanks for the response, Gary. I really appreciate it. As I say, I'm trying my best and I'd hit a brick wall which I just couldn't get past. I've tried all I can before asking for help. Honest!

Best regards,

Chris