• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Fixe Breite im Content-Bereich

D

domjuan

Neues Mitglied
Halli Hallo,
bin noch relativ neu in der webdesign welt und gerade dabei eine webseite mit visual web developer zu erstellen. läuft auch alles super nur eine sache nervt mich riesig und ich weiß nicht, wie ich das problem fixen kann.

das grundgerüst baut sich auf einer tabelle auf (ich weiß, ist nicht die eleganteste art, bin aber schon soweit, dass ichs nicht mehr ändern möchte).

Mein Problem: bei der erstellung der masterseite habe ich dem contentbereich eine fixe breite zugeordnet. Er soll sich also bei der texteingabe nur vertikal erweitern. soweit alles in ordnung, aber nur so lange kein text drin steht, denn wenn ich einen längeren Text eingebe, dann erweitert sich (außer ich füge breaks manuell ein) die contentzelle. habe schon alles versucht, habe auch jeder td eine css klasse gegeben und es mit "table-layout: fixed;" versucht (was mit das komplette design zerschießt...)

auch wenn ich eine weitere div in die contentzelle reingebe und dieser eine fixed-width gebe, wird der bereich trotzdem auch horizontal erweitert.

ich wäre euch sehr dankbar, wenn ihr mir hier einen kleinen tipp geben könntet, wie ich das problem in den griff bekommen kann.

vielen dank & grüße

dom
 
domjuan schrieb:
das grundgerüst baut sich auf einer tabelle auf (ich weiß, ist nicht die eleganteste art, bin aber schon soweit, dass ichs nicht mehr ändern möchte).
Zum Vergrößern anklicken....
Das ist nicht nur keine elegante Art, das ist einfach falsch und Nonsense. Und Deine Besucher werden es wollen, dass Du es änderst. Außerdem wird der Wartungsaufwand Deiner Website deutlich reduziert, wenn Du anständig arbeitest und nicht mit Hacks aus den 1990er Jahren. Die Zeit, die Du jetzt investierst, um richtig HTML und CSS zu lernen, holst Du später mehrfach wieder raus.

ich wäre euch sehr dankbar, wenn ihr mir hier einen kleinen tipp geben könntet, wie ich das problem in den griff bekommen kann.
Zum Vergrößern anklicken....
Aber gern doch, hier ein Tipp:
Stell einen Link zur Seite ein, damit man sich das vorstellen und Dir adäquat helfen kann.
 
Danke, Link gibts noch nicht weil die Seite noch nicht online ist. Habe aber einen Screenshot sowie den html und css code eingefügt. Meinst Du wirklich, ich muss das Ganze von vorne komplett mit divs aufbauen?

Danke trotzdem für jegliche Hinweise, wie ich die Breite des Content-Bereiches fixieren kann!!

VG

Hier noch der CSS-Code, den html Code hab ich aus Platzgründen angehängt:
Code: 
/* color coding
dark green: #002600
green: #2a5818
lighter green: #778a1f
very light green: #c4cd4b

blue:
dark blue: #3269bd
blue: #4b8ff7
light blue: #9fc6ff
lighter blue: #bddbff
white/blue: #f0fbff

orange: #f9b634
yellow: #fcdc3b
bright yellow: #fffb48
dirty yellow: #ae7210
dark red: #910909

*/

/* Main Elements */
body 
{
    font-family:Arial;
    color:Black;
    background-color:#48494b;
    left:0px;
    top:0px;
    margin-top:0px;
    margin-left:0px;
    font-size:12px;
    
}





/* Table Section*/
 .maintable
        {
            width: 900px;
            border:solid 1px white;
           
          
            
          
        }
 .tablehead
 {
 }
 .tablenavleft
 { width: 730px;
   vertical-align:top;
   background-color:#2a5818;
   border-bottom:solid 1px black;
   border-top:solid 1px black;
   height:30px;
 }
 .tablenavright
 {
     width: 170px;
     background-color:#2a5818;
     border-bottom:solid 1px black;
     border-top:solid 1px black;
     height: 30px;
     vertical-align:top;
     color:White;
  
 }
      
 .tablecontentleft
 {
     width:180px;
     background-image: url('Images/Background_image_tablecontentleft.gif');
     background-repeat:repeat-y;
     padding-left:5px;
     padding-top:5px;
     padding-bottom:5px;
 }
 
 .tablecontentcenter
 {
     width:550px;
     background-color:#f0fbff;
     padding-bottom:5px;
     
 }
 .tablecontentright
 {
    width: 170px;
    background-color:#3269bd;
    background-image: url('Images/Background_image_tablecontentright.gif');
    background-repeat:repeat-y;
    vertical-align:top;
 }
 .footerleft
 {
     font-size:10px;
     vertical-align:bottom;
     color:White;
     background-color:#2a5818;
     padding-left:5px;
     padding-bottom:2px;
     border-top:solid 1px black;
 }
 .footerright
 {   font-size:10px;
     vertical-align:bottom;
     color: White;
     background-color:#2a5818;
     border-top:solid 1px black;
     padding-bottom:5px;
     
 }
 
 /* Links & Menus*/
 .register
 {position:relative;
     right: 20px;
     top:0px;
     color: White;
}
 
