thank you, I didn’t know this thing in this deepnes . frank
1 Like
Hi
I managed to get screwed up again. applying flexbox, it works to reorder column(column reverse), but centering menu is a bit tricky. It centers everything evend topsidenav to that I would keep right. even the main menu is not quite centered. would you mind to have a look please. I need some help to center properely the main menu and keep right the top side one(login/signup)
thank you and I am sorry for inconveniences.
We’ve done this a few times now in previous posts 
Change the min-width media query to this.
@media screen and (min-width: 768px) {
body {
margin-top: 150px;
margin-bottom: 40px;
margin-left: 0px;
margin-right: 0px;
}
.fixed-relative {
position: fixed;
top: 0;
left: 0;
right: 0;
min-height: 104px;
}
.flex-container {
display: flex;
flex-wrap: wrap;
}
.flex-container>ulmain {
text-align: center;
}
.navbar-right {
order: 1;
margin-left: auto
}
.ulmain {
margin-left: auto;
}
}
I dislike the magic number (150) margin on the body (and it would be better as padding to avoid confusion and possible collapsing margins). At the very least it should be in rems or em and not px to allow users to resize their text.
Hi
thank you . I would like to ask, if I want to controll distance left and right(most likenly padding) but for content only (footer, navbar excluded), should I put content in a cotainer or div or is there any option? with other words: navigation and footer width 100%, content with a given margin or padding left and rigt. thank you, frank
it’s all about context and you never give me just enough information to answer your question correctly
Control the distance left and right on what?
We’ve been over centring many times in this thread and the answers are many and varied depending on situation.
You can move elements using margins or you can fill them out using padding but generally once you have placed the element it should perform naturally without magic numbers.
If you are talking about text content then that should already be in some sort of main container and you can just use some padding to give space but if you are talking about centring the whole container then that’s a different approach.
If you mean you want your content to sit in the middle of the page with a gap at the left and right then you would use auto margins and give the container a max-width of the max width you require.
Hope that answers some of the questions:)
Have you ever completed a course in HTML and CSS? If not, please consider taking a fundamental course in HTML and CSS. No matter how much help we give you, if you do not understand the basics of HTML and CSS, you will not be able to maintain the page or site that you write.
Please read out posting guidelines for information about describing a trouble so others can help you solve that trouble.
thank you. my question is having 8d #91 posted codepen( a simple template with top menu some sort of content and footer. having this template how can I use for example padding from left and right , only applied on conten, topmenu and footer not included. until now padding applied obviously was valid for topmenu and footer also. I would like to exclude topmenu and footer, content only.). it is a question for me at the moment. can you help me please if it is possible, and I am realy sorry for being inaccurate. I try my best to present my problem as clear as possible, if something is not , please let me know, thank you, frank
yes I have taken html and css courses and a 10 week bootstrap and jquery, after that python course than php1 and php2 at macbeth centre hammersmith. my problem is that having some background in programming, I try to apply my ideas in a similar way and I get screwed up. simple thing can be done easily, but if you have ideas that can be tricky. thank you
1 Like
It’s very hard to see the structure of your HTML in that CodePen. You should separate the CSS into its allotted panel.
If you want to apply padding to the content only, then simply target the .container class.
1 Like
It’s still a little unclear what you are asking but here is a screenshot of your codepen #91 and I have coloured the middle content section red so we know what we are talking about.
As you can see the middle red section is centred with auto margins and has padding. It is accomplished by using the container class. If you want the same centred approach in your footer or header then you would nest the content from those elements inside another .container div and it will behave like the red middle section.
It all depends what you require.
If you are using bootstrap then you should really follow the bootstrap guidelines and examples as they clearly show how to arrange content in a bootstrap fashion
2 Likes
Hi
thank you for answer. yes I am using bs3, that’s why was I uncertain in the matter. I was thinking on divs ,but at ones I use bs3, I need to apply row, then content or content in container. If I apply div class row, can I add a custom class with a choosen name beside row class, that contain padding-left, padding-right? .It might be cofusing again, so having the previous exemple with container with red background and content in it, I would imagine the whole container in a div class row, if I am right. please help me to get right, I know content can be placed, devided in many different rows and even rows can contain rows. here is my concern, having only some experince with bs3, how to use properely padding-left, padding-right or margins. with custom or given values. thank you. please let me know if I am not accurate, to make corrections. thank you, frank
I can post a previous exemple of mine, where I used bootstrap, thank you, frank
You can add your custom classes to anything so that you can modify the grid to your needs. However if for example you add a class to .row and change margin or padding then you break the whole grid structure.
Bootstrap rows can only have columns as direct children and rows and columns interact together (rows have negative margins and columns soak up the negative margins with an equivalent amount of padding to create the gutters). This is why you cannot go willy-nilly changing property/values in the grid without a firm understanding of how the grid works.
You can place your content inside a standard bootstrap row and column class and it will have the built in defined gutters. Just look at the grid documentation as there are plenty of examples.
Once you realise how the grid works then you can of course bend it to your will knowing the consequences of what you are doing.
I cannot teach you how bootstrap works and its something you will need to learn for yourself by practice practice practice. You don’t have to use the row and column classes if you want custom layouts not easily achieved with the bootstrap grid but then you lose all the built in responsive functions of the grid classes.
Unless you have a good grasp of bootstrap and a good grasp of CSS you will struggle to create your own layouts. Beginners often latch on to bootstrap as though it is a crutch when in fact it is just a tool that you need to learn how to use properly.
In the end it’s all just CSS and html.
1 Like
thank you, frank
Hi
I am sorry to come back with problems, I tryed to make a version of top navigatin with flex box css, influenced from your points mentioned in 13d #128 and before. I made a newer versionbut still have problems. just before change from hamburger menu to top navigation menu, there is some smal changes in brand name size. if you change size slowly, you can notice some size changins I don’t understand. the rest might look ok but I have some filings that there are problems. I downloaded the bootstrap3 menu from w3schools and tryed to make changings conform previous postings, at least as managed to get it, please help me to get right. I am just trying it to learn , and understeand this part properely, however I am stroggling with it yet. with embedded flexbox version might look working but not as I would like. thank you and I am sorry for inconveniences.
I only see the two changes at 768px and upwards and then 767px and downwards as directed by these 2 media queries.
@media screen and (min-width: 768px) {
.navbar-brand{
font-size:24px;
}
}
@media screen and (max-width: 767px) {
.navbar-brand{
font-size:20px;
}
}
That seems to be working as directed or are you seeing something different?
Hi
yes, as the window width get shorter, at 768px (colapsing) top navigation changes to sandwich menu, and sortly after changing, as you move the cursor with the edge of the window, you’ll see a second , size changing in navbar-brand. I do not know why is it happen.
also I made navbar{ border-readius:0;}, if it is correct.
are the "subcontainers " right also? I mean codewise. I just would like to make sure, I didn’t mess up the code. as a beginner, I made it already, unfotunately, so I want to avoid it in the future. thank you, frank
Hi
unfortunately I’ve got a new problem group. as I corrected a mistake of mine, top side menu is sliding to right, no padding however it should have.
another, is that I can not slide the main navigatin bar to left side, it would be more centered. is there any solution? thank you, and also pasting the faulty part
@media screen and (min-width: 768px) {
body {
background-color: lightgreen;
}
.flex-container {
display: flex;
flex-direction: column-reverse;
}
.flex-main {
width:100%;
display: flex;
justify-content: center;
}
.navbar-brand{
font-size:24px;
}
.flex-container > .flex-main {
justify-content: flex-start;
}
}
I believe I’ve given you all the answers to this before so that it could be done properly
The problem with your arrangement is that you have floated the items left and right but the middle menu now takes account of the left and right floats so is not perfectly centred.
As you want the menu on another line you should clear the floats but unfortunately due to the html that will also make the right float clear the left.
The best I can do is use a magic number to pull the menu back into position.
Add this css to the min-width css in the appropriate positions.
.flex-container{clear:both}
.navbar-right{
margin-top:-5rem;
}
Hi
thank you for help. it looks kool, I think this something I was looking for and hopefully the code is ok too, sending link below, thank you again and I am sorry for inconveniences.
1 Like