Hallo irgendwie hat schaffe ich es einfach nicht meine seite zu coden
ich kann das problem nicht genau erklären
aber die ganzen grafiken haben sich verschoben seit dem ich das was im bild eingekreist ist gemacht habe
kann es sein das ich für solche effexte anders slicen muss oder so verstehe das einfach net deswegen habe ich noch ein bild gemacht wie ich die grafik gesliced hab
den code für diese funktion habe ich von einer anderen seite copiert
aber weil ich nicht genau weiß welchen teil ich dafür brauche habe ich die ganze css datei kopiert und in meine html datei gepackt
hier die css datei
PHP-Code:
/* =================== Getting the new tags to behave START ====================== */
article, aside, audio, canvas, command, datalist, details, embed, figcaption, figure, footer, header, hgroup, keygen, meter, nav, output, progress, section, source, video { display: block; }
mark, rp, rt, ruby, summary, time { display: inline }
/* ==================== Getting the new tags to behave END ======================= */
/* ========================= Global properties START ============================= */
body {
background: #000;
min-width: 980px;
height: 100%;
font-family: Arial, Helvetica, sans-serif;
line-height: 1em;
color: #bebebe;
}
html {
background: transparent;
min-width: 980px;
height: 100%;
margin: 0;
padding: 0;
outline: 0;
vertical-align: top;
font-size: 100%;
}
div {
border: 0 none;
font-size: 100%;
margin: 0;
padding: 0;
border: 0;
outline: 0;
vertical-align: top;
}
a {
outline: none;
color: #11b6fb;
}
a:hover {
text-decoration: none;
}
/* ========================= Global properties END =============================== */
/* ========================= Global Structure START ============================== */
#main-tail {
background: url(../images/main-tail.gif) repeat 50% 204px;
}
#main-tail-top {
background: url(../images/main-tail-top.gif) repeat-x 50% 0%;
}
#main-tail-bot {
background: url(../images/main-tail-bot.gif) repeat-x 50% 100%;
}
#main {
width: 970px;
margin: 0 auto;
font-size: 0.75em;
}
header {
position: relative;
height: 217px;
}
section#content {
width: 100%;
}
footer {
height: 123px;
overflow: hidden;
}
/* ========================= Global Structure END ================================ */
/* ====================== Left & Right alignment START =========================== */
.fleft {
float: left;
}
.fright {
float: right;
}
ul.fright {
padding: 0 13px 0 0;
}
.col-1, .col-2, .col-3, .col-4 {
float: left;
overflow: hidden;
}
.block-1, .block-2, .block-3, .block-4 {
float: left;
overflow: hidden;
}
.aligncenter {
padding: 15px 0 0 0;
text-align: center;
}
.wrapper {
width: 100%;
overflow: hidden;
}
.clear {
clear: both;
font-size: 0%;
line-height: 0%;
height: 0;
}
/* ====================== Left & Right alignment END ============================= */
/* ============================== header START =================================== */
header strong {
display: block;
line-height: 1.333em;
font-size: 1em;
font-weight: normal;
color: #f0f0f0;
position: absolute;
top: 71px;
left: 157px;
}
#navi {
background: #11b6fb;
padding: 0 10px 0 14px;
position: absolute;
top: 0;
right: 1px;
}
#navi li {
float: left;
}
#navi li a {
background: #11b6fb;
float: left;
height: 32px;
padding: 0 10px 0 8px;
line-height: 32px;
text-decoration: none;
color: #fff;
}
#navi li a:hover {
color: #000;
}
#type {
position: absolute;
top: 108px;
left: 0;
}
#type li {
float: left;
padding: 0 0 0 1px;
}
#type li a {
float: left;
height: 47px;
overflow: hidden;
padding: 0 9px 0 9px;
line-height: 48px;
font-size: 1.583em;
text-decoration: none;
color: #6b6b6b;
}
#type li.act a {
background: #000;
color: #fff;
}
#type li a:hover {
background: #000;
color: #fff;
}
nav {
position: absolute;
top: 155px;
left: 10px;
}
nav ul {
overflow: hidden;
}
nav ul li {
float: left;
padding: 0 21px 0 0;
line-height: 50px;
font-size: 1em;
text-transform: uppercase;
color: #fff;
}
nav ul li a {
float: left;
height: 49px;
overflow: hidden;
text-decoration: none;
color: #fff;
}
nav ul li a:hover {
color: #11b6fb;
}
nav ul li.act a {
color: #11b6fb;
}
/* =============================== header END ==================================== */
/* ============================= content START =================================== */
#content {
background: url(../images/content.gif) repeat-y 0% 0%;
}
#content #indent {
padding: 13px 16px 16px 14px;
}
#content p {
padding: 0 0 18px 0;
line-height: 1.5em;
font-size: 1em;
color: #bebebe;
}
/* ============================== content END ==================================== */
/* ============================= JS START ===================================== */
#gallery {
position: relative;
width: 773px;
height: 575px;
overflow: hidden;
margin: 0 0 16px 0;
}
#faded {
width: 938px;
height: 467px;
}
ul.pagination {
position: inherit;
top: 0;
right: 0;
font-family: Verdana;
font-size: 13px;
}
ul.pagination li {
padding: 0 0 1px 0;
}
ul.pagination li a {
background: url(../images/pagination.gif) no-repeat 0% 0%;
display: block;
width: 206px;
height: 74px;
padding: 30px 25px 12px 40px;
overflow: hidden;
line-height: 1.0em;
font-size: 1em;
text-decoration: none;
color: #8b8b8b;
}
ul.pagination li a.extra {
background: url(../images/pagination-1.gif) no-repeat 0% 0%;
}
ul.pagination li.current a, ul.pagination li a:hover {
background-position: 0% -116px !important;
color: #1b1b1b;
}
ul.pagination li a strong {
display: block;
text-transform: uppercase;
color: #F90;
}
ul.pagination li.current a strong, ul.pagination li a:hover strong {
color: #fff;
}
/* ============================== JS END ====================================== */
/* =================== txt, links, lines, titles START =========================== */
h1 {
position: absolute;
top: 39px;
left: 3px;
}
h1 a {
background: url(../images/logo.gif) no-repeat 0% 0%;
display: block;
width: 151px;
height: 45px;
overflow: hidden;
}
h1 a span {
display: none;
}
h2 {
background: #11b6fb;
height: 45px;
margin: 0 0 1px 0;
padding: 0 0 0 19px;
overflow: hidden;
line-height: 42px;
font-size: 1.5em;
text-transform: uppercase;
color: #fff;
}
h3 {
background: #fff;
height: 45px;
margin: 0 0 1px 0;
padding: 0 0 0 18px;
overflow: hidden;
line-height: 44px;
font-size: 1.5em;
text-transform: uppercase;
color: #2f2f2f;
}
h4 {
background: #262626;
height: 45px;
margin: 0 0 1px 0;
padding: 0 0 0 17px;
overflow: hidden;
line-height: 44px;
font-size: 1.5em;
text-transform: uppercase;
color: #fff;
}
h5 {
padding: 0 0 7px 0;
line-height: 1.5em;
font-size: 1em;
text-transform: uppercase;
color: #fff;
}
h6 {
padding: 0 0 7px 0;
line-height: 1.5em;
font-size: 1em;
text-transform: uppercase;
color: #11b6fb;
}
h6 strong {
display: block;
padding: 0 0 20px 0;
}
.link {
background: #fff url(../images/arrow-2.gif) no-repeat 100% 13px;
float: right;
height: 31px;
padding: 0 18px 0 10px;
line-height: 28px;
font-weight: bold;
text-decoration: none;
color: #262626;
}
.link:hover {
background: #bebebe url(../images/arrow-2.gif) no-repeat 100% 13px;
}
.list {
overflow: hidden;
}
.list li {
background: url(../images/marker.gif) no-repeat 0% 9px;
padding: 0 0 0 12px;
line-height: 1.917em;
font-size: 1em;
color: #000;
}
.list li a {
color: #000;
}
.list-1 {
width: 100%;
padding: 0 0 19px 0;
overflow: hidden;
}
.list-1 li {
float: left;
width: 234px;
padding: 0 1px 0 0;
}
.list-1 li.last {
padding: 0;
}
.list-1 li a {
background: #2f2f2f;
display: block;
padding: 17px 20px 18px 19px;
line-height: 1.5em;
font-size: 1em;
text-decoration: none;
color: #bebebe;
}
.list-1 li a strong {
display: block;
padding: 0 0 10px 1px;
text-transform: uppercase;
color: #11b6fb;
}
.list-1 li a b {
background: url(../images/arrow.gif) no-repeat 100% 6px;
padding: 0 7px 0 7px;
color: #fff;
}
.list-1 li.extra a {
background: #262626;
}
.list-1 li a:hover {
background: #fff;
color: #6d6d6d;
}
.list-1 li a:hover b {
background: url(../images/arrow-1.gif) no-repeat 100% 6px;
color: #161616;
}
.list-2 {
width: 100%;
overflow: hidden;
}
.list-2 li {
width: 100%;
padding: 0 0 1px 0;
overflow: hidden;
vertical-align: top;
}
.list-2 li img {
float: left;
}
.list-2 li a {
background: #2f2f2f;
display: block;
width: 194px;
min-height: 108px;
height: auto !important;
height: 108px;
padding: 16px 20px 10px 21px;
float: left;
line-height: 1.5em;
font-size: 1em;
text-decoration: none;
color: #bebebe;
}
.list-2 li a strong {
display: block;
padding: 0 0 7px 0;
text-transform: uppercase;
color: #11b6fb;
}
.list-2 li a b {
background: url(../images/arrow.gif) no-repeat 100% 6px;
padding: 0 7px 0 7px;
color: #fff;
}
.list-2 li.extra a {
background: #262626;
}
.list-2 li a:hover {
background: #fff;
color: #6d6d6d;
}
.list-2 li a:hover b {
background: url(../images/arrow-1.gif) no-repeat 100% 6px;
color: #161616;
}
.list-3 {
overflow: hidden;
}
.list-3 li {
width: 100%;
padding: 0 0 1px 0;
overflow: hidden;
vertical-align: top;
}
.list-3 li a {
background: #11b6fb;
display: block;
min-height: 119px;
height: auto !important;
height: 119px;
padding: 15px 19px 0 19px;
line-height: 1.5em;
font-size: 1em;
font-weight: bold;
text-decoration: none;
text-transform: uppercase;
color: #fff;
}
.list-3 li a:hover {
background: #fff;
color: #11b6fb;
}
.list-4 {
width: 100%;
overflow: hidden;
}
.list-4 li {
width: 100%;
padding: 0 0 1px 0;
overflow: hidden;
vertical-align: top;
}
.list-4 li a {
background: #2f2f2f;
display: block;
min-height: 109px;
height: auto !important;
height: 109px;
padding: 15px 20px 10px 18px;
line-height: 1.5em;
font-size: 1em;
text-decoration: none;
color: #bebebe;
}
.list-4 li a strong {
display: block;
padding: 0 0 8px 0;
text-transform: uppercase;
color: #fff;
}
.list-4 li a b {
background: url(../images/arrow-3.gif) no-repeat 100% 6px;
padding: 0 7px 0 7px;
color: #11b6fb;
}
.list-4 li.extra a {
background: #262626;
}
.list-4 li a:hover strong {
color: #11b6fb;
}
.list-5 {
overflow: hidden;
}
.list-5 li {
background: url(../images/marker-1.gif) no-repeat 0% 9px;
padding: 0 0 0 12px;
line-height: 1.917em;
font-size: 1em;
color: #11b6fb;
}
.list-5 li a {
color: #11b6fb;
}
/* ==================== txt, links, lines, titles END ============================ */
/* ============================= forms START ===================================== */
#contact-form {
width: 100%;
overflow: hidden;
}
#login-form {
width: 342px;
height: 23px;
overflow: hidden;
position: absolute;
top: 44px;
right: 0;
}
#login-form b {
background: url(../images/login-input.gif) no-repeat 0% 0%;
display: block;
width: 83px;
height: 23px;
padding: 0 2px 0 0;
overflow: hidden;
float: left;
font-weight: normal;
}
#login-form b input {
background: none;
width: 69px;
height: 13px;
padding: 5px 7px 5px 7px;
border: none;
float: left;
font-family: Arial, Helvetica, sans-serif;
font-size: 0.917em;
color: #b8b8b8;
}
#login-form input#login-submit {
background: #f2f2f2;
width: 43px;
height: 23px;
border: none;
float: left;
margin: 0 7px 0 0;
font-family: Arial, Helvetica, sans-serif;
font-size: 0.917em;
font-weight: bold;
color: #171717;
cursor: pointer;
}
#login-form span {
float: left;
margin: -1px 0 0 0;
line-height: 1.091em;
font-size: 0.917em;
color: #f2f2f2;
}
#login-form span a {
text-decoration: none;
color: #f2f2f2;
}
#login-form span a:hover {
color: #b8b8b8;
}
#login-form em {
display: block;
width: 122px;
float: left;
line-height: 1.091em;
font-size: 0.917em;
font-style: normal;
color: #11b6fb;
}
#login-form em a {
text-decoration: none;
color: #f2f2f2;
}
#login-form em a:hover {
color: #b8b8b8;
}
#search-form {
background: url(../images/search-input.gif) no-repeat 0% 0%;
width: 263px;
height: 23px;
overflow: hidden;
position: absolute;
top: 83px;
right: 1px;
}
#search-form input {
background: none;
width: 198px;
height: 13px;
padding: 5px 7px 5px 7px;
border: none;
float: left;
font-family: Arial, Helvetica, sans-serif;
font-size: 0.917em;
color: #b8b8b8;
}
#search-form a {
background: #11b6fb;
width: 49px;
height: 23px;
overflow: hidden;
float: left;
margin: 0 0 0 2px;
line-height: 22px;
font-size: 0.917em;
font-weight: bold;
text-align: center;
text-decoration: none;
color: #fff;
}
#search-form a:hover {
color: #000;
}
/* ============================== forms END ====================================== */
/* ============================= other START ===================================== */
.pic-indent {
margin: 0 0 26px 0;
}
.info-box {
background: #262626;
margin: 0 0 1px 0;
}
.info-box .inner {
padding: 28px 20px 12px 20px;
}
.info-box-1 {
background: #11b6fb;
width: 100%;
overflow: hidden;
margin: 0 0 1px 0;
}
.info-box-1 .inner {
padding: 28px 20px 31px 19px;
}
.info-box-1 p {
padding: 0 0 14px 0 !important;
line-height: 1.5em !important;
font-size: 1em !important;
color: #fff !important;
}
.info-box-2 {
background: #fff;
width: 100%;
overflow: hidden;
margin: 0 0 1px 0;
}
.info-box-2 .inner {
padding: 15px 20px 33px 19px;
}
.privacy {
background: #262626;
padding: 28px 30px 21px 20px;
}
.privacy dl {
overflow: hidden;
}
.privacy dl dt {
padding: 0 0 12px 0;
line-height: 1.5em;
font-size: 1em;
font-weight: bold;
text-transform: uppercase;
color: #11b6fb;
}
.privacy dl dt a {
text-decoration: none;
color: #11b6fb;
}
.privacy dl dt a:hover {
text-decoration: underline;
}
.privacy dd {
padding: 0 0 22px 0;
line-height: 1.5em;
font-size: 1em;
color: #bebebe;
}
/* ============================== other END ====================================== */
/* ============================ footer START ===================================== */
footer .inner {
padding: 41px 20px 0 13px;
}
footer strong {
float: right;
line-height: 1.5em;
font-size: 1em;
color: #fff;
}
footer strong a {
text-decoration: none;
color: #11b6fb;
}
footer strong a:hover {
text-decoration: underline;
}
footer p {
float: right;
line-height: 1.5em;
font-size: 1em;
font-weight: bold;
color: #fff;
}
footer p a {
margin: 0 0 0 9px;
text-decoration: none;
color: #11b6fb;
}
footer p a:hover {
text-decoration: underline;
}
.type {
float: left;
padding: 0 0 3px 0;
}
.type li {
float: left;
padding: 0 21px 0 0;
line-height: 1.5em;
font-size: 1em;
color: #11b6fb;
}
.type li a {
text-decoration: none;
color: #11b6fb;
}
.type li.act a {
color: #fff;
}
.type li a:hover {
color: #fff;
}
.menu-bot {
float: left;
}
.menu-bot li {
float: left;
padding: 0 22px 0 0;
line-height: 1.5em;
font-size: 1em;
color: #757474;
}
.menu-bot li a {
text-decoration: none;
color: #757474;
}
.menu-bot li a:hover {
text-decoration: underline;
}
/* ============================= footer END ====================================== */
und hier der teil aus meiner html datei
PHP-Code:
<ul class="pagination">
<li> <a href="#" rel="0"> <strong>BLA BLA BLA BLA</strong> text text text text text text text text text text text text text text text text text... </a> </li>
<li> <a href="#" rel="1" class="extra"> <strong>BLA BLA BLA BLA</strong> text text text text text text text text text text text text text text text text text...</a> </li>
<li> <a href="#" rel="2"> <strong>BLA BLA BLA BLA</strong> text text text text text text text text text text text text text text text text text... </a> </li>
<li> <a href="#" rel="3" class="extra"> <strong>BLA BLA BLA BLA</strong> text text text text text text text text text text text text text text text text text... </a> </li>
</ul>
</div>
wäre toll wenn mir jemand helfen könnte
Grafiken werden verschoben (css)
Linear-Darstellung
