✔ Psition Absolut div Tag nach rechts
- Themenstarter son gohan
- Beginndatum
- Status
M
Maik
Code:
div
{
position: absolute;
right: 0;
top: 10px;
width: 100px;
height: 100px;
border: 1px solid #000000;
}
son gohan
Erfahrenes Mitglied
Hallo,
ich will aus der Vorlage hier von Stu Nicholls eine Seite machen wo links und rechts ein Ebene ist von 150px Breite und in der mitte der restliche Content. Aber irgendwie bekomme ich es nicht hin das recht eine Ebene entsteht.
Ich weis nicht ob es an den XHTML Style liegt:
gruß
feh
ich will aus der Vorlage hier von Stu Nicholls eine Seite machen wo links und rechts ein Ebene ist von 150px Breite und in der mitte der restliche Content. Aber irgendwie bekomme ich es nicht hin das recht eine Ebene entsteht.
Ich weis nicht ob es an den XHTML Style liegt:
HTML:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />
<title> Layout </title>
<style type="text/css">
html {height:100%; max-height:100%; overflow:hidden; padding:0; margin:0; border:0; background:#fff; font-size:76%; font-family:georgia, palatino linotype, times new roman, serif;}
body {height:100%; max-height:100%; overflow:hidden; padding:0; margin:0; border:0;}
#content {overflow:auto; position:absolute; z-index:3; top:100px; bottom:50px; left:200px; right:0; background:#eee;}
* html #content {top:0; left:0; right:0; bottom:0; height:100%; max-height:100%; width:100%; overflow:auto; position:absolute; z-index:3; border-top:100px solid #fff; border-bottom:50px solid #fff; border-left:200px solid #fff;}
#head {position:absolute; margin:0; top:0; left:0; display:block; width:100%; height:100px; background:url(clouds.jpg) #000; background-position:0 0; background-repeat:no-repeat; font-size:4em; z-index:5; overflow:hidden; color:#fff;}
#foot {position:absolute; margin:0; bottom:0; left:0; display:block; width:100%; height:50px; font-size:1em; z-index:5; overflow:hidden; background:rgb(76,76,76); color:#fff;}
#left {position:absolute; left:0; top:100px; bottom:50px; width:200px; background:url(chimney.jpg) rgb(76,76,76); background-repeat:no-repeat: font-size:1.2em; z-index:4; overflow:auto; background-repeat:no-repeat;}
* html #left {height:100%; top:0; bottom:0; border-top:100px solid #fff; border-bottom:50px solid #fff; color:#fff;}
#content p {padding:10px;}
.bold {font-size:1.2em; font-weight:bold;}
dd {display:none;}
a.nav, a.nav:visited {margin-left:50px; display:block; width:100px; height:25px; background:#aaa; color:#eee; border:1px solid #000; text-decoration:none; text-align:center; line-height:25px;}
a.nav:hover {background:#000; color:#fff;}
</style>
</head>
<body>
<div id="head"> Pollution</div>
<div id="foot"> ©2004 Stuart A Nicholls</div>
<div id="left">
<dl>
<dt><a class="nav" href="#">Smog</a></dt>
<dd>The causes and effects of Smog</dd>
<dt><a class="nav" href="#">Acid Rain</a></dt>
<dd>How Acid Rain is formed and how to reduce it</dd>
<dt><a class="nav" href="#">Fumes</a></dt>
<dd>The main producers of poluting gasses</dd>
<dt><a class="nav" href="#">GM Crops</a></dt>
<dd>GM crops are they safe</dd>
<dt><a class="nav" href="http://www.s7u.co.uk/comments/comments.php?comment_id=fixit layout 3" title="Your comments">Comments</a></dt>
<dd>A place to leave you comments on this layout</dd>
</dl>
<dl>
<dt><a class="nav" href="index.html">Layouts</a></dt>
<dd>Back to the list of layouts page</dd>
<dt><a class="nav" href="http://www.s7u.co.uk">Home</a></dt>
<dd>Back to the Site Home Page</dd>
<dt><a class="nav" href="bodyfix.html">Layout 1</a></dt>
<dd>My first example of the fixed width layout with header and footer</dd>
<dt><a class="nav" href="body2.html">Layout 2</a></dt>
<dd>My second example of the semi-fluid layout with header, footer and two columns</dd>
<dt><a class="nav" href="body5.html">Layout 4</a></dt>
<dd>My last example of the semi-fluid layout with header, footer and four columns</dd>
</dl>
</div>
<div id="content">
<h2>Pollution ~ the facts.</h2>
<p class="bold">This one works in IE5.01, IE5.5, IE6, Opera 7.23, Mozilla and Firefox</p>
<p>NN7 displays correctly but the absolutely positioned div in the content area stays 'fixed' as the content scrolls.</p>
<p>The menus on the left are produced using definition lists which are easier to work with than unordered lists and have the additional benefit that you can give a 'definition' of each link for text-only browsers.</p>
<p>
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure
dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore
eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim
qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla
facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</p>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim
ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl
ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit
in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla
facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent
luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
</p>
<p>
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure
dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore
eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim
qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla
facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</p>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim
ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl
ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit
in vulputate velit esse
molestie consequat, vel illum dolore eu feugiat nulla
facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent
luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
</p>
<p>
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure
dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore
eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim
qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla
facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</p>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim
ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl
ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit
in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla
facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent
luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
</p>
<p>
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure
dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore
eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim
qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla
facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</p>
<p>© 2004 Stuart Nicholls</p>
</div>
</body>
</html>gruß
feh
M
Maik
Mit der XHTML bzw. XML-Deklaration deiner Seite hat es definitiv nichts zu tun.
Sorry, aber es hängt wohl eher an deinen unzureichenden CSS-Kenntnissen und / oder dem fehlenden Verständnis, eine CSS-Vorlage auf die eigenen Bedürfnisse anzupassen.
[ editpost 12:03 ]
Das von dir gewünschte DIV (am rechten Seitenrand mit 150px Breite) habe ich mit wenigen Handgriffen in Stu Nicholl's Vorlage eingerichtet und die bestehende Breite des linken DIVs von 200 auf 150px minimiert:
[ Browsercheck: FF 1.0.2, IE 6.0, MOZ 1.6, NN 7.0, OP 7.23 ]
greez, maik.l
Sorry, aber es hängt wohl eher an deinen unzureichenden CSS-Kenntnissen und / oder dem fehlenden Verständnis, eine CSS-Vorlage auf die eigenen Bedürfnisse anzupassen.
[ editpost 12:03 ]
Das von dir gewünschte DIV (am rechten Seitenrand mit 150px Breite) habe ich mit wenigen Handgriffen in Stu Nicholl's Vorlage eingerichtet und die bestehende Breite des linken DIVs von 200 auf 150px minimiert:
HTML:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />
<title> Layout </title>
<style type="text/css">
html {height:100%; max-height:100%; overflow:hidden; padding:0; margin:0; border:0; background:#fff; font-size:76%; font-family:georgia, palatino linotype, times new roman, serif;}
body {height:100%; max-height:100%; overflow:hidden; padding:0; margin:0; border:0;}
#content {overflow:auto; position:absolute; z-index:3; top:100px; bottom:50px; left:150px; right:150px; background:#eee;}
* html #content {top:0; left:0; right:0; bottom:0; height:100%; max-height:100%; width:100%; overflow:auto; position:absolute; z-index:3; border-top:100px solid #fff; border-bottom:50px solid #fff; border-left:150px solid #fff; border-right: 150px solid #fff;}
#head {position:absolute; margin:0; top:0; left:0; display:block; width:100%; height:100px; background:url(clouds.jpg) #000; background-position:0 0; background-repeat:no-repeat; font-size:4em; z-index:5; overflow:hidden; color:#fff;}
#foot {position:absolute; margin:0; bottom:0; left:0; display:block; width:100%; height:50px; font-size:1em; z-index:5; overflow:hidden; background:rgb(76,76,76); color:#fff;}
#left {position:absolute; left:0; top:100px; bottom:50px; width:150px; background:url(chimney.jpg) rgb(76,76,76); background-repeat:no-repeat: font-size:1.2em; z-index:4; overflow:auto; background-repeat:no-repeat; color:#fff;}
* html #left {height:100%; top:0; bottom:0; border-top:100px solid #fff; border-bottom:50px solid #fff; color:#fff;}
#content p {padding:10px;}
#right {position:absolute; right:0; top:100px; bottom:50px; width:150px; background:url(chimney.jpg) rgb(76,76,76); background-repeat:no-repeat: font-size:1.2em; z-index:4; overflow:auto; background-repeat:no-repeat; color:#fff;}
* html #right {height:100%; top:0; bottom:0; border-top:100px solid #fff; border-bottom:50px solid #fff; color:#fff;}
#content p {padding:10px;}
.bold {font-size:1.2em; font-weight:bold;}
dd {display:none;}
a.nav, a.nav:visited {margin-left:50px; display:block; width:100px; height:25px; background:#aaa; color:#eee; border:1px solid #000; text-decoration:none; text-align:center; line-height:25px;}
a.nav:hover {background:#000; color:#fff;}
</style>
</head>
<body>
<div id="head"> Pollution</div>
<div id="foot"> ©2004 Stuart A Nicholls</div>
<div id="left">
leftDIV
</div>
<div id="content">
<h2>Pollution ~ the facts.</h2>
<p class="bold">This one works in IE5.01, IE5.5, IE6, Opera 7.23, Mozilla and Firefox</p>
<p>NN7 displays correctly but the absolutely positioned div in the content area stays 'fixed' as the content scrolls.</p>
<p>The menus on the left are produced using definition lists which are easier to work with than unordered lists and have the additional benefit that you can give a 'definition' of each link for text-only browsers.</p>
<p>
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure
dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore
eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim
qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla
facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</p>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim
ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl
ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit
in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla
facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent
luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
</p>
<p>
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure
dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore
eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim
qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla
facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</p>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim
ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl
ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit
in vulputate velit esse
molestie consequat, vel illum dolore eu feugiat nulla
facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent
luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
</p>
<p>
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure
dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore
eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim
qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla
facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</p>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim
ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl
ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit
in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla
facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent
luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
</p>
<p>
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure
dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore
eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim
qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla
facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</p>
<p>© 2004 Stuart Nicholls</p>
</div>
<div id="right">
rightDIV
</div>
</body>
</html>greez, maik.l
Zuletzt bearbeitet von einem Moderator:
son gohan
Erfahrenes Mitglied
Hallo maik,
also da muss ich dir leider absolut recht geben wegen meinen Kentnissen. Ich hatte zwar gestern schon den ganzen Tag schwer rumgelesen und war etwas müde aber das ich mich mit CSS langsam etwas auskenne hatte ich schon gedacht, aber bei dieser Seite habe ich es mal wieder mal gemerkt das ich nichts drauf habe. Aber egal, macht nichts, nachdem ich deine Beispiel Vorlage in den nächsten Wochen in aller Ruhe studieren kann, werde ich sicher auch nochmal einen weiteren Schritt nach vorne machen können.
Vielen Dank.
gruß
fehmi
also da muss ich dir leider absolut recht geben wegen meinen Kentnissen. Ich hatte zwar gestern schon den ganzen Tag schwer rumgelesen und war etwas müde aber das ich mich mit CSS langsam etwas auskenne hatte ich schon gedacht, aber bei dieser Seite habe ich es mal wieder mal gemerkt das ich nichts drauf habe. Aber egal, macht nichts, nachdem ich deine Beispiel Vorlage in den nächsten Wochen in aller Ruhe studieren kann, werde ich sicher auch nochmal einen weiteren Schritt nach vorne machen können.
Vielen Dank.
gruß
fehmi
- Status
