I am making a Tumblr theme and I'm having to get creative to make my pages look the way I want them too.
One issue I'm running into is that I want a green border and a max width of 150 on any images on individual pages, but the template for individual pages is used for text posts on the index page, so my index page images are being set to have borders and a max width of 150px, which is not right.
Luckily there is a code on tumblr that lets me execute certain code of someone is looking at the index page. So is there any way I can make a second div that negates the border and size rules in the first div? Here is my code:
.text img{ //for individual pages
max-width:150px;
padding: 3px;
margin: 0 5px 3px 0;
border: 3px solid #52B472;
}
.notpage img{ //for index page
max-width: 500px;
border: none;
margin: 0px;
padding: 0px;
}
HTML:
<div class="text">
<div class="notpage">
In a perfect world, there would be no borders or max width on images in this div.
</div>
</div>
Sadly, the CSS from the 'text' div carries into the 'notpage' div. So does anyone know of any way I can negate the first div's CSS in the nested div?
Try changing
.notpage img{ //for index page
to
.text .notpage img{ //for index page
If that doesn't work, try this:
max-width: 500px !important;
border: none !important;
It's not very good practice, though.
Related
I want to prevent page-reflow, caused by image loading on a web page.
Page reflow occurs when images load after the page's text content has already rendered. There's a 'jerk' caused by the said page-reflow. It makes for awful user experience.
My requirements are:
(i) All images be fully responsive
(ii) Have a max-width of 450px (while maintaining aspect-ratio)
(iii) Be center-aligned within their containers
There can be several images on the page. All have different aspect ratios (but scaled to the same width - i.e. 450px). I know their dimensions beforehand.
Currently my code is simply:
.container {
text-align:center;
overflow:hidden;
background:whitesmoke;
border-top:1px solid #F0F0F0;
border-bottom:1px solid #F0F0F0;
}
.container img {
width:100%;
max-width:450px;
vertical-align: top;
}
<div class="container">
<img src="https://s3.ap-southeast-1.amazonaws.com/damadam-2019/public/31a1b420-59c9-405a-a197-e04dd1e2eaf9.jpg" alt="image">
</div>
This fulfils all my requirements - except it can't prevent page reflow. How do I tweak this to get my desired result?
Traditional solutions to prevent such page-reflow go something like this:
HTML
<div class="container">
<img src="https://s3.ap-southeast-1.amazonaws.com/damadam-2019/public/31a1b420-59c9-405a-a197-e04dd1e2eaf9.jpg" alt="image">
</div>
CSS
.container {
display: block;
position: relative;
padding-bottom: calc(100%/(450/562));/* example width=450px height=562px*/
height: 0;
}
.container img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
This works fine. But it doesn't impose a max-width like I need it to. The image fills the entire container - as large as that container is (e.g. the full width of the screen on a laptop).
To tweak it, I tried adding max-width:450px;max-height:562px in .container img. That corrected the image's dimensions. But it gave the container extra padding at the bottom:
That's a shame. What I really wanted was for it to look like below:
Note that the gray colouration above is the background container, which simply disappears on smaller resolutions:
What's the best way for me to achieve my requirements? An illustrative example would be great.
Note: adding max-width: 450px;max-height: 561px; in .container doesn't solve the problem either.
I have a layout that has a side menu bar and then the main content displayed on the right side. The layout and functionality work just fine except for one minor detail -
In some cases, there isnt enough content to fill the entire screen and when that happens the DIV containing the main content does not stretch and fill the remainder of the screen creating a visual difference as seen in the screenshot. I tried manipulating various attributes and putting in dummy content etc but could not find a clean solution. I am hoping someone can help. I am using Twitter Bootstrap 3.x
I have included the CSS for the main section, ideally, I would like this white background to fill the screen upto the footer.
/*
* Main content
*/
.main {
padding: 20px;
background-color: #fff;
border-left: 1px solid #dae3e9;
height: 100%;
box-shadow: -3px 3px 3px -2px #f1f1f3;
}
I have also created a fiddle with my code, the visual is a little messed up because the output is trapped inside a frame - but here it is anyway -
Dont use min-width: 100%; on your #wrap.
Basically solves the problem.
But i want the footer to still be at bottom etc...
Fiddle
Added:
.main::before {
content: "";
position: absolute;
z-index:-1;
display: block;
width: 100%;
margin-left: -20px;
height: 100vh;
border: 1px solid black;
background-color:white;
}
Suggestion: clean up your code. you don't need that much html code the design your doing. I't will be hell for any one who want to edit or change it at a later stage.
(Source:http://imgur.com/5pKaiea.)
Hey I basicly got two of the files above one "header" and one "footer" both same size kinda just flipped.
The problem is the width doesn't fit on page, any ways other than background-image: cover?
The file is basicly 1280 px wide and around 114 px tall.
div #header {
background-image:url(../img/webclient_header.png);
height: 114px;
width: initial;
margin: 0; /* If you want no margin */
padding: 0; /*if your want to padding */
}
In CSS you can use the property background-size to resize the image to fit:
div #header {
background-image:url(../img/webclient_header.png);
background-size:800px 114px; /* Choose your size here W x H */
height: 114px;
width: initial;
margin: 0; /* If you want no margin */
padding: 0; /*if your want to padding */
}
UPDATE: Checkout the code update on jsfiddle http://jsfiddle.net/bKZ8N/
If you're looking to have responsive images on your website, background-image is not really the best path to take. You'd need to either use may CSS media queries to serve different background images sizes or use something like background-size property which is not compatible with older browsers.
I would suggest doing something like this:
<header>
<img src="you-image.jpg" width="100%" height="auto" />
</header>
That's a lot going on for one header / footer image... I would look into possibly breaking it up.. You can make the center part a set width of the whole site that would essentially contain the menu. Then after that you would cut a 1px width (x-value)px height and use that as a repeating background behind your header div. The other elements can be strategically planned to be added to other portions of the site to better reflect the image.
Not a great answer, but it is what I would do in this situation. Otherwise you're looking at the image being stretched and possibly lose some focus.
EDIT:
To answer your question in comments
Kind of...
So you would have at least 3 images header_middle_piece.jpg (the middle of the image that is pointing "down"), footer_middle_piece.jpg (the rotated version of header.), and repeating_pattern.jpg
From there you would have your leveled layout.
<div id="header">
<div id="container">
<div id="content"></div>
</div>
</div>
Use the same type of layout for your footer.
#header{
width: 100%;
background: url('repeating_pattern.jpg') repeat 0 0 scroll transparent;
height: 20px; // Make this the height of the pattern you are using.
}
#container{
background: url('header_middle_piece.jpg') no-repeat 0 0 scroll transparent;
height: 40px; // height of the middle piece.
width: 200px; // width of middle piece
margin: 0 auto; // center the container.
}
Those are the only styles you need to get that working in the whole. After wards you would need to target the background for the repeating background of those stripes if you still do those, and make a div for the other shapes. If you didn't make this image you will have a hard time breaking it up. But it is doable.
I've been presented with the following layout:
where:
A = header, width: 100%
B = page content, max-width: 960px; margin: 0 auto
C = footer, width: 100%
The problem I've got is with the H1. The design has a background to the H1 which comes in from the very far left of the screen and stretches all the way across to line up with the right hand side of the content below. If the browser window is less than 960px then obviously it just appears as a solid bar stretching across the whole screen.
I'm genuinely at a loss for how to even start this. I thought about some kind of negative left margin + padding left but without knowing a fixed size it's hard to rely on percentages to accurately line up the elements.
The closest I think I've come to a solution is to have a massive background image which is centred on the H1, or maybe on a container surrounding the H1. Not ideal as it's just a solid colour so to use an image goes against my moral judgement.
Any ideas? Here's the structure of the page:
<header>
<h1>This is my title</h1>
</header>
<article></article>
<footer></footer>
CSS
header,
footer {
width: 100%;
min-height: 100px;
background: #eee;
overflow: hidden;
}
article {
margin: 0 auto;
max-width: 500px;
height: 100px;
background: #ddd;
}
h1 {
margin: 30px auto;
width: 500px;
background: #bbb;
}
There are several ways you could try and do this.
A jQuery solution would provide the most accurate result, but it's abit heavy for this kind of problem, and I personally don't like using Javascript for something that's a CSS problem.
You could do some kind of trick with a background image, you might have to depending on your actual design, but as far as a single background colour, I'd probably solve the problem with an element positioned behind the header with a negative margin-top, and a set width of 50% (That way it should always remain hidden behind your header). All you'll need to do is match up its height and margin-top to blend it in with the header.
.header-botch {
background: #bbb;
height:37px;
width:50%;
margin-top:-67px;
}
http://jsfiddle.net/duFnR/1/
If for some reason you hate the idea of using a negative margin, you could position: absolute the element instead
http://jsfiddle.net/duFnR/2/
Why not use jQuery and calculate H1.width = (B offset left) + B.outerWidth() ?
A solution which doesn't involve images appears to be wrapping the H1 in something and applying a background gradient to that element, see the fiddle. I've made the H1 background green to make it more obvious which background colour is which.
Pros:
Ability to manage the colour in CSS
The height is variable based on the height of the H1 allowing for multi-lines if necessary
Cons:
The width must be set no greater than that of the H1, otherwise on very thin windows it will appear out the other side. Also it has the weird behaviour of disappearing completely once the specified width has been reached (not a problem when smaller because you won't see it disappear).
On very large windows, the width will not be enough and a gap will appear on the left of the H1.
Code
<div class="h1Wrapper">
<h1>This is my title</h1>
</div>
CSS
.h1Wrapper {
/*background: #bbb;*/
background-image: -webkit-linear-gradient(left, #BBBBBB 300px, #FFFFFF 300px);
background-position: center;
}
h1 {
margin: 30px auto;
width: 500px;
background: lime;
}
I've asked this question before (sort of), and the answer wasn't able to help me do what I'm trying to do. After working on this website more, and countless hours trying to figure out the solution to this (I'm not even entirely sure it can be done), I'm back trying to figure this out. It's the centerpiece for the home page, so it's kind of important it works the way I want, visually.
The problem:
I have two "modules" (displayed as table cells) in a container (displayed as a table). I have created this jsfiddle as a way to show how the model will interact with a landscape image and portrait image. I'll go ahead and list the requirements.
The content container should have a minimum width of 30% - 30px (10px padding and a border of 20px on the right) of the container.
If the photo isn't big enough to take up 70% of the container, the content container width should grow and photo container width shrink.
The height of the content container (which will essentially be a news/blog post) should never be taller or shorter than the image. If the contents overflow, they should be scrollable.
To prevent this block from being absolutely super tall, it shouldn't have a height over 1000px (I'm think maybe setting the image max-height would be the way to say this.
I feel like I've been all over the internet trying to figure out how to do this, and I have had no luck.
Below is mark-up and styling:
<div id="container">
<div class = "content">
<h5>
blah
</h5>
</div>
<div class = "image">
<img src="http://www.blah.com/blah.jpg" />
</div>
</div>
#container {
display: inline-table;
width: 100%;
border-bottom: 20px solid #cc0000;
}
#container .content {
display: table-cell;
vertical-align: top;
min-width: calc(30% -40px);
border-right: 20px solid #383838;
padding: 10px;
background: #eee;
max-height: 100%;
overflow:scroll;
}
#container .image {
display: table-cell;
width: 70%;
padding: 0px;
background: #ccc;
max-height: 100%;
}
img {
max-width: 100%;
}