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

Fragen zu Layout Anpassung

Status
Für weitere Antworten geschlossen.
megaman87

megaman87

Neues Mitglied
Hi Leute,

Ich hab neuerdings ein neues Template für mein Blog ( Silver Screen ) eingefügt, doch gibt es noch einige Dinge, die ich gerne modifizieren würde. Ich hoffe ihr könnt mir dabei ein paar Hilfestellungen geben.

1. Ich würde gerne das gesamte Blog verbreitern. Das Textfeld ist mir nämlich noch zu schmal (die Bilder in den Posts sollten nebeneinander stehen und nicht übereinander). Möchte das Blog also verbreiten, ohne dabei aber den Style zu verlieren. Inwieweit muss ich da welche Werte in der HTML verändern?

2. Möchte dann auch noch die Sidebar mit dem Textfeld besser abgrenzen. Beispielsweise die Sidebar etwas dunkler machen oder beide mit einem Strich abtrennen.

Das HTML der Seite sieht folgendermassen aus:

PHP: 
#outer-wrapper {
    background: #FFF url(http://img291.imageshack.us/img291/2285/blogyazulmainbgyc0.jpg) repeat-y center;
    color: #ccc; 
    margin: 0 auto; 
    padding: 0; 
    width: 800px
}

#navbar-iframe {
   height:0px;
   visibility:hidden;
   display:none
}

/*-- (Genrales) --*/

body { 
    margin:0px 0; 
    padding:0; 
    color: $textocolor;  
    background: $bgcolor url(http://img291.imageshack.us/img291/4232/blogyazulbgcw8.jpg) repeat-x;
    line-height: 1.4em; font-style:normal; font-variant:normal; font-weight:normal; font-size:74%; font-family:Arial, Sans-Serif 
}

a img
{
padding:2px;
background:#FFF;
border:1px solid #333;
}

ul { margin-left: 0; padding-left: 5px; list-style : square; }
li {     margin: 0 0 2px 15px; padding: 0 0 0 0px;    color: #555; }
.sub  {margin: 0 0 2px 30px; padding: 0 0 0 0px;  color: #888; }

p { margin: 0 0 5px 0; padding: 0; color: $textocolor; background: inherit; }
a { color: $enlacecolor; background: inherit; text-decoration:none; }
a:hover { background: inherit; text-decoration:underline; }

h1 { 
    padding:0; 
    margin:0; 
    color: $colortituloblog; 
    background: inherit;
    font: bold 1.8em Arial, Sans-Serif; 
    letter-spacing: -1px;
}

h1 a { color: $colortituloblog; background: inherit; }

h2 { 
    background: url(http://bp2.blogger.com/_Zuzii37VUO4/RlYg0Jya0EI/AAAAAAAABg4/f5OcBDnLxq8/s1600/h.gif) no-repeat left;
    color:$colortituloentrada;
    font-size:140%; 
    font-weight:bold; 
    margin-left:0px; margin-right:0; margin-top:5px; margin-bottom:5px; padding-left:30px; padding-right:0; padding-top:0; padding-bottom:0 
}

h2 a { background: #FFF; color: #075181; }
h2 a:hover { background: #FFF; color: #68ADD5; text-decoration:none;  }

fieldset {    border: 1px solid #075181; }

#main-wrapper {overflow:hidden;} 
.clear {clear:both;}
#blog-pager-newer-link {float: left;} 
#blog-pager-older-link {float: right;} 
#blog-pager {text-align: center; }

/*-- (Cabecera) --*/

#top {
    padding: 0;
    margin: 0;
    background: #000 url(http://bp0.blogger.com/_Zuzii37VUO4/RlYhPpya0JI/AAAAAAAABhg/OeaCfUyejuE/s1600/top.jpg) no-repeat top;
    height: 44px
}

#top .padding { 
    float: right;
    color: #808080;
    padding: 20px 25px 0 0;
    font-size: 90%;
}

#top a { color: #E0F5FF; }

#header-wrapper {
    margin: 0; 
    width: 800px; 
    background: #036EB4 url(http://lh6.ggpht.com/_7C4NVJJsAWU/SZA6ATiAPdI/AAAAAAAABNg/i0SUXLLOWtw/headerjoker2.jpg) no-repeat center top;  
    height: 149px; 
    color: #FFF 
}

#header-wrapper h1 {
        font-family: Arial, Verdana, Helvetica, sans-serif;
        font-size: 22px; font-weight: bold;
        margin: 0;
        padding: 0; 
}

#header-inner {
    padding: 45px 0 0 50px; 
}

#header-wrapper p {
        font-family: Arial, Verdana, Helvetica, sans-serif;
        font-size: 12px; 
        background-image: url('none');
        color: $descripcioncolor;
        margin: 0;
        padding-left:2px; padding-right:0; padding-top:0; padding-bottom:0
}

#header-wrapper a {
}


#content-wrapper {
background: #FFF; width: 760px; margin: 0 20px 0 20px; color: #808080;
}

