• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Content ul verrutscht - vor allem in mobile Darstellung

egolive

Neues Mitglied
Hallo Community,

ich bin neu hier und hab zum Einstand direkt mal ein Problem, wobei mir vielleicht jemand helfen kann :)

Also es geht um diese Seite: Slideway - Vorsicht Suchtgefahr!

In normaler betrachtung, sollte alles richtig dargestellt werden. Verkleinert man allerdings den Browser, so verschiebt sich der Content Bereich nach links.
Sieht man sich die Seite auf Mobilen Endgeräten an, so wir sie immer mit falscher Content Position dargestellt.

Ich poste euch mal den Code:
(Eigentlich ist es ja asp.net allerdings verwende ich überwiegen HTML Elemente.)

HTML:
        <ul class="headerbereich">
            <li class="header"></li>
        </ul>
        <ul id="menu">
            <li class="menustart"></li>
            <li class="home"><asp:HyperLink ID="hlMenuHome" runat="server" NavigateUrl="~/default.aspx" style="display:block;width:91px;height:86px;"></asp:HyperLink></li>
            <li class="ueberuns"><asp:HyperLink ID="hlMenuUeberUns" runat="server" NavigateUrl="~/ueberuns.aspx" style="display:block;width:129px;height:86px;"></asp:HyperLink></li>
            <li class="segway"><asp:HyperLink ID="hlMenuSegway" runat="server" NavigateUrl="~/segway.aspx" style="display:block;width:110px;height:86px;"></asp:HyperLink></li>
            <li class="touren"><asp:HyperLink ID="hlMenuTouren" runat="server" NavigateUrl="~/touren.aspx" style="display:block;width:115px;height:86px;"></asp:HyperLink></li>
            <li class="galerie"><asp:HyperLink ID="hlMenuGalerie" runat="server" NavigateUrl="~/galerie.aspx" style="display:block;width:113px;height:86px;"></asp:HyperLink></li>
            <li class="kontakt"><asp:HyperLink ID="hlMenuKontakt" runat="server" NavigateUrl="~/kontakt.aspx" style="display:block;width:119px;height:86px;"></asp:HyperLink></li>
            <li class="menuend"></li>
        </ul>
        <ul id="platzhalter_und_content_top">
            <li class="platzhalter_menucontent"></li>
            <li id="ContentTopGrafik" runat="server" class="content_top"></li>
        </ul>
        <ul id="contentbereich">
            <li class="content_space_left"></li>
            <li class="content">
                <hr style="color: #347fad;background-color: #0077cc;height: 5px;width: 885px;" /> 
                    <div class="Content_Text_formatierung">
                        <asp:ContentPlaceHolder ID="cphSlidewayMasterpage" runat="server">
                            <!--- Content --->
                        </asp:ContentPlaceHolder>
                    </div>
            </li>
            <li class="content_space_right"></li>
        </ul>
        <ul id="footer">
            <li class="content_footer"></li>
            <li class="page_footer"><asp:ImageButton ID="ibImpressumTopGrafik" runat="server" PostBackUrl="~/impressum.aspx" style="width:500px;height:100px;" BorderStyle="None" Visible="True" ImageUrl="~/App_Themes/01/img/leer.png" /></li> 
        </ul>

HTML:
/* Content Anfang */

#contentbereich {
     
     width:1600px;
     padding:0; 
     margin:0 auto; 
     list-style-type:none;
  }
  
#contentbereich li {
     
     float:left;
  }

.content_space_left {
     
     width:317px;
     height:100%;
     border:1px;
}

.content {
     
     background-color: #ffffff;
     background-image:url(img/content.png);
     background-repeat:no-repeat;
     width:964px;
     height:100%;
}

.content_space_right {
     
     width:319px;
     height:100%;
     border:1px;
}

.Content_Text_formatierung 
{
    padding-left:50px;
    padding-right:25px;
    padding-bottom:15px;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-size:10px;
    text-align:left;
}

/* Content Ende*/

Vielleicht hat ja jemand eine Idee was ich falsch mache.

Vielen Dank schonmal fürs lesen!

Gruß,
egolive
 
Werbung:
Für die Darstellung in Browsern ist HTML und CSS notwendig, daher verstehe ich deine Anmerkung wegen ASP.net nicht so ganz.

Ich vermute Du meinst mit "verkleinern" den Browser-Zoom und nicht den Text-Zoom. Hier bieten heutige Browser nämlich verschiedene Möglichkeiten. Beim Firefox muss man extra ein Häkchen setzen, wenn man nur Text zoomen möchte. Beim Internet Explorer nicht.

Eine Fehldarstellung bei dir kann ich nur erkennen, wenn ich den Browser-Zoom verwende - nicht den Text-Zoom. Die Verschiebung kommt dadurch zustande, dass Du für Elemente, die grafisch eigentlich zueinander gehören, und unterschiedliche Breiten angibst. Also bei "platzhalter_und_content_top" ist eine andere Breite definiert als für "contentbereich" darunter.

Die Lösung wäre also, dass Du zusiehst, dass diese Bereiche die selbe Breite haben.

Moderation: Verschoben von HTML zu CSS, da es ja um Darstellung geht.
 
Hi und danke für deine Hilfe!
Meine Anmerkung habe ich nur gemacht um eventueller Verwirrung vorzubeugen.

Das was du beschreibst, ist genau mein Problem.

Meine "platzhalter_und_content_top" klasse hat eine breite von 1215px.
Sobald ich aber die contentbereich / content klasse mit der gleichen Breite angebe, habe ich aber das Problem das der gesamte Bereich mit weiß gefüllt wird.

Das ist insofern beabsichtigt, da sich der content bei zu viel Inhalt erweitert.

Ich hab das jetzt mal so eingestellt und es auf dem Server geladen.

Hast du dazu eine Idee? :/

EDIT:

Ich habe mal ein Screenshot davon gemacht. Ich muss nebenher an dem Projekt arbeiten, weshalb ich erstmal alles wieder zurückgesetzt habe.

http://www.slideway.de/darstellung_error.png

Hier auch das geänderte CSS:

/* Content Anfang */

#contentbereich {

width:1215px;
padding:0;
margin:0 auto;
list-style-type:none;
}

#contentbereich li {

float:left;
}

.content {

background-color:#ffffff;
background-image:url(img/content.png);
background-repeat:no-repeat;
width:1215px;
height:100%;
}

.Content_Text_formatierung {

padding-top:10px;
padding-left:50px;
padding-right:25px;
padding-bottom:15px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
text-align:left;
}
.content_space {

background-image:url(img/leer.png);
background-repeat:no-repeat;
width:1px;
}

/* Content Ende*/
 
Zuletzt bearbeitet:
Werbung:
Logisch, dass da weiße Farbe kommt, denn die hast Du ja auch für die Klasse .content definiert.

Näher geschaut ist dein Problem offenbar, dass Du für _top eine Hintergrundgrafik eingebunden hast die eine andere Breite hat also die Grafik in content_bereich. Wenn Du das alles mal angleichst, also content_bereich an _top, dann sollte es eigentlich passen. Natürlich musst Du dazu auch die Hintergrundgrafik anpassen damit die weiße Farbe nicht mehr kommt.
 
Hi, danke für eure Hilfe.

Die .content Klasse war mit Absicht so definiert. Der weiße Hintergrund diente mir bei zu viel Inhalt als Content Erweiterung.

Ich hab es dennoch mal so gemacht wie du gesagt hast, nur leider steh ich damit wieder am Anfang.

Hier auf dem Screenshot sieht man jetzt mein Problem:
http://slideway.de/17-08-2012 20-59-08.png

Der Content Bereich erweitert sich nicht und ich hab keine Idee wie ich das hin bekomme.

Hier noch der Code:

Das ist sicher total falsch. Ich glaub ich hab da einen großen Denkfehler :/
<ul id="contentbereich">
<%-- <li class="content_space_left"></li>--%>
<li class="content">
<div class="Content_Text_formatierung">
<div class="content_space">
<asp:ContentPlaceHolder ID="cphSlidewayMasterpage" runat="server">
<!--- Content --->
</asp:ContentPlaceHolder>
</div>
</div>
</li>
<%-- <li class="content_space_right"></li>--%>
</ul>

