CSS Problem wer kann helfen

NoNameCity

Hallo, hier http://erotik.dcrs-online.com/index.php seht Ihr 4 Beispielbeiträge nebeneinander. Der vierte jedoch (rechts aussen) klebt an dem dritten dran.

Das CSS (von dem Kasten) sieht im Moment so aus:

HTML

#content .teaser{
float:left;
position:relative;
width:129px;
margin-bottom:-20px;
}
#content .te1,#content .te2{
margin-right:15px;
}
#content .teaser h2{
font-size:.9em;
color:#cc0000;
}
#content .teaser h2 a{


color:#cc0000;
}
#content .teaser h2 a:hover{


color:#cc0000;
}
#content .teaser img{
display:block;
left:0;
margin:4px 0 8px 0;
position:absolute;
top:-3px;
width:129px;


}
#content .teaser .teasercat{
background:#efefef;
color:#cc0000;
font-size:.9em;
margin-top:110px;
}
.teaserhold{


overflow:hidden;
}

Alles anzeigen

Hat jemand ne Ahnung, woran das liegt ?

Danke vorab

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

marX

Floaten will gelernt sein. ;-) Die Box hängt sich rechts neben den nächstgrößeren Block, und das ist in deinem Fall eben der 3. Also rutscht die 5. Box unter den 4. und rechts neben den 3. Abhilfe schafft z.B. eine feste Höhe für die Teaser-Blöcke (ich habs mit 200px getestet - ist natürlich nicht ganz optimal).

NoNameCity

Dass die 5. darunter rutscht ist ja super, das will ich ja auch so.
Problem ist nur, dass die vierte an der dritten (ohne den Zwischenraum) klebt.
Wie kannn ich das beheben ?

marX

Achso, ist mir gar nicht aufgefallen, sorry. Ich hab nur das falsch positionierte .te5 gesehen.

Du benötigst für jeden .teaser-Block ein margin-right. Dieses hast du aber explizit nur für .te1 und .te2 festgelegt (style.css Zeile 1219), nicht aber für .te3 und alle weiteren. Ich würde das margin-right pauschal für alle .teaser vergeben.

NoNameCity

Oh super, danke !

Nun habe ich aber noch das Problem, dass der Validator einen Fehler anzeigt, den ich nicht finde und zudem im IE6 der header und die sidebar nicht angezeigt werden. Wenn Du mir das auch noch sagen könntest, wäre das der Hammer !

P.S.: Ist es irgendwie zu schaffen, die Navigation von links ab starten zu lassen (gleiche Reihenfolge, nur eben von links ab)

marX

Zu dem Validatorfehler:

Code

<div class="newsticker">


<h3>Brandheisse Schlager-News bei Hithaus</h3>


<ul></ul>
</div>

Der Code ist schuld, das <ul> enthält keine Listenelemente <li>. Woran das liegt weißt du sicher selbst am besten. ;-)

Menü - dropline.css (line 13):

Code

#menu ul li {
float:[COLOR="Red"]right[/COLOR];
font-size:12px;
height:26px;
list-style-type:none;
margin-right:2px;
}

Das rot markierte auf "left" ändern. Die Reihenfolge der Seiten kannst du im Backend festlegen (gibt beim Schreiben der Seiten ne Box dafür). Oder sind das Kategorien? Dann brauchst du evtl. das Plugin "My Category Order" zum Sortieren.

NoNameCity

OK, habe ich gemacht, aber kuck selbst. Nun ist auch Startseite auf der rechten seite anstatt links und ausserdem wie bekomme ich den Abstand links paralell zu dem normalen Abstand (11px) hin ?

marX

Wenn du mir verräts wie die Liste generiert wird, dann helf ich dir weiter. Ich vermute mal der Code steht in der header.php.
Auf jeden Fall muss der (vermutlich statisch eingetragene) Startseiteneintrag im Quellcode vor dem Code stehen, der "Amateure" ausgibt.

Wegen dem Abstand - dropline.css (line 8 ):

Code

#menu ul {
[COLOR="Red"]left:-11px;[/COLOR]
list-style-image:none;
list-style-position:outside;
list-style-type:none;
position:relative;
}

Rot markiertes einfügen. Mit dem genauen Pixelwert musst du mal ein wenig spielen.

[size=8]PS: Kann mal wer den Sonnenbrillen-Smiley ausschalten bei "acht, Klammer zu". Das nervt wenn man ne Zahl in Klammern schreiben will! ;-)[/size]

NoNameCity

Ja, da könntest Du Recht haben !
Die header.php sieht wie folgt aus:

