Antworten auf deine Fragen:
Neues Thema erstellen

Kritik zu erstem Entwurf

L

Lycanos

Guest

AW: Kritik zu erstem Entwurf

Der 2. Entwurf ist erheblich besser - den grünen Bereich verkleinern und als Menü nutzen, im weißen Teil den Text. Ist schon jetzt wesentlich gefälliger und besser anzuschauen als der erste Entwurf. Damit würde ich weiter arbeiten. Viel Erfolg damit.
 
W

Waegi

Aktives Mitglied

AW: Kritik zu erstem Entwurf

Danke für die Antworten.

@Lycanos, also du meinst das grün verkleinern? Aber als Menü nutzen möchte ich es nicht ganz, möchte schon die klare Unterteilung oben behalten, Navigation und untern der Content, weshalb ich ja auch ein bissche Platz im grünen Bereich für die Bilder benötige.

Mfg Waegi
 
Trabilady

Trabilady

Aktives Mitglied

AW: Kritik zu erstem Entwurf

Mir gefällt der zweite Entwurf ebenfalls um einiges besser, allerdings nur,
wenn nicht so viel Text auf die Startseite kommt, wie im ersten Entwurf. ;)

Die Navigation würde ich auch da lassen, wo Du sie jetzt hast.

Liebe Zweitaktgrüße und weiterhin viel Erfolg und tolle Ideen.
 
W

Waegi

Aktives Mitglied

AW: Kritik zu erstem Entwurf

Danke, ja das hab ich ja schon oft genug betont, dass das nur Text zum en bisschen füllen war, das war zu viel.

Hab nochmal ne Frage an alle, und zwar haltet ihr es für sinnvoll im weißen Bereich den Text zu machen und in dem grünen so eine Art Kontaktbox, damit man das direkt auf einen Blick hat? Die Grüne Fläche ist mittlerweile auch kleiner geworden.

mfg Waegi
 
R

Raphale

angehender Webentwickler

AW: Kritik zu erstem Entwurf

Waegi schrieb:
im weißen Bereich den Text zu machen und in dem grünen so eine Art Kontaktbox, damit man das direkt auf einen Blick hat? Die Grüne Fläche ist mittlerweile auch kleiner geworden.
mfg Waegi
Zum Vergrößern anklicken....

hmm aber nur auf der Startseite/index oder?

denn bei "über uns" oder "leistungen" brauchst du den Platz bestimmt für andere Dinge oder ?

für die Startseite find ich es ok bzw(bild+nr.+adresse) aber weitere und genauere Infos unter den Punkt "Kontakt" belassen.
Indem Sinne dann auch die unterseiten...links = Text und rechts = Bilder+extra Infos.

Deine steigerung beim Template/entwurf finde ich sau gut (bonus wert ;))

MFG
Raphaele

Tipp:
Beim Content würde ich einen weißen hintergrund nehmen, den grünen Bogen als Hintergrundbild und mit transition oder animation beim wechseln zu unterseiten immer ein und ausfahren lassen(von rechts nach links als Ladesymbol) ;)
 
G

GrafFoto

Noch nicht viel geschrieben

AW: Kritik zu erstem Entwurf

Bei so großen Bildern solltest du bedenken, dass immer mehr Leute mit Smartphone oder Tablet ins Netz gehen. Wenn du da keine spezielle Lösung (mobile-Seite oder responsive Design) anbietest, dann dauert es ewig bis das geladen ist und die Seite ist kaum zu nutzen.
 
W

Waegi

Aktives Mitglied

AW: Kritik zu erstem Entwurf

@Raphale, wie meinst du das als Ladesymbol, an sich das ein und ausfahren finde ich aber gut, also zum Anfang, wenn man auf die Seite kommt, geht der Bogen weg und der Contenthintergrund ist komplett weiß, finde ich ne Gute Idee, bei der Kontaktbox rechts würde ich dann Adresse sowie die Telefonnummer schreiben, unter dem Punkt Kontakt dann evtl. nen Kontaktformular und ne Anfahrtsskizze, ähnlich wie auf der alten HP:
Aber danke mal für den Tipp und das Lob.

@GrafFoto, ich glaube ich habe es schon öfter erwähnt, dass ich das umsetzen möchte, also als Responsive Webdesign.

mfg Waegi
 
W

Waegi

Aktives Mitglied

AW: Kritik zu erstem Entwurf

So, da komm ich auch schon mit der ersten Frage zur Umsetzung.
Und zwar hab ich das Problem, dass die Seite im Firefox richtig angezeigt wird, im Bereich der Navigation, also beim Hover-Effekt, es schließt unten genau ab, jedoch wird die Seite im Safari und Internet Explorer fehlerhaft angezeigt, mit einem kleinen grünen Rand darunter.

Hier mal Screens aus den einzelnen Browsern.




Und hier noch der CSS-Code dazu, der obere Teil ist aus der HTML Boilerplatte, nach dem ansprechen der Klasse chromeframe, kommt dann mein Teil.
Code: 
/* HTML5 Boilerplate  */

*{padding:0; margin:0;}
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }
audio:not([controls]) { display: none; }
[hidden] { display: none; }

