 Willkommen auf dem Portal für Mediengestalter
|
|
|
| Autor |
Nachricht |
JoeMelRamos
Threadersteller
Dabei seit: 11.02.2012
Ort: -
Alter: -
Geschlecht: 
|
Verfasst Mo 08.07.2013 22:11
Titel RESPONSIVE WEBDESIGN? |
  |
|
Hallo Leute.
Ich verzweifel'.
Ich hab mir eine Internetseite gebaut (OnePage – parallax - scrolling).
Das Problem:Auf mobilen Geräten wie iPad - iPhone sieht alles verschoben und abgef*********** aus  ...
Ich hab mir auch schon Tutorials angesehen, wie sowas funktioniert, jedoch ist es dafür schon längst zu spät(MEIN FEHLER).
Gibt es noch Möglichkeiten, wo man das ganze irgendwie doch responsive hinkriegt? :/ I'm so confused...
Danke euch schonmal für eure Infos! 
|
|
| |
   |
 |
easteregg
Dabei seit: 15.02.2003
Ort: Deutschland
Alter: 36
Geschlecht:
|
Verfasst Mo 08.07.2013 22:19
Titel
|
|
|
|
Wenn's dafür schon längst zu spät ist, wie soll man das dann doch noch hinkriegen? Verrätst ja auch nicht, was genau "verschoben und abgef*********" aussieht. Je nachdem wie vermurkst es ist, und wie lange letztlich die Erstellung der Seite bisher gedauert hat, lohnt sich vielleicht eher ein Neuanfang.
|
|
| |
|
|
|
Anzeige
|
|
|
JoeMelRamos
Threadersteller
Dabei seit: 11.02.2012
Ort: -
Alter: -
Geschlecht:
|
Verfasst Mo 08.07.2013 22:21
Titel
|
|
|
| easteregg hat geschrieben: | | Wenn's dafür schon längst zu spät ist, wie soll man das dann doch noch hinkriegen? Verrätst ja auch nicht, was genau "verschoben und abgef*********" aussieht. Je nachdem wie vermurkst es ist, und wie lange letztlich die Erstellung der Seite bisher gedauert hat, lohnt sich vielleicht eher ein Neuanfang. |
Also was verschoben wird sind einige Bilder.....Alle Texte sind an der richtigen Stelle.
Dann wird der Hintergrund einfachmal weiß. :/
Die Seite ist noch offline, sonst würd ich den Link schicken.... :/
Und an ein Neuanfang ist nicht nachzudenken, da ich zu lange dran sitze :/
Zuletzt bearbeitet von JoeMelRamos am Mo 08.07.2013 22:22, insgesamt 1-mal bearbeitet
|
|
| |
|
|
type1
Dabei seit: 19.11.2004
Ort: -
Alter: 44
Geschlecht:
|
Verfasst Mo 08.07.2013 22:57
Titel
|
|
|
|
Tja. Dann wird's schwer...
|
|
| |
|
|
JoeMelRamos
Threadersteller
Dabei seit: 11.02.2012
Ort: -
Alter: -
Geschlecht:
|
Verfasst Mo 08.07.2013 23:02
Titel
|
|
|
| type1 hat geschrieben: | | Tja. Dann wird's schwer... |
Gibt es nicht Befehle wie: Wenn Smartphone (min - max width), dann
www.xyz.de/andere_Seite ? :/
|
|
| |
|
|
type1
Dabei seit: 19.11.2004
Ort: -
Alter: 44
Geschlecht:
|
Verfasst Mo 08.07.2013 23:08
Titel
|
|
|
|
Klar. Aber was soll das bringen? Wenn der Code der alternativseite auch nur Kot ist haste die gleiche Scheiße. Und deinen Code kennt hier keiner. Man weiß gar nichts über dein Projekt.
|
|
| |
|
|
JoeMelRamos
Threadersteller
Dabei seit: 11.02.2012
Ort: -
Alter: -
Geschlecht:
|
Verfasst Mo 08.07.2013 23:29
Titel
|
|
|
| type1 hat geschrieben: | | Klar. Aber was soll das bringen? Wenn der Code der alternativseite auch nur Kot ist haste die gleiche Scheiße. Und deinen Code kennt hier keiner. Man weiß gar nichts über dein Projekt. |
HIER MEINE CODES  :
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href='http://fonts.googleapis.com/css?family=Noto+Serif:400,700' rel='stylesheet' type='text/css'>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Sükrü Kulaber — Portfolio</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<link rel="shortcut icon" type="image/x-icon" href="images/favicon.ico" />
<script src="script/jquery-1.8.2.min.js"></script>
<script src="script/jquery.scrollTo-1.4.3.1.min.js"></script>
<script type="text/javascript" src="script/jquery.parallax-1.1.js"></script>
<script src="script/jquery.easing.1.3.js"></script>
<script src="script/jquery.scrolldeck.js"></script>
<script src="script/jquery.lettering-0.6.1.min.js"></script>
<script src="script/jquery.scrollorama.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//$('#nav').localScroll(800);
RepositionNav();
$(window).resize(function(){
RepositionNav();
});
//.parallax(xPosition, adjuster, inertia, outerHeight) options:
//xPosition - Horizontal position of the element
//adjuster - y position to start from
//inertia - speed to move relative to vertical scroll. Example: 0.1 is one tenth the speed of scrolling, 2 is twice the speed of scrolling
//outerHeight (true/false) - Whether or not jQuery should use it's outerHeight option to determine when a section is in the viewport
$('#intro').parallax("50%", 0, 0.1, true);
$('.bg1').parallax("50%", 1400, 0.5, true);
$('#second').parallax("50%", 0, 0.1, true);
$('.bg').parallax("30%", 2800, 0.4, true);
$('.bg2').parallax("60%", 2700, 1.7, true);
$('#third').parallax("50%", 2750, 0.3, true);
var deck = new $.scrolldeck({
slides: '.slide',
buttons: '#nav li a',
easing: 'easeInOutExpo'
});
})
</script>
</head>
<body>
<ul id="nav">
<li><a href="#intro" title="Start">Start</a></li>
<li><a href="#second" title="Über Mich">Über Mich</a></li>
<li></li>
<li><a href="#third" title="Arbeiten">Arbeiten</a></li>
<li><a href="#fifth" title="Der Rest">Rest</a></li>
</ul>
<div id="logo-mitte"><a href="#intro" title="Sükrü Kulaber"><img src="images/foto.png" width="75" height="81"></a></div>
<div id="intro" class="slide">
<div class="story">
<div id="navigation"></div>
<div class="bg1"></div>
<h1>HERZLICH WILLKOMMEN.<br><br><br><br><br><br></h1>
<h2>PORTFOLIO<br>VON<br>SÜKRÜ KULABER.</h2>
<div id="zickzack1"><img src="images/zickzack.png" width="1000" height="80"></div>
</div> <!--.story-->
</div> <!--#intro-->
<div id="second" class="slide">
<div class="story">
<div class="float-right">
<h2>ÜBER MICH.</h2>
<p>Sükrü Kulaber 22<br>Geboren und aufgewachsen bin Ich<br>in Bielefeld!<br>Hier können Sie einen Eindruck über <br>meine Projekte sammeln.
<br>Zur Zeit besuche ich das<br> b.i.b. International College in Paderborn.</p>
</div>
<div class="bg"></div>
<div class="bg2"></div>
<div id="zickzack2"><img src="images/zickzack2.png" width="1000" height="80"></div>
</div> <!--.story-->
</div> <!--#second-->
<div id="third" class="slide">
<div class="story">
<h1>ARBEITEN.</h1>
<table class="fotoprintweb" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><p><a href="foto.html" target="print">foto</a></p></td>
<td><p><a href="print.html" target="print">print</a></p></td>
<td><p><a href="web.html" target="print">web</a></p></td>
</tr>
</table>
<div id="tabelle">
<table cellpadding="0" border="0">
<tr>
<td ><iframe src="foto.html" name="print" id="print" width="900" height="452" frameborder="0" scrolling="no"></iframe></td>
</tr>
</table>
</div>
<div id="zickzack3"><img src="images/zickzack.png" width="1000" height="80"></div>
</div> <!--.story-->
</div> <!--#third-->
<div id="fifth" class="slide">
<div class="story">
<div class="float-right">
<h2>REST.</h2>
</div>
<div class="float-left">
<div id="schreiben">
Kontaktieren Sie mich.<br>
Ich freue mich auf Sie!
</div>
<table class="kontaktformular" width="400" border="0" cellspacing="10" cellpadding="0">
<form action="mail.php" method="POST">
<tr>
<td><input type="Text" name="vorname" value="Name" size="30" class="tabelle-groesse" tabindex="3" onFocus="if(this.value=='Name') this.value=''"/></td>
</tr>
<tr>
<td><input type="Text" name="email" value="E-Mail" class="tabelle-groesse" size="30" tabindex="3" onFocus="if(this.value=='E-Mail') this.value=''"/></td>
</tr>
<tr>
<td><textarea name="nachricht" input type="Text" value="Nachricht" cols="30" rows="6" class="tabelle-groesse" size="30" tabindex="3" onFocus="if(this.value=='Nachricht') this.value=''"/></textarea></td>
</tr>
<tr>
<td><input type="submit" name="submit" value="Abschicken!" cols="30" size="30" tabindex="3" /></td>
</tr>
</form>
</table>
</div>
<div id="leiste">
Inhaltlich Verantwortlich<br>
Gemäß § 10 Absatz 3 MDSTV:<br><br>
Sükrü Kulaber<br>
Epiphanienweg 17<br>
33739 Bielefeld<br><br>
0176/32 48 48 69<br>
<a href="mailto:hello@s-kulaber.de">hello@s-kulaber.de</a><br>
www.s-kulaber.de
</div>
<footer>© 2013 by Sükrü Kulaber</footer>
</div> <!--.story-->
</div> <!--#fifth-->
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-2821890-9']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</body>
</html>
CSS
@charset "utf-8";
/* CSS Document */
body{
margin: 0;
min-width: 980px;
padding: 0;
font-family: 'Noto Serif', serif;
}
h1{
font-size: 35px;
}
h2{
text-align: right;
font-size: 35px;
color: white;
}
.infos{
position:absolute;
bottom:100px;
left:50%;
margin-left: -270px;
text-align:center;
font-size:10px;
}
img{
border: 0;
}
.float-left{
float: left;
margin-left:30px;
width:400px;
font-size:20px;
z-index:99;
color:#b79c75;
}
.float-right{
float: right;
margin: 0 20px 0 0;
color:white;
z-index:640;
}
.center{
font-size: 2.5em;
padding: 80px 0 0 0;
text-align: center;
}
#nav{
position: fixed;
width:1000px;
left:50%;
margin-left:-500px;
top:0px;
text-align:center;
list-style: none;
z-index: 999;
font-size:16px;
}
#nav li{
display:inline;
padding-right:70px;
text-align:center;
color:white;
}
#header, #intro, #second{
width: 100%;
}
#intro{
background:url(images/firstBG.jpg) 50% -110px no-repeat fixed;
color: #212121;
height: 1000px;
margin: 0 auto;
padding: 100px 0 0 0;
}
#intro .bg1{
background: url(images/start.png) 50% 300px no-repeat fixed;
height: 800px;
margin: 0 auto;
padding: 0;
position: absolute;
width:1000px;
z-index: 0;
}
#second{
background: url(images/secondBG.jpg) 50% 0 no-repeat fixed;
color: black;
height: 1200px;
margin: 0 auto;
overflow: hidden;
padding: 0;
color: #c04247;
}
#second .bg{
background: url(images/me-neu.png) 50% 0 no-repeat fixed;
height: 1300px;
margin: 0 auto;
padding: 0;
position: absolute;
width:1000px;
z-index: 200;
}
#second .bg2{
background: url(images/trainers.png) 40% 0 no-repeat fixed;
height: 1300px;
margin: 0 auto;
padding: 0;
position: absolute;
width:1000px;
z-index: 610;
}
#third{
background-color: #b79c75;
height: 1200px;
padding: 40px 0 0 0;
color:#212121;
}
#fifth{
background: url(images/forthBG.jpg) 50% 0 no-repeat fixed;
height: 400px;
margin: 0 auto;
padding: 40px 0 0 0;
color:white;
}
.story{
margin: 0 auto;
min-width: 1000px;
overflow: auto;
width: 1000px;
}
.story .float-left, .story .float-right{
padding: 80px 0 0 0;
position: relative;
width: 350px;
}
.slide {
width: 100%;
}
#nav li a.current {
color: white;
text-decoration:underline;
}
#nav li a:hover{
text-decoration: underline;
}
.fotoprintweb a.current{
color: white;
text-decoration:underline;
}
.fotoprintweb a:hover{
text-decoration: underline;
}
a{font-weight:bold;
color: white;
text-decoration:none;
}
#logo-mitte{
position: fixed;
width:1000px;
left:50%;
margin-left:-500px;
text-align:center;
z-index:988;
}
#tabelle{
position: relative;
text-align:center;
width:900px;
left:50%;
margin-left:-450px;
padding-top:10px;
}
.tabelle-groesse{
color: #b79c75;
font-size:20px;
font-family: 'Noto Serif', serif;
background:none;
border: none;
border-bottom: 1px dotted white;
}
#zickzack1{
position:absolute;
bottom:0px;
width:1000px;
height:80px;
left:50%;
margin-left:-500px;
}
#zickzack2{
position:absolute;
bottom:0px;
width:1000px;
height:80px;
left:50%;
margin-left:-500px;
z-index:201;
}
#zickzack3{
position:absolute;
bottom:0px;
width:1000px;
height:80px;
left:50%;
margin-left:-500px;
}
#leiste{
position:absolute;
top:150px;
padding-left:530px;
z-index:1;
}
.kontaktformular{
position:relative;
padding-top:16px;
}
.fotoprintweb{
position:relative;
left:50%;
width:900px;
margin-left:-450px;
text-align:center;
}
#mailja{
position:absolute;
}
iframe{
z-index:999;
}
#schreiben{
position:relative;
margin-left:15px;
margin-top:25px;}
footer{
position:absolute;
bottom:0px;
width:1000px;
text-align:center;
font-size:10px;}
::selection{
background: #c04247; color: #fff;
}
::-moz-selection{
background: #c04247; color: #fff;
}
/* RESPONSIVE DESIGN -IPHONE*/
@media screen and (max-width: 480px) {
#nav li{
display: block;
margin-bottom:20px;
text-align:center;
color:white;
}
#nav{
position: absolute;
width:1000px;
left:50%;
margin-left:-500px;
top:0px;
text-align:center;
list-style: none;
z-index: 999;
font-size:16px;
}
}
/* RESPONSIVE DESIGN -IPAD*/
@media only screen and (max-width: 1024px) {
}
|
|
| |
|
|
Karlarsch
Dabei seit: 05.02.2007
Ort: -
Alter: 58
Geschlecht:
|
Verfasst Di 09.07.2013 06:47
Titel
|
|
|
Invalide Syntax, fehlende Semantik, Div-Suppe, Layout-Tabellen, absolute Positionierung, inline Attribute statt CSS, inflationärer Gebrauch von IDs, veraltete Libs, ... du hast so fast jede handwerkliche Missetat in den paar Zeilen Code die mir spontan einfällt.
Imho ist da nichts zu machen. Es gibt kein Hokuspokus um mal eben auf die Schnelle eine Seite responsiv zu machen.
Mein Rat:
- Verbessere deine HTML/CSS-Skills
- Beschäftigte dich mit dem Thema Responsive Design von Grund auf
- Mach alles neu
Gruß
Karl
|
|
| |
|
|
| |
|
|
| Ähnliche Themen |
Responsive Webdesign
Responsive Webdesign
Breakpoints | Responsive Webdesign
Welche Größe und Breakpojnts bei Responsive Webdesign
Responsive Webdesign mit CSS3 Media Queries
Responsive Image Map
|
|
|
Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.
|
|
