Jump to content
  • Advertisement
Sign in to follow this  
Jaywalk

[web] A CSS question

This topic is 4325 days old which is more than the 365 day threshold we allow for new replies. Please post a new topic.

If you intended to correct an error in the post then please contact us.

Recommended Posts

I need some help with a basic CSS effect which is giving me trouble. Let's say that I have the following piece of HTML
<html>
<head>
	<style>
		div {
			border: 1px solid black;
			font-family: monospace;
		}
	</style>
</head>
<body>
	<div>
		<img src='picture.whatever' />
		*** ** ** * ** *** * **
	</div>
	<div>
		<img src='someotherpicture.whatever' />
		*** ** ** * ** *** * **
	</div>
</body>
</html>
The result would then look something like the following ASCII art:
+-------------+
|+---+        |
||\ /|        |
|| X |        |
||/ \|        |
|+---+        |
|*** ** ** *  |
|** *** * **  |
+-------------+
+-------------+
|+---+        |
||\ /|        |
|| X |        |
||/ \|        |
|+---+        |
|*** ** ** *  |
|** *** * **  |
+-------------+
What I actually want is this:
+-------------+
|+---+*** **  |
||\ /|** * ** |
|| X |*** * **|
||/ \|        |
|+---+        |
+-------------+
+-------------+
|+---+*** **  |
||\ /|** * ** |
|| X |*** * **|
||/ \|        |
|+---+        |
+-------------+
If I were to add the following rule to the style...
div img {
	float: left
}
... I would then get something like this:
+-------------+
|+---+*** **  |
||\ /|** * ** |
|| X |*** * **|
+|/ \|--------+
 +---+
+-------------+
|+---+*** **  |
||\ /|** * ** |
|| X |*** * **|
+|/ \|--------+
 +---+
...which is not what I want. If I were to add the following rule to the style...
 div {
 	position: absolute;
 }
...then the div wouldn't be relatively positioned anymore, and would be drawn over each other, like this:
+-------------+
|+---+*** **  |
||\ /|** * ** |
|| X |*** * **|
||/ \|        |
|+---+        |
+-------------+
...which is also not what I want. Does anyone know how I would do this properly?

Share this post


Link to post
Share on other sites
Advertisement
I would set it up so you have a div acting as a container, then have each element given its own div (one for images and one for the *'s). You can then use the margins and vertical-align to control the positioning.

Share this post


Link to post
Share on other sites
I'm not certain how you can alter this through CSS only (especially since :after content is not universally supported). You can, however, use:

<html>
<head>
<style>
div.inner {
background-color: red;
float: left;
height: 100px;
width: 100px;
}

div {
border: 1px solid black;
margin: 2px;
}

.clear {
clear: both;
border: none;
margin: none;
}

</style>
</head>
<body>

<div>
<div class="inner">
</div>
Text text text text text text text text text text text text text text text text text text text.
<br class="clear" />
</div>

<div>
<div class="inner">
</div>
Text text text text text text text text text text text text text text text text text text text.
<br class="clear" />
</div>

</body>
</html>

Share this post


Link to post
Share on other sites
The br-tag-with-clearance works perfectly. Thank you, ToohrVyk. It's a pity to have to change the HTML for a pure style issue, but it doesn't seem that there's any way to do this in pure CSS2.1, even with :after.

Share this post


Link to post
Share on other sites
Sign in to follow this  

  • Advertisement
×

Important Information

By using GameDev.net, you agree to our community Guidelines, Terms of Use, and Privacy Policy.

We are the game development community.

Whether you are an indie, hobbyist, AAA developer, or just trying to learn, GameDev.net is the place for you to learn, share, and connect with the games industry. Learn more About Us or sign up!

Sign me up!