Zur Boardunity Forenstartseite
  #1  
Alt 03.02.2007, 21:39
Benutzerbild von rellek
Das bin ich!
 
Registriert seit: 02.2004
Ort: 192.168.0.3
Beiträge: 986

CSS - Unten ausrichten/Bufixing


Tach,

ich hätte mal kurz eine Frage *g*

Im Anhang befindet sich ein Screenshot von einer Webanwendung - einmal im Firefox 2, im IE7 und im Opera 9.1.
Im Firefox sieht das ganze "am richtigsten" aus...
Daher erste Frage:
- Wie bekomme ich den IE dazu, das genauso darzustellen (zumindest das der Balken über den Dummy-Buttons verschwindet)?
- Warum zeigt der Opera das so Kacke an? Wie erklär ich dem das?

So... Aber ich möchte auch sehr gern, dass die Dummy-Buttons am unteren Rand vom Header sind, damit man so einen "Tab"-Effekt realisieren könnte...
Was müsste ich hierfür tun?

Hier mal der aktuelle Quellcode:
Code:
<div class="outborder">
    <div class="userinfo">
        $header_usr_login
    </div>
    <div class="header">
        
        <div class="searchbox">
            <form name="search" action="action.php" method="post">
                <input type="text" name="keyword" value="Suche" onfocus="if(this.value=='Suche')this.value=''" onblur="if(this.value=='')this.value='Suche'" /> <input type="submit" value="Go!" /><br />
                <input type="radio" name="where" value="1" checked="checked" /> Nur hier <input type="radio" name="where" value="0" /> &Uuml;berall
                <input type="hidden" name="action" value="search" />
            </form>
        </div>
        
                <a href="index.php"><img src="style/images/header.png" border="0" /></a>

    </div>
    
    <div class="mainmenu">
        
        <div id="mainnav">
            <ul>
                <li><a href="#">Dummy</a></li>
                <li><a href="#">Dummy 2</a></li>
                <li><a href="#">Dummy 3</a></li>
            </ul>
        </div>
        
    </div>
</div>
CSS:
Code:
body {
    background: #e3d7b8;
    color: #000000;
    font: 9px verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif, 'Bitstream Vera Sans';
}

a:link, body_alink {
    color: #000000;
    text-decoration: underline;
}

a:visited, body_avisited {
    color: #000000;
    text-decoration: underline;
}

a:hover, a:active, body_ahover {
    color: #000000;
    text-decoration: none;
}

td, th, p, li {
    font: 12px verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif, 'Bitstream Vera Sans';
}

.outborder {
    margin: 0 auto;
    padding: 0;
    width: 800px;
    border: #000000 1px solid;
    background: #ffffff;
}

.searchbox {
    float: right;
    margin: 5px 5px 0px 0px;
    background: #E6D9CA url('images/header-bg-gradient.png') repeat-y top left;
    background: #E6D9CA url('images/header-bg.png') repeat-y top left;
}

.header {
    padding: 0;
    margin: 0;
    float: left;
    background: #E6D9CA url('images/header-bg.png') repeat-x top left;
    border-top: #000000 1px solid;
}

.mainmenu {
    padding: 0;
    margin: 0;
    background: #E6D9CA url('images/header-bg-gradient.png') repeat-y top left;
    border-bottom: #000000 1px solid;
}


.content {
    padding: 2px;
    margin: 2px;
    font: 12px verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif, 'Bitstream Vera Sans';
}

.userinfo {
    padding: 2px;
    margin: 2px;
    text-align: right;
}


input, select, textarea {
    font: 11px verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif, 'Bitstream Vera Sans';
    color: #000000;
    background-color: #ffffff;
    border-left: 1px solid #000000;
    border-right: 1px solid #000000;
    border-top: 1px solid #000000;
    border-bottom: 1px solid #000000;
}

#mainnav {
    
}

#mainnav ul {

}
#mainnav ul li {
    display: inline;
    list-style-type: none;
    color : #E6D9CA;
    font-size : 12px;
    text-align: justify;
}
#mainnav ul li a {
    font-size: 13px;
    text-decoration: none;
    padding: .2em 1em;
    color: #000000;
    background-color: #E6D9CA;
    background-image: none;
}
#mainnav ul li a:hover{
    color: #000000;
    background-color: #ffffff;
}

Ich danke euch schon mal für eure Hilfe :-)
Miniaturansicht angehängter Grafiken
css-unten-ausrichten-bufixing-firefox.png  css-unten-ausrichten-bufixing-ie.png  css-unten-ausrichten-bufixing-opera.png  

__________________
MFG, rellek
Administrator rellek[org]

...gehen Sie bitte weiter, hier gibt es nichts zu sehen
  #2  
