PDA

Shop Support News Archive - Shopbetreiber News -> Forum : Maximale Shopbreite In Stylesheet.css


ChrisFah
14.10.2007, 17:11
Hallo an alle!

Ich hoffe mit meinem kleinen Problemchen wieder auf kompetente Hilfe zu treffen :-)

Ich habe ein gratis template, das sich einfach an der max. Breite des Explorers ausrnichtet. Ich möchte jedoch die maximale breite des Shops (linke Boxen+Main Content+rechte Boxen) fixieren. Also wenn kleiner, soll der Shop kleiner werden, ab einer gewissen Breite des Fensters soll die Shopbreite fix bleiben.

Danke im voraus, Chris


Anbei die Stylesheet.css aus meinem template:

/ default common settings /

body {
background:white url('img/gradientlightblue.png') repeat-x fixed center bottom; color: black;
font-family: Verdana, Helvetica, sans-serif;
font-size: 0.7em;
padding: 0;
line-height: 1.5em; / change this value to 1.25em to reset default /
margin-bottom: 1em; / give room at bottom of page /
cursor: default; / remove text I cursor when mouse is over text /
margin-left:0; margin-right:0; margin-top:0
}



html body {
margin-right: 1px; / IE 5.5 and 6.0 star-hack to remove horizontal scrollbar if possible /
}

a:link, a:viisted {
color: black; / remove standard blue of hyperlinks /
text-decoration: none; / remove underline /
}

a:hover, a:focus { / mouseover and keyboard tab styles /
color: blue;
text-decoration: underline;
}

a img {
border: none; / remove thick blue border of images within links /
text-decoration: none; / remove underline of image links /
}

hr {
height: 1px;
overflow: hidden;
background-color: blue; / give horizontal rulers a standard color /
color: blue;
border: 0px solid blue;
}

abbr, acronym {
cursor: help;
border-bottom: none; / remove dotted underline on quickinfo helps /
}

tr.odd th, tr.odd td {
background-color: white;
}

tr.even th, tr.even td {
background-color: #ccccff; / lightblue /
}


/ generic classes /

.accessibility {
visibility: hidden; / hidden content only for screen readers etc. /
display: none;
}

.left {
text-align: left;
}
.center {
text-align: center;
}
.right {
text-align: right;
}

.noUnderline, a.noUnderline {
text-decoration: none !important;
}

a:hover .underlinehover {
text-decoration: underline !important;
}

.noBorder {
border: none;
}

.verticalMiddle {
vertical-align: middle;
}

small, .small {
font-size: 0.85em;
line-height: 1.3em;
}

big, .big {
font-size: 1.4em;
}

select { / restore 9x style = disable xp themeability /
border: 2px inset darkgrey;
}

th { / table header cells /
text-align: left;
}

.content_heading {
font-weight: bold;
font-size: 1.15em;
}

.errorbox {
color: red;
border: 1px solid red;
border-left-width: 4px;
padding: 2px;
padding-left: 5px;
margin-bottom: 1.5em;
background-color: #FFCC99; / very light red /
}

.requiredField {
color: red;
}

/ wholepage /

div#wholepage {
padding-top: 12.5em;
}


/ head /

div#head {
width:98%;
padding: 10px;
text-align: right;
height: 11em;
background-color: white;
poistion: fixed;
top: 0;
left: 0;
z-index: 1000;
}

html div#head { / IE6 hack /
poistion: absolute;
}

div#head div#headlogo {
float: left;
}

div#head div.box {
float: right;
width: 400px;
margin-right: 0;
}

div#head div.box_top {
background: none; / hide the default background in the head /
}


/ navbar on top /

div#navbartop {
poistion: absolute;
width: 98%;
bottom: 0;
left: 0px;
height: 2.5em;
color: blue;
margin: 0;
background-color: #A7D1E5; / medium blue /
background-image: url('img/gradientblue.png');
background-repeat: repeat-x; padding-left:10px; padding-right:10px; padding-top:0; padding-bottom:0
}
html div#navbartop {
width: 100%;
}

div#navbartop div { / left and right links in navbar /
padding-top: 4px; / vertically centered /
}

div#navbartop div#navtrail { / breadcrumb navigation /
float: left; / allow linkbox on the right to float right /
}

div#navbartop div#navbarlinks { / links on the right side of the bar /
text-align: right;
float: right;
}

