¿navbar con fondo repetido a la derecha?

[CBeneyto]

Buenos dias gente!

Una duda rápida, tengo un trabajillo por hacer y tengo que meterle en un navbar un fondo repetido a la derecha.

Esta desarrollado con bootstrap.
Por tanto esta el fondo del <navbar> que esta dentro de un class="container", pero quiero ponerle un fondo que sera repeat-x desde el punto X de la pantalla.

Os dejo captura. Ahora mismo esta asi:



Pero tiene que acabar asi:



Es decir que automaticamente se ponga el bg de imagen que tengo todo lo que queda de pantalla hacia la derecha.

Por último una duda rápida tambien.

Tengo un div, que tiene que estar en una posicion fija en pantalla (ejem: top:500px; left:500px; es un div de 500x500px, pero si el container tiene 960px, el div esta al borde de la derecha de ese container, y ese div tiene una imagen (ya sea imagen o fondo) pero si lo pongo, en pantallas pequeñas, me sale scroll abajo.

¿Como puedo hacer para que no me salga el scroll? que este siempre en esa posicion? y que si la pantalla es mas pequeña, simplemente se corte esa imagen, pero que no salga el scroll.

Espero haberme explicado bien ^^

Un saludo y gracias!

[pzin]

Para tu primera duda habrá que ver el código, que supongo que el problema no será ponerle o no la imagen.

Para la segunda en realidad también habría que ver el código, pero si quieres ocultar algo si no cabe en algún sitio, se hace con overflow: hidden aplicado al contenedor.

[CBeneyto]

Iniciado por pzin

Para tu primera duda habrá que ver el código, que supongo que el problema no será ponerle o no la imagen.

Para la segunda en realidad también habría que ver el código, pero si quieres ocultar algo si no cabe en algún sitio, se hace con overflow: hidden aplicado al contenedor.

Gracias por la respuesta pzin, siguiendo tu consejo, dejo sendos códigos a ver si me podeis hechar una mano que ando algo perdido.

Este es el div completo que hace el menu:

Código HTML:

<div class="fondo-menu-principal-index">
            <div class="container menu-principal-index">
                
                <a href="#"><div class="logo-menu"></div></a>
                
                <div class="masthead">
                    <ul class="nav nav-pills fondo-menu pull-right">
                        <li class="fondo-inicio"></li>
                        <li class="menu-nl active"><a href="#">woocommerce</a></li>
                        <li class="menu-nl"><a href="#">wordpress</a></li>
                        <li class="menu-nl"><a href="#">design</a></li>
                        <li class="menu-nl"><a href="#">seo</a></li>
                        <li class="menu-nl"><a href="#">contact</a></li>
                        <li class="menu-nl"><a href="#">about</a></li>
                        <li class="menu-nl"><a href="#">contact</a></li>
                        <li class="menu-nl"><a href="#">about</a></li>
                    </ul>
                </div>
            
            </div>
        </div>
 

Y este es el div completo que hace el scroll lateral y no sabemos como solucionarlo.
El objeto, si tiene la imagen grande, se tendria que ver, pero tu pantalla es más pequeña simplemente se iria recortando pero sin salir el scroll..

Código HTML:

<div class="lapiz"></div>
 

El css de este último es el siguiente:

Código CSS:

.lapiz {
background-image: url('../img/principal/lapiz.png');
height: 450px;
width: 436px;
position: relative;
top: 220px;
right: -555px;
}
 

A ver si lo podemos solucionar gente!
Muuuchas gracias! ;)

[pzin]

Para lo del menú falta el código CSS. Que estando en un foro de CSS...
De todas formas, ¿cuál es el problema del menú? ¿Que no llega a cubrir el sobrante?

Y lo de ocultar .lapiz realmente sólo tiene que indicarle a su contenedor lo que me comenté arriba:

Código CSS:

#contenedordelapiz {
  overflow: hidden;
}
 

[CBeneyto]

