Community rund um Cascading Style Sheets, Tutorials & KnowHow für Webmaster

Wie bette ich eine Grafik mit Verlinkung ein?

Antwort erstellen

Wie bette ich eine Grafik mit Verlinkung ein?

Beitragvon Light » 10.08.2007, 23:34

Joah, das Problemkind ist wieder da ;-) Manchmal braucht man eben 'nur'
den richtigen Hinweis oder Fährte und schon läufts auch wieder. Auch in
diesem Fall bin ich wieder hoffnungslos unbegabt:

Ich würde gerne den markierten Button entsprechend an dieser Stelle
als Grafik positionieren und diesen auf die Mainpage verlinken. Als
'Home-Button' so zu sagen. Wie funktioniert das genau?

Bild

Code: Alles auswählen
/**************************************************

   Style      Blue
   Version   1.0
   Author   Servous <servous>
   Created   2005-03-12
   Edited   2005-03-29

**************************************************/

/* ########## BODY ########## */

body {
   font-family: Verdana, Helvetica, Arial, Sans-Serif;
   font-size: 11px;
   background-color: #999;
   background-image: url('Blue/bg.png');
}

#sblog_root {
   background-image: url('Blue/bg_div.png');
   background-position: center center;
   background-repeat: repeat-y;
   width: 900px;
   margin: auto;
}

#sblog_head {
   background-image: url('Blue/moviedsheader.png');
   background-position: top center;
   background-repeat: no-repeat;
   padding: 20px 0px 0px 0px;
   width: 900px;
   height: 184px;
}

#sblog_body {
   margin: 0px;
   padding: 10px 20px 0px 20px;
   overflow: hidden;
}

#sblog_foot {
   background-image: url('Blue/bg_div_b.png');
   background-position: bottom center;
   background-repeat: no-repeat;
   width: 900px;
   height: 20px;
   clear: both;
}

#sblog_copy {
   color: #999;
   text-align: center;
   padding: 20px 0px 4px 0px;
   clear: both;
}

#sblog_page_title {
   text-align: center;
}

#sblog_page_title a {
   font-size: 2.4em;
   font-weight: bold;
   color: #369;
}

#sblog_page_title a:hover {
   text-decoration: none;
}

#sblog_page_description {
   text-align: center;
}

#sblog_page_description  h2 {
   font-weight: normal;
   font-style: italic;
   color: #999;
}

#sblog_main {
   margin: 0px 0px 0px 180px;
   width: 500px;
}

/* ########## LINKS ########### */

a {
   color: #69C;
   text-decoration: none;
}

a:hover {
   color: #369;
   text-decoration: underline;
}

a.sblog_post_options_link_comments, a.sblog_post_options_link_perma, a.sblog_post_options_link_trackback, a.sblog_post_options_link_delete, a.sblog_post_options_link_edit, a.sblog_comment_options_link {
   padding-right: 4px;
}

a.sblog_post_options_link_perma {
   background-image: url('Blue/ico_permalink.png');
   background-position: center left;
   background-repeat: no-repeat;
   padding-left: 14px;
}

a.sblog_post_options_link_perma:hover {
   background-image: url('Blue/ico_permalink_h.png');
   background-position: center left;
   background-repeat: no-repeat;
}

a.sblog_post_options_link_comments {
   background-image: url('Blue/ico_comments.png');
   background-position: center left;
   background-repeat: no-repeat;
   padding-left: 14px;
}

a.sblog_post_options_link_comments:hover {
   background-image: url('Blue/ico_comments_h.png');
   background-position: center left;
   background-repeat: no-repeat;
}

a.sblog_post_options_link_trackback {
   background-image: url('Blue/ico_trackback.png');
   background-position: center left;
   background-repeat: no-repeat;
   padding-left: 14px;
}

a.sblog_post_options_link_trackback:hover {
   background-image: url('Blue/ico_trackback_h.png');
   background-position: center left;
   background-repeat: no-repeat;
}

a.sblog_post_options_link_delete {
   background-image: url('Blue/ico_delete.png');
   background-position: center left;
   background-repeat: no-repeat;
   padding-left: 14px;
}

a.sblog_post_options_link_delete:hover {
   background-image: url('Blue/ico_delete_h.png');
   background-position: center left;
   background-repeat: no-repeat;
}

a.sblog_post_options_link_edit {
   background-image: url('Blue/ico_edit.png');
   background-position: center left;
   background-repeat: no-repeat;
   padding-left: 14px;
}

a.sblog_post_options_link_edit:hover {
   background-image: url('Blue/ico_edit_h.png');
   background-position: center left;
   background-repeat: no-repeat;
}

a.help {
   cursor: help;
   font-weight: bold;
   color: #090;
}

#sblog_menu a {
   padding: 0px 2px 0px 2px;
}

#sblog_menu a:hover {
   text-decoration: underline;
}

#sblog_copy a {
   color: #999;
   text-decoration: underline;
}

#sblog_copy a:hover {
   color: #000;
}

a.sblog_external {
   background-image: url('Blue/external.png');
   background-position: center right;
   background-repeat: no-repeat;
   padding: 0px 14px 0px 0px;
}

/* ########## MENU ########## */

#sblog_menu {
   text-align: center;
   padding: 4px 0px 4px 0px;
}

/* ########## POST ########## */

.sblog_post {
   padding: 0px 0px 10px 0px;
}

.sblog_post_topic {
   border-bottom: 1px #69C solid;
   padding: 4px 0px 0px 0px;
}

.sblog_post_topic h1 {
   color: #369;
   font-size: 1.2em;
   font-weight: bold;
}

.sblog_post_text {
   background-image: url('Blue/bg_block.png');
   background-repeat: repeat-x;
   padding: 4px;
}

.sblog_post_options {
   margin: 10px 0px 20px 0px;
}

.sblog_post_edit {
   color: #CCC;
   font-family: Arial, Helvetica, Verdana, sans-serif;
   font-size: 1em;
}

/* ########## COMMENTS ########## */

.sblog_comment {
   background-color: #FFF;
   margin: 0px 0px 10px 0px;
}

.sblog_comment_topic {
   background-image: url('Blue/bg_sblog_post_topic.png');
   background-position: bottom left;
   background-repeat: no-repeat;
   color: #369;
   font-size: 10px;
   font-weight: bold;
   padding: 4px 0px 1px 0px;
}

.sblog_comment_text {
   color: #999;
   padding: 4px;
}

.sblog_comment_options {
   margin: 10px 0px 20px 0px;
}

.sblog_comment_edit {
   color: #CCC;
   font-family: Arial, Helvetica, Verdana, sans-serif;
   font-size: 9px;
}

/* ########## BLOCK ########## */

#sblog_block_body {
   float: left;
   width: 160px;
   margin: 120px 0px 0px 0px;
}

.sblog_block {
   margin: 0px 0px 10px 0px;
}

.sblog_block_topic {
   border-bottom: 1px #69C solid;
   padding: 4px 0px 0px 0px;
}

.sblog_block_topic h2 {
   font-size: 1.2em;
   font-weight: bold;
   color: #369;
}

.sblog_block_text {
   padding: 4px;
   background-image: url('Blue/bg_block.png');
   background-position: top center;
   background-repeat: repeat-x;
   padding: 4px 0px 10px 4px;
}

/* ########## PAGES ########## */

.sblog_pages {
   background-image: url('Blue/bg_pages.png');
   background-position: top center;
   background-repeat: repeat-x;
   border-top: 1px #CCC solid;
   padding: 4px;
}

.sblog_pages_prev {
   float: left;
   width: 140px;
   text-align: left;
}

.sblog_pages_current {
   width: 50px;
   text-align: center;
   margin: auto;
}

.sblog_pages_next {
   float: right;
   width: 140px;
   text-align: right;
}

/* ########## LIST ########## */

#sblog_block_body ul {
   list-style-image: none;
   list-style-type: none;
   padding: 0px;
   margin: 0px;
}

ul {
   list-style-image: url('Blue/ul.png');
   padding-left: 20px;
}

/* ########## CALENDAR ########## */

table.sblog_cal {
   background-image: url('Blue/bg_block.png');
   background-position: top center;
   background-repeat: repeat-x;
   width: 100%;
   margin: 0px 0px 10px 0px;
   color: #CCC;
}

td.sblog_cal_header {
   text-align: center;
}

td.sblog_cal {
   text-align: center;
   color: #369;
}

td.sblog_cal_empty {
}

td.sblog_cal_day {
   text-align: center;
   font-size: 1em;
   height: 20px;
}

td.sblog_cal_today {
   color: #000;
   background-color: #FFF;
   background-image: url('Blue/cal_today.png');
   background-position: top left;
   background-repeat: no-repeat;
   text-align: center;
}

td.sblog_cal_active {
   background-color: #FFF;
   background-image: url('Blue/cal_active.png');
   background-position: top left;
   background-repeat: no-repeat;
   text-align: center;
   font-size: 1em;
}

/* ########## FORMS ########## */

form {
   margin: 0px;
}

/* special case to keep ie's original fieldset */
*>fieldset {
   border: 1px #CCC solid;
}

legend {
   color: #369;
   font-weight: bold;
}

label.sblog_label_col {
   width: 200px;
   float: left;
}

