Positioning Elements With Html

c0dege3k · May 6, 2011

So I'm relatively new to HTML/CSS coding and have run into a very annoying problem. I get the position of my background image, header and other elements positioned fine on one resolution, but then moving it to another makes it looked completely screwed up.

Here's the CSS for two different elements so that the elements show up correctly on a 1280x800 resolution:


div {
	font-size:2em;
	font-family:"courier";
	font-weight:bold;
	text-align:center;
	position:absolute;
}
#left {
	top:47%;
	left:17%;
	width:15em;
}
#right {
	top:54%;
	left:55%;
	width:20em;
}
[/CODE]

digip · May 6, 2011

Position absolute set for div will make all of them sit on top of one another. And dont use %'s and widths with em's. Use pixels, such as 1280px, etc. em is the size o fthe fonts relative size and spaced as 20 font characters wide from have you posted above.

Show me the entire code and maybe I can help, but from this little bit, its difficult at best to understand what your site looks like and what you are trying to do. if you need the background aligned to a div, put it in the div itself instead of the pages body css. Then work from there.

c0dege3k · May 6, 2011

Alright, here's my full code, but it isn't quite what I want yet, as I've been messing around with the graphics, and trying to figure out this problem.


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head>

  <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
  <title>Jarvis Organization | Portal</title>



<style type="text/css">
body {
	background:#0035a2 url(portal_back.png) no-repeat top left;
}
h1 {
	text-align:center;
	font-family:"courier";
	font-size:5em;
	position:static;
	top:24%;
	left:29%;
}
div {
	font-size:2em;
	font-family:"courier";
	font-weight:bold;
	text-align:center;
	position:absolute;
}
#left {
	top:47%;
	left:17%;
	width:15em;
}
#right {
	top:54%;
	left:55%;
	width:20em;
}

</style>
</head>
<body>
<h1>JARVIS ORGANIZATION</h1>

<div id="left"> 
<a href="android_dev.html"><img src="stark_android.png" alt="Android Stark logo" /></a><br />
ANDROID DEVELOPMENT<br />
Go Mobile
</div>
<div id="right">
<a href="net_sec.html"><img src="netsec.png" alt="NetSec logo" /></a><br />
NETWORK SECURITY<br />
Defend Your Fortress
</div>

</body>
</html>
[/CODE]

digip · May 6, 2011

how big are these pictures and do you have them uploaded somewhere I can plug in the urls to see what it looks like. I cant align to images I cant see.

c0dege3k · May 6, 2011

http://dl.dropbox.com/u/8051037/netsec.png

http://dl.dropbox.com/u/8051037/portal_back.png

http://dl.dropbox.com/u/8051037/stark_android.png

There ya go

digip · May 6, 2011

Much better. Now I can see what I am working with. Now. Show me a screen shot of how you want them positioned. Because I'm not sure where you want things to be.

c0dege3k · May 6, 2011

Okay, here's a different background that I was using initially: http://dl.dropbox.com/u/8051037/portal_back%20%28copy%29.png

And the design for the page:

http://dl.dropbox.com/u/8051037/Jarvis%20Organization%20%7C%20Portal%20-%20Mozilla%20Firefox_003.png

digip · May 6, 2011

Try something like this. Adjust to your liking.

&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
&lt;html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"&gt;
&lt;head&gt;
&lt;title&gt;Jarvis Organization | Portal&lt;/title&gt;
&lt;meta http-equiv="content-type" content="text/html; charset=UTF-8" /&gt;
&lt;meta http-equiv="X-UA-Compatible" content="IE=100" /&gt; &lt;!-- Force IE8 Compatibility mode OFF --&gt;





&lt;style type="text/css"&gt;
body {
	background:#0035a2 url(http://dl.dropbox.com/u/8051037/portal_back.png) no-repeat top left;
	font: 0.7em "tahoma", verdana, arial, courier, sans-serif;
	color:#ffffff;
	font-size:16px;
	font-weight:bold;
}

h1 {
	width:800px;
    font-size:45px;
	margin:100px 20px 20px auto;
}