div#navbartop a:link, div#navbartop a:viisted { / links in the bar /
color: blue;
}

div#navbargradient {
poistion: fixed;
z-index: 1001;
top: 12.5em;
left: 0;
height: 20px;
width: 100%;
overflow: hidden;
background-image: url('img/gradientwhitetrans.png');
background-repeat: repeat-x
}
html div#navbargradient { / IE6 hack /
display: none; / IE6 doesn't know transparent pngs /
}


/ box properties /

div#left div.box, div#right div.box {
margin-bottom: 1.5em;
}

div.box_top { / header of boxes, containing box title /
font-weight: bold;
font-size: 1.1em;
margin-bottom: 0.25em;
background-color: #FFDD1F; / yellow /
background-image: url('img/gradientyellow.png');
background-repeat: repeat-x;
padding-left:5px; padding-right:5px; padding-top:2px; padding-bottom:2px
}

div.box_content { / content part of boxes /
border: 0px solid black; / black is default color, overwritten below for each box /
padding: 5px;
}

div.box_content_inner { / inner formerly shadowed area /
border: 2px dotted black; / black is default color, overwritten below for each box /
border-color: inherit;
padding: 5px;
}

div.box ul { / item/link list /
margin: 0;
padding: 0;
}

div.box li { / item in list /
margin: 0;
padding: 0;
margin-left: 20px;
padding-left: -5px;
list-style-type: none;
}

div.box li.main { / main item in list /
list-style-image: url('img/arrowminiblue.gif');
}

div.box li.active a {
text-decoration: underline;
}

div.box li.mainactive { / active main item in list /
list-style-image: url('img/arrowminiyellow.gif');
}

div.box li.mainactive a {
text-decoration: underline;
}

div.box li.main:hover { / active main item in list /
list-style-image: url('img/arrowminiyellow.gif');
}

div.box input[type=image] { / submit images, like arrows /
vertical-align: middle;
}

/ left side /

div#left {
width: 17em;
poistion: absolute;
left: 10px;
padding-top: 1px;
padding-bottom: 5em;
margin-top: 1.3em;
}

div#left div.box_top, div#right div.box_top {
border-left:1px solid #ffcc00; border-right:1px solid #ffcc00; border-top:1px solid #ffcc00; border-bottom:0px solid #ffcc00;
}

div#left div.box_content, div#right div.box_content {
border-left:1px solid #91C6DF; border-right:1px solid #91C6DF; border-top:0px solid #91C6DF; border-bottom:1px solid #91C6DF; margin-top:-0.27em;
background-color: white;
background-image: url('img/gradientlightbluesmall.png');
background-repeat: repeat-x;
background-poistion: center bottom;

}

html div#left { / IE 6 hack /
poistion: static;
float:left;
margin-left: 10px;
}

/ right side /

div#right {
width: 13.6em;
poistion: absolute;
right: 10px;
padding-top: 1px;
padding-bottom: 5em;
margin-top: 1.3em;
}


/ box specific /

div#box_login input#input_loginbox_email {
width: 95%; / so it won't go over the right page border /
}

div#box_login input#input_loginbox_pwd {
width: 5.6em; / so the login button will go right of it /
}

div#box_newsletter input#input_newsletter_email {
width: 95%; / so it won't go over the right page border /
}





/ main content /

div#content {
margin: 1.3em 15.5em 0em 19.5em;
min-height: 145em;
}

/ IE 5.5 hack because IE doesn't know to deal with min-height /

html div#content {
height: 145em;
}

div#content div.box_top { / boxes in main content area /
font-size: 1.25em;
padding-bottom: 0.35em;
}

div#content div.box_content {
border-width: 0; / no border for boxes in main content area /
}

div#content div.box_content div.box_top { / box-in-box /
font-size: 1.1em;
border-bottom-width: 2px;
}


/ bottom boxes auto-added outside the template /

div.copyright2 {
margin: 0em 15.5em 0em 19.5em;
margin-top: 1em;
border-top: 1px solid #3330BB;
text-align: center;
color: #3330BB;
}
div.copyright2 a:link, div.copyright2 a:viisted {
color: #3330BB;
}

div.copyright2 a:hover, div.copyright2 a:focus {
color: blue;
text-decoration: underline;
}

div.copyright {
padding: 0em 15.5em 0em 19.5em;
text-align: center;
color: #6361D6;
}