input, textarea, select {
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 10px;
}

input.sblog_input {
   margin: 2px;
   border: 1px #CCC solid;
   padding: 2px;
}

input.sblog_search {
   font-family: Verdana, Arial, Helvetica, sans-serif;
   color: #999;
   width: 130px;
   border: 1px #CCC solid;
}

textarea.sblog_text {
   width: 420px;
   height: 400px;
   border: 1px #CCC solid;
}

textarea.sblog_comment {
   width: 300px;
   height: 100px;
   border: 1px #CCC solid;
   margin: 2px;
   padding: 2px;
}

.sblog_button {
   color: #369;
   font-weight: bold;
}

.sblog_var {
   float: left;
   width: 120px;
   padding: 4px;
}

.sblog_val {
   background-color: #F0F0F0;
   margin: 0px 0px 2px 120px;
   padding: 4px;
}

/* ########## IMAGES ########## */

img {
   border-width: 0px;
   margin: 0px;
}

.sblog_image {
   background-color: #F0F0F0;
   border: 1px #CCC solid;
   margin: 0px 0px 10px 0px;
   padding: 4px;
   width: 440px;
   overflow: hidden;
}

.sblog_image_info {
   margin: 0px 0px 0px 130px;
}

.sblog_image_tn {
   float: left;
}

/* ########## MISC ########## */

span.hilite {
   background-color: #FCC;
}

.sblog_category {
   color: #69C;
   font-size: 1em;
}

.sblog_quote {
   border: 1px #CCC dashed;
   padding: 4px;
}

.sblog_line {
   border-bottom: 1px #CCC dotted;
}

.sblog_code {
   border-style: solid;
   border-width: 1px;
   border-color: #CCC #FFF #FFF #CCC;
   padding: 10px;
   background-color: #F0F0F0;
   color: #000;
}

h1, h2 {
   margin: 0px;
   font-size: 1em;
   font-weight: normal;
}

span.sblog_censor {
   border-bottom-style: dotted;
   border-bottom-width: 1px;
   border-bottom-color: #F00;
}
Light
neu hier
 
Beiträge: 5
Registriert: 09.08.2007, 20:29
Nach oben

Beitragvon Executor » 11.08.2007, 03:50

kannst du zur seite verlinken und den html quelltext posten?
Reise, Reise
Amerika
Mutter
Mein Teil
Stein um Stein
Tier
Engel
Ich will
Nebel
Executor
ist häufig da
 
Beiträge: 156
Registriert: 08.08.2006, 01:48
Wohnort: Richtplatz
Nach oben

Beitragvon Light » 11.08.2007, 08:30

Zur Seite [url=http://]>> klick <<[/url]
Zuletzt geändert von Light am 16.08.2007, 18:19, insgesamt 1-mal geändert.
Light
neu hier
 
Beiträge: 5
Registriert: 09.08.2007, 20:29
Nach oben

Beitragvon Executor » 11.08.2007, 14:23

also ich würde jetzt spontan einfach nochn <div> einfügen, wo das bild drin is als link. und zwar würd ich das so machen, dass ich in den #sblog_body div einen homebutton div container reinmach und den dann im css halt die position mittels margin positionieren, größe festlegen und das bild als link einfügen, wie man das macht weißt du doch sicher, wenn nicht schau mal auf http://selfhtml.org/ nach.

Hoffe das hilft dir, wenn net weiterdfragen ;-)

greez Executor

ps: sorry dass ich keinen code poste, bei mir verschluckt er immer die div namen.
Reise, Reise
Amerika
Mutter
Mein Teil
Stein um Stein
Tier
Engel
Ich will
Nebel
Executor
ist häufig da
 
Beiträge: 156
Registriert: 08.08.2006, 01:48
Wohnort: Richtplatz
Nach oben

Beitragvon Light » 15.08.2007, 23:30

Ich benötige dringend intensive CSS Hilfe. Ich komme leider überhaupt
nicht weiter und trete auf der Stelle. Wer von euch kann mich denn ein
wenig 'an die Hand nehmen' und vllt ein paar Fragen per ICQ beantworten?

€dit: Auch dieses Problem ist gelöst ... learning by doing ;-)
Light
neu hier
 
Beiträge: 5
Registriert: 09.08.2007, 20:29
Nach oben
Antwort erstellen

Moderatoren: Laus, Moderatoren

Ähnliche Beiträge zu "Wie bette ich eine Grafik mit Verlinkung ein?"

Zurück zu: CSS für Anfänger

Wer ist online?

Mitglieder in diesem Forum: 0 Mitglieder und 5 Gäste

Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group
Optimized by SEO phpBB, Deutsche Übersetzung durch phpBB.de