+ Antworten
Ergebnis 1 bis 6 von 6

Thema: Grafik in Modul in Tabelle immer an gleicher Position?

  1. #1
    t-l
    t-l ist offline
    Neu an Board
    Registriert seit
    24.07.2005
    Beiträge
    23
    Bedankte sich
    1
    Erhielt 0 Danksagungen
    in 0 Beiträgen

    Frage Grafik in Modul in Tabelle immer an gleicher Position?

    Hallo,

    auf unserer Vereinshomepage habe ich das original Template in eine 3-spaltige Tabelle integriert, um links und rechts in den Spalten noch Module (Interne Vereinlinks und Sponsoren) anzeigen zu lasse. Dabei halten die Module, wenn man auch mal auf eine andere Seite der Homepage klickt, immer die gleiche Position (z.B. Abstand nach oben) ein und verrutschen nicht nach unten.
    http://www.tsv1880ruedersdorf.de/fussball/

    Diese Systematik möchte ich auch auf dieser Seite integrieren, doch irgendwie funktioniert es nicht (siehe jeweils rechts und links den Banner von Pizza 78 bei Seitenwechsel) - weder mit margin-top noch mit padding-top.
    http://www.tsv1880ruedersdorf.de/mini-wm-2014/

    Wo habe ich hier den Denk- bzw. Programmmierfehler und wie kann ich dem Problem Herr werden?

    Danke und Grüße, Tino.
    Geändert von t-l (28.09.2012 um 22:09 Uhr)

  2. #2
    httpd
    Gast

    Standard

    Zitat Zitat von t-l Beitrag anzeigen
    ..Wo habe ich hier den Denk- bzw. Programmmierfehler und wie kann ich dem Problem Herr werden?
    Ich nenne es mal den Was-vergessen-Fehler

    Wer floatet sollte auch clear anwenden. Sonst kommt es nämlich zu diesen "Sprüngen"

    Entweder gibst du also den sponsoren-links und sponsoren-rechts in der css ein clear: both mit, oder du gibst den div's die class=clear mit und definierst dann in der css für .clear das clear: both

  3. #3
    t-l
    t-l ist offline
    Neu an Board
    Registriert seit
    24.07.2005
    Beiträge
    23
    Bedankte sich
    1
    Erhielt 0 Danksagungen
    in 0 Beiträgen

    Standard

    In der template.css dann so etwa?

    #sponsoren-links {
    float: left;
    width:120px;
    padding-top: -500px;
    margin-left: 0px;
    height: 180px;
    overflow: hidden;
    text-align:right;
    clear: both;
    }

    Nein, das funktioniert noch nicht...
    Geändert von t-l (28.09.2012 um 17:11 Uhr)

  4. #4
    httpd
    Gast

    Standard

    Momentan steht das clear bei dir vor dem float in der CSS. Würdest du es einmal, wie von dir oben gepostet, nach dem float, reinschreiben?

  5. #5
    t-l
    t-l ist offline
    Neu an Board
    Registriert seit
    24.07.2005
    Beiträge
    23
    Bedankte sich
    1
    Erhielt 0 Danksagungen
    in 0 Beiträgen

    Standard

    Hm, sehe da nicht durch... Könntest du mir es mal bitte farblich markieren...!?

    Danke.

    Code:
    /*****************************/
    /*** Core html setup stuff ***/
    /*****************************/
    
    html {
      height: 100%;
      margin-bottom: 1px;
    }
    
    form {
      display:inline;
    }
    
    body {
    	margin: 0px 0px 0px 0px;
    	width: 100%;
    	display: table;
    }
    
    body, td{
    	font-family: "Trebuchet MS";
    	font-size: 13px;
    	color: #333;
    	line-height: 1.3em;
    }
    
    a:link, a:visited {
    	text-decoration: none;
    	font-weight: normal;
    }
    
    a:hover {
    	text-decoration: underline;
    	font-weight: normal;
    }
    
    input.button { cursor: pointer; }
    
    p { margin-top: 0; margin-bottom: 5px; }
    
    img { border: 0 none; margin:0px; }
    
    /*****************************************/
    /*** Template specific layout elements ***/
    /*****************************************/
    #page_bg {
    	padding: 0px;
    	margin: 0px;
    	margin-bottom: 0px;
    }
    
    div#top_menu{
    	height:57px;
    	margin:0px auto;
    	width: 980px;
    }
    
    #topnav{ height: 54px; width:980px; margin: 0px; padding:0px; font-weight: bold; }
    #topnav ul { margin: 0px 0px 0px 11px; padding: 0; width: auto; float: left; list-style-type:none; }
    #topnav ul li{ margin: 0; padding: 0; height: 54px; float: left; position: relative; }
    #topnav ul li a{ color: #FFFFFF; font-weight: bold; text-decoration: none; padding: 14px 10px 0px 10px; height:40px; display: block; float: left; }
    #topnav ul li a:hover{ background-color: #444444; text-decoration: none; font-weight: bold; color: #fff; }
    #topnav ul li ul ul { margin: -50px 0 0 297px; z-index: 100; }
    #topnav ul li li { width:auto; height: 35px; }
    #topnav ul li li a { color: #000000; text-transform: none; display: block; background: none; width: 277px; border-top: 1px solid #DDDDDD; border-left: 0px; padding: 9px 10px 6px 10px; height:20px; }
    #topnav ul li li a:hover{ background: none; background-color: #333333; left: 0; width: 277px; padding: 9px 10px 6px 10px; height:20px; border-top: 1px solid #DDDDDD; }
    #topnav ul li ul { left: -999em; top: 54px; left: 0; display: block; height: 36px; width: 277px; position: absolute; z-index: 99; left: -999em; clear: left; margin-top: 0px; margin-left: 0px; }
    #topnav ul li:hover ul ul, #topnav ul li:hover ul ul ul { left: -999em; }
    #topnav ul li:hover ul, #topnav ul li li:hover ul, #topnav ul li li li:hover ul { left: auto; }
    
    div#main_bg{
    	margin:0px auto;
    	width: 979px;
    	text-align:left;
    }
    
    div.banner1{ 
    	background: #FFF url(../images/banner1.jpg) top center no-repeat;
    }
    
    div#h_area{
    	margin:0px auto;
    	width: 964px;
    	height:333px;
    	text-align:left;
    	padding-left:14px;
    	padding-top:15px;
    }
    
    #sponsoren-links {
            float: left;
            width:120px;
            padding-top: -500px;
            margin-left: 0px;
            height: 180px;
            overflow: hidden;
            text-align:right;  
            clear: both;
    }
    
    #sponsoren-rechts {
    	float: left;
    	width:120px;
    	margin-top: -500px;
            margin-left: 0px;
    	height: 180px;
            overflow: hidden;
    	text-align:right;
            clear: both;
    }
    
    .logo{
    	display: block;
    	float:left;
    	padding-top:5px;
    	margin-bottom:10px;
    	margin-left:10px;
    	width:600px;
    }
    a.logo,a.logo:link,a.logo:hover, a.logo:visited{
    	font-size:32px;
    	line-height: 58px;
    	color:#000;
    	text-decoration:none;
    	font-weight:bold;
    	font-family: "Times New Roman", Times, serif;
    	text-shadow: #FFF 1px 1px 1px;
    }
    
    div#user4{
    	float:right;
    	text-align:left;
    	margin-right: 20px;
    }
    
    div#user4 div.search{
    	width:220px;
    	height:46px;
    	text-align:left;
    	padding-top: 5px;
    	background: url(../images/search_bg.gif) top left no-repeat;
    }
    div#user4 div.search .inputbox {
    	background:#FFFFFF;
    	width: 150px;
    	height: 16px;
    	margin-left: 60px;
    	font-size: 11px;
    	color: #454545;
    	padding:5px 2px 2px 2px;
    	border: 1px solid #D3D3D3;
    }
    
    div#main_top table.contentpaneopen{
    	padding:0px;
    	margin-top:70px;
    	margin-left:22px;
    	width:410px;
    	height:134px;
    	overflow: auto;
    	text-align:left;
    	color:#FFFFFF;
    	float:left;
    }
    div#main_top table.contentpaneopen td{
    	color:#FFFFFF;
    }
    
    .search {
    	text-align:left;
    	width: 156px;
    	height:43px;
    }
    .search .inputbox {
    	background:#FFFFFF;
    	width: 156px;
    	height: 17px;
    	font-size: 11px;
    	color: #454545;
    	margin:9px 0px 0px 20px;
    	border: 1px solid #D3D3D3;
    }
    
    
    #leftcolumn{
    	margin-left:9px;
    	padding:0px;
    	width:205px;
    	float:left;
    }
    #rightcolumn{
    	margin-right:0px;
    	padding:0px;
    	width:170px;
    	float:right;
    }
    
    #maincolumn{
    	width:530px;
    	float:left;
    	margin:0px 5px 0px 5px;
    	padding:0px;
    	overflow:hidden;
    }
    #maincolumn_middle{
    	width: 780px;
    	float:left;
    	margin:0px 5px 0px 5px;
    	padding:0px;
    	overflow:hidden;
    }
    #maincolumn_big{
    	width: 967px;
    	float:left;
    	margin:0px 5px 0px 5px;
    	padding:0px;
    	overflow:hidden;
    }
    
    
    div.nopad {
    	float:left;
    	padding:0 0px 15px 0px;
    }
    
    div.nopad ul {
    	clear: both;
    }
    .article_separator {
    	height:35px;
    	line-height:35px;
    }
    form#form-login fieldset { 
    	border: none;
    	margin: 0;
    	margin-left:10px;
    }
    form#form-login ul li{ 
    	padding: 0; 
    }
    
    form#form-login ul li a {
    	text-align: left;
    	padding: 0px;
    	font-size: 10px;
    	color: #858585;
    }
    
    #leftcolumn div.module_menu, #leftcolumn div.module{
    	margin: 10px 0px 0px 0px;
    	padding:0px;
    	width: 205px;
    }
    .article_column {
    	padding-right:10px;
    }
    #rightcolumn div.moduletable_menu, #rightcolumn div.moduletable, #rightcolumn div.moduletable_text{
    	margin: 10px 0px 0px 0px;
    	padding: 0px;
    	width: 155px;
    }
    div.bannergroup_text {
    	margin:0px 13px 15px 13px;
    }
    .bannerheader {
    	font-weight:bold;
    	margin-bottom:10px;
    }
    .banneritem_text {
    	margin-bottom:10px;
    }
    .bannerfooter_text {
    	margin-bottom:10px;
    }
    #leftcolumn div.module_menu  div div div, #leftcolumn div.module div div div,
    #rightcolumn div.moduletable_menu, #rightcolumn div.moduletable, #rightcolumn div.moduletable_text{
    	background: url(../images/rub_bottom.png) center bottom no-repeat;
    }
    #leftcolumn div.module_menu  div div div, #leftcolumn div.module div div{
    	margin: 0px;
    	padding: 0px;
    	padding-bottom:5px;
    	width: 205px;
    	height:auto;
    }
    
    #leftcolumn div.module_menu div div div div, #leftcolumn div.module div div div div{
    	background: none;
    	padding:4px 8px;
    }
    #leftcolumn h3,
    #rightcolumn h3{
    	text-align: left;
    	padding-left:15px;
    	height: 42px;
    	width: 140px;
    	line-height: 40px;
    	color:#FFFFFF;
    	font-size:16px;
    	margin:0px;
    	font-weight:bold;
    }
    table.poll thead td {
    	text-align: left;
    	padding-left:10px;
    }
    table.poll td {
    	text-align: left;
    }
    #leftcolumn ul.menu li ul{
    	list-style: none;
    }
    .pollstableborder {
    	margin: 5px 0px 10px 0px;
    }
    .poll td div{
    	display:inline;
    }
    
    /* forms */
    
    #leftcolumn .moduletable ul,
    #rightcolumn .moduletable ul {
    	margin: 6px 0;
    	padding: 0;
    	list-style: none;
    }
    
    #leftcolumn .moduletable ul li,
    #rightcolumn .moduletable ul li {
    	margin: 0;
    	padding: 0 2px;
    }
    .moduletable ul {
    	padding:5px 10px 5px 12px;
    	margin:0px;
    }
    
    .moduletable ul li {
    	padding:0px 10px 5px 15px;
    	margin:0px;
    	line-height:18px;
    }
    #leftcolumn ul.menu li#current ul li,
    #rightcolumn ul.menu li#current ul li {
    	margin: 0px;
    	padding: 0px;
    }
    ul.menu {
    	padding:5px 10px 5px 12px;
    	margin:0px;
    }
    ul.menu li{
    	padding:0px 10px 5px 15px;
    	margin:0px;
    }
    
    ul.menu li ul {
    	padding:0px 0px 5px 0px;
    	margin:0px;
    }
    ul.menu li ul li{
    	padding:0px 0px 0px 15px;
    	border:none;
    }
    ul.menu li#current ul li a{
    	margin-left:15px;
    	text-decoration:none;
    }
    ul.mostread {
    	padding:5px 10px 5px 12px;
    	margin:0px;
    }
    ul.mostread li{
    	padding:0px 10px 5px 15px;
    	margin:0px;
    	line-height:18px;
    }
    ul.latestnews {
    	padding:5px 10px 5px 12px;
    	margin:0px;
    }
    ul.latestnews li{
    	padding:0px 10px 5px 15px;
    	margin:0px;
    	line-height:18px;
    }
    div.componentheading{
    	font-size:16px;
    	font-size:19px;
    	margin:7px auto;
    }
    td.contentheading{
    	font-weight:normal;
    	vertical-align:top;
    	font-size:19px;
    	height:30px;
    	color:#363636;
    	background: url(../images/contentheading_ico.png) left top no-repeat;
    }
    table.contentpaneopen td.contentheading{
    	padding-left:34px;
    }
    table.contentpaneopen{
    	border-collapse: collapse;
    	margin-left:5px;
    }
    td.buttonheading{
    	padding:0px 2px 0px 2px;
    }
    table.contentpaneopen td{
    	padding:0px;
    }
    .contentpaneopen p{
    	line-height:22px;
    }
    span.small, td.createdate, td.modifydate{
    	font-size:11px;
    	color:#999999;
    }
    span.pagination span, span.pagination a{
    	padding:5px;
    }
    
    
    
    div#f_area{
    	background: #3E4095 url(../images/f_area_bg.png) bottom center no-repeat;
    	margin:0px auto;
    	width: 978px;
    	text-align:left;
    	margin-bottom:3px;
    }
    #f_area div.moduletable, #f_area div.moduletable_menu{
    	float: left;
    	margin:10px 4px 10px 6px;
    	width: 234px;
    }
    #f_area h3{
    	text-align: left;
    	vertical-align:bottom;
    	height: 30px;
    	width: 180px;
    	color:#333;
    	font-size:19px;	
    	font-family:"Trebuchet MS", Tahoma, Verdana;
    	font-weight:normal;
    	margin:0px;
    	padding-left: 54px;
    	padding-top:20px;
    }
    
    /* System Standard Messages */
    #system-message { margin-bottom: 20px; }
    
    #system-message dd.message ul { background: #C3D2E5 url(../../system/images/notice-info.png) 4px center no-repeat;}
    
    /* System Error Messages */
    #system-message dd.error ul { color: #c00; background: #E6C0C0 url(../../system/images/notice-alert.png) 4px center no-repeat; border-top: 3px solid #DE7A7B; border-bottom: 3px solid #DE7A7B; margin:0px; padding-left: 40px; text-indent:0px;}
    
    /* System Notice Messages */
    #system-message dd.notice ul { color: #c00; background: #EFE7B8 url(../../system/images/notice-note.png) 4px center no-repeat; border-top: 3px solid #F0DC7E; border-bottom: 3px solid #F0DC7E;}
    
    #syndicate{
    	float:left;
    	padding-left: 25px;
    }

  6. #6
    t-l
    t-l ist offline
    Neu an Board
    Registriert seit
    24.07.2005
    Beiträge
    23
    Bedankte sich
    1
    Erhielt 0 Danksagungen
    in 0 Beiträgen

    Standard

    Ich habe es jetzt anders gelöst! Mit drei Spalten und drei Zeilen, wobei die mittlerste Spalte in allen Zeilen verbunden wurde.

+ Antworten

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein