I've been scouring the forums without a clear solution to my problem so I figured I'd give stackoverflow a go. In short, I need to know how I should go about positioning the elements on my site. When maximized, the images appear fine with the iframe as it should be. Upon resizing the browser, my sliced images shift to the left and distort my layout. My question is, should I use and div within a div to position my elements or is there another method I should be searching for? I know that I could possibly use CSS to position things but I would like a clear answer if possible as I've already spent countless hours on this. Thank you and my apologies in advance if I've left out pertinent information.
http://hrsolavei.dx.am is where the site is located, please take a look and give me some feed back. Thanks again.
If you want to position the content of your website using an iframe like you have it right now, and the layout in a separate table, then you need to give your iframe the css of position:absolute; right:50%; Then, for the div surrounding your iframe, the css should be overflow:visible; position:absolute; left:50%;
Now, I implore you to please research web development best practices, as they will make your website much easier to develop, and easier to change later on. The big ones that I noticed are that you should try using divs for your layout instead of tables. Tables are meant for storing information much like the image in your iframe does. You should also look into organizing all of your styles using a css file.
Related
I've just started looking into CSS3 and HTML and I wanted to use it for a University project that asked us to make an ASP.NET website, but I can't get the height of the content to fill the 100% of the browser... It's actually not even taking into consideration the content of the default.aspx.
Tried a bunch of stuff on other questions around here, but most times they either don't do anything or mess the whole positioning of everything.
Was hoping you guys could give me some tips on how to fix it. Here's the fiddle: JS Fiddle
Thanks in advance.
You need to provide the form also with height: 100%;. Check out this fork of your fiddle.
http://jsfiddle.net/tushar2289/a5Bhv/1/
Basically I'm very very new to .css and HTML and I have been using Adobe Muse or word press to make sites and have been able to get by. Well I have been integrating a shopping cart system called Foxycart into one of my sites and I can not for the life of me get the header, shadow under the header and middle image (repeating pattern) to stretch across the screen. Adobe muse does this by using JavaScript, but when I cache my template for Foxycart the JavaScript no longer works. Which is fine I would like to use .css to stretch the header and middle background anyway. The problem is I can not figure it out. I hate to ask for help but I have spent over two days trying to figure it out and still not luck. I specialize in graphics, so if anyone that helps me out needs anything photoshop'd or what not just let me know. For my own sanity to need to figure this out!
Code is cached by Foxycart located here: https://shavemate.foxycart.com/checkout.php
Some browsers add padding around the viewport, so in order to get a true "full width" effect you need to make your header have a absolute position along with top:0; left: 0. The tricky thing here in my experience is getting the width to 100%. With an absolute positioned element, 100% width seems to go off the right side of the screen. It may have to be done with javascript or someone here with more mastery of CSS can guide you.
in site properties, layout you can make margins 0,0,0,0
Also, if you want something to be 100% width just snap the edges to each side of page browser.
hope this help.
yd.
I'm trying to make a sample web page to get acquainted with HTML5, and I'd like to try replicating Facebook's page layout; that is, the header that spans the entire width of the screen, a small footer at the bottom, and a three-column main body, consisting of a list of links on the left, the main content in the middle, and an optional section on the right (for ads, frames, etc.). It's neat and displays well in multiple window sizes.
So far, I've tried to accomplish this with a <header>, <footer> and a <nav> and <section> block, respectively. There's a few anomalies with the page, however. The footer (which contains a simple text block with copyright info) appears at the top-right of the page below the header when the window is maximized. On the other hand, when there isn't enough space to display everything in the window, it places the main body text below the section. In other words, it keeps moving elements around to fit the window.
Could someone please tell me how I'd achieve the look I'm going for? I've tried playing around with a few CSS attributes I read about through Google, but I'm pretty sure I don't know what I'm doing, and could really use some guidance.
Thank you!
This isn't an HTML5 question as much as it is a basic understanding of HTML and CSS. If you're going to jump in to web dev you're going to need to understand basic CSS like floating etc. I would recommend some tutorials on YouTube or NetTuts. Just play around with a few divs, move them around the page, manipulate them with CSS and it will start to come together. Then making a three column layout with fixed header and footer will seem like a piece of cake.
Floating Divs w/ CSS
I find CSS to be super hard. It is quite difficult to make a page that looks good and works on lots of different platforms and browsers. You may find it easiest to use a css framework, such as Bootstrap.
Drop that into your website, and use it to make your layout. Use the dev tools for your browser (Firebug for firefox) to examine the styles that are being applied to the various elements. Modify the styles to suit your needs.
HTML5 doesn't really give you a page layout for free. The elements you mention (header, section,etc) are used to create semantic pages, rather than to specify how they should be displayed.
Can't help much without your code. But I am sure it is because of float issue. add this CSS property to your footer clear: both
Hope it might help.
I'm not sure if you're trying to make yourself a little hack, or if you're looking for a complete library that will do all this for you, but if you're looking for the latter, I recommend Twitter Bootstrap, which is a cross-platform solution for implementing many HTML5 features, and even resorts to fallbacks for non-modern browsers. The only drawback is the requirement of jQuery in order to initialize the components that are responsive*. However, this is optional if you are not looking to implement these features. The responsive design, amazingly, does not require javascript since it is pure CSS. Hope this helps!
*Edit: meant "interactive" there, not "responsive."
The layout in question is here: http://www.davedaranjo.com/media.html
This is probably an issue in standard positioning with css, but I've tried every positioning combination I can think of to achieve this:
http://i.imgur.com/y1qRU.jpg
Every time I try to move the player anywhere on the page, it positions itself at the bottom, even below the footer. I've even tried putting the content in a table with the links and video in the left td and the player in the right, but the player won't even sit in the table. I've also tried a number of positioning tags in the css file and at best, it will move if I give it a fixed position, but because the rest of the layout isn't fixed (and isn't on the rest of the site), that's not a viable solution.
I realize this is probably something fundamental that I'm missing here, but any suggestions would be extremely helpful.
Thank you!
Had a quick look at the source of that page and saw quite a few things i would change, so i will not go into detail but maybe this will get you started.
You could try floating your main div (look for <div align="center"> in your code) with css float: left; and also make your player inline-block like so;
.ttw-music-player { display: inline-block; }
I understand this question is redundant but I was unable to locate an answer from my searches on here and other online forums. Here is my situation.
http://www.ci.fayetteville.nc.us/CityCommon/port/contact.html
On that page I have a 'separator' line that is to extend to the bottom of the page. Now, I have thrown in plenty of break tags to stretch the page. This shows that the background image (used as a footer images in a way) stretches to the bottom of the page fine. (That image is contained within div#content.
My question is how can I additionally get my div#rightContent to stretch just the same way?
I have my html, body and container heights all specific at 100% as well as another container div called #content. I am pretty stumped.
At the link you can view my source and hopefully point me in a good direction to achieve this. Any help would be greatly appreciated. Thanks.
Make one background image that contains both the outer borders and the right-column divider. This technique is called "faux columns".
See: http://www.alistapart.com/articles/fauxcolumns/ and
http://en.wikipedia.org/wiki/Faux_columns
There are various CSS hacks to get equal column heights. The only one (IMHO) that feels 'standard' is to use display: table, but that doesn't work in IE (of course) so makes it less ideal.
As such, I find the solution that works best is a bit of JavaScript. You are already using jQuery so that'll make it even easier. Here's one example solution:
http://www.cssnewbie.com/equal-height-columns-with-jquery/