I'm trying to position an icon responsively which is part of a plugin in WordPress.
Using margin-top and margin-bottom works to position the icon further down the page, but top and bottom above 10px seems to reduce the height of the icon when used in conjunction with position: relative;
#media(max-width: 768px) {
#a2a_share_save_widget-3 {
position: relative !important;
top: 20px !important;
left: 95%;
margin-left: -37px;
background-color: transparent! important;
color: transparent! important;
}
}
If I reduce top to 10px, the icon goes back to full height again.
Html:
<div id="a2a_share_save_widget- 3" class="widget widget_a2a_share_save_widget">
<div class="a2a_kit a2a_kit_size_32 addtoany_list">
<a class="a2a_dd a2a_counter addtoany_share_save addtoany_share" href="https://www.addtoany.com/share"></a>.
</div>
</div>
What I want is to apply top or bottom to adjust position, not icon height.
Mobile page here
The issue is not with regards to the share widget's height being reduced. The issue is that overflow: hidden is given to its ancestor section - the share widget is technically overflowing and parts of it are hidden.
So to solve this, either remove/override the property overflow: hidden from section
#content section {
overflow: visible;
}
or have the widget's container take X amount of minimum height
div#main {
min-height: 80px;
}
I imagine you want to increase specificity as these examples are generic terms and you are using a wordpress theme
Related
I'm creating website and I have a small problem. At the end I set min-width: 1200px. When I change my internet browser to smaller resolution and scrolling horizontally, it does not affect to my menu items! How can I fix it?
#page{
width: 1200px; height:1000px;
}
#page #primaryMenu {
min-width: 1200px;
background-color: #151414;
margin: 0 auto;
padding: 0;
list-style: none;
text-align: center;
font-size: 14px;
width: 100%;
position: fixed;
z-index: 10;
box-shadow: 0 0 5px black;
}
#page #primaryMenu li {
display: inline-block;
margin: 20px 10px;
cursor: pointer;
}
#page #primaryMenu li a {
text-decoration: none;
color: white;
transition: 0.65s;
}
#page #primaryMenu li a:hover {
transition: 0.5s;
color: #d10239;
}
<div id="page">
<ul id="primaryMenu">
<li>STRONA GŁÓWNA</li>
<li>FRYZJERSTWO</li>
<li>KOSMETYKA</li>
<li>SOLARIUM</li>
<li>GALERIA</li>
<li>KONTAKT</li>
</ul>
</div>
EDIT
I don't want to do my website responsive, I want to set it with min-width 1200px; to all devices. Its menu sticks to the top and I don't want to follow vertical scroll.Example: When i change web browser resolution to 200x200 and try to scroll to the right, my menu(list items) stays in the same position.
The problem is when you are giving min-width in pixels it actually taking 1200px of the width.
If you are trying to achieve responsive design then use percentage.
Example: for #page #primarymenu use width as 100% or your desired value (in percentage). Then it will work just fine with all size screens
width:100%;
or
min-width:90%
position: fixed; on #page #primaryMenu : you are asking the browser to display your primary menu at a given x, y offset from the top left corner of the screen, scrolling or not.
Check the documentation about css position.
fixed :
Do not leave space for the element. Instead, position it at a specified position relative to the screen's viewport and don't move it when scrolled.
If I understand correctly, you want a fixed position on the vertical scroll so that the menu will be sticky to the viewport's top, and normal positioning on the horizontal scroll so the menu viewed by scrolling.
I don't think it can be done in with a css only solution, but check theses questions :
Position element fixed vertically, absolute horizontally
CSS: fixed position on x-axis but not y?
delete min-width: 1200px; and it will work fine
GOT SOLUTION IN JS: jsfiddle.net/vy8rbsv6/1
just got a question regarding relative & absolute positioning and applying clearfix to the main container cos I've written the code and it's not behaving as I expected.
Structure-wise this is a simple page about product history. nav-bar with drop-down menu at the top across the screen, then a big hero image across the screen, followed by a few paragraphs and a simple footer, that's it.
here's my problem:
I need to put 3 components in the hero image area - the hero image itself, one title word on the top left corner and one logo on the top right corner. What I've done is: I created a div and used the hero image as background image. I set the position value of the div to relative. I created another div to hold the title word and set the position to absolute, using top and left to give it a location. Following the same logic, I created another div to hold the logo and set it to float right, with position set to absolute and top and right to give a location. I've applied clearfix to the main div and everything looks ok on my screen (resolution 1280 x 1024) until I saw it on the wide screen(1680 x 1050) --- the logo is not on the hero image! It's to the right side of the hero image.
What caused this? I thought by putting 2 divs inside the main div and applying clearfix, the three will "get together" and act as one and won't separate... Is it because I haven't written any code for responsive layout? Or was it because I shouldn't have used the hero image as the background? Would this problem be solved if I used z-index instead to specify the stack order of hero image, logo and title word?
Below is my code and any help would be much appreciated!
<div id="history-content" class="clearfix">
<div id="history-image-text">HISTORY</div>
<div id="stamp">
<img src="./images/logo.png">
</div>
</div>
#history-content {
background-image: url('./images/heroimage.jpg');
min-height: 307px;
background-repeat: no-repeat;
position: relative;
}
#history-image-text {
color: #fff;
position: absolute;
top: 20px;
left: 50px;
font-size: 20px;
font-weight: bold;
}
#stamp img {
width: 10%; /*not sure I'm doing the right thing here either*/
height: 40%; /*not sure I'm doing the right thing here either*/
float: right;
position: absolute;
right: 100px;
top: 20px;
}
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
height: 0;
line-height: 0;
}
Few things:
Absolutely positioned elements are taken out of normal flow, hence doesn't affect the size of their parent.
Since they're out of normal flow, float has no effect on them (as far as i know)
Absolutely positioned elements shrink wraps to fit it's contents unless width and height is set explicitly or stretched using the top, right, bottom & left properties.
Now your parent div #history-content doesn't have any height set, and all of it's content of are absolutely positioned, So it's not visible (height 0)
applying a proper height for the parent seems to fix the issues for me.
Side note: unlike what you think, you don't have two absolutely positioned<div>'s, #stamp img absolutely positions the <img> inside div#stamp, for the same reason mentioned above, div#stamp is also invisible (height 0) you'll get the same result with and without it. And without floats
As others have said, float doesn't have an effect on absolute positioned elements, and so technically you don't need clearfix in this case.
I'm not exactly sure why your logo is positioned outside the outermost container #history-content, but you could try to put a border around the #history-content to further troubleshoot.
EDIT: Maybe check your hero image dimension, is it smaller than 1608px in width?
<div id="history-content">
<div id="history-image-text">HISTORY</div>
<div id="stamp">
<img src="./images/logo.png">
</div>
</div>
I've changed your CSS below
#history-content {
background-image: url('./images/heroimage.jpg');
min-height: 307px; /*set whatever minimum height you wish*/
background-repeat: no-repeat;
position: relative;
}
#history-image-text {
color: #fff;
position: absolute;
top: 20px;
left: 50px;
font-size: 20px;
font-weight: bold;
}
#stamp {
display: block;
position: absolute;
right: 100px;
top: 20px;
width: 10%; /*set width of image in containter instead*/
height: auto;
}
#stamp img {
max-width: 100%; /*image width will not stretch beyond 100% of container*/
height: auto;
}
JSFiddle: http://jsfiddle.net/5L9WL/3/
Here's what I'd like to do: have a banner across the top of a website which stretches all across. On the left is a menu, and on the right a logo image; the menu floats left, the image floats right.
The problem is the resizing of the browser window. Because the image floats right, it correctly moves as the window gets smaller. However, at some point it begins to float into the menu. Here is a Fiddle that illustrates this effect with two floating images. Resize the browser window to see how the two images overlap.
Setting
body {
min-width: 800px;
}
I can now make sure that the scrollbar appears as the browser window reaches a certain minimum width. However, that doesn't hinder the right-floating image to keep moving as the browser window keeps getting smaller. I tried to change position: relative but that didn't work. I tried to use Javascript to fixate the images once the browser window reaches its min-width but that didn't seem to have an impact either. Using min-width on the DIV and making the images children of the DIV didn't work either.
My question is: how can I make sure that, starting at a certain window size, the right-floating image stays put instead of floating into the left-floating menu?
EDIT: Oh dear, I forgot to mention a rather important detail: the menu bar at the top needs to be sticky. That is why I used the position: fixed property for the DIV. The other page content is supposed to scroll under that menu and out of the window, see the modified fiddle here which is based on ntgCleaner's answer. This kind-of changes the whole thing, doesn't it! Sorry about that...
Thanks!
A couple things I changed:
I made your banner DIV a container instead of just a free floating div. Probably not necessary.
I gave that banner div a min-width:280px and made it overflow:hidden;
I made the images just float left and right, not positioned relatively or absolute (since it's in the div container now).
#banner {
left: 0px;
top: 0px;
width: 100%;
height: 60px;
background-color: lightblue;
z-index: 1;
opacity: 0.8;
overflow:hidden;
min-width:280px;
}
#left {
float:left;
margin:5px;
height:40px;
}
#right {
float:right;
margin:5px;
height:40px;
}
Here's the fiddle
EDITED FOR THE EDITED QUESTION:
You will just need to place all of your content under your header into a div, then give that div a top margin of the height of your fixed div. In this caes, it's 60px.
Add this to your HTML
<div id="content">
this <br>
is <br>
some <br>
test <br>
text <br>
</div>
then add this to your CSS
#content {
margin:60px 0px 0px 0px;
}
Here's the new fiddle
Is this what you are after? http://jsfiddle.net/9wNEx/10/
You are not using the position: fixed correctly. Fixed means 'positioned relative to the viewport or browser window', and that is exactly what you are experiencing.
I removed the position: fixed from the images, and placed them inside the div. This should keep them always on top of the page, as they are inside the div that is still positioned fixed.
Also I tweaked some of the other styling to replicate your example. Note that i removed the fixed height of the head and replaced it by a padding bottom. This way the height will follow the content whenever the screen size becomes to small and the images are forced underneath each other.
The css looks like this now:
#banner {
left: 0px;
top: 0px;
width: 100%;
padding-bottom: 15px;
background-color: lightblue;
z-index: 1;
position: fixed;
opacity: 0.8;
}
#left {
float: left;
margin-left: 10px;
margin-top: 5px;
height: 40px;
}
#right {
float: right;
margin-right: 10px;
margin-top: 5px;
height: 40px;
}
I changed your HTML to put the <img> tags inside the banner, and added the min-width to the #banner since it has position: fixed. You'll still need to add min-width to the body or a container that wraps all other elements if you want there to be a min-width of the entire page.
http://jsfiddle.net/Wexcode/s8bQL/
<div id="banner">
<img id="left" src="http://www.google.com/images/srpr/logo3w.png" />
<img id="right" src="http://www.google.com/images/srpr/logo3w.png" />
</div>
#banner {
width: 100%;
min-width: 800px;
height: 60px;
background-color: lightblue;
z-index: 1;
position: fixed;
opacity: 0.8; }
#left {
float: left;
margin: 5px 0 0 10px;
height: 40px; }
#right {
float: right;
margin: 5px 10px 0 0;
height: 40px; }
When I look at your Fiddle I think your problem isn't the floats at all. position:fixed supersedes float. Those two elements aren't floating at all, they're in a fixed position (similar to an absolute position), which is why they overlap when they don't have enough room.
Take out float:left and float:right, the result will be the same. Also, top, left, bottom, and right don't work on non-positioned elements. So they are superfluous on your banner.
If you use floats, however, when there is not enough room the right image will wrap underneath the left. See http://codepen.io/morewry/pen/rjCGd. Assuming the heights on the images were set for jsfiddle testing only, all you need is:
.banner {
padding: 5px; /* don't repeat padding unnecessarily */
min-width: ??; /* to keep floats from wrapping, set one */
overflow: hidden; /* clearfix */
}
.right { float: right; } /* only need one float, don't over-complicate it with two */
I am looking to create a layout for my site where a sidebar is fixed at the right side of the viewport with a 30% width (content is to the left of it) until the browser window reaches a certain width, at which point I want the content and sidebar to be centred and no longer grow with the browser window (since it becomes hard to read at extremely large widths). Here is an idea of the html being used:
<body>
<div id=sidebar>sidebar content</div>
<div id=content>articles, images, etc</div>
And here is some of the basic HTML being used to format it:
#sidebar {
width: 30%;
position: fixed;
right: 0;
top: 0;
background-color: gray;
}
#content {
width: 70%;
margin-right: 30%;
max-width: 49em;
}
At this point, when the content gets wider than 49em, it sticks to the right side of the page creating an ever-increasing gap between it and the fixed sidebar. What I would like is to have it reach a max width of 49em, have the sidebar reach 21em (so they are still 70:30) and remain fixed, but have that whole 70em worth of width centered in the viewport.
I also want the background colour of the sidebar to span the entire way from the edge of the content to the right-hand side of the screen (i.e. a containing div that centers both the sidebar and content with a max width of 70em doesn't work since the background of the sidebar would only go to the edge of the containing div instead of the viewport). That one isn't as important because it might look fine to put some sort of textured background on the body element to make it look like as though the page is "sitting" on some textured surface (not ideal, but fine). I just haven't been able to center the sidebar and content while maintaining the sidebar's fixed positioning.
Thanks!
Update: here's a very rough schematic of what I am looking for:
|A|B|C|D|
B is the content area with a max width of 49em. C is the sidebar with max width of 21em AND it has to have fixed positioning. A and D would be the margins (each half of the difference between the viewport width and 70em). Background of D must be the same colour (gray) as the sidebar. Background of A must be white.
This solution meets most of your requirements, but you need to provide the width of the content+sidebar (in this case, I put 70em)
HTML:
<div id="container">
<div id="content">articles, images, etc</div>
<div id="sidebar">sidebar content</div>
</div>
CSS:
#sidebar {
width: 29%; background-color: gray; border: 1px gold solid;
float: left;
position: fixed; right: 0; top: 0;
}
#content {
width: 69%; max-width: 49em; border: 1px silver solid;
float: left;
}
#container {
max-width: 70em;
margin: 0px auto;
}
jsFiddle here. (You can test by just dragging the middle frame left and right)
Something like this:
<body>
<div id="wrapper">
<div id="sidebar">sidebar content</div>
<div id="content">articles, images, etc</div>
</div>
</body>
With CSS that is similar to this:
body { background:url(imageForSidebar.png) right top repeat-y; }
#wrapper {
max-width:1000px;
margin:0 auto;
background:#FFF url(imageForSidebar.png) -66% top repeat-y;
position:relative;
}
#sidebar {
width:30%;
float:right;
position: fixed;
}
#content { margin-right:30%; }
The background image on the body would take care of it going all the way to the edge of the screen. You would use a background image that was large enough to do this, but small enough so that it gets covered by the #wrapper background. The background image on the wrapper works in a similar way, but in this case it is just making sure that the sidebar image always extends to the bottom of the content.
You can add media queries into your css
//your normal css
#sidebar {
width: 30%;
position: fixed;
right: 0;
top: 0;
background-color: gray;}
//media query (you can add max and min width of the sceen or one of both)
#media screen and (min-width:500px) {
#sidebar{
//css you want to apply when when width is changed
}
}
I'm trying to make a website with a header that repeats along the entire page width, with the website's name centered in the header, and a logo slightly offset from the website name. If the screen width is too small to display the entirety of the logo, I just want it to cut off the logo to the right, otherwise the entire logo will be displayed (i.e. the monitor/window is big enough. What I don't want is to float the image to the right. I want it to, more or less, be absolutely positioned near the title.
However, I can't figure out a way to do this. I can't use overflow-x or overflow-y (because of browser support) and the mark-up i currently have just widens the window with a scroll bar to accomodate the entire image (see screenshot).
Here is the screen shot
http://img691.imageshack.us/img691/3188/screenshot03062011.jpg
Here is the mark up and CSS:
<div id="header-wrap">
<div id="header">
<img src="title-card.png" />
<img id="this-chick-logo" src="this-chick-logo.png" />
</div>
</div>
--
body
{
background: #dfb1e4;
padding: 0px;
margin: 0px;
}
#header-wrap
{
background: url('header-bg.png') repeat-x;
width: 100%;
height: 291px;
}
#header
{
margin: 0 auto;
width: 1000px;
text-align: center;
}
#header img
{
margin-top: 105px;
}
#header img#this-chick-logo
{
margin-top: -75px;
margin-left: 680px;
overflow: hidden;
}
Thanks.
Add
overflow: hidden; to #header-wrap
Dont put it on the image.
overflow: hidden; either needs to be added to #header-wrap and possible removed from the img#this-check-logo. Also if the girl likes to push off to the right and some of it gets cut off in the overflow and you don't want that I'd move her a few pixels at a time back towards the left until you get it a way you like it. If you don't mind a little cut off just leave it and only add the overflow: hidden.