 |
|
|
|
|
|
| |
| |
|
|
|
|
| |
| |
|
|
>>> You can control how and where to position things, too.
>> Yes - but you're only adjusting the default layout. (E.g., adding more
>> space around a specific item than is the default.) It's not like you can
>> invent totally new layouts from scratch.
>
> No, you can tell a div where exactly it is supposed to show up. Either relative
> to the page or relative to the viewport.
Well, that's true, but how does that help?
(I guess it means you can make section 2 appear above section 1 instead
of below it - but that's not very helpful.)
> see here: http://de.selfhtml.org/css/eigenschaften/anzeige/position.htm
This page fails to load.
> All elements are positioned through CSS only
>
> Me wonders: You claim to have read the CSS spec but have not noticed position,
> left, top, width and height?
The width, margin, padding, etc. properties allow you to adjust the size
of an element and the amount of spacing around it. (When these
properties actually work, of course.) You can also flip an element from
block to inline and back, and control whether an element displays or
not, takes up visual space or not, etc.
In order words, tweak the way the element will display.
What I'm not seeing is how it's possible to have two elements display at
the same horizontal position. (Well, without using tables anyway - and
who the hell wants to do that?) Adding and removing spacing is merely
tweaking HTML's top-to-bottom layout algorithm. I don't know how it's
possible to put stuff side-by-side in violation of that rule.
I also don't see how to overprint multiple things on top of each other
with transparency.
Post a reply to this message
|
|
| |
| |
|
|
|
|
| |
| |
|
|
scott wrote:
>> Yes - but you're only adjusting the default layout. (E.g., adding more
>> space around a specific item than is the default.) It's not like you
>> can invent totally new layouts from scratch.
>
> Incorrect. In the simplest case you can position any section of the
> document with absolute coordinates relative to the browser window.
> There are of course more complex and useful positioning schemes
> available within CSS.
When I read the CSS spec, I didn't see anything that lets you escape the
fundamental top-to-bottom layout algorithm of HTML. Unless I missed an
entire section somewhere or something...
Random question: Given that CSS is supposed to allow you to position
things relative to the viewport, why do so many websites use JavaScript
to make things move back into view when you try to scroll the page?
Post a reply to this message
|
|
| |
| |
|
|
|
|
| |
| |
|
|
"Invisible" <voi### [at] dev null> wrote in message
news:497892d2$1@news.povray.org...
> This page fails to load.
I had the same, refresh it.
~Steve~
Post a reply to this message
|
|
| |
| |
|
|
|
|
| |
| |
|
|
> > see here: http://de.selfhtml.org/css/eigenschaften/anzeige/position.htm
>
> This page fails to load.
Here's the source code for the page:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"><html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<title>position</title>
<style type="text/css">
body { margin:0; padding:0; height:1500px; }
div { border:1px solid #888; }
#s1 { width:150px; height:35px; }
#s2 { width:150px; height:35px; }
#r3 { width:150px; height:35px; position:relative; top:5px; left:25px;
background-color:#dfd; }
#s4 { width:150px; height:35px; }
#s5 { width:150px; height:35px; }
#r6 { width:150px; height:35px; position:relative; top:-15px; left:10px;
background-color:#fdd; }
#s7 { width:150px; height:35px; }
#s8 { width:150px; height:35px; }
#a1 { position:absolute; top:35px; left:240px; width:150px; height:150px;
z-index:1; background-color:#ddf; }
#a2 { position:absolute; top:90px; left:230px; width:120px; height:70px;
z-index:2; background-color:#ccf; }
#a3 { position:absolute; top:220px; left:200px; width:250px; height:250px;
z-index:3; background-color:#ffa; }
#a4 { position:absolute; top:20px; left:20px; width:70px; height:70px;
z-index:1; background-color:#ff5; }
#a5 { position:absolute; top:20px; right:20px; width:70px; height:70px;
z-index:2; background-color:#dd2; }
#a6 { position:absolute; top:130px; left:-50px; width:190px; height:70px;
z-index:-1; background-color:#fdd; }
#a7 { position:absolute; top:530px; left:50px; bottom:50px; right:50px;
background-color:#fdd; }
#f1 { position:fixed; top:45px; left:430px; width:150px; height:150px;
background-color:#afa; }
</style>
</head>
<body>
<p>Um <code>position:fixed</code> zu demonstrieren, scrollen Sie an das Ende der
Seite.</p>
<div id="s1">s1 static</div>
<div id="s2">s2 static</div>
<div id="r3">r3 relative</div>
<div id="s4">s4 static</div>
<div id="s5">s5 static</div>
<div id="r6">r6 relative</div>
<div id="s7">s7 static</div>
<div id="a1">a1 absolute</div>
<div id="a2">a2 absolute</div>
<div id="a3">a3 absolute
<div id="a4">a4 absolute</div>
<div id="a5">a5 absolute</div>
<div id="a6">a6 absolute</div>
</div>
<div id="a7">a7 absolute</div>
<div id="f1">f1 fixed</div>
<div id="s8">s8 static</div>
<p><a href="../positionierung.htm#position">zurück</a></p>
</body>
</html>
See for yourself how it works
Post a reply to this message
|
|
| |
| |
|
|
|
|
| |
| |
|
|
Aydan wrote:
> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"><html>
> <head>
> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
> <title>position</title>
> <style type="text/css">
> body { margin:0; padding:0; height:1500px; }
> div { border:1px solid #888; }
>
> #s1 { width:150px; height:35px; }
> #s2 { width:150px; height:35px; }
> #r3 { width:150px; height:35px; position:relative; top:5px; left:25px;
> background-color:#dfd; }
> #s4 { width:150px; height:35px; }
> #s5 { width:150px; height:35px; }
> #r6 { width:150px; height:35px; position:relative; top:-15px; left:10px;
> background-color:#fdd; }
> #s7 { width:150px; height:35px; }
> #s8 { width:150px; height:35px; }
>
> #a1 { position:absolute; top:35px; left:240px; width:150px; height:150px;
> z-index:1; background-color:#ddf; }
> #a2 { position:absolute; top:90px; left:230px; width:120px; height:70px;
> z-index:2; background-color:#ccf; }
> #a3 { position:absolute; top:220px; left:200px; width:250px; height:250px;
> z-index:3; background-color:#ffa; }
> #a4 { position:absolute; top:20px; left:20px; width:70px; height:70px;
> z-index:1; background-color:#ff5; }
> #a5 { position:absolute; top:20px; right:20px; width:70px; height:70px;
> z-index:2; background-color:#dd2; }
> #a6 { position:absolute; top:130px; left:-50px; width:190px; height:70px;
> z-index:-1; background-color:#fdd; }
> #a7 { position:absolute; top:530px; left:50px; bottom:50px; right:50px;
> background-color:#fdd; }
>
> #f1 { position:fixed; top:45px; left:430px; width:150px; height:150px;
> background-color:#afa; }
> </style>
> </head>
> <body>
> <p>Um <code>position:fixed</code> zu demonstrieren, scrollen Sie an das Ende der
> Seite.</p>
>
> <div id="s1">s1 static</div>
> <div id="s2">s2 static</div>
> <div id="r3">r3 relative</div>
> <div id="s4">s4 static</div>
> <div id="s5">s5 static</div>
> <div id="r6">r6 relative</div>
> <div id="s7">s7 static</div>
>
> <div id="a1">a1 absolute</div>
> <div id="a2">a2 absolute</div>
> <div id="a3">a3 absolute
> <div id="a4">a4 absolute</div>
> <div id="a5">a5 absolute</div>
> <div id="a6">a6 absolute</div>
> </div>
>
> <div id="a7">a7 absolute</div>
>
> <div id="f1">f1 fixed</div>
>
> <div id="s8">s8 static</div>
>
> <p><a href="../positionierung.htm#position">zurück</a></p>
> </body>
> </html>
O_O
WTF? Damn, I had to look up what half the syntax means... (Don't people
usually use classes rather than IDs to assign styles?)
OK, well this is the craziest thing I've seen today. I'm not really sure
how all that stuff is even possible; I guess I'm going to have to
investigate...
Post a reply to this message
|
|
| |
| |
|
|
|
|
| |
| |
|
|
Invisible escreveu:
> Aydan wrote:
>
>> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"><html>
>> <head>
>> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
>> <title>position</title>
>> <style type="text/css">
>> body { margin:0; padding:0; height:1500px; }
>> div { border:1px solid #888; }
>>
>> #s1 { width:150px; height:35px; }
>> #s2 { width:150px; height:35px; }
>> #r3 { width:150px; height:35px; position:relative; top:5px; left:25px;
>> background-color:#dfd; }
>> #s4 { width:150px; height:35px; }
>> #s5 { width:150px; height:35px; }
>> #r6 { width:150px; height:35px; position:relative; top:-15px; left:10px;
>> background-color:#fdd; }
>> #s7 { width:150px; height:35px; }
>> #s8 { width:150px; height:35px; }
>>
>> #a1 { position:absolute; top:35px; left:240px; width:150px; height:150px;
>> z-index:1; background-color:#ddf; }
>> #a2 { position:absolute; top:90px; left:230px; width:120px; height:70px;
>> z-index:2; background-color:#ccf; }
>> #a3 { position:absolute; top:220px; left:200px; width:250px;
>> height:250px;
>> z-index:3; background-color:#ffa; }
>> #a4 { position:absolute; top:20px; left:20px; width:70px; height:70px;
>> z-index:1; background-color:#ff5; }
>> #a5 { position:absolute; top:20px; right:20px; width:70px; height:70px;
>> z-index:2; background-color:#dd2; }
>> #a6 { position:absolute; top:130px; left:-50px; width:190px; height:70px;
>> z-index:-1; background-color:#fdd; }
>> #a7 { position:absolute; top:530px; left:50px; bottom:50px; right:50px;
>> background-color:#fdd; }
>>
>> #f1 { position:fixed; top:45px; left:430px; width:150px; height:150px;
>> background-color:#afa; }
>> </style>
>> </head>
>> <body>
>> <p>Um <code>position:fixed</code> zu demonstrieren, scrollen Sie an
>> das Ende der
>> Seite.</p>
>>
>> <div id="s1">s1 static</div>
>> <div id="s2">s2 static</div>
>> <div id="r3">r3 relative</div>
>> <div id="s4">s4 static</div>
>> <div id="s5">s5 static</div>
>> <div id="r6">r6 relative</div>
>> <div id="s7">s7 static</div>
>>
>> <div id="a1">a1 absolute</div>
>> <div id="a2">a2 absolute</div>
>> <div id="a3">a3 absolute
>> <div id="a4">a4 absolute</div>
>> <div id="a5">a5 absolute</div>
>> <div id="a6">a6 absolute</div>
>> </div>
>>
>> <div id="a7">a7 absolute</div>
>>
>> <div id="f1">f1 fixed</div>
>>
>> <div id="s8">s8 static</div>
>>
>> <p><a href="../positionierung.htm#position">zurück</a></p>
>> </body>
>> </html>
>
> O_O
>
> WTF? Damn, I had to look up what half the syntax means... (Don't people
> usually use classes rather than IDs to assign styles?)
yes, the page author clearly is missing the point of CSS.
BTW, here's the best CSS resource on the web, learn from it:
http://www.csszengarden.com/
Post a reply to this message
|
|
| |
| |
|
|
|
|
| |
| |
|
|
nemesis wrote:
> BTW, here's the best CSS resource on the web, learn from it:
>
> http://www.csszengarden.com/
Jesus Christ! That thing is amazing!! O_O
Damnit, I couldn't produce static graphics like this, never mind skin a
website with it...
<== PWN3D. :-(
Post a reply to this message
|
|
| |
| |
|
|
|
|
| |
| |
|
|
Invisible escreveu:
> nemesis wrote:
>
>> BTW, here's the best CSS resource on the web, learn from it:
>>
>> http://www.csszengarden.com/
>
> Jesus Christ! That thing is amazing!! O_O
>
> Damnit, I couldn't produce static graphics like this, never mind skin a
> website with it...
>
> <== PWN3D. :-(
indeed, but be sure not to browse it with older IE6.
You can look up the CSS source to learn... :)
Post a reply to this message
|
|
| |
| |
|
|
|
|
| |
| |
|
|
>>> http://www.csszengarden.com/
>>
>> Jesus Christ! That thing is amazing!! O_O
>>
>> Damnit, I couldn't produce static graphics like this, never mind skin
>> a website with it...
>>
>> <== PWN3D. :-(
>
> indeed, but be sure not to browse it with older IE6.
Why would you browse *anything* with IE? :-P
> You can look up the CSS source to learn... :)
No, I've already learned what matters: I cannot possibly compete with
this level of talent. I should just give up now... :-(
Post a reply to this message
|
|
| |
| |
|
|
|
|
| |
| |
|
|
"Invisible" <voi### [at] devnull> wrote in message
news:49789f44@news.povray.org...
> No, I've already learned what matters: I cannot possibly compete with this
> level of talent. I should just give up now... :-(
Why are you always SO negative?
When I started learning Sandbox 1 and 2 for Farcry and Crysis, I
thought I wouldn't be able to do it, but I persevered and produced a map
that's now had 1,711 downloads. I must have done something right, because I
only had two complaints. One where a guy couldn't install the latest patch
for Crysis, so the objectives wouldn't show up, and one guy that couldn't
load the map through a third party program. To say I'm chuffed is an
understatement. :)
The keyword is: Persevered.
~Steve~
Post a reply to this message
|
|
| |
| |
|
|
|
|
| |
