more issues than a box of tissues.

Everything related to the visual and coding aspects of websites.
Post Reply
Sophia
Posts: 126
Joined: Sun Nov 27, 2016 12:30 pm
Contact:

more issues than a box of tissues.

Post by Sophia »

Guys, I need a bit of help. I have a dream, and the dream may not work, and if you can make the dream work, I will kiss you, and if you tell me it cannot work, I would still appreciate it enough to give you a firm handshake or something. I went through some tutorials, so I was like, 'ah! I will build this properly!' So I came up with a rough structure, and am working on trying to get the structure to look how I want through css.

The dream is essentially to have a fixed top-matter (title, image), which is transparent above a starry background that would scroll as the page scrolls. THE CATCH: the white bottom area, holding the main text of the page, would not come between the transparent title/image and the starry background. Are z-indexes the answer? I've been trying, but no cigar.

If impossible: let me know and I will stop being a madwoman. I feel like I've seen clever commercial websites that do this. But it's only a feeling, otherwise I'd be looking at their source code.

Image

Image

I'm having a few other issues (the white backgorund of the text ends ... before the text does. WHY.) but this is the big one.

Here are my codes for the HTMl and the CSS:

Code: Select all

<!DOCTYPE html>
<head>
<title>P E A C E A B L E : a shrine to urdknot wrex</title>
<link Href="wrex.css" type="text/css" rel="stylesheet">

</head>
<div class="top">
<div class="top-wrex"></DIV>
<div class="top-title"><IMG SRC="WREX_TITLE_RIGHT.PNG"></DIV>
</dIV>
<div class="bottom">
<div class="menu">
<ul><H1>WREX</H1>
<li>BASICS</LI>
<LI>DESIGN</LI>
<LI>MASS EFFECT</LI>
<LI>KROGAN HISTORY</LI>
<LI>PSYCHOLOGY</LI>
<LI>GENDER</LI>
<LI>CREW</LI>
<LI>HYPE</LI>
<LI>ME</LI>
<LI>ESCAPE</LI>
</UL>
</div>
<DIV class="main">
<h1>WREX <IMG SRC="versus.png" id="versus"> THE WORLD</H1>
<P>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi elit nulla, gravida quis quam quis, porttitor facilisis quam. Maecenas ultrices tempus ex. Vivamus aliquet eu neque a sollicitudin. Duis varius diam arcu, a vehicula leo aliquam quis. Suspendisse congue eleifend fermentum. Ut magna nibh, porttitor sed iaculis fermentum, accumsan eu ligula. Vestibulum mattis dignissim convallis. Curabitur at augue vel lorem sollicitudin placerat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec accumsan odio sed nibh semper fringilla. Proin eleifend, nisi in ornare condimentum, leo tortor tincidunt metus, et mollis neque leo at quam.

Proin faucibus non urna non commodo. Phasellus commodo ligula pellentesque libero mattis tristique. Quisque tincidunt, quam nec mattis varius, turpis libero fermentum augue, faucibus tristique sapien tellus non justo. Proin a sem ut mauris feugiat dignissim. Integer et nulla et nulla aliquam tincidunt. Vivamus hendrerit, erat vitae vulputate vulputate, sem enim tincidunt nulla, nec efficitur ex sem et nisi. Aliquam pellentesque lacus at vestibulum ornare. Duis posuere egestas nunc at tincidunt. In finibus felis quis porta iaculis. Nullam pharetra, risus quis convallis pretium, neque ligula rutrum ipsum, quis blandit ipsum felis at orci. Sed dictum feugiat vehicula. Phasellus rutrum nunc sit amet mollis ornare. Fusce vitae nunc in ante sodales mattis. Vestibulum at euismod leo. Suspendisse potenti.

Curabitur eget nunc sem. In et dui aliquam, porttitor risus quis, iaculis nisi. Donec eget leo rhoncus, posuere ipsum a, vestibulum massa. Aenean gravida eget risus sagittis mattis. Sed ac tristique leo. Quisque rhoncus ante id vestibulum consequat. Vivamus feugiat convallis tellus. Phasellus ultrices turpis libero, quis condimentum arcu maximus eget. Pellentesque imperdiet erat at pharetra accumsan. Aliquam sit amet tellus justo. Proin ac venenatis magna, at finibus nibh. Phasellus non purus tortor. Cras sodales accumsan justo, a vulputate lectus auctor pretium. Fusce sit amet tortor vulputate, viverra turpis at, imperdiet erat. Nam pellentesque metus vel orci feugiat, ac pellentesque magna sagittis. Mauris ut orci lorem.

