I am using the Ionic-Header bar for my needs. I adjusted the styling of the bar as follows:
.bar.bar-positive {
background: #00D7FF;
border: none !important;
}
I have now an image in my content which can sometimes becomes very large and high, resulting that it overlaps my Ionic-Header bar. The styling of the image is as follows:
<img ng-src="{{imageDataViewer.currentCID}}" ng-show="currentCID" class="image-viewer">
.image-viewer {
width: 100vw;
max-width: initial;
max-height: auto;
}
What is the way to deal with this? I am trying to fill the content with an image.
http://ionicframework.com/docs/api/directive/ionHeaderBar/
You con define your ion-content like that <ion-content class="has-header">
The has-header class is a standard ionic class
Your image shall be into the DOM then and will not overlay the headeR.
Fix the max-width and max-heightto a certain value in the image-viewer class
Related
I want my page to have a fix width, lets say 1440px. I usually put width in body and it applies to all elements. In my new project I need to have one section in white background, width being fixed makes it so that only 1440px is white. I managed to solve this by removing width from body and creating a class:
.width-fix {
width: 144rem;
margin: 0 auto;
padding: 0 1.2rem;
}
I set that class as additional to every section I don't needed colored.
Is this the right way to solve it or is there something better? Currently it works like a charm.
I started learning HTML/CSS 2 weeks ago, sorry if its dumb question
**Edit: Image for clarification
Yes, usually I work with a classname like container or section for all the most general default styling.
Every element is packed in a section which holds the right background-color and has a div with container for the right width and margins and padding.
So something like this:
.block {
background-color: green;
}
.container {
max-width: 1440px;
margin: 0 auto;
padding: 25px;
}
<section class="block">
<div class="container">
</div>
</section>
I am dynamically including an html content in the page.
The content is a tree structure in html which is usually huge in height and width.
I want that after inclusion with AJAX the root node of the tree is visible : the included HTML content is centered.
UPDATE1: in the MWE I just use width:2000px to imitate something wider than the screen page. Point is that to center this huge thing on the page not to change its width (Scaling could be acceptable but how?).
UPDATE2: The root of the included tree should be horizontally centered but its other parts also needs to be available through scroll bars of the browser or some inner scroll bars.
What are the simple and correct ways of doing it (without frames as they are deprecated) by styling?
UPDATE3: Below the screenshot of a real example. After tree is generated and included dynamically in the bottom of the page, it is not visible for a client.
One needs to use scrollbars to see the root of a tree.
UPDATE4: See the one possible option where the included content is placed in a window with scrollbars which needs to be zoomable, via browser or vis additional functionality.
MWE : https://jsfiddle.net/kowalsky/tgkbn8wp/2/
HTML:
<body>
<h1>Test page</h1>
<div>
So here comes a long text that might fill the page and wrap outomatically like this.
Below is a WIDETHING which is supposed to content an HTML loaded dynamically via AJAX.
The loaded content is usually wider and is impossible to fit to the page.
<b>What are the ways to put WIDETHING centered on the page, i.e. CENTER is in the center of the page?</b>
</div>
<div class="frame">
<div class="wideThing">
CENTER
<div class="box">BOX1</div>
<span class="box">BOX2</span>
<span class="box">BOX3</span>
<span class="box">BOX4</span>
<div class="box">BOX5</div>
</div>
</div>
</body>
CSS :
.wideThing {
width: 2000px;
text-align: center;
}
.frame {
width: 100%;
border: solid 2px black;
}
.box {
padding: 40px 100px;
border: solid 1px black;
background-color: red;
}
I would use this:
.wideThing {
position: relative;
width: 2000px;
left: 50%;
transform: translateX(-50%);
text-align: center;
}
That first moves the left border to the middle and than moves it back left by 50% of its own width, thereby centering it horizontally.
https://jsfiddle.net/p7d2j323/1/
I would just do this:
.wideThing{
width: 100%;
text-align: center;
}
https://jsfiddle.net/tgkbn8wp/4/
A possible solution is to use jQuery to set the position of the horizontal scrollbar at the center of the tree.
This could be accomplished using the .scrollLeft() method and some calculations to get the new position of the horizontal scrollbar.
But bear in mind that you'd have to execute this script after the tree had finished loading.
Here's a JSFiddle.
And of course you could set the position of the vertical scroll bar similarly using .scrollTop().
More about .scrollLeft() and .scrollTop() on jQuery's website.
please see here.
I'd like to give a solid color to the comments area. This background color should enlarge according to the comments area. If there are a lot of comments it should have a big height, few comments, little height.
I have added the <section class="comment"> inside a new div called <div id="commentsbackground"> and I gave the following css:
#commentsbackground {
width: 6000px;
margin-left: -1172px;
background-color: #A6A8AF;
}
section.comment {
height: 500px;
margin-left: 1172px;}
With this I managed to add the large background that should work with all big monitor resolutions. Not sure if there was a simple way to do it.... but for sure it's not working as I'd like to.
I'd like to have height: auto;, but it doesn't work.
I hope you can help me to have the comments area with a different background color.
This should be the final result:
-post area -> white
-comments area -> grey
-footer -> black
Well, if you use overflow auto, all the gray background will fill all the screen :P
#commentsbackground {
width: 6000px;
margin-left: -1172px; /*Idk, why do you use that*/
background-color: #A6A8AF;
overflow:auto;
}
Either change containers to float:left or add a clearing method: http://www.webtoolkit.info/css-clearfix.html
I'm a complete html/css newbie and I'm making my first site. I want it to look something like this:
http://www.dorishochscheid.nl/
I used a div element to "contain" the navigation bar and the main content, like this:
<div id = "container">
<nav> ... working navigation bar here ... </nav>
<section id = "content"> ... main content here ... </section>
</div>
This is my css:
body {
background-image: url(images/achtergrond.jpg);
background-repeat: no-repeat;
background-position: bottom center;
margin: 0;
}
#container {
margin: 0 auto 0;
margin-bottom: 200px;
width: 800px;
height: 1000px;
background-color: #de59b2;
opacity:0.85;
/* voor slechte browsers */
filter: alpha(opacity=85);
}
#content {
float: left;
background-color: #de59b2;
margin: 15px 45px;
}
The navigation bar, the content section and the container all have the same opaque background color.
The problem is this: I want the container div to grow in height according to how much content is placed in the content section. But if I remove the height = 1000px; the whole container disappears from sight. Seperate colored boxes for the navigation bar and main section remain.
Why does this happen?? I've seen things like height = 100%; being used, but that doesn't work here either. I can imagine such a statement being what I'm looking for, seeing how I want the container to grow with the content section.
Why does this happen and how do I get the container to size up or down depending on the amount of content in the content section that it contains?
Or is this totally the wrong way to go about this type of contruction?
This is because the content floats. That keeps the container from adjusting to fit the content. Simply add this to your container:
overflow:hidden;
I want to stack one division on top of another each with different background. the background, ofcourse will be transparent (.png). This is to recreate an effect of a pattern on an image and avoid loading an entire 1366 x 768 image.
my html is somewhat like this
<body>
<div id="firstLayer">
<div id="secondLayer">
<div id="mainContent">
main page content
</div>
</div>
</div>
</body>
I have a radial gradient for the body, the #firstLayer contains the main logo, and the #secondLayer must consist the transparent pattern.
my first try at css was somewhat like this
#secondLayer{
background: url("../images/crtPattern.png") repeat scroll 0 0 transparent;
}
But the pattern doesnt show up at all. How can i bring this #secondLayer on top of #firstLayer but just below the #mainContent?
You need to give width and height to #secondLayer like this Demo
#secondLayer{
background: url("../images/crtPattern.png") repeat scroll 0 0 transparent;
width: 100%;
height: 100%;
}
Are you trying to do this -
#firstLayer{ background: red; height: 500px; }
#secondLayer{ background: green; opacity: 0.6; filter:alpha(opacity=60); height: 300px; }
Demo
Width and height are definitely required if you have no DIV content. If that doesn't fix the problem for you:
Check image paths, can you load the same image using the same image path in an IMG tag?
Is your stylesheet inline or loaded as a separate file - this will affect relative paths to the image file.
Is your webserver case-sensitive? Does the case of your path match the image?
Hope this helps.