Office Forum
www.Office-Loesung.de
Access :: Excel :: Outlook :: PowerPoint :: Word :: Office :: Wieder Online ---> provisorisches Office Forum <-
Formatierungs-Verschiebung im Browser durch Nutzung von DIV
zurück: Link einbinden weiter: Expression Web 3 deinstallieren und auf neue Festplatte Unbeantwortete Beiträge anzeigen
Neues Thema eröffnen   Neue Antwort erstellen     Status: Antwort Facebook-Likes Diese Seite Freunden empfehlen
Zu Browser-Favoriten hinzufügen
Autor Nachricht
ladwest
Im Profil kannst Du frei den Rang ändern


Verfasst am:
09. Mai 2012, 11:06
Rufname:

Formatierungs-Verschiebung im Browser durch Nutzung von DIV - Formatierungs-Verschiebung im Browser durch Nutzung von DIV

Nach oben
       

Hallo,

ich beschäftige mich seit einigen Tagen mit Microsoft Expression Web 4, um eine Homepage mit Hilfe dieses Programmes zu erstellen.
Nachdem ich nun ausführlich meine Seite mit Hilfe der DIV-Funktion und CSS eingeteilt habe, besteht nun das Problem, dass wenn ich die Seite in der Browservorschau öffne und das Browserfenster verkleinere, verschiebt sich meine gesamte Formatierung und passt sich sozusagen nicht der Fenstergröße des Browsers an.
Welche Lösung übersehe ich da?
Vielen Dank!
womaninweb
(X)HTML und CSS Junkie


Verfasst am:
09. Mai 2012, 13:49
Rufname:
Wohnort: Aachen


AW: Formatierungs-Verschiebung im Browser durch Nutzung von - AW: Formatierungs-Verschiebung im Browser durch Nutzung von

Nach oben
       

Hallo ladwest,

in Ermangelung an konkretem Code stochere ich mal ein wenig im Trüben und tippe darauf, dass deine Divs eine festgelegte und keine relative Breite haben. Damit sie sich an die Fensterbreite anpassen können, sollte als Einheit Prozent gewählt werden. Dabei musst du aber berücksichtigen, dass der Browser Rahmen (border), Innenabstände (padding) und Außenabstände (margin) ebenfalls zur Breite hinzurechnet. Die Gesamtbreite deiner Divs sollte deshalb unter 100% liegen.

Btw, eine "DIV-Funktion" ist mir völlig unbekannt; Divs sind einfache HTML-Elemente, die in der Regel einen Container für Inhalte darstellen.

Gruß,
womaninweb

_________________
Der Vorteil der Klugheit besteht darin, dass man sich dumm stellen kann. Das Gegenteil ist schon schwieriger.
Kurt Tucholsky
Gast



Verfasst am:
09. Mai 2012, 14:04
Rufname:

AW: Formatierungs-Verschiebung im Browser durch Nutzung von - AW: Formatierungs-Verschiebung im Browser durch Nutzung von

Nach oben
       

Vielen Dank für die Antwort.
Natürlich meinte ich Divs als HTML-Element.
Habe es mit %-Angaben versucht, funktioniert allerdings noch immer nicht.

Habe im Folgenden mal den Code eingefügt, vielleicht fällt dir / euch mein Fehler auf?
Code:
<!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="de" http-equiv="Content-Language" />
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title> xxx </title>
<meta content="xyz" name="keywords" />

<meta content="xxx" name="description" />
<style type="text/css">
body {
   border: thin none #000000;
   font-family: Arial, Helvetica, sans-serif;
   font-size: 12px;
   padding: 0px;
   margin: 0px;
   background-color: #7FA7D8;
}
#banner {
   width: 100%;
   margin-bottom: 10px;
}
#navivert {
   font-family: Arial, Helvetica, sans-serif;
   font-size: 14px;
   color: #FFFFFF;
   background-color: #0067B2;
   float: left;
   clip: rect(1%, auto, auto, auto);
   width: 15%;
   margin: 0px 0, 1 0px 0px;
   padding-left: 0%;
}
#navihor {
   border: 1% solid #D63F23;
   margin: 0%;
   padding: 0%;
   font-family: Arial, Helvetica, sans-serif;
   font-size: 12px;
   color: #FFFFFF;
   background-color: #D63F23;
   font-style: normal;
   text-transform: none;
   font-variant: normal;
   font-weight: bolder;
   float: right;
   width: 99%;
}
#inhalt {
   padding: 2% 1% 2% 17%;
   font-family: Arial, Helvetica, sans-serif;
   font-size: 12px;
   color: #000000;
   width: 82%;
}

