I am working/designing the front-end (working on the layout html+css, later will use php, mvc pattern) of a website. The website has a header, body, side menu and a footer The layout is ready.
There are a few forms which are unusually long/huge since all fields are necessary and I could not make them any shorter. The form opens in a new page.
Not to scare the user away I am planning to downsize the header on the form template (the design change will only apply to the form templates) and get rid of the footer completely.
I tried looking a few places but did not find how to go it done. In short, I want the site to have all block i.e. header, body, footer but when it comes to the form I would want to downsize the header and remove the footer to make the form look sleeker.
Is there a way to do this?
Note: I post no code because I have no problem with the code but the concept.
You can use display: none for the footerelement in CSS rules that only apply to this page (for example in a style tag in the head of that page).
Concerning the header, it depends how it is built, if it has a logo, background image, text, menu, whatever. In general you could reduce the height, make the logo smaller, hide parts of the text in there etc.
You can also done this thing using angularjs
ng-include
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body >
<div ng-include="'header.html'">
</div>
<div ng-include="'footer.html'">
</div>
</body>
</html>
Make sure the body of the page has a class, for example .no-footer .small-header or .form-page. and then in your CSS stylesheet, use something like this :
body.no-footer #footer{
display:none;
}
body.small-header #header{
height:50px;
/* or whatever you want to apply to make the header smaller */
}
Related
I'm new to CSS (started looking at it yesterday!) so this is probably a very simple problem and hopefully someone will be able to help.
I can't seem to get any text to appear in the margin boxes of a print-formatted page.
Below is a very basic HTML snippet that should put "There should be something here!" in the top-left margin box and "This is the body of the page..." in the main page area.
<HTML>
<HEAD>
<TITLE></TITLE>
<STYLE type="text/css">
#page {
#top-left{
content: "There should be something here!";
}
size: A4 portrait;
margin: 50;
}
</STYLE>
</HEAD>
<BODY>
<P>This is the body of the page...
</BODY>
</HTML>
The body text appears but the margin text does not.
My ultimate aim is to create automated test reports so I need to have identical headers and footers for multiple pages and will fill the main page area with the test data.
Thanks in advance,
Pete.
#top-left is not supported from all engines.
See the anser on a simulare questions: CSS Paged Media Contents Issue
The generic recommendation for you would be to go through some html and css tutorials, css tricks (some methods and technics might be deprecated) or better to use official references alike MDN or official W3C.
If you find this extremely tricky for you, and you still feel the need, you may use HTML editors with WYSIWYG components, they will simplify the start for you.
We're implementing a Muut forum in our site, and have successfully embedded it into a coding block in the body of the page. However, when logged in as an admin, the sidebar of the forum takes on additional features that pushes the forum into the footer of the page, instead of the body stretching to accommodate the forum dynamically. We've tried different coding techniques but have settled on a static page length (for now). We'd like to implement a way to dynamically stretch the page to fit the forum, no matter the size, vertically.
Here's the header we implemented:
<style>
#pageWrapper {
min-height: 1100px; }
</style>
And here's the muut embedded script:
<!-- Muut placeholder tag -->
<div class="muut">
<!-- Muut API -->
<a class="muut-url" href="https://muut.com/i/ourforumid">Our Forum</a>
<!-- Custom HTML -->
<h4>Another Forum</h4>
<h4>Another Forum</h4>
<script src="//cdn.muut.com/1/moot.min.js"></script>
</div>
Any help would be greatly appreciated, as our conventional attempts with div styling haven't worked. We don't want to overflow with a scrollbar, or hide the overflow, but just want the body container to stretch dynamically to accommodate the forum. Thanks!
Muut has its own div call tags, so after speaking with their team, here's the correct implementation:
.muut .m-sidebar {
position: relative;
}
It's that simple.
I am trying to get the white border on this page to disappear:
http://www.donaldrussell.com/blog/carving
password:testpage
I only want it to disappear on pages with this specific template.
Here's the CSS I'm trying to use:
.fullwidth #wrapper{
background-color:#000;}
Can anyone point out what's wrong please?
Thanks
It's the white border, I would like to get rid of, so it looks like this:
Im not sure where the .fullwidth class is actually being used on the page.
The white background is being called from the main style.css stylesheet on line 224.
If you have access to that file, then just change the value there.
If not, try adding this to the page.
#wrapper.black_bg{
background-color:#000 !important;
}
and change your wrapper div to this:
<div id="wrapper" class="hfeed black_bg">
There is no parent container with the class .fullwidth (as far as I can see). The only option for classes in your body (which is the parent container in this case) are:
<body class="page page-id-7703 page-template page-template-onecolumn-sliderpage-php custom-background">
Try instead adding a class to the wrapper and styling this:
.page-template-onecolumn-sliderpage-php .SOME-CLASS{
background-color:#000;
}
You shouldn't use the class then ID like that. best to stick to classes when styling.
Since you want it to disappear only on on the pages with that particular template, here's what you do.
Open the page's template and add an ID called "login-page" to the body tag so that you can target it separately.
Then create the block of CSS code below being specific with the ID you added to the template's body tag.
#login-page #wrapper {
background-color: #000; /* or Inherit */
}
Note You can change or add to the above block of code and it'll affect just the the template that you applied the the given ID to.
So I have a simple page:
www.kensandbox.info/centerthis
This is a simple html/css page and I'm trying to add a paypal button.
The problem is that I can't figure out how to center the button? I've tried adding the following:
<div align="center"> form code here </div>
No dice. I've even tried adding the center tag before the form.
The site code (simple html and css file) can be downloaded here:
www.kensandbox.info/centerthis/centerthis.zip
My guess is that one of the other CSS elements is overriding my change.
What am I missing?
Thanks
there is a float:left in form input, form .btn inside mycss.css
Add float:none to that input if you want to override.
Without looking at your code I would say the best way to center a div is usually make sure it's displayed as a block element (should be by default) and that its width is specified; then finally apply margin: auto.
e.g.
<div class="container">
...
<div class="centered-element"> form code here </div>
...
</div>
where
container {
width: 200px;
}
centered-element {
width: 150px;
margin: auto;
display: block; /* to make sure it isn't being mucked up by your other css */
float: none; /* to make sure it isn't being mucked up by your other css */
}
Edit:
I say to do it this way because, like I now see someone has commented, <div align="center"> is deprecated and so is the <center> tag. To expand, this is because your HTML should only be used to create the structure and semantics of your web page, and CSS should be used for the presentational aspects of it. Keeping the two separate as best as you can will save you a lot of time in the long run.
Also it's best to design your CSS in a way where you shouldn't have to set display: block; on a div (because a div is already a block element) and your shouldn't have to unset a float by using float: none;. For more on a good way to do that, improve your workflow, save yourself some time, and generally be awesome, check into object-oriented CSS a.k.a. ooCSS
I found the answer and I want to thank the two individuals who took the time to answer.
The thing I didn't understand is how to look at a web page and see what CSS code was driving the formatting.
Some research lead me to a Chrome plug in named CSSViewer. Using this plugin and the information from the answer I was able to identify a float left css element that I simply had to change to a float center.
Thanks again for the help.
I have been asked to design a side scrolling site for Wordpress similar to this
site. Each post is positioned side by side on the page.
Im trying to work out if there is a line of PHP that i can add to page.php that will allow a normal vertical scrolling site to horizontal scroll ?? as far as I'm aware there is no jQuery used . . . . .
I've looked for countless amounts of Wordpress themes but can't seem to find the relevant piece of php for horizontal-scrolling. It seems to be quite a common layout for UK based illustrators/graphic designers. Does anyone have any ideas how to achieve this ??
thanks
https://css-tricks.com/how-to-create-a-horizontally-scrolling-site/
the DEMO...
https://css-tricks.com/examples/HorzScrolling/
Is quite good - although could be more intuitive with anchors & arrows
Use this theme:
http://thethemefoundry.com/shelf/
Otherwise you'll have to digg into CSS for that effect.
Give your body (or for instance a wrapper div) an explicit width, either via CSS (fixed, see below) or JavaScript (dynamic and for instance depending on the number of articles). Then float your articles left and give them an explicit width as well.
<!DOCTYPE html>
<style>
body { width: 8000px; }
.article { float: left; width: 800px; }
</style>
<body>
<div class="article">...</div>
...
<div class="article">...</div>
</body>