/*-- (Menú) --*/

#subheader { 
    background: #000 repeat-y center;
    width: 770px;
    height: 35px;
    color: #FFF;
    margin-left: 15px;
    
}
#subheader .padding { padding: 10px 15px 10px 15px; }
#subheader h2 { color: #FEAB06; }
#subheader a {color: #FECF5F; }

#menu {
    background: #000 url(menu.jpg) no-repeat center bottom;
    width: 760px;
    height: 35px;
    margin: 0;
    padding: 0
}

#menu ul { margin:0; list-style:none; padding: 5px 0 0 20px; }
#menu a, #nav strong, #nav span { float:left; display:block; color:#fff; padding: 5px; text-decoration:none;  }
#menu a { float:none; }
#menu li { float:left; color: #FFF; background: #000; margin:0; padding:0 0 0 0px; }
#menu a:hover { text-decoration:underline;}  
#menu .padding { padding: 5px 0 0 10px; font-weight: bold; }

/*-- (Principal) --*/

#main-wrapper {
float: left; width: 500px; background: #FFF; padding:15px 15px 0 20px; margin:0;
}

#main-wrapper ul {
    margin: 5px 0 5px 0; 
    padding : 0; 
    list-style : none; 
    border-bottom: 0px solid #eee; 
    list-style-type: square;
    color: #a90000;
}

#main-wrapper li{
    margin: 0 0 2px 15px;
    padding: 0 0 0 0px;
    color: #555;
}

#main-wrapper a:hover {
}

.post {
margin:0 0 25px 0;
}
.post-title, .post-title a {
color:$colortitentrada;
}

.post-body {
}

.date-header {
 font: 85% Arial, Sans-Serif; margin: 0 0 10px 0px; padding: 0; color: #5f5f5f; background: inherit; border-bottom: 1px solid #036CB4;
}

.post-footer {
padding:2px 3px 3px 8px;
border:1px solid #e3e4e4;
background-color:#f5f5f5;
font-size:0.9em;
color:#505050;
}

/*-- (Lateral) --*/

#sidebar-wrapper {
        float: right;
    padding:0px 0 0 10px; margin:0;
    background-color: #FFF;
    width: 210px; 
}

#sidebar { text-align: left; 
        color: #7D8085; 
        padding: 20px 0 0 0px; 
        width: 200px; 
}
#sidebar li { 
    margin: 5px 0 5px 0px; 
    padding: 0px 0 0 0px; 
    border-bottom: 1px dotted #ccc; 
    list-style: none;
}
#sidebar li a { 
 color: $colortextolateral;
 text-decoration: none;
 padding: 5px 0 0 0px;
 margin-bottom: 5px;
}

#sidebar li a:hover { 
 color: #075181;
 text-decoration: none;
 background: #E5F6FF;
 margin-bottom: 5px;
}

.sidebar .widget {
 margin-bottom: 20px;
}

/*-- (Pie de página) --*/

#footer-wrapper {
    clear:both;
    height: 43px;
    color:#ccc;  
    background: #000 url(http://bp1.blogger.com/_Zuzii37VUO4/RlYgz5ya0CI/AAAAAAAABgo/exNyKnoClNo/s1600/footer.jpg) no-repeat top; 
    font-size:90%; 
    padding: 0; 
    text-align:center 
}

#footer-wrapper a { color: #E0F5FF; }

#footer-wrapper .links {
padding: 10px 0px 0px 0px; 
}

/*-- (ICONOS) --*/

