Design Coding Probleme

Gehe zu Seite:

Geschlossen

Mi. 27.02.2013 23:24 Uhr #1

Boy83Ol Mitglied

Hallo alle zusammen !

Ich habe mich nun mal getraut von Tabellen weg zu kommen und mit DIV mich auseinander gesetzt.

Nun ist es so das der Contentinner sich unter die Dynamischen Boxen schiebt und der Spacer verschwindet kann mir jemand nen Tipp geben wo ich meinen Denk Fehler habe?

Vielen Dank im Voraus.

Und wenn jemand mir Tipps geben kann wie der Code sauberer wird immer her Damit will es ja Vernünftig haben ;-).

P.S. Natürlich ist das Design nach Fertigstellung für den freien Download bei ilch vorgesehen ;-)

P.P.S.S Das Design hat mir DarkInF zur Verfügung gestellt um ich nochmal zu nennen das gehört sich ;-)

LG

Boy83Ol

betroffene Homepage: xite.gameserver2go.de/ilch/

index.htm
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57	`<!DOCTYPE` `html>` `<head>` `<meta` `http-equiv="Content-Type"` `content="text/html; charset=iso-8859-1"` `/>` `<link` `rel="stylesheet"` `type="text/css"` `href="./style.css"` `/>` `<link` `rel="stylesheet"` `type="text/css"` `href="./include/designs/BF3/style.css"` `/>` `</head>` `<body>` `<div` `id="wrapper">` `<div` `id="navigation">` `<a` `class="Startseite"` `href="index.php?news"></a>` `<a` `class="Forum"` `href="index.php?forum"></a>` `<a` `class="Downloads"` `href="index.php?donwloads"></a>` `<a` `class="Server"` `href="index.php?server"></a>` `<a` `class="Sponsoren"` `href="index.php?links"></a>` `</div>` `<div` `id="content">` `<div` `id="hmenu"><h1>{HMENU}</h1></div>` `<div` `id="spacer">` `<div` `id="box">{_list_menunr1@<h2>%1</h2>` `<div` `id="boxinner">%2}` `</div>` `</div>` `<div` `style="clear:both">` `</div>` `<div` `id="contentinner">{EXPLODE}` `</div>` `</div>` `</div>` `</div>` `</div>` `</body>` `</html>` `<!--` `{_list_DDDmenupoint@` `<strong><big>·</big></strong>` `<a %1 class="box" href="%2">%3</a>` `<br />` `}` `//-->` `<!-- beispiel:` `[null, '%3', '%2', '%1', null\|],\|,` `-->` `<!-- anfang + link \|ende \|teilende\|teilee -->` `<!-- horizontaler menupunkt -->` `{_list_hmenupoint@<li><a` `target="%1"` `class="box"` `href="%2">%3</a>\|</li>\|<br` `/>\|</ul></li>}` `<!-- horizontaler menupunkt anfang -->` `{_list_hmenubegi@<ul>}` `<!-- horizontaler menupunkt ende -->` `{_list_hmenuende@</ul>}` `<!-- vertikaler menupunkt -->` `{_list_vmenupoint@<li><a` `target="%1"` `class="box"` `href="%2">%3</a>\|</li>\|<br` `/><ul>\|</ul></li>}` `<!-- vertikaler menupunkt anfang -->` `{_list_vmenubegi@<ul>}` `<!-- vertikaler menupunkt ende -->` `{_list_vmenuende@</ul>}`

