Éste es el CSS que tengo ahora aunque las posiciones las he cambiado mil veces así que debo de tener contradicciones o algo, no? Es la primera vez que me meto en código si alguien me ayuda lo agradecería mucho :)
Código:
/*header*/
.logo {
float:left;
position:absolute;
left:4%;
}
.logo img {
width:100%;
height:auto;
}
.socialIcons {
float:right;
background:#fff;
display:inline-block;
width:25%;
height:25%;
position:absolute;
right:2%;
top:5%;
}
.socialIcons img {
display:inline;
width:13%;
height:auto;
padding:3%;
}
.socialIcons img:hover {
width:15%;
}
.socialIcons a {
text-decoration:none;
}
.menu {
background: #214063;
border-radius: 5px;
position: absolute;
top: 20%;
left:4%;
width:90%;
height:auto;
}
.menu li {
display:inline-block;
text-decoration:none;
padding:0.6%;
}
.menu a {
font-family:"Raleway", Arial;
text-decoration:none;
font-size:100%;
color:#fff;
position:relative;
padding:30px;
top:5%;
padding-top:30%;
right:120px;
}
.menu li a:hover {
color:#f6bd8c;
border-right:1px solid transparent;
border-left:1px solid transparent;
margin-bottom:10px;
}
.search_bar {
width:15%;
float:right;
padding-top: 3%;
position:absolute;
top:14.8%;
right:9%;
transition:all .5s ease;
}
.search_bar input {
width:70%;
height:100%;
border-radius:5px;
border:none;
padding:0px 10px 0px 25px;
box-shadow:inset 0px 1px 3px rgba(0,0,0,.7);
}
.icon-search {
position:absolute;
bottom:1px;
left:5px;
color: #000;
text-decoration:none;
}
/*main*/
#articles_list {
clear:both;
padding:1em;
width:70%;
position:absolute;
top:30%;
left:2%;
}
#articles_list article {
margin-bottom:30px;
padding:15px;
text-align:justify;
}
.thumb {
float:left;
margin.right:2%;
padding:1%;
width:35%;
}
.thumb img {
width:100%;
height:100%;
}
#articles_list article h2 {
font-family:"Raleway", Arial, sans-serif;
font-size: 1.4rem;
}
#articles_list article h2 a {
color: #ff9436;
text-decoration:none;
}
#articles_list article h2 a:hover {
text-decoration:none;
color:#f6bd8c;
}
.date {
font-size:1rem;
font-family:Arial;
margin-bottom: 10px;
}
.date a {
font-size:0.9rem;
font-family:Arial;
color: #ff9436;
text-decoration:none;
}
#articles_list article .date ul {
list-style:none;
display:inline-block;
}
#articles_list article p {
font-size:0.9rem;
font-family:Arial;
}
.mas {
position:relative;
width:10%;
float:right;
margin-top:5px;
background:#214063;
border-radius:3px;
}
.mas p {
text-align:center;
}
.mas a {
text-decoration:none;
color:#fff;
font-family:"Raleway", Arial;
font-size:0.8rem;
padding:1px 0;
}
.mas a:hover {
color:#f6bd8c;
width:11%;
}
/*aside*/
aside {
width:30%;
float:right;
position:relative;
top:200px;
left:10%;
}
aside .widget {
width:100%;
}
.widget {
margin-bottom:50px;
display:block;
float:left;
}
.widget h3 {
font-family:"Raleway", Arial, sans-serif;
margin-bottom:10px;
font-size: 1.2rem;
color:#ff9436;
font-weight:400;
}
.widget ul li {
list-style:none;
margin-bottom:10px;
margin-top:5px;
}
.widget ul li a {
font-family:Arial;
font-size:0.9rem;
text-decoration:none;
color:#000;
}
.widget ul li a:hover {
color:#ff9436;
font-weight:400;
}
/*footer*/
footer {
clear:both;
height:3em;
margin-top:-3em;
background:#214063;
border-radius:5px;
width:100%;
}
#socialFooter_Icons {
width:25%;
padding-left:41.5%;
}
#socialFooter_Icons img {
display:inline;
width:10%;
height:auto;
padding:3%;
}
}
#copyright {
clear:both;
}
#copyright p {
color:#fff;
text-align:center;
font-family:"Raleway", Arial;
font-size:0.9rem;
margin-bottom:8px;
}
