✔ Texte verschieben sich ungewollt

YoshYeah · 5. Mai 2010

Hallo zusammen,

ich bin ein absoluter Neuling auf dem CSS-Gebiet und versteh folgendes bis jetzt noch nicht so recht ....

Das Foto steht mein Iphone dar.
Ich möchte, dass die Wetter-Bezeichnung (in meinem Fall "Light Rain") sowie die Grad-Anzeige rechtsbündig sind, genau wie der Stadt-Name (in meinem Fall Augsburg)

Ich habe schon was von einem z-index gehört, und auch damit rumgespielt, aber leider verändert sich nichts.

Hoffe mir kann jemand weiterhelfen ...grüße.

Hier noch der Code:

Code:

#WeatherContainer{
        margin-top:30px;
        width:100%;
        color:white;
        background-color: rgba(0,0,0,.50);
        height:55px;
        padding-top:0px;
}

#TextContainer{
        font-family: Helvetica;
        text-shadow: 1px 1px 1px #000;
        margin:none;
        width:320px;
}

#city{
        position:fixed
        text-transform:capitalize;
        text-align: right;
        padding-top:20px;
        padding-right:10px;
        float:right;
        color: #66ff77;
        font-size:30px;
}

#TextContainer p{
        margin:0;
        display:inline;
        text-transform:capitalize;
        text-align:right;
        float:right;
}

#city, #temp{
}

#temp{
        padding-top:100px;
        padding-right:10px;
}

#desc{
        padding-top:70px;
        padding-right:10px;
}

#weatherIcon{
        height:120px;
        width:120px;
        position:fixed;
        margin-top:0px;
        margin-left:2px;
}

Godstyle · 5. Mai 2010

moin

#city{
position:fixed

hinter dem fixed ein ; vergessen

Maik · 5. Mai 2010

Hi,

mal abgesehen von diesem wirkungsvollen Syntax-Fehler, der mir beim Überfliegen deines Stylesheets aufgefallen ist:

CSS:

#city{
        position:fixed /* Hier fehlt das Semikolon, womit alle nachfolgenden Regeln dieses Regelblocks für #city vom Browser nicht interpretiert werden. Aus diesem Grund darf in einem Regelblock ausschließlich die zuletzt genannte Regeldefinition ohne Semikolon notiert werden. */
        text-transform:capitalize;
        text-align: right;
        padding-top:20px;
        padding-right:10px;
        float:right;
        color: #66ff77;
        font-size:30px;
}

Und wie lautet dein dazugehöriger HTML-Code? Ohne diesen im Kontext betrachtet, ist das CSS zunächst mal aussagelos.

mfg Maik

YoshYeah · 5. Mai 2010

Ich hoffe dies hier ist der HTML-Code:

Code:

<table style="position: absolute; top: 0px; left: 0px; width: 320px; height: 480px;" cellspacing="0" cellpadding="0" align="center" border ="0" bgcolor="transparent">

<tr><td rowspan="4"  width="2" valign="center">&nbsp;</td></tr>
<tr><td height="340" valign="bottom" border="0">

</td></tr>

<tr align="center" valign="center"  border="0" cellpadding="0">
<td height="2" valign="left">
<span id="clock">
<script language="JavaScript">updateClock(); setInterval('updateClock()', 1000 )</script></span>&nbsp;<span id="ampm">
</span>
</td></tr>

<tr><td id="date" valign="top">
<script language="JavaScript">document.write(this_date_string)</script>
</td></tr>
</table>

Ich habe aber unten mittig auch noch datum und uhrzeit stehen ...ich weiß jetzt nicht ob der HTML Code für z.b. beide gilt oder nur für einen.

Maik · 5. Mai 2010

Hat die Fehlerkorrektur zu keinem Erfolg geführt?

Und wo verstecken sich nun all die HTML-Elemente, für die obiges CSS gelten soll?

Ist die Seite online verfügbar? Dann nenn uns ihren Link, anstelle der Bildchen, die zur Ursachenforschung nichts beitragen, oder poste den vollständigen Quellcode (HTML + CSS) der Seite.

mfg Maik

YoshYeah · 5. Mai 2010

Hallo Maik,

erstmal danke dass du dich meinem Problem so schnell widmest

Die Korrektur hatte komischerweise nur noch größeren Wahnsinn hervorgebracht ...nämlich dass die ORTSANGABE auf einmal Linksbündig ist ...wieso weshalb warum keine Ahnung.

...ich poste jetzt mal die Kompletten Dateien ...wie gesagt, es handelt sich hier um das Iphone.

YoshYeah · 5. Mai 2010

Wallpaper.html:

Code:

<html>
<head>

<title>The Time Weather</title>

<link rel="stylesheet" href="DefaultStyle.css">

<base href="Private/"/>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta http-equiv="refresh" content="900; url=../Wallpaper.html"/>