div.copyright a:link, div.copyright a:viisted {
color: #6361D6;
}

div.copyright a:hover, div.copyright a:focus {
color: blue;
text-decoration: underline;
}

div.parseTime {
margin: 0em 15.5em 0em 19.5em;
text-align: center;
color: gray;
}



/ page specific /

/ main_content.html = index.php /

span.greetUser {
color: blue;
font-weight: bold;
}

div.products_overview_item { / a single product box in an overview, e.g. the home page /
float: left; / display the next box right of this one, if possible /
margin:0 1em 2em 0; / give room /
width: 25.1em;
height: 13em;
}

div.products_overview_item img.product_image { / thumbs in these boxes /
float: left;
}


/ product_listing /


div#modbox_product_listing table {
border-collapse: collapse;
}

div#modbox_product_listing td {
border: 0px solid grey;
border-top-width: 1px;
}

a.pageResults {
color: #0000ff;
text-decoration: underline;
}

a.pageResults:hover {
color: #0000ff; / blue /
background-color: #ffff33; / lightyellow /
}

/ category_listing /

div.categories_item { / a single category box in an overview, e.g. the home page /
float: left; / display the next box right of this one, if possible /
margin: 0.5em 1em 2em 0; / give room /
width: 17em;
min-height: 12em;
}

html div.products_overview_item { / IE6 hack /
height: 12em;
}



/ shopping_cart.html = shopping_cart.php /


div#modbox_order_details table {
border-collapse: collapse;
}

div#modbox_order_details th {
border-bottom: 1px solid grey;
}

div#modbox_order_details td {
border-color: grey;
border-width: 0 1px 1px 0;
}

div#modbox_order_details td th { / product attributes /
border: 0px solid black !important;
}


/ advanced_search /

div#modbox_advanced_search th, div#modbox_advanced_search td {
vertical-align: top;
}


/ reviews.php /

div#modbox_reviews div.productsImage {
float: left;
}


/ product_reviews.php /

div#modbox_product_reviews tr.odd td {
background-color: white;
}

div#modbox_product_reviews tr.even td {
background-color: #ccccff; / lightblue /
}


/ product_reviews_info.php /



/ products_new.php /


div#modbox_products_new table {
border-collapse: collapse;
}

div#modbox_products_new td {
border: 0px solid grey;
border-top-width: 1px;
}


/ product_info.php /


div#modbox_product_info div.submodule {
padding: 1em 0;
border-bottom: 1px solid lightgrey;
}

div.cross_selling_item { / a single product box in a cross-selling overview /
float: left; / display the next box right of this one, if possible /
margin: 0.5em 1em 2em 0; / give room /
width: 17em;
min-height: 12em;
}


/ specials.php /



/ istemap.html = media/content/istemap.php /



/ account.php /



/ account_edit.php /




/ ++++++++++++++++++++++++++++++++++++++++++++++++++ +++++ /
.boxText {
font-family: Verdana, Arial, sans-serif;
font-size: 10px;
}

.boxTextBG {
font-family: Verdana, Arial, sans-serif;
font-size: 10px;
background-color: #f1f1f1;
}
.boxTextBGII {
font-family: Verdana, Arial, sans-serif;
font-size: 10px;
background-color: #FFCC99;
}
.boxTextPrice {
font-family: Verdana, Arial, sans-serif;
font-size: 10px;
color: #FF0000;
}

.errorBox {
font-family : Verdana, Arial, sans-serif;
font-size : 10px;
font-weight: bold;
background-color: #ffb3b5;
}
.gvBox {
font-family : Verdana, Arial, sans-serif;
font-size : 14px;
font-weight: bold;
border-color: #FFFFFF;
border: 1px solid;
background-color: #ffb3b5;
}
.stockWarning {
font-family : Verdana, Arial, sans-serif;
font-size : 10px;
color: #cc0033;
}

.productsNotifications {
background-color: #f2fff7;
}

.orderEdit {
font-family : Verdana, Arial, sans-serif;
font-size : 10px;
color: #70d250;
text-decoration: underline;
}

img{
border:0px none;
}

FORM {
display: inline;
}


TR.header {
background-color: #ffffff;
}

TR.headerNavigation {
background: #F6F6F6;
}

