I was wondering how pages like are able to maintain the positions of the elements when the window is resized?? any help is greatly appreciated!
thanks
thanks
Tek-Tips is the largest IT community on the Internet today!
Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!
-
Congratulations derfloh on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!
fixing the position of elements 1
- Thread starter blues77
- Start date
SashiRaveendran
Programmer
you define the height and width of tables and cells or your containers. Did you know that by specifying the height and width of all of the tables and cells, images etc in your page helps it load faster. It also stops the page from dancing around as its loading
- Thread starter
- #3
what unit(s) do you recommend i use for the height and width? should i use % or px. If i use % it will still resize the div tags and tables i have depending on the the size on the window. What i would like is to have everything stay the same size and when the user shrinks the window only a potion of the html page can be seen (just like tek-tips works) I appreciate the help
thanks
mike
thanks
mike
-
1
- #4
Hi Mike,
DON'T use %.
You have to use px.
Try this example:
<html>
<head>
<style>
.div1 {
border: solid 3px black;
position: absolute;
top: 10px;
left: 10px;
width: 200px;
height: 200px;
}
.div2 {
border: solid 3px red;
position: absolute;
top: 220px;
left: 220px;
width: 200px;
height: 200px;
}
.div3 {
border: solid 3px lightblue;
position: absolute;
top: 430px;
left: 430px;
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div class="div1">Div example 1</div>
<div class="div2">Div example 2</div>
<div class="div3">Div example 3</div>
</body>
</html>
<!-- My sport: Boomerang throwing !!
This year I will participate at the World Championships in Germany. (!! Many Happy Returns !! -->
DON'T use %.
You have to use px.
Try this example:
<html>
<head>
<style>
.div1 {
border: solid 3px black;
position: absolute;
top: 10px;
left: 10px;
width: 200px;
height: 200px;
}
.div2 {
border: solid 3px red;
position: absolute;
top: 220px;
left: 220px;
width: 200px;
height: 200px;
}
.div3 {
border: solid 3px lightblue;
position: absolute;
top: 430px;
left: 430px;
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div class="div1">Div example 1</div>
<div class="div2">Div example 2</div>
<div class="div3">Div example 3</div>
</body>
</html>
<!-- My sport: Boomerang throwing !!
This year I will participate at the World Championships in Germany. (!! Many Happy Returns !! -->
- Status
Similar threads
- Locked
- Question
- Locked
- Question
- Locked
- Question