php.de

Zurück   php.de > Webentwicklung > HTML, Usability und Barrierefreiheit
[Erledigt] Buttons in Banner [Erledigt] Buttons in Banner
Wiki Registrieren Grundlagen Suchen Heutige Beiträge Alle Foren als gelesen markieren

HTML, Usability und Barrierefreiheit Themen rund um Textauszeichnung, Formatierung, Barrierefreiheit und Usability.

Antwort
 
LinkBack Themen-Optionen Thema bewerten
Alt 05.01.2012, 17:10  
Benutzer
 
Registriert seit: 20.09.2011
Beiträge: 67
PHP-Kenntnisse:
Anfänger
programmer112 befindet sich auf einem aufstrebenden Ast
Standard [Erledigt] Buttons in Banner
Hallo,

ich beschäftige mich erstmals mit CSS und habe deswegen nicht so viel Ahnung, wie alles geht.

Ich habe einen Banner als Bild mit der Höhe von 36px.
Zwei Buttons sollen genau auf dem Banner liegen, was sie momentan noch nicht tun, da sie ein paar Pixel darüber liegen.
Wo liegt der Fehler, ihr könnt mir sicher helfen.

PHP-Code:
<style type="text/css">

a.button {
 font-family:Lucida Bright;
 font-size:14px;
 font-weight: 500;
 color: #E27100;
 background-color: #7C7C7C;
 border-left: 0px solid #CCCCCC;
 border-top: 2px solid #7C7C7C;
 border-right: 2px solid #7C7C7C;
 border-bottom: 0px solid #606060;
 text-decoration: none;
 padding: 9px;
 text-align: center;
}

a.button:hover {
 color: #000000;
 background-color: #FF954F;
 border-left: 2px solid #3F3F3F;
 border-top: 2px solid #3F3F3F;
 border-right: 0px solid #cccccc;
 border-bottom: 0px solid #606060;
 text-decoration: none;
}

.headbanner {
 background:url(layout/headbanner.png);
 border:2px solid #000000;
 background-repeat:no-repeat;
 height:100%;
 }

</style>

<br />
<div class="headbanner">
 <center>
 <div style="border:2px solid red; margin-top:0px; margin-bottom:0px; padding-top:0px;">
 <a href="#" class="button">Bilder</a>&nbsp;
 <a href="#" class="button">Kontakt</a>&nbsp;
 <a href="#" class="button">Links</a>
 </center>
 </div>

</div> 
Die Rahmenlinien habe ich nur für mich zum Erkennen hingemacht.

Gruß
__________________
Besucht meinen Blog: http://medialife.me.funpic.de/
programmer112 ist offline   Mit Zitat antworten
Sponsor Mitteilung
PHP Code Flüsterer

Registriert seit: 21.08.2005
Beiträge: 4682
PHP-Kenntnisse:
Fortgeschritten

Alt 05.01.2012, 17:14  
Benutzer
 
Registriert seit: 14.08.2008
Beiträge: 41
PHP-Kenntnisse:
Anfänger
hummer befindet sich auf einem aufstrebenden Ast
Standard
Stichwort position: absolute;
hummer ist offline   Mit Zitat antworten
Alt 05.01.2012, 17:21  
Erfahrener Benutzer
 
Registriert seit: 26.11.2008
Beiträge: 264
dsentker befindet sich auf einem aufstrebenden Ast
Standard
Das geht auch mit position:relative;
Ich sehe du hast keine Höhe für den Banner definiert. Tu es lieber explizit mit der von dir angegebenen Höhe. Außerdem solltest du ein CSS-Reset nutzen, da jeder Browser eigene Abstände an verschiedene Elemente setzt.
PS: Verzichte im Markup auf Stilistische Definitionen (oder anders gesagt: Lass das <center>-Tag weg).
__________________
dsentker ist offline   Mit Zitat antworten
Alt 05.01.2012, 17:29  
Benutzer
 
Registriert seit: 20.09.2011
Beiträge: 67
PHP-Kenntnisse:
Anfänger
programmer112 befindet sich auf einem aufstrebenden Ast
Standard
Ich habs jetzt nochmal bisschen umgeändert, komm aber einfach nicht zum Ergebnis.
Mit position:absolute bzw. relative funktioniert es einfach nicht.

So siehts momentan aus.
PHP-Code:
<style type="text/css">