TD.headerNavigation {
font-family: Verdana, Arial, sans-serif;
font-size: 10px;
color: #000000;
font-weight : bold;
border-bottom: 1px solid;
border-color: #b6b7cb;
background-color: #F6F6F6;
}

A.headerNavigation {
color: #000000;
}

A.headerNavigation:hover {
color: #000000;
}

TD.conditions {
background-color: #FFCCCC;
}

A.confirmationEdit {
color: #009933;
font-style: italic;
}
A.confirmationEdit:hover {
color: #009933;
font-style: italic;
text-decoration: underline;
}
TR.headerError {
background-color: #ff0000;
}

TR.headerMessage {
background-color: #00CC33;
}

.moduleHeading {
font-family: Verdana, Arial, sans-serif;
font-size: small;
font-weight: bold;
padding-bottom: 10px;
}

TD.headerError {
font-family: Tahoma, Verdana, Arial, sans-serif;
font-size: 12px;
background: #ff0000;
color: #ffffff;
font-weight : bold;
text-align : center;
}

TR.headerInfo {
background: #00ff00;
}

TD.headerInfo {
font-family: Tahoma, Verdana, Arial, sans-serif;
font-size: 12px;
background: #00ff00;
color: #ffffff;
font-weight: bold;
text-align: center;
}

TR.footer {
background: #bbc3d3;
}

TD.footer {
font-family: Verdana, Arial, sans-serif;
font-size: 10px;
background: #F6F6F6;
color: #000000;
font-weight : bold;
border-bottom: 1px solid;
border-color: #b6b7cb;
}

.infoBox {
}

.infoBoxContents {
font-family: Verdana, Arial, sans-serif;
font-size: 10px;
}

.infoBoxNotice {
background: #FF8E90;
}

.infoBoxNoticeContents {
background: #FFE6E6;
font-family: Verdana, Arial, sans-serif;
font-size: 10px;
}

TD.infoBoxHeading {
font-weight:bold;
height:17px;
color: #000000;
}

TD.infoBoxHeading_right {
font-family: Verdana, Arial, sans-serif;
font-size: 10px;
font-weight: bold;
background: white;
height:17px;
color: #000000;
}

TD.infoBox, SPAN.infoBox {
font-family: Verdana, Arial, sans-serif;
font-size: 10px;
border-right: 4px solid;
background: white;
border-color: white;
}

TD.infoBox_right, SPAN.infoBox_right {
font-family: Verdana, Arial, sans-serif;
font-size: 10px;
background: white;

}

TR.accountHistory-odd, TR.addressBook-odd, TR.alsoPurchased-odd, TR.payment-odd, TR.productListing-odd, TR.productReviews-odd, TR.upcomingProducts-odd, TR.shippingOptions-odd {
background: #f8f8f9;
}

TR.accountHistory-even, TR.addressBook-even, TR.alsoPurchased-even, TR.payment-even, TR.productListing-even, TR.productReviews-even, TR.upcomingProducts-even, TR.shippingOptions-even {
background: #f8f8f9;
}

TABLE.productListing {
border: 1px;
border-style: solid;
border-color: #b6b7cb;
border-spacing: 1px;
}

.productListing-heading {
font-family: Verdana, Arial, sans-serif;
font-size: 10px;
background: #b6b7cb;
color: #FFFFFF;
font-weight: bold;
}

TD.productListing-data {
font-family: Verdana, Arial, sans-serif;
font-size: 10px;
}

TD.pageHeading, DIV.pageHeading {
font-family: Verdana, Arial, sans-serif;
font-size: 16px;
font-weight: bold;
color: #000000;
}

TR.subBar {
background: #f4f7fd;
}

TD.subBar {
font-family: Verdana, Arial, sans-serif;
font-size: 10px;
color: #000000;
}

TD.main, P.main {
font-family: Verdana, Arial, sans-serif;
font-size: 11px;
line-height: 1.5;
}

TD.smallText, SPAN.smallText, P.smallText {
font-family: Verdana, Arial, sans-serif;
font-size: 10px;
}

TD.accountCategory {
font-family: Verdana, Arial, sans-serif;
font-size: 13px;
color: #aabbdd;
}

TD.fieldKey {
font-family: Verdana, Arial, sans-serif;
font-size: 12px;
font-weight: bold;
}

TD.fieldValue {
font-family: Verdana, Arial, sans-serif;
font-size: 12px;
}

