I've gone through CSS validation (which did find some pesky unclosed tags, sorted now).
I'm trying to align an image to the top right side of my page, with title text on the top left.
I can do this, but when I resize the browser window the image always wants to overlap the title text before either of them resize. If I remove the margins that I've used to place the image then the image sits under the title text (and to the right) instead of just to the right of it, but I feel removing this (while keeping the positioning) might be key. I do need the image to be overlapped by some other elements though.
Here's a snippet of my code for the image:
img#site-logo {
max-width: 100%;
height: auto;
clear: both;
position: relative;
z-index: 0;
margin: -12.87em 2em -16em 0px;
}
And for the site title:
#site-title a {
font-size: 4.875em;
font-weight: bold;
line-height: 78px;
padding: 0px;
margin-right: auto;
white-space: nowrap;
z-index: 2;
position: relative;
}
Site is live here:
http://dominicpalma.com/
There are surely several different approaches to solve your problem.
But in my eyes it would be the best solution to set a min-width for your #page element.
#page{
min-width:900px;
}
I have played a little bit around with the width and think a min-width of 900 px fits best in your case.
Related
I have a design issue in my app, the body text is scrolling through my nav- and command line and i don't know how to fix it. I'm not looking for a z-index fix where the body text flows underneath, i want to restrict the lorem ipsum filler text upper scrolling to just below the command bar. The body text is huge, and scrolling is necessary. Currently it looks like this:
Navbar CSS:
position: fixed;
width: 100%;
top: 0;
Command Line:
margin-bottom: 60px;
Body Text:
position: relative;
min-height: 1px;
padding-left: 8px;
padding-right: 8px;
box-sizing: border-box;
float: left;
I'm using Microsofts ui-fabric grid system, and can post more code if necessary. But i was hoping there would be an easy "set vertical scrolling breakpoint for this div at x pixels from top" - or something like that. But i can't seem to find anything.
I guess i don't understand this well enough, so if someone can explain the big picture of how to resolve this scrolling issue, that would be helpful.
You can limit the height of the container in which the text is to a specific height and then set the overflow on the y axis to scroll, this will result in the behavior you want because the scroll is limited to the container div, thus the text won't scroll through the navbar.
Remember to adjust the margin from the top accordingly so it starts under your nav and command bar.
Example (assuming your navbar is 10vh):
#text-container {
height: 90vh;
margin-top: 10vh;
overflow-y: scroll;
}
If your navbar is for example 100px you could do:
height: calc(100vh-100px);
margin-top: 100px;
This would correct the height so it will always fill your whole screen.
If a horizontal scrollbar appears you can hide this with overflow-x: visible; or overflow-x: hidden;depending on the behavior you want
To start with an offset on the body text just give it a margin-top which is the same height as you nav bar, i.e.
margin-top: 50px;
This will give your body an initial spacing before it starts, after the user starts scrolling it'll
.full_width {
position: relative !important;
z-index: 5000;
}
I'm trying to get a simple page layout where the navbar sits vertically along the right side of the user's window, taking up no more than 20% of the available space. The remaining 80% of space to the left is used for content.
I want the entire page to be resizable, so no matter how big or small the browser window is (within reason), the content will resize to the user's screen. Everything works and resizes great, but there's one problem with the navBar. Here's a CSS excerpt:
body{
background-color: #111111;
font-family: Roboto;
color: #cccccc;
font-weight: 300;
font-size: 14pt;
height: 100%;
}
#content{
width: 80%;
float: left;
}
#navBar{
width: 20%;
height: 100%;
background-color: #00C9FF;
float: left;
position: absolute;
}
#welcome{
background-color: #222222;
text-align: center;
margin: 1%;
}
The Problem:
If I leave the code above as is, the navBar renders on the right side of the screen, as it should, but it is not 100% the height of the browser window. Note it still resizes when the browser window's WIDTH is changed.
If I set navBar's position to absolute (position: absolute) the navbar renders exactly how it should render, except it floats to the left side of the browser, basically making it on the complete opposite side of where it should be.
Demo: http://codepen.io/anon/pen/YPyvzO (remove position: absolute to see where the navBar SHOULD render)
I have tried several different things including setting "HTML" in CSS to height: 100% and several different position properties for navbar, all to no avail. I'd like for this to be done only in CSS, but I'm not sure if it's possible.
Add the following:
position: absolute;
right: 0;
to #navBar. One thing that took me a long time to understand is that position: absolute overrides everything, even floats.
when you resize the browser the width and height change, so for this purpose you have to use media query in CSS and in this you have to tell the browser that in this width the navbar should be in given width. and another option is that you can use bootstrap, in bootstrap you not write too much css. and all the work become easy.
please see link below
as you can see there's a text on header (header is an image)
the text is:
mail#yahoo.com (this text is a part of image)
I convert that part of header image to link with below code
<div id="hw"><div id="header"><img src="test.jpg" /></div></div>
and this is #link
#ResponsiveLink {
width: 267px;
height:29px;
display:block;
position:absolute;
top:100px;
margin-left:413px;
}
how can we make that link be responsive in other devices? for example when browser is narrow position of the a tag with #ResponsiveLink id changes but i want it be fixed over my text.
The best way I know, is not to put a big part of your screen as an image. On the other hand you probably don't want to cut the image into several separate images. So, I suggest using CSS Sprit.
After separating the image, you can put the parts beside each other using float, clear, and percentage widths, or use a framework like bootstrap.
If you still want to use the image as a whole header, in a single HTML tag which don't recommend at all, using percentage top for your #ResponsiveLink would work. You should just add width: 100% to all its parents: header, hw, and wrapper.
Following the comments:
#ResponsiveLink {
background: none repeat scroll 0 0 #FF0000;
display: block;
height: 0;
left: 58%;
margin-left: 0;
margin-top: 7%;
padding-bottom: 3%;
position: absolute;
top: 0;
width: 25%;
}
This will fix the problem because of the difference between percentages of position and margin, top percentage is calculated using first absolute parent's height but margin and padding percentages are calculated using parent's width. There's still a problem caused by the max width which you can fix adding a wrapper inside your #head with a width of 100% and no max width.
The other try of using floats and separated images have too many problems to write here, sorry.
What you're currently building isn't a sustainable solution and you should definitely see other replies on how to improve your site layout.
However, if you need a temporary solution, the following CSS changes will work on your current page:
#header {
margin: 0 auto;
max-width: 980px;
position: relative;
}
#ResponsiveLink {
background: none repeat scroll 0 0 #FF0000;
display: block;
height: 30%;
left: 60%;
position: absolute;
right: 12%;
top: 37%;
}
I am relatively new to front-end dev so a bit lost as to how i can go about this. I created a container that contains a slider and some images. My supervisor has a huge screen so obviously there will be empty space at the bottom of the screen. So he doesn't want that. Instead he wants the container to be centered horizontally and vertically based on the size of the user's screen.
How can I do this properly with as minimal code as possible? I believe there is jQuery plugin but wanted to see if there is a better way or if doing this makes sense at all or not?
Due to the flow-based nature of CSS, without Javascript this can only be done if the vertical size of the centered element is fixed, by applying a position:absolute' andtop:50%` within a fixed container, and then use negative margin to offset the container. Click here for JSFiddle Sample.
Alternatively the same effect can be reached by using display:table-cell, but that's kind of messy and loses you a lot of flexibility. Sample already supplied in the other answer here so I'll save myself the effort :)
You can do it easily using a vertical-align property.
Since vertical-align works the desired way way only in a table cell, this trick with display property can give you the desired effect.
#yourDiv {
// give it a size
width: 100px;
height: 100px;
margin: 0 auto;
}
html, body {
height: 100%;
width: 100%;
padding: 0; margin: 0;
}
html {
display: table;
}
body {
display: table-cell;
vertical-align: middle;
}
See a fiddle with demo.
Try this:
HTML:
<div class="center"></div>
CSS:
.center {
width: 300px;
height: 300px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -150px;
margin-top: -150px;
background-color: red;
}
Demo: http://jsfiddle.net/WDth4/
Exactly Center an Image/Div Horizontally and Vertically:
http://css-tricks.com/snippets/css/exactly-center-an-imagediv-horizontally-and-vertically/
I have padding to the right of my archives and search page and I believe it has to do with my body element, however I'm not quite sure what is different on these pages are from the other pages on the site of which are all fine for style wise as they all use the same format. It's a wordpress website. As I said, it's only happening to this page and the search page and all others are fine, so I'm confused as to what it's doing.
html { font-size: 100%; overflow-y: scroll; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; background: url(img/BG.jpg) repeat; min-width:1024px; }
body { margin: 0px; padding 0px; font-size: 13px; line-height: 1.231; background: url(img/NAV-bg.jpg) top repeat-x;}
header { width: 960px; height: auto; margin: 0 auto; display: block;}
#container { width: 960px; margin: 20px auto; padding: 0 1.5em;}
aside { width: 260px; height: auto; float: left; position: relative;}
#main { width: 650px; height: auto; float: right; position: relative;}
#footer { width: 100%; min-width:1024px; display: block; height: 503px; background: url(img/FOOTER-bg.jpg) repeat-x; background-color: #821d20; position: relative; top: 100px; }
If you decrease the size of your window you'll notice that a scroll bar on the bottom of the page shows up and then the padding on the right starts to take shape. If you make your window larger that padding space is then gone and the scroll bar on the bottom disappears. Have I restricted my body tag in any way to have this happen?
I've looked through this one but I already have a min-width defined.
Website has strange whitespace on right side of the page when the browser is resized to a smaller window
In your style.css file at Line 108, remove the width attribute from the header tag to fix your horizontal scrollbar issue.
Fixed CSS:
header { height: auto; margin: 0 auto; display: block;}
For review, 3D View in Firefox browser shows the header as the gray bar with is the root of your problem. The other styles that create the text are not affected.
Tip: Right mouse-click the above image and view in new tab to see in original size.
Ah, if I'm understanding your problem correctly, it appears that the tag header, specifically its style width: 960px, is what is causing this peculiar occurrence. The containing div around the header, #main, only has width: 650px. As a result, the excess width of the header causes it to extend beyond the edge of the div.
The reason why it seems to be appearing as padding only at smaller screen widths is because the containing div around all that, #container, is centered by its margins - so the effects of the over-wide header won't become apparent until the browser is thin enough such that its right edge begins to overlap the right side of the header.
Rather than fixing this by just dropping the width: 960px from the styles of the header (which may mess up the site where this width for header tags is actually needed), I would suggest adding an overriding class to all offending tags, perhaps on the lines of .archive-header { width: auto; }. But I guess the solution is up to you, since you probably know the site better than I do.
I hope this helps! (I really do, otherwise you'd have read all this for nothing! Sorry if you did...) For the future, try downloading Firebug for Mozilla Firefox, which has a handy element inspector which will let you play around with the styles of elements to see what works. It should help you spot these kinds of issues on your own, so you can fix them quicker.