3 Spalten fixed width css layout

sharepointkb · #1 (**permalink**) 26.02.2010, 12:50

Ich habe im Internet folgendes 3 Spalten Layout gefunden:

The Blog Style 3 column Liquid Layout. Pixel widths. Cross-Browser. Equal Height Columns.

Das ist zwar scheinbar der Holy Grail unter den 3 Spalten Layouts, jedoch ist das ganze auf 100% ausgelegt und die erste Spalte passt sich dynamisch an die Seitenbreite an.

Ich habe es kopiert und in eine einfache HTML Seite eingefügt und es funktioniert, aber ich möchte ein zwei Änderungen noch reinbauen:

- das ganze soll sich NICHT 100% an die Seitenbreite anpassen sondern sollte 950px im ganzen breit sein

- das ganze sollte mittig auf dem bildschirm angeordnet werden

- 1. spalte sollte 335 px breit sein und ein rechtes margin von 115px haben

- 2. spalte sollte 300px breit sein und ein rechtes margin von 40px haben

- 3. spalte sollte 160px breit sein

Ich versuche es nun seit Tagen zu modifizieren aber ich verzeweifle und komme nicht weiter. Es ist einfach zu kompliziert. ich blick da nicht ganz durch.

Ich habe hier auch noch eine kleine Skizze gemacht von meiner Vorstellung:

http://i48.tinypic.com/mn22co.jpg

Kann mir jemand helfen? Oder mir sagen im Ansatz wo es was zu ändern gibt, damit ich das so umsetzen kann wie ich es mir vorstelle? Oder vielleicht sogar einen anderen Vorschlag machen?

Gruß
Jones

Carolin · #2 (**permalink**) 26.02.2010, 13:02

Mittig und 950px:

Code:

body {
   background:#FFFFFF none repeat scroll 0 0;
   border:0 none;
   font-size:90%;
   margin:0 auto;
   max-width:950px;
   min-width:600px;
   padding:0;
}

sharepointkb · #3 (**permalink**) 26.02.2010, 14:05

Wunderbar das funktioniert schonmal!

Jetzt fehlt nur noch die fixen Spaltenbreiten mit dem margin. Hoffe das jemand auch dazu eine Lösung hat!

Ich glaube eine zusätzliche Schwierigkeit ist, dass alle Spalten dieselbe Höhe haben. Aber das brauche ich NICHT! Die Spalten können ruhig unterschiedlich hoch sein!

Danke.

sharepointkb · #4 (**permalink**) 26.02.2010, 15:54

Ich habe mal jetzt so etwas super simples versucht zu machen und würde gerne die Meinung von Experten einholen. Theoretisch entspricht das meinen Anforderungen, nur wie schaut es aus von der Kompatibilität und würdet ihr das auch so machen? Oder habe ich an der einen oder anderen Stelle was falsches gemacht, was vergessen etc.

HTML-Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>The Blog</title>
    <style media="screen" type="text/css">

body {margin:0 auto;padding:0;border:0 none;background:#FFFFFF none repeat scroll 0 

0;max-width:950px;min-width:950px;font-size:12px;text-align:center;}
            
#wrapper {width:950px;}
            
#header {clear:both;float:left;width:950px;background-color:Red;margin-bottom:10px;}
            
#col1 {float:left;width:335px;margin-right:115px;background-color:yellow;text-align:left;}
#col2 {float:left;width:300px;margin-right:40px;background-color:green;text-align:left;}
#col3 {float:left;width:160px;background-color:gray;text-align:left;}

#footer {clear:both;width:950px;background-color:blue;margin-top:10px;}

    </style>
</head>
<body>

<div id="wrapper">
    <div id="header"></div>
        <div id="col1">columns 1</div>
        <div id="col2">columns 2</div>
        <div id="col3">columns 3</div>
     <div id="footer"></div>
</div>

</body>
</html>

Walter IT-Services · #5 (**permalink**) 27.02.2010, 03:15

Schaut sehr gut aus.
Würde ich genauso machen.

sharepointkb · #6 (**permalink**) 27.02.2010, 20:00

Danke. Habe aber noch ein kleines Problem. In den "oberen" Bereichen kann ich keine Links anklicken oder Bereich/Text markieren. Irgend etwas stimmt nicht. Es ist noch was falsch! Aber was.

Das ist mein Code:

HTML-Code:

/*   
Theme Name: b
Theme URI: http://www.sharepointkb.net
Description: SharepointKB
Author: Yavuz Bogazci
Author URI: http://www.sharepointkb.net
Template: b
Version: 1.0
.
General comments/License Statement if any.
.
*/
body {font-family:Arial, Helvetica, Sans-Serif; font-size:12px; margin:0 auto; padding:0; background-color:#fff; min-width:950px;}
#wrapper {width:950px; background:#fff; margin:0 auto; padding:0;}
#header {position:relative;width:950px;height:100px;}
#footer {position:relative;width:950px;height:100px;}

.cleaner {clear:both}

#story {float:left;width:335px;margin-right:115px;text-align:left;}
#sidebar_l {float:left;width:300px;margin-right:40px;text-align:left;}
#sidebar_r {float:left;width:160px;text-align:left;}

h2 a, h2 a:visited {font-size:12px;font-weight:bold;text-decoration:none;color:#000;}
h2 a:hover {}

.widget_r h2 {font-size:12px;fon-weight:bold;}

.widget_l h2 {font-size:12px;fon-weight:bold;}

PHP-Code:


			
<?php

    remove_filter('the_excerpt', 'wpautop');

?>



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta name="robots" content="index, follow">

<meta http-equiv="author" content="Yavuz Bogazci" />

<meta name="copyright" content="Copyright (c)2010 Yavuz Bogazci. All Rights Reserved." />

<meta name="description" content="Yavuz Bogazci's Microsoft Sharepoint Blog. Alles rund um das Thema Microsoft Sharepoint. Von der Administration bis hin zur Programmierung." />

<meta name="keywords" content="Microsoft, Sharepoint, Programmierung, Entwicklung, Yavuz, Bogazci, 2007, 2010, Administration, .Net, VB.Net, C#, Visual, Studio, 2008, Office, InfoPath, Designer, CSS, HTML, JavaScript, jQuery, AJAX, ASP.Net" />

<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />

<meta name="generator" content="WordPress <?php bloginfo('version'); ?>" /> <!-- leave this for stats -->

<meta name="google-site-verification" content="DWhogMaKDyAZD2hRpa25hwGh0AP_RxmmlN8ncHvIXjQ" />

<title>



<?php 

    if (function_exists('is_tag') && is_tag()) { 

        echo 'Tag Archive for &quot;'.$tag.'&quot; - '; 

    } elseif (is_archive()) { 

        wp_title(''); echo ' Archive - '; 

    } elseif (is_search()) { 

        echo 'Search for &quot;'.wp_specialchars($s).'&quot; - '; 

    } elseif (!(is_404()) && (is_single()) || (is_page())) { 

        wp_title(''); echo ' - '; 

    } elseif (is_404()) {

        echo 'Not Found - '; 

    }

    bloginfo('name'); 

?>



</title>

<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />

<link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS Feed" href="<?php bloginfo('rss2_url'); ?>" />

<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />

<link rel="Shortcut Icon" href="<?php bloginfo('template_url'); ?>/favicon.ico" />



<?php wp_head(); ?>



</head>



<body>



<div id="wrapper">



    <div id="header">

        <!-- hier kommt der header hin -->

        &nbsp;

    </div>

    

    <div id="storywrapper">

        <div id="story">

            <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>    

            

            <div class="post">

                <h2><a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></h2>

                

                <div class="entry">

                    <?php the_excerpt(); ?>

                </div>    

            </div> <!-- close post div -->

            

            <?php endwhile; else: ?>

            <p><?php _e('Sorry, no posts matched your criteria.'); ?></p>

            <?php endif; ?>

        </div>

        

        <!-- hier kommt die sidebar hin -->

        

        <div id="sidebar_l">

            <h1><?php echo get_bloginfo('name');?></h1>

            <p style="font-size:10px;">Hier kommt die Blog-Beschreibung hin ...</p>

            <div class="widget_r">

                <h2>SIDEBLOG</h2>

                <div></div>

            </div>

            <div class="widget_r">

                <h2>TWITTER</h2>

                <div></div>

            </div>

            <div class="widget_r">

                <h2>POPULAR POSTS</h2>

                <div></div>

            </div>

            <div class="widget_r">

                <h2>DELICIOUS</h2>

                <div></div>

            </div>

        </div>

        

        <div id="sidebar_r">

            <p>asd</p>

            <div class="widget_l">

                <h2>STATICCONTENT</h2>

                <ul>

                    <li>1</li>

                    <li>2</li>

                    <li>3</li>

                </ul>

            </div>

            <div class="widget_l">

                <h2>SEARCH</h2>

                <ul>

                    <li>1</li>

                    <li>2</li>

                    <li>3</li>

                </ul>

            </div>

            <div class="widget_l">

                <h2>CATEGORIES</h2>

                <ul>

                    <li>1</li>

                    <li>2</li>

                    <li>3</li>

                </ul>

            </div>

            <div class="widget_l">

                <h2>BLOGSTATS</h2>

                <div></div>

            </div>

            <div class="widget_l">

                <h2>META</h2>

                <ul>

                    <li>1</li>

                    <li>2</li>

                    <li>3</li>

                </ul>

            </div>

            <div class="widget_l">

                <div>asdsad</div>

            </div>

        </div>

    </div>    

        

    <div id="footer">

        <!-- hier kommt der footer hin -->

    </div>



</div>



<script type="text/javascript">

var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");

document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));

