I am trying to replicate a page http://www.haylockpittman.co.uk/ onto http://www.haylockpittman.co.uk/new-refurb-publish/ but it can't get the images at the top to align correctly.
They call a div id 'outer' for the sizing but it appears correctly on te home page and not on the new page.
How can I change it so it calls the correct code on the new page without messing up the original page.
Thanks in advance.
Wordpress adds a series of utilities classes to your <body> tag; in your case the CSS targets .home #outer while the second page you linked is not the home page and is added other css classes. In order to make this work, you can change your css (style.css::976) selector from
.home #outer
to
.page #outer
this will target both your pages (as your home gets the page class as well). You can decide a different selector, perhaps just #outer, if you want to make sure that it will work also on articles.
That really depends on your goal.
Images have a diffrent class applied to them, causing resizing issue and the div is 600px instead of 400. I would change the page template to match all used classes/ids for all elements and make sure they are the same for both the homepage and this subpage.
Related
So I've been tinkering with this site, and I've got my work cut out, but right now I cannot for the life of me workout why content is displaying beyond the width of the window.
-redacted-
I believe it's something to do with bootstraps row/col guttering but have been unable to fix it, even with dreaded '!important' use.
Furthermore i note that a carousel button is extending beyond the width of the screen.
This basically just makes the site flimsy and seem broken.
Any css whizz out there able to give me some tips of this shit?
If the problem is with one specific tag (e.g. a <div>), add a class/id to that div with the following CSS: .classname { overflow-x: hidden; If it's the whole page, you might want to do that for the body and HTML tag. Note: When you do this last thing, people aren't able at all to scroll horizontally. This is a but user unfriendly, so you want to use that only if it's the only way out in my opinion.
have a small problem with facebook comments. For some reason my theme is not very compatible with the plugin.
If you click to inspect the element, it will fix on it's own then (no idea why).
Also I would like if you add more text into the comment box the content below the box doesn't move down. So is there a way to align the box correctly only with the css? ( I have tried 2-3 different plugins, but I had the same problem)
Website: http://www.viskasseimai.lt/
P.S. it works great on a singple post, but something is wrong inside the home page...
Plugin used: https://wordpress.org/support/plugin/facebookall/page/3
The problem lies in the absolute positioning of the .blog-grid elements. The position and top values are explicitly declared and set as inline styles before the facebook comment box is appended to the element. So these calculations don't factor in the additional element because they occur before it's introduced.
CSS
.blog-grid.element.column-1.masonry-brick {
position: relative !important;
top: auto !important;
}
The above rules will over-qualify the inline rules for every instance of the element since the !important declaration has been used.
If you want these rules to only apply to the home page, add .home as a preceding selector before .blog-grid, same methodology would apply to archive pages or specific taxonomy type pages.
I have an HTML source code content which comes from a WYSIWYG editor.
I need to display that content, but spiting the result on multiple div elements (pages).
For example:
One A4 page (a div tag) has aprox width: 798px and height: 1128.6px
If the html content inside that page is bigger in height than 1128.6px, the "overflow" should be displayed on another page.
I am sure is possible to do this programmatically, but i am hoping for a css property, similar to columns property
This is coming with CSS Regions-
With Regions, you can use CSS properties to flow content into existing
styled containers, specifying any container order you choose,
regardless of their position on the page. Create visually stunning
responsive layouts for mobile and desktop content today.
See http://html.adobe.com/webplatform/layout/regions/
Support remains limited though, and this probably doesn't solve your requirements given dynamic content lengths.
This is almost certainly going to require either a server side or client side scripted (JavaScript) solution.
I am building a website using a template, which have an stylesheet but it keeps interfering with things I add like Google Maps or other custom things in my website. How can I make the tag
<div id="map_canvas"></div>
not inherit any styles from the stylesheet, so it would only have a height and width.
I am forced to put it at the very end of the document, then use margin-top: -400px and margin-left: 350px to position it.
Try not inheriting this page from the main page where all other CSS are loaded.
Load only CSS file, that you want to apply it to this page.
Use a class on top of your div. For example, if you have a div for google maps the css that you need would look like:
#map_canvas.classNameHere{
position:absolute;
height: whatever you want;
left: whatever you want
width:whatever you want;
}
You define the div, then put .classNameHere or whatever you want the class name to be. Then, in the html, you would tell the stylesheet that this div is part of that class.
<div id="map_canvas" class="classNameHere">
that way, this div will only take the attributes from the defined div in the stylesheet with .classNameHere after the name of the div. If this didn't answer your question, or I misinterpreted it, let me know. Your question is a little bit ambiguous. I don't really know what you already have or what exactly is interfering with it. If it is another div with the same name, then this will probably work. If it is a stylesheet that is constant throughout the whole website, then you really should have a stylesheet for each page, but it will work as long as you make the div with the class a completely new div for each page, so you will have say 4 definitions of the div, each with a different class name. If it is an overall definition such as
*{stuff here;}
then I forget if the class will help. It may just be safer overall to take what is in the
*{stuff here;}
and add it to each div that you want individually.
If you need more help about classes, check out http://thenewboston.org/watch.php?cat=43&number=5 It's a tutorial on this from thenewboston.org. If you need to, start with the beginning of the videos it's only a couple into this set. (It's in the HTML5 tutorials)
If you're having problems positioning it where you want it, you may want to try to put it inside another div. For example, if you wanted it in the sidebar, you would have this CSS for the sidebar
#sidebar{
position:absolute;
left:70%;
top:20%;
}
and the same CSS above for your div, then your HTML would look like this.
<div id="sidebar">
sidebar content here
<div id="map_canvas" class="classNameHere">
any code you need for google maps here.
</div>
</div>
2 more things. First, you should use percentages instead of pixels, so that it will fit on any size screen, unless you're padding the website on each side so that it is all centered. Also, I read your bio on your profile and I'm in the same boat as you. I'm just teenager who likes to code, and we all get confused, so if you need me to explain it more, or I misunderstood your question, let me know.
I'm giving new life to a boring web page. Please see what my template should look like here: Correct body page
Pretty page!
Now - when I go to add my existing background / menu/ footer - I am somehow loosing my container image -
/* structure */
.container {
background: url(/img/bgcontainer.gif) repeat-y;
margin: 0 auto;
width: 702px;
position:relative;
}
I removed position:relative; (but it still failed). Please note I'm having to use a web content manager only because I have no other access to site. For this reason - my css sheet is in the middle of the page.
This is how the page looks now w/missing bgcontainer.gif:
Current page
Please help - thank you
With the help of firebug I can see that the html structure of the two pages is quite different. On the "good" one you have a ".container" div as a wrapper of most of the content, you can see it here with the black border:
But on the "wrong" one you have a "#container" div in the same position and another ".container" div further down, nested inside that "#container", and it wraps that header only.
The "#container" div of the "wrong" page spans the whole witdh.
By the way, I like your design.
EDIT:
This is the look of the page with float: left; and left:107px; added to the ".container" div.
Here's your biggest problem:
The structure of the HTML pages is MUCH too different to pin this problem on one single line of code. In the "old" page there are 5 stylesheets including your own; in the "new" page there is only one stylesheet.
The reason your old and new pages don't look the same when you add your default.css stylesheet is because the old page has FOUR other stylesheets also applying styles, many of which are overriding your own.