WebsiteBaker Logo
  • *
  • Templates
  • Help
  • Add-ons
  • Download
  • Home
*
Welcome, Guest. Please login or register.

Login with username, password and session length
 

News


WebsiteBaker 2.13.8 is now available!


R.I.P Dietmar (luisehahne) and thank you for all your valuable work for WB
https://forum.websitebaker.org/index.php/topic,32355.0.html


* Support WebsiteBaker

Your donations will help to:

  • Pay for our dedicated server
  • Pay for domain registration
  • and much more!

You can donate by clicking on the button below.


  • Home
  • Help
  • Search
  • Login
  • Register

  • WebsiteBaker Community Forum »
  • WebsiteBaker Support (2.8.x) »
  • Templates, Menus & Design »
  • table width issues (auto vs. 100%) using daflekk Template
  • Print
Pages: [1]   Go Down

Author Topic: table width issues (auto vs. 100%) using daflekk Template  (Read 11008 times)

Offline seanie_morris

  • Posts: 301
  • Gender: Male
table width issues (auto vs. 100%) using daflekk Template
« on: January 13, 2015, 05:01:30 PM »
Hi,

I am using the daflekk layout teplate, to positive affects. However, I have a problem using tables. In one case, the full table widths occupy the full width of the content. This is due to:

Code: [Select]
table {
margin-top: 3px;
margin-bottom:5px;
width: 100%;
font: 0.85em;
border: solid;
}

If I swap the line width: 100%; for width: auto; the problem then becomes that tables are indented unnecessarily and I don't know why. The 2 attached jpegs show what is going on. Can someone help?

If you want to see full CSS code, just ask.


Thank you,

Seanie.
Logged

Offline dbs

  • Betatester
  • **
  • Posts: 8920
  • Gender: Male
  • tioz4ever
    • WebsiteBaker - jQuery-Plugins - Module - Droplets - Tests
Re: table width issues (auto vs. 100%) using daflekk Template
« Reply #1 on: January 13, 2015, 05:28:47 PM »
Hi, helpful is a link, nothing else.
Logged
https://onkel-franky.de

Offline jacobi22

  • Betatester
  • **
  • Posts: 5921
Re: table width issues (auto vs. 100%) using daflekk Template
« Reply #2 on: January 13, 2015, 05:57:44 PM »
table width: 100% use the width from the parent element, but it is a fixed width (100% from the parent element)
example: parent box has a width: 800px && padding: 10px - the table width is 800px

table width: auto is the avaiable width for the table on this place, it counts possible values for margin and padding from the parent element
example: parent box has a width: 800px && padding: 10px, row for the picture has a width == 200px - possible table width is 580px,

see post from dbs: best solution is a link - we need the source code and the css
i think, you need a new html-code for this output, two div's in a box or something like this

whats the css for the parent element?
« Last Edit: January 13, 2015, 06:06:11 PM by jacobi22 »
Logged

Offline seanie_morris

  • Posts: 301
  • Gender: Male
Re: table width issues (auto vs. 100%) using daflekk Template
« Reply #3 on: January 15, 2015, 11:24:19 AM »
Hi folks,

Thanks for the replies.

I can't see at the moment what the parent elements are that might untidy my tables like this.

Here is a link to the (testing) live view:
www.mitchellsindust rial.ie/wb

And as to a directory to a copy of all of the template files for daflekk that I am using, I can't, due to permissions! So, the two CSS files are:

style.css
Code: [Select]
html {height:100%;}

body {
margin: 0; padding: 0;
height:100%;
color:#333;
background: #eee url(img/bg.jpg) repeat fixed;
}

.container {
max-width: 980px;
    width: 100%;
    margin: 30px auto;
background: transparent  url(img/bg75.png);
z-index:300;
position:relative;
box-shadow: 0 0 60px #666;
border-radius: 30px;
}

.heading {height: 60px; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; font-size: 22px; color: cfe1e9; text-align: left; letter-spacing: 2px; text-transform: uppercase; padding-top: 0px; line-height: 60px; padding-left: 40px;}

.header, .footer { width: 100%; height:160px;  position:relative;  border-radius:30px; }
.header  {float:left; width: 100%;  margin: 0 0 0 0; border-radius: 30px 30px 0 0 ; background: #fff url(slides/slide2.jpg) no-repeat center top;}
.footer { height:280px; clear:both; border-radius: 0 0 30px 30px; background: #fff url(img/footer.jpg) no-repeat center bottom;}

.logopic {display: none; max-width:60%;}

.topmenubar { clear: both; background:#cdc2b6; margin-bottom:30px;}

.content {color: 12px; font-family: Verdana, Geneva, sans-serif; padding-left: 40px; padding-right: 40px; padding-bottom: 40px;}

.contentbox {width: 100%; float:left; }
.contentbox .inner {min-height:330px; margin: 15px 1% 20px 4%;}
.contentbox .inner p img {width: 100%;}

.contentboxwide {width: 100% ! important;  }

.footer .inner { position:absolute; top:10px; left: 0%; width:100%; font-size:12px; font-family:Verdana, Geneva, sans-serif; text-align:center; line-height:130%;  color: #000 ! important}
.footer .inner span { font-size:0.7em;}

#flecken {width:100%; height:100%; display:block; position:fixed; top:0; left:0; z-index:1;}
.fleck { position:absolute; z-index:10;}

/***********************************
menu
************************************/

a#mobilemenu {
    display:  none;   
}
a#mobilemenu span {display:block; padding: 10px 15px ; font-weight: bold;}

.search_box {float:right;  width:130px; text-align:right; margin-top:8px;}
.search_box .searchstring {
width:80px;
font-size:12px;
padding:2px;
}

.search_box .submitbutton {
vertical-align: top; margin:0 0 0 0;  background: none; border: none;
}

#showlogin {display:block; float:right; position:relative;  width:30px; text-align:right; margin:6px 6px 0 0; }
#login-box {position:absolute; width:200px; left:-190px; top:25px; padding:10px; font-size:11px; background:transparent url(img/bg75.png);}
#login-box .inputfield {width:80px; border: 1px solid #c9e8f9; padding:1px;}


/* Link Formatting */
ul.nav, ul.extramenu {
list-style-type: none;
/* *zoom: 1; */
margin: 0; padding: 0;
position: relative;
}

ul.nav li {
float: left;
list-style-type: none;
list-style-image: none;
position: relative; 
font-weight: normal;
margin: 0; padding: 0;
border-right: 3px solid #fff;
}

.nav li a {
display: block;
text-decoration: none;
font-weight: normal;
line-height:140%;
font-size:14px;
/*text-shadow: 1px 1px 1px #000;*/
padding: 10px 10px;
    color:#fff;
}


/* Hover Formatting */
.nav  li a:hover, .nav li a:focus, .nav li a:active, .nav li a.active, .nav a.menu-current, .nav a.menu-parent {
background-color: #6bb622;  color: #fff;
}


/* 2 level */
.nav li ul {
    display: none;
    width: 15em;
    margin: 0; padding:0;
    position: absolute;
    box-shadow: 0 10px 40px #666;
}

.nav li ul li {
width: 15em;
text-align: left;
font-weight: normal;
margin: 0;
padding: 0;
border-top: 1px solid #cdc2b6;
border-right: none;
background-color:#9e8d7b;
}

.nav li ul li a {

    color: #fff;
    font-weight: normal;
    padding: 6px 10px;
}


/* 2 level hover */
.nav li ul a:hover,  .nav li ul a.menu-current { background-color: 6bb622;  color: #000;}


/* Show and hide */
.nav li:hover ul, .nav li a:focus ul {display: block; }
.nav li ul ul { display: none;}
.nav li:hover ul ul {display: none;}
.nav li:hover>ul, .nav  li li:hover>ul {display: block;  z-index: 1000;}


/* 3 Ebene  */
.nav li ul li ul {
margin: -20px 0 0 70%;
padding:0;
z-index: 9999; 
display: none;
width: 11em;
}

.nav li ul li ul li {width: 11em;}


/* Positioning hover */
.nav li {position: relative;}

.nav li:hover {
z-index: 10000;
white-space: normal;
}

/*Flexslider */
div.flex-viewport ol.flex-control-nav {
bottom: 10px ! important;
}


/*==================================================================================================*/

/*Overview List*/
.mod_topic_loop a.videoblock {
display: block;
float:left;
width: 200px;
max-width:35%;
height: 110px;
overflow: hidden;
margin: 0 10px 10px 0;
background:#000;
}

.mod_topic_loop a.videoblock img {
width: 100%;
opacity:0.8;
}

.mod_topic_loop a:hover.videoblock img {
width: 130% ! important;
height:auto;
margin-left: -15% ! important;
margin-top: -30px ! important;
opacity:1;
}

/*Topic Sidebar:*/
.mod_topic_prevnext div {clear:left; font-size:11px; margin-top:20px;}

.mod_topic_prevnext a.videoblock {
display: block;
float:left;
width: 100px;
max-width:50%;
height: 60px;
overflow: hidden;
margin: 0 5px 0 0;
background:#000;
}

.mod_topic_prevnext a.videoblock img {
width: 100%;
height:auto;
opacity:0.8;
}

.mod_topic_prevnext a:hover.videoblock img {
width: 130% ! important;
height:auto;
margin-left: -15% ! important;
margin-top: -5px ! important;
opacity:1;
}


/*frontteaserblock*/

.frontteaserblock {margin:30px 0; width:100%; overflow:hidden;}
.frontteaserblock div {width:103.3%;}
.frontteaserblock div a {float:left; display:block; width:31%; margin-right:2%; opacity:0.9; background:#fff;}
.frontteaserblock div a img {width:100%; }
.frontteaserblock div a .mt_title {display:block; margin:10px 5px 0 10px; height:40px; font-size:16px; lineheight:120%; font-weight:bold; }
.frontteaserblock div a .mt_desc {display:block; margin:0 5px 0 10px; height:90px }
.frontteaserblock div a:hover  {opacity:1;}

.mobiles_only {display: none;}
.desktops_only {}

.mod_topic_commentbox {
background: transparent;
}

/* ================================================================================================= */
/* Smaller Screens */
@media screen and (max-width: 768px) {

body { background-image: none; }

.mobiles_only {display: block;}
.desktops_only {display: none;}

.search_box {margin-top:-30px;}
#showlogin {display:none;}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
.container { width: 100%; border-left: none; border-right: none;}

.mainbox {margin: 20px 0 20px 0;}
.contentbox {width: 100%;}
.rightbox {width: 100%; border-left: none;  border-right: none; }
#flecken {display:none ! important;  }

.footer { width: 100%; }
.contentbox .inner {margin: 10px;  }

a#mobilemenu {
display:  block; 
background: #9e8d7b;   
color: #fff;
width:100%;
clear: both;
font-size:16px;
}

ul#mobile, ul#mobile ul, ul#mobile ul ul {width:100% ! important; position: static ! important; margin: 0 0 0 0 ! important; display: none}

ul#mobile ul {}
ul#mobile li, ul#mobile li li, ul#mobile li li li {
width:100% ! important;
float: left;
border-right: none;
display: block;
border-bottom: 1px solid #fff;
background-color: #333;
}

ul#mobile li.menu-parent > ul, ul#mobile li.menu-current > ul {display: block}
ul#mobile {display: block}

ul#mobile a {padding: 10px 5px; color:#fff;}
ul#mobile a.menu-parent {  background-color: #4dc4ef;}
#mobile a.menu-parent { }

ul#mobile {display:none;}

.tp_picture  {max-width:40%;}
.tp_picture .tp_pic {max-width:100%;}

.frontteaserblock div {width:100%;}
.frontteaserblock div a {width:100%; clear:left; margin-bottom:30px;}
.frontteaserblock div .row1 {clear:left;}
.frontteaserblock div a img {width:48%; float:left; margin-right:4%;}
.frontteaserblock div a .mt_title {height:auto; margin-bottom:20px;}
.frontteaserblock div a .mt_desc {height:auto; }
}


/* ================================================================================================= */
/* Smaller Screens */
@media screen and (max-width: 400px) {

.frontteaserblock div a img {width:100%; float:none;}
.frontteaserblock div a .mt_title {clear:both; height:auto; margin:10px 5px 5px 10px;}
.frontteaserblock div a .mt_desc { margin:0 5px 30px 10px; }
}

editor.css
Code: [Select]
@import url(http://fonts.googleapis.com/css?family=Lato:400,900,400italic,900italic);

body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-family: 'Lato', sans-serif;
font-size: 14px;
line-height:130%;
color:#333;
}


/* basics */
area, usemap {border:0;}
a img {border:0;}
a { text-decoration: none;}

/*colors*/
/*orange*/
h1, h2, h3, a { color: #62aa18; }
.nav li a:hover, .nav li a:focus, .nav li ul li a, .nav a.menu-current, ul.nav a.menu-parent { background-color: #f57700; color: #fff; }

p, h1, h2, h3, h4, h5, h6 { margin: 3px 0 10px 0; }

p {line-height:150%; }

h1, h2, h3 {line-height:120%; }
h4, h5, h6 { color: #9e8d7b; }
h1 { font-size:48px; line-height:80%; font-weight:400; text-shadow: 2px 6px 9px #999;}
h2 { font-size: 28px; text-shadow: 2px 6px 9px #aaa;}
h3 { font-size: 18px; text-shadow: 2px 4px 9px #ccc; }
h4 { font-size: 16px;}
h5 { font-size: 14px; }
h6 { font-size: 12px; }

a:hover {color: #000;}

.topmenubar a { font-size: 18px ! important; }

hr{
border:dotted #327893 1px; height:1px;
}

li {
padding-bottom: 4px;
}

ul {
margin-top: 0;
margin-bottom: 10px;
margin-left: 0.9em;
padding-left: 0.9em;
list-style-image: url(img/li.gif);
list-style-type: square
}

ol {
margin-top: 0;
margin-bottom: 10px;
margin-left: 0.9em;
padding-left: 0.9em;
}

address {
line-height:120%;
margin: 10px 0 20px 0;
padding-left: 10px;
border-left: 6px solid #cdc2b6;
font-style: normal;
font-weight: bold;
}

blockquote {
padding: 10px;
margin: 0 0 0px 0;
}

pre, code {
padding: 5px 0 10px 6px;
margin: 3px 0 20px 0;
font-size:1em;
overflow:auto;
line-height:1.5em;
color:#eee;
}

table {
margin-top: 3px;
margin-bottom:5px;
width: auto;
font: 0.85em;
border: solid;
}

/*
table caption {font-size:1.1em; text-align:left; }
table th {font-size:0.9em; padding: 4px; text-align:left; vertical-align: top;  border-bottom: 1px solid #373737;}
table tbody td {font-size:0.9em; padding: 4px; vertical-align: top;  border-bottom: 1px solid #373737;}
table tbody tr:hover td {background-color:#444;}
tbody td p, tbody td h1, tbody td h2, tbody td h3, tbody td h4 {margin: 0; line-height:110%;}
*/
input , textarea, pre, code, blockquote, select {
border: 1px solid #9e8d7b;  background: transparent  url(img/bg50.png);  color: #000;
}


/*-----------------------------------------------------------------*/

/* Specials */
p img[align="right"], h3 img[align="right"] { float:right; margin: 4px 0 5px 10px;}
p img[align="left"], h3 img[align="left"] { float:left; margin: 4px 10px 5px 0;}


As of this moment I will not be editing the files, I have to work on images and content for the rest of the pages.
Logged

Offline dbs

  • Betatester
  • **
  • Posts: 8920
  • Gender: Male
  • tioz4ever
    • WebsiteBaker - jQuery-Plugins - Module - Droplets - Tests
Re: table width issues (auto vs. 100%) using daflekk Template
« Reply #4 on: January 15, 2015, 12:21:45 PM »
Hi, looks for me so:
- in editor.css is a definition for tables (line 96 , width: auto)
- in style.css is no definition for tables
- in your content are tables with own styles ala <table width="100%"

What is your goal?

Try !important like
Code: [Select]
width: auto!important;
or
width: 100%!important
Logged
https://onkel-franky.de

Offline jacobi22

  • Betatester
  • **
  • Posts: 5921
Re: table width issues (auto vs. 100%) using daflekk Template
« Reply #5 on: January 15, 2015, 12:50:23 PM »
thx for the link!

Page: Power Tools

1. its better to use not width (and height) in <table>, best way is a special css-class like <table class="tableform1"> or inline-styles like <table style="width:100%;">

2. parent element is content, content has a width=100% (from element container) and max-width=980px
 
3. you use align="center" for the tables, this put all your tables in the center of content, also the smaler tables
 
4. in some of your tables you use <table width="100%"..., but in the editor.css you have a definition for table == width:auto
width:auto is the width, what the table content needs, it counts the max-width from the longest text-line, add all margins and paddings, text-indents etc and build a row, the summary of all rows is the width: auto
example: longest text line in table 1 is this: Nailing, Riveting, Stapling applications plus padding-left:0.9em - thats the width from one row * 3 (three rows a 33%) - thats your auto-width for table 1
the different between table 2 and table 3 is the width from the longest text line, thats way you have different auto widths
a simple solution can be a border:0 for the tables or special table styles (with css for every table)

5. you use list's in every table row, but your css-definition for ul in editor.css say: padding-left: 0.9em;
thats your indent for the smaler tables like the tables under Diesel/Petrol-powered Tools
if you use in this smal tables a definition like table align=left or style definitions with margin to bring the table to the left border in combination with table width:auto, you have now Place for more content on the right side of the table, so that the next text line starts there (and not under the table)

@ dbs
Quote
width: 100%!important
set all tables to the full content width - thats not the best solution for the smaler tables

i think, its better to use not a standard width in the general table css (editor.css) - it works for all tables
delete this line and use separat css-definition for every table


Logged

  • Print
Pages: [1]   Go Up
  • WebsiteBaker Community Forum »
  • WebsiteBaker Support (2.8.x) »
  • Templates, Menus & Design »
  • table width issues (auto vs. 100%) using daflekk Template
 

  • SMF 2.0.19 | SMF © 2017, Simple Machines
  • XHTML
  • RSS
  • WAP2