Coding meiner Web-Seite.

**Initialize** · 25.05.2014, 12:12

Hallo Leute,

Ich habe gerade versucht mein Web-Design zu coden und wollte wissen ob dass für den Anfang so passt. Wenn nicht könntet ihr mir ein paar Tips geben was ich falsch gemacht habe?

Weiters wollte ich wissen, ob sie bei euch auch korrekt angezeigt wird, wenn nicht was muss ich machen dass es bei den gängigen Auflösungen passt?

Bei dem Blumen-Bild hätte ich gerne eine Slideshow, wie kann man das realisieren?

Link zur Seite: inmedia.bplaced.net



@charset "utf-8";

/* CSS Document */



<style type="text/css">

body,td,th {

    font-family: "Maven Pro";

}

body {

    background-color: #e9e9e9;

    background-image: url(img/navup.png);

    background-repeat: repeat-x;

}

a:link {

    text-decoration: none;

}

a:visited {

    text-decoration: none;

}

a:hover {

    text-decoration: none;

}

a:active {

    text-decoration: none;

}



.login {

    position:absolute;

    top: 0%;

    left: 93%;

}



.login ul {

  text-align: left;

  display: inline;

  margin: 0;

  padding: 15px 4px 17px 0;

  list-style: none;

}

.login ul li {

    

}



.login ul li ul {

  padding: 0;

  position: absolute;

  top: 40px;

  left: 0;

  width: 100px;

  -webkit-box-shadow: none;

  -moz-box-shadow: none;

  box-shadow: none;

  display: none;

  opacity: 0;

  visibility: hidden;

  -webkit-transiton: opacity 0.2s;

  -moz-transition: opacity 0.2s;

  -ms-transition: opacity 0.2s;

  -o-transition: opacity 0.2s;

  -transition: opacity 0.2s;

}

.login ul li ul li { 

  background: #333333; 

  display: block; 

  color: #fff;

  text-shadow: 0 -1px 0 #000;

}



.login ul li ul li:hover { background: #347aa6; }



.login ul li:hover ul {

  display: block;

  opacity: 1;

  visibility: visible;

}



.logo {

    position:absolute;

    top: 50px;

    left:20%;

}



.soc {

    position:absolute;

    top:90px;

    left:70%;



}



.nav {

    position:relative;

    top:180px;

}



.slideshow {

        position:relative;

    top:180px;

    

}



.nav ul {

    right: 31%;

    position:relative;

    top:-45px;

}



.nav ul a:visited {

    color:#bebebe;

    font-style:bold;

    font-family:"Maven Pro";

}



.nav ul a:link {

    color:#bebebe;

    font-style:bold;

    font-family:"Maven Pro";

}



.nav ul a:hover {

    color:#347aa6;

    font-style:bold;

    font-family:"Maven Pro";

    text-shadow:#666;

    

}



div#content {

    position:absolute;

    text-align:left;

    top: 55%;

    left: 10%;

    width: 80%;

}

PHP-Code:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<link href="css.css" rel="stylesheet" type="text/css" />
<style type="text/css">
body,td,th {
    font-family: "Maven Pro";
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>in:Media</title>
</head>
<body>
</body>

<div class="login">
<ul>
<li><img src="img/login.png" />
 <ul>
      <li>test</li>
      <li>test</li>
      <li>test</li>
    </ul>
    </li>
    </ul>
</div>

<div class="logo">
<a href="index.php?ac=home"><img name="barup" src="img/logo.png" /></a>
</div>

<div class="soc">
<a href="#" onMouseOver="image2.src='img/twi100.png';" onMouseOut="image2.src='img/twi15.png';">
<img name="image2" src="img/twi15.png"</a>&nbsp;<a href="#" onMouseOver="image3.src='img/fb100.png';" onMouseOut="image3.src='img/fb15.png';">
<img name="image3" src="img/fb15.png"</a>

<ul>
</ul>
</div>

<div class="slideshow" align="center">
<a><img src="img/slide.png" /></a>
</div>

<div class="nav" align="center">
<a><img name="nav" src="img/navbar.png" /></a>

<ul>
<a href=index.php?ac=home">Home</a> &nbsp <a href="index.php?ac=bild">Portfolio</a>&nbsp <a href="index.php?ac=impressum">About</a>
</ul>
</div>

<div id="content" align="center">

<?php
echo '<div id="content">';

if($_GET['ac'] == "bild")
{
include_once 'bilder.php';
}


if($_GET['ac'] == "impressum")
{
include_once 'impressum.php';
}

if($_GET['ac'] == "home")
{
include_once 'index.php';
}
echo '</div>';

?>
</div>
</html>

**Devon** · 25.05.2014, 12:33

Nivo Slider eignet sich da am besten zu. Eine Demo gibt es dafür natürlich auch: Nivo Slider Demo
Alternative kannst du auf Basis eines Frameworks (z.B. Bootstrap) auch eine Slideshow mit jquery erstellen und dein Webdesign damit erweitern bzw. dementsprechend dann anpassen.

Gelöschter Benutzer · 25.05.2014, 12:54

@Devon: Du bist total am Thema vorbei gerauscht. Warum schlägst du irgendeinen random Slider vor, ohne zu begründen, warum dieser gut ist? Er hätte auch einfach "free slider" in Google eingeben können und hätte den selben shit bekommen. Zumal das Hauptthema ist, dass seine Elemente an der falschen Position sind in unterschiedlichen Auflösungen. Z.t. Framework -> afaik lernt Initialize gerade HTML/CSS und dann direkt mit einem Framework anzufangen ist mehr als eine schlechte Idee, weil man genau nichts lernt.

@Initialize:
Deine Webseite ist ganz grob erstmal in zwei Teile aufgeteilt... Einmal die Navigation ganz oben und einmal der Rest (Header, Slider + Content), welcher in einen Container kommt, dazu später mehr.
Um den Login ganz oben rechts zu haben, machst du folgendes:

PHP-Code:


<div class="nav">
   <div class="login"></div>
</div>

PHP-Code:


.nav { 
   width: 100%;
   height: 57px;
   background-image: url('img/navup.png');
}
.nav .login { float: right; }

Damit ist das erste Problem gelöst. Der Rest kommt wie gesagt in einen Container, d.h. als erstes positionieren wir alles mittig (width anpassen wenn du möchtest):

PHP-Code:


.container {
   width: 1000px;
   margin-left: auto;
   margin-right: auto;
}

Damit dein Logo links ist und die Twitter/FB icons rechts, machen wir folgendes:

PHP-Code:


<div class="container">
   <div class="header">
      <div class="logo"></div>
         <div class="social">
            <div class="twitter"></div>
            <div class="facebook"></div>
          </div>
      </div>
</div>

und CSS:



.header { }





.header .logo {

    float: left;

}





.header .social {

    float: right;

}





.header .social .twitter {

    background-image: url('img/twi100.png');

opacity: .15;

    width: 45px;

    height: 39px;

}





.header .social .twitter:hover {

    opacity: 1;

}





.header .social .facebook {

    background-image: url('img/fb100.png');

opacity: .15;

    width: 45px;

    height: 39px;

}





.header .social .facebook:hover {

    opacity: 1;

}

}

