Cómo posicionar el logo de mi empresa en la barra de navegación con CSS

hamedm · 13 Jun 2013

Buenas, estoy haciendo una pagina web, con CSS, entonces miren, estuve tratando de poner el Logo de mi empresa en la parte izquierda de la barra de navegacion de mi web, pero cuando le digo, que float: left; no me lo manda, me lo pueden chekear?
Codigo Css

PHP:

body {
background-color: #fff;
margin:0;
font-family: Segoe UI;
}
a {
text-decoration:none;
color: #222;
}
header {
height: 55px;
width: 110%;
position: fixed;
background-color: 000;
}
header img{
float: left;
height: 50px;
width:  70px;
}
header a {
color:#000;
background-color: fff;
border-radius: 5px;
padding: 5px;
}
header a:hover {
color:#000;
background: #FF5757;
border-radius: 5px;
padding: 5px;
margin: 3px;
border: 2px  solid;
border-color: #FF5555;
color: #fff;
}
header .main {
width:990px;
margin:0 auto;
}
header .main h1 {
margin: 0;
padding: 0;
color: #FF2727;
padding-top: 10px;
height: 60px;
width: 100px;
float: left;
font-family: Segoe UI;
}
header nav {
float:left;
width:880px;

height:70px;

}

header nav ul{

width:auto;

height:70px;

float:right;

padding:0;

margin:0;

list-style:none;

}

header nav ul li{

float: left;

padding-bottom:25px;

padding-top:25px;

padding-left:10px;

padding-right:10px;

}

header nav ul li.ingresar{

background: red;

color:#fff;

text-shadow:1px 1px rgba(204, 204, 204, 0.46);

}

header nav ul li.ingresar a{

color:#fff;

}

section.cuadro {

width: 960px;

padding:10px;

height: auto!important;

margin:0 auto;

background: #F8F8F8;

border-bottom:1px solid rgba(217, 67, 67, 0.4);

}

section.cuadro tr td h2 {

padding:0;

margin:0;

margin-bottom:10px;

}

section {

width: 100%;

height: 420px;

background: #F8F8F8 url(imgs/bg.png);

border-bottom:1px solid rgba(217, 67, 67, 0.4);

}

section .ingresar {

padding: 20px;

background: red;

font-size: 24px;

color: white;

margin: 0 auto;

position: relative;

top: 170px;

width: 150px;

text-shadow: 1px 1px rgba(34, 34, 34, 0.31);

border-radius: 5px;

border: 5px solid rgba(0, 0, 0, 0.13);

}

section .ingresar a{

color:#fff;

}

section .login {

padding: 20px;

background: red;

font-size: 24px;

color: white;

margin: 0 auto;

position: relative;

top: 80px;

width: 300px;

height: 200px;

text-shadow: 1px 1px rgba(34, 34, 34, 0.31);

border-radius: 5px;

border: 5px solid rgba(0, 0, 0, 0.13);

}

section .login form input {

width: 300px;

padding: 10px;

border-radius:5px;

border:none;

}

section .login form input[type=submit] {

border-radius: 5px;

background: #FFE8E8;

font-size: 16px;

font-family: Segoe UI;

border: 1px solid #AFAFAF;

}

footer {

width:980px;

margin:0 auto;

overflow:hidden;

font-size:12px;

padding-top:10px;

}

footer a {

color: #CA3232;

}

footer a:hover {

text-decoration:underline;

}

.btnredlarge {

background: #FF5757;

padding: 5px;

text-align: center;

color: white;

border: 1px solid rgba(34, 34, 34, 0.19);

text-shadow: 1px 1px rgba(34, 34, 34, 0.21);

margin-top:5px;

}

.btnredlarge:hover {

background: #FF3838;

padding: 5px;

text-align: center;

color: white;

border: 1px solid rgba(34, 34, 34, 0.19);

text-shadow: 1px 1px rgba(34, 34, 34, 0.21);

cursor:pointer;

}

.ficha {

font-size:10pt;

}

.ficha h2 {

padding:0;

margin:0;

margin-bottom:10px;

}


#misnotas {

margin: 0 auto;

}

#misnotas tr:first-child {

font-size: 12px;

text-shadow: 1px 1px rgba(34, 34, 34, 0.09);

}

#misnotas tr {

text-align: center;

font-weight: bold;

font-size: 12px;

}

#misnotas tr td {

border:1px solid #222;

border-right:none;

padding:5px;

}

#misnotas tr td:last-child {

border-right:1px solid #222;

}
#btnregalm {

border-radius: 5px;

background: #FF9494;

padding: 5px;

border: 1px solid red;

color: white;

text-shadow: 1px 1px red;

}

