zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > (X)HTML
Seite neu laden 3 spaltiges Layout die mitte vergrössern, wie?

Antwort
 
LinkBack Themen-Optionen Ansicht
  #11 (permalink)  
Alt 10.02.2009, 15:13
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 22.01.2009
Beiträge: 34
plinius12 befindet sich auf einem aufstrebenden Ast
Standard

Code:
/*
CSS Credit: http://www.templatemo.com/
*/

body {
	margin: 0;
	padding: 0;
	line-height: 1.5em;
	font-family: Helvetica, Arial, sans-serif;
	font-size: 11px;
	color: #333333;
}

a:link, a:visited { color: #750a20; text-decoration: none;} 
a:active, a:hover { color: #FF0000;}

p {
	margin: 0 0 5px 0;
	padding: 0px;
	color: #000;
	font-size: 12px;
}

h1 {
	margin: 0 0 5px 0;
	padding: 10px 0 10px 0;
	font-size: 16px;
	font-weight: bold;
	line-height: 28px;
	color: #750a20;
}

h2 {
	margin: 0 0 10px 0;
	padding: 5px 0;
	font-size: 16px;
	font-weight: bold;
	color: #750a20;
}

h3 {
	margin: 0 0 5px 0;
	padding: 2px 0;
	font-size: 16px;
	font-weight: bold;
	color: #750a20;
}

h4 {
	margin: 0 0 5px 0;
	padding: 2px 0;
	font-size: 16px;
	font-weight: bold;
	color: #750a20;
}

.updatedtime {
	font-size: 10px;
	font-weight: bold;
	color: #FF0000;
}

.view_all a{
	clear: both;
	display: block;
	width: 100%;
	padding: 5px 0 1px 0;
	margin-bottom: 5px; 
	font-weight: bold;
	text-decoration: none;
	border-top: 1px dotted #CCC;
}

#templatemo_container {
	margin: auto;
	width: 1000px;
}

#templatemo_top_panel {
	float: left;
	width: 1000px;
	height: 100px;
	margin: 0px;
	color: #FFF;
	background: #003 url(images/templatemo_top_panel_background.jpg) no-repeat;
}

#templatemo_sitetitle {
	float: left;
	width: 300px;
	margin: 55px 0 0 15px;
	padding: 10px 0 5px 0;
	font-size: 28px;
	font-weight: bold;
	color: #FFF;
}

#templatemo_searchbox {
	float: left;
	width: 320px;
	margin: 40px 0 0 15px;
}

#templatemo_searchbox form {
	margin: 0px;
	padding: 0px;
}

#searchfield{
	background:#FFFFFF;
	border: none;
	color: #000;
	font-size: 13px;
	font-variant: normal;
	height: 16px;
	line-height: normal;
	padding: 4px;
	width: 200px;
}


#searchbutton{
	background: url(images/templatemo_search_button.gif); 
	border: none;
	cursor: pointer;
	font-size: 12px;
	font-weight: bold;
	height: 24px;
	margin: 0 0 0 7px;
	padding: 0 6px;
	text-align: center;
	vertical-align: bottom;
	white-space: pre;
	width: 66px;
}

#templatemo_currentdate {
	float: right;
	width: 300px;
	margin: 70px 15px 0 0;
	text-align: right;
	font-weight: bold;
}

/*------------- Menu ------------------*/
#templatemo_menu {
	float: left;
	width: 1000px;
	height: 30px;
	background: #750a20 url(images/templatemo_menu_bg.gif) repeat-x;
	border-bottom: 1px solid #333;
}

#templatemo_menu ul {
	float: left;
	width: 800px;
	margin: 0;
	padding: 7px 0 0 0;
	list-style: none;
}

#templatemo_menu ul li{
	display: inline;
}

#templatemo_menu ul li a{
	float: left;
	padding: 0 25px;
	font-size: 12px;
	font-weight: bold;
	text-align: center;
	text-decoration: none;
	color: #FFFFFF;
	border-right: 1px solid #FFFFFF;
}

#templatemo_menu li a:hover, #templatemo_menu li .current{
	color: #FFFF00;
}

/* end of menu */

/* content */
#templatemo_content {
	float: left;
	width: 1000px;
}

#templatemo_main_leftcol {
	float: left;
	width: 630px;
	margin-top: 15px;
}

.templatemo_leftcol_subcol {
	float: left;
	width: 285px;
	padding: 0 15px 0 0;
	margin-right: 15px;
}

#templatemo_main_rightcol {
	float: right;
	margin-top: 15px;
	width: 370px;
}

* html #templatemo_main_rightcol {
	margin-left: -15px;	
}

#templatemo_topnews {
	display: block;
	padding-bottom: 10px;
	margin-bottom: 10px;
	border-bottom: 1px dotted #cccccc;
}

#templatemo_topnews img{
	margin-bottom: 5px;
}

#templatemo_gallery_section {
	display: block;
	width: 278px;
	padding: 5px 0 5px 5px;
	margin-bottom: 25px;
	border: 1px solid #CCC;
}

#image_section {
	float: left;
	width: 278px;	
	padding-bottom: 5px;
}

