My header is structured as a table. I finally managed to make it so that the last li is floated to the right and X % to the left while still being compatible with different screen sizes. However, my 'profile picture' div is resizing and resembles a squished circle as a result. How do I make sure that the div is always 40px in width and height (if this is the right way to go around it)?
CSS
#hdr-profile {
align-items: center;
border: 1px dotted red;
display: flex;
margin-left: auto;
white-space: nowrap;
}
#hdr-profile-pic {
width: 40px;
height: 40px;
background: white url("https://scontent-lhr3-1.xx.fbcdn.net/hphotos-xfa1/v/t1.0-9/11760274_1109394289087955_3712628479579288500_n.jpg?oh=ff64d9b1a44338d53d414459ff92aa71&oe=574558FA") no-repeat;
background-size: 100% 100%;
border-radius: 50%;
cursor: pointer;
}
HTML
<li>
<div id="hdr-profile">
<div id="hdr-profile-pic" title="My Profile">
<div id="hdr-profile-country" title="Liam is in Spain"></div>
</div>
<span id="hdr-profile-name" class="select">Liam Macmillan</span>
<i class="material-icons md-26 icn-lft icn-hvr">arrow_drop_down</i>
</div>
</li>
An easy way would be to add a !important after the 40px in your css of the profile picture
I suspect it's because of the size of the drop-down. In the JSFiddle that Nenad Vracar linked, the picture comes in totally fine. Don't use !important to force the size, it's bad practice and causes unexpected behavior. Instead, try experimenting with the size of the dropdown. I don't have the rest of your code, or I'd have looked into it.
Related
So I am creating this responsive website, and the images were fine at first, but then I started working on other parts of the site and when I come back to the main page the first 2 images are small and the 3rd image is the correct size. I am not quite sure what happened. I used inspect element and the only attributes applied to the images are the ones mentioned below except the .left one. What seems to be the problem?
Worth mentioning that if I increase the width (now at 70%) all of the images grow at the same rate. The image size also comes back to normal as soon as I change the text of the image below. It seems that longer text makes the image grow bigger and vice versa.
Thank you in advance for the help and
HTML
<div class="hottest">
<div>
<img src="img/main-page/444.jpg"/>
<p>J-Cole: KOD</p>
<button class="btn3">Check out </button>
</div>
<div>
<img src="img/main-page/444.jpg" />
<p>Jay-Z: 444</p>
<button class="btn3">Check out </button>
</div>
<div>
<img src="img/main-page/hus.jpg" />
<p>J-Hus: Big Conspiracy</p>
<button class="btn3">Check out </button>
</div>
</div>
CSS
.hottest {
display: flex;
justify-content: space-between;
color: white;
margin: 3vw;
margin-bottom: 10vw;
width: 100%;
}
.hottest p {
padding-left: 1vw;
margin: 1vw;
font-size: 3vw;
}
.hottest .left {
float: left;
margin-right: 2vw;
}
.hottest a {
text-decoration: none;
color: black;
}
.hottest img {
width: 70%;
}
the image width is 70% of it parent width, and the text makes the parent width bigger because you are using flex. flex makes the div width only as big as the content.
try giving your divs flex-basis: 100%; which should give your divs equal widths.
The text text would enlargen your parent div container. If you set the divs to a specific width and height, does the problem still occur?
In this link it looks like a button
<div class="button-row">
</span>
</div>
The css
.button-row {
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 10px;
}
.arrow-right {
background: url('#{$iconsImagesPath}black-right-arrow.png') no-repeat;
}
The image is not visible on the button , but I see it on the inspector, I don't know what the problem is.
Try to put some min-height and min-width (or) height and width. since it is a inline element also no content inside.
Try below in your code
.arrow-right {
background: url('#{$iconsImagesPath}black-right-arrow.png') no-repeat;
display: inline-block;
min-width: 200px;
min-height: 200px;
background-size: 100%;
}
UPDATE
Since you are using Bootstrap buttons, you are limited to the confines of the Bootstrap Button Classes. I have seen that you can use the <button> element with an image tag inside, but I'm not sure if that still works in bootstrap 4.
Can you try the code I updated in my answer (using :before and two classes).
If this doesn't work, remove the other classes on your anchor tag and add width and height to .arrow-right. Once you see the image, start adding classes until it disappears again, then you know what you need to troubleshoot.
HTML
<div class="button-row">
<a href="<% url('/') class="btn-link btn-blue mbright {!! t("profile.unsuscribe_button_yes") !!}
<span class="arrow-right arrow-image"></span>
</a>
</div>
CSS
.arrow-right:before {
display: inline-block;
background-color: transparent;
background-position : center center;
background-repeat:no-repeat;
}
.arrow-image:before {
background-image: url('#{$iconsImagesPath}black-right-arrow.png');
}
The root cause of the problem is the empty span that has a background image.
By default, the width and height of an empty span will be 0px. This causes the image to get hidden.
The easy way to fix this problem is by assigning the height and width attributes to the span.
Here is an example for making the background image of a span visible when the span is empty:
<div class="button-row">
<a href="link-url-here">
<!-- Set span dimensions to 20x20 to make the background visible -->
<!-- Also, disable background repetition to show the image only once -->
<span class="arrow-right arrow-image"
style="height: 20px; width: 20px; background-repeat: no-repeat;">
</span>
</a>
</div>
Embarrassingly, I'm having trouble making one div (of any length) centered and one div (of any length) floating on the right. So I have a container with menu buttons that are centered and a link to the users control panel on the right. It should look something like this
----------------------------------------------------------------------------
| |----Menu Items----| |--ControlPanel--|
----------------------------------------------------------------------------
I know, this question has probably been asked a few times but I've searched through and through and they all seem to rely on percentages or fixed widths.
I have a container
.container {
height: 50px;
width: 100%;
padding: 10px 10px;
}
.menublock {
width: 200px;
margin: 0 auto;
padding: 0;
}
.controllinks {
float:right;
}
The html is like this
<div class="container">
<div class="menublock">
<span class="menuitem">Streams</span>
<span class="menuitem">Profile</span>
<span class="menuitem">Friends</span>
</div>
<div class="controllinks">
A link the users control panel
</div>
</div>
By changing menublock and controllinks to display:inline-block (or inline) I can get them on the same line just fine. .menublock does not seem to like being centered in this display and margin: 0 auto; doesn't work. I was messing around with .menublock display:table but that didn't want to stay on the same row.
Maybe it was too easy so you didn't even try it, but this fixed the thing in my test file: Just swap the order of <div class="controllinks"> and <div class="menublock">:
<div class="container">
<div class="controllinks">
A link the users control panel
</div>
<div class="menublock">
<span class="menuitem">Streams</span>
<span class="menuitem">Profile</span>
<span class="menuitem">Friends</span>
</div>
</div>
An easy solution is to use absolute positioning.
.container {
height: 50px;
width: 100%;
padding: 10px 10px;
/*this makes the child divs relative to the parent*/
position:relative;
}
.menublock {
width: 200px;
margin: 0 auto;
padding: 0;
}
.controllinks {
/*this puts the controllinks on the right.
Be warned, that if the page is too small, controllinks can no overlap on menublock.
This can be fixed with media queries.*/
position:absolute;
right:0px;
}
Both Merlin's and James' solutions worked well. They all achieved the same result.
Another solution I just found was adding text-align: center; to the .container class. It turns out inline elements respond to text-align (although it seems strange to think of divs in this way).
I have a navigation bar which consists of two parts. The left area, which is where the actual links are. And the right area, which is were a search box will display.
The left area is fluid, while the right area has a fixed width.
What I'm trying to figure out is how to set the padding on my navigation links so that it will use up the full fluid width of the left area. (The navigation links are buttons with a hover effect, I would like them to cover the full navigation bar regardless of it's width)
See the example below
What I'm trying to do (fluid/percentage based padding based on bar width)
width 300px
|========================================|========|
|---Link------Link------Link------Link---| Search |
|========================================|========|
width 400px
- padding on Links automatically adjusts to fill the bar
|================================================|========|
|----Link--------Link--------Link--------Link----| Search |
|================================================|========|
How would I go about achieving this? I've tried messing with padding percentages but I can't seem to get it to work as desired. Are padding percentages even the best way to go about this?
Depending on what support level you desire, you could use flexboxes.
I'll just assume you want to support older browsers, tho, where the best solution is propably a normal 2 column layout, with the links inside the left column getting a percentage width (25% in your example) and propably a min-width.
Heres a working fiddle. I made the main box resizeable for easier demonstration.
reduce the width of the container with padding and absolutely position the search box inside the padding. Here's an example on jsbin
HTML (note that some whitespace has been deliberately removed so that there aren't text nodes taking up space.):
<nav class="">
<div class="nav-link-container">
<div class="nav-link"><a >link</a>
</div><div class="nav-link"><a >link</a>
</div><div class="nav-link"><a >link</a>
</div><div class="nav-link"><a >link</a>
</div>
</div><div class="search-box-container">
<input class="search-box" placeholder="search">
</div>
</nav>
CSS:
nav {
padding-right: 220px;
position: relative;
background: lightblue;
line-height: 1.5em;
}
.nav-link-container {
display: inline-block;
width: 100%;
text-align: center;
}
.nav-link {
display: inline-block;
width: 25%;
outline: 1px dashed grey;
}
.search-box-container {
position: absolute;
right: 0;
top:0;
width: 210px;
display: inline-block;
}
.search-box {
width: 200px;
border-radius: 5px;
border: 1px solid lightgrey;
padding-left: 5px
}
NB: I've only used outline to show where the links are, you wouldn't do that in practise.
I'm not one to usually ask, but I cannot seem to get this done using CSS/CSS3.
Note, i'll be happy even with a not-so-supported CSS3 style, like resize.
The jsFiddle for it.
The current unresizable code:
HTML:
<div id="boxes">
<a id="about1" class="aboutbox" href="/property-for-sale">
</a>
<a id="about2" class="aboutbox" href="/why-cyprus"> </a>
<a id="about3" class="aboutbox" href="/why-zantis"> </a>
<span class="stretch"> </span>
</div>
CSS:
#boxes {
padding: 70px 0 70px 0;
text-align: justify;
-ms-text-justify: distribute-all-lines;
text-justify: distribute-all-lines;
}
.aboutbox {
padding: 0;
margin: 0;
display: inline-block;
*display: inline;
zoom: 1;
width: 320px;
height: 225px;
vertical-align: top;
text-align: left;
background-size: auto auto;
}
#about1 {
background:#000 url('http://zantisgroup.com.cy/templates/oneweb/images/SEA_FRONT.jpg') no-repeat center center;
}
#about2 {
background:#000 url('http://zantisgroup.com.cy/templates/oneweb/images/SEA_FRONT.jpg') no-repeat center center;
}
#about3 {
background:#000 url('http://zantisgroup.com.cy/templates/oneweb/images/SEA_FRONT.jpg') no-repeat center center;
}
#about1:hover {
background:#000 url('http://zantisgroup.com.cy/templates/oneweb/images/SEA_FRONT_a.jpg') no-repeat center center;
}
#about2:hover {
background:#000 url('http://zantisgroup.com.cy/templates/oneweb/images/SEA_FRONT_a.jpg') no-repeat center center;
}
#about3:hover {
background:#000 url('http://zantisgroup.com.cy/templates/oneweb/images/SEA_FRONT_a.jpg') no-repeat center center;
}
If you resize the html panel, you'll see that they float as expected. I'm using a common method to distribute them equally along the parent div. I'm also using CSS to create a image button with hover effects (don't ask about the nature of the graphics ..).
I'd like to get these to resize accordingly when the html panel is resized; i.e. get the actual button to scale down and remain in one line.
I've got a working solution with jQuery, but spent my time getting this without it and got nowhere. Any ideas?
tia.
Aspect ratio
The main issue here is maintaining the relative dimensions of the images (the aspect ratio). A couple potential ways to do this without using JavaScript or jQuery are as follows:
Using foreground images (img tags).
Using calc() to make the height of the image wrapper be a fixed % of its width.
I didn't have much luck with calc(). The closest I got was attempting to make the height a fixed % of the viewport width (using the vw unit). It didn't seem very promising. I can't entirely rule out a solution being possible using calc(), but so far the only obvious CSS solution for maintaining the aspect ratio requires the use of foreground images.
Updated Demo
Hover state for foreground images
Achieving the hover effect using foreground images is fairly simple. Add a pair of images to each image wrapper, and apply the :hover pseudo-class to the wrapper to turn each image on or off as needed.
<a class="aboutbox" ...>
<img class="off" src="..." alt=""/>
<img class="on" src="..." alt=""/>
</a>
...
.aboutbox:hover img.off { display: none; }
.aboutbox img.on { display: none; }
.aboutbox:hover img.on { display: inline-block; }
Justifying images
The trickiest part of justifying the images is that there needs to be some whitespace between the image wrappers (in the HTML source code) for the justification to have a chance of working, for the same reason that words in a sentence need to have whitespace between them (otherwise, they'll be treated as a single word).
But whitespace between inline-block elements in the HTML source code causes 3-4px of horizontal spacing to be added between the elements (with no CSS solution available for avoiding it that's truly cross-browser and safe). That extra space, although necessary for the justification to work, is mostly likely unwanted visually and may prevent all of the images from fitting on the same line in some cases.
Here's an initial demo with a crude solution: limiting the width of each image to 31%, to allow enough room (on most screen sizes) for the whitespace between the image wrappers.
The other issue with justifying the images is that, as with text, justifying images only works if the content spans at least 2 lines. One workaround for this is to add a span tag at the end of the content with display:inline-block and width:90%. The initial demo demonstrates this.
#media queries
It's worth noting that the justification is only needed when the screen is wide enough to allow extra space between the images. #media queries can be used to only apply the justification on large screens. On small screens, the image wrappers can be floated so that there's no extra space between them.
Updated demo using #media queries
One solution is to replace the background image with an actual image. And use css to control what image is displayed, and to resize based on the containing elements. So you wrap each link in a div, which re-sizes based on your boxes container. Using css you set the image url using the content: selector.
http://jsfiddle.net/CPNbS/6/
Your resulting html looks something like:
<div id="boxes">
<div class="link" id="about1">
<a class="aboutbox" href="/property-for-sale"><img /></a>
</div>
<div class="link" id="about2">
<a class="aboutbox" href="/why-cyprus"><img /></a>
</div>
<div class="link" id="about3">
<a class="aboutbox" href="/why-zantis"><img /></a>
</div>
</div>
and the css:
.link{width:30%;height:100%;border:1px solid green;display: inline-block;
*display: inline;
zoom: 1;}
.link a{padding: 0;
margin: 0;
display:block;
width: 100%;
height:100%;
vertical-align: top;
text-align: left;
background-size: auto auto;}
.link a img{max-width:100%;}
#about1 a img{
content:url("http://zantisgroup.com.cy/templates/oneweb/images/SEA_FRONT.jpg");
}
#about2 a img{
content:url("http://zantisgroup.com.cy/templates/oneweb/images/SEA_FRONT.jpg");
}
#about3 a img{
content:url("http://zantisgroup.com.cy/templates/oneweb/images/SEA_FRONT.jpg");
}
#about1:hover a img,#about2:hover a img,#about3:hover a img{
content:url("http://blogs.mathworks.com/pick/files/zebrainpastelfield.png");
}
You could also use a responsive design technique by including media queries. But this is more for different devices rather than re-sizing, so does not look as 'fluid'.
Hope this helps...
To do this with background images as you've set it up, you have to get rid of the width setting on the each item, and size the background image with background-size: 100% 100%; To maintain the height to width proportion of the .aboutboxes, use the intrinsic ratio method here with a percentage based padding-bottom. More here: http://alistapart.com/article/creating-intrinsic-ratios-for-video
.aboutbox {
position: relative;
padding-bottom: 70.3125%;
display: block;
width: auto;
height: 0;
background-size: 100% 100% !important;
}
If you'd like you can include a max-width or padding on the wrapper to limit how far they stretch.
Updated your fiddle here: http://jsfiddle.net/carasin/s4pUe/11/
Just be aware of some limited IE support of background-size: http://caniuse.com/#feat=background-img-opts
#boxes {
white-space: nowrap;
}
boxes a{
display:inline-block;
width: 33%;
background-size: cover;
}
but I'd rather use img tag see http://jsfiddle.net/Vicky_007/GZMvT/14/
and you can also emulate table:
#boxes {
display: table;
width: 100%;
table-layout:fixed;
}
#boxes a{
display:table-cell;
background-size: cover;
}