.date-header {
padding-left: 15px;
background: url(http://bp0.blogger.com/_Zuzii37VUO4/RlXuS5yaz8I/AAAAAAAABf8/lPnKpN8Vd4k/s1600/timeicon.gif) center left no-repeat;
}

.post-author {
padding-left: 15px;
background: url(http://bp3.blogger.com/_Zuzii37VUO4/RlXuBpyaz1I/AAAAAAAABfE/DFaeuXvDlR4/s1600/author.gif) center left no-repeat;
}

.comment-link {
padding-left: 15px;
background: url(http://bp3.blogger.com/_Zuzii37VUO4/RlXuSpyaz5I/AAAAAAAABfk/AbUwoyxiNoI/s1600/comments.gif) center left no-repeat;
}

.blog-feeds {
padding-left: 20px;
padding-top: 5px;
background: url(http://bp0.blogger.com/_Zuzii37VUO4/Rj7ME-MBRJI/AAAAAAAAAwM/IOo-YUYR5aM/s1600/icono-feed.gif) center left no-repeat;
}

]]></b:skin>
<link href='http://plantillasblogyweb.googlepages.com/estilos-blogger.css' rel='stylesheet' type='text/css'/>
<link href='http://plantillasblogyweb.googlepages.com/blogy-azul.css' rel='stylesheet' type='text/css'/>  </head>

  <body>
  <div id='outer-wrapper'><div id='wrap2'>

    <!-- links para navegadores de texto -->
    <span id='skiplinks' style='display:none;'>
      <a href='#main'>ir a principal </a> |
      <a href='#sidebar'>Ir a lateral</a>
    </span>

<div id='top'>
    <div class='padding'>
        <a href='http://TUBLOG.blogspot.com/feeds/posts/default'>RSS</a>
    </div>
</div>

<!-- (Cabecera) -->
    <div id='header-wrapper'>
      <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Silver Screen (Header)' type='Header'/>
</b:section>
    </div>

<div id='subheader'>
    <div id='menu'>
      <ul>
        <li class='page_item'><a href='http://silverscreen87.blogspot.com/'>Home</a></li>
        <li class='page_item'><a href='http://silverscreen87.blogspot.com/2005/01/filmarchiv.html'>Filmarchiv</a></li>
      </ul>
    </div>
</div>

<!-- (Contenedor) -->    
    <div id='content-wrapper'>

<!-- (Principal) -->
      <div id='main-wrapper'>
        <b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog-Posts' type='Blog'/>
</b:section>
      </div>

<!-- (Lateral) -->
      <div id='sidebar-wrapper'>
        <b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='Profile1' locked='false' title='Über mich' type='Profile'/>
<b:widget id='LinkList1' locked='false' title='Blogroll' type='LinkList'/>
<b:widget id='LinkList2' locked='false' title='Links' type='LinkList'/>
<b:widget id='BlogArchive1' locked='false' title='Blog-Archiv' type='BlogArchive'/>
<b:widget id='Text1' locked='false' title='Filmreviews' type='Text'/>
<b:widget id='Text2' locked='false' title='Serienreviews' type='Text'/>
<b:widget id='Text3' locked='false' title='Bewertungsskala' type='Text'/>
</b:section>
      </div>

<!-- Limpiar flotación-->
      <div class='clear'/>

    </div> <!-- fin de capa content-wrapper -->

<!-- (Pie de página) -->
    <div id='footer-wrapper'>
<!-- RECUERDA QUE ESTA PLANTILLA ES GRATUITA, POR FAVOR NO REMUEVAS LOS CREDITOS -->
  <p class='links'> Diseño por  
  <a href='http://www.free-css-templates.com/'>David Herreman</a> 
  | A <a href='http://www.blogger.com'>Blogger</a> por  
  <a href='http://blogandweb.com/'>Blog and Web</a></p>
    </div>

  </div></div> <!-- fin de capa outer-wrapper -->
</body>
</html>
Wäre wirklich sehr dankbar um einige Tipps! :)
 
Werbung:
Punkt 1 hat sich erledigt :) Bin dann doch noch selber darauf gekommen. Doch hat jemand eine Idee für Punkt 2? Was gäbe es da für Möglichkeiten?
 
Werbung:
Danke, werd ich mir mal durchlesen!

Hab jetzt noch ein Problem mit dem Header und zwar möchte ich gerne den Blogtitel "Silver Screen" komplett entfernen, doch krieg ich das nicht hin. Kann man den Titel in der HTML irgendwo löschen? Soll in Zukunft eben direkt auf den Headerbannern das Logo kommen.
 
Ich kenne das Blogsystem nicht.
Der <title> wird in der <h1> wiederholt.
Ich weiß nicht wie du da ins html eingreifen kannst.
Wenn es dich nur optisch stört schiebe h1 mit css aus dem Viewport:
css:
Code: 
h1 {
position: absolute;
top: -1000px;
left: -1000px;
}
So sollte sie verschwinden
 
Werbung:
Hab jetzt ein Logo erstellt, doch wo kann ich das jetzt genau im HTML einfügen, ohne dass ich es auf jedes einzelne Headerbild klatschen muss?
 
Ohne css kein display: none;

Alle Clients die css interpretieren, sollten sie display: none beachten / das Element ignoriren. Zumindest Jaws macht das auch.
Positionsangaben ignorieren solche Clients. Sie haben ja kein Viewport in dem Sinne.

Manche Handys und ähnliche Geräte versuchen die Positionen soweit zu verschieben, daß alle Elemente angezeigt werden können.
Auf meinem billig-Handy sind z.B. Ausklappmenüs mit position:absolute; left:-1000px; von vornherein ausgeklappt.
Mit display: none währen sie nicht zugänglich.

In aktuellen Operas kannst das simulieren:
Ansicht > Klein-Bildschirm
Mit negativen Positionsangaben versteckte Elemente werden in dieser Einstellung angezeigt.
 
Werbung:
Hab das Logo nun einfügen können, mit folgenden Befehlen:

PHP: 
<div id='header-inner'>
    <div class='titlewrapper'>
        <h1 class='title'>Silver Screen</h1>
    </div>
    <img id="logo" src="" alt="" />
</div>
PHP: 
                        1. #header-inner { position:relative; } 2. #header-inner #logo { position:absolute; top:...px; left:...px; }
Doch leider gibt's jetzt einen fetten weissen Abschnitt den ich einfach nicht mehr wegbringe...:(
 
Werbung:
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben