Seite 1 von 2 12 LetzteLetzte
Ergebnis 1 bis 10 von 13

Thema: Design-Rand entfernen

  1. #1
    nobie
    Gast

    Standard Design-Rand entfernen

    hi,
    ich möchte meine Homepage b r e i t e r machen und deshalb den rechten und linken Rand schmaler machen oder ganz wegmachen. (Design-Ränder)
    Ich habe eine externe CSS Datei.
    Wo und wie muß ich eine Änderung in der CSS Datei vornehmen?

    Danke
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    Jedi Ritter Avatar von Dodo
    Registriert seit
    26.04.2008
    Ort
    Wien
    Alter
    27
    Beiträge
    3.774
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings
    Blog-Einträge
    1

    Standard

    Wie wärs mit einem Link?
    Something big is coming. And there will be pirates and ninjas and unicorns...

  3. #3
    Forum Guru Avatar von driver
    Registriert seit
    10.04.2006
    Alter
    34
    Beiträge
    20.729
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    also so, ohne link, ohne quelltext -geht hier garnix.
    wir sind schließlich informatiker und keine hellseher...

    btw. rahmen ? border !
    >> die icq-schreiberlinge bitte dies hier beachten



    1679 entdeckte Gottfried Wilhelm Leibniz das Binärsystem, bei einem Gespräch mit seiner Mutter: "Ja..., Nein..., Nein..., Nein..., Ja..., Ja..., Nein..."

  4. #4
    nobie
    Gast

    Standard

    ja danke, bin Anfänger, hier ist der Quelltext der CSS Datei.


    ganze Seite Inhalt ohne footer
    *******************/

    #content {
    position: relative;
    height: auto !important;
    height: 100%;
    min-height: 100%;
    }



    /************************************************** *
    Topbar with newsletter form and theme change buttons
    ************************************************** */

    #topbar {
    float: left;
    width: 100%;
    padding: 0.6em 0;

    font-size: 0.8em;
    text-transform: uppercase;

    color: #CFD9DB;
    background: #FFF url(../images/bg/topbar.gif) repeat-x bottom left;
    }



    /*********************************************
    Top menu and logo
    ******************************************/

    #header {
    clear: both;
    position: relative;
    height: 5em;
    margin: 0 auto;
    background: #48525B url(../images/bg/header.gif) repeat-x bottom left;
    border-bottom: 2px solid #48525B;
    background-color: #48525B;
    }


    #header img {
    position: absolute;
    top: 5%;
    left: 10px;
    }

    #header ul {
    margin: 3.5em 1em 0 0 !important;
    margin: 3.5em 0.5em 0 0;
    padding: 0;
    float: right;
    }

    #header ul li {
    display: inline;
    list-style: none;
    }

    #header ul li a {
    float: left;
    padding: 0 1em;

    font: 400 1.1em arial, sans-serif;
    letter-spacing: 0.1em;
    line-height: 0.8em !important;
    line-height: 1em;

    color: #cccccc;
    border-right: 1px solid #4D5760;
    }

    #header ul li a.last {
    padding-right: 0;
    border-right: 0;
    }

    #header ul li a:hover {
    color: #3B5D77;
    }



    /************************************************** ************
    Header Image/Flash Movie
    ************************************************** ************/

    #headerImg {
    margin: 0 auto;
    height: 143px;
    background: url(../images/bg/header_image.jpg) no-repeat top left;
    }





    /************************************************** ************
    Top Block Menu
    ************************************************** ************/

    #menu {
    margin: 0 auto;
    }

    #menu ul {
    width: 100%;
    float: left;
    margin: 0;
    padding: 0;

    text-align: left;
    background: #3B5D77 url(../images/bg/menu.gif) repeat-x top left;
    }

    #menu ul li {
    display: inline;
    margin: 0;
    padding: 0;
    list-style: none;
    }

    #menu ul li a {
    float: left;
    width: 25%;
    height: 1.5em;

    font: 400 1.2em arial, sans-serif;
    letter-spacing: 0.1em;

    color: #fff;

    border-top: 7px solid #41637D; border-bottom: 15px solid #FFF
    }

    #menu ul li a span {
    display: block;
    padding: 2px 7px;
    }


    #menu ul li a span.desc {
    font-size: 0.8em;
    color: #8C8D94;
    }


    #menu ul li a:hover,
    #menu ul li a.here {
    background: #4A5C6A;
    border-top: 7px solid #455660;
    }

    #menu ul li a:hover span.desc,
    #menu ul li a.here span.desc {
    color: #FFF;
    }


    /* Top menu icons */


    /************************************************** ************
    Page Content
    ************************************************** ************/

    #page {
    clear: both;
    float: left;
    width: 100%;
    margin-bottom: 6em;
    text-align: left;
    }

    #columns {
    margin: 0 auto;
    }


    /* Column widths */
    .width {
    width: 776px;
    }

    .widthPad {
    width: 746px;
    }

    .width25 {
    width: 24%;
    }

    .width50 {
    width: 48%;
    }

    .width73 {
    width: 73%;
    }

    .width75 {
    width: 75%;
    }

    .width100 {
    width: 100%;
    }


    /************************************************** ************
    Footer
    ************************************************** ************/


    #footer {
    clear: both;
    float: left;
    width: 100%;
    height: 5em;
    margin-top: -5em;
    }

    #footer #bg {
    position: relative;
    height: 5em;
    margin: 0 auto;
    background: #49525B url(../images/bg/header.gif) repeat-x bottom left;
    }

    #footer #bg ul {
    float: right;
    margin: 3em 1em 0 0 !important;
    margin: 3em 0.5em 0 0;
    padding: 0;
    }

    #footer #bg ul li {
    display: inline;
    list-style: none;
    }

    #footer #bg ul li a {
    float: left;
    padding: 0 1em;

    font: 400 1em arial, sans-serif;
    letter-spacing: 0.1em;
    line-height: 0.8em !important;
    line-height: 1em;

    color: #4D5760;
    border-right: 1px solid #4D5760;
    }

    #footer #bg ul li a.last {
    padding-right: 0;
    border-right: 0;
    }

    #footer #bg ul li a:hover {
    color: #6C0;
    }

    #footer #bg img {
    position: absolute;
    top: 6%;
    left: 10px;
    }



    /************************************************** ************
    Icons specific to the colour theme
    ************************************************** ************/

    a.lightTheme img,
    a.darkTheme img,
    a.submitButton img {
    width: 20px;
    height: 20px;
    vertical-align: middle;
    }

    a.lightTheme img {
    background: url(../images/icons/light_light_theme.gif) no-repeat center center;
    }

    a.darkTheme img {
    background: url(../images/icons/light_dark_theme.gif) no-repeat center center;
    }

    a.submitButton img {
    background: url(../images/icons/light_submit.gif) no-repeat center center;
    }


    /************************************************** ************
    Posts
    ************************************************** ************/

    .post {
    float: left;
    width: 100% !important;
    width: 99%;
    position: relative;

    margin-bottom: 1.5em;

    border-bottom: 1px solid #CCCCCC;
    }

    .post .date {
    position: absolute;
    top: 0;
    left: 5px;

    width: 2.3em;
    text-align: right;
    }

    .post .date .month {
    text-transform: uppercase;
    font: 700 1.0em arial, sans-serif;
    color: #888;
    }

    .post .date .day {
    display: block;
    margin-top: -5px;
    font: 700 2.1em arial, sans-serif;
    color: #888;
    }

    .post .title {
    display: block;
    padding: 0 0 5px 0;

    font-size: 1.2em;
    font-weight: bold;
    color: #586B7A;
    }

    .post p {
    margin: 0 0 0 3.5em;
    padding: 0 0 1em 1.2em;
    border-left: 1px solid #CCCCCC;
    }



    /************************************************** ************
    Thumbnail Lists
    ************************************************** ************/

    ul.thumbs,
    ul.thumbs li {
    margin: 0;
    padding: 0;
    }

    ul.thumbs li {
    margin: 0 0 15px 0 !important;
    margin: 0;
    padding: 0px;
    list-style: none;
    }

    a.thumb img {

    border: 5px solid #ccc;
    }

    a:hover.thumb img {
    background: #8EB4C6;
    border: 5px solid #668FA3;
    }

    a:hover.thumb {
    background: none;
    }

    a.thumb span {
    display: block;
    margin-top: -5px !important;
    margin-top: -2px;
    }



    /************************************************** ************
    Submenu Styles
    ************************************************** ************/

    ul.submenu1,
    ul.submenu2 {
    margin: 0 0 20px 0;
    padding: 0;
    }

    ul.submenu1 li,
    ul.submenu2 li{
    margin: 0;
    padding: 0;
    list-style: none;
    list-style-image: url(foo.gif); /* because IE is balls */
    }

    ul.submenu1 li a,
    ul.submenu2 li a {
    display: block;
    height: auto !important;

    /* Start hide from IE Mac \*/
    height: 1%;
    /* End hide from IE Mac */

    padding: 1px 5px 1px 20px;
    }

    ul.submenu1 li a {
    background: url(../images/bg/submenu1.gif) no-repeat 5px 50%;
    }

    ul.submenu1 a:hover {
    color: #426F85;
    background: #B3C6C4 url(../images/bg/submenu1.gif) no-repeat 5px 50%;
    }

    ul.submenu2 li a {
    color: #426F85;
    background: url(../images/bg/submenu2.gif) no-repeat 3px 50%;
    }

    ul.submenu2 a:hover {
    color: #426F85;
    background: #B3C6C4 url(../images/bg/submenu2.gif) no-repeat 3px 50%;
    }






    /************************************************** ************
    Generic Display
    ************************************************** ************/


    .block {
    display: block;
    }

    .clear {
    clear: both;
    }

    .marginRight {
    margin-right: 15px;
    }

    .paddingLeft {
    padding-left: 5px;
    }

    .paddingRight {
    padding-right: 5px;
    }

    .floatLeft {
    float: left;
    }

    .floatRight {
    float: right;
    }

    .alignLeft {
    text-align: left;
    }

    .alignRight {
    text-align: right;
    }

    .alignTop {
    vertical-align: top;
    }

    .alignMiddle {
    vertical-align: middle;
    }

    .alignBottom {
    vertical-align: bottom;
    }

    .lightBlueBg {
    background-color: #EAF2F5;
    }

    .dark {
    color: #353E47;
    }

  5. #5
    Kaiser(in)
    Registriert seit
    24.04.2006
    Ort
    Ludwigshafen
    Beiträge
    2.720
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Da kann man nicht viel mit anfangen, weil man noch wissen muss, wie das im HTML-Quelltext zusammengefügt ist. Ein Link wäre wirklich hilfreich.

    Du kannst mal an diesen Stellen versuchen, den width-Wert zu erhöhen (aber ohne Gewähr!):

    Code:
    /* Column widths */ 
    .width { 
    width: 776px; 
    } 
    
    .widthPad { 
    width: 746px; 
    }

  6. #6
    nobie
    Gast

    Standard

    hi, hier ist das Html layout. Leider hab ich die homepage noch nicht auf einem webspace sondern entwickele diese erstmal vollständig auf dem PC.

    Ich hab deinen Vorschlag oben probiert, dabei verschiebt sich der Header nach links, der rechte Rand bleibt wie er ist.


    /************************************************** *******
    HTML Elements
    ************************************************** *******/

    html,
    body {
    height: 100%;
    }





    body {
    margin: 0;
    padding: 0;
    text-align: center;
    background: url(../images/bg/light_body.gif) repeat-y top center;
    font: 400 0.8em verdana, arial, sans-serif;
    line-height: 100%;

    color: #555;
    }


    /* Headers */
    h1, h2, h3, h4, h5, h6 {
    margin: 0 0 10px 0;
    padding: 0;
    }


    h1 {
    padding-bottom: 0.2em;

    font: 400 1.6em arial, sans-serif;
    color: #536C71;
    border-bottom: 12px solid #ddd;
    }

    h2 {
    font-size: 1.2em;
    color: #586B7A;
    }

    h3 {
    text-transform: uppercase;
    font-size: 0.9em;
    color: #5D6F73;
    }

    h4 {
    font-size: 0.85em;
    }

    h5 {
    font-size: 0.8em;
    }


    /* Needed to horizontally pad in a coloured container */
    .horzPad h1,
    .horzPad h2,
    .horzPad h3,
    .horzPad h4,
    .horzPad h5,
    .horzPad p {
    padding-left: 5px;
    padding-right: 5px;
    }


    /* Links */
    a {
    text-decoration: none;
    color: #3B5D77;
    }

    a:hover {
    color: #668FA3;
    }

    a img {
    border: 0;
    }

    a img.border {
    border: 1px solid #FC3307;
    }

    a:hover img.border {
    /* Fixes IE bug - IE doesn't correctly apply the style on a:hover so need to mask it */
    border: 1px solid #668FA3 !important;
    border: 1px solid #FC3307;
    }



    /* Images */
    img.floatRight {
    margin: 5px 0 10px 10px;
    }

    img.floatLeft {
    margin: 5px 10px 10px 0;
    }



    /* Lists */
    ul li {
    list-style-image: url(../images/bg/submenu1.gif);
    }

    ol li {
    font-weight: bold;
    color: #668FA3;
    }

    ol li span {
    font-weight: normal;
    color: #444;
    }



    /* Blockquote */
    blockquote {
    margin: 0;
    padding: 0 20px;
    background: #E7F1F3;
    border-top: 1px solid #AAD3DB;
    border-bottom: 1px solid #AAD3DB;
    }



    /************************************************** ************
    Form Elements
    ************************************************** ************/

    form {
    padding: 0;
    margin: 0;
    }

    /* If you're finding the input elements get pushed down, increase the width */
    label {
    float: left;
    width: 25%;
    vertical-align: top;
    }

    input,
    textarea,
    select {
    padding: 1px;
    font: 400 1em verdana, sans-serif;
    color: #999;
    background: #EEE;
    border: 1px solid #CCC;
    }

    input:focus,
    input:hover,
    textarea:focus,
    textarea:hover,
    select:focus,
    select:hover {
    color: #000;
    background: #E7F1F3;
    border: 1px solid #888;
    }

    input.noBorder,
    input:focus.noBorder,
    input:hover.noBorder {
    padding: 0;
    border: 0;
    }

    input.button {
    padding: 2px 5px;

    font: 400 0.9em verdana, serif;
    cursor: pointer;

    color: #fff;
    background: #FC3307;
    border-width: 1px;
    border-style: solid;
    border-color: #FF7800 #691300 #691300 #FF7800;
    }

    input.radio {
    background: none;
    border: 0px;
    }

  7. #7
    Kaiser(in)
    Registriert seit
    24.04.2006
    Ort
    Ludwigshafen
    Beiträge
    2.720
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Der HTML-Quelltext wird benötigt.
    Die CSS-Angaben allein nützen nichts.

  8. #8
    nobie
    Gast

    Standard

    hier ist der HTML Quelltext:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"
    lang="en">
    <head>
    <title></title>
    <meta http-equiv="content-type"
    content="application/xhtml+xml; charset=UTF-8" />
    <meta name="author" content="" />
    <meta name="description" content="Site Description Here" />
    <meta name="keywords" content="keywords, here" />
    <meta name="robots" content="index, follow, noarchive" />
    <meta name="googlebot" content="noarchive" />
    <link rel="stylesheet" type="text/css"
    href="css/layout.css" media="screen, projection, tv " />
    <link rel="stylesheet" type="text/css"
    href="css/html.css" media="screen, projection, tv " />
    <style type="text/css">
    .style2 {color: #627E9A}
    .style3 {color: #62CC3C}
    .style6 {color: #5C8096}
    -->
    </style>
    </head>
    <body>
    <div id="content">
    <div id="header" class="width">

    <ul>[*]Home[*]&Uuml;ber uns[*][*][/list]
    </div>

    <div class="width" id="headerImg">

    </div>

    <div id="menu" class="width">
    <ul>[*] <span
    style="color: rgb(255, 0, 0);"><span
    style="color: rgb(51, 255, 51);"></span> </span><a
    href="twocol_a.html" class="forum" onfocus="blur()"><span
    class="title">Buchungsbeispiele</span>
    <span
    class="desc style3"> </span> </a> [*] <a href="contact.html" onfocus="blur()">
    <span class="title">Bestellen</span>
    <span class="desc"></span> </a> [*] <a href="contact.html" onfocus="blur()">
    <span class="title">Kontakt</span>
    <span class="desc"></span> </a> [/list]
    </div>

    <div id="page">
    <div id="columns" class="widthPad">
    <div class="floatLeft width25">
    <h2>

    </h2>
    <ul class="thumbs">[/list]
    <span class="thumb"></span><span></span><span
    class="thumb"></span><span></span><span
    class="thumb"></span><span></span><span
    class="thumb"></span><span></span><span
    class="thumb"></span><span></span><span
    class="thumb"></span><span></span><span
    class="thumb"></span><a href="" class="thumb">
    </a>
    <ul class="thumbs">[*] <span class="thumb"></span><span> dfdfdfdfd</span>[*]<big style="font-weight: bold;"><a
    href="Funktionen.html">

    </a> </big>
    <li style="font-weight: bold;"><big>

    </big>
    <li style="font-weight: bold;"><big><a
    href="Buchf%FChrung.html"><span
    style="text-decoration: underline;"></span></a>

    </big>

    [/list]
    </div>

    <div class="floatLeft width50">







    </div>

    <div class="floatRight width25 lightBlueBg horzPad">
    <h2><span class="dark">Links</span></h2>
    <ul class="submenu1">[/list]
    <ul class="submenu2">[/list]
    Bundesfinanzministerium

    </div>
    </div>
    </div>

    <div style="clear: both;">









    <ul>[/list]
    </div>
    </div>

    </body>
    </html>

  9. #9
    Kaiser(in)
    Registriert seit
    24.04.2006
    Ort
    Ludwigshafen
    Beiträge
    2.720
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Ist doch wie ich vermutet hatte:

    bisher:
    Code:
    /* Column widths */
    .width &#123;
    width&#58; 776px;
    &#125;
    Wenn du diesen Wert erhöhst, wird die Seite breiter:

    z.B.


    Code:
    /* Column widths */
    .width &#123;
    width&#58; 900px;
    &#125;
    Ggf. musst du dann noch andere Div's anpassen.

  10. #10
    nobie
    Gast

    Standard

    danke, ja die beiden Menüblocks werden breiter, aber wie ändere ich den Textblock.
    Welche anderen divs meinst du? Auf was muß ich achten?

    Ich hab withpad auch vergrößert, aber das hilft nur teilweise im Textblock.
    Der Textblock ist das Problem, ich hab da drei Textspalten, wie muß ich die Spalten ändern?

Ähnliche Themen

  1. Rand-Set
    Von Greg10 im Forum Job Forum - Jobs für Grafiker, Programmierer und Webmaster
    Antworten: 2
    Letzter Beitrag: 06.09.2007, 20:52
  2. Scrollbalken im IE entfernen bzw. Rand um Tabelle?
    Von sunshine im Forum HTML & CSS Forum
    Antworten: 2
    Letzter Beitrag: 27.03.2007, 18:26
  3. div-rand
    Von im Forum HTML & CSS Forum
    Antworten: 1
    Letzter Beitrag: 21.10.2006, 21:02
  4. Neues Fenster, Tabellen, Rand entfernen
    Von woercel im Forum HTML & CSS Forum
    Antworten: 2
    Letzter Beitrag: 20.07.2005, 11:56
  5. Design- und Programmier-Wettbewerb (Bestes Design wird prämi
    Von deaggi im Forum Eure Homepages und Foren - Vorstellung und Bewertungen
    Antworten: 1
    Letzter Beitrag: 26.08.2003, 14:49

Stichworte

Berechtigungen

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