nikkibrian
Neues Mitglied
Hey Leute,
Ich hätte eine Frage und zwar möchte ich ein Layout für einen Webviewer bauen. Das grobe Layout habe ich bereits erstellt, jedoch würde ich gerne wissen, ob es etwas zu verbessern gibt.
Wie Ihr im Quellcode sehen könnt habe ich position: relative" und "position: absolute" verwendet. Ich wußte nicht, was die bessere Wahl für mein Vorhaben ist, da ich den Viewer gerne in "resizable" machen möchte, wobei sich auch die Größe der Buttons verändern soll.
Ich hoffe Ihr könnt mir helfen.
Zur Erklärung:
Danke für eure Hilfe.
Nikkibrian
Ich hätte eine Frage und zwar möchte ich ein Layout für einen Webviewer bauen. Das grobe Layout habe ich bereits erstellt, jedoch würde ich gerne wissen, ob es etwas zu verbessern gibt.
Wie Ihr im Quellcode sehen könnt habe ich position: relative" und "position: absolute" verwendet. Ich wußte nicht, was die bessere Wahl für mein Vorhaben ist, da ich den Viewer gerne in "resizable" machen möchte, wobei sich auch die Größe der Buttons verändern soll.
Ich hoffe Ihr könnt mir helfen.
Zur Erklärung:
- id=Container - Hier befindet sich der Viewer
- id=menu - Menüleiste, in welcher sich Buttons befinden
- id=logo - Hier befindet sich ein Logo
- id=right-top-first-button - Hier befindet sich ein Button
- id=right-top-second-button - Hier befindet sich ein Button
- id=right-bottom-button - Hier befindet sich ein Button
HTML:
<html>
<head>
<title></title>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<style type="text/css">
#container{
width: 640px;
height: 480px;
margin: 0 auto;
}
#viewer{
background: grey;
width: 640px;
height: 480px;
min-width: 640px;
min-height: 480px;
max-width: 1920px;
max-height: 1080px;
margin: 0 auto;
position: relative;
}
#menu{
position: relative;
background: blue;
position: relative;
width: 50px;
height: 100%;
float: left;
}
#logo{
position: relative;
width: 50px;
height: 50px;
background: black;
float: left;
margin-left: 1%;
margin-top: 1.5%;
}
#right-top-first-button{
background: #0b9b8c;
top: 2%;
right: 12%;
}
#right-top-second-button{
background: #0a9a9a;
top: 2%;
right: 2%;
}
#right-bottom-button{
background: #0a9b9b;
bottom: 2%;
right: 2%;
}
.button{
background: #ffffff;
width: 60%;
height: 10%;
margin: 20% auto;
}
.ndbutton{
position: absolute;
width: 50px;
height: 50px;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
$('#viewer').draggable();
$('#viewer').resizable();
});
</script>
</head>
<body>
<div id="container">
<div id="viewer">
<div id="menu">
<div id="first-button" class="button"></div>
<div id="second-button" class="button"></div>
<div id="third-button" class="button"></div>
</div>
<div id="logo" class="2ndButton">
</div>
<div id="right-top-first-button" class="ndbutton"></div>
<div id="right-top-second-button" class="ndbutton"></div>
<div id="right-bottom-button" class="ndbutton"></div>
</div>
</div>
</body>
</html>Danke für eure Hilfe.
Nikkibrian
Zuletzt bearbeitet: