|
| |
ASP.NET, WebServices u. Remoting| große Abstände bei Containern? | |  | | Autor: Cinema | | Datum: 11.05.13 13:07 |
| Hallo 
ich habe mich bereits mit PHP vertraut gemacht, wollte nun jedoch mal sehen was die andere Seite so bietet und wollte da ich C# bereits erlernt habe eine ASP.NET Webseite erstellen.
Läuft auch alles soweit gut, außer:
Die Abstände der Container werden seltsam vergrößert.
So siehts im Entwurf in Visual Studio aus, und so müsstes nach der CSS auch aussehen:
Doch im Browser siehts so aus:
Wieso? Wie gesagt nach der CSS her müsste es so aussehen wie Visual Studio es anzeigt.
Doch Abstände von teilweise 100 Pixeln (+) wurden nirgends definiert und sieht natürlich nicht schön aus.
CSS:
html, body
{
background-color: transparent;
font: normal 11pt helvetica;
letter-spacing: 0.02cm;
word-spacing: 0.07cm;
orphans: 2;
windows: 2;
white-space: pre-wrap;
}
div#main-container
{
width: 80%;
min-width: 1000px;
max-width: 1500px;
margin: 0 auto 25px auto;
height: 800px;
}
div#menue
{
width: 100%;
height: 50px;
border: 1px solid #000;
}
div#leftbar
{
margin: 10px 5px 6px 1px;
height: 740px;
width: 25%;
}
div#ranking
{
width: 100%;
height: 450px;
border: 1px solid #000;
}
div#game-info
{
margin-top: 10px;
width: 98%;
padding: 1%;
height: 120px;
border: 1px solid #000;
}
Beitrag wurde zuletzt am 11.05.13 um 13:08:43 editiert. | |
| Re: große Abstände bei Containern? | | | | Autor: Preisser | | Datum: 11.05.13 13:31 |
| Hallo,
und wie sieht der fertige HTML-Code aus? Verwendest du evtl. einen Quirksmodus-Doctype statt des Standardmodus-Doctypes ("<!DOCTYPE html>")?
Wenn du die Seite im IE anzeigst, könnte es auch sein dass dort ein Kompatibilitätsmodus aktiviert ist, sodass er die Seite im IE7-Modus statt IE10 anzeigt (das Symbol in der Adressleiste, das wie ein zerrissenes Dokument aussieht). Den Kompatibilitätsmodus im IE kann man mit einem HTTP-Header wie "X-UA-Compatible: IE=Edge" verhindern (oder mit einem entsprechenden Meta-Tag, aber das ist in HTML5 nicht valide).
Durch Drücken der Taste F12 im IE werden die Entwicklertoos geöffnet, wo man genau sehen kann, welchen Modus der IE verwendet (Quirks, IE5-Quirks, IE7-Standards bis IE10-Standards usw.).
Man auch kann im Firefox mit Addons wie Firebug die Seite genau untersuchen und nachsehen, welche CSS-Styles auf welches HTML-Element angewendet werden, was beim Debuggen ungemein hilft (geht auch im IE bei den Entwickertools).
Beitrag wurde zuletzt am 11.05.13 um 13:38:49 editiert. | |
| Re: große Abstände bei Containern? | | | | Autor: Cinema | | Datum: 11.05.13 14:14 |
| Das Bild stammt von Chrome ^^
Für IE müssen dann wahrscheinlich wieder die CCs ran 
Das seltsamste dabei ist, der Abstand zwischen Menue und leftbar (leftbar beinhaltet Ranking und Infobox) und der Abstand zwischen Ranking und infoBox ist eigentlich gleich groß, im Browser aber nicht.
In Opera, Mozilla sieht es genauso aus wie im Chrome Browser.
HTML:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="index.aspx.cs" _
Inherits="CapitolOfDrugs.WebForm1" %>
<!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 runat="server">
<title>Willkommen !</title>
<link href="css/index.css" rel="Stylesheet" type="text/css" />
</head>
<body>
<div id="main-container">
<div id="menue">
</div>
<div id="leftbar">
<div id="ranking">
</div>
<div id="game-info">
</div>
</div>
</div>
</body>
</html> | |
| Re: große Abstände bei Containern? | | | | Autor: Preisser | | Datum: 11.05.13 14:31 |
| Hallo,
ok, bei mir waren auch die großen Abstände sichtbar.
Der Grund dürfte sein, dass du im CSS für html und body folgendes angegeben hast:
white-space: pre-wrap; Dies bedeutet, dass der Browser Whitespaces wie Leerzeichen, Zeilenumbruch, Tab usw. nicht als ein Leerzeichen zusammenfasst (oder überflüssige entfernt), sondern genauso wiedergibt, wie sie im Quellcode stehen. Wenn du also z.B. folgendes hast:
<div id="menue">
</div>
<div id="leftbar"> (...)dann gibt es zwischen dem "menue"-Div und dem "leftbar"-Div zwei Zeilenumbrüche, die die großen Abstände verursachen. Sobald ich das "white-space: pre-wrap" im Firebug deaktiviere, sind die Abstände weg.
Das "white-space: pre-wrap;" sollte eigntlich nur auf spezielle HTML-Elemente angewendet werden, die keinen HTML-formatierten Text beinhalten, der z.B. über ASP.Net eingefügt wird, damit trotzdem Zeilenumbrüche und Leerzeichen korrekt angezeigt werden (dann würde ich allerdings dafür ein pre-Tag verwenden, damit auch andere Browser, die kein CSS verwenden (wie Suchmaschinen) wissen, dass dort Whitespaces anders interpretiert werden sollen).
Übrigens ist
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> einer der veralteten HTML4.01- bzw. XHTML 1.0-Doctypes, der den Fast-Standards-Modus ("Almost Standards Mode") triggert (d.h. er orientiert sich zwar am Standards-Modus, simuliert jedoch einige Fehler des Quirks-Modus) - aktuell ist aber HTML5, dort sollte man diesen Doctype verwenden, der den "reinen" Standards-Mode triggert:
<!DOCTYPE html> (Einen XHTML-Doctype in einem HTML-Dokument zu verwenden, war bisher zwar sehr verbreitet, macht aber keinen Sinn, da der Dokumenttyp ja über den Contenttype bestimmt wird, und dies ist bei "text/html" eben HTML - für echtes XHTML müsste man schon "application/xhtml+xml" verwenden.  Dies steht jetzt auch in der HTML5-Spezifikation.)
Beitrag wurde zuletzt am 11.05.13 um 14:53:32 editiert. | |
| Re: große Abstände bei Containern? | | | | Autor: Cinema | | Datum: 11.05.13 15:07 |
| Ich dank dir.
Dachte das richtet sich automatisch nur an Absätze ^^
Doctype wurde von VS geschrieben, ich persönlich verwende auch die Kurzform !doctype html, wenn mit Notepad++ programmiert wird ^^
Danke nochmal. | |
 | Sie sind nicht angemeldet!
Um auf diesen Beitrag zu antworten oder neue Beiträge schreiben zu können, müssen Sie sich zunächst anmelden.
 Einloggen | Neu registrieren |
 |
|
Neu! sevEingabe 3.0 
Einfach stark!
Ein einziges Eingabe-Control für alle benötigten Eingabetypen und -formate, inkl. Kalender-, Taschenrechner und Floskelfunktion, mehrspaltige ComboBox mit DB-Anbindung, ImageComboBox u.v.m. Weitere InfosTipp des Monats Access-Tools Vol.1 
Über 400 MByte Inhalt
Mehr als 250 Access-Beispiele, 25 Add-Ins und ActiveX-Komponenten, 16 VB-Projekt inkl. Source, mehr als 320 Tipps & Tricks für Access und VB
Nur 24,95 EURWeitere Infos
|
Mai 2024
Sie sind aktuell nicht angemeldet.