</script>

<script type="text/javascript">

try {

var pageTracker = _gat._getTracker("UA-12543624-1");

pageTracker._trackPageview();

} catch(err) {}</script>



</body>

</html>

Hier schonmal eine Testseite:

ww.sharepointkb.net

sharepointkb · #7 (**permalink**) 28.02.2010, 09:25

Keiner eine Idee?

sharepointkb · #8 (**permalink**) 28.02.2010, 10:11

Gelöst!

Manfred62 · #9 (**permalink**) 28.02.2010, 11:49

Zitat:

Zitat von sharepointkb

Gelöst!

Schön für dich. Weniger schön für andere

Eventuell hat jemand anderes auch mal ein ähnliches Problem?
Also nicht nur nehmen, sondern auch geben (in deinem Fall: die Lösung).

Manfred

bogazci · #10 (**permalink**) 28.02.2010, 20:00

Lösung:

css

HTML-Code:

body {font-family:Arial, Helvetica, Sans-Serif; font-size:12px; margin:0 auto; padding:0; background-color:#fff; min-width:950px;}
#wrapper {width:950px; background:#fff; margin:0 auto; padding:0;}
#header {width:950px;height:100px;position:relative;margin-bottom:10px;}
#storywrapper {width:950px;padding:0;margin:0;}

#story {float:left;width:335px;margin-right:115px;text-align:left;}
#sidebar_l {float:left;width:300px;margin-right:40px;text-align:left;}
#sidebar_r {float:left;width:160px;text-align:left;}

.cleaner {clear:both}

#footer {width:950px;height:100px;margin-top:20px;}

html

HTML-Code:

<div id="wrapper">

    <div id="header">
        <br /><span style="font-size:18px;">beta</span>
    </div>
    
	<div id="storywrapper">
	    <div id="story">
			<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>    
            
            <div class="post">
                <h2><a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></h2>
                
                <div class="entry">
                    <?php the_excerpt(); ?>
                </div>
                
                <div class="postmeta">
                    Posted on <?php the_time('d. M Y'); ?> in <?php the_category(', '); ?>.
                </div>  
            </div> <!-- close post div -->
            
            <?php endwhile; else: ?>
            <p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
            <?php endif; ?>
        </div>
        
        <div id="sidebar_l">
        	<h1><?php echo get_bloginfo('name');?></h1>
        	<p style="font-size:10px;"><b>SharepointKB</b> bietet Informationen rund um das Thema Microsoft Office Sharepoint Server 2007 und Microsoft Sharepoint 2010. Der Schwerpunkt liegt in der Entwicklung/Programmierung auf Basis des Sharepoint Servers aber auch Administrative Themen, News etc. werden hier gepostet. Die Posts snd relativ unregelm&auml;&szlig;ig und sind von Niveau her auf Anf&auml;nger und Fortgschrittenen zugeschnitten.</p>
            <div class="widget_l">
            	<h2>TWITTER</h2>
                <div><?php aktt_latest_tweet(); ?></div>
            </div>
        </div>
        
        <div id="sidebar_r"><span style="font-size:12px;font-weight:bold;">ABOUT</span>
        	<p>This is the Sharepoint blog</p>
        </div>
    </div>    
        
    <div class="cleaner"></div>
        
    <div id="footer"></div>

</div>

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
div-höhe? - Hauptcontainer über ganze Seite will nicht...	AndMei	CSS	5	13.12.2010 14:43
z-index hoch, dennoch grafik nicht ganz oben	bergg	CSS	6	27.10.2010 16:02
Problem mit einem 3D-Effekt	moep0710	CSS	12	12.06.2010 14:30
Untermenü im IE	nici	CSS	10	22.06.2009 21:19
problem mit 2 spalten css layout	sonnengott	CSS	17	11.12.2008 14:21