Ut sollicitudin eget magna ac finibus. Nulla varius, sem a suscipit dictum, felis turpis mattis orci, ut lobortis libero orci ut elit. Vestibulum et lobortis orci, quis ullamcorper ligula. Ut convallis massa id purus convallis, a semper erat tincidunt. Nullam facilisis justo nec efficitur pretium. Etiam vestibulum pellentesque suscipit. Maecenas ornare interdum massa placerat pretium. Nunc laoreet finibus erat. Aenean sed ante et nisl fermentum fermentum. Sed sed finibus enim. Vivamus tincidunt ultrices sollicitudin. Donec vulputate libero sapien, nec rhoncus odio sollicitudin eu. Suspendisse eu placerat arcu, eu bibendum quam. Curabitur ullamcorper interdum lorem id hendrerit. Quisque a dui a diam malesuada eleifend ac at mauris.

Morbi dapibus magna eget ante porta vulputate. Phasellus nulla justo, ornare at felis et, porttitor faucibus nibh. Maecenas lobortis volutpat purus et pulvinar. Integer bibendum dolor dui, non rhoncus nisi rhoncus et. Donec feugiat at velit ac faucibus. Nam felis justo, interdum ac viverra at, pharetra in nisi. Donec rutrum facilisis sapien at mollis. Sed ligula sem, facilisis ut massa ac, fermentum placerat lectus. Vivamus sit amet urna quis enim hendrerit dignissim quis sit amet orci.

Aenean laoreet nisl facilisis facilisis vehicula. Nulla facilisi. Nullam vehicula elit a finibus gravida. Vivamus malesuada lectus nisl, in interdum ligula commodo consectetur. Nunc semper ac nisi vitae placerat. Maecenas at lacus enim. Mauris iaculis mi magna, eu cursus nulla malesuada ac. Praesent efficitur neque arcu, in commodo nunc consectetur eget. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean tempor imperdiet libero, a vehicula lorem convallis eget. Ut sit amet lorem non lorem aliquet malesuada sed eget orci. Duis porttitor laoreet purus, in venenatis mi euismod ac. Donec purus metus, bibendum quis odio id, pretium accumsan massa. Praesent sed scelerisque leo, ut commodo erat. Sed nisl mauris, varius malesuada sodales quis, ornare ut risus. Nullam hendrerit augue non eros ornare, non mollis nulla ornare.

Quisque sodales velit ut augue finibus convallis. Sed vehicula sollicitudin sem, id tincidunt urna molestie vel. Proin vitae blandit felis, in consequat enim. Quisque eleifend dapibus nisl, finibus vulputate lorem egestas non. Phasellus egestas est nec ligula tincidunt volutpat. Ut a imperdiet turpis. Vivamus semper massa facilisis nulla vestibulum, nec vestibulum enim commodo. Etiam tincidunt enim eget eleifend fermentum. Integer dictum scelerisque ex, sed rutrum leo egestas quis. Praesent metus massa, vehicula et iaculis id, dignissim et ipsum. Etiam tempus non dui sed venenatis. Praesent ullamcorper lacinia lacus, rutrum facilisis augue ornare id.

Suspendisse vel tempus orci. Donec tellus nisl, feugiat at faucibus sit amet, egestas molestie felis. Sed quis tortor fermentum, euismod magna in, facilisis velit. Aenean tincidunt enim eget euismod posuere. Nam dictum nisi libero, lobortis pharetra arcu porttitor at. Nulla facilisi. Pellentesque varius turpis dolor, in vestibulum massa tempus id.

Vestibulum eget leo auctor, mollis sem in, consequat enim. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur venenatis nec ligula et maximus. Donec enim libero, consequat porta libero a, sodales tempor nunc. Nullam sodales nisi non arcu congue sagittis. Fusce dapibus turpis a auctor sagittis. Vivamus nec sapien euismod, volutpat libero non, convallis velit. Maecenas congue leo vitae sem cursus, ac sollicitudin sem mattis. Pellentesque tellus arcu, maximus dignissim venenatis nec, dignissim quis est. Sed sit amet rutrum nisl. Quisque vitae tortor velit. Curabitur dictum tempor viverra. Vivamus sed quam ac nisi blandit pharetra. Aliquam quis vehicula justo.

