Still developing my html5/css3 mobile site, I have trouble adjusting the height of a div to its parent.
http://jsfiddle.net/1eg2cwLs/
The fiddle doesn't exactly look like this because I'm using webfonts (saved offline though as I'm not going to have internet connection on the target system). But the problem remains the same.
You might be seeing what the problem is right from the spot, if not: I would like the green and red bar (.itemclass) always have the same size as the content of its parent (.item).
Depending on font, its size (still playing around with it) and the overall height of each item, I have to precisely adjust the negative margin. Otherwise it looks like in the screenshot. The negative margin I just mentioned is in the CSS-class .itemclass: (marked with an arrow also in the fiddle)...
.itemclass {
height: 100px;
width: 50px;
background-color: #27ae60;
vertical-align: middle;
text-align: center;
color: white;
font-size: 2em;
margin-top: -27px; /* <=== */
display: inline-block;
}
This cannot be the solution. I tried a lot of stuff and I only got it "working" the way I mentioned.
Any better idea how to make it look clean without a hack?
As well, tips for other improvements regarding my html/css are well appreciated.
Sorry for appending the entire code into the fiddle. I don't know whether it was representative if I was going to remove stuff.
Best regards
I'd probably go this route:
.item {
position: relative;
...
}
.itemclass {
position: absolute;
top: 0;
bottom: 0;
...
}
.itemcontent {
margin-left: 50px;
...
}
Demo
Really big font demo
Consider a reasonable min-width for the body to prevent .tagline from overlapping, etc.
You can set .item's margin-top to 0, and instead adjust the margin-top of .vcenter:before. This way you're just adjusting the text and not the div.
Or you could drop the static height and width of .itemclass altogether. Now the .itemclass will scale.
http://jsfiddle.net/1eg2cwLs/5/
.item {
width: 100%;
height: auto;
background-color: #eeeeee;
border-bottom: 1px solid #cccccc;
overflow: hidden;
}
.itemclass {
height: 100%;
width: auto;
background-color: #27ae60;
vertical-align: middle;
text-align: center;
color: white;
font-size: 2em;
margin-top: 0;
display: inline-block;
}
As a fallback, you can set .item to not show overflow, and then adjust the line-height of :
.item {overflow:hidden}
overflow: hidden; is your best friend in this case! It hides any overflow content from view outside of .item
Add it into .item {} declaration.
http://jsfiddle.net/1eg2cwLs/1/
Related
I'm trying to make a horizontal scroll gallery for a portfolio of photography on my website, but I want the images to be responsive to height (to fit varying screen sizes). To try and do this I have used the unit: vh and this is causing me problems.I have a position:fixed header and footer so they always stay on the screen while you scroll through the gallery. With the CCS I have used this means as the screen gets smaller, the images go underneath the header & footer rather than constantly staying inbetween them.
I have seen a website with an ideal horizontal gallery very similar to what I am trying to achieve. You can check out the website here. On the linked website the images always seem to stay equidistant from the header and footer.When inspecting the element it looks like they're using tables, which I understood to be a big no, no. Is this how they are achieving this effect on the gallery?
I've linked a JS Fiddle to a very basic version of my design so you can see what I've done so far.
JS Fiddle: https://jsfiddle.net/pmh9zvta/1/
Basically, in a sentence I'm asking how I can achieve the same effect as the example website in the link.
Robin,
Hmm...so vh can actually achieve a pretty similar effect. Your example images are rather extreme, though (1500x100).
Check out this fiddle I made (using your code as a base):
https://jsfiddle.net/Benihana77/5xw21tvc/
*,
*:before,
*:after {
box-sizing: inherit;
}
html {
height: 100%;
box-sizing: border-box;
position: relative;
}
body {
position: relative;
margin: 0;
padding-bottom: 100px;
min-height: 100%;
}
#header {
width: 100%;
padding: 10px;
margin-right: auto;
margin-left: auto;
position: fixed;
background-color: #fff;
background: rgb(255, 255, 255);
/* Fall-back for browsers that don't support rgba */
background: rgba(255, 255, 255, 0.92);
text-align: center;
z-index: 1;
}
#gallery-wrapper {
position: relative;
padding-top: 60px;
overflow-x: scroll;
}
#gallery-wrapper img {
height: 70vh;
width: auto;
}
#footer {
font-family: Corda-Light;
font-size: 14px;
color: #333;
width: 100%;
padding: 5px;
padding-top: 13px;
padding-bottom: 8px;
padding-left: auto;
padding-right: auto;
position: absolute;
bottom: 0;
background-color: #efefef;
text-align: center;
background-color: #fff;
background: rgb(255, 255, 255);
/* Fall-back for browsers that don't support rgba */
background: rgba(255, 255, 255, 0.9);
z-index: 1;
}
/* Navigation Bar Styling */
.nav {
border-bottom: 1px solid #ccc;
border-width: 1px 0;
list-style: none;
margin: 0;
padding: 0;
padding-top: 5px;
padding-bottom: 5px;
text-align: center;
}
.nav li {
display: inline;
}
.nav a {
display: inline-block;
padding: 10px;
}
/* Horizontal Gallery Styling */
ul.gallery-row {
white-space: nowrap;
}
ul.gallery-row li {
list-style: none;
display: inline;
}
/* Footer Styling */
.footer {
list-style: none;
margin: 0;
padding: 0;
text-align: center;
}
.footer img:hover {
opacity: 0.6;
filter: alpha(opacity=60);
}
Main changes
Added a wrapper around your content for better management (within JSFiddle and out).
Changed your footer to be positioned absolutely, along with a host of other changes that allow it to stick to the bottom until your Viewport is too short. Then it gets pushed down like a normal footer. This keeps your content from going behind the footer.
Made the "gallery-wrapper" with "overflow-x:scroll". I'm personally not a fan of side-scrolling galleries, but if your heart is set on it, this will keep the side-scrolling contained to this block, and no your entire website (in turn obviating the need for a "fixed" footer).
Chose some more realistic image dimensions to work with, and a shorter vh (70).
Regarding your example, as best as I can tell, they're using Javascript to rewrite the height of the "scrollHolder" container DIV. So their solution is not CSS-only, instead using JS to read the height of the browser and adjust the height accordingly.
I'd also say their approach is flawed, as it doesn't scale properly to browser width. On a thinner screen, you can only see zoomed-in pieces of each image.
So, in addition to the above changes, I'd recommend:
Setting media-queries at an appropriate browser width (say 760) so that your images become scaled by browser width, not height (so vw, not vh).
This might require some special "min-height" settings in order to keep your tall images from becoming toooo tall, and short images from becoming little munchkins.
If you go here you will see at the very bottom a light gray box that says "Partners". While the site is in full screen mode everything looks correct but when you edit your browser and make the width smaller then it switches to have an image on each line. It appears to happen when the max-width of the DIV gets below 1000px which you can see from the below I have the CSS set to be a max-width of 1000px or 95% of the browser width. Any ideas on how I can fix this?
.footer-full-row {
padding-left: 20px;
width: 95%;
max-width: 1000px;
margin: 0px auto 0px auto;
color: #fff;
background:gray;
}
In your responsive.css file, you have media queries that set all img elements to display: block;. You could override that using something like
.footer-widget img {
display: inline-block;
}
If I understand you right, you want the images to not display in a separate row each, so you need to add this css property to .textwidget img :
.textwidget img{
display:inline-block;
}
This will make it wrap anyway,in order to leave the size of the images as is, but you'll not get each picture in a separate ligne, it'll be wrapping according to the need of the page.
In your style.css change:
#footer .textwidget {
background: none;
margin-bottom: 26px;
padding: 0px;
overflow: hidden;
}
to this:
#footer .textwidget {
background: none;
margin-bottom: 26px;
padding: 0px;
overflow: hidden;
display: flex;
}
JSFIDDLE DEMO
.btn {
text-transform: uppercase;
position: relative;
margin-bottom: 15px;
color: #ffffff;
background-color: #000;
padding: 25px 80px 25px 80px;
font-size: 18px; }
So I have this image, which is responsive and button over it which should be always centered.
If you move the window width, you'll see that image changes size quite a bit and I would like to know what is the best way to set button so it will change size automatically with image as well so it gets bigger/smaller?
Is there a better solution for this besides setting a lot of #media queries here?
Since you're using absolute positioning you can't currently use margins to achieve this.
However, if you use a new div that wraps the anchor, set it to position: absolute and then center the anchor inside that, it'll work.
<div class="logo">
<img src="http://s13.postimg.org/9y14o777r/imgholder.png" />
<div>Register</div>
</div>
.logo div {
position:absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
padding-top: 25%
}
.logo a {
display: block;
margin: 0 auto;
width: 250px;
}
Fiddle
You can adjust the sizing and vertical centering as you need, and add some responsive css or min-width to control too-small sizes.
http://jsfiddle.net/Rncu6/
The green div has a max-width attribute, and it should shrink when the screen shrinks.
Instead, what happens is that the green div falls off to another line. If I try to remove the float:left on the green div, it suddenly overlaps with the yellow div, which is not what I want.
How do I fix this?
This seems like a really frustrating issue. The best way I can think to solve it is to remove float:left from p and replace it with display: table-cell.
p {
display: table-cell; /* replaces float:left */
max-width: 300px;
background-color: lightgreen;
height: 200px;
}
The only problem with this approach is that it will render all the margin attributes useless. To work around that, you can just add the inverse of those margin attributes to #img1. For example:
p { margin-left: 10px; }
Would be replaced with:
#img1 { margin-right: 10px; }
JS Fiddle Example
Caveat: I don't know how small you want your minimum width to become, but you'll notice that at a certain point the p will still move onto the next line. This is because it is becoming too small for individual words (e.g. longer words like "paragraph") to fit on one line. To work around that, you can use the word-break:break-all; attribute.
p { word-break: break-all }
That way, the width of p will continue to shrink until the width can no longer fit individual characters on one line.
JS Fiddle Example
Give width in percentages
#img1 {
background-color: yellow;
width: 20%;
height: 100px;
float: left;
}
p {
float:left;
margin-top: 0;
max-width: 50%;
background-color: lightgreen;
margin-left: 10px;
height: 200px;
}
http://jsfiddle.net/Rncu6/11/
The overlapping occurs because the size of the DOM is becomes larger than the browser so it gets pushed below the img div. As already mentioned you can use % to compensate for that. Although, if you want to absolutely define the divs in pixels until the browser can't display them any more.
To expand upon the current answer you could use Media queries...
#img1 {
background-color: yellow;
width: 100px;
height: 100px;
float: left;
}
p {
margin-top: 0;
float: left;
max-width: 300px;
background-color: lightgreen;
margin-left: 10px;
height: 200px;
}
p:after {
content: " ";
display: block;
height: 0;
clear: both;
}
#media screen and (max-width: 450px) {
#img1 {
width: 20%;
}
p {
max-width: 50%;
}
}
And here's the jsfiddle - http://jsfiddle.net/SxLCJ/
I am creating a web site for my church. Because they know of no web programmer members, I am taking care of it with my meager skills. My problem is merely one of placement. I am trying to place an image in the top-left of the page, but, no matter what I do, it interferes with the other div elements on the page. This is my current CSS:
body {
background-color: #FFFFFF;
font-size:12px;
font-family:Verdana, Arial, Helvetica, sans-serif;
}
div#wrapper {
width: 90%;
background-color:#ffffff;
margin-top: 50px;
margin-bottom: 50px;
margin-left: auto;
margin-right: auto;
padding: 0px;
border: thin solid blue;
}
div#image {
padding: 15px;
margin: 0px;
float: left;
}
div#header {
padding: 15px;
margin: 0px;
text-align: center;
}
div#nav {
width: 25%;
padding: 10px;
margin-top: 100px;
float: left;
}
div#main {
margin-left: 30%;
margin-top: 100px;
padding: 10px;
}
div#footer {
padding: 15px;
margin: 0px;
border-top: thin solid blue;
text-align: center;
}
No matter how I define the image div, it always pushes the main, navigation, and header divs out of alignment. If I just place the image in another div, it still makes things move.
Is there any way to have the page centered with 90% width and everything else in the wrapper div, and also have the image in the top-right corner? If it would require a different type of thing, can someone help me figure it out? Something that works only in one browser won't help, as I want it to work as seamlessly as possible for the most people.
You might be looking to use absolute positioning,
#image { position:absolute; top:0; left:0; }
However this will need to stay relative to your wrapper:
#wrapper { position:relative; }
Though I'm strictly guessing, provide more info and you'll get a more definitive solution.
Use z-index to put the image on a higher layer.
http://www.w3schools.com/Css/pr_pos_z-index.asp
This way nothing else gets moved.
If you don't want it to affect anything else on the page, can I just check that it's not a background image? If it's not, then have you tried making it a background image? That way it won't/can't affect the document flow and nothing will be moved because of it.
Though if you already have one background image it might complicate things a little.