/* Content Anfang */

#contentbereich {

width:1215px;
padding:0;
margin:0 auto;
list-style-type:none;
}

.content {

background-image:url(img/content.png);
background-repeat:no-repeat;
width:1215px;
height:100%;
z-index:2;
}

.Content_Text_formatierung {

padding-top:10px;
padding-left:50px;
padding-right:25px;
padding-bottom:15px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
text-align:left;
}
.content_space {

background-image:url(img/puffer.png);
background-repeat:no-repeat;
width:1215px;
height:100%;
z-index:1;
}

/* Content Ende*/

Hier vielleicht jemand?

Viele Grüße und danke für die Hilfe!
ego
 
Auf deinem Link oben kann man deinen Versuch glaube ich nicht sehen, oder?

Evtl. solltest Du dir auch noch den Aufbau deines Quellcodes genauer überlegen.

Zum Einen finde ich es irritierend, dass Du das gesamte Web aus Listen aufgebaut hast. Das ist semantisch gesehen nicht wirklich korrekt, alles mit <div>'s zu machen aber auch nicht.

Zum Anderen kann man die grafische Gestaltung des Content-Bereiches auch ohne diese eine große Grafik erreichen. Dazu brauchst Du ggfs. nur noch zusätzliche Hilfselemente. Beispiel-Schema:

Code:
<element fuer Bild>
 <element fuer Schatten oben>
  <content />
 </element fuer Schatten oben>
</element fuer Bild>

Mit "element fuer Bild" ist ein Element gemeint dem Du eine 1px hohe und 965px breite Grafik zuordnest, welche genau die Farben enthält die Du horizontal darstellen willst. Dieses Bild wiederholst Du dann einfach in der y-Achse (background-repeat: repeat-y). Dadurch kannst Du dann auch leicht auf die Hintergrundfarbe verzichten und es entstehen keine Lücken mehr, wie in deinem Screenshot zu sehen. Diese Grafik sollte, wie oben schon gesagt, die selbe Breite die bei _top haben, die Elemente entsprechend natürlich auch die selben Breiten.

Mit "element fuer Schatten oben" ist ein Element gemeint, welches den Schatten der Box am oberen Ende als Hintergrundbild enthält. Das könnte auch wieder eine 1px breite und xy Pixel hohe Grafik sein die sich auf der x-Achse wiederholt.
 
Werbung:
Ich habe den Quellcode jetzt nicht gelesen, aber zwei Anmerkungen dazu:

Anstatt ein einziges File zu schreiben, das alle Auflösungen abdecken soll, könntest du den Browser des Users auslesen und davon abhängig dein CSS anhängen. Davon abgesehen bietet HTML5 auch media-queries an.
 
Es geht weniger um Auflösungen als viel mehr um die Vergrößerungsfunktion des Browsers. ;)
 
Hallo, ich melde mich nach dem Wochenende wieder zurück.

Vielen Dank für eure hilfe.

Ich habe den Content Bereich jetzt mal umgebaut und versucht eure Tipps zu berücksichtigen.

Das hat soweit auch alles funktioniert.

Jetzt bleibt nur noch ein Problem.

Wie man hier gut sehen kann:
Slideway - Kontakt

Ist recht viel abstand zwischen dem Seiteninhalt und dem Content Anfang.

Dort zwischen liegt eine Grafik. Ich habe versucht meinen Inhalt-Div mit z-index zu überlagern, leider funktioniert das nicht.

Hat jemand eine Idee wie ich dies realisieren könnte?

Hier ein wenig Code:

/* Content Anfang */

#contentbereich {

width:1215px;
padding:0;
margin:0 auto;
list-style-type:none;
}

.content_schatten {

background-image:url(img/content_schatten.png);
background-repeat:no-repeat;
width:1215px;
height:91px;
z-index:2;
}

.content {

background-image:url(img/content_puffer.png);
background-repeat:repeat-y;
width:1215px;
height:100%;
z-index:1;
}

