HomepageHelfer.org

Webseitenbau - Designvorlagen - Grafik Shop - Hilfe Lexikon und vieles mehr
https://homepagehelfer.org:443/

text links bündig

https://homepagehelfer.org:443/viewtopic.php?t=4593

Seite 1 von 1

text links bündig

Verfasst: Sa 16. Mär 2013, 21:44
von Nathaly
Hallo

wie mache ich das der text links bündig ist ?

Hp http://nathaly-testseite.npage.de/
}
#inhalt {
float: left;
width: 662px;
text-align: left;
background-color: #000000;
background-image: url(../bilder/bg_list.png);
background-repeat: repeat-x;
background-position: 0 0;
padding: 10px;
margin-left: 8px;
border: 1px solid #696969;
border-radius: 3px;
}
css.style

Code: Alles auswählen

    /*CSS Format by http://npage-hilfe.net*/
    body {
      font-family: Arial Narrow;
      font-size: 16px;
      color: #FFFFFF;
      background-color: #000000;
      background-image: url(../bilder/bg_list_2.png);
      background-repeat: repeat-x;
      background-position: 0 0;
      background-attachment: fixed;
    }
    h1 {
      font-family: "trebuchet ms";
      font-size: 22px;
      color: #FFFF88;
      text-align: center;
      text-decoration: none;
    }
    h2 {
      font-family: "trebuchet ms";
      font-size: 18px;
      color: #FFFF66;
      text-align: center;
    }
    h3 {
      font-family: verdana;
      font-size: 16px;
      color: #FFFF44;
      text-align: center;
    }
    a:link {
      font-family: "Arial Narrow";
      color: #FFFF99;
      font-size: 16px;
      text-decoration: none;
    }
    a:visited {
      color : #FFFF99;
      text-decoration : none;
    }
    a:active {
      color: #FFFF99;
      text-decoration: none;
    }
    a:hover {
      color: #fefefe;
      text-decoration: none;
    }
    a img {
      border: none;
    }
    p {
      margin-top: 16px;
      margin-bottom: 16px;
    }
    textarea {
      color: #FFFF99;
      font-size: 12px;
      font-family: Arial Narrow;
      padding: 3px;
      background-color: #111111;
      border: 1px solid #696969;
      border-radius: 3px;
    }
    #aussen {
      width: 1040px;
      margin-right: auto;
      margin-left: auto;
      background-color: #222222;
      background-image: url(../bilder/bg_aussen.jpg);
      background-repeat: repeat;
      border: 1px solid #696969;
      border-radius: 3px;
      padding: 8px;
    }
    #header {
      width: 1038px;
      background-color: transparent;
      height: 139px;
      border: 1px solid #696969;
      border-radius: 3px;
      background-image: url(../bilder/header2.png);
      background-position: center 0;
    }
    #balken {
      float: left;
      width: 1038px;
      height: 22px;
      color: #FFFFFF;
      text-align: center;
      line-height: 20px;
      margin-top: 10px;
      margin-bottom: 10px;   
      border: 1px solid #696969;
      border-radius: 3px;
      background-color: #222222;
      background-image: url(../bilder/bg_list.png);
      background-repeat: repeat-x;
      background-position: 0 0;
    }
    #navilinks {
      float: left;
      width: 170px;
      color: #343433;
      background-color: transparent;
      padding: 0px;
      margin: 0px;
    }
    #navilinks h1 {
      margin-bottom: 3px;
      margin-top: 10px;
    }
    #navilinks h2 {
      margin-bottom: 2px;
      margin-top: 8px;
    }
    #navilinks h3 {
      margin-bottom: 2px;
      margin-top: 10px;
    }
    .boxlinks {
      float: left;
      width: 160px;
      color: #FFFFFF;
      text-align: center;
      font-size: 16px;
      background-color: #000000;
      background-image: url(../bilder/bg_list.png);
      background-repeat: repeat-x;
      background-position: 0 0;
      border: 1px solid #696969;
      border-radius: 3px;
      padding : 4px;
      margin-bottom: 8px;
    }
    .navigation a {
      display:block;
      width:140px;
      height:25px;
      line-height:25px;
      text-align: left;
      font-size: 16px;
      font-family: "Arial Narrow";
      color: #FFFF99;
      padding-left:18px;
      margin:0px;
      background:url(../bilder/button_navi.png) no-repeat;
      text-decoration:none;
      border-bottom: 1px dashed #696969;
    }
    .navigation a:hover {
      color: #fefefe;
      background-position:0 bottom;
      border-bottom: 1px dashed #fefefe;
    }
    #navirechts {
      float: right;
      width: 170px;
      color: #343433;
      background-color: transparent;
      padding: 0px;
      margin: 0px;
    }
    #navirechts h1 {
      margin-bottom: 3px;
      margin-top: 10px;
    }
    #navirechts h2 {
      margin-bottom: 2px;
      margin-top: 8px;
    }
    #navirechts h3 {
      margin-bottom: 2px;
      margin-top: 10px;
    }
    .boxrechts {
      float: right;
      width: 160px;
      color: #FFFFFF;
      text-align:center;
      font-size: 16px;
      background-color: #000000;
      background-image: url(../bilder/bg_list.png);
      background-repeat: repeat-x;
      background-position: 0 0;
      border: 1px solid #696969;
      border-radius: 3px;
      padding : 4px;
      margin-bottom: 8px;
    }
    #inhalt {
      float: left;
      width: 662px;
      text-align: left;
      background-color: #000000;
      background-image: url(../bilder/bg_list.png);
      background-repeat: repeat-x;
      background-position: 0 0;
      padding: 10px;
      margin-left: 8px;
      border: 1px solid #696969;
      border-radius: 3px;
    }
    .button {
      border: 1px solid #696969;
      color: #FFFF99;
      background: #222222;
      padding: 1px 8px;
      border-radius: 5px;
      cursor: pointer;
      margin-top: 3px;
      margin-left: 10px;
    }
    .button:hover, .button:focus {
      color:#fefefe;
      background-color: rgba(0,0,0,0.4);
    }
    .field_t {
      border: 1px solid #696969;
      color: #000000;
      background: #888888;
      padding: 1px 4px;
      border-radius: 2px;
      cursor: text;
      margin-top: 2px;
      margin-left: 6px;
    }
    #seitenlink {
      height: 25px;
      line-height:20px;
      font-family: "Arial Narrow";
      font-weight: normal;
      font-size: 16px;
      color:#FFFFFF;
      text-align: center;
    }
    a.slink:link, a.slink:visited, a.slink:active {
      font-family: "Arial Narrow";
      font-weight: normal;
      color:#FFFF99;
      font-size:16px;
      text-decoration: none;
    }
    a.slink:hover {
      font-family: "Arial Narrow";
      font-weight: normal;
      color:#fefefe;
      font-size:16px;
      text-decoration: underline;
    }
    #footer {
      float: left;
      width: 1038px;
      height: 22px;
      font-family: Impact;
      font-size: 22px;
      color: #FFFFFF;
      text-align: center;
      line-height: 20px;
      margin-top: 8px;   
      border: 1px solid #696969;
      border-radius: 3px;
      background-color: #222222;
      background-image: url(../bilder/bg_list.png);
      background-repeat: repeat-x;
      background-position: 0 0;
    }
    .copyright {
      font-size: 14px;
      font-family: Impact;
      font-style: normal;
      color: #FFFFFF;
      text-align: center;
    }
    .copyright a {
      font-size: 14px;
      font-family: Impact;
      font-style: normal;
      color: #FFFF99;
      text-decoration: none;
    }
    .copyright a:hover {
      color: #fefefe;
    }
    .clear {
      clear: both;
    }

