Width 100% - Parent-Padding greift nicht

html.de-Forum HTML, XHTML & CSS
1

Hallo,

Ich habe mir für meine Website ein reines CSS Popup-Fenster (ohne JavaScript) erstellt. Nun habe ich das Problem das die Div die ich für den Titel und das Schließen-Symbol erstellt habe, sich mit width: 100%; über das Padding des Fensters nach rechts geht. Wie schaffe ich es, das diese auch den Abstand hält?

[B][B]http://luksa.de/content/popup.PNG[/B][/B]

Hier mein Code:

HTML
[HTML]





&times

Impressum





Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.At vero eos et accusam
et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est
Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur
sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
no sea takimata sanctus est Lorem ipsum dolor sit amet.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum
dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent
luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consect
etuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl
ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in
vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at
vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit
augue duis dolore te feugait nulla facilisi.
Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod
mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, diam nonummy
nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud
exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis.
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et
accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor
sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, At accusam aliquyam diam diam dolore dolores duo eirmod
eos erat, et nonumy sed tempor et et invidunt justo labore Stet clita ea et gubergren, kasd magna no rebum. sanctus sea sed
takimata ut vero voluptua. est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.
Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed
diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum
dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur
sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et
justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet,
consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et
accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla
facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te
feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel
eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto
odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet,
consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo




[/HTML]

Wegen dem komisch formatierten Text: Den habe ich aus einem „Lorem-Ipsum-Generator“ kopiert, nur um zu gucken wie es befüllt aussieht.

[B]CSS

[CODE].overlay {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
transition: opacity 500ms;
visibility: hidden;
opacity: 0;
text-align: center;
}

.popup {
display: inline-block;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
padding: 0.8%;
background: #fff;
border-radius: 5px;
box-shadow: 0 0 50px rgba(0,0,0,0.5);
position: relative;
text-align: left;
}

.popup_content {
margin-top: 7%;
overflow: auto;
max-width: 720px;
max-height: 720px;
}

.popup h1 {
font-size: 200%;
color: #0066ff;
}

.closelink {
font-size: 150%;
font-weight: 400;
text-decoration: none;
color: #666;
float: right;
}

.closelink:hover {
color: #0066ff;
}

.cancel {
position: absolute;
width: 100%;
height: 100%;
cursor: default;
}

.overlay:target {
visibility: visible;
opacity: 1;
}
.popup .hline {

background-color: #C8C8C8;

}

.popup_nav {
width: 100%;
position: fixed;

}
#close {
}
[/CODE]
[/B]
Ich hoffe man versteht was ich meine.

Vielen Dank für alle Antworten im Vorraus! :slight_smile:

2

https://jsfiddle.net/SpiceLab/dtkub4kh/ - padding:0.8% gilt stattdessen für h1 und .popup-content

3

Vielen Dank für deine Antwort! :slight_smile:

Nur ich hätte es gerne so, das der Text und die Scrollbar so bleibt wie sie auf dem Screenshot ist und das der nav bereich auch den Absatand hält.

4

Wenn der Screenshot den Soll-Zustand abbildet, hab ich Dich wohl gründlich mißverstanden, welcher Abstand nun (nicht) gehalten soll.

Und ganz ehrlich: ich weiß es momentan noch immer nicht.

5

Nein, das ist der Soll-Zustand. Allerdings habe ich das jetzt in Photoshop gemacht.
http://luksa.de/content/popup2.PNG

6

Okay, von beiden CSS die Schnittmenge :smiley:

Aus

[code=css].popup_nav {
width: 100%;
position: fixed;

}[/code]
wird

.popup_nav { left:0; right:0; position: fixed; padding:0 0.8%; }Fiddle: https://jsfiddle.net/SpiceLab/wxfxzuLn/

7

Genau so! Dankeschön! :slight_smile: