Frage stellen
ich versuche gerade unsere Homepage etwas professioneller zu gestallten und habe dafür eine freie CSS-Vorlage aus dem Internet geladen. Bisher komme ich durch Probieren und Nachlesen ganz gut zurecht. Nur habe ich grad ein Problem, bei dem ich selber keine Lösung finde....
Hier mal der Code der Website:
- Code: Alles auswählen
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="description" content="Your description goes here" />
<meta name="keywords" content="your,keywords,goes,here" />
<meta name="author" content="Your Name / Original design by Andreas Viklund - http://andreasviklund.com/" />
<link rel="stylesheet" type="text/css" href="andreas00.css" media="screen,projection" />
<title>andreas00 v2.0 | A free website template...</title>
</head>
<body>
<div id="wrap">
<div id="header">
<h1><a href="#">andreas00 v2.0</a></h1>
<p><strong>A free website template...</strong></p>
</div>
<div id="leftside">
<h2 class="hide">Site menu:</h2>
<ul class="avmenu">
<li><a class="current" href="index.html">First page</a></li>
<li><a href="styles.html">Included styles</a></li>
<li><a href="2-columns.html">2 columns</a></li>
<li><a href="3-columns.html">3 columns</a></li>
<li><a href="themes.html">Theme versions</a></li>
</ul>
<div class="announce">
<h2>Latest news:</h2>
<p><strong>Jan 29, 2007:</strong><br />
Updated to v2.0 with a few bugfixes and refreshments, an the usual update of the default content.</p>
<p class="textright"><a href="#">Sample link »</a></p>
</div>
</div>
<div id="extras">
<h2>Information:</h2>
<p>This template includes a lot of additional styles and layout variations in the stylesheet. To see these, use the navigation menu to view the different pages and layout examples. It also includes links to theme versions for different CMS:s!</p>
<h2>Sample links:</h2>
<ul>
<li><a href="http://andreasviklund.com/templates/commercial/">4Templates</a></li>
<li><a href="http://andreasviklund.com/wordpress-themes/">WordPress themes</a></li>
<li><a href="http://jokkmokk.biz/">Made in Jokkmokk</a></li>
</ul>
<h2>Search box:</h2>
<form action="get" id="searchbox">
<div>
<label for="searchform">Find:</label> <input type="text" value="(demo only)" name="searchform" id="searchform" /> <input type="hidden" id="searchsubmit" value="(demo only)" />
</div>
</form>
<h2>Version:</h2>
<p>andreas00 v2.0<br />
(Jan 29, 2007)</p>
</div>
<div id="content">
<h2>andreas00 - a free website template!</h2>
<p>This is a free XHTML/CSS-based website template, that anyone may use for any purpose without any obligations or limitations. It was originally based on the <a href="http://andreasviklund.com/templates/">andreas01</a> template to which andreas00 added requested features such as a 2-column layout variation and support for sub-pages in the main menu - features that were later added into andreas01 as well. But there are also other small modifications and a few extras, like the background images in the menu buttons. I hope that you like what you see and that you find the template to be easy to work with. That is what it was made for!</p>
<img src="img/test.jpg" height="100" width="125" class="left" alt="Example content image" />
<p>If you use this template, I kindly ask you to leave the credits and the link to my website in the footer since it is a nice way of giving something back to the template designer. But that is only a friendly request, not any obligation.</p>
<h3>Other versions and additional resources</h3>
<p>This template is also available as a <a href="http://andreasviklund.com/wordpress-themes/">theme for WordPress</a> and it has been ported to a number of <a href="themes.html">other blogs and CMS</a> as well. New theme versions will be announced on <a href="http://andreasviklund.com/">my website</a> whenever a new port is released.</p>
</div>
<div id="footer">
<p>Copyright © 2007 Your Name</p>
</div>
</div>
</body>
</html>
und hier die CSS-Datei:
- Code: Alles auswählen
body {background:url(img/bg.gif) repeat-y top center #eaeaea; color:#3a3a3a; font:76% Verdana,Tahoma,Arial,sans-serif; margin:0 auto; padding:0;}
/* Main layout and header */
#wrap {background:#fff; color:#303030; margin:0 auto; padding:1px 5px; width:760px;}
#header {background:url(img/front.jpg) no-repeat bottom left #fff; color:#505050; height:250px; margin:0 0 10px; padding:0;}
#header h1 {font-size:2.5em; font-weight:400; letter-spacing:-2px; margin:0 0 4px 15px; padding:15px 0 0;}
#header h1 a,#header h1 a:hover {font-weight:400; padding:0;}
#header p {font-size:1.1em; letter-spacing:-1px; margin:0 0 20px 15px; padding:0 0 0 3px;}
/* Left sidebar and menu */
#leftside {clear:left; float:left; margin:0 0 10px; padding:0; width:150px;}
#leftside ul.avmenu {list-style:none; margin:0 0 18px; padding:0; width:150px;}
#leftside ul.avmenu li {display:inline; padding:0; width:150px;}
#leftside ul.avmenu li a {background:url(img/menubg.gif) repeat-x bottom left #f4f4f4; border-bottom:1px solid #d8d8d8; border-left:4px solid #ccc; border-right:1px solid #d8d8d8; border-top:1px solid #d8d8d8; color:#505050; float:left; font-size:1em; font-weight:700; margin-bottom:5px; padding:5px 1px 5px 5px; text-decoration:none; width:138px;}
#leftside ul.avmenu li a:hover,#leftside ul.avmenu li a.current {background:url(img/menubg2.gif) repeat-x bottom left #eaeaea; border-bottom:1px solid #b0b0b0; border-left:4px solid #505050; border-right:1px solid #b0b0b0; border-top:1px solid #b0b0b0; color:#505050;}
#leftside ul.avmenu ul {font-size:0.9em; margin:0 0 0 15px; padding:0 0 5px 0; width:133px;}
#leftside ul.avmenu ul a {padding:3px 1px 3px 5px; width:123px;}
#leftside ul.avmenu ul ul {font-size:1em; width:120px;}
#leftside ul.avmenu ul ul a {width:108px;}
#leftside h2 {font-size:1.5em; font-weight:400;}
#leftside .announce {background:url(img/menubg.gif) repeat-x bottom left #f4f4f4; border-bottom:1px solid #d8d8d8; border-left:4px solid #ccc; border-right:1px solid #d8d8d8; border-top:1px solid #d8d8d8; clear:left; color:#505050; line-height:1.3em; margin:10px 0; padding:5px 5px 5px; width:134px;}
#leftside p,.announce p {font-size:0.9em;}
/* Right sidebar */
#extras {float:right; margin:0 0 10px; padding:0; width:140px;}
#extras p,#extras ul {font-size:0.9em; line-height:1.3em; margin:0 0 1.5em; padding:0;}
#extras li {list-style:none; margin:0 0 6px; padding:0;}
#extras h2 {font-size:1.6em; font-weight:400; letter-spacing:-1px; margin:0 0 6px;}
/* Main content variations */
#content {line-height:1.5em; margin:10px 150px 10px 160px; padding:0; text-align:left;}
#contentwide {line-height:1.5em; margin:10px 0 10px 160px; padding:0; text-align:left;}
#content h2,#contentwide h2 {font-size:1.8em; font-weight:400; letter-spacing:-1px; margin:8px 0 10px; padding:0;}
#content h3,#contentwide h3 {font-size:1.5em; font-weight:400; margin:6px 0; padding:0;}
#content img,#contentwide img {background:#ccc; border:4px solid #f0f0f0; color:#303030; display:inline; padding:1px; margin:0 10px 5px 0;}
#content ul,#content ol,#contentwide ul,#contentwide ol {margin:0 0 16px 20px; padding:0;}
#content ul ul,#content ol ol,#contentwide ul ul,#contentwide ol ol {margin:2px 0 2px 20px;}
#content li,#contentwide li {margin:0 0 2px 10px; padding:0 0 0 4px;}
/* Footer */
#footer {background:#fff; border-top:2px solid #dadada; clear:both; color:gray; font-size:0.9em; margin:0 auto; padding:8px 0; text-align:center; width:760px;}
#footer p {margin:0; padding:0;}
#footer a {background:inherit; color:gray; font-weight:400; text-decoration:none;}
#footer a:hover {text-decoration:underline;}
/* Links and paragraphs */
a {background:inherit; color:#166090; text-decoration:none; font-weight:700;}
a:hover {background:inherit; color:#286ea0; text-decoration:underline;}
a img {border:0;}
p {margin:0 0 16px;}
blockquote {background:url(img/menubg.gif) repeat-x bottom left #f4f4f4; border-bottom:1px solid #d8d8d8; border-left:4px solid #ccc; border-right:1px solid #d8d8d8; border-top:1px solid #d8d8d8; color:#505050; margin:16px; padding:7px 7px 7px 11px;}
blockquote p {font-size:1.1em; line-height:1.3em; margin:0;}
/* Tables and forms */
table {border:1px solid #d8d8d8; border-collapse:collapse; line-height:1.3em; width:95%; margin:0 0 16px; padding:0;}
caption {font-size:1.5em; font-weight:400; margin:0; padding:6px 0 8px; text-align:left;}
th {background:url(img/menubg2.gif) repeat-x bottom left #eaeaea; color:#505050; padding:7px; text-align:left;}
td {background:url(img/menubg.gif) repeat-x bottom left #f4f4f4; color:#303030; font-size:0.9em; padding:7px; text-align:left;}
input,textarea {border:1px solid #ccc; font-family:Verdana,Tahoma,Arial,Sans-Serif; font-size:1em; margin:0; padding:4px;}
label {margin:2px;}
input {width:200px;}
textarea {width:400px;}
/* Search box */
#searchbox label,.hide {display:none;}
#searchbox {margin:6px 0 16px; padding:0;}
#searchform {background:#fff; border:1px solid #ccc; color:#505050; font-size:0.9em; padding:4px; width:116px;}
/* Various classes */
.announce h2 {margin:0 0 10px; padding:0;}
.textright {margin:-10px 0 4px; text-align:right;}
.center {text-align:center;}
.small {font-size:0.8em;}
.large {font-size:1.3em;}
.highlighted {background:#f0f0f0; border:1px solid #b0b0b0; color:#303030; padding:3px;}
.button {background:url(img/menubg.gif) repeat-x bottom left #f4f4f4; border-bottom:1px solid #d8d8d8; border-left:4px solid #ccc; border-right:1px solid #d8d8d8; border-top:1px solid #d8d8d8; color:#505050; font-weight:700; margin:0 0 15px; padding:7px 7px 7px 11px; width:120px;}
.left {float:left; margin:10px 10px 5px 0;}
.right {float:right; margin:10px 0 5px 10px;}
Hier mal das Original hochgeladen:
http://web539.server8.web4a.de/andreas00/index.html
Ich möchte rechts neben dem Schatten, also im grauen Hintergrund, eine "vierte Reihe" erstellen. Es sollen dort von oben nach unten kleine Bilder direkt linksbündig an den rechten Rand.
Ich hoffe es ist zu verstehen
und würde mich freuen, falls mir jemand weiterhelfen kann.Vielen Dank und Grüße
Marie
Vielen Dank! Hat auf Anhieb funktioniert!