Cierto pzin, te te dejo el código css del menu.
Vuelvo a comentar que el fondo que tiene que multiplicarse (repeat-x) hacia la derecha es el div <div class="fondo-menu-principal-index"> al menos eso creo.

El código .HTML correcto es el siguiente:

Código HTML:

<div class="fondo-menu-principal-index">
            <div class="container menu-principal-index">
                
                <a href="#"><div class="logo-menu"></div></a>
                
                <div class="masthead">
                    <ul class="nav nav-pills fondo-menu pull-right">    
                <li class="menu-nl active"><div class="fondo-inicio-div"></div><a href="#" class="menu-nl-prim">woocommerce</a></li>
                <li class="menu-nl"><a href="#">wordpress</a></li>
                <li class="menu-nl"><a href="#">design</a></li>
                <li class="menu-nl"><a href="#">seo</a></li>
                <li class="menu-nl"><a href="#">contact</a></li>
                <li class="menu-nl"><a href="#">about</a></li>
                <li class="menu-nl"><a href="#">contact</a></li>
                <li class="menu-nl"><a href="#">about</a></li>
            </ul>
                </div>
            
            </div>
        </div>
 

y el CSS.

Código CSS:

.fondo-inicio-div {
    background-image: url('../img/menu/borde-inicio-menu.png');
    background-repeat: no-repeat;
    background-size: 28px 76px;
    height: 76px;
    margin-left: -28px;
    margin-top: -14px;
}
 
.nav-pills {
    margin-top: -47px;
    height: 61px;
    font-family: 'Crete Round', serif;
    font-weight: 400;
    font-size: 0.938em;
}
 
.menu-nl {
    padding-top: 14px;
    background-image: url('../img/menu/fondo-menu.png');
    background-size: 10px 76px;
    height: 62px;
}
 
.menu-nl-prim {
    margin-top: -60px !important;   
}
 
.nav-pills a {
    color: #FFFFFF;
}
 

De nuevo... 1000 gracias!

[pzin]

Bueno entonces ¿el problema no es la imagen sino que .fondo-menu-principal-index no llega a cubrir su contenedor?

Es que todo muy lioso. Yo veo la imagen, supongo, aplicada a una clase .menu-nl pero dices que está en .fondo-menu-principal-index, que es el contenedor de todo.

¿Puedes reproducir el problema en un jsfiddle y lo enlazas? Así lo vemos mejor. Sube las imágenes también o usa data-uri o algo para que se vean.

[CBeneyto]

Iniciado por pzin

Bueno entonces ¿el problema no es la imagen sino que .fondo-menu-principal-index no llega a cubrir su contenedor?

Es que todo muy lioso. Yo veo la imagen, supongo, aplicada a una clase .menu-nl pero dices que está en .fondo-menu-principal-index, que es el contenedor de todo.

¿Puedes reproducir el problema en un jsfiddle y lo enlazas? Así lo vemos mejor. Sube las imágenes también o usa data-uri o algo para que se vean.

Claro pzin, te dejo el link de jsfiddle.

http://jsfiddle.net/WRWjN/1/

Los errores son lo del menu y el lápiz que me hace el scroll, simplemente eso.
Mil gracias compañeros! Os debo una (especialmente a ti pzin)

Un saludo

[CBeneyto]

Iniciado por CBeneyto

Claro pzin, te dejo el link de jsfiddle.

http://jsfiddle.net/WRWjN/1/

Los errores son lo del menu y el lápiz que me hace el scroll, simplemente eso.
Mil gracias compañeros! Os debo una (especialmente a ti pzin)

Un saludo

PD: Me he dado cuenta que por los <section> se me crea un borde blanco a la derecha si la pantalla es pequeña, como el caso de jsfiddle.

Lo he revisado todo, pero no encuentro el problema.
¿Porque se crea ese espacio en Blanco?

:S

[pzin]

Hombre lo del espacio ocurre obviamente por el lapiz.

Igual lo suyo sería poner una imagen de fondo entera y ocupe desde la miatad hasta el final, sin que se repita.

Código CSS:

background-position: 50% 0;
 

La estructura es un poco rara la verdad.