First of all I would like to thank you all for your answers all this time. I have found a lot of solutions from my projects through the site as a student as well as a working.
I search a lot before asking this question but I couldn't find a working solution.
Sorry for the title. Couldn't think a better one.
I try to develop a site and I have a problem with the header. The main page container has a fix size of 1024px and the content inside is restricted to 960px. Only the header and the footer takes the whole wight of the window.
I have two images: The first one is 2000x250 (the buildings behind) and the second one is 2000x58 (the languages with the houses).Let's name them img_A and img_B respectively. I want both of them to take the whole wight of screen depending the user resolution (like the footer) but scale it also to responding to the height.
The problem is that I want no matter the screen resolution is, the img_B to be centered inside the 1024px so the ES button will be at the end of main page (1024px) so the logo that is center with margin 0 auto; don't cover the houses.
Here some images to illustrate better what I am asking.
Wrong (1920x1200):
http://imageshack.us/photo/my-images/577/headerwrong.jpg/
Right (1680x1050):
http://imageshack.us/photo/my-images/20/headercorrect.jpg/
Here is my css code:
#header{
height: 140px;
width: 100%;
background: url(images/background_home.jpg) center center no-repeat;
}
#header .language_banner{
background: transparent url(images/header_en.png) right bottom no-repeat;
}
#header .logo{
display:block;
width:242px;
margin:0 auto;
padding-top: 63px;
}
and the html code:
<div id="header">
<div class="language_banner">
<div class="logo">
<img alt="athens insiders" src="<?php bloginfo("template_directory"); ?>/images/logo.png">
</div>
</div>
</div>
Thanks in advance
I don't quite understand what you're trying to achieve, but I think you want to try looking at (and adding!) the background-size css (and maybe background-clip) property to your #header (or wherever), after you define the background.
Note the support isn't there in earlier versions of IE, so you may need another work around if you're going for universal compatibility.
Related
Quick question:
How do I create a layout where all the elements' backgrounds stretch across the width of the screen, but the content stays narrow, let's say 1000px? I'm looking to come up with something like this:
https://themeforest.net/item/itcore-site-template/3638733
For the record, I know how to code, I just don't know what the best approach is to this. I'm sure there's a 'best practice' to achieve this and having built 100% width dashboards only, I never worked with it.
Any tips?
You simply combine two elements, one that will fit the window (on which you can apply some background and other styling that cover the viewport), and another container in the center of the page. I recommend you to use max-width to allow it to shrink on smaller devices.
<div class="section">
<div class="wrapper">
Some content
</div>
</section>
Then your CSS is as simple as
.section {
background: (...)
background-size: cover; /* stretch to cover the whole container */
}
.wrapper {
max-width: 1000px;
margin-left: auto;
margin-right: auto;
}
Take a look at CSS Background size property. You can specify a fixed value in units, for example:
background-size: 100vw;
which would occupy the width of the screen.
Thanks LeBen, that's what I was looking for. I ended up creating a wrapper class that can be used for all elements and is styled using individual classes. Inside goes content like header, main, footer etc. and these are scaledwith media queries according to screen resolution.
<div class="wrapper bgLight">
<header>
Header content goes here
</header>
</div>
Thanks again!
I'm creating a new website for myself, and as a photographer/videographer, image content is the first thing I want people to see on my page.
Here is my code so far.
HTML:
<div id="slideshow_background">
<img src="IMAGEADDRESS.JPG" class="slideshow" align="middle"/>
</div>
CSS:
#slideshow_background {
width: 100%;
left: 50%;
margin-left: -50%;
overflow: hidden;
text-align: centre;
z-index: -1;
position: absolute;
margin-top: -100px;
margin-left: -50%;
max-height: 700px;
}
img.slideshow {
width: 100%;
min-width: 700px;
display: block;
text-align: center;
vertical-align: bottom;
}
What I am trying to achieve with this, is what is done here: http://www.atcofficial.com.
As you can see, the image stays centred whatever the window width is. It also scales up/down depending on how zoomed in or out you are. This site is made with Squarespace, so I'm imagining it's some form of fancy javascript/jquery or something along those lines.
With CSS, I am able to get the image to either stay centred, OR to scale up and down, but not both at the same time. That's what I'm trying to achieve here. Is there away to combine the two so that this is possible?
Try using CSS background-size:cover;. Cover shrinks and expands to fit various window sizes, without distorting the image. If the screen size ratio is different than the image, than it will crop the edges depending on how you have it positioned (top, bottom, center, right, left, center). Keeping the image in proportion is the key feature of background-size:cover;. Because its a background and not an image, you can easily place elements on top of it.
Here is a JSFiddle Example you can play with. Expand and contract the window to see the background image adjust in size. The only code your are interested in is listed below. (The rest of the CSS in the example is for styling only, and to make the div display at 100% width and height).
background-image:url(http://i.imgur.com/OaE8VAj.jpg);
background-repeat:no-repeat;
background-position:center center;
background-size:cover;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
Follow Up
Yes, there are CSS3 slideshow galleries. Here is one that looks attractive, and is responsive: https://github.com/css-slider/image-slider. Here is a tutorial on creating a CSS3 slideshow from Smashing Magazine: http://www.smashingmagazine.com/2012/04/25/pure-css3-cycling-slideshow/.
You probably already know the information below, but what you have to check into before investing much time in the technology (CSS3 or JavaScript), is how the gallery will display on older browsers and handheld devices, and is there an easy work-around for these devices.
One technique would be to place the gallery in a separate div that can be hidden for older browsers/devices. Then use the background-size:cover, or another technique, as a fallback. Also remember that IE10 and IE11 on a touch screen can be glitchy, and need testing as well. Without going to far beyond the scope of your original question, there are several good ways to detect devices/browsers including Modernizr, Matt Stow's Layout Engine, Categorizr.js and Internet Exlporer's Conditional Comments.
Side Note: The example website listed in the question displayed a large single image as background, and if there was a slideshow, it was not working on this end using the latest version of Firefox.
I am trying to build a "mobile first" web app. And in doing so I am using the meta attribute "viewport" to help scale the elements appropriately.
But I want certain elements to be fixed size. For example I want the div below to be 598(h)x450(w).
<div class="note">
<div class="note_text">Its my birthday, and I have treated myself to a very nice gift. </div>
<img class="sticker" src="/assets/sally/sally_04.png"/>
</div>
.note {
margin-left: 20px;
height: 598px;
width: 450px;
}
.sticker {
width:300px;
height:300px;
position: relative;
}
On the iphone this resolution should technically fit in a single screen (when scrolled down to the top of the div element). However the div element is rendering longer than expected. Why?
Am i missing something super obvious?
Well, can you be a bit more specific like what scaling have you given in the meta tag and the actual size of the image?
But till then, a work around can be to give width and height in '%' instead of 'pixels' in the sticker class. Make sure you maintain the height-width ratio lest the image looks stretched and dis-proportioned.
Something like:
**.sticker {
width:65%; /* or keep width:100% and don't specify the height*/
height:40%;
position: relative;
}**
Please check your windows display Scale and layout settings. I had mine at default 125% and everything rendered on the browser were enlarged accordingly. Took me a couple of hours to figure this out and it could be a possible root-cause for your problem too. Not ideal when you wanna develop a pixel-perfect UI.
Cheers!
I'm quite new to css, divs and everything in between.
So, i created a basic layout for my band, didn't want a bunch of useless links like bio, merch store and all that. So i just decided to arrange separate spaces for our video, a player and a facebook window.
I managed to create a div for the youtube iframe, but i can't get it to stay in its place when i resize the window. I've tried changing the positioning a bunch of times to absolute, fixed, relative...etc. No luck.
Keep in my mind that the layout is nothing fancy, just something quick to look at, and get some basic info of the band.
Here's the link: http://silentcellmusic.com/test.html
Thx in advance!
First you should remove the image from the markup, and set it as background of the body, or html, for example. Set it to position top center.
Then, set the div #wrapper to { width: 960px; margin 0 auto; }. This way it will always be in the center of screen, so as your background.
Third, create four divs:
social
listen
video
Float them to the left, set their widths and margins, accordingly.
Finally add a div for your footer (social links and mailto).
Best of luck.
What you need to do is use positions. What fixed does is determine the position in relation to the window (or browser) top left corner, so it will always stay in the same place no matter how you resize it. The right way to go is to use absolute and relative.
First you need a relative container. Your image is already centered, so you could do something like:
<div id="container">...</div>
#container {width:960px; margin:0 auto; position:relative;}
Then you want your video to be in an absolutely positioned div, but INSIDE the relative one. SO your html would be:
<div id="container">
<div id="videoDiv">
your video here
</div>
</div>
And your css for the videoDiv:
#videoDIv {position:absolute; top:200px; left:200px; }
Look por css position online to understand how it works, it's actually quite simple but you need the right structure. In your case, your center tag should be the one with position relative, but make sure you change it to a div, otherwise some browsers will give a validation error.
Having said that, there are a lot of things you can do to improve your site. Once you know how to handle positions, you could re-do the layout using different images (so it's faster to load), and you can use actual text. This is quite important for search engines to recognise your site, so try at least to have keywords spread around.
Here is your CSS for the video div:
#apDiv1 {
position:absolute;
left:747px;
top:535px;
width:400px;
height:223px;
z-index:1;
#wrapper {
margin-left:auto;
margin-right:auto;
width:960px;
}
Did you mean to declare width twice? Is the width:960px throwing off your positioning?
Get rid of the <center> tag altogether and change the css for #apDiv1 to:
#apDiv1 {
position: absolute;
left: 597px;
top: 489px;
width: 400px;
height: 223px;
z-index: 1;
}
Maybe this is not the right stack to ask this question, let me know please if I have to change it.
Basically I'm having a problem with a css background that doesn't take the hole height of the page, and since I have a background image repeating, it doesn't look good at all.
The code structure is something of this kind:
<div class="bg">
<div class="wrap">
<wordpress loop>
</div>
</div>
The background is out the wrapper cause the image is bigger and is mean to cover the 100% width of the page.
CSS:
.bg {
width: 100%;
background: url(imagelink) repeat-y center;
height:???? I SET 500px for display the sample of the issue.
}
.wrap {
width: 960px;
margin: 0px auto;
}
The main line is that the article can be different size, in this sample http://www.villa-frankrijk-provence.nl/de-provence/de-provence-1/ would be something like 3300px, however in other pages it's something like 500px, so I cannot use a fixed number.
I would like the background image to get the hole height, any suggest???? I will really appreciate your help as always :)!
Regards
Remove the height declaration on .bg and add this after #page-text-single (i.e. after <wordpress-loop>) in your HTML:
<div style="clear:both;"></div>
Floating items won't cause their parent elements to resize, but you can force them to do so using a non-floated element directly after the floating content.
Dont specify a height or try height 100%.
Not sure this is what you want:
.bg-contact3{overflow:hidden;}