a.button {
 font-family:Lucida Bright;
 font-size:14px;
 font-weight: 500;
 color: #E27100;
 background-color: #7C7C7C;
 border-left: 0px solid #CCCCCC;
 border-top: 2px solid #7C7C7C;
 border-right: 2px solid #7C7C7C;
 border-bottom: 0px solid #606060;
 text-decoration: none;
 padding: 9px;
 text-align: center;
}

a.button:hover {
 color: #000000;
 background-color: #FF954F;
 border-left: 2px solid #3F3F3F;
 border-top: 2px solid #3F3F3F;
 border-right: 0px solid #cccccc;
 border-bottom: 0px solid #606060;
 text-decoration: none;
}

.headbanner {
 background:url(layout/headbanner.png);
 border:2px solid #000000;
 background-repeat:no-repeat;
 height:36px;
 position:relative;
 top:1px;
 }

</style>

<br />
<div class="headbanner">


 <a href="#" class="button">Bilder</a>&nbsp;
 <a href="#" class="button">Kontakt</a>&nbsp;
 <a href="#" class="button">Links</a>

</div> 
Bräuchte nochmal paar Tipps, krieg das einfach nicht hin
__________________
Besucht meinen Blog: http://medialife.me.funpic.de/
programmer112 ist offline   Mit Zitat antworten
Alt 05.01.2012, 17:32  
Erfahrener Benutzer
 
Registriert seit: 26.11.2008
Beiträge: 264
dsentker befindet sich auf einem aufstrebenden Ast
Standard
Lad dein Werk mal auf jsFiddle hoch, on the fly ist sowas immer einfach einzusehen.
__________________
dsentker ist offline   Mit Zitat antworten
Alt 05.01.2012, 17:49  
Benutzer
 
Registriert seit: 20.09.2011
Beiträge: 67
PHP-Kenntnisse:
Anfänger
programmer112 befindet sich auf einem aufstrebenden Ast
Standard
Wofür ist das gut?

