Abstand zu oberen Leiste ändern

**LuQe** · 06.04.2010 20:52

Hallo,

ich habe momentan folgendes Problem.
Ich würde bei der Website, an der ich gerade arbeite, gerne den Abstand zur oberen Browserleiste erhöhen. Auf der Startseite ( klick mich ) stimmt der Abstand ja soweit, allerdings auch nur, weil ich im Startseitenbeitrag eine leere Tabelle ganz am Anfang angefügt habe. Andererseits würde das "Herzlich Wilkommen" über dem Logo stehen.
Das Problem wird vor allem beim Login deutlich sichtbar ( klick mich ), da sich das "Anmelden" mit dem Logo überschneidet.
In der HTML Datei habe ich schon viel rumprobiert, allerdings nicht wirklich auf eine Lösung gekommen.

Lg

**time4mambo** · 07.04.2010 03:20

Mit Tabellen solltest du bei sowas grundsätzlich nicht arbeiten!

In der template.css des zugehörigen Templates in Zeile 403 das Rote zufügen:

Code:

#main_full {
float:left;
font-size:12px;
margin:100px 0;
padding:10px;
text-align:center;
width:738px;
margin-top:50px;
}

Die 50 nach Bedarf anpassen.

Axel

**LuQe** · 08.04.2010 17:03

Zitat von time4mambo

Mit Tabellen solltest du bei sowas grundsätzlich nicht arbeiten!

In der template.css des zugehörigen Templates in Zeile 403 das Rote zufügen:

Code:

#main_full {
float:left;
font-size:12px;
margin:100px 0;
padding:10px;
text-align:center;
width:738px;
margin-top:50px;
}

Die 50 nach Bedarf anpassen.

Axel

Perfekt ! Danke

Lg

**LuQe** · 08.04.2010 17:17

Kann mir vl. nur noch jemand sagen, wie ich den Teil, wo der Text und Bilder sind so einstellen kann, dass der Text, sobald ich keine Tabelle verwende, nicht unendlich nach rechts rausläuft? Wenn ich "margin-right" einfüge mit einem x-beliebigen Wert, kratzt das ganze Design ab.

Lg

**time4mambo** · 08.04.2010 21:57

Normalerweise machst das mit "width". Habe aber, außer beim Login, kleine passende Seite gefunden. Welche meinst denn konkret?

Axel

**LuQe** · 09.04.2010 06:41

Zitat von time4mambo

Normalerweise machst das mit "width". Habe aber, außer beim Login, kleine passende Seite gefunden. Welche meinst denn konkret?

Axel

Ich meine generell alle Seiten, sprich "Startseite", "Besucher", "Impressum" ... der Teil, wo der Text drinnen steht geht ja unendlich weit nach rechts hinaus, sofern ich´s nicht mit einer Tabelle abgrenze.

Lg

**Helrunar** · 09.04.2010 06:56

Axel hat es ja schon angesprochen, das es normalerweise über width in deiner css (Zeile 403) gereglt wird. Spiele einfach mal ein wenig mit dem Wert. Zumal s für uns auch nur sehr schwer zu sehen ist, wenn da nur "In Arbeit" als Text auf der Seite zu sehen ist

Ich habe es jednfalls mit dem, auch von Axel schon angesprochenen, Login versucht und das passt sich dan meinen Änderungen schön und sauber an.

**LuQe** · 10.04.2010 15:54

Zitat von Helrunar

Axel hat es ja schon angesprochen, das es normalerweise über width in deiner css (Zeile 403) gereglt wird. Spiele einfach mal ein wenig mit dem Wert. Zumal s für uns auch nur sehr schwer zu sehen ist, wenn da nur "In Arbeit" als Text auf der Seite zu sehen ist

Ich habe es jednfalls mit dem, auch von Axel schon angesprochenen, Login versucht und das passt sich dan meinen Änderungen schön und sauber an.

Nunja, auch die Startseite mit den Bildern ist ja davon betroffen. Sobald ih den wert in irgendeiner Weise ändere, zerschießt´s das Design. Entweder verrutscht die Fußzeile nach oben ( sprich über das Logo ), oder der ganze Inhalt mit Text & Bildern unter das Menü

**LuQe** · 10.04.2010 16:12

Ich hätte noch eine Frage.
Wäre es möglich, nachdem man sich eingeloggt hat, einen Logout Button links im Menü zu plazieren? Es ist etwas irritierend, wenn man, um sich auszuloggen. links im Menü extra auf die Loginseite gehen muss.
Hier das Script nach dem Login :

<?xml version="1.0" encoding="utf-8"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta **********="content-type" content="text/html; charset=utf-8" />
<meta name="robots" content="index, follow" />
<meta name="keywords" content="FachLabel, Instebb" />
<meta name="description" content="" />
<meta name="generator" content="Joomla! 1.5 - Open Source Content Management" />
<title>Abmelden</title>
<script type="text/javascript" src="/includes/js/joomla.javascript.js"></script>

