• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Frage.

J

Jintexo

Neues Mitglied
Hallo,


ich habe ein problem, ich bin grade dabei mit html eine seite zu schreiben,
ich arbeite mit div´s.

Problem ist, ich habe die seite auf einem 27 zoll monitor bearbeitet.
Wenn ich mir die seite auf einem 15 zoll monitor angucke, verschiben
sich einige dinge ineinander.

Hat da jemand ne lösung?


MFG
Jintexo
 
Hallo,

Wenn du uns den HTML- und CSS-Code hier rein stellst oder einen Link zu deiner Seite können wir ja mal drüber schauen.

Deine Beschreibung des Problems ist leider unzureichend.

  1. Mit welchem Browser und Betriebssystem hast du es getestet?
  2. Welche Lösungen hast du dir schon erlesen und erfolglos ausprobiert?
  3. Ist dein Code Valide? Test auf validator.w3c.org
  4. Weitere Infos, die du lieber verschweigen würdest?
 
index.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Jintexo</title>
<meta name="description" content="Jintexo">
<meta name="author" content="Jintexo">
<meta name="editor" content="html-editor phase 5">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="style/stylesheet.css" type="text/css">
<BODY bgcolor="#b65f61" background="" position:absolute;>
</BODY>



</head>
<div class="hg2"></div>

<div class="hg">

<p align="left">
</p>

<!---------------------- N E W S --------------------------------------->




<!--- befehle für images einfügen left & right=<img class="right" src="" /> --->




<!---------------------- N E W S --------------------------------------->

</div>


<div class="header">

</div>

<div class="linkbar">

<a link href="index.html">Home</a>
<a link href="forum.html">Forum</a>
<a link href="movies.html">Movies</a>
<a link href="lifestream.html">Live Stream</a>
<a link href="screenshots.html">Screenshots</a>

</div>


</div>

<div class="downbar">

<center>
Powered by Jintexo ©

</center>

</div>

</body>

</html>
Zum Vergrößern anklicken....


style.css

.hg{
left:400px;
top:180px;
width:1000px;
height:700px;
border:1px solid #000000;
position:absolute;
overflow: auto;
background-color:#2d2d2d;
font-family: "Georgia"
}

.header{
left:400px;
top:00px;
border:1px solid #000000;
position:absolute;
background-image: url(../images/header.png);
width:1000px;
height:145px;
}


.linkbar{
background-image: url(../images/linkbar2.png); :no-repeat;
left:400px;
top:150px;
width:1000px;
height:25px;
border:1px solid #000000;
position:absolute;
}

.downbar{
left:400px;
top:882px;
width:1000px;
height:25px;
border:1px dotted #000000;
position:absolute;
background-color:silver;
position:absolute;

}





div.bg {
background-image: url(../images/bg.png);
background-color:orange;
width:500px;height:200px;
border:1px solid red;
padding:20px;
position:absolute;
}


.hg2{
right:4%;
left:4%;
top:0%;
width:90%;
height:100%;
border-right:1px dotted red;
border-left:1px dotted red;
position:absolute;
overflow: auto;
background-color:#2d2d2d;
}


#mainmenu a{
color: #abfffe;
background-image:url(../images/header.jpg);
background-repeat:no-repeat;
padding-left:400px;
background-position:left;
}

a:link{
text-decoration:none;
color:#f90;
margin-left:66px;
margin-right:77px;
background-image:url(../images/)
}

a:visited{
text-decoration:none;
color:#f90
}

a:hover{
text-decoration:none;
background-color:#2d2d2d;
padding-left:1px;
}

#content a
{
color: #abfffe;

}
Zum Vergrößern anklicken....


hab die seite auf windows vista auf nem 27 zoll tft erstellt,
jetzt schiebt sich der rechte aussenrand einfach über das
mittlere div und über den header.

MFG
Jintexo
 
  1. Mit welchem Browser und Betriebssystem hast du es getestet? Firefox/vista/XP
  2. Welche Lösungen hast du dir schon erlesen und erfolglos ausprobiert? keine
  3. Ist dein Code Valide? Test auf validator.w3c.org der link ist kaputt
  4. Weitere Infos, die du lieber verschweigen würdest? nein
 
