Beiträge von djheke

djheke

Vieleicht hilft das hier.Natürlich nur bei Interesse.
http://www.gipspferd.de/css/anleitung/a5/a5.php
http://www.gipspferd.de/css/anleitung/a16/a16.php

djheke

Deine Grafik verrät mir, dass noch ein cler:left im Spiel ist. Aber was möchtest du denn umsetzen?

djheke

Ja mit JS. Aber lass es lieber. Binde deine Navi lieber mit PHP include() ein. Google hilft.
Oder du guckst hier mal http://www.gipspferd.de/css/anleitung/a4/a4.php Vielleicht kannst du sowas gebrauchen.

djheke

Also, im FF 17 gibt es auch Probleme mit der Darstellung.
Ich vermute mal, dass es am @font-face von google liegt. Kommentiere mal ALLE font-face Angaben aus. Somit sollte das Problem behoben sein.

djheke

Dann dein td Selektorblock erweitern empty-cells:hide. Funktioniert im IE aber erst ab Version 8. Wenn es tabellarische Daten sind, dann nimm eine Tabelle. Wenn es wie eine Tabelle ausehen soll nimm display:table.

djheke

Wenns eine Tabelle sein soll(muss), dann vielleicht so.

HTML

<!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">
<head>
<style type="text/css">
<!--

td { 
 border:1px solid #000;
 border-radius: 5px;
 vertical-align:top;
 width: 200px;
}


-->
</style>
</head>
<body>    
<table cellspacing="10" cellpadding="10">
<tbody>
<tr>
<td>TEXT</td>
<td>TEXT <br /> TEXT <br /></td>
<td>TEXT <br /> TEXT <br />TEXT <br /> TEXT <br />TEXT <br /> TEXT <br /></td>
</tr>
</tbody>
</table>
</body>
</html>

Alles anzeigen

Alle td gleich hoch mit Absstand 10px

djheke

Warum untersuchst du die Elemente nicht im FF? So weißt du welche Selektorblöcke in Frage kommen.
Hier mal die geänderten Blöcke für Schriftfarbe und die Icons.

Code

#socialize a {
    background: url("http://static.tumblr.com/hugxd2w/ULIma0bba/social-icons-black.png") no-repeat scroll left top #fff;
    width: 16px;
    height: 16px;
    border: none;
    display: block;
    text-indent: -999em;
    overflow: hidden;
    opacity: 1;
    padding: 0px;
    border-radius:50%;
}


#socialize a:hover {
    background: url("http://static.tumblr.com/hugxd2w/ULIma0bba/social-icons-black.png") no-repeat scroll left top #aaa;
}


   .blog-title a, #sidebar h2, #footer h2, #footer-end a, .pages a, .menu a, .more-likes, .like_link a {
    color: rgba(255, 255, 255, 0.75);
}

Alles anzeigen

Musst du nach deinen Vorstellungen anpassen. Den Rest kriegst du alleine hin.

djheke

Hie nochmal ohne negative Positionierung.

HTML

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Hover</title>
<style type="text/css">




body {
    background-color: #3a3a3a;
}
#div_start , #red:hover span {
    position:absolute;
    left:0px;
    top:0px;
        right:0;
        bottom:0;
    margin:auto;
}


#div_start {
    width:700px;
    height:150px;
}


#red , #red span , #yellow , #green , #blue {
        margin-right:25px;
    width:150px;
    height:150px;
        float:left;
        position:relative;
        display:block;
}
#red span { 
       background:#d3342a;
}


#yellow { 
       background:yellow;
}


#green { 
       background:green;
}


#blue { 
       background:blue;
}


#red:hover span {
    width:60px;
    height:60px;
}


</style>
</head>


<body>
<div id="div_start">
    <div id="red"><span></span></div>
    <div id="yellow"></div>
    <div id="green"></div>
    <div id="blue"></div>
</div>
</body>
</html>

Alles anzeigen

Viel Spaß

djheke

Abgesehen davon, dass dein Header sehr breit ist, brauchst du nur ein Container.

HTML

<!DOCTYPE html>
<html>
 <head>
  <style>
#header{
    height:280px;
    width:1585px; 
    background:url(bg.jpg) no-repeat top center; /* Grafik 1585px x 100px. Je zur Hälfte farbig */
}




#header p {
 width:645px; /*Bannerbreite*/
 margin:0 auto;
}




  </style>
 </head>
 <body>
  <div id="header">
   <p><a href="banner.htm"><img src="banner.gif" alt="banner"/></a></p>
  </div>
  <br/>
 </body>
</html>

Alles anzeigen

djheke

Icke och!
Vermutlich arbeitet sein System gegen ihm. (Installieren macht doch Spaß )

djheke

Na, brauchst du nicht noch die eine oder anders js-Datei? Die vermisse ich in deinem Quelltext.

Code

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
 <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

djheke

Doppelt hält besser!
http://www.gipspferd.de/css/anleitung/tooltipps-mit-css/</a>

djheke

Nur für den Fall, dass du es dir wiedereinmal anders überlegst.

HTML

<!DOCTYPE HTML>
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">

  <title>mnmnm</title>
  </head>
  <style type="text/css">


* {
 margin:0;
 padding:0;
 list-style:none;
}


html , body {
 overflow:hidden;
}




#wrapper {
 position:absolute;
 top:0;
 left:0;
 right:0;
 bottom:0;
 width:80%;
 height:80%;
 margin:auto;
 background:#ddd;
}


#links {


 width:30%;
 height:100%;
 float:left;
 background:#dad;
}


#links:before {
 content:"";
 display:inline-block;
 vertical-align:middle;
 height:100%;
}


#links ul {
 display:inline-block;
 vertical-align:middle;
}
 
#rechts {
 margin-left:30%;
 background:#dda;
 overflow:auto;
 height:100%;
}










  </style>
  <body>


<div id="wrapper">
<div id="links">
 <ul>
 <li>Links</li><li>Links</li><li>Links</li><li>Links</li>
</ul>
</div> 
<div id="rechts">
  <p>Rechts</p> <p>Rechts</p> <p>Rechts</p> <p>Rechts</p> <p>Rechts</p> <p>Rechts</p> <p>Rechts</p> <p>Rechts</p> <p>Rechts</p> <p>Rechts</p> <p>Rechts</p> <p>Rechts</p> <p>Rechts</p> <p>Rechts</p> <p>Rechts</p> <p>Rechts</p> <p>Rechts</p> <p>Rechts</p> <p>Rechts</p> <p>Rechts</p> <p>Rechts</p> <p>Rechts</p> <p>Rechts</p> <p>Rechts</p> <p>Rechts</p> <p>Rechts</p> <p>Rechts</p> <p>Rechts</p> <p>Rechts</p> <p>Rechts</p> <p>Rechts</p> <p>Rechts</p> <p>Rechts</p> <p>Rechts</p> <p>Rechts</p> <p>Rechts</p> <p>Rechts</p> <p>Rechts</p> <p>Rechts</p> <p>Rechts</p> <p>Rechts</p> <p>Rechts</p> <p>Rechts</p> <p>Rechts</p>
</div>


  </div>


  </body>
</html>

Alles anzeigen

djheke

Wo willst du noch überall fragen? Poste einene Link und alles wird gut.

djheke

Nimm mal die width:100%; aus dem #container.

Die benötigte Angabe für IE6 bitte in einer separaten Datei einfügen.

Code

#container { width:100%; ]

Es scheint wohl so zu sein, dass die neueren Browser height:100% durch min-height:100% nicht mehr überschreiben. Ausgenommen Opera.

Also, alle Angaben für unsere Lieblingsbrowser mit Conditional Comments in einer separaten datei auslagern. So entstehen keine Probleme.

djheke

Was spricht dagegen die Grafikauf ca. 2000px zu verbreitern? Somit hast du alle Probleme gelöst. Breiter als 2000px sollte eine Webseite nicht sein. Oder? Wobei ich nicht so richtig verstehe was die Transparents soll.

So würde es gehen:

Code

#links {
 height:80px;
 width:300px;
 float:left;
 background: url(footer_online.png) no-repeat 0 0;
}


#rechts {
 height:80px;
 margin-left:300px;
 background:#000;
}




<div id="footer">
<div id="links"></div>
<div id="rechts"></div>
</div>

Alles anzeigen

Wobei #footer nicht formatiert werden muss.

Oder so?

Code

#footer {
 position:relative;
 height:80px;
 width:100%;
 float:left;
 background: url(footer_online.png) no-repeat 0 0 ;
}


#footer:after {
 content:"";
 position:absolute;
 left:300px;
 top:0;
 bottom:0;
 right:0;
 background:#333;
}


<div id="footer"></div>

Alles anzeigen

Nachtrag: Wenn du keine Pseudoelemente verwnden möchtest, dann nimm Nachfahrselektoren:

Code

#footer {
 position:relative;
 height:80px;
 width:100%;
 float:left;
 background: url(footer_online.png) no-repeat 0 0 ;
}


#footer span {
 content:"";
 position:absolute;
 left:300px;
 top:0;
 bottom:0;
 right:0;
 background:#333;
}


<div id="footer"><span></span>Dein Text</div>

Alles anzeigen

djheke

Bin mir nicht so sicher, aber es sollte so gehen.

Code

background:url(bild.png) no-repeat left center #eeeeeea

Wenn nicht, dann zeige mal eine Beispielseite.

djheke

Faux Columns ist das Stichwort,
http://www.gipspferd.de/css/anleitung/a18/a18.php

djheke

Deine User könnten ja an beliebiger Stelle folgendes einbinden

Code

<script type="text/javascript" src="url/tabelle-js.php"></script>

Und in dieser Datei bindest du deine Datenbank ein.

PHP

var tabelle = "<?php php script?>";
document.write(tabelle);

djheke

Soll deine navi horizontal oder vertikal ausgerichtet sein? Außerdem gehören links in einer Liste.

Guck mal hier:http://www.gipspferd.de/css/anleitung/a5/a5.php

Beiträge von djheke

Menügrafik "überstehen" lassen?

Finde den Floatfehler :-)

iframe und overflow

Probleme mit Safari - Seite "flackert"

DIV gleiche Höhe in jeder Zelle

DIV gleiche Höhe in jeder Zelle

tumblr html problem...

div:hover flackert bei "hovern"

3 divs mit bg-Image nebeneinander

CSS funkt nicht mehr so recht ab Firefox 16

Projekthilfe

Infobox über einer Verlinkung "verankern"

zentrieren von div/overflow

HTML falsche code?

Footer am Seitenende ausrichten - wo ist der Fehler?

Footer auffüllen

Footer auffüllen

DIV bis auf 100% zum Seitenende auffüllen

Eigener HTML Code soll von anderen eingebettet werden können

css problem <id>