.Content_Text_formatierung {

padding-left:175px;
padding-right:25px;
padding-bottom:15px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
text-align:left;
z-index:3;
}

/* Content Ende*/

<ul id="contentbereich">
<li class="content">
<div class="content_schatten"></div>
<div class="Content_Text_formatierung">
<asp:ContentPlaceHolder ID="cphSlidewayMasterpage" runat="server">
<!--- Content --->
</asp:ContentPlaceHolder>
</div>
</li>
</ul>

Viele Grüße und einen schönen start in die Woche :)
 
Werbung:
Ursache ist das Element mit der Klasse .content_schatten. Dem hast Du eine feste Höhe gegeben, und das nur um einen Schatten per Grafik einzufügen.

Du solltest auf dieses Element verzichten und den Schatten direkt in der Content-Element einfügen.
 
Aber genau das habe ich doch vorher gemacht :D Nur leider hat das dann mit dem Puffer nicht funktioniert.

Also gibt es jetzt dafür keine Lösung?

Ich weiß nicht, irgendwie habe ich das gefühle, ich stell mich grade extrem blöde an :/
 
Was für ein "Puffer"? Meinst Du einen Abstand vom Content zur darüberliegenden Linie? Den erreichst Du per padding.
 
Werbung:
Ich weiß nicht wie ich das erklären soll. Mit meinem "Puffer" erreiche ich derzeit eine Erweiterung des Content-Bereiches bei "zu viel" Inhalt.

Jetzt habe ich es so gemacht, das ich eine 1 Pixel hohe Grafik wiederhole, solange es nötig ist. Darüber habe ich dann diese eine Grafik mit dem Schatten gelegt.

Über dieses ganze Gebilde wollte ich jetzt meinen Text / Inhalt einblenden.

Der Inhalt muss allerdings in der <li class="content"> liegen, damit der "Puffer"-Effekt zum tragen kommt.

Das ist der Punkt, wo es eben kritisch wird, da der Inhalt den <div class="content_schatten"></div> nicht überlagert, so wie er es soll.
Ich verstehe jetzt nachdem du es mir gesagt hast natürlich auch warum - deshalb meine Frage ob es eine andere Möglichkeit gibt.

Vorher war es ja noch schlimmer. Da hatte ich eine riesen Content Grafik als background-image definiert, worauf der Inhalt eingeblendet wurde. Um einen Puffer Effekt zu erreichen habe ich dann einfach weiß als Hintergrundfarbe gewählt.
Nur war das nicht wirklich optimal.

Also ich hoffe es wurde jetzt ein bisschen klarer was ich vorhabe.

Ich bin für jegliche Vorschläge offen.
 
Meinst du diesen Vorschlag?

Du solltest auf dieses Element verzichten und den Schatten direkt in der Content-Element einfügen.

Evtl. habe ich das missverstanden - du meinst doch damit, ich soll wieder eine große Grafik machen, wie ich es zu Anfang auch hatte oder?
 
Werbung:
Nein, bau das Hintergrundbild exakt so in das Content-Element ein wie Du es derzeit in diesem extra Element hast.
 
Nein, ich sprach davon die CSS-Eigenschaften rüberzunehmen, natürlich nur das Hintergrundbild (den Schatten) betreffend. Am HTML-Code brauchst Du dafür nichts ändern.
 
Werbung:
Sorry, aber ich verstehe leider echt nicht was du meinst. Wo soll ich was übernehmen? :sad:

.content {

background-image:url(img/content_puffer.png);
background-repeat:repeat-y;
width:1215px;
height:100%;
z-index:1;
background-image:url(img/content_schatten.png);
background-repeat:no-repeat;
}

Das ergibt doch keinen Sinn? :/
 
Auf Grund deiner nicht ganz durchschaubaren Klassenbezeichnungen ist meine Beschreibung tatsächlich etwas schwierig zu verstehen. Ich meinte das hier:

Code:
.Content_Text_formatierung {
  background-image: url("img/content_schatten.png");  background-repeat: no-repeat;
}


Und wie gesagt das Element mit content_schatten komplett aus dem HTML-Code entfernen.
 
Zurück
Oben