Antworten auf deine Fragen:
Neues Thema erstellen

Antworten zum Thema „Darstellungsproblem bei dynamische seite“

C

chertjonok

Guest

Hallo , seit eine Woche kann ich keine Lösung finden.

Bei mir zeigt alles perfekt aus.
Wenn ich andere Auflösung verwende, Bilder überlappen sich mit dem text oder sind abgeschnitten.

was kann man damit machen?

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

body
{
    background:#333333 url(images/bg.gif) repeat fixed;
    padding: 15px 0px 15px 0px; /* 35px 0px 35px 0px; S4*/
     font-size: small;
    font-family: Verdana, Tahoma, Arial, Serif;
    color: #666666;
    font-size:0.8em;
        text-align: center;      
        min-width:800px;/* S31200px; ;800 */
        max-width:1200px;/* S31300px;  ;1100px */
        margin: 0 auto;
}
textarea{
    width: 55em;/*s5100*/
    padding:10px;
    height: 10em;
    /*border: 1px solid #333333;    */
    font:1em Verdana, Arial, Serif; 
        text-align: left;

       background: #333333;
       color:#999999;
       border:none;

}
#outer input.text 
{
    
    padding:2px;
    font:1em Verdana, Arial, Serif;
        text-align: left;
        background: #333333;
        color:#999999;
        border:none;
        width: 25em;
}

p
{
    margin: 0 0 0.5em;
}
a
{
    color: #B96D00; /*schrift*/
    text-decoration: none;
        border:none;
}
a:hover
{
    text-decoration: none;
        border:none;
        border-style:none;
}
h1,h2,h3,h4,h5,h6 
{
    font-family:Georgia, Verdana, Arial, Serif;
}

h3,h4
{
    display: inline;
    font-weight: bold;
    background-repeat: no-repeat;
    background-position: left;
    line-height:1.6em;
}
h3
{
    font-size: 1.4em;
    padding-left: 20px;
        color:#B96D00;

}
h2 /*s5*/
{
        color:#B96D00;
}
h4
{
    font-size: 1.4em;
}

h3 span
{
    font-weight: normal;
    font-size:60%;
    color:#999;


}
h5 
{
    font-weight:normal;
    font-family:Verdana, Arial, Serif;
    font-size:1em;
}
.contentarea
{
    padding-top: 1.5em;
        text-align:left;
}
dl 
{
    margin:1em 0px;
}
dt 
{
    font-weight:bold;
}
dd 
{
    margin:0.5em 1em;
    padding:0;
}


ul, ol 
{
    margin:1em;
    padding:0;
}
li 
{
    margin:0 1em;
    padding:0.15em;
}
fieldset 
{
    border:none;
}
.divider1
{
    position: relative;
    height: 14px;
    margin: 2.0em 0em 1.5em 0em;
    clear: both;
}
.post 
{
    margin: 1.30em 0;    
}
.post h4 a 
{
    text-decoration:none;
    color:#B96D00;    
    border:none;
}
#outer .post ul.controls
{
    clear: both;
    margin:0;
    padding:1em 0;
}
.post ul.controls li
{
    display: inline;
    font-size: 0.86em;
    margin:0;
    padding: 0em 1.0em 0em 15px;
}
.box
{
    /*padding: 1.5em;*/
    margin-bottom: 1.0em;
    text-align:left;
        color: #B96D00;
/*s4*/
/*border-top: solid 1px;*/
       border-bottom: solid 1px;

}
ul.linklist
{
    list-style: none;
}

ul.linklist li
{
    line-height: 2.0em;
}
#outer
{
    z-index: 2;
    position: relative;
    
    width:90% /*90%;s8*/
    margin: 0 auto;
    text-align : center;
}
#header
{
    position: relative;
    width:auto; /*100%; S7*/
    height: 8.40em;
    background: url(images/topbg.jpg);
border:none;
}
#search
{
    position: absolute;
    top: 5.5em;
    right: 2.0em;
    padding-right: 0.0em;

}
#search input.text
{
    margin-right: 0.5em;
    vertical-align: middle;
    border: solid 1px #f0f0f0;
        padding: 0.1em;
    width: 10.0em;
    background:#333333; /*url(images/button_bg.gif) repeat-x top; */ /* s5*/

}
#search input.submit
{
    background: #990000; 
    font-weight: bold;
    padding: 0.25em;
    font-size: 0.8em;
    color:  #fff;
    vertical-align: middle;
}
#search input.submit:link
{
/*    background: #8f4008; s5*/
    font-weight: bold;
    padding: 0.25em;
    font-size: 0.8em;
    color:  #fff;
    vertical-align: middle;
}
#search input.submit:hover
{
        color:  #999999;
 /*       background: #8f4008; s5*/
    font-weight: bold;
    padding: 0.25em;
    font-size: 0.8em;
    vertical-align: middle;
}
#headerpic
{
    position: relative; 
    height:149px;/* s7 149px;*/ 

    background: #333333 url(images/fall_leaves.jpg) repeat-x bottom left;
}
#menu
{
    position: relative;
    background: url(images/menubg.gif) repeat-x top left;
    height: 3.5em;
        padding: 0 1.0em;
    margin: 0;
        text-align: left;
}
#menu ul
{
    padding:1em 0 0 0;
    margin:0;
}
#menu ul li
{
    position: relative;
    display: inline;
    padding: 0;
    margin: 0;

       font-family: Time new, Times New Roman, Times, Serif; /*S3*/
}
#menu ul li a:link, #menu ul li a:visited
{
    color: #fff;
    padding: 0.5em 1.0em 0.9em 1.0em;
    text-decoration: none;    
    border:none;
}
#menu ul li a:hover, #menu ul li a:active, #menu ul li.current_page_item a
{
    border:none;
        color:#999999;
}
#menubottom
{
    background: #333333 url(images/border1.gif) repeat-x;
    height: 14px;
        border:none;
}
#content
{
    padding: 0 1.5em;
}
#primarycontainer
{
    float: left;
    margin-right: -30.0em;/* s4 -18*/
    width: 100%;
}
#primarycontent
{
    margin: 0.0em 42em 0 0;
        text-align : left;
        padding-left: 5px;/*S3*/
}
#sidebar
{
    margin: 0;
    float: right;
    width: 25.0em;/*s4*/
}
#sidebar ul
{
    list-style:none;
    margin:0.5em 0 0;    
}
#sidebar li 
{
    margin:1em 0;
    padding:0.5em;
}
#sidebar li li 
{
    margin:0;
    padding:0.5em;
    background:none;
}
#sidebar li li li
{
    margin:0;
    padding:0.5em 0 0 1em;
}
#sidebar ul.feeds li 
{
    /*background:url(images/feed.png) no-repeat left center; S3*/
    margin:1em 0;
    padding:0 1.5em;    
}

#footer
{
    position: relative;
    height: 2.0em;
    clear: both;
    padding-top: 5.0em; /* S4*/
    font-size: 0.86em;


}
#footer .left
{
    position: absolute;
    left: 2em;
    bottom: 1.2em;

}

/*comments and their styles*/
#comments, #respond{
    margin: 2em 0 0 5px;
}

#outer .commentlist {
    margin: 0;
    padding: 0;
} /* !!!*/

.post h5 em
{
    font-style:normal;
    float:right;
    font-weight:normal;
}
#header, #content, #sidebar, #footer, .widget, #S_oben {
    overflow: hidden;
}
#oben_menue
{       position: relative;
    height: 3.5em;    
        margin: 0 0px 0px;
        border:none;
}
#oben_menue ul
{
    padding:0em 0 0 0;
    margin:0;

       font-size: 1.0em;
       font-family: Time new, Times New Roman, Times, Serif;
       border:none;
}
#oben_menue ul li
{
    position: relative;
    display: inline;
    padding:0;
    margin:0;
border:none;

}
#oben_menue ul li a:link, #oben_menue ul li a:visited
{
    padding: 0.0em 0.5em 0.0em 0.0em;
    text-decoration: none;    
    border:none;
}
#oben_menue ul li a:hover, #oben_menue ul li a:active, #oben_menue ul li.current_page_item a
{
color: #999999;
border-style:none;
text-decoration: none;    
border:none;
}
#S_oben
{
    position: relative;
    height: 1.5em;
    clear: both;
}

#S_oben .right
{
    position: absolute;
    right: 5.0%;
}
 

sokie

Mod | Web

AW: Darstellungsproblem bei dynamische seite

Du hast auf der Seite eben Elelemnte die ihre Breite brauchen.
Du musst dafür sorgen, dass ihre container nicht kleiner werden als (also etwa mit min-width arbeiten). der IE6 versteht das allerdings nicht.
Du kannst dem ganzen die Minimale breite zuweisen, die das layout mindestens benötigt.
das Hintergrundbild des headers solltest du rechts positionieren, sonst verschwindet der Schriftzug bei kleineren Auflösungen aus dem sichtbaren Bereich.
 

cebito

undefined

AW: Darstellungsproblem bei dynamische seite

Du hast 800px als min-width für den Body angegeben. Hab grad mal mit dem Bildschirmlineal durchgemessen, 1080px incl. Scrolleiste brauchst du, damit nichts überlappt... Irgendwas wirst du schmaler machen müssen, um wenigstens bei 1024er Auflösung überlappen und scrollen zu vermeiden.
 
C

chertjonok

Guest

AW: Darstellungsproblem bei dynamische seite

Du hast auf der Seite eben Elelemnte die ihre Breite brauchen.
Du musst dafür sorgen, dass ihre container nicht kleiner werden als (also etwa mit min-width arbeiten). der IE6 versteht das allerdings nicht.
Du kannst dem ganzen die Minimale breite zuweisen, die das layout mindestens benötigt.
das Hintergrundbild des headers solltest du rechts positionieren, sonst verschwindet der Schriftzug bei kleineren Auflösungen aus dem sichtbaren Bereich.
was meinst du mit "das Hintergrundbild des headers solltest du rechts positionieren" ?
 
C

chertjonok

Guest

AW: Darstellungsproblem bei dynamische seite

dach habe ich geändert, es sieht besser aus, aber nicht perfekt
 

knispel

Mediendesigner

AW: Darstellungsproblem bei dynamische seite

Ich sehe für den Body
Code:
min-width:1000px;/* S31200px; ;800 */
max-width:1152px;/* S31300px;  ;1100px */
Und so wird es auch im Browser (FF) zugewiesen.

Hast du da gerade etwas geändert?
 
C

chertjonok

Guest

AW: Darstellungsproblem bei dynamische seite

Ja, die Seite ist nicht mehr dynamisch.
Quelcode Oben ist noch von dynamische Seite.
 

knispel

Mediendesigner

AW: Darstellungsproblem bei dynamische seite

Sieht doch gut aus, passt in verschiedenen Auflösungen.

Off Topic:
Vermisse einen Home-Link.
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Neueste Themen & Antworten

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
175.188
Beiträge
2.582.071
Mitglieder
67.257
Neuestes Mitglied
Can Ergin
Oben