Link to home
Start Free TrialLog in
Avatar of mda04jrr
mda04jrr

asked on

Making text and picture boxes on website?

Hi i am new to this and trying to make text boxes and picture boxes in certain place on my webpage? I have included a link and a picture of what i would like it to be like? Any help would be apprecaited.

http://rangel.pwp.blueyonder.co.uk/Badminton.jpg

http://rangel.pwp.blueyonder.co.uk/Sport/Badminton.html
Avatar of James Rodgers
James Rodgers
Flag of Canada image

how familiar are you with CSS? take a look at teh following and see if its what you are after
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
 
<html>
<head>
<style type="text/css">
#divInnerContent{
	border:1px solid red;
	width:500px;
}
 
#divPic1{
	border:1px solid green;
	float:left;
	height:120px;
	width:200px;
}
 
#divPic2{
	border:1px solid blue;
	float:right;
	height:120px;
	width:200px;
}
 
.divClearBoth{
	clear:both;
}
 
#divContent1{
	border:1px solid black;
	float:left;
	height:400px;
	width:200px;
}
 
#divContent2{
	border:1px solid #C0C0C0;
	float:right;
	height:400px;
	width:200px;
}
 
 
 
</style>
	<title>Untitled</title>
</head>
 
<body>
<div id="divInnerContent">
	<div id="divPic1">
		pic 1
	</div>
	<div id="divPic2">
		pic 2
	</div>
	<div class="dicClearBoth"></div>
	
	<div id="divContent1">
		some text content or other information 1
	</div>
	<div id="divContent2">
		some text content or other information 2
	</div>
</div>
 
 
</body>
</html>

Open in new window

Avatar of mda04jrr
mda04jrr

ASKER

SOrry am probly making this mor complicated than it is:

http://rangel.pwp.blueyonder.co.uk/Sport/Badminton.html

I want a text box under INFO and a text box under WHERE/WHEN and info and where/when to be in the middle at the top of each box.

I also want the email to be at the bottom but the white box to surround it which i cant seem to do?

Also want another text box on the left of the email to say the name of the contact etc.

Thanks in advance James
more like this?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
 
<html>
<head>
<style type="text/css">
#divInnerContent{
	border:1px solid red;
	width:500px;
}
 
#divSportTitle{
	text-align:center;
	font-weight:bold;
}
#divInfo{
	border:1px solid green;
	float:left;
	width:200px;
	text-align:center;
	font-weight:bold;
	margin:3px;
}
#divInfoDetail{
	text-align:left;
	font-weight:normal;
}
 
#divPic1{
	border:1px solid blue;
	float:right;
	height:120px;
	width:200px;
}
 
.divClearBoth{
	clear:both;
}
 
#divContent1{
	border:1px solid black;
	float:left;
	height:400px;
	width:200px;
}
 
#divWhereWhen{
	border:1px solid #C0C0C0;
	float:right;
	width:90%;
	margin:3px;
	text-align:center;
	font-weight:bold;
}
 
#divWhereWhenDetail{
	text-align:left;
	font-weight:normal;
}
 
#divContactInfo{
	border:1px solid #ff1493;
	float:right;
	width:90%;
	margin:3px;
	text-align:center;
	font-weight:bold;
}
#divContactInfoDetail{
	text-align:left;
	font-weight:normal;
}
 
</style>
	<title>Untitled</title>
</head>
 
<body>
<div id="divInnerContent">
	<div id="divSportTitle">Title of Sport Category</div>
	<div id="divInfo">
		Info
		<div id="divInfoDetail">
			some details about the group/users
		</div>
	</div>
	<div id="divPic1">
		pic 1
	</div>
	<div class="divClearBoth"></div>
	<div id="divWhereWhen">
		Where/When
		<div id="divInfoDetail">
			scheduling information
		</div>
	</div>
	<div class="divClearBoth"></div>
	<div id="divContactInfo">
		Contact
		<div id="divContactInfoDetail">
			someone@server.ext
		</div>
	</div>
</div>
 
 
</body>
</html>

Open in new window

Thanks for your help but i couldnt get either to work properly. Have out a table in now which should do the job, but i am stuck on a couple of things,

1 - how to get a black line down a middle of the table.

2- How to fix the widths of the boxes

3- How to get NICOLA & RICK to center beside the email?

THanks

http://rangel.pwp.blueyonder.co.uk/Badminton.html
ASKER CERTIFIED SOLUTION
Avatar of James Rodgers
James Rodgers
Flag of Canada image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
glad i could help

thanks for the points