✔ Portfolio mit horizontaler Scrollbar

Das läuft alles über ein CMS.
Die Projekte / Seiten werden hier verwaltet:
http://www.grabup.com/uploads/a000342f416c8515d01ff4dd0ece0f40.jpg

Die CSS-Datei:
http://www.grabup.com/uploads/1e427fcf738ad401217714a6bf0009ab.jpg

Nochmal als Code:
Code: 
body { background-color:#fff; color: #000; font-family:Arial, Helvetica; font-size:12px; word-spacing:1px; margin:0px; line-height:1.5; height:100%; width:100%; }

/* MAIN CONTENT POSITIONING */
.header_img { position:absolute; top:100px; margin-left:100px; }
#content_container { position:relative; padding-left:270px; padding-top:225px; z-index:10; }
.nav_container { position:fixed; top:225px; left:100px; margin:0px; padding:0px; line-height:165%; white-space:nowrap; z-index:11; }
#nav_loadspin { position:fixed; top:8px; left:35px; display:none; z-index:50;  }
.pagination { left:740px; color:#999; font-size:11px; z-index:11; }
.toolset_backing { background-color:#fff; filter:alpha(opacity=25); -moz-opacity:0.25; opacity:0.25; }

/* SLIDESHOW */
#scrollBox {
position:relative;
overflow:hidden;
overflow-x:scroll;
height:500px;
width:200px;
border-top:1px solid #000;
border-bottom:1px solid #000;
white-space:nowrap;
}
#scrollBox ul {
position:absolute;
list-style:none;
white-space:nowrap;
}
#scrollBox ul li {
display:inline;
}



