Single page website
I have a single page website (one page only). I can navigate with a menu to get to different parts of the page with anchor name, just like (see sidebar):
WordPress Docs
Hide the other stuff
I want to hide stuff that does not belong the the current active page part and just show the information of the part that I'm looking at.
Question(s)
Can I hide stuff that is not a part of the current #anchor_part with only CSS?
Have you seen any sites already doing this?
Working Example
Try this Html
a
b
c
<div id="a" class="page"> this is a id</div>
<div id="b" class="page"> this is b id</div>
<div id="c" class="page"> this is c id</div>
and Css
#a, #b, #c{
display:none;
}
#a:target{
display:block;
}
#b:target{
display:block;
}
#c:target{
display:block;
}
yes you can do this with only css,first creat < div > with a specific width and height and overflow to hidden,then place your stuff in this div beside eachother
firstWindow
secondWindow
thirdWindow
<div class="window">
<div id="firstWindow" class="window">
firstWindow
</div>
<div id="secondWindow" class="window">
secondWindow
</div>
<div id="thirdWindow" class="window">
thirdWindow
</div>
</div>
.window{
width:300px;
height:300px;
overflow:hidden;
}
something like above;
note that you can use this html/css if you have a constant height,the height of your stuff should be the same.
Related
I want to display .tel in #header only if it's exists in #switcher.
The basic situation:
<div id="switcher"><div class="tel"></div></div>
<div id="header"><div class="tel"></div></div>
But user in system can turn off displaying .tel in #switcher. After that the code is something like this:
<div id="switcher"></div>
<div id="header"><div class="tel"></div></div>
In that situation I want to hide .tel in #header .
I know how to do it with jquery, but can I do it just with css or scss ?
This solution depends on where <div id=switcher> needs to appear on the page, but... if you're crafty, you can re-order your markup something like this:
<header>
<div id="switcher">
<div class="tel"></div>
</div>
<div class="tel"></div>
</header>
and then use the following style rules:
header .tel {
display: none;
}
header #switcher .tel,
header #switcher ~ .tel {
display:block;
}
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.
This would be the main markup:
<div class="mancha">
<div class="logo"></div>
<div id="content-area" class="espacio">
<div class="eltitular">HEADER</div>
<div class="lacarta">LEFT CONTENT</div>
<div id="sidebar">RIGHT CONTENT</div>
</div>
</div>
Where (allthough there are many more rules wich can be seen in the link this are the widths)
.espacio{
margin-left: 192px;
background: transparent;
width:808px !important
}
.lacarta{
width:595px;
float:left;
}
#sidebar{
width:210px;
float:right
}
The problem is that .lacarta and #sidebar are not floating one next to other (this only happens in IE8 or lower)
It can be tested here: http://goo.gl/ksFQI (if you compare to firefox/chrome you will se that the sidebar is not in the right side of the container..)
I checked with the IE8 developer tools that the container seems to be big enough for both elements..
Any idea what I missed?
-EDIT-
Current IE:
Wanted (like in Firefox):
Actually, there is a bug in IE8 where right-floated elements seem to clear:left.
http://blogs.msdn.com/b/askie/archive/2009/03/23/right-floated-element-in-internet-explorer-8-is-positioned-differently-than-internet-explorer-7.aspx
If you don't want to add anything to your HTML at all, you can slightly restructure it for a quick fix. Put the right-floated sidebar first, ie:
<div id="content-area" class="espacio">
<div class="eltitular">HEADER</div>
<div id="sidebar">RIGHT CONTENT</div>
<div class="lacarta">LEFT CONTENT</div>
</div>
Add parent container:
<div class="mancha">
<div class="logo"></div>
<div id="content-area" class="espacio">
<div class="eltitular">HEADER</div>
<div>
<div class="lacarta">LEFT CONTENT</div>
<div id="sidebar">RIGHT CONTENT</div>
</div>
</div>
</div>
Does this jsfiddle fix it: http://jsfiddle.net/hgrHq/
.lacarta{
width:590px;
float:left;
}
Just reduced the width of .lacarta a bit.
As an aside, you might want to consider a responsive grid system for laying out your coulmns like this. For example:
http://cssgrid.net/
http://semantic.gs/
Then you won't have lining up issues like this ... and it'll respond to all screen sizes.
What exactly the Prob is...?? I just Tested the link and found those menu were not aligned .. and here the solution is .menu li{ float:left} .. for more jus put a screen shot if Possible :)
I don't know if this can be done with CSS, but before going the JavaScript way, I would like to know if it's possible to center (as a whole) a set of absolute positionned divs:
<div id="container">
<div id="item1" style="position:absolute;left:100px;top=50px>...some content...</div>
<div id="item2" style="position:absolute;left:0px;top=0px>...some content...</div>
<div id="item3" style="position:absolute;left:150px;top=100px>...some content...</div>
<div id="item4" style="position:absolute;left:75px;top=75px>...some content...</div>
</div>
I would like to center the bounding box of those items in the page.
Of course since they're styled with "position:absolute", they're out of the flow, so the container div has a size of 0 px... and the usual tricks didn't work.
Finally, the snippet above being just illustrative, in practice the items would be arbitrarily positionned (some of them dynamically), and their size and content is not known (and can be dynamic too). Because of all this dynamicity, I would prefer to have everything handled by CSS is possible, rather than having hook a whole bunch of events.
Hey now you can change your html and css than u can easily as like this
HTML
<div id="container">
<div id="item1">...some content...</div>
<div id="item2">...some content...</div>
<div id="item3">...some content...</div>
<div id="item4">...some content...</div>
</div>
Css
#container{
background:red;
overflow:hidden;
}
#item1, #item2, #item3, #item4{
background:pink;
margin:10px;
margin-left:100px;
}
Live demo
How about to give a fix width to #container and giving a position:relative;
Please check this http://jsfiddle.net/65vk2/
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.