Alt 03.02.2007, 23:09
Benutzerbild von LonelyPixel
UNB-Entwickler
 
Registriert seit: 01.2004
Ort: Erlangen
Beiträge: 970
Ich glaub ein einfacherer Testfall würde die Problemsuche erleichtern.

__________________
Yves Goergen
Softwareentwicklung, Fotografie, Webhosting, UNB Components (in Arbeit)
  #3  
Alt 03.02.2007, 23:24
Benutzerbild von MrNase
Mitglied
 
Registriert seit: 06.2003
Ort: /
Beiträge: 2.628
Wo gefloatet wird muss auch geclearet werden!

Dein Code ist nun recht komplex aber streu doch mal ein paar <br style="clear: both" /> unters Volk und guck' ob sich was tut.

  #4  
Alt 04.02.2007, 07:53
Benutzerbild von rellek
Das bin ich!
 
Registriert seit: 02.2004
Ort: 192.168.0.3
Beiträge: 986
Zitat:
Zitat von MrNase Beitrag anzeigen
Wo gefloatet wird muss auch geclearet werden!

Dein Code ist nun recht komplex aber streu doch mal ein paar <br style="clear: both" /> unters Volk und guck' ob sich was tut.
Danke für den Hinweis. Ich habe jetzt mal überall da, wo ein "Umbruch" zu machen wäre, ein <br style="clear: both;" /> reingemacht.

Das hat zumindest dem Opera geholfen - die Dummy-Buttons sind jetzt auf einer eigenen Zeile. Nur die Suchbox ist immernoch über dem Logo :-(
Was jetzt an neuen "Bugs" hinzugekommen ist, sind freiräume überall da, wo die brs sind...

__________________
MFG, rellek
Administrator rellek[org]

...gehen Sie bitte weiter, hier gibt es nichts zu sehen
  #5  
Alt 04.02.2007, 08:21
Benutzerbild von MaMo
Viscacha Coder
 
Registriert seit: 09.2003
Beiträge: 809
Die Freiräume kannste dreckig umgehen in dem du den <br /> Tags noch line-height: 0px verpasst.

__________________
Forensoftware mit integriertem CMS: Viscacha 0.8!
  #6  
Alt 04.02.2007, 08:41
Benutzerbild von rellek
Das bin ich!
 
Registriert seit: 02.2004
Ort: 192.168.0.3
Beiträge: 986
Hi,

das hat nun leider nur oben in der Zeile funktioniert...

Hier mal der jetzt aktuelle Quellcode:
Code:
<div class="outborder">
    <div class="userinfo">
        $header_usr_login
    </div><br style="clear: both; line-height: 0px" /> 
    <div class="header">
        
        <div class="searchbox">
            <form name="search" action="action.php" method="post">
                <input type="text" name="keyword" value="Suche" onfocus="if(this.value=='Suche')this.value=''" onblur="if(this.value=='')this.value='Suche'" /> <input type="submit" value="Go!" /><br />
                <input type="radio" name="where" value="1" checked="checked" /> Nur hier <input type="radio" name="where" value="0" /> &Uuml;berall
                <input type="hidden" name="action" value="search" />
            </form>
        </div>
        
                <a href="index.php''''SID1''''"><img src="style/images/header.png" border="0" /></a>

    </div><br style="clear: both; line-height: 0px" /> 
    
    <div class="mainmenu">
        
        <div id="mainnav">
            <ul>
                <li><a href="#">Dummy</a></li>
                <li><a href="#">Dummy 2</a></li>
                <li><a href="#">Dummy 3</a></li>
            </ul>
        </div>
        
    </div>
</div>
Der CSS-Code ist immernoch derselbe...

Sieht im Browser dann wieder so aus wie im Anhang (Firefox, IE, Opera ist die Reihenfolge)
Miniaturansicht angehängter Grafiken
css-unten-ausrichten-bufixing-f.jpg  css-unten-ausrichten-bufixing-i.jpg  css-unten-ausrichten-bufixing-o.jpg  

__________________
MFG, rellek
Administrator rellek[org]

...gehen Sie bitte weiter, hier gibt es nichts zu sehen
  #7  
Alt 06.02.2007, 08:16
Benutzerbild von rellek
Das bin ich!
 
Registriert seit: 02.2004
Ort: 192.168.0.3
Beiträge: 986
Hi,

soo... Es ist jetzt schon "etwas" besser. Opera hats inzwischen begriffen, wo alles zu sein hat, aber dafür gibts jetzt ein neues Problem... Warum wird die Hintergrundfarbe von .header ignoriert (schön zu sehen um die Suchbox... Wenn ich das Bild durch Text ersetze, siehts genauso aus) Was ist denn da schon wieder faul?

Hier mal die Quellcodes:
Code:
<div class="outborder">
    <div class="userinfo">
<div style="float: left">Dummy</div>        $header_usr_login 
    </div> 
    <div class="header">
    
                <div style="float: left"><a href="index.php''''SID1''''"><img src="style/images/header.png" border="0" /></a></div>

        <div class="searchbox">
            <form name="search" action="action.php" method="post">
                <input type="text" name="keyword" value="Suche" onfocus="if(this.value=='Suche')this.value=''" onblur="if(this.value=='')this.value='Suche'" /> <input type="submit" value="Go!" /><br />
                <input type="radio" name="where" value="1" checked="checked" /> Nur hier <input type="radio" name="where" value="0" /> &Uuml;berall
                <input type="hidden" name="action" value="search" />
            </form>
        </div>
        


    </div>
    
    <div class="mainmenu" style="clear: both;">
        
        <div id="mainnav">
            <ul>
                <li><a href="#">Dummy</a></li>
                <li><a href="#">Dummy 2</a></li>
                <li><a href="#">Dummy 3</a></li>
            </ul>
        </div>
        
    </div>
</div>
Code:
body {
    background: #e3d7b8;
    color: #000000;
    font: 9px verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif, 'Bitstream Vera Sans';
}

a:link, body_alink {
    color: #000000;
    text-decoration: underline;
}

a:visited, body_avisited {
    color: #000000;
    text-decoration: underline;
}

a:hover, a:active, body_ahover {
    color: #000000;
    text-decoration: none;
}

td, th, p, li {
    font: 12px verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif, 'Bitstream Vera Sans';
}

.outborder {
    margin: 0 auto;
    padding: 0;
    width: 800px;
    border: #000000 1px solid;
    background: #ffffff;
}

.searchbox {
    
    float: right;
    margin: 5px 5px 0px 0px;
    background: #E6D9CA url('images/header-bg.png') repeat-y top left;
}

.header {
    margin: 0px;
    padding: 0px;
    background: #E6D9CA url('images/header-bg.png') repeat-x top left;
    border-top: #000000 1px solid;
}

.mainmenu {

    background: #E6D9CA url('images/header-bg-gradient.png') repeat-y top left;
    border-bottom: #000000 1px solid;
}


.content {
    padding: 2px;
    margin: 2px;
    font: 12px verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif, 'Bitstream Vera Sans';
}

.userinfo {
    padding: 2px;
    margin: 2px;
    text-align: right;
}


input, select, textarea {
    font: 11px verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif, 'Bitstream Vera Sans';
    color: #000000;
    background-color: #ffffff;
    border-left: 1px solid #000000;
    border-right: 1px solid #000000;
    border-top: 1px solid #000000;
    border-bottom: 1px solid #000000;
}

#mainnav {
    
}