#togregalm {

padding-left: 10px;

}

#btnregpro {

border-radius: 5px;

background: #94D4FF;

padding: 5px;

border: 1px solid #09F;

color: white;

text-shadow: 1px 1px #09F;

}

#togregpro {

padding-left: 10px;

}

#formcontacto {

font-family: Segoe UI;

font-weight: bold;

}

h1.quienes {

font-family: segoe ui;

font-weight: 100;

margin: 5px;

color: #FF4F4F;

}

y mi Codigo de la Web;

HTML:

<!doctype>
<html>
<head>
<meta http-equiv="Content-Type" content="text/xml; charset=utf-8" />
<title>Newcrop - Página Oficial</title>
<link rel="stylesheet" href="index.css" type="text/css">
<link rel="shortcut icon" href="imgs/newcrop16x16.png" />
</head>
<body>
<header>
<div class="main">
<h1>Newcrop</h1>
<img src="imgs/newcrop.png">
<nav>
<ul>
<li><a href="index.php">Inicio</a></li>
<li><a href="quienes.php">&iquest;Quienes somos?</a></li>
<li><a href="quienes.php">Productos</a></li>
<li><a href="login.php">Ingresar</a></li>
</nav>
</div>
</header>
<section>
<div class="ingresar">
<a href="login.php">Ingrese Ahora</a>
</div>
</section>

<p>1</<p>
<p>1</<p>
<p>1</<p>
<p>1</<p>
<p>1</<p>

<p>1</<p>
<p>1</<p>
<p>1</<p>
<p>1</<p>
<p>1</<p>
<p>1</<p>
<p>1</<p>
<p>1</<p>

<p>1</<p>
<p>1</<p>
<p>1</<p>
<p>1</<p>
<p>1</<p>
<p>1</<p>
<p>1</<p>
<p>1</<p>
<p>1</<p>
<p>1</<p>
<p>1</<p>
<p>1</<p>
<p>1</<p>
<p>1</<p>
<p>1</<p>
<p>1</<p>

<footer><a href="index.php">Inicio</a> - <a href="contactanos.php">Contactanos</a></footer>

Esta es la pagina web: cscminecraft.ir/Ardila/index.html

CopperDeveloper · 13 Jun 2013

Tu problema es que quieres poner la imagen al lado del texto y te queda por encima puede ser?

hamedm · 13 Jun 2013

Pues, no lo quiero poner ensima, sino que alado, pero al puro izquierdazo de la pagina

CopperDeveloper · 13 Jun 2013

Encierra en un div el h1 y el img. A la clase que engloba a los dos ponle float left, luego puedes acomodar a la izquierda o derecha la imagen y del otro lado el texto, todo dentro de la nueva clase. Entonces, la clase que encierra todo te coloca en la posición que quieres, y dentro de ella puedes manejar los float de cada uno y que se coloquen donde quieras.

fisasti · 14 Jun 2013

Es la primera que veo etiquetas como <header> o <section>. ¿Por qué no usas divs? Algo que te recomiendo para debugger es usar firebug o el inspector de elementos de Chrome. Sino la otra es ponerle un background-color distinto a cada div y así podés ir viendo cómo se ubican en la página

hamedm · 14 Jun 2013

sip, pero no se como los podria acomodar, en la pagina, soy principiante en lo de css

Usuario eliminado 44716 · 15 Jun 2013

Chaval...tienes una montada buena :witless:

En primer lugar decirte que sí puedes usar las etiquetas nuevas de HTML5 y no están del todo mal colocadas, pero si las usas yo te recomiendo usarlas al completo y no mezclarlas con las antiguas (div). Dichas etiquetas son muy útiles para que los contenidos sean bien vistos en todo tipo de dispositivos pero claro...hay que usarlas bien. Yo seguiría este orden en función de importancia y colocación en la web:

Header - Footer (Su nombre te lo dice)
Nav (Menús)
Section>Aside>Article (Vienen a ser los antiguos divs pero creo que este sería el orden correcto de colocación)

Una vez que coloques bien estas etiquetas como te dije, explícame mejor la barra de desplazamiento de tu web y lo del logo porque no lo entendí :encouragement:.

Espero haberte ayudado,
Saludos!:welcoming:

vellenger · 17 Jun 2013

usa position absolute, si lo mandas con el float chocara con los demas estylos, si no lo pudiste resolver avisa que te doy una mano, ya que se del tema xq diseño paginas web..

:encouragement:

Cómo posicionar el logo de mi empresa en la barra de navegación con CSS

hamedm

CopperDeveloper

hamedm

CopperDeveloper

fisasti

hamedm

Usuario eliminado 44716

vellenger

Temas similares