Hallo ich möchte gerne das die <div> Bereiche (WeatherIconContainer und TextContainer) nebeneinander angezeigt werden. Und nicht untereinander... das ganze nur über die CSS dateien...
wie bekomme ich das hin?
grüße Stefan
wie bekomme ich das hin?
grüße Stefan
HTML:
#WeatherContainer{
float: left;
position: absolute;
top: 320px;
left: 10px;
background-color: #888;
color: white;
-webkit-border-radius: 10px;
border-style: solid;
border-color: #4c4c4c;
opacity: 0.90;
}
#TextContainer{
float: left;
margin-left: 5px;
margin-right: 5px;
font-family: sans-serif;
text-shadow: rgba(0,0,0,0.7) 0 0 2px;
}
#WeatherIconContainer{
float: right;
margin-top: 5px;
margin-left: 5px;
margin-right: 5px;
font-family: sans-serif;
text-shadow: rgba(0,0,0,0.7) 0 0 2px;
}
#city{
text-transform: capitalize;
font-weight: bold;
}
#TextContainer p{
padding: 0;
margin: 0;
}
#desc{
text-transform: capitalize;
display: none;
}
#weatherIcon{
height: 36px;
width: 36px;
border: none;
}
HTML:
<?xml version="1.0" encoding="UTF-16"?>
<html><head>
<base href="Private/"/>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<style>
body {
background-image:url(/var/mobile/Library/SpringBoard/HomeBackground.jpg);
background-size: 60%;
background-repeat none;
margin: 0;
padding: 20px 0 0 0;
height: 960px;
width: 640px;
}
</style>
<script type="text/javascript" src="configureMe.js"/>
<script type="text/javascript" src="Wallpaper.js"/>
</head>
<body onload="onLoad()">
<div id="WeatherContainer">
<div id="TextContainer">
<p id="city">Loading...</p>
<p id="temp">-º</p>
<p id="desc">-</p>
</div>
<div id="WatherIconContainer">
<img id="weatherIcon" src=""/>
</div>
</div>
</body></html>
