I am trying to align all of the social media icons on one line, but for some reason they are wrapping. (twitter and fbconnect):
http://bit.ly/IqwM20
Any help on this would be greatly appreciated. I've tried a lot of stuff (floating left, increasing the containing div container's size, using display: inline-block ) but nothing seems to work.
Many thanks,
gvanto
Adjust the file pme.css as follows:
Line 140
#socmedia-bar {
clear: both;
float: right;
position: relative;
top: 30px;
height: 21px;
background-color: #6F6;
width: 345px;
}
Line 150
#socmedia-bar .region-socmed-icons {
float: left;
height: 20px;
margin: 0 0 0 5px;
position: relative;
}
Line 178
#socmedia-bar .region.region-facebook-connect {
float: right;
height: 20px;
}
The problem seems to be lack of horizontal space so the twitter button wraps.
If you specify a width on #socmedia-bar .region-socmed-icons of say 250px they will all sit on the same line.
If you are talking about the social media buttons on the top section, then you have the widths wrong. The social media buttons total width comes to 250px but the wrapper div is only 200px wide. Hence the wrapping. Increase the width of the wrapper #socmedia-bar and it will be fine.
Related
I've written up a very basic HTML and CSS page to test out my responsive web design skills but the calculation of the padding is going wrong and I can't figure out why, any help from people would be greatly appreciated.
Below I have added my code for you to see. I have one 'main' with a 'section' and an 'aside' in it. Inside both are a box of two different sizes. I calculated the size and margin of the boxes ok but the padding won't work properly. I calculated the padding by target/context=result, which in this case for the first box is 25px padding / 500px = 0.05 (5%), and for the second box is 25px/300px= 0.08333333 (8.333333%).
However this does not cause a 25px padding but instead creates a much bigger one. When I look at the Google Chrome Developer Tool it tells me that the padding for the first box is now 56.875px and the second box is 94.797px.
I've been trying to solve this for sometime now trying different things but can't manage to figure it out.
Any help on this would be greatly appreciated. Code is below.
body, section, aside, p {
margin: 0;
padding: 0;
}
main {
width:90%; /* viewport is 1264px wide, 90% width is 1137.590px */
background-color: lightgreen;
min-height: 1000px;
margin: 0 auto;
}
section {
height: 500px;
width: 44.067133%; /* 500/1137.590 */
background-color: green;
float: left;
margin: 04.398736%; /* 50.031/1137.590 */
padding: 5%; / 25/500 */
}
aside {
height: 300px;
width: 26.434279%; /* 300/1137.590 */
background-color: blue;
float: right;
margin: 04.398736%; /* 50.031/1137.590 */
padding: 8.3333333%; /* 25/300 */
color: lightblue;
}
<body>
<main>
<section class="box-green">
<p>This is a green box</p>
</section>
<aside class="box-blue">
<p>This is a blue box</p>
</aside>
</main>
</body>
When you calculate padding in percentage, that amount is calculated by the width of the containing block, not the height.
https://developer.mozilla.org/en-US/docs/Web/CSS/padding
Padding, when given in percents, is based on the containing element not the height of the element itself.
Although this is not the correct way to write a responsive code but just to make you understand the padding % is not determined from the div size but its determined from the screen size. Also the margin you are using 4.398736% is adding on both left and right side of both the divs. Plus the padding of 5% on both side of .section and padding of 8.33333% on both side of .aside. its making the total size to 115.96555%.
For your understanding if you want both the divs (section and aside) to align side by side. Use the below written css style for both of them.
.section {
height: 500px;
width: 44.067133%;
background-color: green;
float: left;
margin: 02.199736%;
padding: 5%;
display: inline-block;
}
.aside {
height: 300px;
width: 26.434279%;
background-color: blue;
float: right;
margin: 02.199736%;
padding: 5%;
color: lightblue;
display: inline-block;
}
Hope this helps..
Check out this page: Link
What CSS i should write to make the div #mainframe go on the side of the #sidebar ???
Your problem is the width of the mainframe is 100%. use a percentage for the sidebar as well in a combination that equals 100% ie..
#sidebar{width:15%;}
#mainframe{width:85%;}
It will then sit right next to the sidebar. Be aware that padding and borders will affect the width though.
You can solve it by giving both a width %.
#mainframe {
background-color: #756472;
display: block;
float: left;
width: 80%;
}
#sidebar {
background-color: #8C8C8C;
display: block;
float: left;
width: 20%;
}
For the last few days I have been thinking and working on a website. When playing around with resizing i found out that the site doesn't do such a good job. I think the site should look good from 1024 by 768 and up.
So when resizing the page below to the minium dimension you see the the top menu will get squashed together. Eventhough there would be enough space for all menu items. And also I would like the images to get resized properly to the window size.
Here is the link
http://bit.ly/NpE9cF
Would someone please help me to give me some practical advice?
Should I do the resize work with something like jquery? Or can i fix these issues in css?
Thanks very much.
In style.css you have some fixed width for ul#primary li a {}.
Change this width to some % value. And also add some min-width so that after certain resize the width will not decrease further.
change
ul#primary li a {
display: block;
float: left;
margin: 0;
padding: 20px 20px 11px;
width: 192px;
}
to
ul#primary li a {
display: block;
float: left;
margin: 0;
min-width: 100px;
padding: 20px 20px 11px;
width: 20%;
}
in style.css file.
I have designed a website and am a little bit stumped right now.
If you view the website at:
http://www.noxinnovations.com/portfolio/charidimos/
If you change the size of the window you will notice the Navigation overlaps the logo/header.
Anyway to change this? What I want to do virtually is to make the window have a scroll bar appear if that is possible.
Any ideas?
Thank you :-D.
It's your width: 100%; in your #header element that's causing your strange overflow behavior. Place your #logo and #navigation elements inside of another div with a fixed height and width that sits inside of the #header, then give your #header the property overflow: hidden; and that should fix you right up.
If you want your navigation not to overlap, you can do the following
#navigation {
width: 500px;
height: 100px;
padding-top: 52px;
position: fixed; // CHANGE FROM RELATIVE TO FIXED
left: 770px; // ADD THIS BIT OF POSITIONING (ADJUST AS NECESSARY)
float: right; //REMOVE THIS FLOAT
text-align: center;
vertical-align: middle;
}
I am building a 3 column web page (header & menu bar above a left nav, main area and right sidebar with a full width footer on the bottom). I have background colors for each column but they cut off at the end of the text instead of filling the whole column. Is there a way to fill the whole column that does not rely on using a table (td)?
Here is my CSS for the general layout:
#container
{
float: left;
width: 100%; /* IE doubles the margins on floats, this takes care of the problem */
display: inline; /* this is where Ryan Brill (author of the ALA's article) and I go in "opposite directions" */
margin-left: -200px;
}
#left
{
float: left;
width: 180px; /* IE doubles the margins on floats, this takes care of the problem */
display: inline;
margin-left: 200px;
padding: 0px 0px 0px 5px;
background: url('/App_Themes/Default/images/RightColumnBackground.png') repeat left top;
}
#main
{
/* the width from #left (180px) + the negative margin from #container (200px) */
margin-left: 380px;
padding: 0px 0px 0px 5px;
}
#sidebar
{
/* this is to keep the content of #sidebar to the right of #main even if the content of "main is shorter */
padding-left: 100%; /* this is to "bring back" the #sidebar that has been moved out of the viewport because of the padding value */
margin-left: -220px;
}
I know I can set a height in the style but that pins the height to a certain number of pixels. Is there a height: fill; type option?
This is a very common problem. A good approach is to use faux columns.
Not in any CSS that'd be currently widely supported across browsers, but there are ways of approximating it.
What you need is the Perfect Liquid Layout in Percentage widths, em widths, or pixel widths.