.agb
{
    position:relative;
    right: 20px;
    margin-bottom:0px;
    color:White;
    font-size:10px;
    
}


     
/* white links*/

a
{
    text-decoration:none;
   
    color:White;
    font-weight:bold;
    }
    
    a:hover
{ 
    color:#f9b634;
    font-weight:bolder;
}

/* dark green links*/

.greenlink
{
    font-weight:bold;
    color: #002600;
    text-decoration:underline;
}
/* Main Menu Horizontal*/
.mainmenu
{
   position: relative;
   left: 5px;
   top:5px;
   height: 20px;
   background-color:#002600;
   padding: 1px 2px 1px 2px;
   font-size:13px;
  
}

.mainmenuitem
{
    
    border-right: solid 1px #002600;
    padding:0px 2px 0px 2px;
  
}
.mainmenuitem:hover
{
   
    border-right: solid 1px #f9b634;
    padding:0px 2px 0px 2px;
    
  
}

/* Left Hand Sub Menu*/

.submenu
{
    font-size:13px;
    list-style-type:none;
    line-height:25px;
}
.submenuitem
{
    padding-left:5px;  
    padding-right:5px;
    border-top:solid 1px #778a1f;
   }
.submenuitem:hover
{

}
    

.dynamicsubmenuitem
{
   font-size:13px;
    list-style-type:none;
    line-height:25px;
    border-top:solid 1px #778a1f;
    border-left:solid 1px white;
}

/*Breadcrumbs*/
.sitemappath a
{
    padding: 1px 1px 1px 1px;
}
/* Text*/

h1
{
    font-size: 24px;
    color:#002600;
    padding-left:5px;
}
h2
{
    font-size:18px;
    color:#002600;
    font-style:italic;
    font-weight:lighter;
    padding-left:5px;
}
p
{
    font-size:12px;
    padding-left:5px;
    line-height:8px;
    
}

b
{
    font-size:12px;
    color:Red;
        }

ul li
{
    color:#3269bd;
    font-weight:bold;
    font-size:12px;
    position:relative;
    line-height:20px;
    list-style-image: url('Images/Bullet.gif');
}
    

.statuscontent
{
    width:170px;
    height:40px;
    position:relative;
    top:0px;
    left:0px;
    background-image:url('Images/Background_image_statuscontent2.png');
    background-repeat:no-repeat;
    background-position:right 0px;
    text-align:right;
    font-size:10px;
    padding-top: 2px;
    padding-right:5px;    
    color:White;
    
   
}
    
/*NEWS*/
.newscontainer
{
    min-width:170px;
    max-width:170px;
    position:inherit;
         top:0px;
    right:0px;
    float:right;
     }
    
.newsmaindiv
{
    min-width:170px;
    max-width:170px;
    height:30px;
    position:relative;
    right:0px;
    color: white;
    font-size:13px;
    font-family:Arial;
    font-weight:bold;
    vertical-align:middle;
    background-image: url('Images/Background_image_newslist.png');
    background-repeat:no-repeat;
    background-position:0px 0px;
    padding-top:4px;
    padding-left: 25px;
      
}
.newstitlediv
{
    width:150px;
    color: #910909;
    font-size:12px;
    font-family:Arial;
    font-weight:bold;
    vertical-align:bottom;
    margin-left: 7px;
    padding-bottom:2px;
    position:inherit;
    right:0px;
   
}
.newsbodydiv
{
    width:150px;
    position:inherit;
    color: black;
    font-size:11px;
    font-family:Arial;
    vertical-align:bottom;
   margin-left: 7px;
    padding-bottom:2px;
      right:0px;
}
.newslinkdiv
{
    width:150px;
    position:inherit;
    color: black;
    font-size:11px;
    font-family:Arial;
    font-weight:bold;
    vertical-align:bottom;
    margin-left: 7px;
    padding-bottom:2px;
    border-bottom:dotted 1px black;
    text-decoration:underline;
      right:0px;
}


.formcontainer
{
    width:400px;
    height:150px;
    background-image:url('Images/formcontainer.png');
    background-position:0px 0px;
    color:Black;
    padding-left:30px;
       
    }
.formcontent
{padding-left:20px;
}


.formcontent a:hover
{
    color: #f9b634;
    font-weight:bolder;}
    
.loginbutton
{
    background-color:#2a5818;
    color:White;
    font-weight:bold;
    position:relative;
    left:60px;
    top:-68px;
   
}
 