#mainnav ul {

}
#mainnav ul li {
    display: inline;
    list-style-type: none;
    color : #E6D9CA;
    font-size : 12px;
    text-align: justify;
}
#mainnav ul li a {
    font-size: 13px;
    text-decoration: none;
    padding: .2em 1em;
    color: #000000;
    background-color: #E6D9CA;
    background-image: none;
}
#mainnav ul li a:hover{
    color: #000000;
    background-color: #ffffff;
}
Miniaturansicht angehängter Grafiken
css-unten-ausrichten-bufixing-keinheader.jpg  

__________________
MFG, rellek
Administrator rellek[org]

...gehen Sie bitte weiter, hier gibt es nichts zu sehen
  #8  
Alt 09.02.2007, 17:58
Benutzerbild von rellek
Das bin ich!
 
Registriert seit: 02.2004
Ort: 192.168.0.3
Beiträge: 986
Hi,

soooo, endlich habe ich es hinbekommen *yeah*
Die Bugs (dass Opera, IE und Firefox den Code verschieden darstellen), sind behoben.
Das ganze sieht jetz in allen 3 Browsern so aus:
http://boardunity.de/attachments/a49...98-firefox.png

Jetzt hätte ich nur noch gerne die Dummy-Buttons unten von "mainmenu" angezeigt, damit man das so aussehen lassen kann wie Tabs.

Kann da noch jemand von euch helfen? :-)

Danke

__________________
MFG, rellek
Administrator rellek[org]

...gehen Sie bitte weiter, hier gibt es nichts zu sehen
Antwort


Stichworte
-

Themen-Optionen
Thema bewerten
Thema bewerten:

Forumregeln
Es ist dir nicht erlaubt, neue Themen zu verfassen.
Es ist dir nicht erlaubt, auf Beiträge zu antworten.
Es ist dir nicht erlaubt, Anhänge hochzuladen.
Es ist dir nicht erlaubt, deine Beiträge zu bearbeiten.
Gehe zu

Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Grafik oben links ausrichten geber Programmierung und Datenbanken 3 30.10.2006 18:28






1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24