html { font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
html, button, input, select, textarea { font-family: sans-serif; color: #222; }
body { margin: 0; font-size: 1em; line-height: 1.4; }

::-moz-selection { background: #003d8f; color: #acd305; text-shadow: none; }
::selection { background: #003d8f; color: #acd305; text-shadow: none; }

a { color: #00e; text-decoration:none; }
a:visited { color: #551a8b; }
a:hover { color: #06e; }
a:focus { outline: thin dotted; }
a:hover, a:active { outline: 0; }
abbr[title] { border-bottom: 1px dotted; }
b, strong { font-weight: bold; }
blockquote { margin: 1em 40px; }
dfn { font-style: italic; }
hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }
ins { background: #ff9; color: #000; text-decoration: none; }
mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; }
pre, code, kbd, samp { font-family: monospace, serif; _font-family: 'courier new', monospace; font-size: 1em; }
pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }

q { quotes: none; }
q:before, q:after { content: ""; content: none; }
small { font-size: 85%; }
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }

ul, ol { margin: 1em 0; padding: 0 0 0 40px; }
dd { margin: 0 0 0 40px; }
nav ul, nav ol { list-style: none; list-style-image: none; margin: 0; padding: 0; }

img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; }
svg:not(:root) { overflow: hidden; }
figure { margin: 0; }

form { margin: 0; }
fieldset { border: 0; margin: 0; padding: 0; }

label { cursor: pointer; }
legend { border: 0; *margin-left: -7px; padding: 0; white-space: normal; }
button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; }
button, input { line-height: normal; }
button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; *overflow: visible; }
button[disabled], input[disabled] { cursor: default; }
input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; *width: 13px; *height: 13px; }
input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }
input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }
button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }
textarea { overflow: auto; vertical-align: top; resize: vertical; }
input:valid, textarea:valid {  }
input:invalid, textarea:invalid { background-color: #f0dddd; }

table { border-collapse: collapse; border-spacing: 0; }
td { vertical-align: top; }

.chromeframe { margin: 0.2em 0; background: #ccc; color: black; padding: 0.2em 0; }

body {/*background:url(images/bg.png) center repeat; */ font: 1.4em Myriad Pro, Tahoma, sans-serif; margin:20px 0 50px 0;}
.container{width:1000px; margin:auto; height:1200px;}

h2{font-size:1.5em; color:#dd101d; text-transform:uppercase; font-weight:normal;}
h3{font-size:1.0em; color:#003d8f; font-weight:normal;}
p{font-size:0.7em; color:#353535; padding:10px 0 0 0; line-height:1.4em;}

#logo{width:283px; height:131px; padding:0 0 0 15px; position:absolute; z-index:20;}

#navi{background:#acd305; width:1000px; height:74px; position:absolute; z-index:1; margin:20px 0 0 0;
 -moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
-moz-box-shadow: 0px 0px 15px -5px #000000;
-webkit-box-shadow:  0px 0px 15px -5px #000000;
box-shadow: 0px 0px 15px -5px #000000;}
#navi ul{margin:0 0 0 320px;}
#navi ul li a.active{background:#003d8f; color:#acd305;}
#navi ul li a{color:#003d8f; float:left; padding:24px 20px 22px 20px;}
#navi ul li a:hover{background:#003d8f; color:#acd305;}

#content{background:url(images/bg_content.png) no-repeat; width:1000px; height:723px; margin:170px 0 0 0; position:absolute;
 -moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
-moz-box-shadow: 0px 0px 15px -5px #000000;
-webkit-box-shadow:  0px 0px 15px -5px #000000;
box-shadow: 0px 0px 15px -5px #000000;}
.left-col{float:left; padding:20px; width:600px;}
.right-col{float:right;}
Vielen Dank schonmal für eure Hilfe.

mfg Waegi
 
Myhar

Myhar

Hat es drauf

AW: Kritik zu erstem Entwurf

Ohne dem HTML Code ist der CSS Code relativ sinnfrei ;) Ansonsten kann man dir hier leider relativ wenig helfen.
 
W

Waegi

Aktives Mitglied

AW: Kritik zu erstem Entwurf

Ja ok, hab gedacht, da gibts ne Lösung per CSS, da ich mich schonmal informiert hatte, diesbezüglich und dort war die Rede von einer sogenannten Pseudoklasse :root, diese hat jedoch auch nicht richtig funktioniert.

Code: 
<!doctype html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <title>Späth Haustechnik - Aktuelles</title>
  <meta name="description" content="">

  <meta name="viewport" content="width=device-width">
  <link rel="stylesheet" href="style.css">

  <script src="js/libs/modernizr-2.5.3.min.js"></script>
</head>
<body>
  <!--[if lt IE 7]><p class=chromeframe>Your browser is <em>ancient!</em> <a href="http://browsehappy.com/">Upgrade to a different browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">install Google Chrome Frame</a> to experience this site.</p><![endif]-->
<div id="wrapper" class="container">
    <header>
        <div id="logo">
            <img src="images/logo.png" width="283" height="131" alt="Logo">
        </div>
        <nav id="navi">
            <ul>
                <li><a href="#" class="active">Aktuelles</a></li>
                <li><a href="#">Über Uns</a></li>
                <li><a href="#">Leistungen</a></li>
                <li><a href="#">Referenzen</a></li>
                <li><a href="#">Kontakt</a></li>
            </ul>
        </nav>
    </header>
        
    <div id="content">
        <div class="left-col">
            <article>
                <h3>Herzlich Willkommen auf der Website von</h2>
                <h2>Sp&auml;th Haustechnik</h3>
                
                <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
            </article>
        </div>
        
        <div class="right-col">
            <article>
            
            </article>
        </div>
        
    </div>    

      <footer>
        <div>
    
        </div>
      </footer>
  
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script>window.jQuery || document.write('<script src="js/libs/jquery-1.7.1.min.js"><\/script>')</script>
    <script src="js/plugins.js"></script>
    <script src="js/script.js"></script>
</div>
</body>
</html>

mfg Waegi
 
cebito

cebito

undefined

AW: Kritik zu erstem Entwurf

Waegi schrieb:
Jdort war die Rede von einer sogenannten Pseudoklasse :root
Zum Vergrößern anklicken....
... die der IE erst ab Version 9 kennt. Wenn du Probleme mit dem IE hast, dann sag mit welchem und es wäre auch von Vorteil das Ganze online zu stellen, so muss man das nicht erst nachbauen, zumal wir deine Hintergrundbilder sowieso nicht haben.
 
W

Waegi

Aktives Mitglied

AW: Kritik zu erstem Entwurf

Ich nutze den IE in Updateversion 9.0.11, dort sowie im Safari und auch Chrome tritt der Fehler auf.
Hier noch der Link zur Website:

mfg Waegi
 
R

Raphale

angehender Webentwickler

AW: Kritik zu erstem Entwurf

Versuch ein bißchen rumzufummeln dann klappts meistens :)
z.B.:
#navi ul li a{ padding-bottom:5px;003d8f }
#navi {overflow:hidden;}

Versuch mal folgendes:

#navi ul li a {width:100px;height:30px;background......}
oder
#navi ul li {width:100px;height:30px;background......}

was zum nachdenken ...
HTML:
<nav id="navi"> <ul>
<li><a href="#" style="background-image: url="";background-size:..px ..px;background-position:!!;"></a></li>
<li><a href="" class="active" style="background-image: url="";>Aktuelles</a></li> </ul> </nav>


CSS:

#navi ul li {height:30;width:99;background-color:;}
ODER:

du kannst unterschiedliche hacks anwenden z.B.

@media screen and (-webkit-min-device-pixel-ratio:0) { …….. }
oder

head:first-child+body Selektor { Deklaration; }

Oder ein Js das Browser erkennt oder so:
<!--[if (gte IE 6)&(lte IE 8)]> <link rel="stylesheet" href="css/ie.css" type="text/css" /> <![endif]-->

mehr zu hacks:



LG

Raphaele

Sry bßchen unordentliche Mail ...hab nich soviel Zeit ^^
 
Zuletzt bearbeitet:
W

Waegi

Aktives Mitglied

AW: Kritik zu erstem Entwurf

Also das mit dem rumprobieren wird nix, änder ich es für Safari oder den IE, dann passt es im Firefox nicht mehr und das mit den zum nachdenken kapier ich ken bissche, vlt. mal als Code einfügen und das mit den Hacks hab ich selbst gefunden, also mit dem :root Hack, jedoch kapier ich deins nicht.

Mfg Waegi
 
W

Waegi

Aktives Mitglied

AW: Kritik zu erstem Entwurf

Das Problem dann ist nur wieder, dass ich erstens die Schrift ned in die Mitte bekommen hab, habs mit text-align sowie vertical algin versucht, hat nicht funktioniert und dann hab ich das Problem beim hovern, dass sich der Text nur dann ändern, wenn ich auch auf den Text komm und nicht das Ganze Feld.

mfg Waegi
 
R

Raphale

angehender Webentwickler

AW: Kritik zu erstem Entwurf

Nochmal zu meinem Gewirr da oben ^^

versuchen einfach ein bild 30*90 blau
als hintergrundbild für die links oder listenpunkte.
 
W

Waegi

Aktives Mitglied

AW: Kritik zu erstem Entwurf

Das Problem mit den Links, hatte ich bei einem praktikum schonmal: und dort habe ich es mit einem Bild gelöst, das ist das Problem, das meine ich.

mfg Waegi
 
R

Raphale

angehender Webentwickler

AW: Kritik zu erstem Entwurf

dann musst du nur den link die gleiche grö0e geben oder with 100% height 100%

schrift mit margin und padding zurechtrücken!

ich benutze nie dieses text-align !! is das nich css2 ?
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden
Zu den Gratis-Inhalten

Neueste Themen & Antworten

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Keine Mitglieder online.
Gesamt: 86 (Mitglieder: 1, Gäste: 85)
Robots: 769

Statistik des Forums

Themen
118.619
Beiträge
1.538.363
Mitglieder
67.540
Neuestes Mitglied
Alex Weidner
Oben