Welcome to Laser Pointer Forums - discuss green laser pointers, blue laser pointers, and all types of lasers

LPF Donation via Stripe | LPF Donation - Other Methods

Links below open in new window

ArcticMyst Security by Avery

Calling CSS Pros :)

T

Things

0
Joined
May 1, 2007
Messages
7,517
Points
0
Hey, I have been working on rebuilding my website, and I am happy with what I have so far. However, there is 1 small issue I can't seem to resolve.

NQLasers

If you shrink that page small enough that the horizontal scroll bar appears, then scroll to the right, you can see the header border and the menu bar disappears, while the logo and text just sits on the blank background.

It seems to be something to do with having their width set to auto, but I'm not sure.

Cheers,
Dan
 





Lase

Lase

0
Joined
Apr 27, 2011
Messages
757
Points
0
Seems fine at the moment?

No Issues for me.

EDIT: Is this what you mean?

Lase
 

Attachments

  • Untitled2.png
    Untitled2.png
    77.8 KB · Views: 180
Last edited:
T

Things

0
Joined
May 1, 2007
Messages
7,517
Points
0
Nah, that'd just because your screen is wider than my background image. I mean if you shrink the window, and scroll to the right, the background behind the logo and the navigation bar disappears from under the links.

Like this:

wscrollissue.png


Dan
 
T

Things

0
Joined
May 1, 2007
Messages
7,517
Points
0
Thanks bobhaha! :)

Now I'm wondering, is there a way I can get the header and nav bar to stick at the top of the page, and have the content scroll underneath it? I tried setting a few things to fixed position, and even making a whole new div with everything in it and setting that to fixed, though everything gets thrown around everywhere.

Cheers,
Dan
 
I

Integral

0
Joined
May 31, 2012
Messages
14
Points
0
Things,
consider restyling so that the header is on top.
use position: fixed;
like this: (where header is the entire header object) this is an excerpt of the code that I
wrote for my website which I am currently re-building. also, make a repetitional
background to conserve communications.
Want a demo? Matthew Wilson
Code: 
body {
	background-image: url('//matthuwilson.com/imgs/webckgrd.png');
	background-repeat: repeat;
}
#header {
	float: left;
	left: 0px;
	top: 0px;
	background-image: url('//matthuwilson.com/imgs/header.png');
	background-repeat: repeat-x;
	height: 50px;
	width: 100%;
	position: fixed;
	webkit-box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.5);
	moz-box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.5);
	box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.5);
}
#wrapper {
	margin: auto;
	background-color: rgba(211,211,211,.5);
	height: 2000px;
	width: 75%;
	margin-top: 60px;
	border-top-left-radius: 30px;
	border-bottom-right-radius: 30px;
	box-shadow: 15px 15px 10px rgba(0,0,0,0.5);
}
#title_font {
	text-align: center;
	width: 250px;
	height: 50px;
	float: left;
}
#title_a {
	display: block;
	text-align: left;
	font-weight: bold;
	text-decoration: none;
	color: #FFF;
	font-family: Helvetica;
	text-shadow: 0px 0px 5px #e4a72c;
	font-size: 24pt;
	width: 250px;
	height: 50px;
	float: left;
	margin-left: 10px;
}
#title_text {
	width: auto;
	height: auto;
	margin-top: 6px;
}
EDIT: I guess you probably want the html styling too for layout purposes.
Code: 
<!DOCTYPE html>
<html>
	<head>
		<title>Matthew Wilson</title>
		<link rel="stylesheet" href="//matthuwilson.com/css.css">
	</head>
	<body>
		<div id="header">
			<a id="title_a" href="//matthuwilson.com/">
				<div id="title_font">
					<div id="title_text">Matthew Wilson</div>
				</div>
			</a>
			<div id="homedrop"></div> 
		</div>
		<div id="wrapper">
			
		</div>
	</body>
</html>
 
Last edited:
You must log in or register to reply here.




Top