/* PROJECT CONTENT */
.project_title { font-family:Helvetica, Arial; font-size:24px; color: #000; font-weight:normal; line-height:1.5; padding-bottom:30px; }
.project_content { width:560px; color: #555; }
.project_content img { margin:0px 15px 15px 0px; }
.project_content #slideshow_container img { margin:0px; }
.project_content #slideshow_container { margin:0px 15px 15px 0px; }
.project_footer { clear:both; padding:30px 0px 0px 0px; font-size:11px; color:#999; }
.project_bottom { clear:both; width:670px; border-bottom:0px solid #ccc; margin:15px 0px; }
.project_index { float:right; margin-top:-1px; }
.tags { color:#999; }
blockquote { color:#666; margin-top:0px; margin-bottom:0px; }
.project_header { color:#000; font-size:11px; font-style:italic; margin:0px 0px 0px 0px; }
.project_views { font-style:italic; color:#999; }
.footer_title_type { font-weight:bold; color:#000; }
.cargo_link { position:fixed; bottom:15px; right:35px; font-family: arial; font-size:11px; color:#ccc; line-height:165%; z-index:99; }

h1 { font-size:22px; line-height:165%; }
h2 { font-size:16px; line-height:165%; }
h3 { font-size:14px; line-height:150%; }
.smallcaps { font-variant: small-caps; text-transform:lowercase; color:#666; }


/* THUMBNAIL STYLES */
.thumb_title, .thumb_title a, .thumb_title a:visited { text-align:center; color:#000; font-size:11px; font-weight:bold; margin:12px 0px 0px 0px; line-height:15px; overflow:hidden; white-space:nowrap; }
.thumb_tag, .thumb_tag a, .thumb_tag a:visited { text-align:center; color:#999; font-family:georgia; font-size:11px; font-style:italic; line-height:15px; text-decoration:none; }
.thumb_tag a:hover { text-decoration:underline; }
.thumb_tag.notitle { margin-top:12px; }
.project_thumb .hover { cursor: pointer; }
.project_thumb .hover .thumb_title .text { background:#ff6; padding:1px 2px 1px 2px; }
.project_thumb .hover .thumb_type .text {  }

.thumb_type .text a { text-decoration:none; }
.thumb_type .text a:hover { text-decoration:underline; }

/* SLIDESHOW STYLES */
.slideshow_nav { color:#999; font-size:11px; padding-bottom:10px; }
.slideshow_count { color:#999; font-size:11px; }
.slideshow_wrapper { margin:0px 15px 15px 0px; }
.slideshow_wrapper img { margin:0px; }

/* TAG VIEW STYLE */
.view_tag_info { font-size:11px; color:#999; padding-left:3px; }

.nav_follow { color:#999; font-size:11px; z-index:11; }


/* #################### LINK STYLES START #################### */

/* BODYCOPY */
.bodycopy a { color:#000; text-decoration:underline; }
.bodycopy a:hover { color:#000; background:#ff6; text-decoration:none; }
.bodycopy a:active { color:#fff; background:#000; }

.blue a { color:#06f; text-decoration:none; }
.blue a:hover { color:#000; background:#ff6; text-decoration:underline; }
.blue a:active { color:#fff; background:#000; }

.cargo_link a { color:#999; text-decoration:underline; }
.cargo_link a:hover { color:#000; text-decoration:underline; }
.cargo_link a:active { color:#fff; background:#000; }

/* NAV LIST */
.project_link a { text-decoration:none; color:#000; font-size:11px; padding:2px 3px 3px 3px; }
.project_link a:hover { color:#000; background:#c2c2c2; }
.project_link a:active { color:#f2f2f2; background:#000; style:bold; }

.page_link a { text-decoration:none; color:#999; font-size:11px; padding:2px 3px 3px 3px; }
.page_link a:hover { color:#222; background:#c2c2c2; }
.page_link a:active { color:#f2f2f2; background:#000; }

.nav_active a { text-decoration:none; font-size:11px; padding:2px 3px 3px 3px; color:#f2f2f2; background:#000; }
.nav_active a:active  { color:#f2f2f2; background:#000; }

.pagination a { color:#00AF8A; font-size:11px; padding:2px 3px 3px 3px; }
.pagination a:hover { color:#222; background:#ff6; }
.pagination a:active { color:#f2f2f2; background:#000; }

.slideshow_nav a {  }
.slideshow_nav a:hover {  }
.slideshow_nav a:active {  }

/* PROJECT HEADER */
.project_header .project_index a { text-decoration:underline; color:#999; padding:2px 3px 3px 3px; }
.project_header .project_index a:hover { text-decoration:none; background:#ff6; color:#000; }

.project_header .project_index a:active { color:#fff; background:#000; }
.project_header .project_index a:visited {  }


/* PROJECT FOOTER */
.project_footer .permalink a { text-decoration:underline; color:#999; font-style:italic; }
.project_footer .permalink a:hover { background:#ff6; color:#000; }
.project_footer .permalink a:active { color:#fff; background:#000; }
.project_footer .permalink a:visited {  }

.project_footer .editlink a { color:#0066ff; font-style:italic; }
.project_footer .editlink a:hover { color:#000; background:#ff0; }
.project_footer .editlink a:active { color:#fff; background:#000; }
.project_footer .editlink a:visited {  }

.view_tag_info a { color:#0066ff; }
.view_tag_info a:hover { color:#000; background:#ff0; }
.view_tag_info a:active { color:#fff; background:#000; }
.view_tag_info a:visited {  }

.nav_follow a { color:#999; font-size:11px; padding:2px 3px 2px 3px; }
.nav_follow a:hover { color:#222; background:#ff6; }
.nav_follow a:active { color:#fff; background:#000; }


.tags a { color:#000; text-decoration:none; }
.tags a:hover { background:#ff6; text-decoration:none; }
.tags a:active { color:#fff; background:#000; }
.tags a:visited {  }

.project_top a { text-decoration:underline; color:#999; font-style:italic; }
.project_top a:hover { }
.project_top a:active {  }
.project_top a:visited {  }

.project_close a { text-decoration:underline; color:#999; font-style:italic; }
.project_close a:hover {  }
.project_close a:active {  }
.project_close a:visited {  }

/* #################### LINK STYLES END #################### */
 
Den CSS-Code brauchst du mir nicht zu zeigen, den kann ich nämlich selber in vollem Umfang einsehen, nur entdecke ich nirgends den HTML-Code der Scrollbox, um in deren Quellcode einen Blick werfen zu können.

Und wie gesagt, "Web Developer" gibt mir in den Grafikinfos zur Seite nur die eine Grafikdatei http://farm4.static.flickr.com/3644/3484822350_85372b9411.jpg aus, was ganz einfach heißt, dass nur sie im Dokument existiert.

Keine Ahnung, was "dein" CMS da treibt.

mfg Maik
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück