Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 3 years ago.
Improve this question
image
this is my first post here and I'm trying to figure out how I can do something like that
thanks in advance
I would use flexbox in CSS. once you lean this it will be a tool you use a lot for this type of thing. when you use flexbox there is a container element. i would use a div. see my example.
<!--HTML-->
<html>
<div id="container">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</html>
the divs that are "class" of "box" are the no1 and no2 paragraphs. in CSS use:
/*CSS*/
#container {
display: flex;
flex-direction: row;
}
you'll just need to format the class of box which will format each of the elements in that class (4 in my example above)
use this cheat sheet and you'll be a pro at this in no time.
https://www.steveaolsen.com/docs/FlexboxCheatsheet.pdf
also, view the page source you want to copy, it will all be there for you to see.
good luck
In addition to what sao said, a more basic way would be using display's inline or inline-block properties:
.box {
display: inline-block;
}
<div>
<div class="box">X</div>
<div class="box">X</div>
<div class="box">X</div>
</div>
It should do the trick, but I agree that using flex is a better and more advanced way to do so.
Also, I'd recommend searching a bit more for your question before asking it, I'm sure this question has been asked before.
Best of luck mate!
you've got many options depending on wether or not you intend for it to be only text, images .. and how adaptable you want it to be in the future.
here is a simple way that doesn't require advanced CSS:
.container { /*attributes of "div" weating the "container" class*/
display: flex;
width: 500px; /*make it 500pixels wide*/
}
.box {
width: 50%; /*all "box" will have a width of 50% it's parent (container here)*/
padding: 10px; /*give some cushion on the sides*/
}
.box:first-child { /*select only the first "box", very powerful*/
border-right: 1px solid red; /*right border to delimit*/
}
<div class="container"> <!--wide container in which both boxes go in-->
<div class="box"><!--1st box-->
<p>Your first text goes here and it goes on and on and on and on and on and forever....</p><!--1st text-->
</div><!--close 1st box-->
<div class="box"><!--2nd blox-->
<p>Your second text goes here and it goes on and on and on and on and on and forever....</p><!--2nd text-->
</div><!--close 2nd box-->
</div><!--close wide container box-->
The possibilities from here are endless. Visit a trusted site on HTML/CSS/JS coding to get started. I'm personally keen on Mozilla
Your most useful tool will be the "inspector", on any modern browser today you have the possibility to change CSS code and play around, discover what works and what doesn't. It doesn't affect anyone but you, on the page you're visiting, for example :
I used Flex in the example, but it's only one of the many options. With CSS there are often more than 2 ways to produce 1 result. Always go for the one with less code and less specific (more open ended to future changes)
Now hope your curiosity is tickled, get out there, learn & code !
I'm trying to figure out how I can do something like that
You have multiple options. From approximate worst to approximate best:
HTML tables (https://www.w3schools.com/html/html_tables.asp)
CSS absolute positioning (https://css3-tutorial.net/positioning/absolute/)
CSS tables (https://colintoh.com/blog/display-table-anti-hero)
CSS floats (https://www.w3schools.com/css/css_float.asp)
CSS Columns (https://www.w3schools.com/css/css3_multiple_columns.asp)
CSS Flexbox (https://css-tricks.com/snippets/css/a-guide-to-flexbox/)
CSS Grid (https://css-tricks.com/snippets/css/complete-guide-grid/)
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 5 years ago.
Improve this question
I am trying to fix the following issue on this website: http://santanna.beutifi-website.com/
Notice that there is a blank space to the right as if the page has a wider width or margin, although after checking these features, I could not figure out what the problem is. It does not happen on mobile devices though.
I played with developer tools for quite a while and no luck, I was wondering if any of you might be able to see whats wrong...
Cheers!
I started writing what #Matthew said but since you're using WordPress it's probably better to just overwrite the style. Try this:
.copyright{
margin-left: 0 !important;
}
.copyright p{
text-align:center !important;
}
Add that to custom styles of the theme if possible. Good luck!
The issue only shows when you make the screen size smaller. It is being caused by your css below:
#media only screen and (min-width: 840px) (index):175
.copyright {
margin-left: 25%; */
}
When I remove that it solved the problem.
If you want your text to be centered you can either remove the text-left class you have on that div and center it manually or you can add text-align: center !important to your copyright class after you remove the margin.
Edit:
Also you should not double up on the .container classes like you have below. Either use one or the other.
<div class="container-fluid bg-dark-gray footer-bottom">
<div class="container">
<div class="row margin-three">
<!-- copyright -->
<div class="col-md-12 col-sm-12 col-xs-12 copyright text-left letter-spacing-1 xs-text-center xs-margin-bottom-one light-gray-text2">
<p align="left" style="font-size:11px;text-transform:uppercase;color:#939598;width: 100% !important;">Copyright © 2017. Built & managed by <span style="color:#56c7cc;">BEUTiFi.com</span> All rights reserved.</p>
</div>
<!-- end copyright -->
</div>
</div>
</div>
It's a problem with the css in the .
the .container class item is set to a pixel width;
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 6 years ago.
Improve this question
I am a self taught coder developing a website for a nonprofit I've founded, and would like to have a footer to thank the sponsors of said nonprofit. I'm trying to distinguish this section from the rest of the site by changing its background color relative to the rest of my webpage. I've tried everything I can think of, like creating a div/footer with a width of 100% and a different background-color, but that only adds background colors to the portions of the div that contain text (the text appears to be highlighted with this color, rather than the color being a solid background applied to the entire div). All of my research has only turned up results for either how to make the entire background of a page a specific color, or how to add styles to horizontal rules, neither of which help me (the former because I want the color to differ from that of the rest of the page, and the latter because I am unable to put the content/text I would like to include over it). If anyone could help, it would be much appreciated. Thank you!
Edit: Clarification has been requested. Essentially, I was creating a footer for my website that I wanted to look like the one here with that black bar at the bottom that spans the page. My issue was that the div I was creating didn't span the page well enough to make it a solid bar; it was more of a blocky coloring that only showed up in nested divs containing text. I posted this question because I wasn't able to find any guides on how to span the page with a footer like this, but adding a nested div with the color background I wanted and a width of 100vm, setting the margins to 0, and hiding overflow ultimately let me accomplish my intent. Hopefully this is adequate clarification. I'd also appreciate if the downvote I accrued were removed, or at least explained; it's difficult to improve my posts if I don't know the issue with them
It's kind of hard to tell what the exact issue is without a visual example of your issue. But from the sounds of it, you want the background to extend the entire width of the page, but don't want the actual content to extend the entire width.
To do this, I would introduce a class that represents the width you want your content to be, and put that class nested within the footer (and any other elements on the page) where you want the parent (ie, the footer) to extend the width of the page, and everything inside the footer to be contained within the width that you want the content to be displayed. Here is an example, where the class I"m referring to is .viewport. Assigning a background to your footer and nesting .viewport within the footer will give the footer a full-width background, while leaving the text nested within the footer at your specified width.
body {
margin: 0;
}
header {
background: #eee;
}
.viewport {
max-width: 960px;
width: 90%;
margin: auto;
}
footer {
background: #171717;
color: #fff;
}
.section {
padding: 2em 0;
}
<header class="section">
<h1 class="viewport">
This is a header
</h1>
</header>
<main class="section">
<div class="viewport">
<p>hello world</p>
<p>hello world</p>
<p>hello world</p>
<p>hello world</p>
<p>hello world</p>
</div>
</main>
<footer class="section">
<p class="viewport">This is a footer</p>
</footer>
Here is a quick fix for you:
HTML
<div class="Footer">
<div class="Content">Place you stuff here</div>
</div>
CSS
.Footer{position:relative; width:100%; height:100px; display:block; float:left; background-color:RED;}
.Footer > .Content{position:relative; margin:auto; width:80%; height:100%;}
The best and easiest solution is with bootstrap but since you didnt mention it that means you are not using it.
<footer>
<div class="sponsors">
Type anything you want
</div>
</footer>
CSS:
.sponsors{
text-align:center;
background-color:(your color);
}
This should work, if not tell me what went wrong!
I am using a 960 responsive layout from skeleton, i have their css stylesheet which i have to addon if i want to include class. After experimenting i managed to get the site i want, but not without having piles of unnecessary selections.
So for example, based on what u see my css reflect the selector .container.four.columns, that say if i add a banner class, in my css should i only do .container.banner or .container.four.columns.banner will be the best way?
Since i thought if i add a lot of reusable style classes to it the css selector will be very long if i go into each details.. Please advise as i'm trying to make my code look as clean and neat as possible but not sure the best selectors to use as when i tried shortcut like just .banner nothing happens and i must have at least .container.banner before it make the changes. Thanks
HTML:
<div id="content" class="container">
<div class="four columns banner">
<div id="banner_a3da" class="banner_img">
<img src="page_home/banner_A3DA.jpg">
</div>
</div>
<div class="four columns banner">
<div id="banner_fi" class="banner_img">
<img src="page_home/banner_FI.jpg">
</div>
</div>
</div>
CSS:
/* Base Grid */
.container .four.columns { width: 220px; }
.banner or .container.banner or .container.four.columns.banner { width:100% }
Well either ways are correct, but you can use more classes to select specific object in your case. But maybe you have some .banner in .container.three.columns.banner and he is for example 50% and you wanted it to be 50%, but with .banner you will select him and you will resize it to 100%.
To resume, with single selection you may affect some elements that you didn't wanted, becouse there are more elements with that class.
I don't know if that's just pseudo-CSS or what, but you do 'or' with a comma,:
.banner,
.container .banner,
.container .four.columns.banner {
width:100%
}
You also had a missing space after .container.
Does that help?
This question already has an answer here:
Clearing floats dynamically with CSS
(1 answer)
Closed 8 years ago.
I am trying to create an efficient, clean layout for an e-commerce site. This site is being built in-house for my client, I am in charge only of the CSS and basic structure.
I would like to figure out the best STRUCTURAL way to clear every third box in a row. When the boxes are all the same size they float naturally in a grid, but when one of them changes size based on content (this will be common on the site) the boxes shift improperly and break the layout.
I considered/tried two options:
I can manually place a div container, with "clear" styles after every third box.
I can wrap the boxes in groups of 3, and use element:after to place a clear in this container, which would effectively clear the 3 boxes in the row.
Is one of these options better than the other? I know that the "clear" div is not preferable, but is creating a new container to wrap around the 3 boxes that much better? Either way I am still adding a new HTML element to the page.
Is there another option that I am missing? I know it's possible to do either of these options dynamically, but I want to make sure that I choose the more efficient option for this project. That is, I don't have to worry about how the code will be functionally written, I just need to figure out how the final structure will look.
I'm not experienced with this kind of layout and I don't know if there might be things that I haven't discovered yet, as for how to do this.
If I understand right, you want every third item to have clear: both;
Lets assume these items are div's. All of which are inside <div id="container"></div>.
Now, I would do the following:
#container div:nth-child(3n+1) {
clear: both;
}
You can use the :nth-child() CSS pseudo class to achieve this.
More info here: https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child
Example:
div:nth-child(3n) {
clear:right;
}
Depending on the support that you need to provide, you could use the CSS3 nth-child selector.
div:nth-child(3n) {
clear: right;
}
Or something similar depending on how everything else is setup.
You can accomplish this by using the pseudo element :nth-child()
#element:nth-child(3n) {
clear:both;
}
Where n starts at 0 and goes up by one for each of that element type
Here's an overall look at :nth-child()
http://www.w3schools.com/cssref/sel_nth-child.asp
Assuming your top level wrapper has a fixed width in which you would like to fit the rows of 3 boxes each, the best solution is to put a row-container div with clear:both css styling as in the code below
<html>
<body>
<style>
#box_wrapper{
max-width:200px;
border: 2px blue solid;
}
.row_container{
clear:both;
border: 1px yellow solid;
}
.box{
width:50px;
height:50px;
float:left;
border: 1px red dotted;
}
</style>
<div id="box_wrapper" width="200" height="200">
<div class="row_container">
<div class="box" id="box_1"></div>
<div class="box" id="box_2"></div>
<div class="box" id="box_3"></div>
</div>
<div class="row_container">
<div class="box" id="box_4"></div>
<div class="box" id="box_5"></div>
<div class="box" id="box_6"></div>
</div>
<div class="row_container">
<div class="box" id="box_7"></div>
<div class="box" id="box_8"></div>
<div class="box" id="box_9"></div>
</div>
</div>
</body>
</html>
I don't know much about html or css but I have done this much;
I want to stack divs so it looks like this (please excuse the bad drawing) ;
I have googled how to and tried different thing but the likes/dislikes boxes always end up not moving or move to the very left/very right.
<div style="float:left;width:300px;height:350px;text-align:center;">
<div style="float:left;width:500px;height:200px;text-align:center;">
<div id="wrapper">
<div style="align=center;">
<div id="first">1</div>
<div id="second">2</div>
These are th three divs I have.
First one has links [the add/message etc]
Second one has "thelastgecko" and profile text.
And I am trying to use the last box for likes/dislikes but whatever im doing it isn't working.
You usually use one "huge" div, set it below 1024 pixels wide so old screens can view it and then you usually center it in the middle of the screen. Then inside of that big div you put the "add me - message me - gallery" with a "float:left" or "position:absolute" I prefer the latter. then you make another div containing the "The last gecko" + dislikes & likes and center that div, then after that I would make another div and either do a "float:right" or a "position:absolute; left:'huge width minus this ones width".
I did write everything in text and readable since giving the code away doesn't teach as well.
But in case you still didn't get it, here's my idea:
<html>
<head>
<style>
body{margin:0px;padding:0px;width:100%;height:100%;}
#container{width:900px;margin:auto;margin-top:200px;}
#add_me,#dislike_text{position:absolute;width:200px;background-color:#ace;}
#last_gecko,#holder{margin:auto;width:500px;background-color:#eca;}
#likes,#dislikes{float:left;width:250px;display:block;background-color:#cae;}
#dislikes{background-color:#cea;}
#dislike_text{margin-left:700px;background-color:#eac;}
</style>
</head>
<body>
<div id="container">
<div id="add_me">add me<br>message me<br>wuts going on</div>
<div id="dislike_text">dislike text</div>
<div id="last_gecko">
Last Gecko
<div id="holder">
<div id="dislikes">dislikes</div>
<div id="likes">likes</div>
</div>
</div>
</div>
</body>
</html>
Made it workable, it will at least show you in what direction to move, It might not be the best way but it is my way.
You could do something like this: http://jsfiddle.net/jAKgd/
CSS
#wrapper {
width: 800px;
}
#leftColumn {
float: left;
height: 800px;
width: 200px;
margin-right: 5px;
}
#leftColumn a {
display: block;
}
#rightColumn {
width: 100%;
}
#contentDislike,
#contentLike {
display: inline-block;
width: 250px;
}
Obviously the height/widths can be changed to meet your needs. I was just doing a quick example.
HTML
<div id="wrapper">
<div id="leftColumn"> Link
Link
Link
Link
Link
</div>
<div id="rightColumn">
<div id="contentTop">
<img src="/images/image_name.jpg" alt="image text here" />
<p>THIS IS WHERE YOUR PROFILE TEXT WOULD SHOW. IT CAN EXPAND HEIGHT AS NEEDED.</p>
</div>
<div>
<div id="contentDislike">DISLIKE CONTENT HERE</div>
<div id="contentLike">LIKE CONTENT HERE</div>
</div>
<div>YOUR LOWER TWO COLUMNS WILL GO IN THIS DIV</div>
</div>
</div>
It's a bad way of design to use floats to place divs at some place.
It's a much better way to use, for example, a flex layout.
But this is not supported by all browsers (But nearly. If you can, take this option).
Another solution is this one:
Use the width option. You set the width of any div of your html to a fixed number, in percent, of course. Watch this example
But if you do this, you will have to pay attention for very large and very little screens, I think you would have to write alternative css style sheets which are working with (max-width) and (min-width).
And there is another solution: the gridlayout. It is part of the standards since 2013 (I think) but it's not well supported yet. But maybe in future.
Hope I could help