PHP

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="de-DE" xml:lang="de-DE">
<head profile="http://gmpg.org/xfn/11">
<meta name="generator" content="HTML Tidy for Linux (vers 1 September 2005), see www.w3.org" />
<meta name="verify-v1" content="M4wa8zMgFQmEvL74dhAihSF+T/OkQL/JhPRXbAfKKGE=" />
<meta name="distribution" content="news" />
<meta name="language" content="de" />
<meta http-equiv="language" content="de" />
<link href="/favicon.ico" rel="shortcut icon" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="generator" content="WordPress 2.3.3" /><!-- leave this for stats -->
<link rel="alternate" type="application/rss+xml" title="Erotik von DCRS ONLINE RSS Feed" href="http://erotik.dcrs-online.com/feed" />
<link rel="pingback" href="http://erotik.dcrs-online.com/xmlrpc.php" /><!--[if lt IE 7]>
<script src="http://erotik.dcrs-online.com/wp-content/themes/default/scriptaculous/prototype.js" type="text/javascript"></script>
<script src="http://erotik.dcrs-online.com/wp-content/themes/default/scriptaculous/scriptaculous.js" type="text/javascript"></script>
<script src="http://erotik.dcrs-online.com/wp-content/themes/default/menu.js" type="text/javascript"></script>
<![endif]-->
<link rel="stylesheet" href="http://erotik.dcrs-online.com/wp-content/themes/default/style.css" type="text/css" media="screen,projection" />
<link rel="stylesheet" href="http://erotik.dcrs-online.com/wp-content/themes/default/dropline.css" type="text/css" media="screen,projection" /><!--[if IE]>
<link rel="stylesheet" href="http://erotik.dcrs-online.com/wp-content/themes/default/ie-all.css" type="text/css" media="screen,projection" />
<![endif]-->
<!--[if lt IE 7]>
<link rel="stylesheet" href="http://erotik.dcrs-online.com/wp-content/themes/default/ie6.css" type="text/css" media="screen,projection" />
<![endif]-->
<link rel="stylesheet" type="text/opera;charset=utf-8" href="http://erotik.dcrs-online.com/wp-content/themes/default/opera.css" />
<script src="http://erotik.dcrs-online.com/wp-content/themes/default/date.js" type="text/javascript">
</script>
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://erotik.dcrs-online.com/xmlrpc.php?rsd" />
<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://erotik.dcrs-online.com/wp-includes/wlwmanifest.xml" />
<script type='text/javascript' src='http://erotik.dcrs-online.com/wp-content/plugins/vipers-video-quicktags/vipers-video-quicktags.js?ver=5.3.0'>
</script><!-- Generated by Simple Tags 1.3.8 - http://wordpress.org/extend/plugins/simple-tags -->
<meta name="keywords" content="Sex, Privat, Porno" /><!-- Quicktime hacks for Viper's Video Quicktags plugin -->


<style type="text/css">
/*<![CDATA[*/
                .vvqbox {
                        margin: 5px auto 0 auto;
                        text-align: center;
                }


                /* hides the second object from all versions of IE */
                * html object.mov {
                        display: none;
                }


                /* displays the second object in all versions of IE apart from 5 on PC */
                * html object.mov/**/ {
                        display: inline;
                }


                /* hides the second object from all versions of IE >= 5.5 */
                * html object.mov {
                        display/**/: none;
                }
/*]]>*/
</style>
<title></title>


<style type="text/css">
/*<![CDATA[*/
 p.c5 {margin: 4px 0px}
 a.c4 {font-size:8pt; color:#cccccc;}
 br.c3 {clear:left;font-size:1px;line-height:1px;visible:hidden;}
 p.c2 {text-align:center;}
 img.c1 {width:auto;}
/*]]>*/
</style>
</head>
<body>
<div class="head-ad"></div>
<div id="page">
<div id="search-header">Test - Test - Test</div>
<div id="header">
<h1><a title="Kostenlose Erotik, Sex und Porno Videos" href="http://erotik.dcrs-online.com">erotik.dcrs-online.com</a></h1>
<div id="prenavmenu">
<form method="get" id="searchform" action="http://erotik.dcrs-online.com/" name="searchform">
<div><input type="text" value="" name="s" id="s" /> <input type="submit" id="searchsubmit" value="Suche" /></div>
</form>
</div>
<div class="background-navi" id="menu">
<ul class="level1" id="root">
<li class=""><a href="http://erotik.dcrs-online.com/videos/amateure" title="Alle unter Amateure abgelegten Beitr�ge ansehen">Amateure</a></li>
<li class="cat-item current_item"><a href="http://erotik.dcrs-online.com/" title="Startseite">Startseite</a></li>
</ul>
</div>
<div class="breadcrumb"></div>
</div>

Alles anzeigen

P.S.: Ich habe das eingefügt, was Du geschrieben hast, konnte aber keine Veränderung feststellen

NoNameCity

OK, das mit der Startseite habe ich jetzt ganz herausgelassen. Wie aber bekommte ich die Navi bündig (links) mit dem Rest

marX

Hab ich das nicht oben geschrieben? :confused:

NoNameCity

Soweit alles ok. Danke

Probleme sind jetzt noch:

Im Firefox (ich habe der Navie jetzt einen grauen Background gegeben) ist "Amateuere" nicht in der Mitte des Hintergrundes (von oben nach unten gesehen). Ich finde den Grund nicht, wieso und im IE6 ist das ganze Design "Für den Arsch".

Weisst Du dafür noch eine Lösung ?

Willkommen! Melden Sie sich an oder registrieren Sie sich.

CSS Problem wer kann helfen

Jetzt mitmachen!