问题描述:

I have the following html script.

<!DOCTYPE html>

<head>

{% load staticfiles %}

<link rel="stylesheet" type="text/css" href="{% static 'sslcert/style.css' %}" />

<script type="text/javascript">

function oeffnefenster(url){infopopup = window.open(url, "fenster1", "width = 700, height = 600, status=yes, scrollbars=yes, resizable=yes")}

infopopup.focus()

</script>

<script type="text/javascript">

function erfolgreich(url){infopopup = window.open(url, "fenster1", "width = 700, height = 600, status=yes, scrollbars=yes, resizable=yes")}

infopopup.focus()

</script>

</head>

<body>

<div class = "compprologo">

<a href = "http://www.comp-pro.de"/>

<img src = "{% static 'sslcert/logo_comppro.png' %}"/>

</a>

</div>

<div class = "table">

<table border = "0">

{% for file in files %}

<tr>

<td> {{ file }}</td>

<td width="25%" align = "right">

<a href="http://10.0.3.186:8000/sslcert/{{ file }}" onclick="oeffnefenster(this.href);return false">

<font color = "white">Info</font>

</a>

</td>

<td width="25%" align = "right">

<a href="http//10.0.3.186:8000/sslcert/{{ file }}/keyCrt">

<font color = "white">Certificate</font>

</a>

</td>

<td width="25%" align = "right">

<a href="http://10.0.3.186:8000/sslcert/{{ file }}/keyDownload">

<font color = "white">SSL-Key</font>

</a>

</td>

<td width="25%" align = "right">

<a href="http://10.0.3.186:8000/sslcert/{{ file }}/revoke" onclick="erfolgreich(this.href);return false">

<font color = "white">Revoke</font>

</a>

</td>

</tr>

{% endfor %}

</table>

</div>

<div class="AddSSL">

<form action = "adduser.html" method = "post">{% csrf_token %}

<input type = "submit" name = "form" style = "width:8%" value = "Add SSL-Key" class = "AddSSL">

</form>

</div>

<div class="Downloadcrl>

<form action = "Download crl.pem" method = "post">{% csrf_token %}

<input type = "submit" name = "form" style = "width:8%" value = "Download crl.pem" class = "Downloadcrl">

</form>

</div>

</body>

This is how my css looks like:

body {

background: url("body_bg_noise.png") repeat;

overflow-y:scroll;

}

.AddSSL {

position: fixed;

top: 0.8%;

}

.Downloadcrl {

position:fixed;

top:4%;

}

.info {

position:fixed;

top:5%

width: 30%;

}

.table {

color: white;

margin-left: auto;

margin-right: auto;

width: 80%;

background: black;

border: 1px;

-webkit-border-radius: 10px;

-moz-border-radius: 10px;

-border-radius: 10px;

border-radius: 10px;

top:50%;

}

.idundpw {

margin-left: auto;

margin-right:auto;

width: 80%;

}

ul {

list-style-type: circle;

}

.compprologo {

margin-left: auto;

margin-right:auto;

text-align:center;

width:80%;

background:white;

border: 1px;

-webkit-border-radius: 10px;

-moz-border-radius: 10px;

-border-radius: 10px;

border-radius: 10px;

}

a:link {text-decoration:none;}

If you used my Monitor (1280x800), that would look delicious :P But when you would use a Monitor that is a bit smaller the two buttons: Add SSL-Key and Download crl.pem would be mixed together, because I used some pretty random percentages by who just have a synergy with my monitor size. My plan is to change the html or css, so I have these both buttons laying under each other. This is how it looks like currently:

网友答案:

Drop your buttons in a container like this:

<div class="Buttons">
    <div class="AddSSL">
     <form action = "adduser.html" method = "post">{% csrf_token %}
      <input type = "submit" name = "form" value = "Add SSL-Key" class = "AddSSL">
     </form>
    </div>
    <div class="Downloadcrl>
     <form action = "Download crl.pem" method = "post">{% csrf_token %}
      <input type = "submit" name = "form" value = "Download crl.pem" class = "Downloadcrl">
     </form>
     </div>
</div>

And then you can set the two button's position with the .buttons class selector to fixed, and the top value too.

.buttons {
    position: fixed;
    top: 0.8%;
    width: 8%;
}

.AddSSL {
    margin-bottom: 2px; /* or something like this for the gap */
    width: 100%;
}

.Downloadcrl {
    width: 100%;
}

http://jsfiddle.net/hBHzC/

相关阅读:
Top