<meta **********="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="http://www.fachlabel.seite.instebb.at/templates/siteground93/css/template_css.css" type="text/css"/>

<link rel="alternate" type="application/rss+xml" title="fachlabel.instebb.at" href="http://www.fachlabel.seite.instebb.at/index.php?option=com_rss&feed=RSS2.0&no_html=1" />
</head>

<body class="body_bg">
<div class="left_bg">
<div class="right_bg">
<div id="header">

<P><BR><BR>
</P>

<div class="right">
<div id="menucenter">
<table cellpadding="0" cellspacing="0" style="margin:0 auto;">
<tr>
<td class="menu_m">
<div id="topnavi">
<ul>
<li><a href='&Itemid=6' ><span></span></a></li>
</ul>

</div>
</td>
</tr>
</table>
</div> </div>
<div class="clr"></div>
<p>

</div>

<div class="c_l_bg">
<div class="c_r_bg">

<div class="c_b_bg">

<div id="content">
<div class="width">
<div id="leftmenu">

<div class="module">
<div>
<div>
<div>
<p><img src="http://s5.directupload.net/images/100403/dazt3p5u.jpg" width="306" height="68" /></p> </div>

</div>
</div>
</div>
<div class="module">
<div>
<div>
<div>
<table style="width: 291px; height: 84px;" border="0">
<tbody>

<tr>
<td>
<div style="text-align: left;"><a href="/index.php?option=com_content&view=article& id=1&Itemid=3"><img onmouseover="this.src='http://www.fachlabel.seite.instebb.at/images/Menuelink/Startseite2.jpg';" onmouseout="this.src='http://www.fachlabel.seite.instebb.at/images/Menuelink/Startseite1.jpg';" src="http://www.fachlabel.seite.instebb.at/images/Menuelink/Startseite1.jpg" width="132" height="20" /></a></div>
</td>
<td valign="top"></td>
</tr>
<tr>
<td></td>
<td valign="top"></td>
</tr>
<tr>
<td></td>
<td valign="top"></td>
</tr>
<tr>
<td></td>
<td valign="top"></td>

</tr>
<tr>
<td><a href="/index.php?option=com_content&view=article& id=7&Itemid=7"><img onmouseover="this.src='http://www.fachlabel.seite.instebb.at/images/Menuelink/Besucher2.jpg';" onmouseout="this.src='http://www.fachlabel.seite.instebb.at/images/Menuelink/Besucher1.jpg';" src="http://www.fachlabel.seite.instebb.at/images/Menuelink/Besucher1.jpg" width="132" height="20" /></a></td>
<td valign="top"></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>

<tr>
<td><a href="/index.php?option=com_contact&view=contact& id=1"><img onmouseover="this.src='http://www.fachlabel.seite.instebb.at/images/Menuelink/Kontakt2.jpg';" onmouseout="this.src='http://www.fachlabel.seite.instebb.at/images/Menuelink/Kontakt1.jpg';" src="http://www.fachlabel.seite.instebb.at/images/Menuelink/Kontakt1.jpg" width="132" height="20" /></a></td>
<td valign="top"></td>
</tr>
<tr>
<td></td>
<td valign="top"></td>
</tr>
<tr>
<td></td>
<td valign="top"></td>
</tr>
<tr>
<td></td>
<td valign="top"></td>
</tr>
<tr>

<td><a href="/index.php?option=com_content&view=article& id=2&Itemid=2"><img onmouseover="this.src='http://www.fachlabel.seite.instebb.at/images/Menuelink/Impressum2.jpg';" onmouseout="this.src='http://www.fachlabel.seite.instebb.at/images/Menuelink/Impressum1.jpg';" src="http://www.fachlabel.seite.instebb.at/images/Menuelink/Impressum1.jpg" width="154" height="24" /></a></td>
<td valign="top"></td>
</tr>
<tr>
<td>
<div style="text-align: left;">
<div style="text-align: left;"><img src="http://www.fachlabel.seite.instebb.at/images/Menuelink/Login1.jpg" width="85" height="23" /></div>
</div>
</td>
<td valign="top"></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td><a href="http://www.fachlabel.seite.instebb.at/index.php?option=com_login"><img onmouseover="this.src='http://www.fachlabel.seite.instebb.at/images/Menuelink/Amt2.jpg';" onmouseout="this.src='http://www.fachlabel.seite.instebb.at/images/Menuelink/Amt1.jpg';" src="http://www.fachlabel.seite.instebb.at/images/Menuelink/Amt1.jpg" /></a></td>

