登录 | 注册 | FAQ
Anonymous

Fixieren?

+ 发表回复

10 篇帖子 分页: 1 / 1


Fixieren?

beginner » 周三 1月 12, 2011 8:01 pm

Hallo
Erst einmal ein großes Dankeschön an den oder die Initiatoren dieser Seite.
Das Meißte ist sehr verständlich erklärt. Der Rest liegt denke ich an der Übung....

Bin gerade dabei, eine grobe Struktur meiner Websit zu erstellen.
Also Browser auf halben Bildschirm minimiere daneben den Editor und los...
Alles funktioniert wunderbar.
Wenn ich jedoch den Browser auf Vollbild maximiere stimmen die Abstände zwischen den Elementen nicht
mehr.
Wird der Browser kleiner als einen halben Bildschirm minimiert, verschiebt sich alles über- und durcheinander.
Wie kann ich diesen unerwünschten Effekt ausschalten?
头像

beginner

  • 帖子: 7
  • 注册: 周一 1月 03, 2011 11:14 am

Re: Fixieren?

HTML.net » 周三 1月 12, 2011 8:11 pm

Vielen Dank für die netten Worte! Sie können eines von zwei Dingen:

1) Stellen Sie sich ein div um alles auf die gleiche Breite zu halten:

<html>
<head> </ head>
<body>
<div style="width:600px;">
... Ihre Inhalte
</ div>
</ body>

OR

2) Sie können versuchen, einen "schwebenden" Design, das gut aussehen in beliebiger Breite machen.

Es ist schwieriger. Aber ich würde empfehlen, die Nummer 2.

- Andreas, HTML.net
头像

HTML.net
Site Admin

  • 帖子: 1194
  • 注册: 周六 9月 11, 2010 11:24 am
--
Show some love for HTML.net on Twitter, Facebook and Google: Use the buttons on top of all pages.

Re: Fixieren?

beginner » 周三 1月 12, 2011 8:41 pm

Liegt es daran, daß ich bei allem die Abstände eigegeben habe?


<html>

<head>
<title>website-name</title>
<style type="text/css"><br />
h1 {font-size: 30px; font-family: arial;}
h2 {font-size: 20px; font-family: courier;}
h3 {font-size: 30px; font-family: courier;}
</style>
</head>


<body style="background-color: 6699FF;">
<a href="http://www.html.net"><img align=left src="werben.jpg" alt="werben" /></a><a href="http://www.html.net"><img align=right src="werben.jpg" alt="werben" /></a><h1 align="center">Begrüßung/Vorstellung</h1>


<div style="position:bottom:200px;left:210px;" id="menu">
<ul id="item1">
<li class="top">menu item</li>
<li class="item"><a href="#">menu item 1</a></li>
<li class="item"><a href="#">menu item 2</a></li>
<li class="item"><a href="#">menu item 3</a></li>
</ul>

<ul id="item2">
<li class="top">menu item</li>
<li class="item"><a href="#">menu item 1</a></li>
</ul>

<ul id="item3">
<li class="top">menu item</li>
<li class="item"><a href="#">menu item 1</a></li>
<li class="item"><a href="#">menu item 2</a></li>
</ul>

<ul id="item4">
<li class="top">menu item</li>
<li class="item"><a href="#">menu item 1</a></li>
<li class="item"><a href="#">menu item 2</a></li>
<li class="item"><a href="#">menu item 3</a></li>
<li class="item"><a href="#">menu item 4</a></li>
</ul>

<ul id="item2">
<li class="top">menu item</li>
<li class="item"><a href="#">menu item 1</a></li>
</ul>

<ul id="item3">
<li class="top">menu item</li>
<li class="item"><a href="#">menu item 1</a></li>
<li class="item"><a href="#">menu item 2</a></li>
</ul>

<ul id="item4">
<li class="top">menu item</li>
<li class="item"><a href="#">menu item 1</a></li>
<li class="item"><a href="#">menu item 2</a></li>
<li class="item"><a href="#">menu item 3</a></li>
<li class="item"><a href="#">menu item 4</a></li>
</ul>