Du brauchst gar nicht zwei Bilder erstellen mit unterschiedlicher Transparenz, du kannst einfach das Opacity Attribut nutzen. Javascript brauchst du auch nicht um den Effekt zu ändern, wenn man mit der Maus rüberfährt, dafür gibt es :hover.

Die Slideshow packst du direkt unter den Header, ergo:

PHP-Code:


<div class="slideshow"></div>



.slideshow {

   clear: both;

   width: 100%;

   height: 261px;

   background: url('img/slide.png');

}

Und zum Schluss noch die Navigation (fast 1:1 übernommen, bis auf das a[*] Element, das da völlig sinnlos ist):

HTML-Code:

<div class="nav">
  <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">Portfolio</a></li>
      <li><a href="#">About</a>
   </li>
</ul>
</div>



.nav {

    width: 100%;

    height: 34px;

    background: url('img/navbar.png');

}





.nav ul {

    list-style-type: none;

}





.nav ul li {

    float: left;

    display: block;

}

Fertig ist dein Design, was auf jeder Auflösung gleich aussieht, solange man mindestens 1000 Pixel in der Breite zur Verfügung hat.
Und hör auf "position: absolute"; zu nutzen, das ist der Hauptgrund warum dein Design so scheiße positioniert ist... Schau dir das "float" Attribut an.

**Bubble Gum** · 25.05.2014, 14:57

Was hat der <style> tag in deiner Stylesheet zu suchen?!?!

**Initialize** · 25.05.2014, 16:31

Jetzt habe ich aber folgendes problem. Wenn ich deinen Code Schritt für Schritt einarbeite, ist meine obere Navigation nicht ganz am Rand und auch nicht ganz Oben bündig, ich habe oben ca 2px und auf den Seiten auch 2 px platz, jedoch wenn ich es mit position:absolute und top:0px mache, funktioniert's. Genau das selbe wenn ich den Container einbaue mit den Social's sind die auch in der oberen Navigation, und nicht dort wo ich sie haben möchte.

Wie kann ich also die höhe von den div's kontrollieren?

Gelöschter Benutzer · 25.05.2014, 16:33



body,

html {

margin: 0px;

padding: 0px;

}

**beeef** · 26.05.2014, 23:38

was mir auch aufgefallen ist: wenn man über den login-button fährt, klappt sich ja das menü mit dem formular auf. das verschiebt aber den inhalt von deiner webseite nach unten, deshalb solltest du der box ein paar andere css-eigenschaften geben. außerdem bindest du anscheinend ein komplettes html-file ein, welches meta-tags besitzt und sogar einen title-tag, solltest du auf jeden fall vermeiden.

am besten mit

position: absolute;

right: 0px;

top: 40px;

z-index: 9999;

oder sowas in die richtung arbeiten, dann verschiebt sich auch nix mehr. zur info: mit 'position' sagst du dem element, es soll sich auf der gesamten webseite 'absolut' ausrichten, also 0px vom rechten rand weg, 40px vom oberen rand. und mit z-index gibst du mehr oder weniger die ebene an, wie weit das element "vorne" oder "hinten" ist, 9999 ist das höchste, also weiter vorne (oder oben) gehts also nicht..

U-Labs

Account-Boerse

U-IMG

Thema: Coding meiner Web-Seite.

Coding meiner Web-Seite.

AW: Coding meiner Web-Seite.

AW: Coding meiner Web-Seite.

The Following 4 Users Say Thank You to Gelöschter Benutzer For This Useful Post:

AW: Coding meiner Web-Seite.

AW: Coding meiner Web-Seite.

AW: Coding meiner Web-Seite.

The Following User Says Thank You to Gelöschter Benutzer For This Useful Post:

AW: Coding meiner Web-Seite.

Ähnliche Themen

Vorstellung meiner Wenichkeit :D

Sex mit der Mutter meiner Freundin