@wustersoss danke für die links, hab die hp nochnicht hochgeladen


@degers thx! jetzt ist die ganze seite halt kaputt aber ich muss halt alles mit position ;relative: umbauen dann sollte das funktionieren
so wie ich das haben möchte.
 
Zuletzt bearbeitet:
Hallo Degers,

Das "Ineinanderverschieben" geschieht durch die unnötige absolute Positionierung.
Zum Vergrößern anklicken....

Ob eine absolute Positionierung unnötig ist, kann nur der Author entscheiden.
Aber das Ineinanderverschieben kommt nicht daher.

Teste und schau dir mal an was hier passiert:

HTML: 
<!DOCTYPE HTML>
<head>            
   <meta charset=UTF-8>
   <title>Seitentitel steht oben im Fenster   </title>
   <meta name="description" content="Seitenbeschreibung von dem was man sieht.">

<style type="text/css"> 
    *{
        margin: 0; 
        padding: 0;
    }
    html {
        height: 100%;
        background-color: black;
    }
    body {
        height:100%;
        width:100%;
        position: absolute;
        Left: 10px;
        top: 10px;
        background-color: coral;
    }
    div#links {
        position: absolute;
        left: 0;
        top: 20px;
        width: 300px;
        height: 300px;
        background-color: yellow;
    }
    div#mitte {
        position: absolute;
        left: 300px;
        top: 20px;
        width: 1000px;
        height: 300px;
        background-color: lightblue;
    }
    div#rechts {
        position: absolute;
        left: 1300px;
        top: 20px;
        width: 300px;
        height: 300px;
        background-color: yellow;
    }
    div#box {
        position: absolute;
        left: 500px;
        top: 100px;
        width: 300px;
       height: 300px;
        background-color: red;
    }
</style> 

</head>

<body>
    body absolute positioniert
    <div id="links">Links absolut Positioniert</div> 
    <div id="mitte">Mitte auch absolut positioniert</div>
    <div id="rechts"3>rechts absolut positionert</div>
    <div id="box">kasten ist auch absolut positioniert </div>
</body>
</html>
 
du kannst auch mit float left und float right divs positionieren dann machst du alle
breiten und höhen angaben mit % oder em (--> behzieht sich auf die Schriftgrösse).
Auch Schriftgrössen können in % angegeben werden wenn du im css schreibst

HTML: 
/*Global reset*/
* { margin: 0 ; padding: 0 ; border: 0 ; font-size: 16px 100% ; }

danach können alle font-size angaben mit % gemacht werden somit
wird das ganze ein bisschen flexibler.

mfg
 
Ob eine absolute Positionierung unnötig ist, kann nur der Author entscheiden.
Zum Vergrößern anklicken....
Sehe ich anders. Wo es anders zu lösen ist kann man eine Sache als unnötig bezeichnen weil sie nicht nötig ist. Die Entscheidung liegt beim "Autor", das ist wohl richtig, aber auch unbestritten.
Aber das Ineinanderverschieben kommt nicht daher.
Zum Vergrößern anklicken....
In der Ursprungsversion auf jeden Fall.

Die Nutzung von relativen Angaben in Verbindung mit Maximal- und Minimalwerten ist hier eine gute Empfehlung, von dem Rat auf ausschließlich absolute Positionierung zu verzichten abgesehen.
 
Zuletzt bearbeitet:
Die Frage ist wie weit ist dir bekannt wie absolut und relativ positionierte Elemente
zueinander stehen. Denn es gibt Leute die arbeiten nur daran neue Ideen mit absoluten
und relativen Elementen heraus zu tüfteln.
Google mal nach "Stu Nicholls".
 
Die Nutzung von relativen Angaben in Verbindung mit Maximal- und Minimalwerten ist hier eine gute Empfehlung, von dem Rat auf ausschließlich absolute Positionierung zu verzichten abgesehen.
Zum Vergrößern anklicken....
Dem schliesse ich mich an, sein Problem beginnt aber früher, nämlich im unstrukturierten Vorgehen und mangelndem Wissen. Das zeigt sich zum Beipiel auch, wie er die Navigation aufbaut. Ohne Konzept sind nachfolgende Probleme schon jetzt vorhersagbar.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben