I am building a website but I started with a template and gutted it, changed a lot and got rid of the entire center section and now I have to start over with the body but whenever I try to insert the navigation menu, which is a javascript code that is inserted from another program I used to build it. Well, every time I try to insert the menu on the left side of the page, it falls outside the alignment of the header and footer, so instead of it being straight aligned with the header and footer on the left side, it is on the outside of where it should be. I'm absolutely retarded when it comes to this stuff so if someone could tell me the trick here and for building the content of the body. Just simple stuff like what html code and tags to use for making the boxes that you can insert things into, not image placeholders but boxes to input content like navigation menu or anything really?
HELP PLEASE.
here is the site.
Retairacket.thexdt.com
I also get an invalid URL error.
By the sounds of your problem though, you should be able to fix it relatively quickly and easily. I assume from the sounds of it that your header and footer are a fixed width and that there is likely a fixed width block within the body that is forcing the body to be wider when you add in the (most likely) fixed width nav as well. If that's the case, then you will just need to change the way you are controlling the widths to suit the new nav bar. So reduce the width of one block to accomodate the width of the new one, make sense?
Remember, I haven't actually seen what the problem is, so I'm just guessing from your question here based on the most likely sceanario.
I would also recommend learning the basics first. Designing a website isn't as everyone makes it out to be. As an extreme beginner without using WYSIWYG editors, coding HTML can be very complex. There aren't just "tags to use for making the boxes that you can insert things into."
Yes, there are <p> and <div> tags that will do what you want, but you need to understand what each tag does and when to use it.
I recommend the following sites:
w3schools
HTML Goodies
Webmonkey
Search Google for "HTML basics"
That URL isn't valid, apparently.
I also can't see your page, but I can see http://www.thexdt.com. Is the design similar to that page?
That page uses tables for the general structure. Is there is a large image or something bigger that the width of the external container?
Related
PrinceXML is really great and powerful but I’m offended by the way it manages header/footer.
I am trying to have 3 columns with different background colours to run on the full page height. Not a problem until you add a footer to include the page’s number.
In order to show the footer you need to add a bottom margin to the #page, but doing so cut the columns. I tried to use an absolute position without any luck.
Is there anyone who has some experience with complex layouts and page numbering with PrinceXML ?
As a DocRaptor developer, we run into these kinds of problems all the time. Prince headers and footers live INSIDE the page margins. This provides a lot of useful power, but sometimes complicates things, as you've noted.
Without seeing your exact HTML, I'd suggest the following:
Continue experimenting with a zero page margin and absolute positioning and a negative position/margin on the element inside the footer. I think this would work. It might work better if you used a header element. Prince gets weird and buggy on the edges when you do this kind of tricky stuff.
Alternatively, if your column widths are the same for every page/document, try faking the column background colors by using a background-image on #page.
So I apologize in advance if this question has been answered before- I tried searching but couldn't find much on it.
A designer and I are working to create this website- www.zeinal-jundi.com
This is predominantly a one-page layout using a scroll effect to navigate to different sections, although the site's Discography section does link to a separate page for each album. We also have a fixed header that allows the navigation to be visible the whole time. Originally, I had added a margin to each section of the page to accommodate the height of the fixed header. This however made the space between each section far too large, so my designer requested I find a way around this. I was able to fix it by instead adding a value to the scroll animation script that brings the section around 250px from the top, rather than to the overall top of the page (where it would then be covered by the fixed header)
So now, I've of course encountered the issue of linking to these sections from off another page- using code like the following:
Biography
This of course links back to the front page, but brings the section up to the very top, where it is hidden by our header. I'm wondering if anyone knows of a way I can link to this section from another page but add an action similar to the one I have on the scrolling function that will bring it up to 250px down from the top of the page rather than the very top without me having to add margins to each div.
Another option of course it to just make that pesky fixed header a lot shorter, or possibly hide the site title after the page scrolls to a certain point, but our client seems pretty adamant about having the entire header visible throughout, so I of course am trying to find a work around so we won't have to rethink the entire element (if such a solution even exists).
I hope I explained this well enough! Let me know if you need to see any additional code- would love to hear your thoughts on how to achieve such a thing! :)
If you're placing the block through CSS, you can use the CSS3 :target pseudo selector to position whatever section the link pointed to, e.g.:
:target {
/* ... example:
top: 250px;
*/
}
I'm working on a couple of aspects of someone's website and I'm having a bit of an issue with getting the tabbed navigation to display properly without absolute positioning, and as it's set to absolute the text on the Details tab overruns the "footer" sometimes. (They use a random Testimonials block which pulls varied length quotes, the short quotes cause the overrunning. If it doesn't go over please just refresh)
http://goo.gl/5Iwc1r
Normally I would put this into a jsfiddle but to get the issue to display I would practically have to copy the entire css and html of the page, which wouldn't be very efficient and certainly not very clear to look through.
So, does anyone have any suggestions on the best way to approach this problem? All advice would be much appreciated.
I'm not 100% sure what you're trying to accomplish here. But I'll give it a shot...
Try adding a div underneath the tabbed navigation to act as a spacer, because of the way positioning acts upon screen real estate, this "spacer" div can keep things underneath it nice and tidy. Just set a height value to it to force the content to display where you would like it to.
Hope this helps :)
Because of the way you've structured your pages, it's not going to be easy. The content is places with a position: absolute;. This causes the content to not push down the footer, since the height isn't registered.
I think the fastest way to solve this, without having to rebuild half your website, is by using javascript. Since I see jQuery is loaded, I shall write this using jQuery.
jQuery(document).ready(function(){
setHeight();
jQuery('input[type="radio"]').on('click', function(){
setHeight();
});
});
function setHeight(){
jQuery('#wrapper').height('#wrapper > div > div').is(':visible').height());
}
This piece of code should set the div with id wrapper to the height of the currently visible div.
I haven't tested this, and it is no pretty solution, but it should work.
Good luck!
I'm seeing div class="page-wrap" used extensively in web applications.
What is the convention for the page-wrap class, what goes inside?
It all depends on your css layout you are applying... Sometimes, people use wrap containers to use sticky footer technique (header and content in the wrap, footer after the wrap - google it); sometimes with this wrapper the designer just wants to fix the entire page to certain width and center it (not saying that this is the best way or that there is a best way), etc... It is really subjective, because it is mostly a design thing.
By convention it can take ONLY the following:
*
Yes, everything. I am sure there's no such convention about it. The possible reason to use this div tag with page-wrap class may be to clarify that before it is the header region and after it come sthe footer part. So if I have a simple 5-page website, I'll have a common header and common footer, shared by each of 5 pages. My about-us page will be different from my contact-us page only inside <div class="page-wrap">.
There's this bug that I can't seem to fix where IE cuts off part of my text if I leave the footer in the same exact place as the main page. The following are examples of my main page footer position and the subpage footer position. I was wondering is it bad design to move the footer position this way? (the flow of the site fits better with the moving of the footer though)
Main page: http://www.sixfoldstudios.com/stars/index.html
Subpages: http://www.sixfoldstudios.com/stars/home.html
Thanks!
The footer doesn't look all that different except that it is smaller on the subpages. This is not a bad design decision.
As long as the footer looks the same overall and doesn't throws the text around it should be okay. People don't really look at the footer unless they need something from it so I'm sure most visitors won't even notice.
I am not a designer, so I can't answer you from this scope. But as user, I can't say that looks bad, your footer doesn't include any great information for the end user, that will visit just the website, I doubt if most users even check it. Of course the things change if you had a sitemap. Also big sites use different position for footers, here an example of ebay.
Homepage: http://www.ebay.com/
Answers Center: http://pages.ebay.com/community/answercenter/index.html
I would keep the footer the same everywhere. The reason why you might have a problem is because your footer div is in the rightcontent div.
Just move it outside just before the closing div of your container and if text overlaps it set the css to clear:both;
I have two sets of class for both me mainpage & subpages footer at times & it doesn't bother me much as long it does it work ^_^