<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td><a href="http://www.fachlabel.at/fengoffice/index.php?c=access&a=login"><img onmouseover="this.src='http://www.fachlabel.seite.instebb.at/images/Menuelink/Mitglieder1.jpg';" onmouseout="this.src='http://www.fachlabel.seite.instebb.at/images/Menuelink/Mitglieder.jpg';" src="http://www.fachlabel.seite.instebb.at/images/Menuelink/Mitglieder.jpg" /></a></td>
<td></td>
</tr>
</tbody>
</table> </div>
</div>
</div>

</div>
<div class="module">
<div>
<div>
<div>
<meta **********="content-type" content="text/html; charset=utf-8" />
<meta name="robots" content="index, follow" />
<meta name="keywords" content="FachLabel, Instebb" />
<meta name="description" />
<meta name="generator" content="Joomla! 1.5 - Open Source Content Management" />
<title>Abmelden</title>

<meta **********="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="http://www.fachlabel.seite.instebb.at/templates/siteground93/css/template_css.css" type="text/css" />

<link rel="alternate" type="application/rss+xml" title="fachlabel.instebb.at" href="http://www.fachlabel.seite.instebb.at/index.php?option=com_rss&feed=RSS2.0&no_ht ml=1" />
<title>Abmelden</title>
<table style="width: 205px; height: 26px;" border="0">
<tbody>
<tr>
<td>
<p><a href="/index.php?option=com_content&view=article& id=13&Itemid=3"><img onmouseover="this.src='http://www.fachlabel.seite.instebb.at/images/Menuelink/Kapa2.jpg';" onmouseout="this.src='http://www.fachlabel.seite.instebb.at/images/Menuelink/Kapa1.jpg';" src="http://www.fachlabel.seite.instebb.at/images/Menuelink/Kapa1.jpg" height="23" width="170" /></a></p>
<p> </p>
<p>Sie sind als Jugendamt</p>
<p>eingeloggt</p>

</td>
</tr>
</tbody>
</table>
<table style="width: 205px; height: 26px;" border="0">
<tbody>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
</tr>
<tr>
<td align="center"></td>
</tr>

</tbody>
</table>
<br /><input name="option" value="com_user" type="hidden" /> <input name="task" value="logout" type="hidden" /> <input name="return" value="aW5kZXgucGhw" type="hidden" />
<div id="main_full"><form action="/index.php?option=com_login" method="post" name="login" id="login"></form></div>
<div id="main_full"><form action="/index.php?option=com_login" method="post" name="login" id="login"></form></div> </div>
</div>
</div>
</div>

</div>

<div id="main_full">

<div class="componentheading">
Zugang für Jugendämter</div>
<form action="/index.php?option=com_login" method="post" name="login" id="login">
<table border="0" align="center" cellpadding="4" cellspacing="0" class="contentpane" width="100%">
<tr>
<td valign="top">
<div>
<img src="/images/stories/key.jpg" align="right" hspace="10" alt="" /> Anmeldung im internen Bereich der Website erfolgreich. </div>
</td>

</tr>
<tr>
<td align="center">
<div align="center">
<input type="submit" name="Submit" class="button" value="Abmelden" />
</div>
</td>
</tr>
</table>

<br /><br />

<input type="hidden" name="option" value="com_user" />
<input type="hidden" name="task" value="logout" />
<input type="hidden" name="return" value="aW5kZXgucGhw" />
</form>

</div>

<div id="footer">
<p class="copyright"> fachlabel.instebb.at, &copy 2010 </a>
</p>

</div>

</div>

</body>
</html>

**time4mambo** · 10.04.2010 16:36

Die index.php brauchen wir dafür nicht, da Joomla modular funktioniert

Die Breite:
deine ganzen Tabellen werf mal bitte aus deinen Beiträgen komplett raus und arbeite dann mit der CSS.
Die Breiie passt du so an, wie bereits geschrieben. Also mittels der Zahl neben "width".
Wenn das dein Design zerschießt, dann deswegen, weil die CSS nicht stimmig ist und gravierende Fehler im Design vorliegen. Also das deisgn nachbearbeiten.
Wenn du bisher mit Tabellen - die man nicht zu Layout-Zwecken benutzt aus Gründen der Barrierefreiheit und Performance und anderen Dingen, dann kann es schon passieren, das es plötzlich erst mal unsauber ausschaut.

Allein schon der Browserkompatiblilität kommst aber nicht drumherum dich mit CSS zu beschäftigen.

Logout:
Lege das Loginmodul einfach in die Menüspalte. Nach dem Anmelden steht da dann das Logout

Axel

Thema: Abstand zu oberen Leiste ändern

LinkBack

Themen-Optionen

Thema durchsuchen

Anzeige

Abstand zu oberen Leiste ändern

Erhielt Danksagungen von:

Lesezeichen

Lesezeichen

Berechtigungen