Beiträge von DerUser

DerUser

Zitat von explanator

DerUser Mal so als Tipp: Es ist nicht notwendig den ganzen Beitrag samt Code zu zitieren, wenn du allgemein antwortest. Wenn du dich auf eine bestimmte Stelle des Beitrages beziehst reicht es auch aus nur auszugsweise zu zitieren.

Danke.

Tschuldige kommt nicht wieder vor

@z1000 melde dich wenn du das hochgeladen hast;-)

DerUser

Zitat von z1000

Habe mal ein wenig weiter gemacht, kleinigkeiten verändert. Ein paar sachen hinzugefügt etc.

Nun habe ich noch ein kleines problem. Ich denke nachdem dass gelöst ist, sollte das Grundgerüst stehen

In FireFox und Google Chrome sieht die Seite ganz gut aus... siehe hier :

Im Internet Explorer (11) "verrutscht" dieser weise Balken (ein eingefügtes Bild) unter der Navigation weit nach unten weg. Siehe hier :

Hier nochmals die Quellcodes, habe nun auch die CSS ausgelagert.

HTML

<!DOCTYPE html>
<html lang="de">
<meta charset="utf-8">
<title>Titeltext :-)</title>
<style type="text/css">
a:link {
    color: #FFF;
    text-decoration: none;
}
a:visited {
    text-decoration: none;
    color: #FFF;
}
a:hover {
    text-decoration: none;
    color: #FFF;
}
a:active {
    text-decoration: none;
    color: #FFF;
}
</style>
<head>
<link rel="stylesheet" type="text/css" href="CSS/design.css".css" />
</head>
<body>
<div id="seite">
  <header id="header">
    <p><img src="Bilder/mercedes.png" alt="" id="auto"/><a href="index.html"><img src="Bilder/logo.png" alt="" id="logo"/></a><img src="Bilder/head_text2.png"  alt="" width="300" height="17" id="head_text2"/><img src="Bilder/head_text1.png"  alt="" width="325" height="20" id="head_text1"/><a href="index.html"><img src="Bilder/domain.png"  alt="" width="209" height="12" id="domain"/></a></p>
  </header>
  <nav id="nav"><span class="fluid nav" style="font-size: 150%"><a href="neuigkeiten.html">Neuigkeiten</a> - <a href="bio.html">Bio/Geschichte</a> - <a href="leistungen.html">Leistungen</a> - <a href="dinoc.html">3M DI-NOC</a> - <a href="galerie.html">Galerie</a> - <a href="referenzen.html">Referenzen</a> - <a href="kontakt.html">Kontakt</a> - <a href="links.html">Links</a></span></nav>
  <div id="left">
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>TEXT !!!</p>
  </div>
  <main id="main">
     <p><img src="Bilder/unternav.png"  alt="" width="100%" height="2.7%" id="wb"/></p>
     <p>TEXT TEXT TEXT !!! </p>
     <p>&nbsp;</p>
     <p>&nbsp;</p>
     <p>TEXT TEXT TEXT !!! </p>
     <p>&nbsp;</p>
     <p>&nbsp;</p>
     <p>&nbsp;</p>
     <p>TEXT TEXT TEXT !!! </p>
     <p>&nbsp;</p>
     <p>&nbsp;</p>
     <p>&nbsp;</p>
     <p>TEXT TEXT TEXT !!! </p>
     <p>&nbsp;</p>
     <p>&nbsp;</p>
     <p>&nbsp;</p>
     <p>TEXT TEXT TEXT !!! </p>
     <p>&nbsp;</p>
     <p>&nbsp;</p>
     <p>&nbsp;</p>
     <p>TEXT TEXT TEXT !!! </p>
     <p>&nbsp;</p>
     <p>&nbsp;</p>
     <p>TEXT TEXT TEXT !!! </p>
     <p>&nbsp;</p>
     <p>&nbsp;</p>
     <p>&nbsp;</p>
     <p>&nbsp;</p>
  </main>
  <footer id="footer">
    <p style="text-align: center"><a href="http://homepagevomdesigner.de/" target="new"><img src="Bilder/designey_by.png" width="216" height="13" id="designedby"/></a></p>
    <p style="text-align: center">&nbsp;</p>
    <p style="text-align: center; font-style: normal;"><span style="text-align: center; font-weight: bold;"><a href="impressum.html">Impressum</a></span><a href="https://www.facebook.com/pages/xyz" target="new"><img src="Bilder/fb.png" width="100%" height="40%" id="fb"/></a></p>
  </footer>
</div>
</body>
</html>

Alles anzeigen

HTML

@charset "utf-8";
/* CSS Document */