TD.tableHeading {
font-family: Verdana, Arial, sans-serif;
font-size: 12px;
font-weight: bold;
}

SPAN.newItemInCart {
font-family: Verdana, Arial, sans-serif;
font-size: 10px;
color: #ff0000;
}

CHECKBOX, INPUT, RADIO, SELECT {
font-family: Verdana, Arial, sans-serif;
font-size: 11px;
}

TEXTAREA {
/ width: 100%; /
font-family: Verdana, Arial, sans-serif;
font-size: 11px;
}

SPAN.underline {
text-decoration: underline;
}

TABLE.formArea {
background: #f1f1f1;
border-color: #cccccc;
border-style: solid;
border-width: 1px;
}

TD.formAreaTitle {
font-family: Tahoma, Verdana, Arial, sans-serif;
font-size: 12px;
font-weight: bold;
}

SPAN.markProductOutOfStock {
font-family: Tahoma, Verdana, Arial, sans-serif;
font-size: 12px;
color: #c76170;
font-weight: bold;
}

SPAN.productSpecialPrice {
font-family: Verdana, Arial, sans-serif;
color: #ff0000;
}
SPAN.productOldPrice {
font-family: Verdana, Arial, sans-serif;
color: #ff0000;
text-decoration: line-through;
}
SPAN.errorText {
font-family: Verdana, Arial, sans-serif;
color: #ff0000;
}

SPAN.productDiscountPrice {
font-family: Verdana, Arial, sans-serif;
color: #ff0000;
font-weight: bold;
}

.smallHeading {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: x-small;
font-weight: bold;
color: Black;
}

