Website feste (Absolute) Größe Problem mit Schrift und Anpassung

DanyC · 11. Januar 2016

Hey,
ich bin neu hier also verzeiht wenn ich das gerade in die falsche Grp schreibe bzw. allgemein falsch hier bin.
Hab eine kleine Frage wegen einer Website an der ich gerade sitze.
Problem hierbei ist das die Startseite eine feste Position haben soll so wie ihr unten seht. Leider gibt es gerade
2 Fehler bei den ich nicht weiter komme.
Fehler 1. der Text vergrößert beim scrollen (lässt sich mit resize: none beheben soweit ich versucht habe).
Fehler 2. bei Monitoren mit einer anderen Größe drückt es arg das Layout zsm kann man das irgendwie ändern?

Hoff ich hab mich halbwegs verständlich ausgedrückt:)
Thx schon mal

_____________________________________________________________________________________________
Html5:
_____________________________________________________________________________________________

<div id="container19">
<div class="inner">
<span>Titel</span>
</div> 
</div>

</head>

<body>

<div id="container15">
<div class="inner">
<span>Filliale</span>
</div> 
</div>

<div id="container16">
<div class="inner">
<span>Kontakt</span>
</div> 
</div>

<div id="container12">
<div class="inner">
<span>
<br>Anschrift
<br>Telefon
<br>Blub
</span>
</div> 
</div>

____________________________________________________________________________________________________
CSS
____________________________________________________________________________________________________

* {
margin: 0;
padding: 0;
}

.inner {
padding: 10px;
}

.clear {
clear: both;
}

.anpassen {
height: 100%;
width: 100%;
}
#textarea {
resize: none;
}

/*-------------------------------------Startseite--------------------------------------*/

#klicker1 { /*Button Klick Auslöser*/
position: absolute;
height:100%;
width: 100%;
opacity: 0;
}

#container1 { /*Hintergrund Button News*/
background: FFFFFF;
position: absolute;
top: 20%;
left: 25.25%;
height:59%;
width: 12%;
opacity: 0;
}

#container2 { /*Hintergrund Button TV*/
background: FFFFFF;
position: absolute;
top: 20%;
left: 37.75%;
height:59%;
width: 12%;
opacity: 0;
}

#container3 { /*Hintergrund Button Filliale*/
background: FFFFFF;
position: absolute;
top: 20%;
left: 50.25%;
height:59%;
width: 12%;
opacity: 0;
}

#container4 { /*Hintergrund Button Kontakt*/
background: FFFFFF;
position: absolute;
top: 20%;
left: 62.75%;
height:59%;
width: 12%;
opacity: 0;

}

#container5 { /*Außenkante Links*/
background: #f8f8f8;
position: absolute;
top: 14%;
left: 0%;
height:65%;
width: 25.25%;
}

#container6 { /*Außenkante Rechts*/
background: #f8f8f8;
position: absolute;
top: 14%;
left: 74.75%;
height:65%;
width: 25.25%;
}

#container7 { /*Zwischenspalte 1*/
background: #f8f8f8;
position: absolute;
top: 20%;
left: 37.25%;
height:59%;
width: 0.5%;
}

#container8 { /*Zwischenspalte 2*/
background: #f8f8f8;
position: absolute;
top: 20%;
left: 49.75%;
height:59%;
width: 0.5%;

}

#container9 { /*Zwischenspalte 3*/
background: #f8f8f8;
position: absolute;
top: 20%;
left: 62.25%;
height:59%;
width: 0.5%;
}

#container10 { /*Oberkante Header*/
background: white;
position: absolute;
top: 0%;
left: 0%;
height:14%;
width: 100%;
}

#container11 { /*Oberkante Body*/
background: #f8f8f8;
position: absolute;
top: 14%;
left: 25.25%;
height:6%;
width: 49.5%;
}

#container12 { /*Unterkante*/
background: white;
position: absolute;
top: 79%;
left: 0%;
height:21%;
width: 100%;
text-align: center;
font-size: 85%;
color: #848079;
font-family: 'Times New Roman';

}

#container13 { /*Button News*/
background: #45BA01;
position: absolute;
top: 61%;
left: 25.25%;
height:8%;
width: 12%;
text-align: right;
font-size: 200%;
color: white;
font-family: 'Times New Roman';

}

#container14 { /*Button TV*/
background: #45BA01;
position: absolute;
top: 61%;
left: 37.75%;
height:8%;
width: 12%;
text-align: right;
font-size: 200%;
color: white;
font-family: 'Times New Roman';
}

#container15 { /*Button Filliale*/
background: #45BA01;
position: absolute;
top: 61%;
left: 50.25%;
height:8%;
width: 12%;
text-align: left;
font-size: 200%;
color: white;
font-family: 'Times New Roman';
}

#container16 { /*Button Kontakt*/
background: #45BA01;
position: absolute;
top: 61%;
left: 62.75%;
height:8%;
width: 12%;
text-align: left;
font-size: 200%;
color: white;
font-family: 'Times New Roman';

}

#container17 { /*Hintergrund*/
position: absolute;
top: 20%;
left: 25.25%;
height: 59%;
width: 49.5%;
}

#container18 { /*Logo*/
position: absolute;
top: 1%;
left: 22.5%;
height: 12%;
width: 12%;
}

#container19 { /*Überschrift*/
position: absolute;
top: 2.5%;
left: 0%;
height: 10%;
width:100%;
text-align:center;
font-size: 230%;
color: black;
font-family: 'Times New Roman';
}

#container20 { /*Logo News*/
position: absolute;
top: 62%;
left: 25.25%;
height: 6%;
width: 3%;
}

#container21 { /*Logo TV*/
position: absolute;
top: 62%;
left: 37.75%;
height: 6%;
width: 3%;
}

#container22 { /*Logo Filliale*/
position: absolute;
top: 62%;
left: 59.25%;
height: 6%;
width: 3%;
}

#container23 { /*Logo Kontakt*/
position: absolute;
top: 62%;
left: 71.75%;
height: 6%;
width: 3%;
}

/*-----------------------------------------News-----------------------------------------*/

JR Cologne · 11. Januar 2016

Zitat von DanyC

Fehler 1. der Text vergrößert beim scrollen (lässt sich mit resize: none beheben soweit ich versucht habe).
Fehler 2. bei Monitoren mit einer anderen Größe drückt es arg das Layout zsm kann man das irgendwie ändern?

1. Beim scrollen? Du meinst sicher das Zoomen, aber wo ist da dann der Fehler? Es ist doch gut, wenn der Benutzer die Schriftgröße/die Größe der Website beeinflussen kann.

2. Stichwort: Responsive Webdesign

Und noch etwas: Bitte nutze moderne Techniken, um die Elemente auf deiner Seite anzuordnen. Die absolute Positionierung wird nur eingesetzt, wenn man auch wirklich möchte, dass Elemente außerhalb des normalen Flusses sind, wie z.B. bei Überlappungen mit anderen Elementen oder bei Untermenüs bei einem Dropdown-Menü.

Website feste (Absolute) Größe Problem mit Schrift und Anpassung

Jetzt mitmachen!

Teilen