style.css
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179	`body {` `background:url(img/Header.png)` `top` `center` `no-repeat` `#000;` `}` `#wrapper {` `width:1000px;` `margin:0` `auto;` `}` `#navigation {` `height:93px;` `margin-top:64px;` `background:url(img/NavBG.png)` `no-repeat;` `}` `a.Startseite {` `background:` `url(img/Startseite.png)` `no-repeat;` `width:63px;` `height:14px;` `margin:40px` `0` `0` `526px;` `position:absolute;` `}` `a.Startseite:hover {` `background:url(img/hover/Startseite.png);` `text-align:center;` `}` `a.Forum {` `background:url(img/Forum.png);` `width:36px;` `height:14px;` `margin:40px` `0` `0` `613px;` `position:absolute;` `}` `a.Forum:hover {` `background:url(img/hover/Forum.png);` `}` `a.Downloads {` `background:url(img/Downloads.png);` `width:66px;` `height:14px;` `margin:40px` `0` `0` `675px;` `position:absolute;` `}` `a.Downloads:hover {` `background:url(img/hover/Downloads.png);` `}` `a.Server {` `background:url(img/Server.png);` `width:42px;` `height:14px;` `margin:40px` `0` `0` `768px;` `position:absolute;` `}` `a.Server:hover {` `background:url(img/hover/Server.png);` `}` `a.Sponsoren {` `background:url(img/Sponsoren.png);` `width:63px;` `height:14px;` `margin:40px` `0` `0` `835px;` `position:absolute;` `}` `a.Sponsoren:hover {` `background:url(img/hover/Sponsoren.png);` `}` `a.Kontakt {` `background:url(img/Kontakt.png);` `width:48px;` `height:14px;` `margin:40px` `0` `0` `923px;` `position:absolute;` `}` `a.Kontakt:hover {` `background:url(img/hover/Kontakt.png);` `}` `#content {` `width:1000px;` `margin:394px` `0` `0` `0;` `padding:40px` `0` `0` `0;` `background:url(img/ContentTOP.png)` `top` `left` `no-repeat;` `}` `#spacer {` `background:url(img/Spacer.png)` `top` `left` `repeat-y;` `}` `#hmenu {` `background:url(img/Content.png)` `top` `left` `no-repeat;` `width:648px;` `height:35px;` `margin:0` `0` `0` `40px;` `padding:4px` `0` `0` `0;` `float:left;` `}` `#contentinner {` `width:` `648px;` `margin:` `21px` `0` `0` `40px;` `font-family:` `Verdana;` `color:` `#FFF;` `font-size:10px;` `}` `#box {` `margin:0` `30px` `0` `0;` `float:right;` `}` `#boxinner {` `width:250px;` `}` `#boxend {` `width:250px;` `}` `h1` `{` `margin:0` `0` `0` `10px;` `color:#343435;` `font-family:'BebasNeueRegular';` `font-size:24px;` `text-shadow:0px` `2px` `3px` `#555;` `}` `h2` `{` `background:url(img/Box.png)` `top` `left` `no-repeat;` `height:35px;` `width:250px;` `padding:4px` `0` `0` `10px;` `margin:0;` `color:` `#343435;` `font-family:` `'BebasNeueRegular';` `font-size:` `24px;` `text-shadow:` `0px` `2px` `3px` `#555;` `}` `@font-face {` `font-family:'BebasNeueRegular';` `src:url('font/BebasNeue-webfont.eot');` `src:url('font/BebasNeue-webfont.eot?#iefix')` `format('embedded-opentype'),` `url('font/BebasNeue-webfont.woff')` `format('woff'),` `url('font/BebasNeue-webfont.ttf')` `format('truetype'),` `url('font/BebasNeue-webfont.svg#BebasNeueRegular')` `format('svg');` `}` `td {` `font-family:` `Verdana;` `font-size:` `10px;` `color:` `#FFF;` `}` `a {` `color:` `#FFF;` `font-family:` `Verdana;` `text-decoration:` `none;` `}` `.Chead {` `color:` `#FFF;` `font-size:` `12px;` `}` `.border tr .Cnorm form fieldset legend {` `color:` `#FFF;` `}`

Zuletzt modifiziert von Boy83Ol am 27.02.2013 - 23:36:06

Gestern noch zu blöd, den Computer einzuschalten,
heute schon die eigene Homepage

0 Mitglieder finden den Beitrag gut.

zitieren

Mi. 27.02.2013 23:26 Uhr #2

Siggi Hall Of Fame

Registriert seit
08.02.2007

Beiträge
6.558

Beitragswertungen

Hallo Boy83Ol,

man kann zwar so auch die index.htm und style.css erkennen aber am besten du postes diese direkt mal mit

Wie poste ich falsch?
0 Mitglieder finden den Beitrag gut.
- zitieren
Mi. 27.02.2013 23:36 Uhr #3

Boy83Ol Mitglied

Registriert seit
23.01.2008

Beiträge
395

Beitragswertungen

Ist nun drin ;-)

Gestern noch zu blöd, den Computer einzuschalten,
heute schon die eigene Homepage
0 Mitglieder finden den Beitrag gut.
- zitieren

Do. 28.02.2013 15:00 Uhr #4

Wizzard26 Mitglied

