Undesired horizontal scrollbar on 5 column responsive set up

HTML & CSS
21

the following code succeded: “Document checking completed. No errors or warnings to show.”

here it is:

<header>
	<div> 
		<img 
		class="img-responsive" 
		src="imagens/imagemTopo.jpg" 
		alt="Friso" /> 
	</div>
	
	
	<div class="centrado">
		<img src="imagens/agrupamento.png" alt="Lupa"  />
		<a href="pesquisa.htm">
		<img 
			class="buscadta"
			src="imagens/busca.png" 
			width="16" 
			height="16"
			alt="Lupa" /></a>
	
	<ul>
		<li class="dropdown">
		<span class="dropbtn">Eça de Queirós</span>
		<div class="dropdown-content"> 
			<a href="ecaVisitaVirtual.htm">Visita Virtual</a> 
			<a href="ecaContactos.htm">Contactos</a>			
		</div>
		</li>
		
		<li class="dropdown"> 
		<span class="dropbtn">Parque das Nações</span>
		<div class="dropdown-content"> 
			<a href="parqueVisitaVirtual.htm">Visita Virtual</a> 
			<a href="parqueContactos.htm">Contactos</a>			
		</div>
		</li>
		
		<li class="dropdown">
		<span class="dropbtn">Vasco da Gama</span>
		<div class="dropdown-content"> 
			<a href="vascoVisitaVirtual.htm">Visita Virtual</a> 
			<a href="vascoContactos.htm">Contactos</a>			
		</div>
		</li>
	</ul>
	</div>
</header>

So i have a logo in the middle, a little search icon on the same row at the extreme right, and then the dropdown menu center aligned BELOW the logo
ok, this validates, but what i want but just cant write properly (validating code) is having the menu on the very same row/line of the logo, being the logo+ menu centered and the search icon right aligned

is that feasible?

anyone can please give me any idea?

thanks in advance

22

The HTML looks much better.

I see lots of classnames. Do you have CSS for those classnames? We need to see the HTML and the CSS together to get the full picture… which is why I suggest posting a “working page”, one that starts with <doctype , contains the <head> section, <body> and content, and ends with </html>. That way we can see exactly what you see. Foreground images should generally have width and height sizes. Naturally, links to images should be complete URLs just as are links to framework code, etc. A screenshot sometimes helps, too. Use your judgement. If a stranger could read your post and know what the resources are and how you expect the page to look, then you’re probably all set.

BTW - this is how your HTML posted above renders in my desktop monitor. How does that click with your descriptions?

If you have not taken a formal or on-line course in basic HTML and CSS, I strongly recommend that you do so right away. Time’s a wastin’. You have an ambitious project ahead.

23

sure![quote=“ronpat, post:22, topic:230867”]
A screenshot sometimes helps, too
[/quote]

i’m posting a print screen of my ‘second page’, i mean, the model for all others pages except the main page
BTW, the header, with the logo, the small search icon and the menu is exactly how i’d like to have it, but it does not validate (but i have another layout that validates 100%)[quote=“ronpat, post:22, topic:230867”]
If you have not taken a formal or on-line course in basic HTML and CSS, I strongly recommend that you do so right away
[/quote]
i read lots of tutorials, some articles, and a book or two

1110×823 144 KB

as soon as i have time, i’ll post my complete working code, which fully validates, what makes me a very happy man :slight_smile:

24

I do not want to sound like I’m talking out of both sides of my mouth, but please keep in mind that the validator is a tool, arguably the most valuable in your toolkit, but still just a tool. One can write perfectly valid code that doesn’t render a thing on the screen or renders a messy layout. A solid understanding of the fundamentals of HTML and CSS is the best tool of all and opens the door to a greater understanding of the intricacies of how they work together.and interact with one another. There are often several ways of doing the same things using CSS, but the best choice depends on the context in which the behavior is needed.

Want to read an interesting article? Paul OBrien just started a new thread about positioning objects on a page. Fascinating reading.

2 Likes
25

playing with bootstrap

still, uncertain about header: this one or the previous, though possibly adapted and improved?

1248×642 181 KB

26

the link to the test pages, in case someone wants to comment:

28

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.