</div>
<div class="clear"></div>


<div style="position:bottom:200px;right:230px;" id="menu">
<ul id="item1">
<li class="top">menu item</li>
<li class="item"><a href="#">menu item 1</a></li>
<li class="item"><a href="#">menu item 2</a></li>
<li class="item"><a href="#">menu item 3</a></li>
</ul>

<ul id="item2">
<li class="top">menu item</li>
<li class="item"><a href="#">menu item 1</a></li>
</ul>

<ul id="item3">
<li class="top">menu item</li>
<li class="item"><a href="#">menu item 1</a></li>
<li class="item"><a href="#">menu item 2</a></li>
</ul>

<ul id="item4">
<li class="top">menu item</li>
<li class="item"><a href="#">menu item 1</a></li>
<li class="item"><a href="#">menu item 2</a></li>
<li class="item"><a href="#">menu item 3</a></li>
<li class="item"><a href="#">menu item 4</a></li>
</ul>

<ul id="item2">
<li class="top">menu item</li>
<li class="item"><a href="#">menu item 1</a></li>
</ul>

<ul id="item3">
<li class="top">menu item</li>
<li class="item"><a href="#">menu item 1</a></li>
<li class="item"><a href="#">menu item 2</a></li>
</ul>

<ul id="item4">
<li class="top">menu item</li>
<li class="item"><a href="#">menu item 1</a></li>
<li class="item"><a href="#">menu item 2</a></li>
<li class="item"><a href="#">menu item 3</a></li>
<li class="item"><a href="#">menu item 4</a></li>
</ul>

</div>
<div class="clear"></div>

<a style="position:bottom:370px;left:9px;" href="http://www.html.net"><img align=left src="werben.jpg" alt="werben" /></a><a style="position:absolute;bottom:370px;right:5px;" href="http://www.html.net"><img align=left src="werben.jpg" alt="werben" /></a>
<a style="position:bottom:30px;left:9px;" href="http://www.html.net"><img align=left src="werben.jpg" alt="werben" /></a><a style="position:absolute;bottom:30px;right:5px;" href="http://www.html.net"><img align=left src="werben.jpg" alt="werben" /></a>
</body>


</html>
头像

beginner

  • 帖子: 7
  • 注册: 周一 1月 03, 2011 11:14 am

Re: Fixieren?

HTML.net » 周三 1月 12, 2011 9:01 pm

Es ist, weil Sie "position: absolute" zu verwenden. Versuchen Sie zu vermeiden, dass zu beginnen - es ist wirklich nur die Dinge unnötig kompliziert.

- Andreas, HTML.net
头像

HTML.net
Site Admin

  • 帖子: 1194
  • 注册: 周六 9月 11, 2010 11:24 am
--
Show some love for HTML.net on Twitter, Facebook and Google: Use the buttons on top of all pages.

Re: Fixieren?

beginner » 周三 1月 12, 2011 9:17 pm

Habe position: absolute rausgenommen, dadurch hat sich alles verschoben.
Jedoch überlappt es sich bei einer Änderung der Darstellung nicht mehr.
Wie bekomme ich jetzt alles wieder an seinen alten Platz?
头像

beginner

  • 帖子: 7
  • 注册: 周一 1月 03, 2011 11:14 am

Re: Fixieren?

HTML.net » 周三 1月 12, 2011 9:24 pm

Können Sie ein Bildschirmfoto, wie Sie möchten, dass es sein?

- Andreas, HTML.net
头像

HTML.net
Site Admin

  • 帖子: 1194
  • 注册: 周六 9月 11, 2010 11:24 am
--
Show some love for HTML.net on Twitter, Facebook and Google: Use the buttons on top of all pages.

Re: Fixieren?

beginner » 周三 1月 12, 2011 9:39 pm