.auto-style1 {
   margin-left: 80px;
   font-size: 13px;
}
.auto-style2 {
   margin-left: 80px;
   margin-top: 0px;
}

#Balken {
   background-color: #F13F23;
   width: 83%;
   margin: 0px;
   padding: 1px;
}
.auto-style3 {
   vertical-align: text-bottom;
}

.auto-style4 {
   font-size: xx-small;
   text-align: center;
}

</style>
</head>

<body style="height: 97px">
<div id="banner">
      <img alt="Logo" height="96" src="Logo_gut-psd.png" width="455" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      <img alt="HWK" height="95" src="kombibild.jpg" width="198" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      schwenkende Kamera</div>

<div id="navihor">
   &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="index.html">STARTSEITE</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; |&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;LEISTUNGSPORTFOLIO&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; |&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
   EIGENE ENTWICKLUNGEN&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; |&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
   REFERENZEN&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; |&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
   UNTERNEHMEN</div>

<div id="navivert">
   
      <br /><br />
      <br />
      &nbsp;&nbsp;&nbsp;&nbsp;
      Suchfunktion
      <br /><br />
      <br />
      <br />
      &nbsp;&nbsp;&nbsp; <strong>KONTAKT</strong><br />
&nbsp;&nbsp;&nbsp; <br />
&nbsp;&nbsp;&nbsp; 0123456789 <br />
&nbsp;&nbsp;&nbsp; <br />
&nbsp;&nbsp;&nbsp; info@info.de<br />
      <br />
      &nbsp;&nbsp;&nbsp; Kontaktformular<br />
      <br />
      <br />
      <br />
      <br />
      &nbsp;&nbsp;&nbsp;24h-Bereitschaftsservice:<br />
      &nbsp;&nbsp;&nbsp;0123 - <span class="header">45 67 89 0</span><br /><br />
   
</div>

<div id="inhalt">
      <h3>Herzlich Willkommen auf der Homepage</h3>
      <br />
      <img alt="GEBAM" height="197" src="GebAM.jpg" style="float: left" width="299" class="auto-style3" /><p class="auto-style1" style="PADDING-LEFT: 230px">
      <strong>xxxxxxxxxxxxxxxxxx
      </strong>
      <p class="auto-style2" style="PADDING-LEFT: 230px">... TextTextTextTextTextTextTextTextTextTextTextTextTextTextText
TextTextTextTextTextTextTextTextTextTextTextTextTextTextText
TextTextTextTextTextTextTextTextTextTextTextTextTextTextText
TextTextTextTextTextTextTextTextTextTextTextTextTextTextText
TextTextTextTextTextTextTextTextTextTextTextTextTextTextText
TextTextTextTextTextTextTextTextTextTextTextTextTextTextText
TextTextTextTextTextTextTextTextTextTextTextTextTextTextText
TextTextTextTextTextTextTextTextTextTextTextTextTextTextText
TextTextTextTextTextTextTextTextTextTextTextTextTextTextText      </p>
      <p class="auto-style2" style="PADDING-LEFT: 230px">&nbsp;</p>
      <p class="auto-style2" style="PADDING-LEFT: 230px">&nbsp;</p>
      <p class="auto-style2" style="PADDING-LEFT: 230px">&nbsp;</p>
      <p class="auto-style2" style="PADDING-LEFT: 230px">&nbsp;</p>
      <p class="auto-style2" style="PADDING-LEFT: 230px">&nbsp;</p>
      <p class="auto-style2" style="PADDING-LEFT: 230px">&nbsp;</p>
      </div>

<div id="navihor">

   <marquee scrollamount="4" scrolldelay="100">NEWS&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;NEWS&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;NEWS&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;</marquee></div>

<p>&nbsp;</p>
<p class="auto-style4">@ 2012&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a class="auto-style5" href="Impressum.html"><span class="auto-style6">Impressum</span></a><span class="auto-style6">&nbsp;
</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Datenschutz&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
rechtlicher Hinweis</p>

</body>

</html>
{maninweb: Code-Tag und Umbrüche gesetzt, da sonst das Forumslayout leidet. Gruß}
womaninweb
(X)HTML und CSS Junkie


Verfasst am:
09. Mai 2012, 17:53
Rufname:
Wohnort: Aachen


AW: Formatierungs-Verschiebung im Browser durch Nutzung von - AW: Formatierungs-Verschiebung im Browser durch Nutzung von

Nach oben
       

Hallo Gast,

bei so vielen geschützten Leerzeichen wundert es mich nicht, dass sich die Divs verschieben; die Abkürzung nbsp steht für nonbreaking space = Leerzeichen ohne Umbruch. Das heißt, wenn das Browserfenster kleiner wird, dürfen die gar nicht umbrechen. Eine Menüleiste macht man besser mit einer Liste - such' da mal in der Suchmaschine deiner Wahl nach "CSS-Menü horizontal" und du wirst reichlich finden.

Gruß,
womaninweb

_________________
Der Vorteil der Klugheit besteht darin, dass man sich dumm stellen kann. Das Gegenteil ist schon schwieriger.
Kurt Tucholsky
Neues Thema eröffnen   Neue Antwort erstellen Alle Zeiten sind
GMT + 1 Stunde

Diese Seite Freunden empfehlen

Seite 1 von 1
Gehe zu:  
Du kannst Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum antworten.
Du kannst deine Beiträge in diesem Forum nicht bearbeiten.
Du kannst deine Beiträge in diesem Forum nicht löschen.
Du kannst an Umfragen in diesem Forum nicht mitmachen.
Du kannst Dateien in diesem Forum nicht posten
Du kannst Dateien in diesem Forum herunterladen

Verwandte Themen
Forum / Themen   Antworten   Autor   Aufrufe   Letzter Beitrag 
Keine neuen Beiträge MS Expression Web Forum: Einsatz web expression 3 im Joomla-Umfeld 3 web_emk 1656 12. Dez 2013, 20:26
Ina654 Einsatz web expression 3 im Joomla-Umfeld
Keine neuen Beiträge HTML & CSS Forum: CSS Browser Compatibility Problem 1 frosenow 2243 19. Jul 2012, 09:30
PeterKarrenberger CSS Browser Compatibility Problem
Keine neuen Beiträge HTML & CSS Forum: Grafik relativ in einem DIV positionieren geht nicht 2 Eberh@rd 1848 28. März 2012, 20:47
Eberh@rd Grafik relativ in einem DIV positionieren geht nicht
Keine neuen Beiträge Macromedia Dreamweaver Forum: Vorschau im Browser geht nicht 4 Simply 1464 13. März 2012, 14:36
Simply Vorschau im Browser geht nicht
Keine neuen Beiträge HTML & CSS Forum: Grafik mit scrollbarem DIV koppeln -- außerhalb des DIV? 2 Gast 2890 13. März 2012, 10:32
Eberh@rd Grafik mit scrollbarem DIV koppeln -- außerhalb des DIV?
Keine neuen Beiträge Macromedia Dreamweaver Forum: div problem 1 Gast 911 01. März 2012, 10:57
womaninweb div problem
Keine neuen Beiträge HTML & CSS Forum: div Container dem Browser Fenster anpassen 5 Sugarfree 5518 14. Apr 2011, 16:23
womaninweb div Container dem Browser Fenster anpassen
Keine neuen Beiträge MS Expression Web Forum: schrift im browser verschoben 1 lisameinengel 1518 27. März 2011, 20:45
womaninweb schrift im browser verschoben
Keine neuen Beiträge HTML & CSS Forum: über css div feste position geben 1 SleepWalker86 2444 28. Jan 2011, 20:35
MartinPent über css div feste position geben
Keine neuen Beiträge MS Expression Web Forum: Toolbox verhalten /Dialogfenster "Browser öffnen" 0 MXPapa 1063 24. Jan 2010, 15:42
MXPapa Toolbox verhalten /Dialogfenster "Browser öffnen"
Keine neuen Beiträge MS Expression Web Forum: Div Positionieren 4 HBM00 885 14. Jul 2009, 15:56
HBM00 Div Positionieren
Keine neuen Beiträge HTML & CSS Forum: Navigation in div verrutscht je nach Version 2 chopsui 1594 04. Jun 2009, 21:54
chopsui Navigation in div verrutscht je nach Version
 

----> Diese Seite Freunden empfehlen <------ Impressum - Besuchen Sie auch: Microsoft Excel-Formeln