I have a small problem, I have 4 divs that have a fixed width and height of 50px and positioned absolute. The sample layout is 2 x 2.
They are manually positioned with 10px gap in between them. The problem is if I need to resize the boxes, I will have to resize them individually and recalculate the space in between since they are absolute positioning and will get worse the more divs I have. I was told that Sass may help me solve this issue. So I am trying to use Sass to help but I am not sure how to go about doing this.
An example:
HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="test.css"/>
<title></title>
</head>
<body>
<div class="section">
<div class="box" id="box-position-1"></div>
<div class="box" id="box-position-2"></div>
<div class="box" id="box-position-3"></div>
<div class="box" id="box-position-4"></div>
</div>
</body>
</html>
CSS:
.section {
position: relative;
}
.box {
width: 50px;
height: 50px;
position: absolute;
border: 1px solid #000;
}
#box-position-3,
#box-position-4 {
top: 60px;
}
#box-position-2,
#box-position-4 {
left: 60px;
}
Instead of using absolute positioning, you can try something like float or display: inline-block (or even a table) which will make your div items flow together without having to manually adjust their distance from each other, or use individual ID's for each item.
There are multiple solutions you can try. I recommend the Table solution, but this can differ depending on your needs.
Using Float:
Check this JSFiddle
This is the easiest to set up! Just add float: left; to your .box class. This will allow the DIV elements to automatically position themselves one after another. Add margin: (number)px; in order to space these boxes a specific distance from each other.
Using inline-blocks:
Check out this JSFiddle
Same as above! Just add display: inline-block instead of the float. This will treat the divs like text, so be careful if you plan to insert these boxes in a block that contains text.
Using Tables:
This is most certianly the best way to go.
Here's a JS fiddle.
Tables are very well documented, so instead of explaining this code (which is completely different than the original) I'll provide you with some resources.
http://www.temple.edu/cs/web/tables.html
http://www.w3schools.com/html/html_tables.asp
(I know people hate w3schools but this article seems fine)
Edit: Cinnamon makes the point that Tables are potentially frustrating depending on their usage. Take a look at this Stackoverflow question before you decide which method to use.
Good luck.
Another note:
In your comment, you describe that you're creating a floor plan. I'd suggest using an SVG image to illustrate this, rather than HTML.
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 have something like the below for an electronic cigarette site I am designing:
<div id="top">
//code
</div>
<div id="nav">
//code
</div>
<div id="container">
//code
</div>
<div id="bottom">
//code
</div>
I want to structure it in a way that areas are defined by <div> tags and not by the contents themselves. Strictly speaking, things in a specific <div> element should be organized like the below:
I've tried things like float and it just looks tremendously ugly and text doesn't wrap properly. My first guess would have been to use css column properties but it splits the page into 2 parts with the bottom and top <div> elements being arranged above one or the other but never both.
I apologize if this is such a trivial task, but while I'm a pretty good logic programmer, css is not my strongest suit and it's something I generally devise through trial-and-error rather than rote memory or function.
The general spacing (ie. widths of <div> elements) is something I can accomplish, but just positioning things is something I'm at a loss about.
Here is the HTML:
http://pastebin.com/xbSypPcn
Here is the CSS:
http://pastebin.com/mZnBHPP0
Here is an image of what it looks like:
http://imageshack.us/a/img706/5117/uzbn.png
Here is an image of what I'd like it to look like: (excuse poor MSPaint work)
http://imageshack.us/a/img571/9219/uxm1.png
Excuse the very ugly site. I'd like to get the .css down before I furnish it to make it more aesthetically pleasing.
You should use something like this to accomplish your style task:
#top {
display: block;
height: 200px;
}
#left {
display: block;
width: 300px;
height: 500px;
float: left;
}
#right {
display: block;
width: 700px;
height: 500px;
float: right;
}
#bottom {
display: block;
height: 200px;
}
Combining the display: block with the right float and height and width settings should do the trick. I haven't tested this but the concept should help you get going in the right direction.
Additionally, you can nest div tags to get the desired text effect if the float is throwing this off.
For instance:
You may want HTML that looks like:
<div id="right">
<div id="right_content">
Your text here
</div>
</div>
edit/addition:
Thanks for adding your code HTML and CSS with the images is great! Since you are using a "liquid layout" % vs. px values... but you are still using px for your padding. I wonder if you took the padding values all out of the #contianer and #nav css styles it might fix it for you. It appears that you are very close now. You just need to trim the nav and container a bit so they look the way you are expecting them to look.
If you are using FF as a browser there is a great tool called Firebug that you can use to "inspect" your document. It will show you the html and corresponding HTML for whatever you point to. This tool has "saved my life" on many occasions.
I've got a question about optimizing webpages... hmm, let me start over from the beginning.
HTML Code:
<html>
<head>
<link rel="stylesheet" type="text/css" href="main.css">
<title></title>
</head>
<body>
<div id="header"> Text... </div>
<div id="body"> </div>
</body>
</html>
CSS Code:
#header
{
background-color: green;
width: 50%;
height: 25%;
left: 25%;
position: absolute;
}
#body
{
background-color: red;
width: 50%;
height: 55%;
left: 25%;
top: 25%;
position: absolute;
}
The problem is that whenever I minimize the window a bit, my divs shrinks together. That's not how I want it to appear. After figuring out a while how to solve this problem I came up with this "great" idea to make a div wrap that cover all the other divs.
So then my divs need a wrap right?
<div id="wrap">
<div id="header"> </div>
<div id="body"> </div>
</div>
#wrap {
width: 600px;
height: 800px;
position: absolute;
}
Now in my css code I need to set the px of height and width of the wrap div, right? Now this will work but the problem is. How do I get to optimize this then on another computer screen? I mean this wouldn't work on all the users right?
Anyway.. Let me repeat the question once again...
How do I my webpages to optimize to minimizing windows in the browsers and to work on all screens? I mean everything has to relate to pixels right? Now how the ** is that suppose to work If all the screen has different size's? I mean then you need to use the % to make it work. I don't want you guys to mainly sort of this exactly problem but give me some advice how to generally optimize a webpage in the best way.
Ok here is what I usally do:
Whenever I want to create a website that doesn't fill 100% of the page I create a wrapper around ALL the content, like you did. You can either do this with fixed values or with % values. In case you want to use % values it's often smart to use min-width or max-width for your wrapper. This way you only need to define fixed values once and all the inner content can be defined by using %. This helps especially if you want to resize the whole content later on, if your realize that it might look better with a little bit more width.
Height values rarely use % values, only use % values for the height if you are using a fixed height for your container. If you want to create different layouts for different screen resolutions you can always have a look at the #media tag which allows you to create resolution specific css code. This however is only recommended for a small set of resolutions, let's say, 2 different resolutions for desktop computer and maybe 2 different resolutions for mobile phones (4 different css definitions).
I usually try to use min-width and max-width with % values, and if that isn't possible for example for popup windows or fixed elements like a sidebar I use px values. And if I for example want to support multiple columns for my content if the user has larger screens I make use of #media
I also don't get why you're using absolute positioning. If you just want to center content use margin: 0 auto; on your container. Btw in html5 you can also use the <header> tag if you want to specify a header. Using a div and giving it a class/id isn't wrong but I think you should know that there is some new stuff out there in the world of html5/css3
EIDT:
Your title is a little bit confusing, since your question is totally different. For website optimization I strongly recommend http://developer.yahoo.com/performance/rules.html or for advanced optimization you can use https://developers.google.com/closure/ and https://code.google.com/p/closure-stylesheets/
Four your above code:
you can use:
#wrap {
margin:0 auto;
width: 600px;
height: 800px;
position: absolute;
}
instead of
#wrap {
width: 600px;
height: 800px;
position: absolute;
}
And to make make your webpage look same when window is re-size or you have to learn abut Responsive Web Development. Start using media queries in you pages.
For responsive design use media queries: Here is good example of media queries . Also learn how to use it.
Im still having a bit trouble understanding my divs. Im trying to make a website that changes its sizes according to browser/screen size.
Ive gotten this far:
my html:
<div id="wrapper">
<div id="header">Header</div>
<div id="left">Left</div>
<div id="right">Right</div>
<div id="footer">Footer</div>
</div>
my css:
#wrapper{width: 60%;}
#header{width: 100%; padding-top: 11.00%;}
#left{float: left; width: 27.5%; padding-top: 44%;}
#right{float: left; width: 72.5%; padding-top: 44.00%;}
#footer{clear: both; width: 100%; padding-top: 11.40%;}
Now my divs are exactly the right size, the problem is that the conect is always at the bottom of the div but i need it to be like a normal div so i can do anything i want with it.
Whats the easiest way to use it like a normal div?
Thank you for any help! :)
Edit:
Here is what it looks like: http://jsfiddle.net/rswML/
... and as i said the problem is that the text is always at the bottom of the div. I understand its because of padding-top but i need it to keep the hight ratio to width andd still use the div normally.
What you are trying here is a responsive design concept. I advice you to try out bootstrap framework for this. Rather than doing everything by your own, you can get everything done by simply adding a class to your divs.
Responsive web design (RWD) is a web design approach aimed at crafting
sites to provide an optimal viewing experience—easy reading and
navigation with a minimum of resizing, panning, and scrolling—across a
wide range of devices
I think the issue may be with your padding values. Perhaps adjusting them will allow you to have the control you want or maybe a margin-top would be better. Also, not sure if you were hoping to line up the tops of the elements #left and #right but those padding settings may render at different values. The padding-top property with a percentage references the containing block's width. Hope that helps. Cheers.
The solution was that i had to make header divs position: relative and then make another div inside of it that was position: absolute and width/height: 100%.
i want to have a box in the centre of a page and several boxes scattered around, with different sizes, random positions, and no overlap.
I think this is not possible to do with just html and css, and javascript/html DOM is needed.
Have you seen examples of this? Do you have any tip or piece of code that can be helpful? Dont mind if it doesnt solve the whole problem, a solution for one of the sub-problems (eg no overlap) will be useful too!
Thanks
alt text http://img99.imageshack.us/img99/3563/scattered.jpg
If the size is fixed, perfectly centering a div is not hard. The trick is to apply negative margins:
#centered {
width: 400px; height: 200px;
position: absolute; top: 50%; left: 50%;
margin-left: -200px; margin-top: -100px;
}
Now, to position other divs relative to this centered div, you use position: relative.
Example HTML snippit:
<div id="centered">
<div id="other"></div>
</div>
And in addition to the above, the following CSS:
#other {
width: 200px; height: 100px;
position: relative; top: -150px; left: 180px;
}
Add a border or background color to get a better look at the example:
div {
border: 1px solid black;
}
If this is not a static page, and you want to randomize on every page load, you could either use Javascript or some server side scripting to create and style divs dynamically.
I assume you want to randomize on every page load, so that different users see different things. If so, this isn't possible with only HTML and CSS. CSS is designed to be deterministic and reproducible in a consistent way, which is the opposite of what you're going for here.
However, a clever way around this would be to link in a stylesheet from a dynamic page which itself serves random CSS. For example, have something like the following:
<link rel="stylesheet" type="text/css" href="styles.php"/>
where styles.php is a PHP page that generates the random CSS.
As far as your Question goes: No its not possible to do just using HTML and CSS.
I can't be done with just HTML and CSS, your options are:
create a style sheet each time with a server side language like PHP and serve the content precalculated to the browser
use a basic fixed style sheet and modify the DOM via Javascript
as for the non overlap part, you have to do a bit of math/geometry: generate coordinates for vertexes making sure they don't fall in a previously created box (boring but quite easy) and use position: absolute to place them.