zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden 3 Spalten fixed width css layout

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 26.02.2010, 13:50
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 26.02.2010
Beiträge: 7
sharepointkb befindet sich auf einem aufstrebenden Ast
Standard 3 Spalten fixed width css layout

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
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 26.02.2010, 14:02
Benutzerbild von Carolin
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 26.11.2007
Beiträge: 232
Carolin wird schon bald berühmt werden
Standard

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;
}

Geändert von Carolin (26.02.2010 um 14:52 Uhr)
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 26.02.2010, 15:05
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 26.02.2010
Beiträge: 7
sharepointkb befindet sich auf einem aufstrebenden Ast
Standard

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.

Geändert von sharepointkb (26.02.2010 um 16:26 Uhr)
Mit Zitat antworten
  #4 (permalink)  
Alt 26.02.2010, 16:54
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 26.02.2010
Beiträge: 7
sharepointkb befindet sich auf einem aufstrebenden Ast
Standard

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>
Mit Zitat antworten
  #5 (permalink)  
Alt 27.02.2010, 04:15
Michael Walter
XHTMLforum-Mitglied
 
Registriert seit: 16.02.2010
Ort: Berlin
Beiträge: 237
Walter IT-Services befindet sich auf einem aufstrebenden Ast
Standard

Schaut sehr gut aus.
Würde ich genauso machen.
__________________
Walter IT-Services
Michael Walter

http://www.walter-it.de
http://blog.walter-it.de
Mit Zitat antworten
  #6 (permalink)  
Alt 27.02.2010, 21:00
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 26.02.2010
Beiträge: 7
sharepointkb befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
  #7 (permalink)  
Alt 28.02.2010, 10:25
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 26.02.2010
Beiträge: 7
sharepointkb befindet sich auf einem aufstrebenden Ast
Standard

Keiner eine Idee?
Mit Zitat antworten
  #8 (permalink)  
Alt 28.02.2010, 11:11
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 26.02.2010
Beiträge: 7
sharepointkb befindet sich auf einem aufstrebenden Ast
Standard

Gelöst!
Mit Zitat antworten
  #9 (permalink)  
Alt 28.02.2010, 12:49
Benutzerbild von Manfred62
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2009
Ort: Ludwigsburg
Beiträge: 2.134
Manfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nett
Standard

Zitat:
Zitat von sharepointkb Beitrag anzeigen
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
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 28.02.2010, 21:00
Benutzer
neuer user
 
Registriert seit: 12.07.2009
Beiträge: 30
bogazci befindet sich auf einem aufstrebenden Ast
Standard

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>
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
div-höhe? - Hauptcontainer über ganze Seite will nicht... AndMei CSS 5 13.12.2010 15:43
z-index hoch, dennoch grafik nicht ganz oben bergg CSS 6 27.10.2010 17:02
Problem mit einem 3D-Effekt moep0710 CSS 12 12.06.2010 15:30
Untermenü im IE nici CSS 10 22.06.2009 22:19
problem mit 2 spalten css layout sonnengott CSS 17 11.12.2008 15:21


Alle Zeitangaben in WEZ +2. Es ist jetzt 17:50 Uhr.