I've got an issue at the moment where the text on my webside seems to align to the left when a user first loads the page. After they refresh or go back to that same page (in the same tab) then it works fine.
At the moment i've got a div with the website logo in it and a div with the text in text to it. I think the problem is related to the logo not loading quick enough, causing the text div to essentially ignore the div with the logo in it.
Is there any solution available that will prevent this by either ensuring the image is loaded before the CSS is rendered or a solution that will ensure that the divs remain in the exact same place even if they don't have any content in?
(CSS Sample)
div.topbar div.logo{
margin-left: 15%;
margin-top: 1px;
margin-bottom: 1px;
background-image: url("logo.png");
background-repeat: no-repeat;
height: 100%;
}
div.topbar div.navigation{
display: inline-block;
position: absolute;
top: 0;
margin-left: 25%;
font-family: 'Open Sans Light', sans-serif;
font-size: 15px;
margin-top: 10px;
}
Specify width and height of your logo container.
div.topbar div.logo {
/* other stuff */
width: 400px;
height: 100px;
}
This is the main reason why it is advised to specify the dimensions of the image in HTML itself.
<img width="..." height="..." src="...">
The above code will keep your layout intact even if there is a delay in loading the images and/or the CSS files.
More info:
Should I specify height and width attributes for my IMGs in HTML?
Related
I have 2 images left and right from center which are placed nicely, but when the screensize is < 1920px, a scrollbar is created because the right image is going "out of the Site". I just want it to be cut to the screensize / go over the side of the screen without widening it.
CSS of the images (simply placed in the body):
#fans_l {
position: absolute;
text-align: left;
margin-left: -955px;
margin-top: -228px;
z-index:3;
}
#fans_r {
position: absolute;
text-align: left;
margin-left: 399px;
margin-top: -228px;
z-index:3;
}
Body css:
body {
height: 100%;
width: 100%;
margin: 0px;
background-image:url(p/back.jpg);
background-repeat: repeat; text-align: center;
}
In this case, there are a few things you can do. The first two that come to mind are as follows:
You can declare in the body css that the overflow-x property be set to either none or hidden, effectively cutting off your excess pixels. Though, at a fixed image size, this may not be desirable on smaller browsers. Keep in mind that many people have monitors smaller than 1920px.
You can use a nifty little tool present in CSS3 called Media Queries. With them, you can change css rules based on a monitor width or height. Using this method, you can ensure that it appear full on all sizes of browser windows.
I am trying to add an image "logo.png" to the background of my page in the top right positioning. I am using css to do this and nothing else... here is what i have:
body {
background-image: url('logo.png');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: right top;
background-color: #E6E6E6;
font-family: Arial;
font-size: medium;
}
I'm not sure what I am doing wrong, because no image is appearing
Check the file path where logo.png is located. Is it in the same level as your webpage?
here is a fiddle http://jsfiddle.net/z7d8kcLz/ that works. I really dont see any problem with your code
only change in your code is the link to dummy logo image
body {
background-image: url('http://www.hessionphysicaltherapy.ie/wp-content/uploads/2010/11/dummy-logo1.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: right top;
background-color: #E6E6E6;
font-family: Arial;
font-size: medium;
}
Make a separate div for the logo, then experiment. Technically you should figure it out via trial and error. Load your page on google chrom, right click>inspect element and you will have a console like bar where you will have the srouce code. On your left find the div you are using and add various elements to it.
Try this:
Put your logo inside a DIV and put it right before the closing body tag.
.logo-div {
Width: 150px; /* Adjust as needed */
height: 150px; /* Adjust as needed */
position: fixed;
right: 0; /* Adjust as needed */
top: 0; /* Adjust as needed */
z-index: 1; /* Adjust as needed */
}
Evan, with CSS you need to create building blocks. In much the way you would draw on a piece of paper you need to tell CSS where it needs to place elements. Sounds simple, but given it if 3D and your don't see the 3D it makes CSS painful. Therefore it it were me I would reap elements in different html tags etc.
HTML
<body>
<div class="brand-group">
// use div tag for CSS background img insertions
<div class="brand-logo"></div>
</div>
// etc
CSS
body{
// width and height are important in the parent element. Without it CSS will just collapse
// going back to blank sheet of paper analogy. If you don't tell CSS the dimensions of the paper
// it will assume zero and start to build the document dimensions based on the elements you create
width: 1000px; // or use 100% or
min-height: 2000px;
// ... other body styling
}
// I like to use a wrapper as I can then place everything brand related into the wrapper
// e.g. logo, tagline, etc. I then position the wrapper and following that the elements within the wrapper
div.brand-group {
// I don't like static or fixed as you cannot use float, etc,, but I get why it is done
// position attribute is essential as you telling CSS who you want to position the logo relative to its parent
// in this case it is body (1000 x 2000)
postion: relative;
float: right;
// alternatively IF you use fixed or static then use this approach
// left: 100%
// left-margin: -215px; // adding 15px right gutter
// you can do something similiar using top if you want to push to top, but lets assume this is your first html element
width: 200px;
height: 100px; //you are not building the group size
top: margin: 15px;
}
div.brand-logo {
// easier to position logos using LESS or SASS as you have functions
// in pure CSS the easiest way to center the logo would be to look at the image dimensions'
// lets say it is 100px x 50px
left: 50%;
margin-left: -50px; // half the width of the image
top: 50%;
margin-top: - 25px; // half height
background-image: url('logo.png');
background-repeat: no-repeat;
background-color: #E6E6E6;
font-family: Arial;
font-size: medium;
}
I have the following:
HTML:
<div class="banner-success">
<span class="banner-text">
You were successful! Yay! Some long reason what your success
implies goes here.
</span>
</div>
CSS:
/*Add future banners to this style, this is generic banner styling*/
.banner-success
{
background-position: 5px 5px;
background-repeat: no-repeat;
min-height: 42px;
padding-left: 47px;
margin-bottom: 10px;
}
/*Create a new entry in this section for each banner, with appropriate image and
colors*/
/*----------------------------------------------------------------------*/
.banner-success
{
color: #004400;
background-color: #DDF2E4;
background-image: url("../Images/Success.gif");
}
/*----------------------------------------------------------------------*/
.banner-text
{
position: relative;
top: 5px;
}
This allows for a standard banner, each with an image and arbitrary lines of text, assuming a consistent image size. My issue is that the div is being sized as if the text within isn't being pushed down, and so the bottom line of the text reaches outside of the div.
Is there a way to tell a div, or any container element, 'be as big as your constituent elements are, AFTER they've been relatively positioned to you'?
Apply overflow:hidden to the .banner-success.
I made a couple of tweaks to even out the padding around your text (and subbed a background
image so you could see it working w/ an image in place):
http://jsfiddle.net/qTsgL/
Cheers!
When i set my footer to relative it drops off the page and end up needing -1800px to get it to the bottom of the content but that then leaves a massive white space at the bottom what can cause this to happen? And what can you do to fix it?
#footer {
background-image: url(http://***.***.***.*/spvfooter.png);
background-repeat: no-repeat;
position: relative;
top: -1280px;
left: 550px;
width: 1025px;
height: 330px;
color: white;
line-height: 16px;
text-align: justify
}
Make sure your Divs are all closed.
Validate your code and use a css debugger to make sure all floats are cleared.
if your working with more relative elements and positioning(however) them you should remember that their static point (with width and height) contains. and if you put another element beneath it will be all their height down the page
I'm trying to make a website with a header that repeats along the entire page width, with the website's name centered in the header, and a logo slightly offset from the website name. If the screen width is too small to display the entirety of the logo, I just want it to cut off the logo to the right, otherwise the entire logo will be displayed (i.e. the monitor/window is big enough. What I don't want is to float the image to the right. I want it to, more or less, be absolutely positioned near the title.
However, I can't figure out a way to do this. I can't use overflow-x or overflow-y (because of browser support) and the mark-up i currently have just widens the window with a scroll bar to accomodate the entire image (see screenshot).
Here is the screen shot
http://img691.imageshack.us/img691/3188/screenshot03062011.jpg
Here is the mark up and CSS:
<div id="header-wrap">
<div id="header">
<img src="title-card.png" />
<img id="this-chick-logo" src="this-chick-logo.png" />
</div>
</div>
--
body
{
background: #dfb1e4;
padding: 0px;
margin: 0px;
}
#header-wrap
{
background: url('header-bg.png') repeat-x;
width: 100%;
height: 291px;
}
#header
{
margin: 0 auto;
width: 1000px;
text-align: center;
}
#header img
{
margin-top: 105px;
}
#header img#this-chick-logo
{
margin-top: -75px;
margin-left: 680px;
overflow: hidden;
}
Thanks.
Add
overflow: hidden; to #header-wrap
Dont put it on the image.
overflow: hidden; either needs to be added to #header-wrap and possible removed from the img#this-check-logo. Also if the girl likes to push off to the right and some of it gets cut off in the overflow and you don't want that I'd move her a few pixels at a time back towards the left until you get it a way you like it. If you don't mind a little cut off just leave it and only add the overflow: hidden.