We have some minor formating issues with the main page of our site Batoku when we switch to an alternative language (change to italian to test).
1) 'Swap' text is not centered between the arrows upon changing languages.
(#wrap-main #main-home #items a#swap )
a#swap {
color: #449AC2;
font-size: 26px;
font-weight: bold;
left: 467px;
max-width: 135px;
position: absolute;
top: 194px;
word-wrap: break-word;
}
2)The footer is not centered and doesn't look good it is inconsistent in terms of items per line when a language changes and if you like this page at the bottom for the first time, there is no space to write a comment and like.
3)Potentially if there is a very large text for any of the languages the header will look completely all over the place.. to test under <li id="add-item"> modify the span to say <span>I will destroy your header!!! </span> (please use firebug)
Thanks
1) About the swap, there is a fixed left position, that means that it will always stay there. It's better to be wrapped via some div with width: 100%; text-align: center; or something like that in other to center the text, and not the element itself.
2) About the footer. There is fixed width to the ul. You should remove it, add 'text-align:center' to it, remove the float from li elements and make them display: inline;
3) For the header you should blame the designer. :) They are not coders but at least they should ask their self "What if there are more links?" or "What will happens once the language is changed?", they should think a little outside of the frame.
There is nothing here to prevent the site from braking. You can make it absolute, but once it's to large it will start to go over the text field. And that will not be ok too. You can use some kind of javascript to check if the elements it's breaking and apply some kind of class to the navigation in order to decrease the font-size or change the position of the elements.
Related
I wonder if anyone can help me understand a little more on positioning
I've read a lot of information regarding floats, position types and flex.
I understand the basics of it, but i´m having trouble with the simple things.
Which is the regular way professional front end developers use to positioning elements? Do they use float, position: relative|absolute or do they use flexbox or css grid? Or a combination of all?
Do professional developers use CSS reset everytime they make a new website?
I am making a header(it doesnt have a nav bar..just a logo and a title)
I want the logo to be on the left, and the title on the right.
So if i use inline-block i get this weird result where "World Guitars" is not aligned to the logo, but a little below.
#logo {
height: 60px;
width: 50px;
border: 2px solid #34495e;
margin: 2px;
align-self: center;
}
header p {
font-family: Poppins;
font-size: 2em;
margin-left: 500px;
align-self: center;
}
header p,
img {
display: inline-block;
}
<header>
<img src="images/logoGM.jpg" alt="logo" id="logo">
<p>World Guitars</p>
</header>
If i do it with floats, it gets better, but its still so strange..
header p {
float: right;
width: 900px;
}
header img {
float: left;
}
section nav ul {
clear: both;
}
<header>
<img src="images/logoGM.jpg" alt="logo" id="logo">
<p>World Guitars</p>
</header>
Finally in position:relative, and absolute I'm kind of lost.
Can i use position relative and assign values to my heart's content or is this not recommended?
How do i do it in this case?
Thank you!!
Display vs Position vs Float
In general I would say that the modern way to position elements is to use display properties - typically using display:flex or display:grid on parent elements to position their children, or using display:block, display:inline or display:inline-block on an element to position it self.
Where you would use position:relative and position:absolute is if you need to take an element out of flow. A typical case is if you need some elements to overlap. (ie. if you have three canvases that you are laying on top of each other).
Floats were a standard way of positioning elements (ie getting something to sit on the right of the page) in the old days. But now flex box has come along.
However - where you might want to use floats is if you want text to wrap around the element - like it might in a news paper. This is especially important as now HTML elements don't need to be rectangular. See this example.
CSS Resets
I use them. Why not.
These days, typically you might be using some kind of styling library like Material-UI or Bootstrap anyway, but yeah.
In regards to what you're trying to do.
I would use flexbox here.
You have used 'align-self' here - but align-self only applies to a child of a flex parent.
header {
display: flex;
flex-flow: row nowrap;
/*By default this is row wrap - I like to always be explicit with it*/
align-items: center;
/*center vertically, (because the flex flow is row*/
}
img {
border: solid 2px black;
max-height: 100px;
/*size the image*/
object-fit: scale-down;
/*make the image keep it proportions*/
}
p {
font-weight: bold;
font-size: 2em;
}
<header>
<img src="https://www.designevo.com/res/templates/thumb_small/black-wing-and-brown-guitar.png" alt="logo" id="logo">
<p>World Guitars</p>
</header>
I love answering questions like this! Feel free to add additional question comments. Source: I've been doing front-end web development for about 8 years.
Q1. Which is the regular way professional front end developers use to positioning elements?do they use float, position..relative,absolute..or do they use Flex?(or css grid?)Or a combination of all?
The short answer is a combination of all, but there is more to it than that. I would say most of the time developers will use a CSS framework like Bootstrap, Materialize, or Foundation. These frameworks provide a lot of abstraction over writing everything yourself, such as simply defining rows and columns using classes, and simple classes to define how those columns behave when resizing the screen. CSS Grid has a lot of the same concepts as these frameworks, but I would say it is less accessible if you are just starting out.
When it comes to writing custom CSS for things that are specific to your brand or project, I would say most of your larger scale positioning is done with relative positioning (such as padding, margin, width, etc) or flexbox. It is generally not a good idea to create your overall site structure out of absolute position elements or using floats for a few different reasons, which I can go into if you are interested, but positioning something on a small scale, using absolute positioning is common (For example a floating tooltip or a notification popup).
Q2. Do professional developers use CSS reset everytime they make a new website?
It depends. Many frameworks include CSS resets to ensure your website looks the same across browsers. I would generally say it saves time fixing things like odd button shadows in Firefox or extra input borders appearing in Safari.
In regards to your code question, I think this is a perfect application for flexbox! You said "title on the right" so I am unsure if this is exactly what you are looking for.
header {
display: flex;
justify-content: space-between;
align-items: center;
}
.logo {
height: 60px;
width: 50px;
border: 2px solid #34495e;
margin: 2px;
}
.title {
font-family: Poppins;
font-size: 2em;
margin: 0;
}
<header>
<img src="https://placeimg.com/50/60/any" alt="logo" class="logo">
<p class="title">World Guitars</p>
</header>
This depends on your needs and intent. In terms of units, CSS has units that have an absolute size (think centimeters, etc.), and units that are scaled relative to the font size, or relative to the size of the viewport you're working inside. There's no right or wrong unit to use, it depends on what you need. Details on units are here: https://www.w3schools.com/cssref/css_units.asp
In terms of whether to use flexbox or not, it can be a very useful tool if you want elements on the page to be able to scale dynamically, depending on the device or window size they're being displayed in. You can also use it to create responsive pages without javascript, with a combination of flex-wrap and setting minimum widths for elements. But not all designs benefit from flex, and sometimes you need elements that don't shrink or grow depending on the device they're being displayed on. Grid is older than flex, but still useful. It's very commonly used with bootstrap.
In terms of your specific example, I suspect the issue you're seeing is because your text is inside of a <p> block, which puts it on a new line. Try putting it inside of a <span> block instead, and give that block an id so that you can set attributes for that ID in your css if you need to.
I'm currently having a problem with a div on my site. I'm trying to get it to stay in a fixed position even on smaller resolutions but no matter what I have tried so far the div moves to the right every time the window gets smaller.
Here are pictures of the issue:
Correct position:
Incorrect position:
Also, here is the CSS for the div:
#fep-notification-bar{
color: #f3ed42;
border-width: 0px;
text-align: left;
background-color: #282828;
margin-left: 1338px;
font-weight: normal;
}
The site is wastelandgamers.com
If anyone knows how to resolve this issue I would really appreciate it!
EDIT:
Sorry, I wasn't clear enough and I realize now that the way I clipped the pictures makes it seem like the header is expanding but that's not the case. The new message text is what won't won't stay in place. whenever I make the screen smaller the text moves to the right instead of staying in place above the search bar. Unfortunately you can't really test it unless you are logged in and get a message.
I'm not sure what your HTML looks like but from the screenshots I would wrap all the elements up in a span or div and then position that.
Try to use float:right maybe then edit certain classes or ids using #media in the css.
I have figured out a solution for now. I have changed the code to:
#fep-notification-bar{
color: #f3ed42;
border-width: 0px;
background-color: transparent;
margin-left: 24.7%;
font-weight: normal;
position: absolute;
}
It has not completely solved my problem but it is at least a band-aid. This way the text still moves slightly, however, it now moves to the left and only a small amount so it does not fall off the page no matter how small it is.
I am working on a website design based upon a company's print branding, and one aspect that I'd like to mimic is the break in the dot border for a header surrounding the content. (Here's an example.) As you can see, the header text is vertically centered against the dot border, so half of it sits above the edge, and the length of the break will differ based upon the word length (though the amount of white space before and after each word should be consistent). In some instances, like the one in the photo, there will be multiple headers in the same rectangle, so it won't just be the top border that needs to be addressed. The background in this design will be an image, not a solid color. In addition, this site is responsive so will require the workaround to function in various mobile environments, and the width of the border will vary as the space changes.
I'm primarily a web designer with some front end coding abilities, but nothing too advanced, so I'm wondering if this is possible (in general, and for my experience level) or if I should just change the design entirely. Any suggestions?
Edit: I've added a new photo to clarify my question, still hoping there is a feasible way to do this with a photographic background element. Thanks!
Yes, it's possible, try to make header display: inline block, add side padding to it and color with it's parent background. After that you can raise this header to top with it's half-height. For example:
1) Position: relative; line-height: 1em: top: -.5em;
2) Transform: translateY(-50%);
Here's an example https://jsfiddle.net/5w4hanu3/2/
h2 {
position: relative;
display: inline-block;
margin: 0;
}
.top h2,
.bottom h2 {
transform: translateY(-50%);
padding: 0 20px;
background: #fff;
}
please check out the codes first:
html:
<!DOCTYPE html>
<html>
<head>
<title>hello</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="container">
<div id="menu">
HOME
</div>
</div>
</body>
</html>
css:
#container
{
width: 80%;
margin: auto;
height: 450px;
}
#menu
{
background-color: #1b9359;
height: 25%;
}
.button
{
text-decoration: none;
float: left;
font: bold 1.2em sans-serif;
line-height: 115px;
margin-left: 20px;
display: block;
text-align: center;
}
.button:hover
{
background-color: #2cd282;
}
so what i would like to acheive is that when i hover to the home button, the whole div changes color, and does not get distorted or mispositioned on zoom. one answer told me that i could use display: block, but that it does not work as you can see. however, i did manage to make it work with display: block when the menu pane is like a vertical column and not a horizontal one. could anyone pls explain why this happens, and how display property of css affects that element? and how to achieve the full highlight without zoom distortion?
If you use percentages as your height and/or width then it will be a percentage of the parent container.
If you want your page to behave well when using a zoom, ie. ctrl + mouse wheel up or down, size everything in your page using em. 1 em = 16px by default. Just get used to using em. Get a calculator out and start converting things. Trust me, it's worth it to have a page that zooms straight in in out without jumbling.
Your outermost container may use percentages as long as you're using an auto margin for the central contents this is an exception to using em, that way things will still be centered on all resolutions. When I say outermost container, I mean body...
Before I tell you how to make it work I'll answer the other questions:
"...I did manage to make it work with display: block when the menu
pane is like a vertical column and not a horizontal one. Could anyone
pls explain why this happens, and how display property of css affects
that element?"
Block elements stack on top of each other vertically. This means that in a vertical arrangement if the zoom level is changed, those elements are perfectly at home taking that extra space up to the right side. Now, if they are intended to be lined up horizontally, display block will not work because that is simply just not what it does. Display inline-block will stack them horizontally preserving heights and widths set for the container, and to my own dismay, adding tiny margins between elements unlike the use of float, which would be touching the previous element, but float is definitely not something I would recommend for a nav menu.
Let's say you have your first link, and it is display:block. It will start its own new horizontal line, assuming there is not a float:(side) item before it with extra space to fill. In that case, you would add clear:both(or :left/:right) to overcome this. Now let's say you want to add a second link to the right of the first one which is display:block. The second one could be display:inline-block, and it would be on the same level as the first one, but if you did this the other way around, the second one, which is display:block, would start on its own new line below.
Now, to make your button do what you want it to do:
I will assume for the purpose of giving you a good answer that screen width in pixels is 1280px. So 80% of that is 64em. That is (1280px * .80)/16px = 64em because 1em = 16px. As I mentioned before, we do this to make your site elastic when it zooms.
You've previously designated #container as height:450px; So let's convert that. 450px/16px = 28.125em (em values can go to three decimal places, but no more) This is good, so we have an exact conversion, and not a rounded value.
container is now finished and should be as such:
#container
{
width: 64em;
margin: auto;
height: 28.125em;
}
Next change height in #menu. You have it as height:25%. That is 25% of 450px/or/28.125em If we leave it at 25% it will mess up the zooming. So let's convert. 28.125em/4 = 7.03125em
This time we must round to 3 decimal places. So we get 7.031em.
menu is now finished and should be as such:
#menu
{
background-color: #1b9359;
height: 7.031em;
}
Next is your button class.
.button
{
text-decoration: none;
float: left;
font: bold 1.2em sans-serif;
line-height: 115px;
margin-left: 20px;
display: block;
text-align: center;
}
At this point I lose some of my own certainty about how CSS will react, but I will start with this. Do not use float:left and Display:anything together. In this case, use display:inline-block. Get rid of the float:left. I am not sure why you have a line-height set. I am guessing it is your way of attempting to set a height for your button because it is 2.5px larger than the height of #menu (line-height of .button = 115px, height of #menu = 112.5px which we have already converted to 7.031em). If that's what you're trying to do you're doing it wrong. get rid of line height, and make it the same height as its container so that it fills it. height:7.031em;
I'll assume if you're making a horizontal menu, that you aren't trying to make one button take up the entire width. If you do not give it a width, it will fill the whole row. I'll be bold and guess you probably want your button somewhere in the ballpark of twice as wide as it is high. Let's just go with 15em(240px). width:15em;
Last is margin-left... 20/16 = 1.25em. Cake.
Now we have:
.button
{
text-decoration: none;
font: bold 1.2em sans-serif;
height: 7.031em;
width:15em;
margin-left: 1.25em;
display: inline-block;
text-align: center;
}
Keep in mind that block elements, whether inline or not, have little built-in margins on top of the margin-left that you've added.
If you make these changes, your page should zoom beautifully and your link will fill out its container vertically, but be a specified width to keep it clean. Never use px or percentages if you want to avoid zoom slop. The body container is 100% by default, but it holds everything and therefore the things in the center seem to grow outward toward the edges and therefore do not show any visible effect from the body not being set based on em, and it also makes the page naturally friendly with a variety of screen resolutions.
I hope this helps.
Edit:
As I mentioned, I lost some of my certainty. The line:
font: bold 1.2em sans-serif;
Does something that makes the container be larger than 7.031em removing that line fixes the problem, but I do not know the remedy if you insist on a font size of 1.2em. I tried setting height to 6.831em instead of 7.031em and it did not do the trick.
A few more tips:
1) If you still feel that you need a margin, perhaps margin-right would better suit you so you don't have random slack space to the left.
2) The CSS I provided does not adjust for the vertical alignment of your link text; to fix it add line-height:7.031em; to the .button class. Note: this method only words with single lines of text!!!
So, I'm getting married. Hooray!
I'm building a website for the event and HTML/CSS isn't my normal area of expertise.
I've got the site sliced and diced, and most of the important structure laid out in divs.
One thing I'm not sure of though, is that the design calls for an image to spill over both edges of the wrapper. What's the best way to do that in HTML/CSS? Or should I make the wrapper the full image width wide and make another container inside for the other content?
Thanks for your help!
Here's the design comp:
website_comp.jpg
Here's the
image that needs to spill over the
div: ribbon.png
Here's what the
site looks like now:
DierksAndEmster.com
add position:relative and overflow:visible for your #container. Then modify your menu like the following:
#menu {
background: url("http://www.dierksandemster.com/wp/wp-content/themes/et-starter-1-4/images/ribbon.png") repeat scroll 0 0 transparent;
color: black;
display: block;
float: left;
font-family: 'Walter Turncoat',arial,serif;
font-size: 20px;
height: 93px;
left: -71px;
line-height: 22px;
position: absolute;
width: 942px;
}
You could attempt to position the image with position: absolute. Another way could be to use three columns. (~50px wide left column, main area, ~50px wide right column).
You could also take a look how csswizardry has done this, it's a bit advanced though, but might be helpful: http://csswizardry.com/demos/css-powered-ribbons/
Last but not least, if you wan't to be quick and know the navigation panel that has the fancy ribbons never changes place, why not just make a big background image and build the site on top of it? :)