-
1. Re: the html5 tags nav in the broilerplate.css file - fluid grid
Jon Fritz II Jan 18, 2013 7:38 AM (in response to New flash user)You should never use spaces in an html id or a css id or class name, unless you are creating a selector that targets a class, id or element within another class, id or element.
<div id="div nav">
Would use the css selector "#div nav" which would literally mean --a <nav> tag within an element with id="div"-- Which is why the css for the nav element in that element list above is affecting your id.
Your code needs a slight tweek if you want to continue using a two word naming scheme...
<div id="div_nav">
Using the css selector "#div_nav" which would mean --an element with the id="div_nav"--
You can over-ride anything in that block by writing a new element css definition later in the same file.
-
2. Re: the html5 tags nav in the broilerplate.css file - fluid grid
New flash user Jan 18, 2013 7:53 AM (in response to Jon Fritz II)i just used the name <nav>
i also did it this way in order to have a more specific name.
</head>
<body>
<nav id="topnav">
<ul>
<li>HOME</li>
<li>SITE MAP</li>
<li>CONTACT US</li>
<li></li>
</ul>
</nav>
<div class="gridContainer clearfix
-
3. Re: the html5 tags nav in the broilerplate.css file - fluid grid
New flash user Jan 18, 2013 7:57 AM (in response to New flash user)it seems that when I gave the nav bar a more specific name instead of just <nav> i could then write rules that apply to that area.
How do I get the main container in the Fluidgrid to position itself below my fixed nav bar which is located at the top of the page.
can i write a top margin rule and where do i write it. thanks
-
4. Re: the html5 tags nav in the broilerplate.css file - fluid grid
Jon Fritz II Jan 18, 2013 8:31 AM (in response to New flash user)Yep, that's how css works. If something is overwritten later in the css as in your case, re-writing an element's css with an id, the more specific css takes over.
Generally, you don't give single use elements an id to add css, you would just write the css rules for the element itself. If you use an id on the element, you need to make sure to rewrite any rules given to the element itself in the css within the id rules.
I'm not planning to update to DWCS6, so hopefully, someone will be along soon to help you out with the Fluid Grid specific issues.
-
5. Re: the html5 tags nav in the broilerplate.css file - fluid grid
New flash user Jan 18, 2013 8:55 AM (in response to Jon Fritz II)The only work around I have found so far is to create a fluid grid layout tag and give width, height, and color properties and use is as a blank box to keep my next div tag that has content in it to appear below my fixed nav div that is outside and above the grid contanier. It works great till i resize to mobile view. This causes my nav bar to stack vertically increasing its size. which the blank div is smaller than so my next content is still "under" my fixed header.
Any thoughts? Also still wondering about my questions is my ist post.
-
6. Re: the html5 tags nav in the broilerplate.css file - fluid grid
Nancy O. Jan 18, 2013 3:41 PM (in response to New flash user)I don't know if this answers all your questions, but below is a quick example of what you can do with Fluid Grid Layouts (FGLs). View source to see the code.
http://alt-web.com/FluidGrid/Fluid.html
I recommend using a separate style sheet for Content
http://alt-web.com/FluidGrid/Content.css
FluidGrid.css is the layout code DW created, no changes made.
http://alt-web.com/FluidGrid/FluidGrid.css
I advise against using position:fixed in any mobile / tablet layout because many older devices don't support them very well. With FGLs, less is more. Keep things simple & uncomplicated. You'll have fewer problems across different devices.
Nancy O.
-
7. Re: the html5 tags nav in the broilerplate.css file - fluid grid
New flash user Jan 19, 2013 9:21 AM (in response to Nancy O.)Nancy thanks for the above information. I looked it over. I want a nav area that stays put no matter what the user does to the page.
The fixed div does that and it seems to adapt to page size well as long as I dont stuff to much content in it.
I have hit a problem with fluid grid. I am stuck now. Everything was moving along well and My CSS has really improved.
The current problem I have is that my layout tag is not staying and displaying on the grid. On the design it shows that it is on the same row as the other layout divs. But when I preview it in I expore it has moved down a row
It appears that the width of the gutter or the pages right margin is effecting the div layout and not allowing it to snap in to the grid correctly. I have not be able to locate why my layouts are not spanning the full width of the page. DW shows they do.
Could the margin or gutter setting on the fluid grid affect this?
-
8. Re: the html5 tags nav in the broilerplate.css file - fluid grid
Nancy O. Jan 19, 2013 11:21 AM (in response to New flash user)I want a nav area that stays put no matter what the user does to the page.
Are you building this site for yourself or your site visitors? What YOU want may not be possible in all end user devices. Position:fixed is dicey.
Many older mobile devices don't support it. Many newer devices have problems with zooming-in and panning around fixed elements.
Mobile browser compatibility charts:
my layout tag is not staying and displaying on the grid. On the design it shows that it is on the same row as the other layout divs. But when I preview it in I expore it has moved down a row.
Which version of IE are you testing?
Does your floated Div drop in Live View?
How about in Chrome, Safari, Firefox & Opera?
Can you post the URL to your test page?
Nancy O.
-
9. Re: the html5 tags nav in the broilerplate.css file - fluid grid
New flash user Jan 19, 2013 11:50 AM (in response to Nancy O.)Thanks for those charts. I am building the site for both myself and my visitors. After looking at your chart I think 90% is good enough for me. My old website that I am rebuilding used framed pages and front page to build it. I am making my layout so that IF i find that the fixed nav box is too Dicey I will just pull it off the site.
I am not suse which browser dreamweaver has built in. I moved into a new windows 8 computer with CS6 at the same time. I have not downloaded any browsers yet. I was just building this based on the newest stuff released. I am far from testing it out and should have gotten some done by now. AS of right now I have 140 hours in building my new layout and learning CSS coding. I have not uploaded yet to a URL so I will need to get back to you when I do. The little bugs keep setting me back to zero. The layout looked like it all snapped to the grid. My layout divs were 12 column with 4 divs approx 200 px 400px 300px and 300px everything snapped to and looked fine. When I started adding my PS images and content to my divs the 4th div fell back down a row in the view. I then click the arrow to move it down a row which it did then I tried to move it back up. It would not go. I have boxes with borders, radius corners, and dropped shadows on the containing box. I looked at it and starting thinking the CSS styles made it wider than the fluid grid would allow. So i then removed the styles and it is still stuck a row below where it should be.
Futher down my page I have 4 more rows with 4 divs in each row. The last 4 all drop down so that it is totaly different than what I a laid out. It is weird because my div is three colums wide. I have the last three colums open on the lay out but it will not move up and it seems like the margins are tight or the gutter is wrong. I am not sure.
-
10. Re: the html5 tags nav in the broilerplate.css file - fluid grid
Nancy O. Jan 19, 2013 12:01 PM (in response to New flash user)Until you upload your test site to a public web space you control, there's not much I or anyone else here can tell you except to start over.
I think I made 9 or 10 prototype pages with Fluid Grids before I settled on a Layout I could live with. Make backup files in case you do something you can't Ctrl+Z (undo) out of.
You should definitely be previewing in multiple browsers and web devices. IE is the worst of the bunch. DW Design View is not reliable either. Use Live View and Preview in Firefox, Safari or Chrome
Nancy O.
-
11. Re: the html5 tags nav in the broilerplate.css file - fluid grid
New flash user Jan 19, 2013 12:48 PM (in response to Nancy O.)There is something to the column gutter width % factory preset at 25%. I made two more fluid grid pages and loaded in the same content. When I use a 10% width the items wrap to the next row When I change that to 20% content stays on the main row.
Content and photos are the same size, Whats up with that?


