Here's a js fiddle of the problem: http://bit.ly/Zd8JAU
I'm trying to place a header with a logo and a centred title at the top of the page. The idea is to center the title to the page itself and not within the gap left to the right of the logo, if that makes sense?
So I floated the logo over the top of the title and then altered the position of the logo shifting it upwards (as otherwise it insists on going beneath the title). The problem is this then creates a gap, which cascades down the page and I'd have to somehow shift everything up by the hight of the logo, and I really don't want to have to do that.
So is there a better way to get my logo positioned to the left of the title without creating gaps anywhere and without it causing an off-set on the text in the title?
EDIT: updated the fiddle to be clearer what I'm trying to achieve.
Yes, consider using a CSS background for your logo as part of your NAV element, which makes it easier to pad your text and position the image without interference.
Related
I am struggling with getting the elements on this page to reflow correctly: http://www.cmattayers.com/moushegianlaw/
I want the semi-transparent box to be flush with the left side of the slider image (the photo of the gavel), and for them to be "fused together." The problem now is that when the window becomes narrower, the semi-transparent callout box drops below the portrait photo, but the slider photo stays where it is. I have tried different combinations of inline and block elements to achieve the desired effect, but nothing seems to change.
I also have a bizarre sliver of space to the left side of the semi-transparent box that I can't seem to get rid of. Adding negative left margins does fix it, but when it drops below, it's off-center and outside of view.
I also need to find a way to add padding to the bottom of the box. When the window is resized to show mobile view, the bottom of the box rests directly on the header text below (I would like there to be padding, but adding padding seems to add it to the text inside the box and not the outside of the box).
In that design, you've done a couple of HTML and CSS things I'd recommend against.
Firstly, your <div id="header"> should be a <header> element. That's more semantic and accessible. If you use multiple headers on the page (which is allowed), you can distinguish this one using role='banner'.
You shouldn't put all those blocks into the header. Rather keep the logo in the header, put the menu in a <nav>, and put the portrait + gavel image + dark paragraph into a <section>.
Next, and to answer your question, perhaps don't use inline and float to position the paragraph. inline and inline-block are great for flowing content, but not great for content you want to always be in one row. Rather give the parts display: table-cell (or use the new 'flexbox' CSS styles).
To get this right, you may need to restructure your HTML a bit.
http://codepen.io/MarcMurray/pen/GBwEt
I'm curently laying out a page for an assignment, and am having bit of a brain fart in regard to positioning the content container beside the side bar and below the header.
I know it should be a simple fix, but when i change the margins it pushes the whole page down.
Can anyone see what I'm doing wrong?
Add float:left to .cardinfo CSS class
I am trying to keep my top-bar navigation from going behind my logo image on the header of my page. See below an example of the page when it is maximized in my screen:
Maximized View
Here is what it looks like when the browser window is made smaller:
Smalller Screen Example
I am trying to fix this page so that the top nav-bar that currently runs behind the image when the window is made smaller, will instead move and extend to the right.
Any ideas? The site is Inhishands.com
Thanks!
Your problem is that the menu (<ul id="display">) has the CSS property float:right, so it will always be positioned relative to the right side of the screen. When the screen is made smaller, the right side moves closer to the left, so the menu moves leftwards too (and overlaps the logo).
If what you want is for the menu to always start from the right side of the logo (and not to overlap it), then you could give it the property float:left and add a margin to its left side (like margin-left:370px). There are other ways of positioning it (like using absolute positioning) but this will get the job done.
Use Z-index on the navigation. In the CSS, set the z-index of the hands image lower than that of your navigation and you will see the navigation on top instead of behind.
Here's some information on Z-Index in case you need it: http://www.w3schools.com/cssref/pr_pos_z-index.asp
Nice design.
First of all you need to fix the minimum width of the top menu HEADER in your CSS.
Fix the header min-width according to the resolution you need:
#Header{
min-width: 1237px;
}
or directly into the HTML
<div id="Header" style="min-width: 1237px">
Im a novice, apologies up front if this is unclear! I know what I want, but Im not sure how to get there or if its even possible with HTML/CSS. Ive been trying for a week with no luck.
The main content area is 955px wide. In the header, I have a logo in the upper right corner of this 955px width, but would like the logo to continue to the right, for computers that have a higher res. So the main header area is set to margin: 0 auto, and I can put a 1px wide sliver to repeat to the right which is ok, but I would prefer the image to continue, not just some boring gradient.
Is this possible?
I created this image to show what I mean but cant post it because i need 11 rep and have 10. ;)
In it, the logo has been split into Image 1 & 2, but of course, if its possible to overflow the centered 955px wide header, then it could be one image.
I can get it to work fine with two images, as long as the window width isnt altered - then you can see Image 2 moving and doesn't line up with Image 1.
Thank you for any help!
Thanks to both Tullo and COBOLdinosaur - I couldn't get your suggestions to work right (probably more to do with my lack of skills) but you guys helped me figure out the solution to my problem. Here's what I did:
Created the image in one piece, rather than two images. Floated right within a 955px wide main-header container div. And then I used negative margins to push the image further to the right. This seems to work great.
Thanks for the help!
Put the image in a div with a width of 100% and with a background color that matches up nicely with the image. Then for the CSS on the image remove the margin and include
clear:both; float:right;
I have a html page with 12 thumbnails (spliced Photoshop) within a table (Table_01) within a div and when you hover over one of the thumbs a new image pops up.
At the moment when you hover over the "Ice white" thumb (this is the one I'm testing with at the moment) the new image pops up at the top of the page.
This is no good. It needs to pop up exactly to the right of the div which Table_01 is contained in (preferably top of pop up image flush with top of div and left side of pop up image touching right side of div if that makes sense). CSS is within head of source code near the end. It's not the best written webpage and is very messily coded but this bit should be easy to weed out and identify a solution hopefully. Any help greatly appreciated.
Late response obviously but I hope, it will help you out anyways.
As far as your comments above, those popping out new images needs to have absolute position with some right and top positions fixes. For example, considering that you are having a 3 divs in a row, each div is having an image, you should mention the parent div (containing the image) to have relative position; inside it the image (actually the popup image or thumb) should have position absolute and then it should have right and top adjustments in CSS as per your requirement.
I hope it will help you out...