#left {

	width:380px;
	text-align:center;
	float:left;
}

#right {

        width:380px;
        text-align:center;
		float:right;

}

#foo {
width:1280px;
margin:0 auto;
}

#container {
margin:0 auto;
width:850px;
display:table;
padding-top:10%;
clear:both;
}

&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
	&lt;div id="foo"&gt;

	&lt;h1&gt;JARVIS ORGANIZATION&lt;/h1&gt;

	&lt;div id="container"&gt;
		&lt;div id="left"&gt; 
		&lt;a href="android_dev.html"&gt;&lt;img src="http://dl.dropbox.com/u/8051037/stark_android.png" alt="Android Stark logo" /&gt;&lt;/a&gt;&lt;br /&gt;
		ANDROID DEVELOPMENT&lt;br /&gt;
		Go Mobile
		&lt;/div&gt;

		&lt;div id="right"&gt;
		&lt;a href="net_sec.html"&gt;&lt;img src="http://dl.dropbox.com/u/8051037/netsec.png" alt="NetSec logo" /&gt;&lt;/a&gt;
		&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;
		NETWORK SECURITY&lt;br /&gt;
		Defend Your Fortress
		&lt;/div&gt;
	&lt;/div&gt;

	&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;

c0dege3k · May 6, 2011

That's great, thanks a ton.

c0dege3k · May 6, 2011

Okay, just one more quick question. In a related page, I have a navigation piece to it made up of multiple images like:


<div id="navigation">
<a href="android_dev_projects.html"><img src="android_tab_projects.png" alt="Projects" /></a><br />
<a href="android_dev_news.html"><img src="android_tab_news.png" alt="News" /></a>
</div>
[/CODE]

I want the images positioned just overlapping each other. So I'm thinking to position them all, I need to create CSS classes for each image, but feel that this is very inefficient. Is there any easier way?

digip · May 6, 2011

If the images are links as well, you can only click the one that is top most and in view, or not covered. You cna do partial crossover, but you need to leave part of the image exposed to be able to click its link. If a linked image is not click-able in any area, and is under any other image completely, you can't click it. So when you say overlap, make sure you leave room between them so each can be clicked.

Another option is a single image of the combined look you want, and use an image map to make parts of the single image clickable. Image maps are the one placer where WYSIWYG editors are handy, but I rarely use them for navigation unless its some large artsy pic you want to use as a navigation system.

c0dege3k · May 7, 2011

I thought about doing an image map but I'm thinking on adding JavaScript to the images when I learn that, so I'm pretty sure that using a map wouldn't work too well

Edited May 7, 2011 by c0dege3k

digip · May 7, 2011

See http://www.w3schools.com/TAGS/tag_map.asp

and

http://www.image-maps.com/

Image maps work fine, but I usually just make a background pic for an element, and then smaller images, almost like icons, and absolute position then where I want as links over the backdrop.

c0dege3k · May 7, 2011

http://dl.dropbox.com/u/8051037/Web/android_dev.html

I don't know if I'm not being clear or misunderstanding you, but what I want is the blue tabs in the page above to be slightly overlapping. When I learn JS, I'm thinking on having the hovered-over image shift upwards. Can this still be done with a map?

digip · May 7, 2011

http://dl.dropbox.com/u/8051037/Web/android_dev.html

I don't know if I'm not being clear or misunderstanding you, but what I want is the blue tabs in the page above to be slightly overlapping. When I learn JS, I'm thinking on having the hovered-over image shift upwards. Can this still be done with a map?

I misunderstood you, or at least I think I know what you want now. If you want to swap the image link, color, etc, you can do this via css with an elements hover effect. I do this a lot. Check out the nav menu on the securabit.com site and hover over the icons on the nav bar. I use something slightly different for their site, but same concept of a css hover event to swap them. Best to try and do it with CSS vs javascript alone, since many people nowadays block javascript.

If you wanted to apply this to linked images there are several ways to go about it. Personally I would give your nav links a class name, like .button or .nav-link and then have a transparent png or gif the same size as the button images you want to use in the link, like so.

