Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

help with css positioning

Posted on 2011-03-12
1
Medium Priority
?
189 Views
Last Modified: 2012-05-11
Can someone please help me with some simple css? I'm new to it.

Attached is an image that I'm trying to layout with css. Basically its a "View Map" link which is anchored to the "top" of the segment, then directly to the right an image of the map, then directly to the right of that, anchored to the top as well, is some info, all left justified. I'm trying to learn some css basics here, whats the best way to do this? This "piece" will actually be repeated vertically, but if I get the css for the individual segments, I can repeat them. Thanks css layout to acheive
0
Comment
Question by:nuvium
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
1 Comment
 
LVL 84

Accepted Solution

by:
Dave Baldwin earned 2000 total points
ID: 35117114
Here's one way to do it.  You could also do it with tables and it might be simpler.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<title>Div Table</title>
<style type="text/css">
<!-- 
.section {
	position:relative;
	float:left;
	border: thin solid black;
	margin-bottom: 7px;
	}
.sleft {
	float:left;
	width:120px;
	}
.scent {
	float:left;
	width:220px;
	height:160px;
	background-color: #eeeeee;
	}
.sright {
	float:left;
	width:120px;
	}
.stext {
	padding-left:3px;
	}	
-->
</style>
</head>
<body>
<h1>Div Table</h1>

<div class="section">
<div class="sleft">View Map</div>
<div class="scent">The map</div>
<div class="sright">
<div class="stext">Title</div>
<div class="stext">Info 1</div>
<div class="stext">Info 2</div>
<div class="stext">Info 3</div>
</div>
<br clear="all" />
</div>
<br clear="all" />

<div class="section">
<div class="sleft">View Map</div>
<div class="scent">The map</div>
<div class="sright">
<div class="stext">Title</div>
<div class="stext">Info 1</div>
<div class="stext">Info 2</div>
<div class="stext">Info 3</div>
</div>
<br clear="all" />
</div>
<br clear="all" />

</body>
</html>

Open in new window

0

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
Color can increase conversions, create feelings of warmth or even incite people to get behind a cause. If you want your website to really impact site visitors, then it is vital to consider the impact color has on them.
The viewer will learn how to count occurrences of each item in an array.
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

618 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question