i have a problem after excluding side bars from a wordpress page here http://www.topfxrebates.com
i want to fill the space of the removed side bars because i need to draw a big table that fits the whole page
here are some screenshots
1 - the problem
http:// img2.pict.com/99/9d/c7/3799424/0/1279296576.jpg
2 - this is what i want to do
http:// img2.pict.com/b4/75/1b/3799423/0/1279296572.jpg
thanks in advance
Just put an ids on the body to differentiate between the pages with and without a sidebar. (I assume you are using display: none; or not including the sidebar and not using visibility: none;), if you are using the latter, then change it to display: none;
<body id="with_sidebar">
<div class="content">
</div>
<div class="sidebar">
</div>
</div>
#with_sidebar .content{width: 60%;)
<body id="without_sidebar">
<div class="content">
</div>
</div>
#without_sidebar .content{width: 100%;)
Just looked at your code, seems the easiest thing for you to do would be to change
<div id="content">
to
<div id="content" class="nosidebar">
Then add this to your CSS:
#content.nosidebar{width: 100%;}
Related
Hi I feel dumb for asking the following but im at a loss. I am trying to create the following layout for a website but have not been able to create exactly what I want. I know it should be very simple to do but I'm a developer not a UI / UX wizard.
So im looking to have a side bar on the left with menu items, a top nav (fixed to the top of the page) and a footer fixed to the bottom of the page with the main body of the site scrolling within the area left between the top nav and footer.
There are also pages where I would like the content in the main body to be vertically and horizontally aligned (form input)
Ideally im looking to use bootstrap 5.2 but am not against using css grids or whatever magical methods there may be to get to what im looking to do. I'm also looking to try and make this all responsive hence starting to use Bootstrap I didn't want to have to implement my own media queries to do it.
Thanks in advance for any help or suggestions, I have been hitting my head against a brick wall with this for far too long and thought I would reach out and see if anyone was able to help.
You have two distinct columns, (1) sidebar and (2) everything else.
Within the main row, we can form the two columns: col-2 and col-10, with the first acting as our sidebar and the other acting as our main column.
In the main column, we add a row and then add to it the nav, main content and footers.
<div class="container-fluid h-100">
<div class="row h-100">
<div class="col-2 bg-dark text-light">
sidebar
</div>
<div class="col-10 bg-light">
<div class="row h-100">
<div class="col-12 bg-primary nav">
nav
</div>
<div class="col-12 main">
<p>1</p>
<div style="height: 5000px;">a</div>
<p>2</p>
</div>
<div class="col-12 bg-primary footer">
footer
</div>
</div>
</div>
</div>
</div>
In the CSS we set the height for the nav and footer, and then use calc() to measure the height our main content should be and set the overflow to scroll to get the scrollbar if the content is larger than the height.
.nav {
height: 60px;
}
.main {
height: calc(100vh - 120px);
background: #f1f1f1;
overflow: scroll;
}
.footer {
height: 60px;
}
Done this a whole bunch of times, but now it's acting out for some reason. Though I'll probably feel very dumb, after somebody points out the mistake.
Live link:
http://soloveich.com/project6
I'm trying to build a header, but getting quite a few problems at the same time
1) Background images for class header and #soc don't show
2) that image with large text does not align to center
3) I get the post on the right side of the header, while it has to be under it.
css is properly connected (tried changing body background color)
header code
<div class="header">
<header>
<div class="row-fluid">
<div class="col-lg-3"><div class="pull-right"><img src="wp-content/themes/greendream/images/logo.png"> </div></div>
<div class="col-lg-6"><div id="text"><img src="wp-content/themes/greendream/images/text.png"></div></div>
<div class="col-lg-3"><div id="soc"></div></div>
</div>
</header>
</div>
css
.header {
background-image: url(images/hdbg.jpg);
}
#text {
width: 578px;
margin:o auto;
}
#soc {
background-image: url(images/soc.png);
}
You need to start by studying how the grid system in Bootstrap 3 works.
Basically, if you want your content centered, you need to place it in a container. Then you set up your rows and columns.
Something like this:
<body>
<div class="container">
<div class="row">
<div class="col-md-3">
<img src="wp-content/themes/greendream/images/logo.png">
</div>
<div class="col-md-6">
<img src="wp-content/themes/greendream/images/text.png">
</div>
</div>
</div>
</body>
Note: There is no row-fluid in Bootstrap 3. A lot of what you're trying to do will only work in Bootstrap 2.
Basically I'm trying to create a simple webpage template which would contain 3 rows. The first being the header which contains two columns, the second just being the mainbody and then the last being a footer.
Coding wise i'm doing this kind of layout
<div id="wrapper">
<div id="header">
<header>
</header>
<div id="col2>
</div>
</div>
<div="mainbody"></div>
<footer></footer>
Basically the trouble I'm having now is in regards to the first row with the two columns. Basically I have a picture in the first one and a bunch of buttons on the second one. Ideally what I would like is to have the header at 100% width so it fits the screen and the contents of the first column stick to the left and the buttons to the right. With the blank space left inbetween the two. So the contents stick to the sides so to speak.
At the moment I'm using float:left on CSS for the first column, I've been messing around with float/align/position but I can't seem to get anything to work.
So any advice on that I would appreciate it.
I also had another question in regards to the footer, basically I have no idea how to even go about doing it. So just asking if possible and guidance where to look.
So for the footer I was wondering if it would be possible for it, if in between the footer and the browser x-axis there's white space it fits to the screen and the body would strech. Because as of now my body is only at the height of the contents within. So basically general advice on CSS to help implement the style so it fits to the screen.
Header with 2 columns
<div id="header">
<div id="column1" style="float:left;">Image</div>
<div id="column2" style="float:left;">Buttons</div>
</div>
Now add desired margin-left to second column div. It will create space in between 2 columns
<div id="wrapper">
<header>
<div id="column1" style="float:left;">Image</div>
<div id="column2" style="float:left;">Buttons</div>
</header>
<div class="mainbody">
Content
</div>
<footer></footer>
Use this
It is simple structure that can be created as follows (Here is DEMO)
HTML is
<div id="wrapper">
<div id="header">
<header><img src='http://www.topnews.in/files/facebook-yahoo.jpeg' height=200 />
</header>
<div id="col2"><input type=Button value ="button 1" /><br><input type=Button value ="button 1" /><br><input type=Button value ="button 1" /><br>
</div>
</div>
<div="mainbody">mainbody
</div>
<footer></footer>
</div>
And CSS will be
#header{overflow:auto}
header{float:left}
#col2{float:right}
Hope it will help you :)
I have following webpage:
<div id = "wrapper">
<div id="leftmenu>
...
</div>
<div id="search">
...
</div>
<div class="Container">
<div id="content">
<iframe id="iF" name="if" src=""></iframe>
</div>
</div>
</div>
It bascially shows the menu in the left search bar on top and iframe with content below search bar and next to the menus. Problem i am having is i dont want it to show vertical and horizontal scrollbars inside ifram but rather use browsers scrollbars.
if i set like this in css:
.Container
{
position:absolute;
width:100%;
height:100%;
left:180px;
}
It removes horizontal scrollbar but is not removing vertical scrollbar. Can anyone guide me how to remove this vertical scrollbar from iframe.
Try: overflow: hidden; on your iframe.
#content iframe {
overflow: hidden;
}
Try this... After the iframe loads it resizes it using javascript. It'll only work if the iframe src is of the same domain.
<div id = "wrapper">
<div id="leftmenu>
</div>
<div id="search" >
</div>
<div class="Container">
<div id="content">
<iframe id="iF" onload="resize(this)" name="if" src="/"></iframe>
</div>
</div>
</div>
<script>
function resize(elem){
var outer=elem;
var inner=elem.contentDocument.documentElement;
outer.style.border="0";
outer.style.overflow="hidden";
outer.style.height=Number(inner.scrollHeight+10)+"px";
outer.style.width=Number(inner.scrollWidth+10)+"px";
}
</script>
There should be a scrolling attribute for the iframe you can just set to no, that takes care of the scrolling.
The iframe doesn't know it needs to be larger than the page it is in. If you know the height of the page you are attempting to show in the iframe, you can set the iframe height accordingly.
That being said, if the page you are displaying may change in size, your maintenance makes this pointless.
Charlie Frank's answer is good for same domain applications.
I am setting up an asp.net web parts portal for some stuff. I have a [hopefully] really easy question. How can I make the page have 3 major columns?
Right now I have two columns using <div id="leftpanel" style="float: left"> and <div id="rightpanel" style="float: right">. But I cannot figure out how to get a panel in the center. The right panel is basically in the center and there is not a css float: middle/center. So how is a three panel web parts page accomplished?
<div class="container">
<div class="column">
</div>
<div class="column">
</div>
<div class="column">
</div>
</div>
<div class="footer">
</div>
.container{width: 600px;}
.column{float: left; width: 200px;}
.footer{width: 600px; clear: both;}
float the first two left and the last one right.
If that doesn't work, and it sometimes won't, then use Ed B's answer.
A table with 3 columns. Add a div in each column.
Keep the style in the divs..not the table