Jump to content

Web Design Discussion


Recommended Posts

Pretty cool; although I believe the blue pattern fades rather suddenly into black.

Edit: also, there is no need to create a separate image for the top bar. CSS supports transparency of nearly anything, including background colors.

Link to comment
Share on other sites

The opacity attribute affects the element and all children of the element, so the text would be faded out as well. You can use background:rgba(0,0,0,.7), but no version of IE supports it.

In this case, it's probably better just to keep it as a semitransparent PNG, as that method works in everything from IE7 on.

I am not a mechanism, I am part of the resistance;

I am an organism, an animal, a creature, I am a beast.

~ Becoming the Archetype

Link to comment
Share on other sites

^ I've done it before. Far, far too much hassle, especially if you've got to factor variable dimensions into the mix.

That, plus the filter:alpha(); command that IE requires to simulate this causes CSS errors, where there's nothing invalid about a PNG background. ;)

I am not a mechanism, I am part of the resistance;

I am an organism, an animal, a creature, I am a beast.

~ Becoming the Archetype

Link to comment
Share on other sites

I see no reason why the PNG has to be 500 pixels wide, though, since you repeat it anyway. Wouldn't it save on load time (seeing as you already have a rather large background image) to make the dimensions smaller?

It took me 4 seconds to load the background as it is now, Way to long...

Link to comment
Share on other sites

The image is nice, but really large: 2000px × 600px = 492.01 KB (503819 bytes). That's costing a large download lag.

As mentioned, cut the image into a thin strip and tile it horizontally like this:

#yourpage {
background: url(images/img04.jpg) repeat-x left top;
}

I'd also recommend separating your CSS into a separate stylesheet, and then loading it like this:




Link to comment
Share on other sites

Is that sarcasm?

I wish it was!

Separating the stylesheet is always good, but when I develop my own pages I always start with inline script to keep it all handy while I tweak. After I am done with the standard layout of the website I put it in a CSS file to clean up the HTML.

Another handy thing is Mozilla's FireBug. With that you can see exactly what part of the page is slow in loading. It won't work if you have the page locally of course but when you load it from a webserver outside your network and remove all cache before loading it, you can see the elements taking the longest to load.

But, if you are a web developer, you should know this ;-)

Link to comment
Share on other sites

Maybe I can make the length of the image a lot shorter. Maybe just 1500px, or 2000. I want to make sure there's no obvious overlap between the background images. I tried using the texture maker, but it didn't really work.

I make the CSS sheet external later, so I can edit it more easily, like dntheo said.

I'll check out firebug. :)

E: How's the loading time now? http://flip.zxq.net/index3.html

Link to comment
Share on other sites

I think Frontcannon has the image cached. It's still very slow - trust me. I have dialup.

2000px × 600px 660.62 KB (676478 bytes)

Did you slice it thin or just change the length? There is no point in repeating the image in the x direction if the image is fullsized anyway. I'd cut it down to an image about 60px to 100px wide and see where that gets you.

You can combine the "background-repeat" into the background image instruction as per my previous post.

Link to comment
Share on other sites

So, after trying two different free web hosts, I found Zymic much, much more intuitive than the rest. Thanks, flip.

genulum.zxq.net

Only the Home, About and Contact pages are accessible, and the contact form is non-functional.

Link to comment
Share on other sites

  • 3 weeks later...

I've spent a lot of time and work pile driving through guides, ideas, and literal on the back of a napkin drawings to get SpreadPaint.NET where it is now. However, something still just isn't there, and I can't seem to pin point what it exactly is. If anybody has any advice regarding its theme, please let me know!

signature.png

Link to comment
Share on other sites

I've spent a lot of time and work pile driving through guides, ideas, and literal on the back of a napkin drawings to get SpreadPaint.NET where it is now. However, something still just isn't there, and I can't seem to pin point what it exactly is. If anybody has any advice regarding its theme, please let me know!

In Chrome (at least for me), the navigation bar is listed vertically, not horizontally. Like this.

problem.jpg

Link to comment
Share on other sites

  • 4 weeks later...

I came across this little javascriplet to show or hide a section within a webpage.


<br />  function ShowHideContent(elem,contentId){<br />    var con = document.getElementById(contentId);<br />    var isHidden = ( con.style.display == "none" );<br />    this.innerHTML = (isHidden)?"Hide Content":"Show Content";<br />    con.style.display = (isHidden)?"block":"none";<br />    con=null;<br />  }<br />
<br />div	{border: 1px solid #DD6;}<br />



Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore ....,(more »)
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.





Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore ....,(more »)
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore ....,(more »)


Can anyone help explain this line: this.innerHTML = (isHidden)?"Hide Content":"Show Content"; :?: If it is meant to display the status string, then it doesn't seem to be working.

NB: to display the hidden text inline change the "block" term to "inline"

Link to comment
Share on other sites

Can anyone help explain this line: this.innerHTML = (isHidden)?"Hide Content":"Show Content"; :?: If it is meant to display the status string, then it doesn't seem to be working.

If isHidden is true, it sets this.innerHTML to "hide content," "show content" if false. The "this" is presumably intended to refer to the label being clicked, but this is half-fixed as "this" is passed in the "onclick" event. Changing the "this" to "elem" in the ShowHideContent() function fixes this, although the interface is slightly strange.

KaHuc.png
Link to comment
Share on other sites

Strange...., yes a bit :lol: Thank you for your help - I'll play with the code and see if I can't get it working a little better.

Link to comment
Share on other sites

  • 4 weeks later...

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...