i'm currently developing a page for a friend and the goal is for the sardines cans to work as a kind of menu to display some details.
Before having the tabs it was working fine as presented in the image:
after using the tabs i lost my original layout... anyone has a clue how to solve this? I'm sure my problem is in my css.
Used Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Mar de Sardinhas</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i" rel="stylesheet">
<!-- scripts de visivel / invisivel
<script type="text/javascript">
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}
</script>
css para styling -->
<style type="text/css">
.off {
-webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
filter: grayscale(100%);
}
.on {
}
.position{
position: relative;
bottom: -30%;
transition: 0.3s;
}
.position:hover {
position: relative;
bottom: 0%;
transition: 0.3s;
}
.imgsize{
max-width: 10vw;
}
.wide-as-needed {
position: fixed;
bottom: 0;
left: 0;
overflow: auto;
overflow-x: scroll;
overflow-y: hidden;
white-space: nowrap; width:100%;
}
.fundo{
background:rgba(255,255,255,0.5);
}
.texto {
font-family: 'Open Sans', sans-serif;
}
.preview{
max-width:100%;
max-height:100%;
}
.tinted-image {
background:
/* top, transparent red, faked with gradient */
linear-gradient(
rgba(255, 255, 255, 0.9),
rgba(255, 255, 255, 0.7),
rgba(255, 255, 255, 0.7),
rgba(255, 255, 255, 0)
),
/* bottom, image */
url(bg.jpeg);
}
.lata {
position: relative;
text-align: center;
color: white;
}
.hide {
display:none;
}
.tab {
overflow: hidden;
border: 1px solid #ccc;
background-color: #f1f1f1;
}
.tabcontent {
display: none;
padding: 6px 12px;
border: 1px solid #ccc;
border-top: none;
}
</style>
</head>
<body background="bg.jpeg" class="tinted-image" style="background-attachment: fixed;">
<div class= "row tabcontent" id="London">
<!-- parte do texto episodio 1-->
<div class="col-sm-12 col-lg-4 m-4 " style="overflow-y:scroll; max-height: 65vh; position: static;">
<div class="texto m-2">
<h2>Origens</h2>
<p>
A arte de conservar alimentos foi sempre uma constante na história da humanidade. Os métodos mais ancestrais como a defumação e a salga permitiram o consumo de peixe em larga escala e o seu transporte para zonas distantes do litoral. Até o século XVII, parte do pescado conservado tinha por objectivo o fornecimento de navios envolvidos na expansão Ultramarina.
No entanto Portugal tem uma tradição milenar na conservação de pescado que remonta ao período grego e romano, com a produção do Garum – uma afamada conserva de sangue e vísceras de peixes que se deixava a secar em salmoura e que era exportada para todo o mediterrâneo.
</p>
</div>
<div class="texto">
<h2><i>Origins</i></h2>
<p><i>
The art of preserving food has always been a constant in the history of mankind. More ancestral methods such as smoking and salting have allowed the consumption of fish on a large scale and its transport to areas far from the coast. Until the seventeenth century, part of the preserved fish had the objective of supplying ships involved in the Overseas expansion.
However Portugal has a millennial tradition in the conservation of fish that goes back to the Greek and Roman period, with the production of Garum - a famous preserve of blood and viscera of fish that was allowed to dry in brine and that was exported to all the Mediterranean.</i> </p>
</div>
</div>
<!-- segunda coluna episodio 1-->
<div class="col m-4 ">
<div >
<img src="e01.png" class="preview mt-2">
</div>
<div class="d-flex justify-content-center ">
Ver Filme / Watch Movie
</div>
</div>
</div>
<div class= "row tabcontent" id="Paris">
<!-- parte do texto episodio 1-->
<div class="col-sm-12 col-lg-4 m-4 " style="overflow-y:scroll; max-height: 65vh; position: static;">
<div class="texto m-2">
<h2>Origens 2</h2>
<p>
testeeee
No entanto Portugal tem uma tradição milenar na conservação de pescado que remonta ao período grego e romano, com a produção do Garum – uma afamada conserva de sangue e vísceras de peixes que se deixava a secar em salmoura e que era exportada para todo o mediterrâneo.
</p>
</div>
<div class="texto">
<h2><i>Origins</i></h2>
<p><i>
The art of preserving food has always been a constant in the history of mankind. More ancestral methods such as smoking and salting have allowed the consumption of fish on a large scale and its transport to areas far from the coast. Until the seventeenth century, part of the preserved fish had the objective of supplying ships involved in the Overseas expansion.
However Portugal has a millennial tradition in the conservation of fish that goes back to the Greek and Roman period, with the production of Garum - a famous preserve of blood and viscera of fish that was allowed to dry in brine and that was exported to all the Mediterranean.</i> </p>
</div>
</div>
<!-- segunda coluna episodio 1-->
<div class="col m-4 ">
<div >
<img src="e01.png" class="preview mt-2">
</div>
<div class="d-flex justify-content-center ">
Ver Filme / Watch Movie
</div>
</div>
</div>
<!-- barra de baixo-->
<div class="container-fluid fixed-bottom">
<div class="row flex-row flex-nowrap ml-1 mr-2 wide-as-needed">
<div>
<a href="#" class="tablinks" onclick="openCity(event, 'London')">
<img src="1.png" class="on position imgsize">
</a>
</div>
<div>
<a href="#" class="tablinks" onclick="openCity(event, 'Paris')">
<img src="2.png" class="off position imgsize">
</a>
</div>
<div>
<img src="3.png" class="off position imgsize">
</div>
<div>
<img src="4.png" class="on position imgsize">
</div>
<div>
<img src="1.png" class="off position imgsize" >
</div>
<div>
<img src="1.png" class="on position imgsize">
</div>
<div>
<img src="1.png" class="on position imgsize">
</div>
<div>
<img src="1.png" class="on position imgsize">
</div>
<div>
<img src="1.png" class="on position imgsize">
</div>
<div>
<img src="1.png" class="on position imgsize">
</div>
</div>
</div>
</div>
<script>
function openCity(evt, cityName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(cityName).style.display = "block";
evt.currentTarget.className += " active";
}
</script>
</body>
</html>
The page can be found here: working page
Thank you in advance!
A visible "row" class's display value should be "flex" when utilizing Bootstrap 4. In this line from your JavaScript, your "tabcontent" DIV is being overridden to display "block":
document.getElementById(cityName).style.display = "block";
Switch "block" to "flex" and you should get the behavior you're looking for.
Related
I want to make a curved line between parts like here. Because if I now try to curve my borderline, the top also curves. I use nuxt.js and tailwind for css. I did not finish the code yet, but you can see where I want the lines. And I'm also checking how I will get the pictures in the right place.
Code
<template>
<div class="bg-gray-100 h-auto">
<div class="lg:mx-32 xl:mx-60 h-96 w-auto text-blue-900">
<div class="py-20">
<h3 class="text-4xl font-bold text-center">Nuestro proceso de Check-in</h3>
</div>
<h1 class="font-bold text-7xl text-gray-300 ml-10">1</h1>
<div class="relative border-l-2 border-b-2 border-dashed rounded-xxl border-blue-900 w-1/2">
<div class="m-10">
<h3 class="text-3xl font-bold items-end col-start-1 row-start-2 h-auto"><u>Escanea</u> el
documento<br>del viajero</h3>
<p class="col-start-1 row-start-3">
Con solo escanear el código MRZ ubicado en la parte inferior
del DNI o Pasaporte del viajero, nuestra app registra al
instante todos sus datos personales.
</p>
</div>
</div>
<div class="relative w-1/2">
<!-- <div class="layer0 bg-contain bg-no-repeat h-full w-2/3" :style="passport"></div>
<div class="layer1 bg-contain bg-no-repeat h-full w-2/3" :style="phone"></div> -->
</div>
<div class="relative grid grid-cols-2 grid-rows-5 h-96 w-auto">
<div class="absolute border-r-2 border-dashed rounded-xxl border-blue-900 bg-contain bg-no-repeat h-full w-1/2 row-span-4"
:style="sign"></div>
<div class="col-start-2 ml-5">
<h1 class="font-bold text-7xl text-gray-300 col-start-2 row-start-1">2</h1>
<h3 class="text-3xl font-bold items-end col-start-2 row-start-2 h-auto"><u>Firma</u> del huésped
</h3>
<p class="col-start-2 row-start-3">
Una vez escaneado su documento, completa el registro
con la firma digital de tu huésped, usando su
dedo o un puntero
</p>
</div>
</div>
</div>
</div>
</template>
<style>
.layer0 {
position: relative;
top: 0;
left: 0;
z-index: 0;
}
.layer1 {
position: absolute;
top: 0;
left: 62%;
z-index: 1;
}
</style>
<script>
export default {
components: {},
data() {
return {
passport: {backgroundImage: "url(passport.png)"},
phone: {backgroundImage: "url(phone_scan.png)"},
sign: {backgroundImage: "url(sign.png)"}
};
}
}
</script>
You can go to figma.com
use the pen tool
create the shape/lines you want.
then right click the shape/lines Copy as SVG
paste it in your code.
As it is as SVG code you can apply CSS to it and use it how ever you want
so I'm working on a project where I'm supposed to create a website and also talk about internet history & the effect it has had on society. Anyways, my plan or idea was to make 3 individual sections to the webpage. "Home" being Home of the website, just showing image/background and "hello to my assignment", then "history" tab has some text about the history of internet etc, and then the effect on society being the third tab with a text on how it actually has affected society.
Anyways. if you take whatever background, do as I have here you can see I have three current tabs on the right side of the website. I don't know how to add text individually to each one and when you click the next, X text disappears and Y text arrives next to that ones name. How can I do this?
* {
margin: 0;
padding: 0;
}
html,
body {
width: 100%;
height: 100%;
font-size: 14px;
font-weight: normal;
/* standard font "vikt" bold/italic etc eller nummer som 400*/
}
.background {
width: 100%;
height: 100%;
background-image: url(../css/qwx.jpg);
background-repeat: no-repeat;
/* spelar bara bakgrunden en gång och inte repeterad igen */
background-size: cover;
/* "cover" för att täcka hela "elementet" alltså bakgrunden */
position: relative;
/* position relativ gör så att den positioneras relativ till sin "originella" position. */
}
.rad {
width: 150px;
height: auto;
/* istället för "100% elr 80%" eller liknande så är den automatisk för att vara mer "flexibel" */
position: absolute;
/*används för att positionera "relativt" med sin närmaste positionerade "parent" */
left: 0%;
/* 0% för vill ha den i vänstra hörnet */
top: 30%;
/* vill ha i mitten ish o för mig såg det bra ut iaf (vet inte om detta ändras beroende på upplösning eller liknande, har ej provat */
}
.rad a {
text-decoration: none;
font-size: 20px;
font-family: "Tahoma", "Comic Sans MS";
/* två "fonts" ifall den första inte finns/laddas in */
font-weight: 600;
/* tjockleck */
height: 80px;
margin: 3px 0;
float: left;
display: inline-block;
background-color: black;
color: white;
line-height: 80px;
text-align: center;
/* center för att stoppa texten i mitten av rutan */
/*-- inlineblock används för att få bredden & höjden att respekteras, samt padding/margin */
transition: 400ms;
/* lite längre tid för att knapparna ska registreras som att dom är pekade på, blir en fin liten effekt */
}
a.active,
.rad a:hover {
background-color: white;
color: black;
width: 100%;
/* vill ha det så att när man häver över muspekarn så blir rad a 100% bredd, medans när rad a, b, c, är inaktiva och inte har muspekaren över är mindre */
}
.a {
width: 90%;
}
.b {
width: 80%;
}
.c {
width: 80%;
}
<div class="background">
<div class="rad">
<a class="a active" href="#">Startsida</a>
<a class="b" href="#">Historia</a>
<a class="c" href="#">Påverkan</a>
</div>
</div>
What follows utilizes Bootstrap and JQuery to create a very simple version of what you are describing, but I'm guessing probably not what you need.
It is however an excellent example of how far internet programming has come since its modest beginning.
Some html markup and some user provided content and here you have a simple "3 page" website
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-3">
<div class="nav flex-column nav-pills" id="v-pills-tab">
<a class="nav-link active" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-Startsida">Startsida</a>
<a class="nav-link" id="v-pills-profile-tab" data-toggle="pill" href="#v-pills-Historia">Historia</a>
<a class="nav-link" id="v-pills-messages-tab" data-toggle="pill" href="#v-pills-Påverkan">Påverkan</a>
</div>
</div>
<div class="col-6">
<div class="tab-content" id="v-pills-tabContent">
<div class="tab-pane fade show active" id="v-pills-Startsida">
<div class="float-left mt-1 ml-1 mr-3 mb-3">
<img src="https://picsum.photos/100" />
</div>
<span>Startsida</span>
</div>
<div class="tab-pane fade" id="v-pills-Historia">Historia</div>
<div class="tab-pane fade" id="v-pills-Påverkan">Påverkan</div>
</div>
</div>
</div>
</div>
When I resize the window to a small size content to the right is cut off.
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<!-- <meta http-equiv="X-UA-Compatible" content="IE=edge"> -->
<title>Ingrid Voz</title>
<meta name="viewport" content="width=device-width, initial-scale=1"
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU"
crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,700" rel="stylesheet">
<link rel="stylesheet" type="text/css" media="screen" href="style.css" />
</head>
<body>
<section class="about">
<h2 id="trabajo">Cómo trabajo</h2>
<p id="about-subheading">Déjame adivinar cómo quieres tu trabajo…</p>
</div>
<div class="row">
<div class="about-container">
<div class="col a"></div>
<div class="col b">
<i class="fas fa-plane"></i>
<h3 class="about-h3">¿Lo quieres rápido?</h3>
<p class="about-p">Una virtud que destaca en mí es mi lealtad por mi trabajo. Me gusta ser rápida contestándote y entregándote la
grabación de tu proyecto.</p>
</div>
<div class="col c">
<i class="fas fa-trophy"></i>
<h3 class="about-h3">¿Quieres profesionalidad?</h3>
<p class="about-p">La rapidez no es suficiente si no mantienes una ética de trabajo completa. Cuando amas lo que haces los clientes lo
notan. ¡Echa un ojo a las opiniones de mis clientes!</p>
</div>
<div class="col d">
<i class="fas fa-dollar-sign"></i>
<h3 class="about-h3">¿Quieres un precio justo?</h3>
<p class="about-p">Dependiendo del tipo de proyecto que tengas, el precio y la entrega variarán, ¡pero siempre será un precio justo y
adaptado para ti!</p>
</div>
<div class="col e"></div>
</div>
</div>
<div class=row>
<p class="your-voice">¡Entonces soy tu voz!</p>
<div class="btn-container">
¡Pide tu presupuesto!
</div>
</section>
CSS
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow-x: hidden;
}
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
about, .contact {
min-height: 100vh;
background-image: linear-gradient(rgba(237, 99, 117, 0.9), rgba(237, 99, 117, 0.9)), url(Images/thumbnail_section\ COMO\ TRABAJO.jpg);
background-size: cover;
background-attachment: fixed;
background-position: center;
position: relative;
min-width: 100%;
}
.about:after {
position: absolute;
width: 70px;
height: 70px;
top: 100%;
left: 50%;
margin-left: -35px;
content: '';
transform: rotate(45deg);
margin-top: -35px;
background-color: #D65A6A;
}
#trabajo {
color: white;
text-align: center;
font-weight: 400;
font-size: 150%;
position: relative;
margin-top: 10px;
letter-spacing: 1px;
}
#about-subheading {
text-align: center;
position: relative;
margin-top: 20px;
}
.about-container {
display: grid;
grid-template-columns: 120px 1fr 1fr 1fr 120px;
min-width: 100%;
}
.col {
text-align: center;
margin-top: 20px;
padding: 20px;
}
.fas {
font-size: 200%;
color: white;
}
.fa-plane {
transform: rotate(320deg);
}
.about-h3 {
margin-top: 30px;
font-size: 100%;
font-weight: 400;
}
.about-p {
margin-top: 20px;
font-size: 80%;
line-height: 23px;
font-weight: 100;
}
.your-voice {
text-align: center;
font-size: 100%;
margin-top: 20px;
}
.btn-container {
text-align: center;
}
.quote {
position: relative;
display: inline-block;
font-size: 80%;
text-decoration: none;
color: black;
margin-top: 50px;
background-color: white;
width: 20%;
padding: 15px 20px;
border-radius: 10px;
}
.quote:hover {
color: #D65A6A;
animation-name: btn-bounce;
animation-duration: 1.5s;
transition-timing-function: ease-in-out;
}
This is just an example of one section as I didn't want to put in too much code but I have the same problem on over sections of the site as well. It is responsive to a certain point when scaling down but then when it reaches a certain point content on the right hand side starts to go missing.
Thanks in advance.
You are already using bootstrap 3 framework to make this website responsive. So try to use bootstrap classes as much as possible to construct layouts.
Refer bootstrap grid system: https://getbootstrap.com/docs/3.3/css/#grid
Listing few issues below:
Close the meta tag because of this the bootstrap classes are not working
From
<meta name="viewport" content="width=device-width, initial-scale=1"
To
<meta name="viewport" content="width=device-width, initial-scale=1">
In CSS change .about-container properties to this. Use media query if you want to set the width for smaller devices.
.about-container {
max-width: 80%;
margin: 0 auto;
}
/* Small Devices, Tablets */
#media only screen and (max-width : 768px) {
.about-container {
max-width: 100%;
margin: 0 auto;
padding: 15px;
}
}
In HTML change the following:
From this
<div class="about-container">
<div class="col a"></div>
<div class="col b">
<i class="fas fa-plane"></i>
<h3 class="about-h3">¿Lo quieres rápido?</h3>
<p class="about-p">Una virtud que destaca en mí es mi lealtad por mi trabajo. Me gusta ser rápida contestándote y entregándote la
grabación de tu proyecto.</p>
</div>
<div class="col c">
<i class="fas fa-trophy"></i>
<h3 class="about-h3">¿Quieres profesionalidad?</h3>
<p class="about-p">La rapidez no es suficiente si no mantienes una ética de trabajo completa. Cuando amas lo que haces los clientes lo
notan. ¡Echa un ojo a las opiniones de mis clientes!</p>
</div>
<div class="col d">
<i class="fas fa-dollar-sign"></i>
<h3 class="about-h3">¿Quieres un precio justo?</h3>
<p class="about-p">Dependiendo del tipo de proyecto que tengas, el precio y la entrega variarán, ¡pero siempre será un precio justo y
adaptado para ti!</p>
</div>
<div class="col e"></div>
</div>
To This
<div class="about-container">
<div class="col-xs-12 col-sm-4 col-md-4">
<i class="fas fa-plane"></i>
<h3 class="about-h3">¿Lo quieres rápido?</h3>
<p class="about-p">Una virtud que destaca en mí es mi lealtad por mi trabajo. Me gusta ser rápida contestándote y entregándote la
grabación de tu proyecto.</p>
</div>
<div class="col-xs-12 col-sm-4 col-md-4">
<i class="fas fa-trophy"></i>
<h3 class="about-h3">¿Quieres profesionalidad?</h3>
<p class="about-p">La rapidez no es suficiente si no mantienes una ética de trabajo completa. Cuando amas lo que haces los clientes lo
notan. ¡Echa un ojo a las opiniones de mis clientes!</p>
</div>
<div class="col-xs-12 col-sm-4 col-md-4">
<i class="fas fa-dollar-sign"></i>
<h3 class="about-h3">¿Quieres un precio justo?</h3>
<p class="about-p">Dependiendo del tipo de proyecto que tengas, el precio y la entrega variarán, ¡pero siempre será un precio justo y
adaptado para ti!</p>
</div>
</div>
For some reason, I can't move up an element inside a Bootstrap modal, along some others.
Here:
Specifically the Hardware/Software extra part. Look how down it is! In the CSS it is named like:
.hardsoft-xtra
I already tried:
padding-top
margin-top
!important
My CSS specifications for the panel and how I organized it:
/*Comienza los modals con las características GENERALES (class)*/
/*Este es en general donde se mete todo*/
/*Los #media hacen responsivos a los modals*/
.caracs{
width: 460px !important;
font-family: 'Poppins', sans-serif;
}
#media (min-width: 768px) { .caracs{
width: 500px !important;
font-family: 'Poppins', sans-serif;
} }
#media (min-width: 992px) { .caracs{
width: 810px !important;
font-family: 'Poppins', sans-serif;
} }
#media (min-width: 1200px) { .caracs{
width: 810px !important;
font-family: 'Poppins', sans-serif;
} }
/*No jala*/
.caracs > ul{
text-align: left;
}
/*div izquierdo*/
.nombre-datos{
display: inline-block; /*Necesario para que los divs estén en el mismo renglón*/
width: 250px !important;
font-size: 0.8em;
text-align: justify;
}
.valoracion{
height: 35px;
background-color: orange;
color: white;
padding-top: 8px;
padding-left: 10px;
font-size: 1.5em !important;
}
.filtros{
padding-top: 5px;
font-size: 1.2em;
}
/*div-derecho*/
.mas-datos{
vertical-align: top; /*Necesario para que el 2° div a la derecha comience desde arriba*/
display: inline-block;
}
.so{
display: inline-block;
width: 235px;
background-color: #f2f2f2;
text-align: justify !important;
}
.hardsoft-xtra{
display: inline-block;
width: 275px;
text-align: justify !important;
}
.nivel{
background-color: #dbdbdb;
text-align: justify !important;
}
/*Terminan los modals con las características GENERALES (class)*/
How can I move it up so it gets aligned with Sistema operativo?
Here is the HTML code. Consists of a clickable Bootstrap panel, which opens a modal specific to that one:
<div class="container">
<div class="row">
<a href="#modal2" data-toggle="modal" data-target="#modal2">
<div class="col-sm-8 col-md-offset-2">
<div class="panel panel-default buscadoresInternet sinInternet" id="app1">
<div class="panel-heading">
Google
</div>
<div class="panel-body apps">
<div class="imagen">
<img src="media/buscadoresInternet/google.png" alt="Google">
</div>
<p>El buscador de Google o buscador web de Google (en inglés Google Search) es un motor de búsqueda
en la web propiedaad y el principal producto de Alphabet Inc., es el más utilizado en la
Web, recibe cientos de millones de consultas cada día a través de sus diferentes servicios.
El objetivo principal del buscador de Google es buscar texto en las páginas web, en lugar
de otro tipo de datos.
</p>
</div>
</div>
</div>
</a>
</div>
</div>
<!--Modal de Google-->
<div class="modal fade" id="modal2" role="dialog">
<div class="modal-dialog caracs">
<div class="modal-content">
<div class="modal-body">
<div class="nombre-datos">
<img class="imagen-modal" src="media/buscadoresInternet/google.png" alt="Bing">
<p><b>Google</b> es sin duda el mejor buscador actualmente, ya que mantiene estrictos estándares de
calidad a lo largo de sus productos y permite una búsqueda sumamente personalizada.</p>
<p class="text-right">Usar ahora</p>
<div class="valoracion">
<p>Valoración: <b>10</b></p>
</div>
<div class="filtros">
<p>¿Requiere internet?: <b>Sí</b></p>
<p>¿Gratuito?: <b>Sí</b></p>
<p>Pagos integrados: <b>No</b></p>
</div>
</div>
<div class="mas-datos">
<div class="so text-center">
<p>Sistema operativo</p>
<ul>
<li>Windows</li>
<li>OSX</li>
<li>Linux</li>
<li>Android</li>
<li>iOS</li>
</ul>
</div>
<div class="hardsoft-xtra text-center">
<p>Hardware/Software extra</p>
<ul>
<li>Un navegador web (prueba buscando uno en este mismo catálogo).</li>
</ul>
</div>
<div class="nivel text-center">
<p>Nivel educativo</p>
<ul>
<li>Primaria</li>
<li>Secundaria</li>
<li>Preparatoria</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<!--Fin del modal de Google-->
Set vertical-align as top for them.
vertical-align:top;
I'm very new at CSS and i want to put a header on to my new web site.
A simple one, only an image who goes on the top background. I really don't know how to do it with out much coding.
So, this is what i have, and this is what i want. And at the end of this question is the code of the actual page. Any ideas? Thanks so munch!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="es-ES">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Tablon</title>
<link rel="stylesheet" href="LIB/main.css" type="text/css" media="screen" />
<link rel="stylesheet" type="text/css" href="LIB/titulos.css">
<!--[if IE]>
<link rel="stylesheet" href="LIB/ie.css" type="text/css" media="screen" />
<![endif]-->
<style type="text/css">
.style1 {
text-align: right;
}
.style2 {
vertical-align: top;
margin-top: 3pt;
margin-bottom: 3pt;
}
#apDiv1 {
position:absolute;
left:116px;
top:398px;
width:800px;
height:37px;
z-index:1;
text-align: center;
font-family: Verdana, Geneva, sans-serif;
font-size: 9px;
}
</style>
</head>
<body>
<script type="text/javascript" src="JS/jquery-1.3.2.js"></script>
<marquee>
</marquee>
<div class="wrapper">
<p> </p>
<p><br />
</p>
<center> </center>
<div class="aux">
<div id="container">
<ul class="menu">
<li id="noticias" class="active">Mensajes</li>
<li id="tutoriales">Profesores</li>
<li id="enlaces">Enlaces</li>
</ul>
<span class="clear"></span>
<div class="content noticias">
<h3>Ultimos mensajes</h3>
<br />
<div class="style1" style="vertical-align: middle; text-align: right; background-color: #1E1E1E; height: 21px;">
<img alt="" height="16" src="IMG/feed16.png" width="16" class="style2" />
Subscribirce al canal RSS
</div>
<ul>
<br>
<div id="todo">
<div id="foto" style="float: left;width: 86px;height: 80px;padding: 3px">
<IMG src="http://www.gravatar.com/avatar/78bb533a50590a8414a496e2ee57420a?size=80" alt="-" />
</div>
<div id="sms" style="height: 86px;background-color: #1E1E1E;">
djsoftlayer: Este texto sera utilizado para probar el formato de las comillas quote1 y quote2 cuando lo que se escribe es suficiente texto como para copar los 300 caracteres, o al menos una gran parte de los 300, ya no me queda mas nada que decir, asi que voy a tratar de llegar a 300 hablando paja, paja, ya lleg
</div>
</div>
<div id="comenta" style="width:30%;float: right;"> <a href="comments.php?ref=44&autor=djsoftlayer&foto=http://www.gravatar.com/avatar/78bb533a50590a8414a496e2ee57420a?size=80&sms=Este texto sera utilizado para probar el formato de las comillas quote1 y quote2 cuando lo que se escribe es suficiente texto como para copar los 300 caracteres, o al menos una gran parte de los 300, ya no me queda mas nada que decir, asi que voy a tratar de llegar a 300 hablando paja, paja, ya lleg">
<img alt="" height="16" src="IMG/comen16esp.png" width="64" style="float: right" /></a></div>
<br><div id="todo">
<div id="foto" style="float: left;width: 86px;height: 80px;padding: 3px">
<IMG src="http://www.gravatar.com/avatar/78bb533a50590a8414a496e2ee57420a?size=80" alt="-" />
</div>
<div id="sms" style="height: 86px;background-color: #1E1E1E;">
djsoftlayer: testing
</div>
</div>
<div id="comenta" style="width:30%;float: right;"> <a href="comments.php?ref=43&autor=djsoftlayer&foto=http://www.gravatar.com/avatar/78bb533a50590a8414a496e2ee57420a?size=80&sms=testing">
<img alt="" height="16" src="IMG/comen16esp.png" width="64" style="float: right" /></a></div>
<br><div id="todo">
<div id="foto" style="float: left;width: 86px;height: 80px;padding: 3px">
<IMG src="http://www.gravatar.com/avatar/e830bd0ff9aae265d91fe554eb65a61f?size=80" alt="-" />
</div>
<div id="sms" style="height: 86px;background-color: #1E1E1E;">
nata: grande
</div>
</div>
<div id="comenta" style="width:30%;float: right;"> <a href="comments.php?ref=42&autor=nata&foto=http://www.gravatar.com/avatar/e830bd0ff9aae265d91fe554eb65a61f?size=80&sms=grande">
<img alt="" height="16" src="IMG/comen16esp.png" width="64" style="float: right" /></a></div>
<br> </ul>
</div>
<div class="content tutoriales">
<h3>Profesores</h3>
<ul>
<br><li><IMG src="IMG/bullet.png" alt="-" />djsoftlayer</li><li><IMG src="IMG/bullet.png" alt="-" />nata</li><body style="background-image: url('IMG/bg.png')">
</ul>
</div>
<div class="content enlaces">
<h3>Deberías Visitar...</h3>
<ul>
<li><IMG src="IMG/bullet.png" alt="-" /> www.plusmusica.com - Online jukebox!</li>
<li><IMG src="IMG/bullet.png" alt="-" /> www.cokidoo.com - Nuestra startup! :)</li>
<li><IMG src="IMG/bullet.png" alt="-" /> www.pixelartgames.com - Te gustan los juegos pixel art? ;)</li>
<li><IMG src="IMG/bullet.png" alt="-" /> www.dmsconsulting.es - Anterior empresa</li>
</ul>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="JS/tabs.js"></script>
</body>
</html>
Here is the basic html structure you have
<body>
<div id="wrapper">
<div id="container">
<p>content</p>
</div>
</div>
</body>
Here is the basic css you need to place your banner image:
#wrapper {
width: 600px; /* this is the width of your background image */
background: url(/path/to/image.jpg); /* this sets the div background as an image */
margin: 0px auto; /* this centers the div */
padding-top: 20px; /* this "pads" the div 20px on the top */
}
#container {
width: 400px; /* this sets the width of the container, it is narrower than the wrapper div to get the effect you are looking for */
margin: 0px auto; /* to center the div with the div#wrapper */
}
A bit more information on the CSS would be good. In your "what you want" link there is an specified width -- there needs to be a wrapping element on the page (possibly your #wrapper division), then do something like:
background: url(/link/to/background/image.ext)
And you'll be set.
You're going to like CSS after you get used to it. The section like this:
<p> </p>
<p><br />
</p>
<center> </center>
can be completely replaced with a little padding-top or margin-top setting like this:
.wrapper {
padding-top: 25px;
To address your question, Kerry was on the mark. Set the background property, specifying the url similarly to as he advises to get your desired effect. You probably want to do this on your wrapper class. Algo asi:
background-image: url('relative/path/toImage.png');
background-repeat:no-repeat;
background-position:center top;
}
See this for more. Enjoy!
Others have answered your question, but I'd like to add that there are a couple things I'd do to improve your HTML code.
Move the Javascript tag which loads jQuery to the last line before . The current position will block rendering until the script has loaded.
<script type="text/javascript" src="JS/jquery-1.3.2.js"></script>
<script type="text/javascript" src="JS/tabs.js"></script>
</body>
Get rid of the , tags (and center your #wrapper as superUntitled proposes)
Good luck!