K
kornyclown
Guest
Einige werden bestimmt schon andere Posts von mir kennen, da ich schon seit ein paar Wochen an meiner Seite bastel ().
Ich habe mir jetzt schon eine vielzahl von Tutorials angesehen, betreffend responsive Webdesign, bin jetzt aber wieder an einem Punkt der mich ratlos macht.
Zunächst einmal die wichtigen Code Stücke...
Die Links:
Style Sheet Desktop:
Style Sheet Mobile:
Im Desktop Style Sheet ist erstmal nur der "content_home" und "Home" Bereich interessant. Wie man vielleicht sieht, habe ich den komletten .picrow und .portrait Teil im "style_mobile_phone.css" weggelassen, da auf der Smartphoneversion dieses Element nicht auftauchen soll. Das ganze funktioniert so lange, wie ich den link zum Desktop Style Sheet im HTML Dokument auskommentiert habe. Sobald ich ihn wieder reinnehme wird dieses .picrow-Element wieder geladen, auch wenn die Browserweite unter 960px geht, obwohl doch der link sagt, dass bei unter 960px Weite auf das Style sheet zugegriffen werden soll, wo dieses Element nichtmal auftaucht. Warum wird es trotzdem geladen?
Um Unklarheiten keinen Nährboden zu geben,
in meinem link zum "style_mobile_phone.css" steht zwar media="screen..." aber nur damit ich es auf dem Desktop testen kann. Wenn ich der Meinung bin, das es auf dem Desktop gut aussieht und funktioniert werde ich dafür media="handheld....." einsetzen, um dann auch nurnoch die mobilen Geräte anzusprechen.
Ich habe mir jetzt schon eine vielzahl von Tutorials angesehen, betreffend responsive Webdesign, bin jetzt aber wieder an einem Punkt der mich ratlos macht.
Zunächst einmal die wichtigen Code Stücke...
Die Links:
HTML:
<head>
<meta charset="UTF-8">
<title>Thomas Manz.de | VFX</title>
<link rel="SHORTCUT ICON" href="icon.ico" type="image/x-icon" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" type="text/css" media="screen and (max-width:960px)" href="css/style_mobile_phone.css" />
</head>
Code:
@charset "UTF-8";
/* CSS Document */
@font-face { font-family: 'Ebrima'; src: url('../font/ebrima.ttf') format('truetype'); }
@font-face { font-family: 'Ebrima'; src: url('../font/ebrimabd.ttf') format('truetype'); font-weight: bold;}
html, body {height: 100%; margin:0; padding:0;
background: -moz-linear-gradient(left, #cccccc 0%, #ffffff 20%, #ffffff 80%, #cccccc 100%);
background: -webkit-linear-gradient(left, #cccccc 0%,#ffffff 20%,#ffffff 80%,#cccccc 100%);
background: -ms-linear-gradient(left, #cccccc 0%,#ffffff 20%,#ffffff 80%,#cccccc 100%); font-family: Ebrima, Arial, Verdana, sans-serif;}
h1 {font-size: 17pt; padding-left:15px;}
* {outline:none;margin:0;padding:0;}
img, a img {border: none;}
ul, ol { list-style:none;}
/**************** Background Elements ****************/
#wrapper {width:800px; margin: auto; min-height: 100%; height:auto !important; height:100%; overflow: hidden !important; background: url(../images/background.jpg) repeat-y;}
#content {width:700px; height:100%; margin-left:48px;}
#content_home {width: 600px; min-height: 100%; height:auto !important; height:100%; overflow: hidden !important; margin-left:30px; margin-top:60px; padding-left:20px;}
#content_vita {width: 650px; min-height: 100%; height:auto !important; height:100%; overflow: hidden !important; margin-left:0px; margin-top:70px; padding-left:20px;}
#content_gallery {width: 650px; min-height: 100%; height:auto !important; height:100%; overflow: hidden !important; margin-left:0px; margin-top:70px; padding-left:20px;}
#content_contact {margin-left: 20px; margin-top: 70px;}
/*********** Header and Navigation Elements *******************/
header {font-weight: bold;letter-spacing: 3px;color: #FFF; background-color: #000;width: 540px;height: 63px;margin-top:60px;}
#navMenu {position: relative; top: 8px;}
#navMenu ul {line-height: 25px;}
#navMenu li {list-style: none;float: left;position: relative;background: #000;}
#navMenu ul li a {font-size: 10pt;text-align:center;text-decoration: none;width: 180px;height: 25px; display: block;color: #FFF;}
#navMenu ul ul {position: absolute;visibility: hidden; top: 25px;}
#navMenu ul li:hover ul {visibility: visible;}
/************************* Hover Effect ************************/
#navMenu ul li a:hover {background: #FFF; color: #000;}
#navMenu ul li:hover ul li a:hover {background: #FFF;color: #000;}
/********************************************* HOME CONTENT ***********************************************/
/************************* Portrait ************************/
.picrow {width:600px; height:200px; margin-bottom:30px;}
.portrait {width:200px; height:200px; display:block; float:left;}
.portrait_1 { background:url(../images/me1.jpg) no-repeat;}
.portrait_2 { background:url(../images/me2.jpg) no-repeat;}
.portrait_3 { background:url(../images/me3.jpg) no-repeat;}
/************************* Liste ************************/
#content_home ul li { font-weight:bold; margin-left:30px; letter-spacing: 1px; margin-bottom:20px;}
#content_home ul li ul li { font-weight:normal; margin: 0 0 0 40px;}
/********************************************** REEL CONTENT ************************************************/
#content_reel {margin-top: 150px;}
/********************************************** VITA CONTENT ************************************************/
/************************* Liste ************************/
#content_vita ul li { font-weight:bold; margin-left:20px; letter-spacing:1px; margin-bottom:20px;}
#content_vita ul li ul li { font-weight:normal; margin: 0 0 0 30px;}
/********************************************* GALLERY CONTENT ************************************************/
#content_gallery ul li { font-weight: bold;}
#content_gallery ul li.gallery_element { position: relative; margin-bottom: 30px;}
#content_gallery ul li h1 { width: 650px; height:auto; border-width: 0 0 2px 0; border-style: solid; border-color: #000; position: relative;}
#content_gallery ul li ul { position: relative; margin-top: 5px; }
#content_gallery ul li ul li {font-weight: normal;}
/*.gallery_media {}*/
/********************************************* CONTACT CONTENT *************************************************/
#content_contact ul li { font-weight: bold; }
#content_contact ul li h1 { width: 650px; height:auto; border-width: 0 0 2px 0; border-style: solid; border-color: #000; position: relative;}
#content_contact ul li ul { position: relative; margin-top: 5px;}
#content_contact ul li ul li {font-weight: normal; }
#content_contact form { margin-top: 40px;}
#content_contact form table tr td#cm {font-weight:bold;}
#content_contact form table tr {font-weight: normal;}
Code:
@charset "UTF-8";
/* CSS Document */
@font-face { font-family: 'Ebrima'; src: url('../font/ebrima.ttf') format('truetype'); }
@font-face { font-family: 'Ebrima'; src: url('../font/ebrimabd.ttf') format('truetype'); font-weight: bold;}
html, body {height: 100%; margin:0; padding:0;
background: -moz-linear-gradient(left, #cccccc 0%, #ffffff 20%, #ffffff 80%, #cccccc 100%);
background: -webkit-linear-gradient(left, #cccccc 0%,#ffffff 20%,#ffffff 80%,#cccccc 100%);
background: -ms-linear-gradient(left, #cccccc 0%,#ffffff 20%,#ffffff 80%,#cccccc 100%); font-family: Ebrima, Arial, Verdana, sans-serif;}
* {outline:none; margin:0; padding:0;}
h1 {font-size: 17pt; padding-left:15px;}
img, a img {border: none;}
ul, ol { list-style:none;}
/********************** Background Elements **********************/
#wrapper {width:400px; margin: auto; min-height: 100%; height:auto !important; height:100%; overflow: hidden !important; background: url(../images/background_mobile_phone.jpg) repeat-y;}
#content {width:303px; height:100%; margin-left:48px;}
#content_home {width: 303px; min-height: 100%; height:auto !important; height:100%; overflow: hidden !important; padding-left:20px; margin-top: 50px;}
/***************** Header and Navigation Elements ******************/
header {font-weight: bold;letter-spacing: 3px;color: #FFF; background-color: #000;width: 303px;height: 60;margin-top:40px;}
#navMenu {position: relative; top: 15px;}
#navMenu ul {line-height: 35px;}
#navMenu li {list-style: none;float: none;position: relative;background: #000;}
#navMenu ul li a {font-size: 13pt;text-align:center;text-decoration: none;width: 303px;height: 35px; display: block;color: #FFF;}
/********** Hover Effect ************/
#navMenu ul li a:hover {background: #FFF; color: #000;}
#navMenu ul li:hover ul li a:hover {background: #FFF;color: #000;}
/********************************************* HOME CONTENT ***********************************************/
/************************* Liste ************************/
#content_home ul li {font-size:10pt; font-weight:bold; letter-spacing: 1px; margin-bottom:20px;}
#content_home ul li ul li { font-weight:normal; margin: 0 0 0 40px;}
Um Unklarheiten keinen Nährboden zu geben,
in meinem link zum "style_mobile_phone.css" steht zwar media="screen..." aber nur damit ich es auf dem Desktop testen kann. Wenn ich der Meinung bin, das es auf dem Desktop gut aussieht und funktioniert werde ich dafür media="handheld....." einsetzen, um dann auch nurnoch die mobilen Geräte anzusprechen.
Zuletzt bearbeitet von einem Moderator: