Code :
html -> https://pastebin.com/zNekXPLQ
css -> https://pastebin.com/tifEY0A4
I want to make the instagram button 30px from the right and 30 px from the top. But when using margin-right: 30px;, nothing happens, and when using right: 30px;, it plain disappears. Can someone please explain when and how to use margin-right ect and right, left, top, bottom attributes if at all? I'm new to html/css and positioning elements seems to be the hardest bottleneck to pass.
You have position:fixed on .topbar but there is no width to it. Set a width to inherit from container, and then set position for the button, i recommend adding the class to the a tag instead of the img tag
Html:
<a href="https://www.instagram.com/majic.photography/" target="_blank" class = "instagrambutton">
<img src="instagram-logo-white.png" alt="majic.photography" />
</a>
CSS:
.topbar {
position:fixed;
width:inherit;
}
.instagrambutton {
position: absolute;
width: 50px;
background-color: black;
padding: 10px;
top:30px;
right:30px
}
The others have provided the answers you need. My answer is not the answer you really want right now, but I am providing it because you are new to HTML and CSS.
Can I strongly recommend moving away from Absolute positioning it becomes damn near impossible to manage when you start thinking about cross-browser compatibility and now cross device compatibility (30px on a desktop is far different from 30px on a mobile screen). When I was new to software development I used absolute positioning a lot and having to almost write a new CSS script for each browser/device with custom styles (maybe slightly exaggerated).
Having been out of the field and then coming back in in the last year or so, I strongly recommend learning and using bootstrap to style your web page.
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 not very good with HTML/CSS. Here is the website that I'm trying to edit. I'm unsure if this should be in WordPress Stack because even though my website is in WordPress, the problem is with the CSS. Also, I'm really sorry for bad English (I know 5 languages so its kinda hard to keep up).
The problem is that the grid (Essential Grid which displays a product catalog) and the container above it are both children of one div. When I try to change the padding of my grid, It changes the padding relative to the top of the parent div rather than instead of its sibling which is on top of it.
I'm not sure what CSS properties might be affecting this(I'm not very good at CSS) but I have posted the ones which I think might be the problem. Please visit the link and inspect element (Sorry..)
.child-on-top{
//acutal id on page is featured-111
width: 99.8936px;
height: 449px;
background-size: 100% 100%;
}
.child-below{
position: relative;
padding-top: 100px;
}
.parent{
//actual id is wrapper.
position: relative;
clear: both;
}
One solution that has worked so far is if I increase the top padding to about 500 px, that would add about 50 pixels of padding above the child element thats below. But that will only work in desktop. In mobile, you will get a lot of empty space. So it isn't really a solution.
Add folowing css and then check. Your div which have id featured-111 which take floating from class grid and because of this problem create. So write this css
#featured-111{
float:none;
}
Problem
I'm trying to stretch a ::before element from the very left hand side of the page to the right hand side, even though the element it's attached to is centred and somewhat down the page (and thus does not know what the window size is etc).
Here's a working example of what I want:
http://codepen.io/robcampo/pen/dilCe
Problem with this is that I'm using static values to define the width and left position:
left: -9000px;
width: 99999px;
which isn't ideal. I understand this could be solved if I moved the element to another location on the page, but I need it next to the element it's attached to.
Question
Is there a clean way to make the ::before content span the entire page width without using static values?
Note
There is content above and below this element and it is far down the DOM tree away from the body
I could solve using JS but I want a pure CSS solution
If you remove position: relative from the parent element, you can easily do this.
You can center .title like this instead:
.title {
margin: 0 auto;
}
Then you can adjust the ::before like this:
.title::before {
position: absolute;
left: 0;
width: 100%;
}
Bringing it all together: http://codepen.io/anon/pen/xLKGc
PS: Note that IE8 and before don't support the double-colon (CSS3) notation, so if you need to support IE8, make sure to use a single colon (CSS 2.1), which is supported by other browsers as well, and will probably be for a while.
I'm looking to make the clickable area of links bigger than they actually are for accessibility since for the intended users it can be difficult to hit them. About 1.5x the size may be appropriate. These are links in normal text, so I cannot actually make them bigger which would mess up the layout.
I make use of HTML5, CSS3, JS or even Mozilla specific features to accomplish this as the latest Firefox version is the only target, though basic CSS/HTML rather than such hacks would of course be much preferable!
One option that might work is to use the :after pseudo-element. Something like this:
a {
position: relative
}
.bigger:after{
content:"";
padding: 50px;
position: absolute;
left: -25px;
top: -25px;
}
Numbers could be tweaked as you like. Only downside I can see right away is if you need to support anything pre-IE8. http://caniuse.com/#feat=css-gencontent
Here's a fiddle.
You can do it using a bigger padding.
For example:
.a{
padding: 20px;
margin: -20px; //lets keep the layout
}
Here you have a living example:
http://jsfiddle.net/u5kuJ/1/
Updated:
With your fiddle: http://jsfiddle.net/XXgqu/1/
I have made an update to gotohales answer, it will work with whatever the length of the text is, then add some padding.
http://jsfiddle.net/vG7UY/2/
a {
position: relative;
}
.biggerForMobile:before{
content:"";
width:100%;
height:100%;
position:absolute;
padding:12px;
top:-10px;
left:-10px;
}
You can use the :after pseudo-element to pad the element, and using transform and position you can position the padding centered on the center of the element without impacting other elements.
Change the padding: 30px to whatever padding you need.
.padded-click {
position: relative;
}
.padded-click:after{
padding: 30px;
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
Note: This is based on gotohales solution, which is a great approach, however using top and left with pixels values as gotohales solution does requires taking into account the width/height of the element we're padding otherwise the padding will be off center.
I am pretty sure you cannot do what you are asking. The only things that are coming to mind are adding padding, margin and line-height. While it isn't my favorite solution, but depending on the context of the site, maybe having a page with all the links listed, which has a bigger target.
Also, maybe use the outline & the outline-offset CSS properties with good contrast to let people know are on the link.
Another thing is, people who need a bigger target, use the keyboard more often to navigate a website, so making your site more keyboard friendly may help. For example, do you have a header and a sidebar, via code, does those come before the main content? If so placing a skip nav link, or a few (depending on layout), may also help.
I want to make a header like http://www.chacha.com (doesn't move, is about that wide and that height, and able to fit divs inside it and also has to be an image)
I am starting off with a blank html document and a blank css page, so there I haven't currently written any code.
I've been trying two days straight to do this now so I would really appreciate any help anyone can provide.
I have gimp so if anyone could also give me image dimensions for a perfect header and perfect background size I would appreciate it even more.
CSS:
#header {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 10px;
background: url(yourimage.png) repeat-x;
}
<!--html -->
<div id="header"></div>
That should give you a starting place, I can't tell you more without seeing exactly what the layout's supposed to be.
The CSS property you're looking for is position: fixed which will position the element relative to the viewport. This is good breakdown of positioning: https://developer.mozilla.org/en-US/docs/CSS/position
In this specific case, what you've got is an element with styles roughly along these lines:
#header_id {
position: fixed;
width: 100%;
height: 35px;
}
You don't have to set the height, but unless there is content in the fixed element, it will collapse if there is no height specified. They also appear to have put a drop-shadow on the element toget the neat floating effect.
If you want to have an image inside, you can just put the <img> inside the header element, or use it as the background-image url in the CSS and position it with background-position (see also: https://developer.mozilla.org/en-US/docs/CSS/background-position although the compatability table at the bottom is important if you want to do anything too specific with this property).
You can do this with any block-level element (or any element with display:block set on it). In your example they are using the HTML5 <header> tag; a <div> would work, too, if <header> wasn't appropriate for your page.
I would recommend using the Firebug addon with Firefox (or similar developer consoles with other modern browsers) -- you can right click on an element on the page and select 'Inspect element' from the dropdown menu and get a breakdown of both the markup and styling to see how other websites are constructed. Very useful for when you're browsing the internet and you see something and think, 'that's a neat trick, how does it work?'
FOR FULL WIDTH FIXED HEADER
header {
width:100%;
background:green;
height:60px;
margin:-8px;
position:fixed;
}
FOR NONFULL WIDTH FIXED HEADER
Create a div and set width and height (you can also set it left or right by float:left, float:right)
then in this div put the code above but without margin:-8px; and change the width to the width that your div has.
Here is a test