.moduleRow {
font-family: Verdana, Arial, sans-serif;
font-size: 11px;
line-height: 1.5;
background-color: #E6E6E6;
border: 1px solid;
border-color: #E6E6E6;

}
.moduleRowOver {
background-color: #D7E9F7;
border: 1px solid;
border-color: #ffffff;
font-family: Verdana, Arial, sans-serif;
font-size: 11px;
line-height: 1.5;

}
.moduleRowSelected { background-color: #E9F4FC; }

.checkoutBarFrom, .checkoutBarTo { font-family: Verdana, Arial, sans-serif; font-size: 10px; color: #8c8c8c; }
.checkoutBarCurrent { font-family: Verdana, Arial, sans-serif; font-size: 10px; color: #000000; }

/ istewide font classes /
/ Note: heading<Number> equals <font size="Number"> /
.heading1 { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 7pt; }
.heading2 { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 9pt; }
.heading3 { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10pt; }
.heading4 { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12pt; }
.heading5 { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 16pt; }

/ Sitemap Tables /
.istemap_heading {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10pt; color: #FFFFFF;
background-color: #666666;
padding-top: 2px; padding-bottom: 2px;}
.istemap_heading a {color:#FFFFFF;}
.istemap_heading a:hover {color:#CCCCCC; text-decoration:none;}

.istemap_sub {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 9pt; color: #000000; background-color: #E6E6E6; padding: 2px 2px;}
.istemap_sub a {color:#000000;}
.istemap_sub a:hover {color:#999999; text-decoration:none;}


/ message box /

.messageBox { font-family: Verdana, Arial, sans-serif; font-size: 10px; }
.messageStackError, .messageStackWarning { font-family: Verdana, Arial, sans-serif; font-size: 10px; background-color: #ffb3b5; }
.messageStackSuccess { font-family: Verdana, Arial, sans-serif; font-size: 10px; background-color: #99ff00; }

/ input requirement /

.inputRequirement { font-family: Verdana, Arial, sans-serif; font-size: 10px; color: #ff0000; }

.tableShop {
background-color: #ffffff;
border-left: 1px solid;
border-right: 1px solid;
border-color: #b6b7cb;
}

.navLeft {
border-right: 1px solid #b6b7cb;
background-image: url('img/bg_left_column.jpg');
width: 185px; border-left-color:#b6b7cb; border-top-color:#b6b7cb; border-bottom-color:#b6b7cb
}
.navRight {
border-color: #666666;
border-top-width: 4px;
border-top-style: solid;
border-left-width: 4px;
border-left-style: solid;
background-color: #E6E6E6;
width: 185px;
}

.contentsTopics {
font-family: Verdana, Arial, sans-serif;
font-size: 14px;
font-weight: bold;
}

.tableListingI {
background-color: #eeeeee;
}

.tableListingII {
background-color: #d0d0d0;
}

.tableBody {
padding: 5px;
}

.poweredby {
font-family: Verdana, Arial, sans-serif;
font-size: 10px;
color: #000000;
font-weight: bold;
}
.onepxwidth {
width: 1px;
}


A.Menu {
font-family: Verdana, Arial, sans-serif;
font-size: 11px;
color: #ffffff;
font-weight : bold;
/ border-bottom: 1px solid; /
/ border-color: #b6b7cb; /
background-color: #2B3744;
}

A.Menu:hover {
color: #00ffff;
text-decoration: underline;
}

TR.headerMenu {
font-family: Verdana, Arial, sans-serif;
font-size: 11px;
color: #ffffff;
font-weight : bold;
/ border-bottom: 1px solid; /
/ border-color: #b6b7cb; /
/ background-color: #2B3744; /
}

TR.headerMenu:hover {
color: #0000ff;
text-decoration: underline;
}

.progress{
width: 1px;
height: 14px;
color: white;
font-size: 12px;
overflow: hidden;
background-color: navy;
padding-left: 5px;}
}

pufaxx
15.10.2007, 06:08
Ohne Link zum Shop wird Dir niemand etwas sagen können - wenn der Quelltext nicht bekannt ist, auf den das Stylesheet "wirken" soll, stochert man im Dunkeln.

Ansonsten sind solche Layout-Ideen kaum browserübergreifend zu realisieren. Mindest- und Maximalbreite werden z.B. vom IE komplett ignoriert. Du könntest Mindestbreiten allenfalls mit einem Bild ("schmaler darf's nicht werden") hinkriegen ...

ChrisFah
15.10.2007, 19:46
''>ZITAT(pufaxx @ Oct 15 2007, 6:08) 35543
Ohne Link zum Shop wird Dir niemand etwas sagen können - wenn der Quelltext nicht bekannt ist, auf den das Stylesheet "wirken" soll, stochert man im Dunkeln.

Ansonsten sind solche Layout-Ideen kaum browserübergreifend zu realisieren. Mindest- und Maximalbreite werden z.B. vom IE komplett ignoriert. Du könntest Mindestbreiten allenfalls mit einem Bild ("schmaler darf's nicht werden") hinkriegen ...
[/b]

Logisch <_< , hier der Link zur Seite (http://anonym.to/?http://www.ballon4u.eu/ballon/)

Viellenicht kann mir ja einer einen Tip geben. Es geht wie gesagt um die Maximale Breite, NICHT die Mindestbreite...

Lg, Chris

web-in-time
15.10.2007, 21:09
Hi Chris,

was sprnicht denn dagegen, die Breite zu fixieren. Zum Beispiel so, dass Du insgesamt bei einem 1024er Browserfenter noch komplett snichtbar bleibst?

Unabhängig davon würde ich mir mehr Gedanken machen, wie ich verhunderte, dass der Content in der Mitte je nach Breite des Fensters auch gern mal (nach unten) verschwindet...

Ben

ChrisFah
16.10.2007, 13:37
''>ZITAT(web-in-time @ Oct 15 2007, 21:09) 35597
Hi Chris,

was sprnicht denn dagegen, die Breite zu fixieren. Zum Beispiel so, dass Du insgesamt bei einem 1024er Browserfenter noch komplett snichtbar bleibst?

Unabhängig davon würde ich mir mehr Gedanken machen, wie ich verhunderte, dass der Content in der Mitte je nach Breite des Fensters auch gern mal (nach unten) verschwindet...

Ben
[/b]

Hallo!

Fixe breite wäre durchaus auch OK.
Das mit dem Content nach unten rutschen bei einer bestimmten Breite ist mir auch schon aufgefallen, leider hab ich keine Lösung. Der Hersteller des Template hat behauptet, das sei ein Bug im IExplorer...
Aber stören tut es gewaltig!

Kannst mir einen Tip geben, wie ich die Breite fixieren kann, dann wäre der nach unten gerutscher Content ja auch gelöst....

Lg, Chris

ChrisFah
17.10.2007, 23:20
Keiner eine Idee???

Ach kommt schon Jungs, ich weiss doch daß ihr das könnt ;)

Lg, Chris

emet
18.10.2007, 14:07
Beisüiel aus eine Sp1 Shop

.breite { width:97%; min-width:800px; }

Der dazugehörige html-Code

<table align="center" class="breite" border="0" cellpadding="0" cellspacing="0">
**<tr>
****<td height="112" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0">
********<tr>
********<td height="80" valign="top" style="padding-left:8px; padding-top:8px" align="left">{$tpl_path}Bilder/logo.gif
****<div id="headbg">{$tpl_path}Back/headbg.gif</div>

Wird nur vom IE ignoriert wie geschrieben wurde ...

... dann halt weiter und in den Footer ...

<td class="main" style="border-top:1px solid #999999;" height="53"><div align="center">{$tpl_path}Bilder/clear1x800.gif<font color="#999999" size="1" face="Tahoma, Arial, Helvetica, sans-serif">

********Alle hier genannten Preise verstehen sich inkl. der gesetzlich festgelegten MwSt und zzgl. der gew&auml;hlten Versandkosten. |
********Alle Markennamen, Warenzeichen sowie s&auml;mtliche Produktbilder sind Eigentum Ihrer rechtm&auml;&szlig;igen Eigent&uuml;mer und dienen hier nur der Beschreibung........................

Die Aufmerksamkeit liegt hierrauf:

{$tpl_path}Bilder/clear1x800.gif

Einfach ein Clearpixel in der Größe erstellt und als Bild (unsnichtbar) eingebunden.

Nun wird auch der IE praktisch dazu gezwungen. So kann ich auf wie oben 97% oder 100% gehen und eine Mindestbreite betreits im CSS (Cascading Style Sheets ) CSS
http://de.selfhtml.org/css/ (http://anonym.to/?http://de.selfhtml.org/css/) - Top CSS Einsteiger Seite
http://www.css4you.de/ (http://anonym.to/?http://www.css4you.de/) - CSS Reference vorgeben und den IE überlisten/zwingen es mitzumachen.

Gruß
Ernst

ChrisFah
19.10.2007, 18:54
''>ZITAT(emet @ Oct 18 2007, 14:07) 35770
Beisüiel aus eine Sp1 Shop

.breite { width:97%; min-width:800px; }

Der dazugehörige html-Code

<table align="center" class="breite" border="0" cellpadding="0" cellspacing="0">
**<tr>
****<td height="112" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0">
********<tr>
********<td height="80" valign="top" style="padding-left:8px; padding-top:8px" align="left">{$tpl_path}Bilder/logo.gif
****<div id="headbg">{$tpl_path}Back/headbg.gif</div>

Wird nur vom IE ignoriert wie geschrieben wurde ...

... dann halt weiter und in den Footer ...

<td class="main" style="border-top:1px solid #999999;" height="53"><div align="center">{$tpl_path}Bilder/clear1x800.gif<font color="#999999" size="1" face="Tahoma, Arial, Helvetica, sans-serif">

********Alle hier genannten Preise verstehen sich inkl. der gesetzlich festgelegten MwSt und zzgl. der gew&auml;hlten Versandkosten. |
********Alle Markennamen, Warenzeichen sowie s&auml;mtliche Produktbilder sind Eigentum Ihrer rechtm&auml;&szlig;igen Eigent&uuml;mer und dienen hier nur der Beschreibung........................

Die Aufmerksamkeit liegt hierrauf:

{$tpl_path}Bilder/clear1x800.gif

Einfach ein Clearpixel in der Größe erstellt und als Bild (unsnichtbar) eingebunden.

Nun wird auch der IE praktisch dazu gezwungen. So kann ich auf wie oben 97% oder 100% gehen und eine Mindestbreite betreits im CSS (Cascading Style Sheets ) CSS
http://de.selfhtml.org/css/ (http://anonym.to/?http://de.selfhtml.org/css/) - Top CSS Einsteiger Seite
http://www.css4you.de/ (http://anonym.to/?http://www.css4you.de/) - CSS Reference vorgeben und den IE überlisten/zwingen es mitzumachen.

Gruß
Ernst
[/b]

Klingt gut, so werd ich es machen. Danke!!!

emet
20.10.2007, 10:52
Schön, das es Dir geholfen hat.

Ist die einfachste Lösung mit dem IE.

Machen andere deswegen auch auf normalen HPs, wo eine Mindestbreite eingehalten werden soll.