&lt;a class="button" href="somelink"&gt;&lt;img src="clear.png" /&gt;&lt;/a&gt;

Then add some css for the events you want, just as an example:


.button {
background-color:#ff0000; /* red */
}

.button:hover {
background-color:0000ff; /* blue */
}

This would change the background color for the hover event.

You could also do images, which is why I said use a clear pic in the original link, like so:


.button {
display:block;
background-image:url(main-pic.png);
}

.button:hover {
display:block;
background-image:url(hover-pic.png);
}

c0dege3k · May 8, 2011

That sounds good, but do I still have to create a ".button" & ".button:hover" class for each different image?

digip · May 8, 2011

That sounds good, but do I still have to create a ".button" & ".button:hover" class for each different image?

They way I normally do it is with lists and css. ie ul li tags and removing the list style, using the UL tag as the conatainer and li to order them either naturally in vertical format, or floated left side by side. Then a li image background, and li:hover image background. One for each. If you want unique images for each link, you need a new class for each one, but generally you only need two, the button and button:hover. button was a generic class name. You can use any nearly any element basically, from normal html tagged elements, to giving them a class or id. Generally ID is used uniquely and only once in the page and classes are used multiple instances but it will work for either.

Experiment, and read up on some html and css stuff. Also, your doctype will also determine how some css stuff displays, so if you tried say margin: 0 auto; for an element, if its doctype is html 4.0, it wont center the object, but align left. If its xhtml 1.0 transition or later, it would center the object, so play around with your code and choices and if you copy examples and it doesn't work, check the doctype and standards that go with them.

Edited May 8, 2011 by digip

c0dege3k · May 8, 2011

Thanks for all this help. I've finally got all this displayed and moving correctly.

digip · May 8, 2011

Cool beans. If your device or browser is capable of CSS transitions, try this little bits to snazz it up a bit.

Change your html doctype to:

&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
&lt;html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"&gt;
&lt;head&gt;

and then your css file to:

body {
	background: black;
	color: white;
	font-family:DIN1451Mittelschrift, arial, tahoma, verdana;
	font-size:30px;
}
h1 {
	font-size:36px;
	font-color:white;
	text-decoration:none;
	margin-left:20px;
}
.news {
	position:absolute;
	display:block;
	top:100px;
-webkit-transition: 0.6s;
-moz-transition: 0.6s;
transition: 0.6s;
-o-transition-duration: 0.6s;
}
.news:hover {
	top:90px;
	left:20px;
-webkit-transition: 0.6s;
-moz-transition: 0.6s;
transition: 0.6s;
-o-transition-duration: 0.6s;
}
.projects {
	position:absolute;
	display:block;
	top:190px;
-webkit-transition: 0.6s;
-moz-transition: 0.6s;
transition: 0.6s;
-o-transition-duration: 0.6s;
}
.projects:hover {
	top:175px;
	left:20px;
-webkit-transition: 0.6s;
-moz-transition: 0.6s;
transition: 0.6s;
-o-transition-duration: 0.6s;
}
.concepts {
	position:absolute;
	display:block;
	top:280px;
-webkit-transition: 0.6s;
-moz-transition: 0.6s;
transition: 0.6s;
-o-transition-duration: 0.6s;
}
.concepts:hover {
	top:260px;
	left:20px;
-webkit-transition: 0.6s;
-moz-transition: 0.6s;
transition: 0.6s;
-o-transition-duration: 0.6s;
}
.downloads {
	position:absolute;
	display:block;
	top:370px;
-webkit-transition: 0.6s;
-moz-transition: 0.6s;
transition: 0.6s;
-o-transition-duration: 0.6s;
}
.downloads:hover {
	top:345px;
	left:20px;
-webkit-transition: 0.6s;
-moz-transition: 0.6s;
transition: 0.6s;
-o-transition-duration: 0.6s;
}
.content {
	padding-left:40%;
}

This will animate the menu a bit if the browser is capable. If not, it will ignore it and default to the normal style.

Sign In

Positioning Elements With Html

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Recently Browsing 0 members