<script type="text/javascript" src="configureMe.js"/>
<script type="text/javascript" src="Wallpaper.js"/>
<script type="text/javascript" src="basiccalendar.js">
</script>

<script type="text/javascript">
<!--
var this_weekday_name_array = new Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday")
var this_month_name_array = new Array("January","February","March","April","May","June","July","August","September","October","November","December")    //predefine month names


var this_date_timestamp = new Date()

var this_weekday = this_date_timestamp.getDay()
var this_date = this_date_timestamp.getDate()
var this_month = this_date_timestamp.getMonth()
var this_year = this_date_timestamp.getYear()

if (this_year < 1000)
    this_year+= 1900;
if (this_year==101)
    this_year=2001;

var this_date_string = this_weekday_name_array[this_weekday] + ", " + this_month_name_array[this_month] + " " + this_date  //concat long date string

// -->
function init ( )
{
  timeDisplay = document.createTextNode ( "" );
  document.getElementById("clock").appendChild ( timeDisplay );
}

function updateClock ( )
{
  var currentTime = new Date ( );

  var currentHours = currentTime.getHours ( );
  var currentMinutes = currentTime.getMinutes ( );
  var currentSeconds = currentTime.getSeconds ( );

  // Pad the minutes and seconds with leading zeros, if required
  currentMinutes = ( currentMinutes < 10 ? "0" : "" ) + currentMinutes;
  currentSeconds = ( currentSeconds < 10 ? "0" : "" ) + currentSeconds;

  // Convert the hours component to 12-hour format if needed
  currentHours = ( currentHours > 12 ) ? currentHours  : currentHours;

  // Compose the string for display
  var currentTimeString = currentHours + ":" + currentMinutes;

  // Update the time display
  document.getElementById("clock").firstChild.nodeValue = currentTimeString;
}

// -->
</script>


</head>

<body onload="onLoad()">

<div id="WeatherContainer">
<div id="TextContainer">
<p id="city">Loading...</p>
<p id="temp">--Âº</p>
<p id="desc">-</p>
</div>
<img id="weatherIcon" src=""/>
</div>

<table style="position: absolute; top: 0px; left: 0px; width: 320px; height: 480px;" cellspacing="0" cellpadding="0" align="center" border ="0" bgcolor="transparent">

<tr><td rowspan="4"  width="2" valign="center">&nbsp;</td></tr>
<tr><td height="340" valign="bottom" border="0">

</td></tr>

<tr align="center" valign="center"  border="0" cellpadding="0">
<td height="2" valign="left">
<span id="clock">
<script language="JavaScript">updateClock(); setInterval('updateClock()', 1000 )</script></span>&nbsp;<span id="ampm">
</span>
</td></tr>

<tr><td id="date" valign="top">
<script language="JavaScript">document.write(this_date_string)</script>
</td></tr>
</table>



</body>
</html>

Dann habe ich die besagte CSS-Datei:

Code:

#WeatherContainer{
        margin-top:30px;
        width:100%;
        color:white;
        background-color: rgba(0,0,0,.50);
        height:55px;
        padding-top:0px;
}

#TextContainer{
        font-family: Helvetica;
        text-shadow: 1px 1px 1px #000;
        margin:none;
        width:320px;
}

#city{
        position:fixed
        text-transform:capitalize;
        text-align: right;
        padding-top:20px;
        padding-right:10px;
        float:right;
        color: #66ff77;
        font-size:30px;
}

#TextContainer p{
        margin:0;
        display:inline;
        text-transform:capitalize;
        text-align:right;
        float:right;
}

#city, #temp{
}

#temp{
        padding-top:100px;
        padding-right:10px;
}

#desc{
        padding-top:70px;
        padding-right:10px;
}

#weatherIcon{
        height:120px;
        width:120px;
        position:fixed;
        margin-top:0px;
        margin-left:2px;
}

Dann habe ich noch eine Datei, die sich wie folgt nennt: XXX.js

Code:

var locale = "Augsburg, Germany" //e.g. 'Defiance, Ohio'|'Moscow, Russia'|'Ledyard, AT'|'London, UK'

var isCelsius = true //true|false

var useRealFeel = false //true|false

var enableWallpaper = true; //true|false
var enableLockScreen = false; //true|false

var stylesheetWall = 'Yosh' //'Yosh'

var iconSetWall = 'flick' //'flick'
var iconExtWall = ".png" //'.png'

var source = 'appleAccuweatherStolen' //'appleAccuweatherStolen'|'yahooWeather'

var updateInterval = 15 //Minutes

Und dann habe ich noch eine vierte Datei ...ebenfalls mit einer .js endung:

Code:

