I'm creating an web system, but it's not showing correctly in firefox (and probably not in IE too), but it's great in Google Chrome, the page is that: Page with errors
The problem is that my < ul> component is too large in Firefox. I'm using width: 760px; and repeating an small width image over this 760 pixels. But the firefox do it for more than 760 pixels (as you can see in the link).
This is my ul-html code:
<body id="maincontent">
<ul class="ulmenu">
<li><a href="#" >Registrar</a></li>
<li><a id="lastmenu" href="#" >Realizar login</a></li>
</ul>
</body>
And my css:
root {
display: block;
}
#maincontent
{
background-color: black;
width: 760px;
margin: auto;
}
ul.ulmenu
{
text-align: center;
margin-top:0;
display:table;
width: 760px;
max-width: 760px;
list-style-type: none;
height: 60px;
background-image: url(../image/menubg.png);
background-repeat: repeat-x;
/*
visibility: hidden;*/
}
ul.ulmenu li
{
float: left;
}
ul.ulmenu a
{
background-image: url(../image/menudiv.png);
background-repeat: no-repeat;
background-position: right;
padding-right: 32px;
padding-left: 32px;
line-height: 60px;
display: block;
color: #ffffff;
text-decoration: none;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 21px;
}
ul.ulmenu a:hover
{
color: #AAAAAA;
}
In order to make the options of the menu centralized, i created some code in JS with jQuery to do that. If I remove this code, the width of green image in firefox becomes smaller, but it's still bigger than necessary (about 100px), the chrome images keeps unchanged.
I know only basics of css. Can anybody point me how can I fix that?
----EDITED-----
Fiddler URL for code (but the error is only noticed on maximized browser):
See it on Fiddler
Here is what I understand.
Seems, In firefox your are adding padding-left to your element style which makes it wider.
ul.ulmenu li
{
float: left; //remove it
display: inline-block; // add it
}
Remove this line from js code.
$(".ulmenu").css("padding-left",Math.round((larTela-menuWidth)/2)+"px");
Solution: Give width: 551px and display: block to your ul.ulmenu CSS class. That will solve the issue.
Reason: The reason for the issue is FF and Chrome treating display: table differently. For an element with display set to table, FF adds the padding to the width, whereas Chrome doesn't. The solution is to use the display: block CSS property that behaves the same in both browsers (FF as well as Chrome adds padding to the width for block elements)
Related
I'm currently designing a website and there's a problem regarding the website footer.
When viewed on Desktop, the footer looks like this:
Website Footer viewed on Desktop
The code used to create this look is:
<meta name="color:Footer Background Color" content="#000000">
CSS CODE
/*-----------------------------
footer
-----------------------------*/
.bottom-footer {
background-color: solid #ffffff;
}
.bottom-footer, .bottom-footer a, .back-to-top a {
color: solid #000000;
}
.footer-message {
display:flex;
justify-content:space-between;
list-style-type:none;
width:500px;
}
.bottom-footer {
clear: both;
height: 80px;
width: 100%;
position: relative;
bottom: 0;
z-index: 1
}
.bottom-footer p {
font-size: 1.4rem
}
.footer-message {
float: left;
margin-top: 33px;
margin-left: 20px
}
.creation {
float: right;
display: block;
margin-top: 33px;
margin-right: 20px;
font-size: 1.4rem
}
.back-to-top {
position: absolute;
margin-top: 20px;
text-align: center;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
width: 30px
}
.back-to-top a {
font-size: 3rem;
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
transition: all .4s ease-in-out
}
.back-to-top a:hover {
opacity: .5;
text-decoration: none
}
.back-to-top .fa-angle-up {
font-size: 4rem
}
footer.bottom-footer {
height: 150px
}
.footer-message {
padding: 40px 0 0
}
.creation,
padding: 10px 0 0
}
.creation,
.footer-message {
float: none;
text-align: center;
margin: 0
}
.back-to-top {
margin-top: 0;
top: 0
}
HTML CODE
<footer class="bottom-footer">
<p class="footer-message">
Home
About
News
Musings
Music
Media
Shows
Store
Contact
Ask
</p>
<a class="back-to-top" href='#'>^<i class="fa fa-angle-up"></i></a>
<div class="creation" style="text-decoration:none">
© 2016 Sam Joel Nang. All Rights Reserved.
</div>
</footer>
Now the problem is, when (for example) the window's width is decreased, the footer elements seem to scatter, the .creation element goes out of the footer and goes below.
What I want to do (when website is viewed in small window width, or on Mobile Devices screens) is to 'center' and 'stack' the footer elements (.footer-message, .back-to-top, and .creation) in the following order: top: .back-to-top, middle: .footer-message, and bottom: .creation, with the Footer Background Color still #ffffff. A small photo edit can represent what I mean:
Ideal Website Footer look on Mobile Device or small Desktop window width
I hope someone can help me. Thank you so much.
Introducing media queries
In order to achieve what you're looking for, you can use media queries in CSS.
For example, if you want to stack the footer elements at a screen width of 480px or less, the following media query will allow you to style for that scenario only:
#media (max-width: 480px) {
// Styles here
}
Given that, let's get on to the point of stacking. You have different position attributes currently on the elements you're trying to stack. The easiest way to stack elements on top of one another is to use the properties display: block; and float: left;. This way, the elements will span the width of their container and appear in the order they are in inside the document's HTML.
Let's take a look at how you might go about that:
#media (max-width: 480px) {
.footer-message {
float: left;
display: block;
}
// center the links inside footer-message
.footer-message a {
text-align: center;
width: 100%;
}
.creation {
margin: 0 auto; // center it
display: block;
}
.back-to-top {
position: relative; // absolute positioning removes the element from document flow so we want to go relative
display: block;
margin: 0 auto; // center it
}
}
Note I simply removed the other properties since they're applied at all screen sizes already. You may want to alter those inside this media query in case the new styles affect their layout or you'd like it to differ for mobile.
Hope that helps!
UPDATE: I just noticed the part about you wanting to center the elements, I've added some code above to do so.
I have a problem with the size of the google maps map.
What I would like is to have 100% width of the map and div paragraph. See image:
It works on computers as you can see. But it's not responsive width, and that is the problem.
CSS:
#map_canvas { // the map
height:600px;width:800px;
}
.google_map {
position:relative;
float: left;
}
.paragraph { // text and stuff on the right
float: left;
padding-left:5px;
display: inline;
}
HTML
<div class="google_map">
<div id="panel">
<div ><input onclick="deleteMarkers();" type=button value="Rensa"></div>
</div>
<div id="facit"></div>
<div id="map_canvas"></div>
</div>
<div class="paragraph">
blablabla
</div>
If I change the width of map_canvas to 100% the result is ~100 px.
I tried to create a div that holds both map_canvas and paragraph with the width 100% and then to set width of the map to XX% but that again got interpreted as xx px.
Because the map is 800 px wide it becomes very hard to use on mobiles, I have no problem with map_canvas comes above paragraph on mobiles if that is a solution.
In short I need on computers the width to be say 800px and on mobiles 100%.
EDIT:
#map_canvas {
width:100%;
min-height:600px;
}
Becomes:
EDIT:
CSS panel
#panel {
position: absolute;
top: 10px;
left: 65%;
margin-left: -180px;
z-index: 5;
background-color: #000;
padding: 5px;
}
#panel, .panel {
font-family: 'Roboto','sans-serif';
line-height: 20px;
padding-left: 5px;
}
#panel select, #panel input, .panel select, .panel input {
font-size: 15px;
}
#panel select, .panel select {
width: 100%;
}
#panel i, .panel i {
font-size: 12px;
}
#panel2 {
position: absolute;
top: 10px;
left: 73%;
margin-left: -180px;
z-index: 5;
background-color: #000;
padding: 5px;
}
#panel2, .panel {
font-family: 'Roboto','sans-serif';
line-height: 20px;
padding-left: 5px;
}
#panel2 select, #panel2 input, .panel select, .panel input {
font-size: 15px;
}
#panel2 select, .panel select {
width: 100%;
}
#panel2 i, .panel i {
font-size: 12px;
}
Panel is the button you see on the image, Panel2 is a button that appears when you click once on the map, positioned to the right of the first button.
Try this:
#map_canvas {
width:100%;
min-height:600px;
}
Hope this help.
You could use CSS3 #media tags in your CSS. Including those you are able to set the width of your map according to the screen size of the device. Take a closer look to this site if you want to determine which device is used. You can define specific rules after which certain parts of your CSS are included or not, depending on the conditions you define in your file. After including this your css file could look like this:
#media (max-width: 800px) {
#map_canvas{
/*youre custom style for devices which have a maximum
screen size of 800px and therefore
can not display your map correctly*/
}
}
You can read more about this topic at this site.
Note that you can also include media tags in your <link> tag like this:
<link rel="stylesheet" type="text/css" media="only screen and (max-device-width: 800px)" href="small-device.css" />
For more information you should take a closer look on this site.
Another way to determine which device is used is to use jQuery, JavaScript or PHP. Since current mobile device browsers should be able to use CSS3 I would recommend to use the media tags.
Title of of the album is dynamically generated from admin panel.
So the problem is when titles are not the same length.
They are used for navigating (prev and next) below actual album...
Code:
<div class="album-box">
<div class="prev-album pull-left">
Dynamically generated title
</div>
<div class="next-album pull-right">
<a href="">Dynamically generated title in
Dynamically generated title 3
Dynamically generated title rows</a>
</div>
</div>
Live:
jsfiddle
Not sure how can I position it to be in the middle vertically no matter how long the title is.
Any idea?
Thanks.
EDIT:
I would like to move elements on the left and right border.
Image:
You got plenty of good answers.
Here's one more using display:table
Non-flexbox Demo
.prev-album, .next-album {
font-size: 12pt;
padding: 20px 0;
color: red;
display: table;
}
.album-box a{
display: table-cell;
vertical-align: middle;
}
Use flex: https://jsfiddle.net/58eh0r2g/1/
Add the following code to the parent containers.
display: flex;
align-items: center;
justify-content: center;
In your case these would be .prev-album and .next-album
https://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/
This solution will lose support for some IE versions, but flex is so powerful it's worth using it.
If you are wanting to grasp a new and awesome css...thing, then I would use flexbox. Flexbox has a property called align-items that will vertically align flex items (children).
Read here: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Browser support is growing, but mobile and IE10 will need -ms- or -webkit- prefix.
Give the next-album and prev-album display: table;
Then add display: table-cell; vertical-align: middle; to the anchor tags inside of those divs.
I also updated your jsfiddle to show my answer.
https://jsfiddle.net/58eh0r2g/7/
You can set css display attribute of the album-box class to table, and child to table-cell, then you can use vertical-align: middle;
Or you could try display flex, but it's not supported by some browsers.
Here's a solution different from the ones posted so far:
jsFiddle Demo
Using a combination of transform and top/left with absolute positioning on the a tags (absolute relative to parent):
.prev-album, .next-album {
font-size: 12pt;
padding: 20px 0;
color: red;
// added this
position: relative;
}
// and these
.prev-album a, .next-album a {
padding: 10px 40px;
position: absolute;
width: 100%;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
}
Since you want to align the text dynamically in the center of vertical axis, try using the follows:
HTML:
Content here
CSS:
#parent {display: table;}
#child {
display: table-cell;
vertical-align: middle;
}
I have modified your code s per above in this plunk : http://plnkr.co/edit/PdK9YWGUvbuGAW7S00x9?p=preview
This has been asked in various forms all over Stack Overflow but here you go, Simply add this to your CSS:
.prev-album a, .next-album a {
display: table-cell;
text-align: center;
vertical-align: middle;
}
Then change display: inline-block to display: table on both .prev-album and .next-album.
Simple update of your existing code on JSFiddle
Several improvements to your existing code on JSFiddle
You could even opt to use flex box method however older browsers will not support it, especially internet explorer. You can view the browser support for Flex Box on caniuse.com.
You could simplify your CSS by sharing properties as it will reduce code and be easier to manage:
.album-box, .prev-album, .next-album {
border-color: green;
border-style: solid;
border-width: 0;
}
.album-box {
display: block;
width: 100%;
float: left;
border-bottom-width: 2px;
}
.prev-album, .next-album {
font-size: 12pt;
height: 82px;
display: table;
padding: 10px 40px;
width: 50%;
text-align: center;
}
.prev-album {
border-right-width: 1px;
}
.next-album {
border-left-width: 1px;
}
.prev-album a, .next-album a {
display: table-cell;
vertical-align: middle;
}
I made a small CSS grid framework for my new project but soon after, I have realized it has some shortcomings. Problem is, columns don't occupy whole height of a row which in turn prevents me from creating "blocky" layout and with current setup I can't achieve this with CSS.
I have solved this with some JavaScript, but what troubles me is that this peace of code needs to be executed after the page loads. Which means layout will be a bit messy if there's a lot of content to load.
Also, I'm not great with JavaScript so I'm not sure if I did this properly.
Here's link to source code on CodePen
[NOTE]
I don't want to use any JavaScript libraries
You can try using css table display property stack and use javascript as a fallback to unsupported browsers if required.
display: table;
display: table-cell;
display: table-column;
display: table-colgroup;
display: table-header-group;
display: table-row-group;
display: table-footer-group;
display: table-row;
display: table-caption;
http://codepen.io/anon/pen/LEniv
Browser compatibility
http://jsfiddle.net/cDZpA/
.container {
position: relative;
font-size: 0px;
overflow: hidden;
}
.col {
display: inline-block;
width: 33.333%;
font-size: 14px;
vertical-align: top;
height: 100%;
position: relative;
margin-bottom: -10000px;
padding-bottom: 10000px;
}
.c1 { background: yellow; }
.c2 { background: purple; }
.c3 { background: red; }
Don't ask me how, but this code I've put down works.
Here your CodePen fixed:
http://codepen.io/anon/pen/wkbrj
I'm currently building a new website but there is a small hiccup on webkit browsers.
http://typework.github.io/green-life/
If you browse to the url above and resize the browser to mobile size.
Open the navigation (click only once on the hamburger) and resize back to full screen. You can see that my navigation moved to the left. When you keep resizing the browser you see that it moves more and more to the left.
In Firefox I do not have this problem, Safari and Chrome does.
I used plain and simple JavaScript:
$('.menu-link').on('click', function() {
$('.nav').toggleClass('active');
return false;
});
And simple display: block css:
.nav {
display: inline-block;
float: right;
padding: 31px 0 0 0;
margin: 0;
}
#media(max-width: 992px) {
.nav {
position: relative;
margin: 0;
padding: 0;
display: none;
clear: both;
width: 100 %;
}
.nav.active {
display: block;
}
I do not seem to find the bug however. Any ideas?
I think there is a problem in the nav li, change it display:inline-block.
.nav li {
display: inline-block;
padding-left: 30px;
text-align: right;
}
I think this will solve your issue.
also make it display block in media query