Autor
Nachricht
adotri
07.10.2009 um 10:02 (UTC) Titel: Banner in CSS-Design einfügen
Ich hab ein Problem ich find den Code vom oberen Header nicht.(Ich will mein en persönlichen Banner einfügen.......)
Das Design ist komplett fertig von 4b-Designs.
Zuerst dacht ich, ich müsse das Bild auf Imageshck draufladen und dann die URL der Homepage bei Header oben (background-image: url(); ) eingeben, ging aber nicht
Hier der CSS Code ohne Style Tags:
Code: div#nav_container{visibility: hidden;}
li.nav_element{display: none;}
h1#title{display: none;}
h2#title span {display: none;}
li.nav_element{display: none;}
li.nav_element a{display: none;}
div.header{display: none;}
a{color:#0088ff; font-size: 15px; text-decoration: none;}
a:hover {color: #0088ff; font-size: 15px; text-decoration: none;}
a:link {color: #0088ff; font-size: 15px; text-decoration: none;}
a:active {color: #0088ff; font-size: 15px; text-decoration: none;}
a:visited {color: #0088ff; font-size: 15px; text-decoration: none;}
#stick {
margin: 0 auto;
width: 922px;}
#Header_oben {
color: #FFFFFF;
width: 900px;
height: 180px;
background-image: url();
float: left;
padding: 10px;
border: 1px solid #CCCCCC;
margin: 0px 0px 0px 0px;}
#Navi_Feld {
width: 900px;
background-image:url();
color: #4A0000;
padding: 10px;
border: 1px solid #CCCCCC;
margin: 0px 0px 0px 0px;}
#content {
height: 470px;
width: 930px;
background-image:url();
color: #000000;
border: 1px solid #CCCCCC;
margin: 0px 0px 0px 0px;
padding: 10px;
overflow:auto;}
#Feld_unten {
width: 930px;
color: #FFFFFF;
border: 1px solid #CCCCCC;
background-image:url();
margin: 0px 0px 10px 0px;
padding: 10px;}
#counter{text-align:center;}
* { padding:0; margin:0;}
#footer .credit {
padding: 5px;
font: 10px Georgia, "Times New Roman", Times, serif;
}
ul { list-style:none;}
body {background: url(http://4b-designs.bplaced.net/bg.JPG) fixed center center repeat-y; font: .75em Verdana, Arial, Helvetica, sans-serif; color:#FFFFFF;}
#wrap {width:973px; margin:auto;}
h1, h2, h3, .subhead, .heading {font-family:Georgia, "Times New Roman", Times, serif;}
h1 { font-size: 2em; font-weight:normal;}
h2 { font-size: 1.5em; font-weight:normal;}
h3 {font-size: 1.2em; font-weight:normal;}
.clear {clear:both;}
.leftalign {float:left;}
.rightalign {float:right;}
.centeralign { margin:5px auto 5px auto;}
img.leftalign, img.rightalign, img.centeralign {display:block; padding:5px; background:#fff; border:solid 1px #ddd; margin:5px; }
a {color:#000; text-decoration:none;}
a:visited { color:#333; text-decoration:none;}
a:hover {color:#036; text-decoration:none;}
#wrap2 {background:url(http://4b-designs.bplaced.net/stick/images/pagebg.png) repeat-y; padding:0 7px 0 7px;}
#topbar {background: url(http://4b-designs.bplaced.net/stick/images/topbar.jpg) no-repeat; height:59px; padding:10px;}
#header {background:url(http://4b-designs.bplaced.net/stick/images/header.jpg) no-repeat; height:169px;}
#footer {background: url(http://4b-designs.bplaced.net/stick/images/footer.jpg) no-repeat; height:44px; width:937px; padding:10px; margin:auto; text-align:center;}
#content { background:url(images/contengbg.jpg) 666px 0 repeat-y; padding:10px;}
#topbg {background:url(http://4b-designs.bplaced.net/stick/images/topbg.png) no-repeat; height:14px;}
#btmbg {background:url(http://4b-designs.bplaced.net/stick/images/btmbg.png) no-repeat; height:13px;}
#headercontent {height:120px;}
#topnav {background:url(http://4b-designs.bplaced.net/stick/images/menubar.png) no-repeat; height:29px; width:916px; margin:auto;}
#searchbar {background:url(http://4b-designs.bplaced.net/stick/images/searchbar.png) no-repeat; width:431px; height:34px; float:right; margin:16px 10px 0 0;}
.searchform {
padding-left: 80px;
padding-top: 4px;
}
.textbox {
display: block;
height: 22px;
padding: 5px 8px 0 5px;
width: 298px;
background: transparent;
border-style: none;
border-width: 0px;
}
.textbox:focus {border:none;}
#sitename {
font: bold 24px "Trebuchet MS", Arial, Halvetica, sans-serif;
display: block;
float: left;
padding-top: 10px;
color: #2E2E2E;
}
#sitename .description {
display: block;
font: normal 12px Georgia, "Times New Roman", Times, serif;
color: #333;
}
#sitename a { color:#000; background:none; }
#sitename a:hover {color:#999; background:none;}
#left {width:650px; float:left;}#content #sidebar {
margin-left: 658px;
}
#left .post {width:641px; margin: 0 auto 15px auto;}
#left .post p {line-height:18px; margin-bottom:18px;}
#left .post .postheader {background: url(http://4b-designs.bplaced.net/stick/images/postheader.jpg) no-repeat; height:27px;}
#left .post .postcontent {background:url(http://4b-designs.bplaced.net/stick/images/postbg.jpg) repeat-y; padding:10px 25px 10px 25px;}
#left .post .postbottom {background: url(http://4b-designs.bplaced.net/stick/images/postbottom.jpg) no-repeat; height:86px;}
#sidebar ul { display:block; padding: 5px 5px 5px 8px;}
#sidebar ul li {display:block; padding:3px; }
#sidebar li a { background:url(http://4b-designs.bplaced.net/stick/images/sidemenunrml.jpg) 2px 2px no-repeat; padding: 0 10px 0 25px;}
#sidebar li a:hover {background:url(images/sidemenuhover2.jpg) 2px 2px no-repeat; color:#000;}
#sidebar h3 {display:block; font: 1.5em "Trebuchet MS", Arial, Halvetica, sans-serif ; color:#333; padding:5px 5px 0 8px;}
#sidebar .cat-item { height:26px; padding:0!important;}
#sidebar .cat-item a {display:block; height:20px; padding:5px 10px 0 20px; border-bottom: solid 1px #A4BBDD; background:url(http://4b-designs.bplaced.net/stick/images/sidemenunrml.jpg) 2px 5px no-repeat; color:#333; }
#sidebar .cat-item a:visited, #sidebar .cat-item a:active {color:#333;}
#sidebar .cat-item a:hover {background:url(images/sidemenuhover.jpg) no-repeat; color:#fff;}
.post h2 {color:#000; display:block; padding-bottom:18px;}
.postmeta {display:block; padding:15px 10px 0 25px;}
.postbottom .postmeta li {display: block; float:left; height:15px; padding:5px 8px 1px 25px; margin-right:10px; }
.permalink {background:url(images/ico_permalink.jpg) no-repeat; }
.category_link { background:url(images/ico_category.jpg) no-repeat;}
.comments_link{ background:url(images/ico_comments.jpg) no-repeat;}
#left a, #left a:visited, #left a:active {background:#ffc;}
#left a:hover { background:#ffd;}
.post .date {display:block; padding:3px 5px 3px 18px; font-size:10px; color:#666; background:url(images/icodate.jpg) no-repeat;}
.postcontent ul {margin:15px;}
.postcontent ul li {background:url(images/bullet.png) 2px 10px no-repeat; padding:5px 5px 5px 15px ; display:block; }
.postcontent ol {list-style-position:outside; list-style:decimal; margin-left:35px;}
.postcontent ol li {padding:5px;}
blockquote {display:block; padding:5px; margin:15px; font: 1.2em Georgia, "Times New Roman", Times, serif; color:#036; border-bottom: dashed 1px #ddd; border-top: dashed 1px #ddd; text-align:center;}
blockquote.leftalign {float:left; width:300px; text-align:right; margin:10px;}
blockquote.rightalign {float:right; width:300px; text-align:left; margin:10px;}#comments #commentcontent label {
display: block;
padding: 3px;
}
#wrap #wrap2 #content #left .post .postcontent #comments #commentcontent li {
display: block;
padding: 5px;
margin-bottom: 5px;
background: #fff;
list-style: none;
}
#wrap #wrap2 #content #left .post .postcontent #comments #commentcontent .odd {
background: #D3DEED;
}
* {margin:0; padding:0;}
.lavaLampWithImage {
position: relative;
height: 26px;
overflow: hidden;
margin-right: auto;
margin-left: auto;
width: 809px;
padding-top: 3px;
padding-right: 15px;
padding-left: 15px;
}
.lavaLampWithImage li {
float: left;
list-style: none;
}
.lavaLampWithImage li.back {
background: url(http://4b-designs.bplaced.net/stick/images/lavamenu2.png) no-repeat right;
width: 9px; height: 23px;
z-index: 8;
position: absolute;
}
.lavaLampWithImage li.back .left {
background: url(http://4b-designs.bplaced.net/stick/images/lavamenu1.png) no-repeat left;
height: 23px;
margin-right: 9px;
}
.lavaLampWithImage li a {
font: normal 14px "Trebuchet MS", Arial, Halvetica, sans-serif;
text-decoration: none;
color: #fff;
outline: none;
text-align: center;
text-transform: uppercase;
letter-spacing: 0;
z-index: 10;
display: block;
float: left;
height: 20px;
position: relative;
overflow: hidden;
margin-right: 10px;
margin-left: 10px;
padding-top: 3px;
}
.lavaLampWithImage li a:hover, .lavaLampWithImage li a:active, .current a, current a:visited .lavaLampWithImage li a:visited {
border: none;
}
input:active, textarea:active, select:active,
input:focus, textarea:focus, select:focus {
border: 1px solid #666666;
background-color: #EAF7FD;
color: #666666;
}
input, textarea, select {
border: 1px solid #CCCCCC;
background-color: #F6F6F6;
font: normal 11px Verdana;
color: #666666;
}
td[height="102"] {
position:absolute;
left:50%;
margin-left:-376px;
}
Hinweis unter dem Inhaltsbereich:
Code: <script type="text/javascript" src="http://4b-designs.bplaced.net/stick/js/jquery-1.1.3.1.min.js"></script>
<script type="text/javascript" src="http://4b-designs.bplaced.net/stick/js/jquery.easing.min.js"></script>
<script type="text/javascript" src="http://4b-designs.bplaced.net/stick/js/jquery.lavalamp.min.js"></script>
<script type="text/javascript">
$(function() {
$("#1, #2, #3").lavaLamp({
fx: "backout",
speed: 700,
click: function(event, menuItem) {
return true;
}
});
});
</script>
<link href="lavalamp.css" rel="stylesheet" type="text/css" />
</head>
MfG
Zuletzt bearbeitet von adotri am 07.10.2009, 11:04, insgesamt einmal bearbeitet
↑
nuo-designs
Wohnort: Wechseldatenträger
07.10.2009 um 10:07 (UTC) Titel:
Zitat: div#nav_container{visibility: hidden;}
li.nav_element{display: none;}
h1#title{display: none;}
h2#title span {display: none;}
li.nav_element{display: none;}
li.nav_element a{display: none;}
div.header{display: none;}
a{color:#0088ff; font-size: 15px; text-decoration: none;}
a:hover {color: #0088ff; font-size: 15px; text-decoration: none;}
a:link {color: #0088ff; font-size: 15px; text-decoration: none;}
a:active {color: #0088ff; font-size: 15px; text-decoration: none;}
a:visited {color: #0088ff; font-size: 15px; text-decoration: none;}
#stick {
margin: 0 auto;
width: 922px;}
#Header_oben {
color: #FFFFFF;
width: 900px;
height: 180px;
background-image: url();
float: left;
padding: 10px;
border: 1px solid #CCCCCC;
margin: 0px 0px 0px 0px;}
#Navi_Feld {
width: 900px;
background-image:url();
color: #4A0000;
padding: 10px;
border: 1px solid #CCCCCC;
margin: 0px 0px 0px 0px;}
#content {
height: 470px;
width: 930px;
background-image:url();
color: #000000;
border: 1px solid #CCCCCC;
margin: 0px 0px 0px 0px;
padding: 10px;
overflow:auto;}
#Feld_unten {
width: 930px;
color: #FFFFFF;
border: 1px solid #CCCCCC;
background-image:url();
margin: 0px 0px 10px 0px;
padding: 10px;}
#counter{text-align:center;}
* { padding:0; margin:0;}
#footer .credit {
padding: 5px;
font: 10px Georgia, "Times New Roman", Times, serif;
}
ul { list-style:none;}
body {background: url(http://4b-designs.bplaced.net/bg.JPG) fixed center center repeat-y; font: .75em Verdana, Arial, Helvetica, sans-serif; color:#FFFFFF;}
#wrap {width:973px; margin:auto;}
h1, h2, h3, .subhead, .heading {font-family:Georgia, "Times New Roman", Times, serif;}
h1 { font-size: 2em; font-weight:normal;}
h2 { font-size: 1.5em; font-weight:normal;}
h3 {font-size: 1.2em; font-weight:normal;}
.clear {clear:both;}
.leftalign {float:left;}
.rightalign {float:right;}
.centeralign { margin:5px auto 5px auto;}
img.leftalign, img.rightalign, img.centeralign {display:block; padding:5px; background:#fff; border:solid 1px #ddd; margin:5px; }
a {color:#000; text-decoration:none;}
a:visited { color:#333; text-decoration:none;}
a:hover {color:#036; text-decoration:none;}
#wrap2 {background:url(http://4b-designs.bplaced.net/stick/images/pagebg.png) repeat-y; padding:0 7px 0 7px;}
#topbar {background: url(http://4b-designs.bplaced.net/stick/images/topbar.jpg) no-repeat; height:59px; padding:10px;}
#header {background:url(http://4b-designs.bplaced.net/stick/images/header.jpg ) no-repeat; height:169px;}
#footer {background: url(http://4b-designs.bplaced.net/stick/images/footer.jpg) no-repeat; height:44px; width:937px; padding:10px; margin:auto; text-align:center;}
#content { background:url(images/contengbg.jpg) 666px 0 repeat-y; padding:10px;}
#topbg {background:url(http://4b-designs.bplaced.net/stick/images/topbg.png) no-repeat; height:14px;}
#btmbg {background:url(http://4b-designs.bplaced.net/stick/images/btmbg.png) no-repeat; height:13px;}
#headercontent {height:120px;}
#topnav {background:url(http://4b-designs.bplaced.net/stick/images/menubar.png) no-repeat; height:29px; width:916px; margin:auto;}
#searchbar {background:url(http://4b-designs.bplaced.net/stick/images/searchbar.png) no-repeat; width:431px; height:34px; float:right; margin:16px 10px 0 0;}
.searchform {
padding-left: 80px;
padding-top: 4px;
}
.textbox {
display: block;
height: 22px;
padding: 5px 8px 0 5px;
width: 298px;
background: transparent;
border-style: none;
border-width: 0px;
}
.textbox:focus {border:none;}
#sitename {
font: bold 24px "Trebuchet MS", Arial, Halvetica, sans-serif;
display: block;
float: left;
padding-top: 10px;
color: #2E2E2E;
}
#sitename .description {
display: block;
font: normal 12px Georgia, "Times New Roman", Times, serif;
color: #333;
}
#sitename a { color:#000; background:none; }
#sitename a:hover {color:#999; background:none;}
#left {width:650px; float:left;}#content #sidebar {
margin-left: 658px;
}
#left .post {width:641px; margin: 0 auto 15px auto;}
#left .post p {line-height:18px; margin-bottom:18px;}
#left .post .postheader {background: url(http://4b-designs.bplaced.net/stick/images/postheader.jpg) no-repeat; height:27px;}
#left .post .postcontent {background:url(http://4b-designs.bplaced.net/stick/images/postbg.jpg) repeat-y; padding:10px 25px 10px 25px;}
#left .post .postbottom {background: url(http://4b-designs.bplaced.net/stick/images/postbottom.jpg) no-repeat; height:86px;}
#sidebar ul { display:block; padding: 5px 5px 5px 8px;}
#sidebar ul li {display:block; padding:3px; }
#sidebar li a { background:url(http://4b-designs.bplaced.net/stick/images/sidemenunrml.jpg) 2px 2px no-repeat; padding: 0 10px 0 25px;}
#sidebar li a:hover {background:url(images/sidemenuhover2.jpg) 2px 2px no-repeat; color:#000;}
#sidebar h3 {display:block; font: 1.5em "Trebuchet MS", Arial, Halvetica, sans-serif ; color:#333; padding:5px 5px 0 8px;}
#sidebar .cat-item { height:26px; padding:0!important;}
#sidebar .cat-item a {display:block; height:20px; padding:5px 10px 0 20px; border-bottom: solid 1px #A4BBDD; background:url(http://4b-designs.bplaced.net/stick/images/sidemenunrml.jpg) 2px 5px no-repeat; color:#333; }
#sidebar .cat-item a:visited, #sidebar .cat-item a:active {color:#333;}
#sidebar .cat-item a:hover {background:url(images/sidemenuhover.jpg) no-repeat; color:#fff;}
.post h2 {color:#000; display:block; padding-bottom:18px;}
.postmeta {display:block; padding:15px 10px 0 25px;}
.postbottom .postmeta li {display: block; float:left; height:15px; padding:5px 8px 1px 25px; margin-right:10px; }
.permalink {background:url(images/ico_permalink.jpg) no-repeat; }
.category_link { background:url(images/ico_category.jpg) no-repeat;}
.comments_link{ background:url(images/ico_comments.jpg) no-repeat;}
#left a, #left a:visited, #left a:active {background:#ffc;}
#left a:hover { background:#ffd;}
.post .date {display:block; padding:3px 5px 3px 18px; font-size:10px; color:#666; background:url(images/icodate.jpg) no-repeat;}
.postcontent ul {margin:15px;}
.postcontent ul li {background:url(images/bullet.png) 2px 10px no-repeat; padding:5px 5px 5px 15px ; display:block; }
.postcontent ol {list-style-position:outside; list-style:decimal; margin-left:35px;}
.postcontent ol li {padding:5px;}
blockquote {display:block; padding:5px; margin:15px; font: 1.2em Georgia, "Times New Roman", Times, serif; color:#036; border-bottom: dashed 1px #ddd; border-top: dashed 1px #ddd; text-align:center;}
blockquote.leftalign {float:left; width:300px; text-align:right; margin:10px;}
blockquote.rightalign {float:right; width:300px; text-align:left; margin:10px;}#comments #commentcontent label {
display: block;
padding: 3px;
}
#wrap #wrap2 #content #left .post .postcontent #comments #commentcontent li {
display: block;
padding: 5px;
margin-bottom: 5px;
background: #fff;
list-style: none;
}
#wrap #wrap2 #content #left .post .postcontent #comments #commentcontent .odd {
background: #D3DEED;
}
* {margin:0; padding:0;}
.lavaLampWithImage {
position: relative;
height: 26px;
overflow: hidden;
margin-right: auto;
margin-left: auto;
width: 809px;
padding-top: 3px;
padding-right: 15px;
padding-left: 15px;
}
.lavaLampWithImage li {
float: left;
list-style: none;
}
.lavaLampWithImage li.back {
background: url(http://4b-designs.bplaced.net/stick/images/lavamenu2.png) no-repeat right;
width: 9px; height: 23px;
z-index: 8;
position: absolute;
}
.lavaLampWithImage li.back .left {
background: url(http://4b-designs.bplaced.net/stick/images/lavamenu1.png) no-repeat left;
height: 23px;
margin-right: 9px;
}
.lavaLampWithImage li a {
font: normal 14px "Trebuchet MS", Arial, Halvetica, sans-serif;
text-decoration: none;
color: #fff;
outline: none;
text-align: center;
text-transform: uppercase;
letter-spacing: 0;
z-index: 10;
display: block;
float: left;
height: 20px;
position: relative;
overflow: hidden;
margin-right: 10px;
margin-left: 10px;
padding-top: 3px;
}
.lavaLampWithImage li a:hover, .lavaLampWithImage li a:active, .current a, current a:visited .lavaLampWithImage li a:visited {
border: none;
}
input:active, textarea:active, select:active,
input:focus, textarea:focus, select:focus {
border: 1px solid #666666;
background-color: #EAF7FD;
color: #666666;
}
input, textarea, select {
border: 1px solid #CCCCCC;
background-color: #F6F6F6;
font: normal 11px Verdana;
color: #666666;
}
td[height="102"] {
position:absolute;
left:50%;
margin-left:-376px;
}
Tausche das Rot makierte aus mit deinem Header Bild.
______________
WebDesign | Corporate Design | Redesign
↑
adotri
07.10.2009 um 10:30 (UTC) Titel:
geht leider nicht:(
trotzdem thx für schnelle Antwort
EDIT:
Hat funktioniert!(Hab eine Klammer ausversehen übersehen und nicht gemacht)
DAnke!
Aber jetzt hab ich schon eine andere Frage-.-
Wo ist der Code für den Hintergrund der Seite?
Zuletzt bearbeitet von adotri am 07.10.2009, 12:57, insgesamt einmal bearbeitet
↑
der-bielefeld-club
Premium
Support-Team
Wohnort: Bielefeld
07.10.2009 um 12:11 (UTC) Titel:
Den Hintergrund findest du in deinem Code hier:
Zitat: body {background: url(http://4b-designs.bplaced.net/bg.JPG ) fixed center center repeat-y; font: .75em Verdana, Arial, Helvetica, sans-serif; color:#FFFFFF;}
mfg Dominik
______________
Besucht die offizielle Hilfeseite vom Homepage-Baukasten:
Iceblue Generator |
Red Generator |
Butterfly Generator
↑
adotri
07.10.2009 um 12:18 (UTC) Titel:
Vielen, vielen Dank an beiden. Könnt Thema jetzt schliessen =)
Zuletzt bearbeitet von adotri am 07.10.2009, 13:19, insgesamt einmal bearbeitet
↑
der-bielefeld-club
Premium
Support-Team
Wohnort: Bielefeld
↑