Probier das mal, per firebug ist das hier ien wenig schwer den Code zu berichtigen.

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="./style.css" />
<link rel="stylesheet" type="text/css" href="./include/designs/BF3/style.css" />
</head>
<body>
<div id="wrapper">
    <div id="navigation">
    <a class="Startseite" href="index.php?news"></a>
    <a class="Forum" href="index.php?forum"></a>
    <a class="Downloads" href="index.php?donwloads"></a>
    <a class="Server" href="index.php?server"></a>
    <a class="Sponsoren" href="index.php?links"></a>
    </div>
     
    <div id="content">
    <div id="hmenu"><h1>{HMENU}</h1></div>
    <div id="spacer">
    <div id="contentinner">{EXPLODE}</div>
    <div id="box">{_list_menunr1@<h2>%1</h2>
    <div id="boxinner">%2}</div>
    </div>
    <div style="clear:both"></div>
    </div>
    </div>
</div>
</body>
</html>
         <!--
                    {_list_DDDmenupoint@
                      <strong><big>&middot;</big></strong>
            <a %1 class="box" href="%2">%3</a>
            <br />
                    }
          //-->
            
          <!-- beispiel:
            [null, '%3', '%2', '%1', null|],|,
          -->
          <!--           anfang        +     link                |ende |teilende|teilee  -->
          <!-- horizontaler menupunkt -->
          {_list_hmenupoint@<li><a target="%1" class="box" href="%2">%3</a>|</li>|<br />|</ul></li>}
          <!-- horizontaler menupunkt anfang -->
          {_list_hmenubegi@<ul>}
          <!-- horizontaler menupunkt ende -->
          {_list_hmenuende@</ul>}
            
          <!-- vertikaler menupunkt -->
          {_list_vmenupoint@<li><a target="%1" class="box" href="%2">%3</a>|</li>|<br /><ul>|</ul></li>}
          <!-- vertikaler menupunkt anfang -->
          {_list_vmenubegi@<ul>}
          <!-- vertikaler menupunkt ende -->
          {_list_vmenuende@</ul>}

in der Html war zumindest schonmal ein </div> zuviel.
Zudem noch dir ist bewusst das du einen html5 doctype verwendest ??
Charset nach iso 8859-1 ist auch gewollt und soll kein utf8 sein ???

style="clear:both" benötigst innerhal der html auch nicht, dafür kann man ne .clear class in der css schreiben und die html leerdiv´s nur noch ne class zuweisen.

Greetz Wizz

Zuletzt modifiziert von Wizzard26 am 28.02.2013 - 23:00:10

0 Mitglieder finden den Beitrag gut.

zitieren

Do. 28.02.2013 15:48 Uhr #5

Boy83Ol Mitglied

Registriert seit
23.01.2008

Beiträge
395

Beitragswertungen

Habe es mal mit deinem Code getestet aber es ist das gleiche :-(

Gestern noch zu blöd, den Computer einzuschalten,
heute schon die eigene Homepage
0 Mitglieder finden den Beitrag gut.
- zitieren

Do. 28.02.2013 17:46 Uhr #6

Mikro Mitglied

So wie du das gemacht hast wird es immer so aussehen den ohne css bricht jeder div um. Hier mal wie du es machen solltest. Wichtig ist das du mit float arbeitest. Nur ein Beispiel zum Verständnis der Code hier unten.

<body>
 
<div id="wrapper">
 
    <div id="navigation">
    <a class="Startseite" href="index.php?news"></a>
    <a class="Forum" href="index.php?forum"></a>
    <a class="Downloads" href="index.php?donwloads"></a>
    <a class="Server" href="index.php?server"></a>
    <a class="Sponsoren" href="index.php?links"></a>
    </div>
     
     <div id="content">
        <div id="content_left" style="float:left; width:680px; color:#FFF; border:solid 2px #0C0">
        <!--inhalt links Inhalt Mitte -->
        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.
        </div>
         
        <div id="content_right" style="float:right; width:300px; color:#FFF; border:solid 2px #06F">
        <!-- inhalt rechts Boxen dann hier rein -->
        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.
        </div>
      </div>
</div>
</body>

Wer Rechtschreibfehler findet darf sie behalten!

0 Mitglieder finden den Beitrag gut.

zitieren

Do. 28.02.2013 19:36 Uhr #7

Boy83Ol Mitglied

Registriert seit
23.01.2008

Beiträge
395

Beitragswertungen

Danke für dein Beitrag aber wenn du die style.css gesehen hast die ich angehangen habe wirst du sicherlich merken das ich mit float in der css arbeite und nicht in der html will es ja sauber haben ;-)

Gestern noch zu blöd, den Computer einzuschalten,
heute schon die eigene Homepage
0 Mitglieder finden den Beitrag gut.
- zitieren
Do. 28.02.2013 20:52 Uhr #8

holz Hall Of Fame

Registriert seit
17.11.2005

Beiträge
4.606

Beitragswertungen

haja ist ja kein ding kannst das inline css ja einfach übernehmen und in die style.css übertragen
0 Mitglieder finden den Beitrag gut.
- zitieren
Do. 28.02.2013 23:03 Uhr #9

Wizzard26 Mitglied

Registriert seit
05.03.2009

Beiträge
259

Beitragswertungen

Ich hab den Code oben nochmal geändert, hab gerade erst gesehen das die Hirachie der Divs auch nicht stimmte.
Du hast den content div mit dem Explode innerhalb der innerbox gehabt, das konnte nicht gehen.

Der Rest sollte jetzt, wie Mikro schon sagt, nur noch arbeiten mit den Floats sein.

Greetz Wizz
0 Mitglieder finden den Beitrag gut.
- zitieren

Fr. 01.03.2013 13:25 Uhr #10

Boy83Ol Mitglied

Danke dir hätte aber auch nicht Funktioniert da der abschluss der box von } falsch war und zu dem der Fehler mit dem verschieben lag in der modifizierten News.htm dort war der clear nicht abgeschlossen ;-)

Aber hier mal das Ergebnis wie ich die index.htm jetzt laufen habe.

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="./style.css" />
<link rel="stylesheet" type="text/css" href="./include/designs/BF3/style.css" />
</head>
<body>
<div id="wrapper">
    <div id="navigation">
    <a class="Startseite" href="index.php?news"></a>
    <a class="Forum" href="index.php?forum"></a>
    <a class="Downloads" href="index.php?donwloads"></a>
    <a class="Server" href="index.php?server"></a>
    <a class="Sponsoren" href="index.php?links"></a>
    </div>
      
    <div id="content">
    <div id="hmenu"><h1>{HMENU}</h1></div>
    <div id="spacer">
    <div id="box">{_list_menunr1@<h2>%1</h2>
    <div id="boxinner"><h3>%2</h3></div>}
    </div>
    <div id="contentinner">{EXPLODE}</div>
    <div style="clear:both"></div>
    </div>
    </div>
    </div>
</div>
</body>
</html>
         <!--
                    {_list_DDDmenupoint@
                      <strong><big>&middot;</big></strong>
            <a %1 class="box" href="%2">%3</a>
            <br />
                    }
          //-->
             
          <!-- beispiel:
            [null, '%3', '%2', '%1', null|],|,
          -->
          <!--           anfang        +     link                |ende |teilende|teilee  -->
          <!-- horizontaler menupunkt -->
          {_list_hmenupoint@<li><a target="%1" class="box" href="%2">%3</a>|</li>|<br />|</ul></li>}
          <!-- horizontaler menupunkt anfang -->
          {_list_hmenubegi@<ul>}
          <!-- horizontaler menupunkt ende -->
          {_list_hmenuende@</ul>}
             
          <!-- vertikaler menupunkt -->
          {_list_vmenupoint@<li><a target="%1" class="box" href="%2">%3</a>|</li>|<br /><ul>|</ul></li>}
          <!-- vertikaler menupunkt anfang -->
          {_list_vmenubegi@<ul>}
          <!-- vertikaler menupunkt ende -->
          {_list_vmenuende@</ul>}

Gestern noch zu blöd, den Computer einzuschalten,
heute schon die eigene Homepage

0 Mitglieder finden den Beitrag gut.

zitieren

Do. 14.03.2013 22:14 Uhr #11

Isalapisa Mitglied

Registriert seit
05.07.2012

Beiträge
135

Beitragswertungen

auf jedenfall find ich das design echt klasse

interesse mich auch genau den schritt zu erlernen wie du es gemacht hast
vielleicht könntes du einfach mal Youtube Tutorial machen wie du dein Design genau codes, mit div containers
0 Mitglieder finden den Beitrag gut.
- zitieren
Fr. 05.04.2013 09:44 Uhr #12

Boy83Ol Mitglied

Registriert seit
23.01.2008

Beiträge
395

Beitragswertungen

Ach das nicht nicht ganz so schwer, gehe mal nach dieser Anleitung externer Link und ein gescheiten Editor für Anfänger ist es doch besser Dreamweaver zu nehmen oder kostenlose alternative Microsoft Expression es macht einiges leichter wenn man eine Preview hat, sind halt meine Erfahrungen ;-)

LG

Gestern noch zu blöd, den Computer einzuschalten,
heute schon die eigene Homepage
0 Mitglieder finden den Beitrag gut.
- zitieren

Beitrag zur Merkliste hinzufügen

ilch Forum » Ilch Clan 1.1 » Design und Templates » Design Coding Probleme