Darstellungsprobleme mit DIV + CSS

Status
Nicht offen für weitere Antworten.

ev0lst

Erfahrenes Mitglied
Hallo,

wir haben eine Page gemacht, aber noch local auf unserem PC.
Beim testen im IE ist uns aufgefallen, dass die Seite sehr langsam daher kommt. Vor allem im Bezug auf Scrollen gibt es schnell und Ruckler.

Es werden auch einige Grafiken verwendet...

Woran kann das alles liegen? Wir nutzen vorzugsweise DIV mit Css-Klassen usw.
Wo könnte man etwas optimieren?

Danke
 
Vielleicht solltest Du auch den dazugehörigen Quellcode (HTML + CSS) zeigen, damit man da einen Blick reinwerfen kann.
 
Wie immer :)

CSS

HTML:
/* Basics */

html, .html, body, .body
{ 
margin:0; padding:0; 
}

body
{  
background-image:url(../../images/basic/outer_bg.gif); 
}

body, td
{ 
font-size:11px;
font-family: Verdana, Arial, Tahoma, Sans-serif; 
color:#4D4D4D;
line-height:19px;
}

/* Layout-Basics */

#outer
{
width:100%;
}

#area_top
{
height:54px;
background-image:url(../../images/basic/area_top.gif); 
}

#area_header
{
height:163px;
background-image:url(../../images/basic/header_bg.gif); 
}

#area_navigation
{
height:41px;
background-image:url(../../images/basic/navigation_bg.gif); 
}



#container					
{ 
width:914px; 
position:relative; 
left:50%; 
margin-left:-457px; 
background-image:url(../../images/basic/navigation_bg.gif); 
background-repeat: repeat-y; 
}


#main					
{ 
width:946px; 
position:relative; 
left:50%; 
margin-left:-473px; 
background-image:url(../../images/basic/content_bg.gif); 
background-repeat: repeat-y; 
}

.content
{
width:926px; 
position:relative; 
left:50%; 
margin-left:-463px; 
}

.padding
{
padding:10px;
}

#left
{
float:left;
width:490px;
}

#right
{
float:right;
width:424px;
}

#footer
{
clear:both;
width:946px;
background-color:#666666;
text-align:center;
}

.copyright
{
color:#989898;
}

/* Forms */

.textfield
{ 
height:12px; 
padding:3px; 
border-right:solid 1px #D7DAD3; 
border-bottom:solid 1px #D7DAD3; 
border-left:solid 1px #909D93; 
border-top:solid 1px #909D93; 
font-size:10px;
font-family:Verdana, Arial, Time New Roman;
}

.areafield
{ 
padding:3px; 
border-right:solid 1px #D7DAD3; 
border-bottom:solid 1px #D7DAD3; 
border-left:solid 1px #909D93; 
border-top:solid 1px #909D93; 
font-size:10px;
font-family:Verdana, Arial, Time New Roman;
}

.fl 
{
float:left;
}

.fr
{
float:right;
}

.cb
{
clear:both;
}

