but when i try it in my real site, a get a nasty horizontal scrollbar: do you have any idea why?
i tried removing, once a time, every other block i have, but with no result
Since that code (by your own statement) is fine, then we need to see a page with that code thrown in to see what else is triggering the scrollbar. You gave us non offending code . We need to see a full example since there are hundreds of reasons why a scrollbar could appear.
What i found out so far:
i deleted all code except the flex grid one and in <head> commented out this: <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
so, in this way there is no horizontal scroll bar at all
Have you read the instructions for using bootstrap?
The 5 column HTML at the bottom of the page is triggering the horizontal scrollbar at desktop widths. If it is supposed to be bootstrap code, it does not follow the rules of using bootstrap. Read the instructions, they are complicated,… try again.
There is a <span> inside a <table>. That’s invalid HTML.
Any tags within a <ul> or <ol>that are outside of <li> tags are invalid HTML… including anchor tags.
Not to worry. We know the code didn’t write itself.
Take a large step toward being a professional… routinely run your code through the HTML and CSS validators - several times a day, if necessary - so you can identfy problems when they develop, not days or weeks later.
most of my html errors i simply cant fix them or else find a way around, like, for instance, in the very top i have a logo glued to a dropdown menu; i want it all centered but i just dont know how to achieve it, hence the bad code
anyway i apreciate your recomendations and sugestions
if by any chance someone can point me to alternative to the span inside the table, or to the center align i just referred, i’d be very glad
What is the purpose of the span? Is it just to apply the class .alturacelulas?
That could be applied directly to the table:-
<table class="anuncio alturacelulas">
But, I don’t think you should even be using tables, they are not a layout tool and should not be used for that purpose, certainly if you want the site to be responsive.
I’m not very familiar with Bootstrap, but your html does not look like code that has been written to work with Bootstrap, I don’t see any ‘Bootstrapish’ classes anywhere, and I’m quite sure Bootstrap does not work well with table layouts.
As others have pointed out your first stop with bootstrap problems is to consult the documentation and the very first point they make about grids is that rows must always be inside a container.
Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding.
You are using .row which is not wrapped in ,container and therefore the default negative left and right margins on .row trigger a scrollbar. In bootstrap the container element has 15px left and right padding which soaks up those negative margins which will stop the row element from poking out anywhere.
Add .container to your page (or .container-fluid) as directed by the instructions (or don’t use .row as the container for that section and use another name).
You can’t use a framework without learning the rules of the framework or you will continually run into issues like this when you make your own classes up.
you are right: the code isnt bootstrapish, but i have the menus at the bottom with a 5 column bootsrap code, and working
gonna see if i’m able to substitute the table with columns or any other visually agreable solution
as i dont still have a server (i have the pages, docs, images and so on inside a folder and use chrome to visualize them, minimizing the page to emulate smartphones and tablets , i’m not sure if its totally responsive
anyway i feel quite confident in the end i’ll be not ashamed of what i produced
ronpat recomended to validate pages: one of the very first errors was the use of: <div align="center">
well, i must confess i knew it was wrong, but as i had spent literally lots of hours trying to find a satisfactory solution (either testing by trial and error or searching the internet) i opted to use this one
note that i’m refering to the case that has width =100% and could not find anithing suitable
anyway i’m very thankful to all of you who keep helping me
As a general rule of thumb, anything that layout, styling or visual appearance, should not be an attribute of html, it should be handled by the css.
If you choose to go down the route of using Bootstrap for RWD, that’s exactly what you need to do, study how Bootstrap works.
Though Bootstrap is not the only way to achieve RWD.
i remember i read exactly that about the div align
3 years ago i bought this book: “everithing you know about css is wrong”, from sitepoint; and i found out these days many people saying the same, which encouraged me towards using tables for layout, but as i said before, for now i’m gonna try builidng ths site 100% responsive
Tables are html elements, thus not for layout, layout is css’s job.
Table are for tabular data only, like a train timetable or football league or w/e.
If you want multi columns or a grid-like layout, by all means use the css display: table; but never html <table>. Though I think Bootstrap has provision for those layouts anyway.
sometimes i think i’m driving nuts
i studied how to make a very simple grid (two equal width columns) with bootstrap (in order to substitute the table i have)
now i’m able to add extra vertical space (with min-height) but then my text and image aligns at the top and i just cant find a way to vertical align it
do you have any ideas, please?
<div class="container">
<div class="row">
<div class="col-sm-6">
<p class="pbold">Manuais Escolares</p>
<p class="pnormal">Já sairam as listas dos Manuais Escolares adotados para o ano letivo de 2016/2017 na página de cada uma das escolas</p>
</div>
</div>
<div class="col-sm-6">
<img
class="amplia"
src="imagens/quadroPreto.jpg"
width="165px"
height="100px"
alt="Quadro escolar"/>
</div>
</div>
Where is .demo-content applied in the HTML? That classname is not shown in the code that you posted.
Would you consider installing Firefox on your computer? Firefox provides an easy mechanism for Zooming the size of TEXT-Only. It is often useful for testing layouts.
Have you ever started and finished a basic course in HTML and CSS? If you have not done so, you absolutely should… before you try to rewrite your school’s web site. I think you underestimate the sophistication and knowledge that went into its making. Surely the content on the site is updated occasionally… how is that done and who does it?
its (was) mantained by a little old lady that went to retirement (actually i’m quite close too) and i was invited to substitute her[quote=“ronpat, post:19, topic:230867”]
Where is .demo-content applied in the HTML? That classname is not shown in the code that you posted.
[/quote]
as i’m constantly updating and recoding, it was missing; here it goes:
<div class="container">
<div class="row">
<div class="col-sm-6">
<div class="demo-content">
<p class="pbold">Manuais Escolares</p>
<p class="pnormal">Já sairam as listas dos Manuais Escolares adotados para o ano letivo de 2016/2017 na página de cada uma das escolas</p>
</div>
</div>
<div class="col-sm-6">
<div class="demo-content">
<img
class="amplia"
src="imagens/quadroPreto.jpg"
width="165px"
height="100px"
alt="Quadro escolar"/>
</div>
</div>
</div>
</div>
i’m a self taught man (in regard to coding), and i find your words quite discouraging, but i’m conviced i’ll put up the site running, responsive and with few errors
i’ll keep you informed and hopefully you’ll change your mind
anyway let me tell you i apreciate any constructive criticism
. We need to see a full example since there are hundreds of reasons why a scrollbar could appear.
, i’m not sure if its totally responsive
