Hallo Liebe Community!
Ich habe ein kleines Problem - und zwar bin ich dabei für unser Unternehmen eine neue Webseite zu basteln. Die jetzige ist schon arg in die Jahre gekommen und nicht wirklich mehr Up-2-Date. Deshalb habe ich mir ein schönes Template für ein responsive Design aus den Netz geladen, wo ich nun allerdings das Problem habe, dass Formatierungen im HTML Code einfach mal komplett sinnlos sind, weil sie nicht mehr berücksichtig werden. Nur der Zeilenumbruch-Code scheint nocht wie gewünscht zu funktionieren...
Hier mal meine style.css:
Damit ich Texte in Fett oder Kursiv formartieren kann, musste ich schon in der CSS Datei Ergänzungen vornehmen (.fett und strong). Mein jetziges Problem bekomme ich aber gar nicht mehr in den Griff, und zwar möchte ich in einer unter einer section (id text_columns) und einem article (class column1) eine Tabelle einfügen mit einem Zwischenabstand. Der Code hierfür sieht wie folgt aus:
Leider werden hier border (nur testhalber drinne, Tabelle soll eigentlich keine Ränder haben) und cellspacing gar nicht beachtet. Habe es auch schon außerhalb der section oder article Tags versucht, leider auch ohne Erfolg. Die Jahreszahlen und Beschreibungen sind ganz dicht aneinandergequetscht (siehe http://johapck.esy.es für Ansicht im Browser).
Meine Vermutung ist nun, dass es an der CSS liegen muss, die dies generell irgendwie "untersagt" oder andersweitig formatiert. Ich kann hier allderdings nichts finden, was das beinträchtigen sollte. Allerdings sind meine css Kompetenzen sicherlich nicht die besten. So fasse ich beispielsweise die Formatiertungen für die Mobilen Geräte gar nicht erst an.
Würde mich freuen, wenn mir jemand weiterhelfen könnte.
Ich habe ein kleines Problem - und zwar bin ich dabei für unser Unternehmen eine neue Webseite zu basteln. Die jetzige ist schon arg in die Jahre gekommen und nicht wirklich mehr Up-2-Date. Deshalb habe ich mir ein schönes Template für ein responsive Design aus den Netz geladen, wo ich nun allerdings das Problem habe, dass Formatierungen im HTML Code einfach mal komplett sinnlos sind, weil sie nicht mehr berücksichtig werden. Nur der Zeilenumbruch-Code scheint nocht wie gewünscht zu funktionieren...
Hier mal meine style.css:
Code:
/* GLOBAL */ .fett { font-weight: bold; } table { border-spacing:10pt; } body { border-top:5px solid #e56038; background:#FFFFFF; font-family: 'Open Sans', sans-serif; color:#333333; } input { font-family: 'Open Sans', sans-serif; font-size:16px; padding: 7px; outline: 0; border:0; width:250px; background: #EBE8DE; border-radius:5px; } textarea { font-family: 'Open Sans', sans-serif; font-size: 14px; padding: 7px; background: #EBE8DE; } input[type=submit] { width:auto; padding: 5px 18px; line-height:25px; text-shadow:none; cursor:pointer; box-shadow: none; background: #333333; color: #fff; } input[type=checkbox] { width:auto; padding: 5px 18px; line-height:25px; text-shadow:none; cursor:pointer; box-shadow: none; background: #333333; color: #fff; } p { margin:5px 0; line-height:25px; } a { text-decoration:none; color:inherit; transition: color .5s ease; } a:hover { color:#E56038; } strong { font-weight:bold; } italic { font-style:italic; } figcaption strong { border-bottom: 1px solid #D6D0C1; padding-bottom:10px; margin: 10px 0; display:block; } figcaption { line-height: 25px; font-size:14px; width:200px; } hr { background-color: #D6D0C1; border:0; height:1px; margin:20px 0; } /* HEADER */ header { position:relative; width:auto; max-width:900px; margin: 0 auto 20px auto; } header h1 { margin:35px 0 0 0; font-size:55px; color:#e56038; font-family: 'Baumans', cursive; } header p { font-family: 'Open Sans', sans-serif; font-size:16px; color: #4A463B; margin-left:132px; } nav { position:absolute; right:0; bottom:0; } nav ul { list-style:none; } nav ul li { display:block; float:left; padding:3px 15px; } nav ul li a { font-family: 'Open Sans', sans-serif; text-transform:uppercase; transition: all .25s ease; } nav ul li a:hover { color:#E56038; } #mobileMenu { position: fixed; top: 0; left: 0; width: 100%; display: none; } #mobileMenu ul li { display:block; background-color: #E56038; color: #fff; padding: 12px 0; letter-spacing: 0.1em; text-align: center; text-transform: uppercase; border-bottom: 1px solid #CC5836; } .toggleMobile { display: none; } /* 3 COLUMNS */ #boxcontent { width:auto; max-width:900px; margin:0 auto; padding:70px 0 45px 0; } #boxcontent article { float:left; width:250px; margin-right:45px; font-size:14px; } #boxcontent article h3 { font-family: 'Open Sans', sans-serif; font-size:100px; margin-bottom:10px; margin-left:75px; } #boxcontent article img { float:left; } #boxcontent article p { line-height:25px; font-family: 'Open Sans', sans-serif; margin-left:75px; } #slider_content1, #slider_content2, #slider_content3, #slider_content4 { line-height: 25px; font-family: 'Open Sans', sans-serif; width:350px; position:absolute; top:15%; left:15%; display:none; z-index:11; } #slider_content1 h3, #slider_content2 h3, #slider_content3 h3, #slider_content4 h3 { color:#EBE8DE; font-size:25px; font-weight:bold; margin-bottom:10px; background-color:#333333; padding:10px 15px; border-radius: 15px 0 15px 0; display:inline-block; } #slider_content1 { display:block; } #slider_content1 p, #slider_content2 p, #slider_content3 p, #slider_content4 p { margin:0 0 30px 0; color:#4a463b; background-color:#EBE8DE; padding:10px 15px; border-radius: 5px; } /* BUTTONS */ .button { padding:7px 14px; border: 1px solid #c3532e; background-image: linear-gradient(bottom, #E56038 0%, #ff8c66 100%); background-image: linear-gradient(to bottom, #ff8c66 0%, #E56038 100%); background-color: #eb653c; color: #EBE8DE; text-shadow: 1px 1px 0px #ff8155; text-decoration:none; border-radius:5px; box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, 0.3); } .button:hover { background:none #EBE8DE; border-color: #EBE8DE; text-shadow:none; color: #4A463B; } /* SPACER */ #spacer { width:auto; height:70px; background-color:#e56038; position:relative; font-family: 'Open Sans', sans-serif; color:#fff; font-size:18px; } #spacer p { margin-top:22px; width:auto; position:absolute; left:50%; margin-left:-450px; } #spacer .search { margin-top:15px; width:auto; position:absolute; right:50%; margin-right:-480px; } /* FOUR COLUMNS */ #four_columns, #text_columns { line-height:25px; font-family: 'Open Sans', sans-serif; clear:both; width:auto; max-width:900px; margin:0 auto; } #four_columns h2, #text_columns h3 { font-size:20pxpx; border-bottom: 1px solid #D6D0C1; padding: 20px 0; margin-bottom: 20px; } #four_columns .img-item { float:left; margin-right:25px; } #four_columns .img-item a { position:relative; display:block; } .thumb-screen { display:block; position:absolute; top:0; left:0; width:100%; height:113px; background: #000 url(img/zoom.png) center center no-repeat; z-index:99; opacity: 0; transition: opacity .5s ease; } .thumb-screen:hover { opacity:0.5; } /* TWO COLUMNS */ #text_columns article.column1, #text_columns .column2 { margin: 70px 0; font-size:14px; float:left; width:auto; max-width: 450px; } #text_columns .column2 { margin: 70px 0; font-size:14px; float:right; width:auto; max-width: 450px; } .row { position:relative; margin: 40px 0 0 50px; float:right; width:350px; } .row img { float:left; } .row p { margin-left: 100px; } .rocket, .clock { top:0; left:0; position:absolute; height: 80px; } .rocket:hover { opacity:0; transition: opacity 0.4s ease 0.2s; animation-name: stylie-transform-keyframes; animation-duration: 700ms; animation-delay: 0ms; animation-fill-mode: forwards; animation-timing-function: linear; animation-iteration-count: 1; transform-origin: 0 0; } .clock:hover { animation-name: stylie-transform2-keyframes; animation-duration: 100ms; animation-delay: 0ms; animation-fill-mode: forwards; animation-timing-function: linear; animation-iteration-count: infinite; transform-origin: 0 0; } /* FOOTER */ footer { position:relative; clear:both; width:auto; height:350px; background:#333333; } footer .wrapper { line-height:25px; margin: 0 auto; padding-top:30px; width:auto; max-width:900px; font-size:14px; } footer .wrapper .column { font-family: 'Open Sans', sans-serif; color:#ababab; float:left; width:280px; margin-right:20px; } footer .wrapper .column.midlist ul li { display:block; width:auto; padding:0 0 10px 25px; margin-bottom:10px; border-bottom: 1px solid #444444; background:url(img/arrowright2.png) left 6px no-repeat; } footer .wrapper .column.midlist ul li a:hover { color:#fff; } footer .wrapper .column.rightlist ul li { display:block; width:auto; margin-bottom:15px; } footer .wrapper .column.rightlist ul li a span { margin-left:95px; display:block; } footer .wrapper .column.rightlist ul li a img { transition: border .25s ease; float:left; border:3px solid #444444; } footer .wrapper .column.rightlist ul li a img:hover { border-color: #5e5e5e; } footer .wrapper .column h4 { font-size: 16px; color: #fff; border-bottom: 1px solid #444444; padding: 0 0 10px 0; margin-bottom: 10px; } #copyright { background: #1D1D1D; height:70px; position:absolute; bottom:0; left:0; width:100%; } #copyright .wrapper { font-family: 'Open Sans', sans-serif; padding-top:25px; color: #5e5e5e; font-size:14px; position:relative; } #copyright .wrapper .social { position:absolute; right:0; top:25px; } #copyright .wrapper .social a { transition: opacity .25s ease; opacity: 0.3; margin-left: 12px; display:block; float:left; } #copyright .wrapper .social a:hover { opacity: 0.7; } #copyright .wrapper a { color: #ABABAB; } #copyright .wrapper a:hover { color: #fff; } /* SKIPLINK */ .go-top { position: fixed; bottom: 2em; right: 2em; text-decoration: none; color: white; background-color: rgba(0, 0, 0, 0.3); font-size: 12px; padding: 1em; display: none; } .go-top:hover { background-color: rgba(0, 0, 0, 0.6); } /* SLIDESHOW */ /* Prevent the slideshow from flashing on load */ .slidesjs-container { border-top: 1px #d6d0c1 solid; } #slides { display: none } /* Center the slideshow */ .container { width:auto; margin: 0 auto; position:relative; } /* Show active item in the pagination */ .slidesjs-pagination .active { color:red; } #slider_content1 p .responsive_button, #slider_content2 p .responsive_button, #slider_content3 p .responsive_button, #slider_content4 p.responsive_button { display:none; color:#000; } /* MISC */ .clear { clear:both; } .hidden { position:absolute; clip: rect(1px 1px 1px 1px); /* IE6 & 7 */ clip: rect(1px, 1px, 1px, 1px); } /* MEDIA QUERIES FOR A RESPONSIVE LAYOUT */ @media (max-width: 1215px) { #slider_content1, #slider_content2, #slider_content3, #slider_content4 { width:auto; margin-right:50px; } #slider_content1 h2, #slider_content2 h2, #slider_content3 h2, #slider_content4 h2 { font-size:18px; } #slider_content1 p, #slider_content2 p, #slider_content3 p, #slider_content4 p { font-size:14px; } #slider_content1 p .responsive_button, #slider_content2 p .responsive_button, #slider_content3 p .responsive_button, #slider_content4 p .responsive_button { display:inline; } .container .button { display:none; } } @media (max-width: 915px) { #boxcontent article { float: none; margin: 30px auto 0 auto; width: 60%; } #spacer { font-size:15px; } #spacer .search { margin-top:19px; margin-right:-385px; } #spacer p { margin-left:-370px; } input { padding:4px; font-size:14px; } input[type="submit"] { padding: 1px 14px; } #four_columns { width: 500px; } #four_columns .img-item:nth-of-type(3), #four_columns .img-item:nth-of-type(4) { margin-top: 25px; } #text_columns article.column1, #text_columns .column2 { float:none; max-width: 500px; margin: 50px 30px 0 30px; } .column2 .row { float:none; margin:0 0 40px 50px; } footer .wrapper .column { font-size: 12px; width: 230px; } } @media (max-width: 765px) { .container { height:1px; top: -1500px; } header { height:120px; } header nav { right: auto; bottom: auto; left: 50%; top:100px; margin-left: -184px; } #spacer { height:100px; } #spacer p { text-align:center; position:static; margin: 0 auto; padding:15px 0 7px 0; } #spacer .search { text-align:center; position:static; margin: 0 auto; } footer { padding-bottom:70px; height: auto; } footer .wrapper { width: 350px; margin: 0 auto; } footer .wrapper .column { margin-top:30px; float:none; font-size: 14px; width: auto; } footer .wrapper .social { display:none; } } @media (max-width: 500px) { header { margin-top: 80px; text-align: center; } #spacer { height:auto; padding-bottom:15px; } #four_columns { width:auto; } #four_columns .img-item { width: 200px; float:none; margin: 25px auto 0 auto; } #four_columns h2 { margin: 0 30px; } .column2 .row { margin: 0 0 40px 10px; width:auto; } footer .wrapper { width:auto; } footer .wrapper .column { margin: 0 auto 15px auto; max-width:300px; } input { width:auto; } #mobileMenu { display: block; z-index: 99; } .toggleMobile { position: fixed; top: 10px; left: 10px; display: block; width: 40px; height: 36px; cursor: pointer; z-index: 999; } .toggleMobile span.menu1, .toggleMobile span.menu2, .toggleMobile span.menu3 { display: block; position: absolute; width: 40px; height: 8px; left: 0; background: #EDA28C; -webkit-transition: all 0.35s cubic-bezier(0.75, 0.25, 0.10, 0.95); transition: all 0.35s cubic-bezier(0.75, 0.25, 0.10, 0.95); } .toggleMobile span.menu1 { top: 0; } .toggleMobile span.menu2 { top: 14px; } .toggleMobile span.menu3 { top: 28px; } .toggleMobile.active span.menu1 { top: 14px; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); -webkit-transition: all 0.35s cubic-bezier(0.75, 0.25, 0.10, 0.95); transition: all 0.5s cubic-bezier(0.75, 0.25, 0.10, 0.95); } .toggleMobile.active span.menu2 { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-transition: all 0.35s cubic-bezier(0.75, 0.25, 0.10, 0.95); transition: all 0.5s cubic-bezier(0.75, 0.25, 0.10, 0.95); } .toggleMobile.active span.menu3 { opacity: 0; -webkit-transition: opacity 0.35s cubic-bezier(0.75, 0.25, 0.10, 0.95); transition: opacity 0.35s cubic-bezier(0.75, 0.25, 0.10, 0.95); } header nav { display:none; } header h1 { font-size:40px; } header p { margin-left: 60px; font-size:14px; } } /* KEYFRAMES */ @keyframes stylie-transform-keyframes { 0% {transform:translateX(30px) translateY(46px) rotate(0deg) translate(-50%, -50%);animation-timing-function: cubic-bezier(.25,.25,.75,.75);} 100% {transform:translateX(260px) translateY(-150px) rotate(0deg) translate(-50%, -50%);} } @keyframes stylie-transform2-keyframes { 0% {transform:translateX(40px) translateY(40px) rotate(0deg) translate(-50%, -50%);animation-timing-function: cubic-bezier(.25,.25,.75,.75);} 100% {transform:translateX(50px) translateY(40px) rotate(0deg) translate(-50%, -50%);} }
Code:
<section id="text_columns"> <article class="column1"> <h3>Geschichte</h3> <table border="2" cellspacing="5"> <tr> <td>1983</td> <td>Gründung des Unternehmens mit 4 Maschinen und einer Produktionskapazität von 20 Millionen Tabakbeuteln</td> </tr> <tr> <td>1991</td> <td>Umzug in neue Produktions- und Lagerhallen. Aufstockung auf 8 Maschinen mit einer Kapazität von 35 Millionen Beuteln</td> </tr> <tr> <td>2002</td> <td>Erweiterung des Betriebsgeländes mit einer neuen Produktionshalle (ca. 600m²)und Bürotrakt (ca. 200m²)</td> </tr> <tr> <td>2011</td> <td></td> </tr> <tr> <td>2015</td> <td></td> </tr> </table> </article> <article class="column2"> <h3>Navigation</h3> <img src="../grafik/link.jpg" height="14"> <a href="../index.php?include=about&item=a1">DAS UNTERNEHMEN</a><br> <img src="../grafik/link.jpg" height="14"> <a href="../index.php?include=about&item=a2">GESCHICHTE</a><br> <img src="../grafik/link.jpg" height="14"> <a href="../index.php?include=about&item=a3">UNSER TEAM</a><br> </article> </section>
Meine Vermutung ist nun, dass es an der CSS liegen muss, die dies generell irgendwie "untersagt" oder andersweitig formatiert. Ich kann hier allderdings nichts finden, was das beinträchtigen sollte. Allerdings sind meine css Kompetenzen sicherlich nicht die besten. So fasse ich beispielsweise die Formatiertungen für die Mobilen Geräte gar nicht erst an.
Würde mich freuen, wenn mir jemand weiterhelfen könnte.
Kommentar