a, a:link					{ color:#3D3D3D; text-decoration:none; }
a:hover 					{ text-decoration:underline; color:#3D3D3D; }
a:visited					{ color:#3D3D3D; }

.headline
{
font-size:12px;
font-family:Arial, Verdana, Time New Roman;
}


.date
{
font-size:12px;
font-family:Arial, Verdana, Time New Roman;
}

b, strong 
{ 
font-family:Arial, Verdana, Time New Roman;
color:#000000;
}

.splitline
{
width:100%;
}

.lightbg
{
background-color:#FFFFFF;
}

.thumb
{
border:solid 1px #4D4D4D;
margin:3px;
}

.select, select
{
font-family:Verdana, Arial, Time New Roman;
font-size:11px;
}

.box
{
background-color:#FFFFFF;
background-image:url(../../images/basic/boxbg.gif); 
background-repeat: no-repeat; 
}

.image_item
{
border:solid 1px #000000;
margin:15px;
}

.center
{
text-align:center;
}


HTML

HTML:
<div id="outer">

<div id="area_top"><div class="content"><a target="_blank" href="/"><img border="0" width="136" height="38" src="images/basic/topnav_01.gif" alt="Bild" title="Bild" /></a><a target="_blank" href="/"><img border="0" width="91" height="38" src="images/basic/topnav_02.gif" alt="Forum" title="Bild" /></a><a target="_blank" href="/"><img border="0" width="171" height="38" src="images/basic/topnav_03.gif" alt="Bild" title="Bild" /></a></div></div>
<div id="area_header"><div class="content"><a target="_blank" href="/"><img width="928" height="137" border="0" src="images/basic/header.jpg" alt="Bild" title="Bild" /></a></div>

<div id="area_navigation">
<div class="content" style="height:41px;">
<a href="/"><img border="0" src="images/basic/nav_01.gif" alt="Bild" title="Bild" /></a><a href="[link|news|main|0|0|0|link]"><img border="0" src="images/basic/nav_02.gif" alt="Bild" title="Bild" /></a><a href="[link|gallerys|main|0|0|0|link]"><img border="0" src="images/basic/nav_03.gif" alt="Bild" title="Bild" /></a><a href="[link|downloads|main|0|0|0|link]"><img border="0" src="images/basic/nav_04.gif" alt="Bild" title="Bild" /></a><a href="/"><img border="0" src="images/basic/nav_05.gif" alt="Bild" title="Bild" /></a><a href="/"><img border="0" src="images/basic/nav_06.gif" alt="Bild" title="Bild" /></a><a href="[link|page|main|3|0|0|link]"><img border="0" src="images/basic/nav_07.gif" alt="Service" title="Bild" /></a><a href="[link|page|main|2|0|0|link]"><img border="0" src="images/basic/nav_08.gif" alt="Bild" title="Bild" /></a><a href="[link|contact|main|0|0|0|link]"><img border="0" src="images/basic/nav_09.gif" alt="Bild" title="Bild" /></a><a href="[link|page|main|1|0|0|link]"><img border="0" src="images/basic/nav_10.gif" alt="Bild" title="Bild" /></a>
</div>
</div>
<div id="main">
<div class="content">
<a href="/"><img border="0" src="images/basic/shopnav_Bild.gif" alt="Bild" title="Bild" /></a><a href="/"><img border="0" src="images/basic/shopnav_Bild.gif" alt="Bild" title="Bild" /></a><a href="/"><img border="0" src="images/basic/shopnav_Bild.gif" alt="Bild" title="Bild" /></a><a href="/"><img border="0" src="images/basic/shopnav_Bild.gif" alt="Bild" title="Bild" /></a><a href="/"><img border="0" src="images/basic/shopnav_Bild.gif" alt="Bild" title="Bild" /></a><a href="/"><img border="0" src="images/basic/shopnav_Bild.gif" alt="Bild" title="Bild" /></a><a href="/"><img border="0" src="images/basic/shopnav_gc.gif" alt="Bild" title="Bild" /></a><a href="/"><img border="0" src="images/basic/shopnav_wii.gif" alt="Bild" title="Bild" /></a><a href="/"><img border="0" src="images/basic/shopnav_nds.gif" alt="Bild" title="Bild" /></a><br /><a href="/"><img border="0" src="images/basic/shopnav_01.gif" alt="Bild" title="Bild" /></a><a href="/"><img border="0" src="images/basic/shopnav_02.gif" alt="Bild" title="Bild" /></a><a href="/"><img border="0" src="images/basic/shopnav_03.gif" alt="iPOD" title="Bild" /></a><a href="/"><img border="0" src="images/basic/shopnav_05.gif" alt="Speicherkarten" title="Bild" /></a><a href="/"><img border="0" src="images/basic/shopnav_06.gif" alt="Bild" title="Bild" /></a><a href=""><img border="0" src="images/basic/shopnav_08.gif" alt="Bild" title="Bild" /></a><a href=""><img border="0" src="images/basic/shopnav_09.gif" alt="Bild" title="Bild" /></a><a href="/"><img border="0" src="images/basic/shopnav_11.gif" alt="Bild" title="Bild" /></a><a href="/"><img border="0" src="images/basic/shopnav_10.gif" alt="Bild" title="Bild" /></a>

<div id="left">
<div class="padding">{$position}</div>
<!-- CONTENT -->
</div>

<div id="right"><br />
<br /><br />
{$info}
<br />
{$newsletterbox}
<br />
</div>

<div class="splitline cb">&nbsp;</div>

<div id="left"><br />
<div class="cb"><a href="/"><img width="490" height="59" border="0" src="images/basic/startpage_messageboard.gif" alt="Messageboard" /></a></div>
<br />
{$forumreader}
</div>

<div id="right"><br />
<div class="cb"><a href="[link|downloads|main|0|0|0|link]"><img width="424" height="59" border="0" src="images/basic/startpage_downloads.gif" alt="Downloads" /></a></div>
<br />
{$latest_downloads}
</div>

<br />


</div>

<div id="footer">
<img border="0" src="images/basic/footer.gif" alt="Bild" title="Bild" />
<span class="copyright">(c) 2006</span>
<br /><br />
</div>
</div>
<br /><br />

</div>
<br /><br />
 
Vielleicht liegt es daran, dass der HTML-Quelltext nicht vollständig ist (DIV-Blöcke werden nicht geschlossen). Aber wenn du ihn mal ein bißchen strukturierst, dann findest du das sicherlich selber raus ...
 
Status
Nicht offen für weitere Antworten.
Zurück