body {
  font: 100% Verdana, Arial, Helvetica, sans-serif;
    background-color:#000;
    color:#FFF;
}
#intro {
}
#logo {
    position: absolute;
    left: 70%;
    top: 4.5%;
    /* width:20%;
    height:8.65%; */
    size:auto;
}
#auto {
    width:25%;
    height:22.5%;
    padding-left:1%;
    padding-top:4%;
}
#seite {
  width:100%;
  margin: 0 auto;
}
#header {
    background:url(../Bilder/header.png);
    background-repeat:no-repeat;
    background-size:100% 100%;
    width:100%;
}
#head_text1 {
    position: absolute;
    left: 20%;
    padding-top: 4%;
}
#head_text2 {
    position: absolute;
    left: 30%;
    padding-top: 8%;
}
#domain {
    position: absolute;
    left: 77%;
    padding-top: 10%;
}
#nav {
    clear: both;
    text-align: center;
    font-size:14px;
}
#wb {
    width:100%;
}
#main {
    background: url(../Bilder/maintext.png);
    background-size:100% auto;
    background-repeat:repeat;
    margin-left: 25%;
    min-height:450px;
}


#left {
  float: left;
  width:25%;
  background:url(../Bilder/mainleft.png);
  background-repeat:no-repeat;
  background-size:100% auto;
  min-height:450px;
  background-position:left 1em;
}


#footer {
    background: url(../Bilder/footer.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    position: fixed;
    bottom: 0px;
    width: 100%;
    height: 10%;
}
#fb {
    position: absolute;
    left: 3%;
    bottom:30%;
    width:auto;
    height:auto;
}
#designedby {
    position: absolute;
    right: 5%;
    bottom:20%;
    width:auto;
    height:auto;
}

Alles anzeigen

Hallo, kannst du das mal als Testcase(zb. square7.ch) hochladen, ich habe deinen Code jetzt local übernommen aber da mir die Grafiken nicht zur Verfügung stehen kann ich dir nicht wirklich helfen...

Zur info noch: size: auto; gibt es nicht

DerUser

Zitat von Kemos

Bei einer neuen Site? Is nicht dein Ernst oder?

Ich habe jetzt einfach den Code der Seite übernommen und gepostet für den Threadersteller:

Hier hasse:

PHP

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8" />
    <title></title>
    <link href="design.css" type="text/css" rel="stylesheet" />
    <link href="bilder/favicon.ico" type="image/x-icon" rel="shortcut icon" />
    <style type="text/css">
        body
        {
        background-color: #fff;
        font-family: Verdana, Arial, sans-serif;
        font-size: 100.01%;
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0
        }




        #header
        {
        background-image: url(../img/0031/mitte.jpg);
        background-repeat: repeat-x;
        background-color: #618cd2;
        position:relative;
        height: 150px;
        }


        #header_links
        {
        background-image: url(../img/0031/links.jpg);
        background-repeat: no-repeat;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1;
        width: 549px;
        height: 150px;
        }


        #header_rechts
        {
        background-image: url(../img/0031/rechts.jpg);
        background-repeat: no-repeat;
        position: absolute;
        top: 0;
        right: 0;
        width: 271px;
        height: 150px;
        }


        #titel
        {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 5;
        width: 100%;
        }


        h1
        {
        margin: 0;
        line-height: 150px;
        font-size: 1.5em;
        font-weight: bold;
        color: #fff;
        text-align: center;
        }


        #wrapper1
        {
        background-image: url(../img/0031/links.gif);
        background-position: 0 0;
        repeat: repeat-y;
        }


        #wrapper2
        {
        background-image: url(../img/0031/mitte.gif);
        background-position: 25% 0;
        repeat: repeat-y;
        }


        #wrapper3
        {
        background-image: url(../img/0031/rechts.gif);
        background-position: 75% 0;
        repeat: repeat-y;
        }






        #linksbox
        {
        float: left;
        width: 23%;
        padding: 1%;
        }




        #content
        {
        float: left;
        width: 48%;
        padding: 1%;
        }




        #rechtsbox
        {
        float: left;
        width: 23%;
        padding: 1%;
        }


        .center {text-align: center;}




</style>
</head>
<body>
    <div id="titel"><h1>Faux Columns bei fl&uuml;ssigem Layout</h1></div>
    <div id="header">


    <div id="header_links"></div><!--Ende header_links-->
    <div id="header_rechts"></div><!--Ende header_rechts-->




    </div><!--Ende header-->








    <div id="wrapper1">
    <div id="wrapper2">
    <div id="wrapper3">


    <div id="linksbox"><h3>Linksbox</h3>
    <p>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
    </p>


    <p>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
    </p>


    </div><!--Ende #linksbox-->






    <div id="content"><h3>Content</h3>
    <p>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
    </p>








    <p class="center">
    <a href="../0031.php">zur&uuml;ck zur Anleitung</a><br>
    <a href="../index.php">zur Startseite</a>
    </p>


    </div><!--Ende #content-->


    <div id="rechtsbox"><h3>Rechtsbox</h3>
    <p>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
    </p>


    </div><!--Ende #rechtsbox-->


    <div style="clear: left;"></div>


    </div><!--Ende #wrapper3-->
    </div><!--Ende #wrapper2-->
    </div><!--Ende #wrapper1-->
</body>
</html>

Alles anzeigen

Zufrieden

DerUser

wie lange liesst du denn das Thema, Hier der Quellcode

PHP

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">
<html lang="de">
<head>
<meta http-equiv="content-type" content="text/html;
charset=ISO-8859-1">
<title>Faux Columns bei fl&uuml;ssigem Layout</title>
 <meta http-equiv="Content-Style-Type" content="text/css">
<link rel="stylesheet" type="text/css" href="../css/demo.css">
<style type="text/css">
body
{
background-color: #fff;
font-family: Verdana, Arial, sans-serif;
font-size: 100.01%;
width: 100%;
height: 100%;
margin: 0;
padding: 0
}




#header
{
background-image: url(../img/0031/mitte.jpg);
background-repeat: repeat-x;
background-color: #618cd2;
position:relative;
height: 150px;
}


#header_links
{
background-image: url(../img/0031/links.jpg);
background-repeat: no-repeat;
position: absolute;
top: 0;
left: 0;
z-index: 1;
width: 549px;
height: 150px;
}


#header_rechts
{
background-image: url(../img/0031/rechts.jpg);
background-repeat: no-repeat;
position: absolute;
top: 0;
right: 0;
width: 271px;
height: 150px;
}


#titel
{
position: absolute;
top: 0;
left: 0;
z-index: 5;
width: 100%;
}


h1
{
margin: 0;
line-height: 150px;
font-size: 1.5em;
font-weight: bold;
color: #fff;
text-align: center;
}


#wrapper1
{
background-image: url(../img/0031/links.gif);
background-position: 0 0;
repeat: repeat-y;
}


#wrapper2
{
background-image: url(../img/0031/mitte.gif);
background-position: 25% 0;
repeat: repeat-y;
}


#wrapper3
{
background-image: url(../img/0031/rechts.gif);
background-position: 75% 0;
repeat: repeat-y;
}






#linksbox
{
float: left;
width: 23%;
padding: 1%;
}




#content
{
float: left;
width: 48%;
padding: 1%;
}




#rechtsbox
{
float: left;
width: 23%;
padding: 1%;
}


.center {text-align: center;}




</style>
<!--Parameter Suchfunktion-->
  <script src="../searchhi.js" type="text/javascript"></script>
<!--Ende Parameter Suchfunktion-->
</head>
<body>
<div id="titel"><h1>Faux Columns bei fl&uuml;ssigem Layout</h1></div>
<div id="header">


<div id="header_links"></div><!--Ende header_links-->
<div id="header_rechts"></div><!--Ende header_rechts-->




</div><!--Ende header-->








<div id="wrapper1">
<div id="wrapper2">
<div id="wrapper3">


<div id="linksbox"><h3>Linksbox</h3>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</p>


<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</p>


</div><!--Ende #linksbox-->






<div id="content"><h3>Content</h3>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</p>








<p class="center">
<a href="../0031.php">zur&uuml;ck zur Anleitung</a><br>
<a href="../index.php">zur Startseite</a>
</p>


</div><!--Ende #content-->


<div id="rechtsbox"><h3>Rechtsbox</h3>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</p>


</div><!--Ende #rechtsbox-->


<div style="clear: left;"></div>


</div><!--Ende #wrapper3-->
</div><!--Ende #wrapper2-->
</div><!--Ende #wrapper1-->


</body>
</html>

Alles anzeigen

COPY&PASTE und ausprobieren btw. Inhalte von dir einfügen:-)

DerUser

ich denke du meinst so etwas: http://ohne-css.gehts-gar.net/demo/0031.html

wenn nicht sag mal ausführlicher was du meinst. ich verstehe es nicht

DerUser

ich wollte wissen ob du 100% validen quellcode schreibst und auch responsive design drauf hast,wenn ja werde ich mich per PN/Email an dich wenden

Beiträge von DerUser

Seitenaufteilung / Positionierung

Seitenaufteilung / Positionierung

Anordnung von divs im CSS-Layout

Anordnung von divs im CSS-Layout

Anordnung von divs im CSS-Layout

Webdesigner für kleinere Websites