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.
Related
I am creating a website with Wordpress for my mother-in-law (that's for the girly design). Basically I am near completion, but I am way over my head with two issues in the CSS. These seem very basic issues even from my standpoint of view, but with hours and hours of tinkering I am fresh out of ideas and Google didn't help me this time. It's been a while since I have had to create or modify any CSS.
First problem:
I cannot get the horizontal menu to center. I have tried to remove the float:left, I have tried to replace it with float:none and I have changed the display: block and display:inline lines to inline-blocks but the menu stays in its position. Only difference I have managed to make is to move the whole menu to the top of the page and that's not desired. What could be the issue in this?
Second problem:
There seems to be padding (the white lines) at the top of the menu and at the bottom and top of the small menu (mobile). I have tracked down all the padding-lines in the CSS but none of them really make a difference, only one which removed the horizontal paddings and that's not desired.
I would be really glad if somebody spots where I have gone wrong!
The website is at http://janenlahwr.cluster020.hosting.ovh.net/
Thanks in advance!
Best regards,
Tero Korhonen
Lappeenranta, Finland
Hi Tero,
the first problem has really quick solution - CSS3 Flexbox. You can read about it on this w3schools site.
Remove unnecessary float: left and add display: flex and justify-content: center to .main-navigation ul. So it should looks like this:
.main-navigation ul {
margin: 0px 0 0 0;
padding: 0px 0;
padding-left: 0px;
list-style-type: none;
display: flex;
justify-content: center;
}
Second problem you can fix with setting div.site-logo max-height = height your logo (I see that is 200px). So in this case should looks like this:
.site-logo {
min-height: 70px;
padding: 0px;
float: left;
line-height: normal;
max-height: 200px;
}
Edit:
Sorry, I forgott check for lower resolutions. There is problem with overflow. You set in style.css:640 overflow: hidden and it works correctly since resolution is above 800px. If not then activates this rule:
#media only screen and (max-width: 800px) {
#main {
overflow: visible;
}
}
that overwrites previous correct rule for #main overflow: hidden. So you have two options: delete this rule for screens over 800px or change this property from visible to hidden.
I hope I helped you with your problems :) Good luck!
For the menu problem, change your CSS rules like this:
.main-navigation ul {
margin: 0px 0 0 0;
padding: 0px 0;
padding-left: 0px;
list-style-type: none;
/* remove float: left; */
text-align: center; /* added */
width: 100%; /* added */
}
.main-navigation ul li {
position: relative;
display: inline-block;
/* remove float: left; */
text-align: center; /* not necessary */
}
I am using a template for my blogger blog in which images are set to resize automatically to fit the whole width. Therefore no matter I align a photo to left or right or resize the photo, they will always appear as full width. There is however one insatance I can override this, if I include the photo with this code:
<img alt="" border="0" src="##" id="BLOGGER_PHOTO_ID_5428874514942438946" style="cursor: hand; cursor: pointer; float: right; height: 240px; margin: 0 0 10px 10px; width: 320px;" />
However each time I create a post I have to add this manually for each photo because blogger automatically adds this piece of code for a photo that is aligned right as well:
<img border="0" src="##" height="240" width="320" />
But above code won't do it, and it is also a problem for previous posts. I found a part in xml file of my template a part which I believe can be the part setting the sizes of the images, here it is:
img{max-width:100%;width:auto\9;height:auto;vertical-align:middle;border:0;-ms-interpolation-mode:bicubic}
Though I am not sure if it is really that part, and I don't know if how I can change it and that is also because I not good with xml codes.
Any ideas how I can fix that problem?
Thanks.
img{max-width:100%;width:auto\9;height:auto;vertical-align:middle;border:0;-ms-interpolation-mode:bicubic}
The above part, which I was thinking might be the solution, was actually not. While going through the code, I checked all width values that might be corresponded to blog posts and found this part:
.post h1 {
padding: 0 10px;
}
.post img{max-width:100%;width: 100%;
height: auto;
margin-left: -13px;}
.entry-container {
background: #FFF;
position: relative;
margin-bottom: -10px;
color: #444;
font-size: 14px;
padding: 30px 40px 30px 40px;
line-height: 26px;
}
Here, width: 100% was the part forcing all the images to appear full width. My first solution was to set it to width: auto but it didn't help. Thought specifying width or height in xml file wouldn't be necessary so I went ahead and removed the width and height, making the final code like this:
.post h1 {
padding: 0 10px;
}
.post img{max-width:100%;
margin-left: -13px;}
.entry-container {
background: #FFF;
position: relative;
margin-bottom: -10px;
color: #444;
font-size: 14px;
padding: 30px 40px 30px 40px;
line-height: 26px;
}
It all works fine now and all the images went back to original sizes they are set.
P.S. There is another code right below to this one which is exactly same but it controls the static pages, I fixed it the same way as well.
I was facing the same problem.
I found out the img class as suggested by #H.Aziz.
.post-image img{
max-width:100%;
height:auto;
}
But there was no width attribute at all to delete.
The way I accomplished the goal was by changing max-width:
.post-image img{
max-width:50%;
height:auto;
}
This reduced the size of image to the appropriate one. However, a new problem that arose was that the image was shifted to the left. To fix this, the final change I made:
.post-image img{
display:block;
margin-left:auto;
margin-right:auto;
max-width:50%;
height:auto;
}
A common trick to bring an image to the center of the parent div is make it into block of its own and apply the margin properties to it.
I have this website I'm making for my aunt.
I seem to have a problem with this menu.
When I put the browser on my 1920x1280 screen it's all perfect but when I put it on a lower resolution screen the menu bar goes out of screen on the right, but what is strange about this is is that my width is at 100%.
You can find the website here : mathiasotw.be
Thanks in advance.
P.S.: if you want the code i can post it . but normally u can see the code by right-clicking and inspecting it or pressing F12.
You have applied 20px padding for DIV with ID menu
change it to
padding:20px 0;
It should work for you.
Your new css should be looking like below:
#menu {
background: none repeat scroll 0 0 white;
box-shadow: 0 1px 6px black;
float: left;
height: 70px;
padding: 20px 0; // here padding was declared as 20px.
position: relative;
width: 100%;
z-index: 999;
}
I have not gone through your entire CSS file but seen these styles applied in firebug through #menu ruleset.
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.
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;
}