function onLoad(){
        if (enabled == true){
        if (demoMode == true){
                document.getElementById("weatherIcon").src="Icon Sets/"+iconSet+"/"+"cloudy1"+iconExt;
                document.getElementById("city").innerText="Somewhere";
                document.getElementById("desc").innerText="Partly Cloudy";
                document.getElementById("temp").innerText="100Âº";

        }else{
        document.getElementById("weatherIcon").src="Icon Sets/"+iconSet+"/"+"dunno"+iconExt;
        validateWeatherLocation(escape(locale).replace(/^%u/g, "%"), setPostal)
        }
        }else{
                document.getElementsByTagName("body")[0].innerText='';
        }
}

function convertTemp(num)
{
        if (isCelsius == true)
                return Math.round ((num - 32) * 5 / 9);
        else
                return num;
}

function setPostal(obj){

        if (obj.error == false){
                if(obj.cities.length > 0){
                        postal = escape(obj.cities[0].zip).replace(/^%u/g, "%")
                        document.getElementById("WeatherContainer").className = "";
                        weatherRefresherTemp();
                }else{
                        document.getElementById("city").innerText="Not Found";
                        document.getElementById("WeatherContainer").className = "errorLocaleNotFound";
                }
        }else{
                document.getElementById("city").innerText=obj.errorString;
                document.getElementById("WeatherContainer").className = "errorLocaleValidate";
                setTimeout('validateWeatherLocation(escape(locale).replace(/^%u/g, "%"), setPostal)', Math.round(1000*60*5));
        }
}

function dealWithWeather(obj){

        if (obj.error == false){
                document.getElementById("city").innerText=obj.city;
                document.getElementById("desc").innerText=obj.description.toLowerCase();

                if(useRealFeel == true){
                        tempValue = convertTemp(obj.realFeel);
                }else{
                        tempValue = convertTemp(obj.temp)
                }
                document.getElementById("temp").innerText=tempValue+"Âº";
                document.getElementById("weatherIcon").src="Icon Sets/"+iconSet+"/"+MiniIcons[obj.icon]+iconExt;
                document.getElementById("WeatherContainer").className = "";


        }else{
                document.getElementById("WeatherContainer").className = "errorWeatherDataFetch";
        }


}

function weatherRefresherTemp(){
        fetchWeatherData(dealWithWeather,postal);
        setTimeout(weatherRefresherTemp, 60*1000*updateInterval);
}

Ich bin mir aber fast sicher, dass es irgendwo in die CSS Datei rein kommen muss. Also mit diesem besagten "z-index" hat bei mir nichts gebracht.

Grüße

Maik · 5. Mai 2010

YoshYeah hat gesagt.:
...ich poste jetzt mal die Kompletten Dateien ...wie gesagt, es handelt sich hier um das Iphone.

Hab ich nicht

Oder wird es in den Webbrowsern ebenso falsch dargestellt?

Und wozu die Unterbrechung, den Code in einem zweiten Beitrag zu posten? :suspekt:

mfg Maik

YoshYeah · 5. Mai 2010

Maik hat gesagt.:
Und wozu die Unterbrechung, den Code in einem zweiten Beitrag zu posten? :suspekt:

mfg Maik

Welche Unterbrechung? Ich habe den kompletten Text der jeweiligen Dateien gepostet ....es nur mehrere Dateien in verschiedenen Ordnern ...ich denke dass die sich irgendwie in einer Art Programm-Ablauf zueinander verhalten ...aber wie gesagt, es sind nur vermutungen von mir

Ich habe die Dateien, aus dem Inet und sie dann auf meine Wünsche umgeändert ....und jetzt hakts eben, dass der mir die Orts- und Wetterangaben nicht alle untereinander rechtsbündig schreibt.

Aber ich vermute, dass mir hier wohl nicht geholfen werden kann ...da muss ich mal einen iPhone-Spezi fragen

Maik · 5. Mai 2010

CSS:

#TextContainer{
        font-family: Helvetica;
        text-shadow: 1px 1px 1px #000;
        margin:none;
        width:320px;
        float:right; /* neu hinzugekommen */
}

#city{
        position:fixed; /* mit Semikolon */
        text-transform:capitalize;
        text-align: right;
        padding-top:20px;
        padding-right:10px;
        right:0; /* anstelle von float:right */
        color: #66ff77;
        font-size:30px;
}

#desc{
        padding-top:70px;
        padding-right:10px;
        clear:right; /* neu hinzugekommen */
}

... wird bei mir in den standardkonformen Browsern soweit korrekt interpretiert.

Was dein iPhone davon hält, werden wir ja dann erfahren ;-)

mfg Maik

✔ Texte verschieben sich ungewollt

YoshYeah

Grünschnabel

Godstyle

Erfahrenes Mitglied

Maik

YoshYeah

Grünschnabel

Maik

YoshYeah

Grünschnabel

YoshYeah

Grünschnabel

Maik

YoshYeah

Grünschnabel

Maik

Neue Beiträge