Participant

Answered

Größe meiner html-Seite, Skalierung und Zoom / html Page Size, Scaling and Zoom

7 replies
1100 views
Translate

Dreamweaver CS5

(Ich bin mir gerade nicht sicher, ob dies Forum hier deutsch oder englisch ist; nutze daher beides / Not sure, if I have to post in English or German. So I'll take both:)

Anbei ein Screenshot, der das Problem beschreiben soll: / The following screenshot may demonstrate my problem:

Wie man hoffentlich erkennt, wachsen die Kopf- und Fußzeile und der darunterliegende Grafikteil mit (rote Kreise), während der Rest, als der mittige grauhinterlegte Inhaltsbereich es nicht macht. / Hope tt you see the different sized elements. Footer, headline and graphic below grow with zooming in, spoiling the view in total.

Oben ist im Browser eine Darstellung von 100% voreingestellt. Erst bei c.a. 120% ergibt sich ein 'gleichmäßiges' Bild (Abbild unten, rot eingerahmt): / Browser view with 100% zoom above, 120% below. With 120% it looks like it has to look like (red frame marks the 'closed' window without different growing elements as above):

Am liebsten würde ich eine Größe festlegen, die sich an die Fenstergröße anpasst. In der Entwurfsansicht während der Bearbeitung ist das auch der Fall - nur in der tatsächlichen Darstellung am Ende nicht. Es sollte also quasi immer so aussehen, wie im zweiten Screenshot. Was kann ich da machen? / Would like to have it 'always' sized as shown on the second screenshot, independent of the screen's resolution. But how to do?

Vielen Dank im Voraus! / Thx in advance!

(... und entschuldigt das plumpe Ausschwärzen des Inhalts... / ...and sorry for the cheap outlining of the content...)

This topic is closed to new replies. Start a new post to keep the conversation going.

C

conradheinrichCorrect answer

Participant

Everyone - thanks a lot for the quick response! Guess I'm an absolut beginner. I'm pretty lost in this coding....

Here's the code to the page shown above:

<!DOCTYPE html>

<head>

.Stil3 {font-weight: bold}

.Stil1 {

color: #FF0000;

font-weight: bold;

}

</style>

</head>

<body>

</div>

<h1>Important</h1>

<tr>

</tr>

<tr>

<td><h2>important1</h2></td>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

<td><h2><strong>important2</strong></h2></td>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

<td><h2><strong>important3</strong></h2></td>

</tr>

<tr>

</tr>

</table>

</div>

<tr>

</tr>

<tr>

<h1>welcome</h1>

</div></td>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</div></td>

</div></td>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</div></td>

</div></td>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</div>

<div id="left_footer">© text

</div><div id="right_footer"><strong><a href="nnn">text</a></strong><a href="nnn"><strong></strong></a></div>

</div>

</body>

</html>

Nancy OShea

Community Expert

Use a width of 100% or the Bootstrap container-fluid class.

Example:

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bootstrap 4</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--Bootstrap 4 CSS-->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
</head>
<body class="container-fluid">
<nav class="row bg-dark text-white">
Navigation
</nav>
<header class="row bg-info text-white">
Header
</header>
<main class="row">
<div class="col-md-5 bg-warning">
<h3>Column 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.!</p></div>
<div class="col-md-5 bg-danger text-white">
<h3>Column 2</h3>
<p>Lorem ipsum dolor fuga quaerat doloribus molestiae recusandae numquam autem, quidem sed laudantium?</p> </div>
<div class="col-md-2 bg-primary text-white">
<h3>Column 3</h3>
<p>Tempora amet optio facere expedita nihil asperiores est nesciunt. </p> </div>
</main>
<footer class="row bg-dark text-white">
Footer
</footer>
<!--latest jQuery Core--> 
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script> 
<!--Popper JS--> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script> 
<!--latest Bootstrap 4 JS--> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script> 
</body>
</html>

Translate

Nancy O'Shea— Product User & Community Expert

C

conradheinrichAuthorCorrect answer

Participant

Everyone - thanks a lot for the quick response! Guess I'm an absolut beginner. I'm pretty lost in this coding....

Here's the code to the page shown above:

<!DOCTYPE html>

<head>

.Stil3 {font-weight: bold}

.Stil1 {

color: #FF0000;

font-weight: bold;

}

</style>

</head>

<body>

</div>

<h1>Important</h1>

<tr>

</tr>

<tr>

<td><h2>important1</h2></td>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

<td><h2><strong>important2</strong></h2></td>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

<td><h2><strong>important3</strong></h2></td>

</tr>

<tr>

</tr>

</table>

</div>

<tr>

</tr>

<tr>

<h1>welcome</h1>

</div></td>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</div></td>

</div></td>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</div></td>

</div></td>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</div>

</div><div id="right_footer"><strong><a href="nnn">text</a></strong><a href="nnn"><strong></strong></a></div>

</div>

</body>

</html>

Translate

BenPleysier

Community Expert

What you have shown is a very old method of page layout, for a more modern version, have a look at Nancy's reply. Copy and paste het code into a new document and have a look at it in a browser. It will look like this in all (modern) browsers and clients

Translate

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!

BenPleysier

Community Expert

Please give us the URL to the site so that we can see the code. Alternatively, please paste your code (HTML + CSS) here.

The reason I ask to be able to see the code is because that is where the answer lies.

Translate

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.