[http://jsfiddle.net/hZGbN/]
__________________
Besucht meinen Blog: http://medialife.me.funpic.de/
programmer112 ist offline   Mit Zitat antworten
Alt 05.01.2012, 17:55  
Erfahrener Benutzer
 
Registriert seit: 26.11.2008
Beiträge: 264
dsentker befindet sich auf einem aufstrebenden Ast
Standard
Damit wir deinen Code live nachvollziehen können.

a.button benötigt noch
display: inline-block;

Edit: Nimm doch lieber eine unsortierte Liste:
http://jsfiddle.net/SJ7PH/
__________________
Geändert von dsentker (05.01.2012 um 17:58 Uhr).
dsentker ist offline   Mit Zitat antworten
Alt 05.01.2012, 18:05  
Benutzer
 
Registriert seit: 20.09.2011
Beiträge: 67
PHP-Kenntnisse:
Anfänger
programmer112 befindet sich auf einem aufstrebenden Ast
Standard
Hab jetzt bisschen die Größe verändert und jetzt passt das ungefähr.

Ich habe den vertical-align vom Button hinzugefügt und bei headbanner habe ich den Oberrand auf 1px gemacht und die gleiche Farbe wie der Hintergrund des Bilds genommen.

So passt das, unten fehlt ein Pixel, fällt aber eigentlich kaum auf.

PHP-Code:
<style type="text/css">

a.button {
 font-family:Lucida Bright;
 font-size:14px;
 font-weight: 500;
 color: #E27100;
 background-color: #7C7C7C;
 border-left: 0px solid #CCCCCC;
 border-top: 2px solid #7C7C7C;
 border-right: 2px solid #7C7C7C;
 border-bottom: 0px solid #606060;
 text-decoration: none;
 padding: 9px;
 text-align: center;
 vertical-align:sub;

}

a.button:hover {
 color: #000000;
 background-color: #FF954F;
 border-left: 2px solid #3F3F3F;
 border-top: 2px solid #3F3F3F;
 border-right: 0px solid #cccccc;
 border-bottom: 0px solid #606060;
 text-decoration: none;
}

.headbanner {
 background:url(layout/headbanner.png);
 border-top:1px solid #FF9700;
 background-repeat:no-repeat;
 height:36px;
 position:relative;
 top:1px;
 }

</style>

<br />
<div class="headbanner">


 <a href="#" class="button">Bilder</a>&nbsp;
 <a href="#" class="button">Kontakt</a>&nbsp;
 <a href="#" class="button">Links</a>



</div>
<br /><br />
<br /><a href=""> 
Gruß und Danke!
__________________
Besucht meinen Blog: http://medialife.me.funpic.de/
programmer112 ist offline   Mit Zitat antworten
Alt 06.01.2012, 15:16  
Benutzer
 
Registriert seit: 20.09.2011
Beiträge: 67
PHP-Kenntnisse:
Anfänger
programmer112 befindet sich auf einem aufstrebenden Ast
Standard
Habe nochmal rumprobiert und falls jemand das jetzt braucht, hier nochmal der CSS-Teil:

PHP-Code:
<style type="text/css">
a.button {
 font-family:Lucida Bright;
 font-size:14px;
 font-weight: 500;
 background:url(headbanner.png);
 color: #000000;
 // background-color: #7C7C7C;
 border-left: 0px solid #CCCCCC;
 border-top: 0px solid #7C7C7C;
 border-right: 0px solid #7C7C7C;
 border-bottom: 0px solid #606060;
 text-decoration: none;
 padding: 9px;
 vertical-align:middle;
 text-align:center;
 line-height: 36px;

}

a.button:hover {
 color: #000000;
 background:url(hover.png);
 height:100%;
 border-left: 0px solid #D16F00;
 border-top: 0px solid #E17900;
 border-right: 0px solid #cccccc;
 border-bottom: 0px solid #854200;
 text-decoration: none;
 vertical-align:middle;
 text-align:center;
 line-height: 36px; 
}

.headbanner {
 background:url(headbanner.png);
 border-top:0px solid #FF9700;
 background-repeat:x;
 height:36px;
 witdh:100%;
 position:relative;
 top:1px;
 margin-top:0px;
 }

</style> 
Gruß
__________________
Besucht meinen Blog: http://medialife.me.funpic.de/
programmer112 ist offline   Mit Zitat antworten
Antwort

« border-radius in ie lt 9 | CSS Textfarben Problem »

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.
BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are an
Gehe zu

Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Schriftzug anzeigen "Anzeige" wenn Banner angezeigt wird --- XTC vampsm PHP Tipps 2009 4 10.11.2009 16:54
Banner Rechts anzeigen lassen geht nicht! weberous3000 HTML, Usability und Barrierefreiheit 2 13.10.2009 02:10
Logo in Banner einfügen Momchilo HTML, Usability und Barrierefreiheit 2 31.08.2009 23:22
Suche Banner statistik tce Scriptbörse 1 09.06.2009 11:36
Radio Buttons nach [zurück] nicht mehr markiert Destruction PHP Tipps 2009 4 24.05.2009 14:39
Banner auf fremder Webseite ausgeben phpeinsteiger PHP Tipps 2009 9 21.02.2009 10:46
Header - Banner - Include Iframe Magnus PHP Tipps 2009 1 10.01.2009 14:09
CSS: buttons linksbündig ausrichten flflfl HTML, Usability und Barrierefreiheit 1 30.09.2006 13:08
Banner Werbung und map-Funktion aus html HTML, Usability und Barrierefreiheit 5 26.05.2006 11:23
Texte automatisch in gif oder jpg Banner umwandeln. Wie? Völlig unbedarft PHP Tipps 2007 1 03.11.2005 20:12
Banner hilfe Benjamin PHP Tipps 2005-2 4 12.08.2005 08:21
[suche] Designer für Banner (kostenlos) zwelch Beitragsarchiv 2 28.02.2005 21:49
Pflichtklick auf Banner => dann weiter Kori HTML, Usability und Barrierefreiheit 2 25.08.2004 21:51


Alle Zeitangaben in WEZ +2. Es ist jetzt 07:56 Uhr.

php.de - Das deutsche PHP-Forum - Kontakt - Impressum - Forenregeln - Archiv - Nach oben



Powered by vBulletin® Version 3.7.2 (Deutsch)
Copyright ©2000 - 2012, Jelsoft Enterprises Ltd.
Search Engine Optimization by vBSEO 3.2.0
Aprilia-Forum, Aquaristik-Forum, Liebeskummer-Forum, Zierfisch-Forum, Geizkragen-Forum