Anhänge

  • Masterseite.jpg
    Masterseite.jpg
    65,9 KB · Aufrufe: 3
  • html.txt
    html.txt
    5,6 KB · Aufrufe: 2
domjuan schrieb:
Danke, Link gibts noch nicht weil die Seite noch nicht online ist.
Zum Vergrößern anklicken....
Sollte man nicht Hilfswilligen die Arbeit so einfach wie möglich machen? Meine installierten Developer-Tools kann ich leider nicht auf in einem Forum geposteten Code anwenden.

Meinst Du wirklich, ich muss das Ganze von vorne komplett mit divs aufbauen?
Zum Vergrößern anklicken....
Nein! Natürlich nicht! Das wäre ja genauso falsch wie mit Tabellen! Layout macht man mit CSS, nicht mit HTML, egal ob man dafür <table>, <div>, <p> oder <address> verwendet. HTML-Tags sind alle nicht fürs Layout gedacht!

Danke trotzdem für jegliche Hinweise, wie ich die Breite des Content-Bereiches fixieren kann!!
Zum Vergrößern anklicken....
Bei Tabellen ist es eigentlich gewünscht, dass sich die Zellen der Größe anpassen. Ich kann nur wieder empfehlen, HTML richtig einzusetzen und Layout mit CSS zu machen, dann sind Deine Probleme auch weg.
 
sorry, jetzt steh ich ein bisschen auf dem schlauch. mir ist schon klar, dass ich das layout mit css machen muss. das habe ich (bis auf wenige ausnahmen) auch gemacht. wenn die seite eine fixe breite von 900px haben und immer in der mitte des screens positioniert sein soll, dann brauch ich unbedingt eine fixe breite im contentbereich (außer ich füge beim schreiben manuelle breaks ein, sodass es immer passt, aber das ist wohl alles andere als elegant). auch wenn ich alles mit css style dann bleiben mir im html doch trotzdem nur table oder div als container für den content (oder?).

ich habe schon ziemlich viel ausprobiert: die breite der td mit css zu fixieren, eine div in die td mit fixer breite einfügen etc..pp. es kann ja nicht so schwer sein, die breite fix einzustellen.

deine antwort "html richtig einsetzen und mit css stylen" hilft mir daher leider nicht viel weiter, kannst du vielleicht ein bisschen konkreter sein ;-)?

vielen dank
 
domjuan schrieb:
auch wenn ich alles mit css style dann bleiben mir im html doch trotzdem nur table oder div als container für den content (oder?).
Zum Vergrößern anklicken....
Nein. Das eine hat mit dem anderen rein gar nichts zu tun.

HTML dient zur logischen Auszeichnung Deines Inhalts. Für jede Bedeutung gibt es ein HTML-Tag, das diese Bedeutung vermittelt. Wenn Du z.B. eine Überschrift hast, dann wird die mit <h1> (bzw. einer anderen Ordnung als 1) ausgezeichnet. Wenn Du einen Textabsatz hast, wird der mit <p> ausgezeichnet. Wenn Du eine Adresse hast, wird die mit <address> ausgezeichnet. Wenn Du einen wichtigen Text hast, wird der mit <em> ausgezeichnet, ein sehr wichtiger Text mit <strong>. Ein Eingabefeld bekommt <input> und tabellarische Daten werden mit <table> ausgezeichnet, und ein Block zusammengehöriger Elemente (also mindestens zwei!) werden mit <div> gruppiert.
Zu einem anderen Zweck verwendet man die HTML-Tags und HTML im Allgemeinen nicht. Schon gar nicht verwendet man HTML, um damit irgendeinen optischen Effekt zu erzielen. Das geht allein mit CSS, genauso wie das Layout.

Natürlich kannst Du auch ein <h1> stylen, dass die Schrift klein und nicht fett ist, oder dass eine <address> fett, in einer anderen Schrift und am rechten Rand stehen soll. Das alles macht man mit CSS und nur das: Festlegen, wie ein Element aussehen soll und wo es stehen soll.

Wenn Du also "alles in CSS stylest", hast Du nicht nur eine begrenzte Zahl COntainer dafür, denn zu dem Zeitpunkt, wo Du "stylest", stehen die Elemente, die Du benötigst, schon fest. Die HTML-Elemente sind aber untrennbar mit dem Inhalt verbunden und werden von diesem bestimmt und in keiner Weise von CSS oder vom Layout.

deine antwort "html richtig einsetzen und mit css stylen" hilft mir daher leider nicht viel weiter, kannst du vielleicht ein bisschen konkreter sein ;-)?
Zum Vergrößern anklicken....
Das sollte jetzt konkret genug sein, um zumindest schonmal zu verstehen, wo das Verständnisproblem bei Dir liegt und in welche RIchtung Du denken musst.

Okay? Bei weiteren Fragen einfach fragen!
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben