So I have a case of client-itus here. The client is whining and my boss is demanding that I add a logo underneath the Archives tab over the banner ad seen, which would break through the structure I've set up. We're two days from launch and I have a choice of either taking precious time away from other work to restructure the layout, or find a way to position that logo without having to futz with the divs. I understand HTML and basic CSS, so I thought I'd see if I could find a better solution before going about this the hard way. Thank you for all your help! The current page can be seen at ctdailydose.com/new
(Just for clarity, what I want to do is add big circular logo on the right that says "Scolari Engineering" without having to rewrite the CSS and change the header's entire structure.)
Just add your image (logo) at the end of the end of the achor in your menu-banner div and position:absolute right:0px top:0px for it in your css. Adjust the position as needed.
Related
So I've been tinkering with this site, and I've got my work cut out, but right now I cannot for the life of me workout why content is displaying beyond the width of the window.
-redacted-
I believe it's something to do with bootstraps row/col guttering but have been unable to fix it, even with dreaded '!important' use.
Furthermore i note that a carousel button is extending beyond the width of the screen.
This basically just makes the site flimsy and seem broken.
Any css whizz out there able to give me some tips of this shit?
If the problem is with one specific tag (e.g. a <div>), add a class/id to that div with the following CSS: .classname { overflow-x: hidden; If it's the whole page, you might want to do that for the body and HTML tag. Note: When you do this last thing, people aren't able at all to scroll horizontally. This is a but user unfriendly, so you want to use that only if it's the only way out in my opinion.
Here's the effect I'm trying to achieve.
[image removed - client template]
At the moment, I'm using position:absolute to push the content section up into the slideshow, however, I can't make the wrapper identify the height without setting it manually. The content section needs to be dynamic (client will be updating this). So, ideally, I'm looking for a way to avoid using position:absolute with top: -115px etc. This problem also affects the footer. If I put a footer at the bottom, it also won't recognize the height, so instead of placing it below, it assumes it's spot is right below the slideshow (underneath the content section).
Thanks in advance for any help. Let me know if there's anything else I need to post for clarity.
Bc
How about margin-top: -115px?
We are trying to create a menu style layout. I'm using a css-columns properties to achieve the effect of columns. The content is variable, so we'd like to stick to this solution because we want the browser to organise the content for best fit.
In the example below we are seeing some odd behaviour in Chrome (Version 32.0.1700.77) and some different (but equally odd) issue in Firefox (Version 24.0) so I'm assuming it's our implementation.
In Chrome, we see a large gap underneath the first column as if it's placing the 3rd LI there to start off with, then moving it to the top of the second column at some point in the render process.
In Firefox, we see the H3 "scrambled egg" being left at the bottom of the first column, when the rest of the 3rd LI's content moved to the top of the second column.
Live Example: http://codepen.io/daviddarnes/pen/BeEIp
Speculations:
- We are using "break-inside: avoid;" on every element inside the OL. This could be causing the issue, but we can't seem to rectify it.
- Based on the H3 issue... might be something to do with that? Or the elements near to this H3 tag.
The point of the page-break properties is not to shrink content to fit on a page, but to help decide the optimal place for a page break to occur.
So, if you use 'page-break-inside:avoid' on an element, and there's not enough space on the current page to fit the entire element, the browser will consider inserting a break so as to force the element onto a new page, theoretically giving it more space.
However, if the element is so big that moving it onto a new page won't help, then there's nothing to be done (in terms of page breaks at least).
If you know in advance that your content will need to be shrunk when printing, you could try adding a scale transform on the problem elements (restricted to the print media type), so that they're a more manageable size.
Is this of any help to you?
http://ajaxstudios.com/
The floating animated "Game of the Day" link is extended OVER the Quick Ventrilo Connection button and even over the sub header text.
Is there a better way to do what I'm trying to accomplish that isn't so messy? I'm using mainly top: and padding: to position the text right now. I've also tried using a higher z-index on the ventrilo connect buttons to have it layered above the link, but it doesn't seem to be working...
Any help is much appreciated! Thanks for your time.
-Ethan/Otoris
instead of padding on the game of the day link, use right or left, since you're already using absolute positioning.
in correlation, if i understand correctly, to make the buttons layered above the link, you need to apply position:relative or absolute in order to get z-index stacking to work.
I've been learning CSS for a while now, but the simplified layout below is still a little beyond me, so I am asking whether anyone knows of a model for such a layout, or would have an explanation to make this work.
The page should have 3 bands or blocks:
header, bottom, and content.
The 'header' would start at left 0, top 0 in the visible screen, go all the way to the right edge, and be 70 px in height.
The 'bottom' band would start at left 0, but at the bottom of the visible screen, and also be 70px in height (eg start at the bottom of the visible screen minus 70px). It would extend all the way to the right edge of the visible screen.
The 'content' band would start at left 0, the top would start at the bottom of the 'header' band, and the bottom of the content block would extend down as far as the top of the 'bottom' band.
It would also be nice if the 'header' and 'bottom' band were fixed in their places, but the 'content' block were scrollable if there were more content that space in the block.
I think it's doable, but I can only get this so far at my current level, so I'd like to see how an expert would do it.
Many thanks
Mike Thomas
Fixed headers at the bottom of pages are difficult to implement and maintain. Can you guarantee that your content will always fit? Scrolling just a block instead of the entire page can be tedious for users because you have to get the focus right before using page-up and page-down.
Better solution would be to let the footer naturally go after the content is finished. You can set a min-height on the content for pages with out much content.
Sorry not a real answer, but your site will be better this way.
I'm not sure if this solves it, but for fixed header and footer with a scrolling middle content section you can check this link out:
http://www.cssplay.co.uk/layouts/basics2.html
here is a great site i have come across concerning css
CSS tips and tutorials
i think it would be best to just follow some basic designs there and learn from there :-)
What you want is a sticky footer. As for the content, you'll need to implement a scrollable DIV - the key there is handling overflow.
CSS Frames
This example covers the headers and footers that stay fixed at the top and bottom, although the width is less than 100%. I'm sure you can adjust.
By the way, the way I found this was by searching for "CSS frames" - keeping one part of the content stationary while the rest scrolls is sometimes referred to that way, because it's similar to what people used to do with HTML frames.
Examples - Css List Properties / Examples - Css Layer Properties / Examples - Css TextBox Properties / Examples - Css Font Properties / Examples - Css Text Properties / Examples - Css Cursor Properties / Examples - Css Background Properties / Examples - Css Table Properties / Examples - Css Scroll Bar Properties / Examples - Tools - Units - Parameters - Template Page - Web Design
http://www.css-lessons.ucoz.com/
Blueprint CSS is a nice tool that simplifies making CSS layouts.