Re: text links bündig

Verfasst: Sa 16. Mär 2013, 22:12
von Jasko
Du kannst deine Inhalte linksbündig machen in dem du im entsprechendem div container bzw. Tag in der CSS das Atributt text-align, auf left stellst.

Also:

Code: Alles auswählen

.meine_div_container1 {
text-align: left; /*Linksbündig*/
}

.meine_div_container2 {
text-align: center; /*Mittig*/
}

.meine_div_container3 {
text-align: right; /*Rechtsbündig*/
}

Re: text links bündig

Verfasst: Sa 16. Mär 2013, 22:23
von Nathaly
danke hat geklappt :X

Re: text links bündig

Verfasst: Sa 16. Mär 2013, 22:33
von Jasko
Wenn man in den CSS Angaben ein Attribut benutzt hat das so zu sagen stärker ist als das Attribut text-align, dann kann das durchaus vorkommen.

Zum Beispiel man setzt ein margin-left:30px;, dann kann man text-align:left machen aber wegen des margin-left kann es nicht ganz nach links gehen weil diese Begrenzung priorität hat.

Was du noch versuchen kannst ist !important zum Attrbiut hinzu zu schreiben, wenn nämlich zwei Attribute im Konflikt sind dann wird das wichtigere benutzt, wenn man aber das wichtigare selber festlegt kann man dem endgegenwircken, funktioniert aber nur wenn zwei gleiche Attribute im Konfikt sind.

Also versuch es mal so:

Code: Alles auswählen

.mein_container {
text-align:left !important;
}
MFG

Re: text links bündig

Verfasst: Sa 16. Mär 2013, 22:35
von Jasko
Nathaly hat geschrieben:danke hat geklappt :X
OK freut mich. Ich lasse mal den Post vorher, wenn es bei jemandem doch nicht klappt, kann man das immer noch versuchen.

MFG

Re: text links bündig

Verfasst: Sa 16. Mär 2013, 22:43
von Nathaly
finde ich eine Gute Idee :X

Re: text links bündig

Verfasst: So 17. Mär 2013, 09:51
von Butterblume
Juchu, Bilddas wusste ich auch dass man wenn der Text lins stehen soll left schreiben muss ( So ein bischen weiß ich ja dann doch schon)
Alle Zeiten sind UTC+01:00
Seite 1 von 1

Powered by phpBB® Forum Software © phpBB Limited

Deutsche Übersetzung durch phpBB.de