Apologies if this is a simple solution, but my brain doesnt seem to be working today and I just can't seem to get this to work properly.
Issue: I'm trying a new design with a 2000px header that allows for a landscape feel across the larger monitors.
However when I view the design on a smaller monitor the entire header div is moved off centre, and therefore some menus aren't available to be seen.
The content div is obviously staying at the centre of the monitor, however I cant seem to find a solution to make sure it's aligned with the centre of the header div.
I've attached an image to help explain the situation.
Just Try,
HTML
<div id="container">
<div id="header"></div>
<div id="content"></div>
</div>
CSS
#container{
width:1920px; //any other value.
margin:0 auto;
}
I would assume your css for the image is placing it top left just move that to top middle[or is it center] and you should be ok.
so background: url(...) no-repeat top center
Related
I have an absolutely positioned form that appears roughly 200px below where it should be on the page load. If I open up Chrome Dev Tools and disable and re-enable any CSS image it goes where it should be.
This only happens in Google Chrome.
I've tried using the chrome specific CSS rules below but it doesn't work.
-webkit-backface-visibility: hidden;
-webkit-transform: translateZ(0);
How can I fix this?
Here is the page in question: http://info.iconixx.com/Iconixx-Incentives_imc_incentives1.html
It's likely nested in a different element then your wanting it to be. Make note of the parent element.
Find the element in which that header image is coming from. Likely <header></header>
Then make sure that element is defined as position: relative;
Within those tags have the relevant mark-up of the element you are trying to position within this area.
<header>
<div id="absoluteelement">
</div>
</header>
Now when you do:
#absoluteelement {
position:absolute;
top:50px;
left: 200px;
// more
}
It will be positioned top and left coordinates from the parent element, so top and left from the top and side of <header> just double check your code and nesting. Also, make sure you have all widths and heights defined for that area. Hope this helps.
I think you should really take a look how your markup is structured and consider reformatting it. For 1 the left box in the banner comes after the Form which is on the right. Just like anything else you should build left to right.
<div id="banner">
<div id="left_content"></div>
<div id="right_form"></div>
</div>
You could then....
#left_content{ float:left; }
#right_form{ float:right; }
This isn't going to give you the exact look you want... but using this approach will really help eliminate thse types of issues to begin with.
Trying to help a friend of mine with a Squarespace website and attempting to add an image in the header code.
I've tried aligning centrally but it doesn't seem to work. Only padding and margin pixels have any effect but then it's not consistent when using different sized monitors.
Any help is greatly appreciated!
Current code below:
<a href="https://wwwmisscurrentcom.squarespace.com/about-1/"><img class=
"thumb-image loaded" data-image-dimensions="960x41" data-image-resolution=
"1500w" data-src=
"https://static.squarespace.com/static/53ce81e3e4b065e3be155770/53cfbd0ce4b056db8c5d3b42/53e4fdb9e4b036cda0551713/1407516127095/header-shipping.png?format=1000w"
id="yui_3_17_2_1_1407515470914_1223" src=
"https://static.squarespace.com/static/53ce81e3e4b065e3be155770/53cfbd0ce4b056db8c5d3b42/53e4fdb9e4b036cda0551713/1407516127095/header-shipping.png?format=1000w"
style="top: 114px; position: relative;margin-left: 150px;"></a>
After re-reading your question a few times, I think I know what you are asking. You can centre your image with margin: 0 auto;. The auto left and right margin will keep the block element (in this case, a div) dead centre horizontally across all resolutions and screen sizes.
Have a jsBin example!
HTML
<div class="header">
<img src="http://www.placehold.it/200x100" alt="logo" />
</div>
CSS
.header {
width: 200px;
margin: 0 auto;
/*
shorthand margin =
top (0)
right (auto)
bottom (0 - inherited from top)
left (auto - inherited from right);
*/
}
If you want it properly centered you will have to access the custom css and use media queries. The problem with standard pixels and percentages in SquareSpace is that you may get it centered on your monitor but it will not always center on other hardware/devices.
The page in question is this: http://amytdatta.com/ironic-bironic (password: tyma) - it's a pre-release page for a new album I worked on, sorry!
I'd like to have the video and the text nav below scale and center to the browser window without the need for a scrollbar. I've tried all kinds of approaches using min height / max height but just can't seem to get the intended result. I'm guessing that I don't know which elements to target and how to target them.
Any advice for a good solid approach would be really appreciated. Also, since i'm using Virb I can only do overrides to the CSS, so I can't delete lines.
Thanks very much.
Without actually seeing your website since it's password protected I would suggest something along the lines of the folllowing:
You set a wrapper around your elements, in your case the nav and the video. And then set the CSS for the video and nav to have an auto margin. Which should center it both horizontally and verically. You might want to add a wrapper for the 2 components to keep them nicely stacked together and then put an auto margin on that wrapper, but the below should already work.
Html:
<div id="container">
<div id="nav"><!-- nav here --></div>
<div id="video"><!--video here--></div>
</div>
CSS:
#container {
width:100%;
height:100%;
}
#video{
margin:auto;
}
#nav {
margin:auto;
}
Hoping someone can help me out as I'm still pretty new to the whole web design thing. I'm using CSS to create a container wrapper. As you can see from the code I have a bottom, top and center image. When I was using JPEG images everything lined up correctly, however I needed to switch to PNG image files (to take advantage of transparency) and now the top and bottom sections of the wrapper are offset.
**Here is a live link: storrepictures.weebly.com/projects.html
-Please find an image of the resulting problem here: http://i.imgur.com/YnTS8.png
-This is how it looks when I use JPEGs instead of PNGs: http://i.imgur.com/2WMFN.png
Here is my CSS code:
#wrapper {
background: url(containerbg.png) center repeat-y;
}
#wrappertop{
background: url(containertop.png) top center no-repeat;
}
#wrappertbtm{
background: url(containerbtm.png) bottom center no-repeat;
padding-bottom: 65px;
}
And here is the body portion of the HTML file:
<div id="wrapper">
<div id="wrappertop">
<div id="wrappertbtm">
<div id="container">
<div id="header">
<div id="headerleft">{logo max-height="60"}</div>
<div id="navigation">{menu}</div>
</div>
<div id="content">{content}
<div id="footer">{footer}
</div>
</div>
</div>
</div>
</div>
</div>
</div>
check height add width of jpeg and png..
may be both are different.
I am not sure but i think you can solve your problem by giving them same height and width..
I think your PNG images are not sliced properly check it the exact width & height of that.
Whereas they are PNG or JPEG they will come at their exact position if they sliced properly so the problem in not transparency the problem can be improper slicing of image....
And if you will give us the live demo than we would be able to see deeply the exact bugs..
I have a div (class="sidebar") that I want to display on the right hand side of my content area. I've set the content area as the container, then placed the sidebar inside that, specified height, width, background color and floated it right.
It's displaying in firebug, but not appearing on the screen.
I'm currently learning CSS so any tips/advice on what I'm missing are welcome.
Any advice available will be gratefully received.
Thanks in advance,
Tom Perkins
You can view my code here:
http://jsfiddle.net/tomperkins/v3yqf/
Because HTML elements have transparent background color by default. Giving the element a background color and you can see it immediately:
.sidebar {
background: orange;
}
See: http://jsfiddle.net/v3yqf/3/ ( http://jsfiddle.net/v3yqf/3/embedded/result if your screen is narrow)
Try placing your sidebar div before your content div. Also, you will see it better if you specify background: green instead of color: green ;)
Edit:
So, use
<div class="sidebar"></div>
<div class="content"></div>
instead of
<div class="content"></div>
<div class="sidebar"></div>