I am trying to make my nav bar sit parallel with my logo but I'm having difficulty doing this.
First of all, when I enter the code for the image, the image afterwards doesn't display at the top of the page.
Instead, it sits about 40px below the page. I have tried using floats, but have had no luck.
I have created a negative value of -20px for the logo to sit further at the top of the page but would like to know if that is normal practice in CSS
I have tried looking at youtube videos but the code they share doesn't seem to work on my project. I'm just wondering whether the image may be a bit too big for the header
I would definitely recommend using Flexbox. It takes the hard work of setting floats and setting things in a manual way out of your way. Here is a cheat sheet and a little background into using Flexbox. It's also responsive too.
The Flexbox Layout (Flexible Box) module (a W3C Candidate Recommendation as of October 2017) aims at providing a more efficient way to lay out, align and distribute space among items in a container, even when their size is unknown and/or dynamic (thus the word "flex").
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Hope this helps.
if want to easily make a navbar you can go to the website listed below and you can pick which one of the navbars you want then alter or change it based on what you like it has all styles of navbar with logo without a logo or even the style you want.
link to navbar code:
https://www.w3schools.com/css/css_navbar.asp
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.
I'm fairly new to bootstrap and I having trouble making my site do what I want it to. Hopefully someone can steer me in the right direction.
I used bootstrap to make a nice responsive grid for my site within a container. The problem I am having is that I would like my backgrounds (different backgrounds in different sections) to fill browser window while the page content stays at 1170px max-width. Is there anyway to do this?
of course. adding your own css is not that bad but make sure your css is in last (e.g , )
do this in your background telling your div
<div style="position:absolute; top:0;left:0;background-image: url('img/urbg.png');">
dont box here. experiment, play and explore. bootstrap is boxed dont get TRAP with BOOTSTRAP. its cool but you need to know when to handle design with image background. see this
CSS - Floating two elements side by side
This conversation is similar to what I am trying to achieve. I have a % based layout and have an issue either the menu will get mixed in with the content or the content will fall below the menu when the page is shrunk or viewed on a mobile phone. I've spent several hours on this and cant figure out what I am doing incorrectly.
Problem child: https://www.tendercare-inc.com/new/
Update:
My biggest thing was getting something that worked well with Word Press as it uses very awkward controls and element names. I tried starting with _Underscores but it doesn't seem to have helped as much as I thought it would.
The basic problem is that you are specifying percentage based layouts for some elements like menu-sidebar and main-content but you're not consistent. The menu has a min-width of 200px. What do you want to happen when 200px is greater than 15%? Inside the menu you also have elements specified with exact pixel widths — the various cssmenu maker elements.
The site is very simple — basically a header, footer, side menu, and body. Yet you have two style sheets - one with over 800 lines — and a structure with site-content containing content-area containing site-main containing content-container. It's no wonder it's causing you grief. My advice would be to start over with a simple css framework (like bootstrap mentioned by #jaun above. Keep the structure of the html as simple as possible and avoid copy-paste design with things like menus. Also rather than trying things a seeing what's wrong, describe the behavior you want at various screen sizes and make it happen.
You should use bootstrap (getbootstrap.com) you can use col-md-6 clases to do that. Also mobile phone and tablet ajustment is supported
This is essentially what I'm trying to do:
I have an image I want to use as the background for the webpage, and I want to put content over it, while keeping everything responsive so it's always centered!. I'm using Foundation 4, which is making things tricky (but I want to learn how to do it this way). The black boxes will be images, and the idea behind this is that everything can remain responsive.
The black boxes are supposed to be centered. I've tried using absolute positioning for the boxes and forgoing trying to put them in a , but it doesn't seem to work too well (i could be doing something wrong).
Overlapping anything in Foundation 4 seems tough. I must be going about it wrong somehow. Thanks for your time!
I'd need to check your HTML code structure to confirm but I think what you want is .small-centered and .large-centered (they work the same as .small-1,.large-1 but for centering).
http://foundation.zurb.com/docs/components/grid.html (Search for Centered Columns on page).
Also for the boxes I hope you are using Foundation's Block-Grid for your boxes - it will make your boxing a lot easier to do.
http://foundation.zurb.com/docs/components/block-grid.html
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?