- This topic is empty.
-
AuthorPosts
-
January 30, 2014 at 7:58 am #161408hakraiemParticipant
ok so here goes..
i wanted my header image to stay at the top of the page at all times so i put in this code..
MOD EDIT: Code Dump removed
January 30, 2014 at 8:09 am #161415Paulie_DMemberPlease put that code into Codepen so we can tinker with it.
January 30, 2014 at 8:22 am #161418hakraiemParticipanthow do i add my header image to codepen so u could see what im talking about?
January 30, 2014 at 8:38 am #161423Paulie_DMemberPut your image on the web (I use Photobucket) or use an placeholder image substitute from sites such as lorempixel.com or placehold.it.
January 30, 2014 at 8:45 am #161426hakraiemParticipantwhat im looking to do is to get it to sit directly under the header image as well as for the text to all be either distributed evenly within the 1000px width or for it to all be centered and for both left and right ends to have equal padding without hindering the flush design of the sub categories to their “parent” category.
January 30, 2014 at 8:49 am #161428Paulie_DMemberLooks fine to me.
To test, try making the
.contentbox
div very tall (say 2000px) and the image will stay where it is when you scroll.If you want the
nav
to stay at the top of the page with the image, put it in inside theheader
and adjust accordingly.Frankly, without seeing the actual image, I suspect that it should probably be a background image and not in the HTML at all.
January 30, 2014 at 8:54 am #161429hakraiemParticipantlooks can be deceiving, i just put in the placeholder and youll see what i mean. also take a look at the far left of it, you see how the home button is flush against the side, and the far right, the contact button has space between itself and its side (hover over it).
January 30, 2014 at 8:57 am #161430Paulie_DMemberOK…now we are into menu list item spacing…is that the actual issue and NOT the position of the image?
Frankly, it would be much more helpful if we could see the actual proposed image and see how/if it’s actually related to the menu ‘issue’
January 30, 2014 at 9:01 am #161431hakraiemParticipantthey were both the issue. i put the
nav
into theheader
and i still have spacing between the two. i want them to be flush with each other. and the menu button spacing is still an issue.January 30, 2014 at 9:28 am #161434hakraiemParticipantany luck?
January 30, 2014 at 9:30 am #161435Paulie_DMemberHow’s this: http://codepen.io/anon/pen/tpoeF
Remove the width from the nav>ul and the ‘table’ automatically becomes 100% wide and spaces out the ‘cells’.
Note that I have had to add some specificity to the
nav > ul
and moved some properties to a more genericnav ul
.As I mentioned before, if I knew how the header image looked and interacted with the menu (if indeed they do), I could help further.
January 30, 2014 at 9:40 am #161436hakraiemParticipantthey dont interact at all, its just an esthetic preference. with your edit (which i am very grateful you are helping me with), it puts my navigation menu on top of the header image as opposed to directly under it..
does the link i provided you with show you the image placeholder i put into the code? its the same dimensions and all just without the picture.January 30, 2014 at 10:01 am #161440Paulie_DMemberI think so…I’ve updated my codepen to use a proper lorempixel image:http://codepen.io/anon/pen/tpoeF
January 30, 2014 at 10:45 am #161442hakraiemParticipantnope…wasnt a solution…
when i view it on the browser it shows me completely differently than on codepen..its weird..January 30, 2014 at 12:04 pm #161452Paulie_DMemberUnless you have a live link (not Codepen) it’s going to hard to help further.
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.