✔ Rahmen um Webseite

Status
Nicht offen für weitere Antworten.
P

peter1972

Grünschnabel
Hallo

Ich habe einen Rahmen um meine Webseite gemacht. Soweit so einfach.
Nun möchte ich aber dass die Linke und rechte Linie erst 80 px von oben beginnt. Der code aus meiner Stylessheet lautet:

#wrap { margin: 0 auto; width:950px; background-color:#FFFDE8; border-style:solid; border-color:#F9D7A9; border-width:0px 12px 12px 12px;}

Kann mir bitte jemand helfen ?


Vielen Dank
 
Hi,

in diesem Fall musst du im DIV #wrap ein weiteres Element einbetten, das den Rahmen und den gewünschten oberen Außenabstand erhält:

Code: 
* {
margin:0;
padding:0;
}

#wrap {
margin:0 auto;
width:974px;
background-color:#FFFDE8;
}

#border {
margin-top:80px;
border-style:solid;
border-color:#F9D7A9;
border-width:0px 12px 12px 12px;
}

Code: 
<div id="wrap">
     <div id="border">
          <!-- Hier folgt der Inhalt -->
     </div>
</div>
 
Danke für die schnelle Antwort !:)


Nun weiß ich bloß nicht wo ich in meiner Index.html das div zum schließen eingeben muß:

{config_load file="$language/lang_$language.conf" section="index"}