Integer fermentum, lectus et varius aliquet, lacus enim fermentum felis, sit amet dapibus turpis mauris id sapien. Vestibulum sed suscipit ante. Ut pretium malesuada massa, in euismod mauris auctor eu. Duis sed mi id purus sollicitudin porttitor. Aenean posuere nisl in mi consectetur tincidunt. Suspendisse sit amet ultricies tortor, vel vulputate est. Etiam vestibulum, mauris vel suscipit laoreet, turpis lectus efficitur ante, a pretium libero nisi non lorem. Aenean posuere justo a venenatis vulputate. Curabitur augue arcu, hendrerit ut efficitur sit amet, mattis quis ex. Proin feugiat lorem eu pretium pharetra. Sed accumsan rutrum erat eget pulvinar. Donec vitae nibh a nisi elementum hendrerit in non nunc.</p>
</P></div>
<div class="side">asdfas
</div>
</div>

</html>

Code: Select all

  body {
    background-image: url("space_bg.jpg");
    background-color: #000000;
 }
 html, body {
    height:100%;
    width:100%;
    margin:0;
    padding:0;
}
.top {
	position: fixed;
	top: 0px;
	left: 0px;
	border-bottom: 1px solid #000;
	margin: 0px;
	width: 100%;
	height: 400px;
	padding: 0px;
	z-index: 2;
	display: inline-block;
}
.top-wrex {
     background: url("WREX_LEFT.png") fixed no-repeat;
	 height: 400px;
	 width: 703px;
	 display: inline-block;
 }
.top-title {
    background-image: url("WREX_TITLE_RIGHT.PNG");
    background-repeat: no-repeat;
    background-attachment: fixed;
	 height: 400px;
	 width: 242px;
	 position: absolute;
	 left: 750px;
	 top: 0px;
	 float: left;
	 display: inline-block;
	 border: 5px solid white;
 }
.bottom {
	background-color: #FFFFFF;
	position: absolute;
	top: 400px;
	left:0px;
	width:100%;
	height:100%;
	z-index: 0;
 }
.menu {
	width:300px;
	position: fixed;
	top:410px;
 }
.menu h1{
 }
.menu li {
 }
.menu ul {
 }
.main{
	position: absolute;
	left: 310px;
	width: 600px;
	height: 100%;
	z-index: 2;
 }
 .main h1{
	 font-size: 25px;
	 font-family: "Arial Black";
	 color: black;
	 font-weight: bold;
	 line-height: 53px;
	 height: 53px;
	 margin: 0px;
	 padding: 0px;
	 vertical-align: text-top;
 }
 .main p{
 }
 .main a{
 }
 .side {
	 width:300px;
	 position: absolute;
	 left: 920px;
	 top: 10px;
	 z-index: 2;
	 	display: inline-block;
 }
 #versus {
	 position: relative;
	 top: 13px;
	 display: inline-block;
	 
 }
 
 

RAY GUN SUE
Sophia
Posts: 126
Joined: Sun Nov 27, 2016 12:30 pm
Contact:

Re: more issues than a box of tissues.

Post by Sophia »

I did find a JS solution - if anyone knows Javascript, I'm having a dickens of a time. I think it could work, but I think this particular bit of code is set so that the original "view" of the header is set to max the screen, and I only need it to be 400px high.

(Genius who thought of this here

Sorry, I'm becoming needy questions gal. >>

RAY GUN SUE
Masao
Host
Posts: 579
Joined: Thu Jun 16, 2011 12:29 am
Contact:

Re: more issues than a box of tissues.

Post by Masao »

Hmm based on what you described, I think a fixed header would work?

Basically have a div that holds your header with the text and anything you want to keep fixed at the top, then set the rest of your contents after, with the body background as usual (on scroll).

Code: Select all

<!DOCTYPE html>
<html>
<head>
<!-- your page title, css, etc. -->
</head>
<body>

<!-- start fixed header -->
<div id="top"> 
<div class="top-wrex"></div>
<div class="top-title"><img src="yourimage.png"></div>
</div>
<!-- end fixed header -->

<div id="wrap">
<!-- your nav -->
<!-- your content -->
</div>

</body>
</html>
then set the fixed position plus z-index in your css (the comments between /* and */ won't affect your css)

Code: Select all

#top {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 500px; /* the specific value of your top area */
	z-index: -999;
}

#wrap{
	width: 100%;
	background-color: #000;
	background-image: url(space_bg.jpg);
	margin-top: 500px; /* offset the header height; alternatively instead of margin, you can absolute position it */
	z-index: 1; /* as long as this number is greater than the value in #top */
}

/* the rest of your css */
Let me know if that is what you're after! :heh:
THE FATE OF DESTRUCTION IS ALSO THE JOY OF REBIRTH.
Laura
Posts: 499
Joined: Sun Apr 27, 2014 2:10 am
Location: Ontario, Canada
Contact:

Re: more issues than a box of tissues.

Post by Laura »

gaaaaaaaaaaaaaaaaaaaaasp it's beautiful *-*

<shrinks back into the shadows>
Post Reply