4 Spalte integrieren

marielou · #1 (**permalink**) 06.09.2010, 17:41

Hallo

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:

HTML-Code:

<!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:

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:

andreas00 v2.0 | A free website template...

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

heiko_rs · #2 (**permalink**) 06.09.2010, 17:49

Soll sich die horiz. Zentrierung der Website dadurch ändern, oder behält sie die jetzige Position?

marielou · #3 (**permalink**) 06.09.2010, 17:56

... oh... ging ja schnell die erste antwort

ich möchte die Zentrierung so behalten!
Ich möchte es zwar ingesamt noch einen Tick breiter machen, aber diese neue Spalte soll bezgl. der Zentrierung nicht dazugerechnet werden.

heiko_rs · #4 (**permalink**) 06.09.2010, 18:00

Dann würde ich #wrap position: relative; geben, und ein darin enthaltenes div (mit den Bildern) per position: absolute; sowie top & left an die gewünschte Stelle bringen (außerhalb von #wrap).

marielou · #5 (**permalink**) 06.09.2010, 18:09

OK! Hört sich gut an - aber ich bin leider blutiger Anfänger...

Muß ich jetzt am bestehenden Code was ändern oder nur hinzufügen?
Kannst Du ein kurzes Beispiel machen?

Danke!

heiko_rs · #6 (**permalink**) 06.09.2010, 18:22

1. #wrap hat im CSS bereits eine Regel - dieser fügst Du position: relative; hinzu.
2. Dann schreibst Du im HTML Dein neues div (mit den Bildern) an eine Stelle, die Dir sinnvoll erscheint, und gibst ihm eine ID.
3. Und schließlich schreibst Du dem Bilder-div eine neue Regel im CSS, die position: absolute; sowie passende Werte für top & left enthält.

marielou · #7 (**permalink**) 06.09.2010, 21:14

Vielen Dank

hat geklappt!!

marielou · #8 (**permalink**) 10.09.2010, 15:25

Hallo.... jetzt hab ich doch noch ein Problem...

Ich möchte den Content-Teil der Seite jetzt natürlich unterschiedlich befüllen. Wenn ich einfach einen fließenden Text ohne viel Spalten ect. mache, klappt das einwandfrei... Will ich aber den Text formatieren, so das es zwei Spalten ergibt, verlängert sich plötzlich der Footer-Bereich?!

Ich habe in der jeweiligen Seite dazu folgendes im Head-Bereich eingegeben:

Code:

<style type="text/css"><!--
 #spalte3 {border:1px solid black; position:absolute; left:160px; top:25px; width:500px; height:400px;}
 #spalte1 {border:0px solid black; position:absolute; left:160px; top:400px; width:290px; height:400px;}
 #spalte2 {border:1px solid black; position:absolute; left:475px; top:400px; width:220px; height:400px;}
 --></style>

dann unten bei "content"

Code:

<div id="content">
          <div id="spalte3">
         Video
        </div>
          <div id="spalte1">
         Text in Spalte 1
        </div>
        <div id="spalte2">
         Text in Spalte 2
        </div>
  </div>

also so

Die Spalten würden schon paßen, aber eben der Footer-Bereich is plötzlich verlängert - der Text schreib also über copyright hinaus und verlängert das ganze!

Was habe ich denn falsch gemacht?

Vielen Dank für Hilfe
Marie

heiko_rs · #9 (**permalink**) 10.09.2010, 18:24

Zugunsten variabler Höhen solltest Du jegliches pos. abs. rauswerfen und stattdessen float & clear verwenden.

marielou · #10 (**permalink**) 14.09.2010, 12:28

OK, hat funktioniert!

Nun stehe ich aber schon wieder vor einem Problem.

Das ursprüngliche Template habe ich hochgeladen andreas00 v2.0 | A free website template...

Ich möchte zwischen dem letzten Navigationspunkt (theme versions) und der anschließenden Box (Latest news) einen größeren Abstand.
Ich habe schon vieles ausprobiert. Aber entweder tut sich gar nichts, oder alle Abstände, also auch die zwischen den Navigationspunkten, vergrößern sich.

In meinem ersten Post habe ich ja die html-datei und die css-datei eingestellt.
Vielleicht kann mir jemand weiterhelfen?

Danke, Marie

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Tabellenspalten entfernen	Rico	CSS	16	01.07.2011 17:23
spalte nimmt nicht richtige breite ein	mmiethe79	CSS	0	28.07.2008 00:46
floaten von divs ohne breite	dany	CSS	18	27.03.2008 11:34
Fuss überdeckt rechte Spalte: Lösung gefunden!	Savigny	CSS	14	07.05.2004 12:54
Nachtrag: rechte Spalte z.T. durch Fuss-div überdeckt	Savigny	CSS	2	04.05.2004 19:36