<div id="wrap">
<div id="border">
<div id="header">
<div id="logo"><img src="{$tpl_path}img/top_logo.jpg" alt="{$store_name}" /></div>
<div id="topmenuwrap">
<ul id="topmenu">
<li><a href="{$cart}">{#link_cart#}</a></li>
{if $account}
<li><a href="{$account}">{#link_account#}</a></li>
{/if}
<li><a href="{$checkout}">{#link_checkout#}</a></li>
{if $account}{php} if (isset($_SESSION['customer_id'])) { {/php}
<li><a href="{$logoff}">{#link_logoff#}</a></li>
{php} } {/php}{/if}
</ul>
</div>
<tr>
<td>{$box_CONTENT}</td>
</tr>
</div>

<div id="breadcrumb">{$navtrail}{$PRODUCT_NAVIGATOR}</div>
<div id="contentwrap">
{if !strstr ($smarty.server.PHP_SELF, 'checkout')}

<div id="leftcol">{$box_CATEGORIES}{$box_ADMIN}{$box_INFORMATION}{$box_NEWSLETTER}{$box_WHATSNEW}</div>
{/if}
<div
{if !strstr ($smarty.server.PHP_SELF, 'checkout')}
id="content"
{else}
id="contentfull"
{/if}
>{$main_content}</div>
{if !strstr ($smarty.server.PHP_SELF, 'checkout')}
{/if}
</div>
<p class="footer">Your Company Footer here</p>
</div>
{if $BANNER}
<table width="100%" border="0" cellspacing="4" cellpadding="0">
<tr>
<td align="center">{$BANNER}</td>
</tr>
</table>
{/if}
<tr>




Die änderung in der Stylesheet sieht jetzt so aus :

#wrap { margin: 0 auto; width:974px; background-color:#FFFDE8;}
#border { margin-top:80px; border-style:solid; border-color:#F9D7A9; border-width:0px 12px 12px 12px;}


Im Prinzip soll
<div id="breadcrumb">{$navtrail}{$PRODUCT_NAVIGATOR}</div>
<div id="contentwrap">
{if !strstr ($smarty.server.PHP_SELF, 'checkout')}

das letzte horizontale sein

Anbei 2 Bilder zur veranschaulichung



Vielen Dank
 

Anhänge

  • Header ist.jpg
    Header ist.jpg
    13 KB · Aufrufe: 25
  • Header soll.jpg
    Header soll.jpg
    13,8 KB · Aufrufe: 25
Du musst in dem DIV #border die Elemente (Seitenbereiche) einbetten, die den linken und rechten Rahmen besitzen sollen.

Möglicherweise ist dann die margin-top:80px-Deklaration überhaupt nicht erforderlich, da sich anscheindend die "80px" durch die vorangegangen Elemente ergeben.
 
Hallo

Du musst in dem DIV #border die Elemente (Seitenbereiche) einbetten, die den linken und rechten Rahmen besitzen sollen.
Zum Vergrößern anklicken....
Damit kann ich leider nicht soviel anfangen, kannst Du das bitte näher ausführen ?
Möglicherweise ist dann die margin-top:80px-Deklaration überhaupt nicht erforderlich, da sich anscheindend die "80px" durch die vorangegangen Elemente ergeben
Zum Vergrößern anklicken....
Das ist wahrscheinlich auch so, der Header ist mit 80px definiert.
Außerdem werden jetzt 80 px zu addiert. Siehe Bild

Wenn ich das richtig verstehe muß dass schliessende # Border div also ziemlich am Ende der Index.html stehen ?
 

Anhänge

  • jetzt.JPG
    jetzt.JPG
    18,1 KB · Aufrufe: 22
Da du hier nur einen Codeschnipsel deiner "index.html" zeigst, kann ich dir auch nicht sagen, bis wohin sich das DIV #border nun genau erstrecken muß.

Und da du eingangs nur den CSS-Code für das DIV #wrap veröffentlicht hast, hatte ich für das nachfolgende Element margin-top:80px empfohlen, da mir der übrige Seitenaufbau nicht bekannt war, was damit hinfällig ist, da ja der Header-Bereich diese Höhe besitzt.

Zeig deshalb mal den vollständigen HTML-Code der "index.html", also den geparsten PHP-Code, und häng das dazugehörige Stylesheet an, oder nenn einen Link zur Seite, wo man direkt einen Blick drauf werfen kann, ansonsten fischen wir hier im trüben Wasser.
 
Hallo

Das ist die komplette index.html Datei gewesen.
Es handelt sich um ein xt-commerce Shop.
Anbei hänge ich die Stylesheet.css. Ich habe jetzt die 80px rausgenommen und die Höhe stimmt wieder.
Leider läuft es im Augenblick nur unter xampp
 

Anhänge

  • stylesheet.txrt.txt
    20,4 KB · Aufrufe: 51
Zuletzt bearbeitet:
Also nochmal: der Bereich der Seite, der den linken und rechten Rahmen besitzen soll, packst du in das DIV #border, und gut ist.
 
Ok, hab mich wahrscheinlich wieder zu doof angestellt.

Habe jetzt das #border an der richtigen Stelle plaziert, Header usw. werden jetzt nicht mehr mit Seitenlinien versehen. Scheinbar muss ich jetzt wieder die richtige Stelle zum </div>
einsetzen finden. Da die untere Linie nach oben in den Contentbereich gezogen wird.

{config_load file="$language/lang_$language.conf" section="index"}

<div id="wrap">

<div id="header">
<div id="logo"><img src="{$tpl_path}img/top_logo.jpg" alt="{$store_name}" /></div>
<div id="topmenuwrap">
<ul id="topmenu">
<li><a href="{$cart}">{#link_cart#}</a></li>
{if $account}
<li><a href="{$account}">{#link_account#}</a></li>
{/if}
<li><a href="{$checkout}">{#link_checkout#}</a></li>
{if $account}{php} if (isset($_SESSION['customer_id'])) { {/php}
<li><a href="{$logoff}">{#link_logoff#}</a></li>
{php} } {/php}{/if}
</ul>
</div>
<tr>
<td>{$box_CONTENT}</td>
</tr>
</div>

<div id="breadcrumb">{$navtrail}{$PRODUCT_NAVIGATOR}</div>
<div id="contentwrap">
{if !strstr ($smarty.server.PHP_SELF, 'checkout')}
<div id="border">
<div id="leftcol">{$box_CATEGORIES}{$box_ADMIN}{$box_INFORMATION}{$box_NEWSLETTER}{$box_WHATSNEW}</div>
{/if}
<div
{if !strstr ($smarty.server.PHP_SELF, 'checkout')}
id="content"
{else}
id="contentfull"
{/if}
>{$main_content}</div>
{if !strstr ($smarty.server.PHP_SELF, 'checkout')}
{/if}
</div>
<p class="footer">Your Company Footer here</p>
</div>
{if $BANNER}
<table width="100%" border="0" cellspacing="4" cellpadding="0">
<tr>
<td align="center">{$BANNER}</td>
</tr>
</table>

{/if}
<tr>jetzt.JPG

Sorry falsches Bild. jetzt das richtige

Dabei fällt mir auf das die Seitenlinien auch weg sind:mad:
 

Anhänge

  • aktuell.jpg
    aktuell.jpg
    28,1 KB · Aufrufe: 16
  • aktuell.jpg
    aktuell.jpg
    28,1 KB · Aufrufe: 21
Das schliessende </div> für #border müsste demnach vor dem schliessenden </div> für #contentwrap notiert werden.
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück