Beiträge von dreesi

dreesi

Ja,

aber

#content
border: 2px outset #999999;
padding: 10px;
z-index: 1;
background-color: white;
top: 205px;
height: 200%;
overflow: auto;
text-align: justify;
font-family: Arial,Helvetica,sans-serif;
margin-left: 190px;
width: 48%;
position: absolute;

Da ist der mittlere Bereich doch nur 48% breit.

Wie ich bereits sagte, ich habe schon herum experimentiert. Vielleicht ist das ja alles Quatsch was ich gemacht habe. Wenn ich den 'contentbereich kleiner mache, dann ändert das auch nichts. Ich bin von verschachtelten div`s audgegangen.

div#contentbereich
sollte beinhalten
div#links
div#recht
div#content

siehe html Datei

Aber auch das hat nicht funktioniert, und ich weiss nicht was ich falsch gemacht habe. Also, kann sein das bei mir der komplette Wurm drin ist.

Gruss

dreesi

dreesi

hier die html Datei

PHP

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <meta content="text/html; charset=ISO-8859-1"
 http-equiv="content-type">
  <link rel="stylesheet" href="testseite.css"
 type="text/css">
  <title></title>
</head>
<body id="body" alink="#ee0000" link="#0000ee"
 vlink="#551a8b">
<br>
<div id="header"><?php mosLoadModules ( 'header' ); ?></div>
<div id="headerhinten"></div>
<div id="user1"><?php mosLoadModules ( 'user1' ); ?>Das
hier wird das TOP-menu<br>
</div>
<div id="contentbereich">
<div id="content"><?php mosMainBody(); ?>Hallo,
dies ist der Text den
ich hier einfügen würde. ich befinde mich gerade hier in Schweden und
kämpfe mit den Untiefen der CSS-Codierung, habe echt Probleme Elemente
richtig auszurichten, aber auch das sollte mir später gelingen, ich
werde mich bemühen es richtig zu machen.&nbsp; </div>
<div id="rechts"><?php mosLoadModules ( 'right' ); ?>und
hier sollen mal später diverse Bilder über den Bildschirm laufen </div>
<div id="links"><?php mosLoadModules ( 'left' ); ?>Das
das hier soll mal irgentwann die Menueleiste werden wenn ich mal alles
verstanden habe.</div>
</div>
</body>
</html>

Alles anzeigen

Und hier die css datei

Code

/* Generated by KompoZer */
#body {
  background: transparent url(images/background.jpg) no-repeat fixed left bottom;
  font-family: Arial,Helvetica,sans-serif;
  height: 640px;
  width: 1024px;
}
#header {
  z-index: 5;
  width: 900px;
  background-repeat: no-repeat;
  background-color: transparent;
  height: 170px;
  margin-top: 0px;
  opacity: 0.313;
  position: fixed;
  background-position:  center center;
  font-family: Arial,Helvetica,sans-serif;
  background-image: url(images/headerneu.png);
}
#headerhinten {
  height: 170px;
  position: fixed;
  background-repeat: no-repeat;
  background-image: url(images/headerneu.png);
  width: 900px;
  background-position:  center center;
}
#contentbereich {
  border-style: dotted;
  border-width: 4px;
  height: 200%;
  width: 1024px;
  margin-top: 160px;
  background-color: #ffcc00;
}
#links {
  border: 2px outset #999999;
  position: fixed;
  background-color: #b4ddff;
  top: 205px;
  height: 60%;
  z-index: 1;
  width: 160px;
  margin-left: 10px;
}
#rechts {
  border: 2px outset #999999;
  width: 160px;
  background-color: #b4ddff;
  top: 205px;
  height: 60%;
  margin-left: 10px;
  margin-right: 10px;
  z-index: 1;
  position: fixed;
  left: 700px;
}
#content {
  border: 2px outset #999999;
  padding: 10px;
  z-index: 1;
  background-color: white;
  top: 205px;
  height: 200%;
  overflow: auto;
  text-align: justify;
  font-family: Arial,Helvetica,sans-serif;
  margin-left: 190px;
  width: 48%;
  position: absolute;
}
#user1 {
  height: 30px;
  z-index: 6;
  list-style-type: square;
  background-color: #b4ddff;
  width: 700px;
  position: fixed;
  left: 180px;
}

Alles anzeigen

Vielleicht gehts damit

Gruss
dreesi

dreesi

Hallo,

nachdem ich mit joomla Templates experimentiert habe wollte ich ersteinmal html und css verstehen (wenn das überhaupt möglich ist :twisted: )

Nein, Spass beiseite. Ich habe mit dem Kompozer eine Site erstellt die meinen Wünschen schon recht nahe kommt. Allerdings habe ich zwei Probleme dich ich durch recherchieren nicht lösen konnte.

1. Ich hätte gerne ein dreispaltiges Layout. Allerdings ist es mir nicht gelungen die drei Spalten so anzuordnen wie es sein soll. Die drei Dinger machen was sie wollen und ich weiß nicht warum. Eigentlich war geplant die linke und rechte Spalte fest, und die mittlere flexibel in ihrer Breite zu erstellen.

2. Beim Publizieren werden meine Grafiken nicht mit publiziert. Ich habe versucht die Bilder händisch (Korrektur der css Datei auf meinem Webserver) einzubinden, das ist mir aber nicht gelungen.

Meinen Versuch findet ihr hier:

<a class="postlink" href="http://www.drees.dk/html/testseite.html">http://www.drees.dk/html/testseite.html</a>

Lasst euch nicht von dem gelben Hintergrund verwirren, den hab ich gewählt um für mich die Layer verständlicher zu machen. geholfen hat es nicht. :oops:

Vielleicht kann mir ja jemand einen Tipp geben.

Gruß

dreesi

dreesi

Hallo,

danke für eure Hilfeversuche. Hab nichts gefunden um die Textausrichtung zu ändern. :?

Dafür habe ich den div Layer jetzt so angeordnet das es jetzt wenigstens ordentlich aussieht. Und wenn ich ehrlich bin gefällt es mir so auch besser.

Bei weiteren Fragen werde ich euch wieder auf den Geist fallen

Danke

dreesi

dreesi

Ich glaub am schlausten ist es beide Dateien mal zu zeigen. Ich hab joomla! über xampp auf meinem Rechner laufen, kann also nix online zeigen

hier die index.php

PHP

<?php




defined( '_VALID_MOS' ) or die( 'Direct Access to this location is not allowed.' );




?>




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




<?php echo "<?xml version=\"1.0\"?>"; ?>




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




<head>




<title><?php echo $mosConfig_sitename; ?></title>




<meta http-equiv="Content-Type" content= "text/html; <?php echo _ISO; ?>" />




<?php




if ($my->id) {




include ("editor/editor.php");




initEditor();




}




?>




<?php mosShowHead(); ?>




<link href="<?php echo $mosConfig_live_site; ?>/templates/sg/css/template_css.css" rel="stylesheet" type="text/css" />




<link rel="shortcut icon" href="<?php echo $mosConfig_live_site;?>/images/favicon.ico" />




</head>




<body>




<center>




<div id="container">




<div id="title">




<h1><?php echo $mosConfig_sitename; ?> </h1>




<div id="search"><?php mosLoadModules ( "user4" ); ?> </div>




</div>




<div id="center_table">




<div id="left" style="clear:right;">




<?php mosLoadModules ( 'left' ); ?>




</div>




<div id="right">




<?php mosLoadModules ( "right" ); ?>




</div>




<div id="modul_1">




<?php mosLoadModules ( 'user1' ); ?>




</div>




<div id="content">




<?php mosPathWay(); ?><br/><br/>




<?php mosMainBody(); ?><br/><br/>




</div>




</div> 




<div id="bottom"><div id="bottom_text">




Copyright ©  <a href="http://www.test.de"




 target="_blank">www.test.de</a>




<a href=" <?php echo $mosConfig_live_site;?>" accesskey="1">




<?php echo $mosConfig_sgluenen; ?>




</a>




</div>




</div>




</div>




</center>




</body>




</html>

Alles anzeigen

und hier die css-Datei

Code

/*Allgemeine Einstellungen*/




body {




background-color: #B4DDFF;




font-family:Verdana;




font-size:11px;




}




/*Einstellungen für die Anzeige der Überschriften*/




h1 {font-size:16px;color:#638CB2; margin-bottom:0px;text-shadow:#FFFFFF 2px;}




h2 {font-size:15px;color:#000000;}




h3 {font-size:14px;color:#000000;}




/*Einstellungen für die Anzeige der Links*/




a:link, a:visited, a:active, a:hover{




text-decoration:none;




font-weight:bold;




color:#5F8AAF;




font-size:11px;




cursor:crosshair;




}




a:active, a:hover{




text-decoration:none;




color:#FE8B1F;




}




/*Der Container schließt die ganze Seite ein und bestimmt deren Breite*/




#container{




width:90%;




font-family:Verdana;




font-size:11px;




background-color:#B4DDFF;




}




/*In diesem Layer wird der Seitentitel ausgegeben*/




#title {




background:url(../images/header2.jpg) no-repeat;




background-color:#B4DDFF;




text-align:center;




height:160px;




border-bottom:10px solid #B4DDFF;




margin-bottom:20px; /*Abstand zum Content Container*/




}




#title h1 {




padding-top:153px;




}




/*Einstellungen zum Suchmodul*/




#search {




float:right;




width:212px;




padding-right:40%;




}




#search table.moduletable {




padding-left:100px;




border:0px solid #91B5CE;




background-color:#91B5CE;




}




#search .inputbox {




border:0px;




color:#000000;




background-color:#628bb1;




}




#search .button {




border:1px solid #D8E5EB;




color:#000000;




background-color:#B4DDFF;




}




/*Einstellungen für den center_table*/




#center_table {




padding:2px;




}




/*Einstellung für den Layer Modul_1*/




#modul_1 table.moduletable{




text-align:left;}  




#modul_1 ul li{ 




padding:0px;




margin:0px;




list-style:




}




/*Einstellungen für die beiden Layer neben dem Content*/




#left, #right {




line-height:15px;




}




#left {




width:15%;




float:left;




}




#right {




width:20%;




float:right;




}




/*Einstellungen für den Content Layer*/




#content {




float:left;




width:55%;




margin-left:3%;




text-align:left;




font-family:Verdana;




font-size:11px;




border: 0px dashed #C3C3C3;




margin-bottom: 10px;




padding-left: 5px;




padding-right: 5px;




overflow:hidden; /*damit z.B. bei Suchabfragen Überlange URL's nicht das Layout zerstören*/




background-color:#FFFFFF;




}




#content h1 {




font-weight:bold;




font-family:Verdana;




font-size:12px;




color:#FE8B1F;




} 




/*Einstellungen für den untersten Layer*/




#bottom {




clear:both;




background:url(../images/bottom_right.gif) no-repeat right;




background-color:#91B5CE;




height:34px;




border-top:4px solid #B4DDFF;




margin-top:20px;




vertical-align:bottom;




}




#bottom_text {




padding:7px;




}




/*Einstellungen speziell fÃŒr Joomla*/




/*Module*/




table.moduletable {




width:100%;




text-align:left;




font-family:Verdana;




font-size:11px;




border: 0px dashed #C3C3C3; /*Rahmen um die einzelnen Module (Menü, Poll, Suchen..) */




margin-bottom: 10px; /*Abstand zwischen den Modulen 10px*/




padding-left:1px; /*Abstand zum Rahmen*/




padding-right:1px;




background-color:#B4DDFF;




}




table.moduletable th { /*Modulüberschrift*/




text-align:left;




font-family:Verdana;




font-size:13px;




background-color:#648AAF;




background:url(../images/menu_top_bg.gif) repeat-x;




color:#FFFFFF;




}




table.moduletable td { /*Modultext, nicht Content*/




text-align:left;




font-size:11px;




font-family:Verdana;




}




/*Content*/




td { /*Contenttext, nicht Modul*/




font-family:Verdana;




font-size:11px;




}




th {




font-family:Verdana;




font-size:11px;




}




p {




font-family:Verdana;




font-size:11px;




}




.contentheading, .componentheading {




font-weight:bold;




font-family:Verdana;




font-size:12px;




color:#FE8B1F;




}




.small {




font-family:Verdana;




font-size:11px;




color:#888888;




}




.createdate {




font-family:Verdana;




font-size:11px;




color:#888888;




} 




/*Navigationsmenu*/




a.mainlevel:link, a.mainlevel:visited, a.mainlevel:hover {




display:block;




background-color:#B4DDFF;




text-decoration:none;




font-weight:bold;




color:#5F8AAF;




font-size:11px;




}




a.mainlevel:active, a.mainlevel:hover, a.mainlevel:focus {




display:block;




background-color:#FE8B1F;




color:#FFFFFF;




font-size:11px;




text-decoration:none;




font-weight:bold;




}




a.sublevel:link, a.sublevel:visited, a.sublevel:hover {




display:block;




background-color:#B4DDFF;




text-decoration:none;




font-weight:bold;




color:#5F8AAF;




font-size:11px;




}




a.sublevel:active, a.sublevel:hover, a.sublevel:focus {




display:block;




background-color:#FE8B1F;




color:#FFFFFF;




font-size:11px;




text-decoration:none;




font-weight:bold;




}/*Sonstiges*/




.button {




background-color:#628BB1;




color:#FFFFFF;




font-size:11px;




font-family:Verdana;




border: 1px solid #D8E5EB;




}




.inputbox {




border:0px solid #C3C3C3;




}

Alles anzeigen

Ich hoffe es ist nicht zu unübersichtlich.

Gruss

dreesi

PS: Mit dem Liststyle hast du recht, ich habe damit getestet, und es nicht richtig gelöscht, ändert aber nix an meinem problem.

dreesi

irgendwie reden wir aneinander vorbei. Mit float hab ich auch schon "experimentiert". Hat mir bei meinem Problem auch nicht geholfen. Vielleicht hab ich den Befehl auch falsch benutzt. :roll:

Würde es Sinn machen die beiden Template Dateien hier zu zeigen (index.php und die komlpett css-Datei)?

Hab mit Gimp das Problem mal grafisch gelöst. So sollte es mal aussehen:

http://www.drees.dk/test/Bild2.jpg

Gruss

dreesi

PS: Danke im übrigen für die echt fixen Antworten!!!

dreesi

Also,

die Überschrift "Menu" ist mit den Menupunkten linksbündig ausgerichtet. So soll es sein.

Die Überschrift "Neuigkeiten" ist zu den Aufzählungen zu weit links verrutscht.

Ich möchte das "Neuigkeiten" und die Aufzählungen darunter linksbündig an einer Linie ausgerichtet sind. Oder anders ausgedrückt, die Überschrift "Neuigkeiten" soll weiter nach rechts "geschoben" werden.

Ich hoffe ich habe mich verständlich genug ausgedrückt :oops:

Gruss

dreesi

dreesi

Hallo,

ich bin dabei ein Template für eine joomla! Webpage zu erstellen. Auch da benötigt man eine css-Datei.

Ich möchte gerne die Textausrichtung in einem Modul anders festlegen, weiss aber nicht wie.

Ich hab mal nen Screenshot dazugelegt.
http://www.drees.dk/test/Bild1.jpg

Folgenden Eintrag gibt es in in der css-Datei:

Code

/*Einstellung für den Layer Modul_1*/




#modul_1 table.moduletable{




text-align:left;}  




#modul_1 ul li{ 




padding:0px;




margin:0px;




list-style:




}

Alles anzeigen

Ich hab auch schon mit den Einträgen ein wenig "rumgespiel", konnte aber lediglich die Aufzählungszeichen verändern.

Ich wäre sehr dankbar, wenn mir jemand einen Tipp geben könnte wie ich die Überschrift "Neuigkeiten" genauso ausrichten kann wie die Überschrift "Menu".

Gruss

dreesi[/code]

Beiträge von dreesi

Fragen zu Grafiken und Textfeldern (Layern)

Fragen zu Grafiken und Textfeldern (Layern)

Fragen zu Grafiken und Textfeldern (Layern)

Textausrichtung für Modul in joomla! festlegen

Textausrichtung für Modul in joomla! festlegen

Textausrichtung für Modul in joomla! festlegen

Textausrichtung für Modul in joomla! festlegen

Textausrichtung für Modul in joomla! festlegen