#image_section img{
	float: left;
	margin: 0 3px 3px 0;
	border: none;
}

.regular_section {
	display: block;
	width: 285px;
	padding-bottom: 10px;
	margin-bottom: 15px;
	border-bottom: 1px dotted #CCC;
	color: #750a20;
	font-size: 11px;
}

.newsbox {
	clear: both;
	width: 285px;
	padding-bottom: 15px;
	color: #000;
	font-weight: bold;
}


.newsbox img{
	float: left;
	margin: 0 5px 0 0;
	padding: 0px;
}

.newsbox .newstitle {
	font-size: 16px;
	color:#C00;
	font-weight: bold;
}

.newsbox p{
	font-size: 11px;
}

.regular_section ul{
	clear: both;
	margin: 0 0 10px 0;
	padding: 0 0 0 20px;
	color: #900;
}

.regular_section li a{
	font-weight: bold;
}

.regular_section li a:hover{
	text-decoration: underline;
}

.templatemo_leftcol_fullrow {
	clear: both;
	float: left;
	width: 600px;
	padding: 10px 0 0 10px;
	border: 1px solid #CCC;
	margin-bottom: 25px;
	
}

.templatemo_rcol_sectionwithborder {
	display: block;
	width: 368px;
	border: 1px solid #CCC;
	margin-bottom: 25px;	
}

#templatemo_video_section {
	display: block;
	width: 358px;
	margin-top: 10px;	
	margin-left: 10px;
}

* html #templatemo_video_section {
	margin-left: 5px;
}

#templatemo_video_section .video_box {
	float: left;
	width: 106px;
	margin: 0 10px 10px 0;
}

#templatemo_video_section .video_box img{
	margin: 0 0 5px 0;
}

#templatemo_video_section .video_box a{
	font-size: 10px;
	font-weight: bold;
}

#templatemo_video_section .video_box a span{
	color: #FF0000;
	font-size: 10px;
	font-weight: bold;
}

#templatemo_newsletter_section {
	width: 348px;
	margin: 10px;
}

#templatemo_newsletter_section  form {
	margin: 0 30px 0 0;
	text-align: right;
}

#templatemo_newsletter_section  select {
	width: 200px;
	height: 25px;
	padding: 2px 0;
	margin: 0px;
}

#templatemo_newsletter_section .form_row{
	padding: 3px 0px;
}


#templatemo_newsletter_section label {
	margin-right: 10px;
}

#templatemo_newsletter_section input{
	width: 195px;
	height: 15px;
}

#templatemo_newsletter_section .button{
	height: 25px;
	width: 80px;
}

#templatemo_blog_section {
	width: 348px;
	margin: 10px;
}

#templatemo_blog_section .blog_box {
	padding-bottom: 5px;
	margin-bottom: 5px;
	border-bottom: 1px dotted #CCC;
}

#templatemo_blog_section .datetime{
	font-weight: bold;
}

#templatemo_poll_section {
	width: 348px;
	margin: 10px;
}

#templatemo_poll_section p{
	padding-bottom: 10px;
}


#templatemo_poll_section img{
	float: right;
}

#templatemo_poll_section .button{
	height: 25px;
	width: 50px;
	margin-right: 25px;
}

#templatemo_partner_section {
	width: 348px;
	margin: 10px;
}

.partner_box {
	width: 348px;
	padding: 0px;
	margin-bottom: 25px;
}

.partner_box p{
	clear: both;
}



/* ----- Footer ----- */
#templatemo_footer {
	clear: both;
	float: left;
	padding: 25px;
	width: 950px;
	color: #FFF;
	text-align: left;
	background: #333333;
}

.footer_leftcol {
	float: left;
	width: 400px;
	padding: 0 0 0 10px;
	margin-right: 25px;
}

.footer_rightcol {
	float: right;
	text-align: right;
	width: 435px;
	text-align: right;
}

.footer_subcol {
	float: left;
	width: 120px;
	margin-left: 25px;
}

#templatemo_footer p{
	padding: 0;
	margin-bottom: 10px;	
	text-align: justify;
}

#templatemo_footer a{
	color: #FFF;
	text-decoration: none;
}

#templatemo_footer a:hover{
	color: #FFF;
	text-decoration: underline;
}

/* ----- End of Footer ----- */
Mit Zitat antworten
Sponsored Links
  #12 (permalink)  
Alt 10.02.2009, 15:32
Benutzerbild von mantiz
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 25.02.2007
Beiträge: 2.843
mantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz sein
Standard

OK, jetzt sieht das ganze so aus, welchen Teil davon willst Du verbreitern?

Oder ist die Darstellung evtl. noch nicht so, wie sie sein soll, weil die tabcontent.css noch fehlt?

Geändert von mantiz (04.11.2009 um 12:33 Uhr) Grund: Screenshot entfernt
Mit Zitat antworten
Sponsored Links
  #13 (permalink)  
Alt 10.02.2009, 16:08
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 19.09.2005
Beiträge: 192
WEBDIMA befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Hallo, du musst nur Zeile 42 ändern.
Das war für mich der Brüller des Tages! Mercy!
__________________
Meine Spielwiese: www.biketrekking.de
Mit Zitat antworten
  #14 (permalink)  
Alt 10.02.2009, 16:53
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 22.01.2009
Beiträge: 34
plinius12 befindet sich auf einem aufstrebenden Ast
Standard

Den mittelren möchte ich breite machen
Mit Zitat antworten
  #15 (permalink)  
Alt 10.02.2009, 17:07
Benutzerbild von mantiz
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 25.02.2007
Beiträge: 2.843
mantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz sein
Standard

Das Problem ist, dass die beiden linken Spalten über die gleichen Klassen verfügen, wichtig ist hier die Klasse "templatemo_leftcol_subcol", wo auch die Breite drin steht.

Du könntest eine Klasse "templatemo_leftcol_subcol2" anlegen, wo Du dann eine höhere Breite angibst, dann bekommst Du aber das Problem, dass sämtliche Breiten nicht mehr stimmen, der Container also nicht mehr genügend Platz hat und somit runtergeschoben wird, bis er genug Platz hat.

Du könntest also entweder der ganz linken und/oder rechten Spalte dann weniger Breite geben, oder die gesamte Seite breiter werden lassen.

Für die gesamte Breite musst Du ebenfalls "#templatemo_main_leftcol" und "#templatemo_content" anpassen, für die rechte Spalte "#templatemo_main_rightcol" und ein paar Elemente, die da noch drinstehen, die habe ich jetzt nicht weiter rausgesucht.

Die Angaben befinden sich alle in der Datei templatemo_style.css.
Mit Zitat antworten
  #16 (permalink)  
Alt 10.02.2009, 17:39
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 22.01.2009
Beiträge: 34
plinius12 befindet sich auf einem aufstrebenden Ast
Standard

Habe jetzt einmal Vesrucht die Werte zu ändern, wird nichts breiter.na, wenn es Stress macht lassen wirs
Mit Zitat antworten
  #17 (permalink)  
Alt 10.02.2009, 18:09
Benutzerbild von mantiz
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 25.02.2007
Beiträge: 2.843
mantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz sein
Standard

Wenn ich bei mir die Klasse "templatemo_leftcol_subcol" kopiere und sie in "templatemo_leftcol_subcol2" umbenenne und für width einfach mal 100px mehr eintrage, dann diese Klasse im HTML-Code dem entsprechenden div zuweise und zusätzlich noch bei der Klasse "templatemo_leftcol_subcol" 100px von width abziehe, dann wird die ganz linke Spalte 100px schmaler und die mittlere 100px breiter.

Das Problem ist halt, dass Du an mehreren Stellen anpacken musst, da das Layout halt so aufgebaut ist, wie es aufgebaut ist.

Wenn Du damit nichts anfangen kannst, dann würde ich empfehlen Dich erstmal in HTML und CSS einzuarbeiten, sonst macht das wenig Sinn.

Stress macht das ganze nicht, es ist nur aufwendig und fertigen Code stellt hier afaik kaum jmd. zur Verfügung, zumal ich eigentlich nicht weiß, wie ich es noch genauer beschreiben soll, was zu tun ist.

Ansonsten kann ich Dir hier leider nicht weiterhelfen, vielleicht schaut ja noch jmd. anderes vorbei, der gerade nichts zu tun hat.
Mit Zitat antworten
  #18 (permalink)  
Alt 10.02.2009, 18:58
Benutzerbild von emti
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 03.06.2008
Ort: 23816 Groß Niendorf
Beiträge: 700
emti sorgt für eine eindrucksvolle Atmosphäreemti sorgt für eine eindrucksvolle Atmosphäre
Standard

Zitat:
Zitat von WEBDIMA
Zitat:
Zitat von fricca
Hallo, du musst nur Zeile 42 ändern.
Das war für mich der Brüller des Tages! Mercy!
Das nicht, aber die Antwort darauf.
__________________
Gruß Michael
SketchAtomTransmit
Mit Zitat antworten
  #19 (permalink)  
Alt 10.02.2009, 19:07
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 22.01.2009
Beiträge: 34
plinius12 befindet sich auf einem aufstrebenden Ast
Standard

Dir scheint es wohl Spaß zu machen noch nicht so fite zu verarschen.
Ich frage mich wie manchmal mit Leuten so in Foren umgegangen wird.
Du scheinst wohl die Leuchte hoch 3 zu sein.
Nun ja, ich denke mir meinen teil weiter. Ich kann dir nur wünschen, das mit dir auch einmal so umgegangen wird.
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
3 spaltiges Layout mit CSS Serpico CSS 2 20.12.2010 16:53
3 spaltiges Layout: links rechts ausfließend, mitte fest designxx CSS 12 27.02.2009 14:48
2 spaltiges Layout, unabhängig scrollbar Plasm CSS 6 15.02.2008 11:31
3 spaltiges Layout mit flexibler Mitte skobe CSS 1 11.12.2007 17:48
Holy Grail und der Internet Explorer! ONeill CSS 23 01.06.2006 19:20


Alle Zeitangaben in WEZ +2. Es ist jetzt 18:45 Uhr.