My website is built, (graphically designed) to be compact. Because my background will not look good on repeat, fixed, or with a white/black gradient towards the bottom. The thing is, I need to have a fixed content area, because of the graphical nature of my site. A box, which has to remain the same size, at all times. So, my question is, can I use wordpress, in such a way, that I will get a sort of iframe, within my content area, without the content area dragging on for how long the content is ? Let me show you an example of what I want : http://s15.postimage.org/obk0ivffv/2352366d.png
Can this be done, in wordpress ? Through CSS or something ? Thank you.
Just wrap your content in a div, and set a max-height and overflow-y:scroll on that container with css.
Edit: fiddle example
http://jsfiddle.net/Kncy6/
Related
I know little to nothing about HTML or CSS (but I am trying to learn little by little).
I am currently working on my professional portfolio and I'd like to break the website up a bit better than I have it now now (that is, with horizontal lines after each section). I've designed the website so that it is a one-page style site. However, it would be nice to change the content background for different sections of my resume, the about me (which I know needs more work, I hate talking about myself lol), and the contact me parts of the site. I'm thinking something along these lines, but much simpler.
I'm currently running Wordpress 3.8.1 and using the Highwind theme. I achieved the scrolling action with the Page 2 Scroll ID plugin. What you should be aware of is that all the content on the site is on a single page and the menu buttons merely point to different locations on the page by the way of divs. See this tutorial for a better explanation.
I'm not sure you're going to be able to get this happening with the Highwind Theme, or at least without some heavy customization of it.
The way the types of sites you're talking about work is that each section of the page has a 100% wide div with a 1255px wide div (the inside div could be anything really as long as it's not 100%) the inner div is centered inside the 100% wide outer div.
Here's a very quick codepen example...
http://codepen.io/catchlightWeb/pen/tpKrG/
For your example, instead of the SectionOuterOne and SectionOuterTwo classes having different colors, they'd have different background images.
Hope that helps.
I'm using Drupal. I have added a sitename and slogan to my kickstart sub theme which is a subtheme of omega. i then added a telephone number through the branding.tpl.php file. When I resize the window, the branding text moves down and behind the rest of the elements on the page - it doesnt push everything else down like i would like it to.
The site I am working on is www.mediamatterstechnology.com, please could someone give me some suggestions on how to fix the responsiveness of this branding section.
What I would like to happen is that when you resize the window, the branding section moves down as it currently does, but pushes everything else down with it, rather than disappearing behind other items on the page.
Thank you so much for any help with this
Your first problem is that <hgroup class="site-name-slogan"> has a specified height of 150px. Changing this to auto allows the text to expand into the space it requires.
This introduces a second problem though, in that the absolutely positioned menu widget interferes with it. How you solve this could have design implications though and there any many possibilities.
One solution is to force a bottom margin on the hgroup when the design is in the mobile version of the layout with the following CSS rule:
body.responsive-layout-mobile hgroup.site-name-slogan { margin-bottom: 40px; }
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 have created a layout using DIVs/CSS. I have attached an example image and links below which shows how I would like things to be organized. Within the header, there is a logo and a menu which are cumulatively 1000px in width. The feature, content, and footer sections are also to be 1000px in width. However, the actual background images for ALL sections are 100% in width and are repeated horizontally.
Below is an example of what I want to do:
What I have actually put together so far (in terms of the design) can be viewed here: http://ohachem.com/2/. This is what I would like to follow. The CSS can be viewed here: http://ohachem.com/2/style.css
What is the best way to accomplish this? As you can see, the text in the "feature" section does not align completely in the centre. I've tried using clear:both, overflow:hidden, and several other methods, with no luck.
The "misalignment" of the "featured" text is caused by the floating logo. Because the float hasn't been cleared and extends outside of your header, it is causing that text to flow around it. Adding overflow: hidden to your #header element will correct it, but there's other ways to clear floats without adding extra markup.
Alternately, you could just make your logo the same height as the header. Right now the height property is set to the same value, but the logo has some extra padding, which is causing the overflow.
The website you're pointing to uses a liquid layout, here's a bunch of examples: http://www.dynamicdrive.com/style/layouts/category/C13/ .
One note, on your example, there's no positioning attributes that I can discern, a large part of making a layout responsive is ensuring it looks consistent across all browsers & screens.
I would Suggest you to use CSS3 Media Queries rather than Script for the Responsive/ Adaptive Web page design.
Please have a look at this
These do not process a lot, hence Light weight and most modern browsers and Devices support CSS3 hence a convenient and reliable Option.
I am seeking help with trying to fix my background image fill issue. I wanted to have a sticky footer, which I finally figured out, but now if I view my site in a smaller window and then scroll down, my background image disappears. I understand that this is due to my height settings being 100% which makes my image be based off of the initial viewport size, but I can't quite seem to implement any kind of fix.
Here is the site I am working on (still very much under development): http://student.plattsburgh.edu/stipl001/index.html.
The problem is best viewed when looking at this page in a small window: http://student.plattsburgh.edu/stipl001/resume.html.
I have read many, many posts on various sites trying to figure it out (including this one: CSS: background image does not fill when scrolling), but I am not having any luck. I tried setting all the different properties for background in css that I could think of, including some of the newer ones. Then I experimented with the overflow property, but it just hides all of my text or creates a weird scroll-bar that makes my text scroll up over the header. I also tried moving my page background from body to html and my container background from container to body, but it didn't change anything, so I must be doing something wrong (perhaps the fact that I have the two background images to deal with?).
I'm just a coding newbie and have been teaching myself as I go along, so I would really appreciate specific suggestions on what method of fixing this would be best for my site, and how I can go about implementing it. After spending about 10 hours straight on this one problem, I am at my wits' end.
Thank you so much!
just change min-height:100% to min-height:1092px (the height of the image) and you'll be fine...
EDIT:
previous answer was a bit too quick, after having a second look on the code i noticed the error is caused by the floated columns: if you float an element, the container element will not inherit the height of the floated element - that's why the height was set to 100% of the initial window, and was not expanded if the content column got longer.
This can be fixed by adding an extra element in #container, after #rightcolumn, with clear:both on it - this will force the parent element to take over the height of its contents.
See http://jsfiddle.net/uS7Ba/1/ for a simplified example, including improved fixed footer.
Hope it helps...