Habe ein Bild gemacht, wie es ungefähr sein sollte.
So sah es aus, bevor ich position:absolute entfernt habe.
Auf dem zweiten Bild ist zu sehen wie es jetzt aussieht.

附件

  1. my website2.jpg (137.02 KiB) 被下载 1403 次
    so sieht es jetzt aus
    die restlichen Bilder liegen unterhalb des angezeigten Bildschirms in einer Reihe

  2. my website.jpg (170.93 KiB) 被下载 1425 次
    so sollte es aussehen

头像

beginner

  • 帖子: 7
  • 注册: 周一 1月 03, 2011 11:14 am

Re: Fixieren?

HTML.net » 周三 1月 12, 2011 10:40 pm

Sie benötigen ein Vier-Spalten-Layout:

<div style="float:left; width: 10%;">
<a href="http://www.html.net"><img src="werben.jpg" alt="werben" style="padding:25px;" /></a>
<a href="http://www.html.net"><img src="werben.jpg" alt="werben" style="padding:25px;" /></a>
<a href="http://www.html.net"><img src="werben.jpg" alt="werben" style="padding:25px;" /></a>
</div>

<div style="float:left; width: 35%;">
<ul id="item1">
<li class="top">menu item</li>
<li class="item"><a href="#">menu item 1</a></li>
<li class="item"><a href="#">menu item 2</a></li>
<li class="item"><a href="#">menu item 3</a></li>
</ul>
</div>

<div style="float:left; width: 35%; text-align:right;">
<ul id="item1">
<li class="top">menu item</li>
<li class="item"><a href="#">menu item 1</a></li>
<li class="item"><a href="#">menu item 2</a></li>
<li class="item"><a href="#">menu item 3</a></li>
</ul>
</div>

<div style="float:left; width: 10%; text-align:right">
<a href="http://www.html.net"><img src="werben.jpg" alt="werben" style="padding:25px;" /></a>
<a href="http://www.html.net"><img src="werben.jpg" alt="werben" style="padding:25px;" /></a>
<a href="http://www.html.net"><img src="werben.jpg" alt="werben" style="padding:25px;" /></a>
</div>

Aber erinnern Sie können nie ein Layout, das genau aussehen wird dasselbe in allen Browsern. Ich benutze eine Auflösung 1920x1080 f andere können Ihre Website auf einem viel kleiner Auflösung auf einem Handy zu sehen. Der Schlüssel ist, ein Design, das von allen gesehen werden können machen.

- Andreas, HTML.net
头像

HTML.net
Site Admin

  • 帖子: 1194
  • 注册: 周六 9月 11, 2010 11:24 am
--
Show some love for HTML.net on Twitter, Facebook and Google: Use the buttons on top of all pages.

Re: Fixieren?

Boschh » 周三 3月 23, 2011 12:12 pm

Hallo inwiefern ändert sich den ndas Script bei verschiedenen Auflösungen? Danke schonmal
FBI
Gruß Manuel

最后由 Boschh 编辑于 周三 7月 27, 2011 7:18 am,总共编辑了 1 次

头像

Boschh

  • 帖子: 1
  • 注册: 周三 3月 23, 2011 11:57 am

Re: Fixieren?

Jochen » 周五 4月 15, 2011 1:33 pm

Das Script ändert sich nicht. Ich versuche das mal als Beispiel dar zu stellen. Wenn du unter der Auflösung 1024x768 und einem 15' Zoll-Bildschirm einen Pixel anzeigen lässt ist dieser größer als auf einem 15' Zoll-Bildschirm mit einer Auflösung von 2048x1260 läuft. Wenn man dann alles nach px(Pixeln) ausrichtet kann dies zu Problemen führen mit verschiedenen Ausrichtungen bei denen Elemente der HP beispielsweise wegen zu geringer auflösung auf der rechten Seite verschwinden.
头像

Jochen

  • 帖子: 1
  • 注册: 周五 4月 15, 2011 12:53 pm


+ 发表回复

分页: 1 / 1