I am pretty new to everything and is trying to achieve header, 2 boxes with different width and a footer. Everything all together but I need to make so when content in the box is changed the height always stay the same.
I have tried implementing flexbox but cant make it work. I am not allowed to use overflow on this project.
I should be using floats as much as I can!
I want to achive the look like this photo i attach here:
enter image description here
What it looks like now:
enter image description here
`
<body>
<div class="wrapper">
<header><h1>Hej Header</h1></header>
<nav>
<div class="box">
<div class="box-row">
<section id="s1"><h1>Här är sektion nummer ett</h1></section>
<h1 class="rubrik1">Högskolan Nivå 1</h1>
<p id="p1"> Zombie zombies ipsum reversus ab viral inferno, nam rick grimes malum cerebro. De carne lumbering animata corpora quaeritis. Summus brains sit, morbo vel maleficia? De apocalypsi gorger omero undead survivor dictum mauris. </p>
<h2 class="rubrik2">Rubrik 2</h2>
<p id="p2"> Hi mindless mortuis soulless creaturas, imo evil stalking monstra adventus resi dentevil vultus comedat cerebella viventium. Qui animated corpse, cricket bat max brucks terribilem incessu zomby. The voodoo sacerdos flesh eater, suscitat mortuos comedere carnem virus. </p>
<h3 class="rubrik3">Rubrik 3</h3>
<p id="p3"> Zonbi asdasdasdadasdasdas asd asdasdasd a das dasd as dasd as das dtattered for solum oculi eorum defunctis go lum cerebro. Nescio brains an Undead zombies. Sicut malus putrid voodoo horror. Nigh tofth eliv ingdead. </p></nav>
<section id="s2"><h2>Här är sektion nummer två</h2></section>
</div>
<footer><h1>Hej Footer</h1></footer>
</nav>
</div>
</body>
`
My CSS:
`
#font-face {
font-family: MuseoSans; src: url('fonts/MuseoSans_500.otf');
font-family: MuseoSans; src: url('fonts/MuseoSans_500.ttf');
font-family: RobotoCondensed; src: url('fonts/RobotoCondensed-Italic.ttf');
}
* {
background-color:#eee;
}
p {
font-family:Helvetica, Arial, Sans-serif;
color:#222;
font-size:14px;
}
.rubrik1 {
font-family: MuseoSans, helvetica, sans-serif;
color:#009;
font-size:28px;
}
.rubrik2{
font-family: RobotoCondensed, helvetica, sans-serif;
color:#009;
font-size:16px;
}
.wrapper {
float: left;
max-width:960px;
width:960px;
background-color: white;
border-width:1;
border-style: solid;
border-color:#ccc;
}
header {
border-style:double;
height: 140px;
}
footer {
border-style:double;
height:200px;
float: left;
width: 954px;
}
nav{
float:left;
padding:12px;
border-style: double;
width: 600px;
}
#s2{
float: left;
border-style:double;
}
`
I have tried implementing flexbox but cant make it work. I am not allowed to use overflow on this project.
I should be using floats as much as I can!
Perhaps this simple Flexbox layout might help as a starting point? According to the desired layout image it seems to replicate that quite closely. The nav element seemed to contain content that did not really constitute navigation so that was removed but could easily be slotted into the LHS section or header?
body {
width: 100%;
height: 100vh;
margin: 0;
padding: 0;
}
#wrapper {
display: flex;
flex-direction: column;
width: 80%;
height: 100vh;
margin: 0 auto;
}
header,main,footer,main>section {
display: flex;
margin: 0;
border: 1px solid rgba(133, 133, 133, 0.5);
}
header {
flex: 2;
order: 1;
align-items: center;
justify-content: center;
}
main {
flex: 10;
order: 2;
}
footer {
flex: 1;
order: 3;
align-items: center;
justify-content: center;
}
main>section:nth-of-type(1) {
flex: 10;
order: 1;
}
main>section:nth-of-type(2) {
flex: 4;
order: 2;
}
/* ONLY for visually identifying elements */
header {
background: azure
}
main {
background: yellow
}
footer {
background: pink
}
main>section:nth-of-type(1) {
background: rgba(0, 255, 0, 0.25);
}
main>section:nth-of-type(2) {
background: rgba(255, 0, 0, 0.25);
}
<div id='wrapper'>
<header>#header#</header>
<main>
<section>#LHS-Large#</section>
<section>#RHS-Small#</section>
</main>
<footer>#footer#</footer>
</div>
This question already has answers here:
Flexbox: center horizontally and vertically
(14 answers)
Closed 6 months ago.
I can't manage to get my text to vertical align to the center of a div. I tried so simplify the problem as much as I could but it still doesn't work.
I tried with display:table but I need flexbox so that my columns are the right width and it didn't work either anyway. Removing elements one by one didn't bring me to the answer...
Edit: there is no span so it's not a problem of the last element being inline.
.row {
display: flex;
align-items: center;
margin-left: 44px;
margin-right: 44px;
margin-top: 10px;
}
.column_left {
flex: 28%;
}
.column_right {
flex: 72%;
}
.group_title {
color: #000000;
font-family: "Noto Serif";
font-size: 18px;
font-weight: bold;
letter-spacing: 0;
}
.group_description {
width: 408px;
color: #000000;
font-family: "Noto Serif";
font-size: 15px;
letter-spacing: 0;
}
.exercise_list {
height: 70px;
background: #FFEFD5;
}
<div class="exercise_list">
<div class="row">
<div class="column_left group_title">Les présentations</div>
<div class="column_right group_description">Le Féminin & le masculin - Les verbes « être » et « avoir »<br />Les Pays & les nationnalités - La famille. Les métiers</div>
</div>
</div>
<div class="exercise_list">
<div class="row">
<div class="column_left group_title">Poser des questions pour faire connaissance</div>
<div class="column_right group_description">La structure des questions ouvertes et fermées<br />Les activités quotidiennes</div>
</div>
</div>
Edit:
Removing the parent div to give both classes row and exercise_list to the child almost work, but I lose the margin to the left and the text is too close to the edge of the rectangle.
Take a look in the code:
.row {
display: flex;
align-items: space-arround;
width:100%;
}
.column_left {
padding-left:44px;
flex:1;
}
.column_right {
flex:2;
}
.group_title {
color: #000000;
font-family: "Noto Serif";
font-size: 18px;
font-weight: bold;
letter-spacing: 0;
}
.group_description {
width: 408px;
color: #000000;
font-family: "Noto Serif";
font-size: 15px;
letter-spacing: 0;
}
.exercise_list {
height: 70px;
background: #FFEFD5;
width:100%;
display:flex;
align-items:center;
}
<div class="exercise_list">
<div class="row">
<div class="column_left group_title">Les présentations</div>
<div class="column_right group_description">Le Féminin & le masculin - Les verbes « être » et « avoir »<br />Les Pays & les nationnalités - La famille. Les métiers</div>
</div>
</div>
<div class="exercise_list">
<div class="row">
<div class="column_left group_title">Poser des questions pour faire connaissance</div>
<div class="column_right group_description">La structure des questions ouvertes et fermées<br />Les activités quotidiennes</div>
</div>
</div>
add display:flex; to your .exercise_list elements
Try adding display: flex to .exercise_list. It should be the containing element that dictates child element alignment.
The margin on .row is confusing the spacing too so I would remove margin-top: 10px from .row and add that to .exercise_list.
Here's my problem if I don't use a <br> after <hr> my image goes away like this:
So I added the <br>, and now I have this result:
I used some margin to reduce the size of the blank space, but I'd like to be close such as this result I designed:
Here's my HTML code:
.articleactu {
grid-column: 1 / -1;
grid-gap: 36px;
display: grid;
grid-template-columns: 190px auto;
flex-direction: column;
}
.articleactu img {
border-radius: 15px;
max-width: 200px;
}
p {
word-wrap: break-word;
max-width: 650px;
}
p1 {
line-height: 30px;
font-weight: bold;
}
p2 {
font-size: 14px;
font-weight: bold;
color: #662189;
}
hr.solid {
margin-top: -10px;
width: 480%;
opacity: 12%;
}
<img src="images/vanguard.jpeg" alt="Article GTA " class="center">
<div>
<p1>CALL OF DUTY : VANGUARD : Est-il bon ?</p1>
<p> Les avis des fans de la saga sont mitigés et ça peut se comprendre, plusieurs bugs ont été détectés et empêche les joueurs de jouer convenablement...</p>
<p2> Publié le 25 novembre 2021 </p2>
</div>
<hr class="solid">
<br>
<img src="images/marvel.jpg" alt="Article GTA " class="center">
<div>
<p1>MARVEL AVENGERS : Le personnage de Spider-Man bientôt dans le jeu.</p1>
<p> Les fans demandent, Square Enix donne. En effet, Spider-Man sera bientôt jouable dans le jeu sortit il y a peu via DLC...</p>
<p2> Publié le 25 novembre 2021 </p2>
</div>
Thanks in advance for your help !
One approach is as follows, though bear in mind I've taken the liberty of replacing the non-standard HTML elements, <p1> and <p2>, replacing them with the valid <p> element:
/* a simple reset, in order to ensure all elements have
the same defaults: */
*,
::before,
::after {
box-sizing: border-box;
color: #030;
font: 1rem/1.5 sans-serif;
margin: 0;
padding: 0;
}
.wrapper {
/* we're using CSS flex-box layout: */
display: flex;
/* we want the content to wrap, as the <img> and
<div>, containing the text, are visually adjacent,
but we want the content to appear in a vertical
orientation: */
flex-wrap: wrap;
width: 90vw;
margin: 0 auto;
/* defining a visual separation between elements: */
gap: 1em;
}
.wrapper img {
/* defining the width of the <img> element: */
width: 200px;
/* along with setting that <img> to fully-cover
its available dimension in the layout: */
object-fit: cover;
}
/* defining styles for <img> elements that aren't
successfully loaded */
.wrapper img:empty {
border: 2px solid currentColor;
background-image: repeating-linear-gradient(45deg, transparent 0 10px, #ccc 10px 15px);
text-align: center;
}
/* here we style the <div> elements that follow the <img>
elements: */
.wrapper img + div {
/* we set the <div> to allow it to grow to occupy space available: */
flex-grow: 1;
/* we set the flex-basis to 50% in order that, when the element
occupies 50% of the available space, the layout shifts to
occupy two rows, with the <img> above the <div>: */
flex-basis: 50%;
}
hr.solid {
/* the <hr> is a flex-item, and here we use the flex
shorthand to set the flex-grow, flex-shrink and
flex-basis properties, to allow it to grow, not allow
it to shrink and set its width as 100%: */
flex: 1 0 100%;
height: 3px;
background-color: currentColor;
}
/* assuming that you don't want a trailing <hr> element at the
end of the list of articles; if you do this can be removed: */
hr:last-child {
display: none;
}
<!-- the following '.wrapper' element is added to contain the list of elements you're
showing, though if no parent element exists the CSS could be applied to the <body>
element instead: -->
<div class="wrapper">
<img src="images/vanguard.jpeg" alt="Article GTA" class="center">
<div>
<p>CALL OF DUTY : VANGUARD : Est-il bon ?</p>
<p> Les avis des fans de la saga sont mitigés et ça peut se comprendre, plusieurs bugs ont été détectés et empêche les joueurs de jouer convenablement...</p>
<p> Publié le 25 novembre 2021 </p>
</div>
<hr class="solid">
<img src="images/marvel.jpg" alt="Article GTA" class="center">
<div>
<p>MARVEL AVENGERS : Le personnage de Spider-Man bientôt dans le jeu.</p>
<p> Les fans demandent, Square Enix donne. En effet, Spider-Man sera bientôt jouable dans le jeu sortit il y a peu via DLC...</p>
<p> Publié le 25 novembre 2021 </p>
</div>
<hr class="solid">
</div>
This is easier to layout, though, if you wrap the <img> element inside the <div> with the text content and then use CSS grid to style that <div>:
/* simple reset: */
*,
::before,
::after {
box-sizing: border-box;
color: #030;
font: 1rem/1.5 sans-serif;
margin: 0;
padding: 0;
}
.wrapper {
display: flex;
/* because related elements - the <img> and the text - are
all contained within the same descendant element, we can
use flex-direction to force the content into a vertical
orientation: */
flex-direction: column;
width: 90vw;
margin: 0 auto;
gap: 1em;
}
/* I applied a class-name to easily access and style the <div>
elements that contain the content: */
div.card {
/* here we use CSS grid layout, which allows for a two-
dimensional layout of the contents: */
display: grid;
/* defining the vertical, and horizontal, gaps between
adjacent tracks (columns/rows): */
gap: 0.5em 1em;
/* defining the named grid areas, here we define three
rows of content, each row with two named columns: */
grid-template-areas:
"img title"
"img content"
"img release-date";
/* we then define the widths of those columns; the first
named 'img' is 200px wide, and the second is as wide
as possible to occupy the remaining space once the
width of the 'img' column is removed: */
grid-template-columns: 200px 1fr;
}
.wrapper img {
/* we specified already that the 'img' area is 200px in
width; here specify that the <img> should fill the
available space (without distorting the aspect-ratio): */
object-fit: cover;
/* we place the <img> element in the 'img' area of the
containing grid: */
grid-area: img;
}
.wrapper img:empty {
border: 2px solid currentColor;
background-image: repeating-linear-gradient(45deg, transparent 0 10px, #ccc 10px 15px);
text-align: center;
}
hr.solid {
height: 3px;
background-color: currentColor;
}
hr.solid:last-child {
display: none;
}
<div class="wrapper">
<!-- applying a somewhat meaningful class-name to the <div> element(s) which
contain the content: -->
<div class="card">
<img src="images/vanguard.jpeg" alt="Article GTA" class="center">
<p>CALL OF DUTY : VANGUARD : Est-il bon ?</p>
<p> Les avis des fans de la saga sont mitigés et ça peut se comprendre, plusieurs bugs ont été détectés et empêche les joueurs de jouer convenablement...</p>
<p> Publié le 25 novembre 2021 </p>
</div>
<hr class="solid">
<div class="card">
<img src="images/marvel.jpg" alt="Article GTA" class="center">
<p>MARVEL AVENGERS : Le personnage de Spider-Man bientôt dans le jeu.</p>
<p> Les fans demandent, Square Enix donne. En effet, Spider-Man sera bientôt jouable dans le jeu sortit il y a peu via DLC...</p>
<p> Publié le 25 novembre 2021 </p>
</div>
<hr class="solid">
</div>
Of course, the above can be further simplified by removing the <hr> elements, and instead using CSS generated content to create the separators:
*,
::before,
::after {
box-sizing: border-box;
color: #030;
font: 1rem/1.5 sans-serif;
margin: 0;
padding: 0;
}
.wrapper {
display: flex;
flex-direction: column;
width: 90vw;
margin: 0 auto;
gap: 1em;
}
div.card {
display: grid;
gap: 0.5em 1em;
grid-template-areas:
"img title"
"img content"
"img release-date"
/* a grid-item will only occupy one track (row/column) by
default, so here we add a two-column grid-area named 'hr'
for the psuedo-<hr> to occupy: */
"hr hr";
grid-template-columns: 200px 1fr;
}
/* we use the ::after pseudo-element to create the visual line: */
div.card::after {
background-color: currentColor;
/* for a pseudo-element to be rendered the content, even if
only an empty string, must be set: */
content: '';
/* we place the element - rendered as a grid-item - into the
'hr' grid-area: */
grid-area: hr;
height: 3px;
/* we add a margin-top to adjust the spacing of the pseudo-
element, so it's visually centred between the adjacent cards: */
margin-top: 0.5em;
}
.wrapper img {
object-fit: cover;
grid-area: img;
}
.wrapper img:empty {
border: 2px solid currentColor;
background-image: repeating-linear-gradient(45deg, transparent 0 10px, #ccc 10px 15px);
text-align: center;
}
<div class="wrapper">
<div class="card">
<img src="images/vanguard.jpeg" alt="Article GTA" class="center">
<p>CALL OF DUTY : VANGUARD : Est-il bon ?</p>
<p> Les avis des fans de la saga sont mitigés et ça peut se comprendre, plusieurs bugs ont été détectés et empêche les joueurs de jouer convenablement...</p>
<p> Publié le 25 novembre 2021 </p>
</div>
<div class="card">
<img src="images/marvel.jpg" alt="Article GTA" class="center">
<p>MARVEL AVENGERS : Le personnage de Spider-Man bientôt dans le jeu.</p>
<p> Les fans demandent, Square Enix donne. En effet, Spider-Man sera bientôt jouable dans le jeu sortit il y a peu via DLC...</p>
<p> Publié le 25 novembre 2021 </p>
</div>
</div>
Assuming that you don't want the trailing pseudo-element to create a line at the end of the content a further refinement can be used; here we use the :not() negation operator to refine the selector so that we select all ::after pseudo-elements of all div.card elements that are not the :last-child of their parent:
div.card:not(:last-child)::after {
background-color: currentColor;
content: '';
grid-area: hr;
height: 3px;
margin-top: 0.5em;
}
*,
::before,
::after {
box-sizing: border-box;
color: #030;
font: 1rem/1.5 sans-serif;
margin: 0;
padding: 0;
}
.wrapper {
display: flex;
flex-direction: column;
width: 90vw;
margin: 0 auto;
gap: 1em;
}
div.card {
display: grid;
gap: 0.5em 1em;
grid-template-areas:
"img title"
"img content"
"img release-date"
"hr hr";
grid-template-columns: 200px 1fr;
}
div.card:not(:last-child)::after {
background-color: currentColor;
content: '';
grid-area: hr;
height: 3px;
margin-top: 0.5em;
}
.wrapper img {
object-fit: cover;
grid-area: img;
}
.wrapper img:empty {
border: 2px solid currentColor;
background-image: repeating-linear-gradient(45deg, transparent 0 10px, #ccc 10px 15px);
text-align: center;
}
<div class="wrapper">
<div class="card">
<img src="images/vanguard.jpeg" alt="Article GTA" class="center">
<p>CALL OF DUTY : VANGUARD : Est-il bon ?</p>
<p> Les avis des fans de la saga sont mitigés et ça peut se comprendre, plusieurs bugs ont été détectés et empêche les joueurs de jouer convenablement...</p>
<p> Publié le 25 novembre 2021 </p>
</div>
<div class="card">
<img src="images/marvel.jpg" alt="Article GTA" class="center">
<p>MARVEL AVENGERS : Le personnage de Spider-Man bientôt dans le jeu.</p>
<p> Les fans demandent, Square Enix donne. En effet, Spider-Man sera bientôt jouable dans le jeu sortit il y a peu via DLC...</p>
<p> Publié le 25 novembre 2021 </p>
</div>
</div>
I'd also, in closing, recommend that you use more semantic means to wrap the text-content; it looks like you have content such as a title, article text and a release date? If so, I'd personally – and this is highly subjective – update the HTML to the following:
*,
::before,
::after {
box-sizing: border-box;
color: #030;
font: 1rem/1.5 sans-serif;
margin: 0;
padding: 0;
}
.wrapper {
display: flex;
flex-direction: column;
width: 90vw;
margin: 0 auto;
gap: 1em;
}
div.card {
display: grid;
gap: 0.5em 1em;
grid-template-areas:
"img title"
"img content"
"img release-date"
"hr hr";
grid-template-columns: 200px 1fr;
}
div.card:not(:last-child)::after {
background-color: currentColor;
content: '';
grid-area: hr;
height: 3px;
margin-top: 0.5em;
}
.card h2.title {
color: #050;
font-size: 1.2rem;
font-weight: bold;
}
/* here we select all ::before pseudo-elements of
all <time> elements that have a 'data-prefix'
custom attribute: */
time[data-prefix]::before {
/* setting the content to be equal to the value of
the 'data-prefix' attribute, using the attr()
function, and adding a string to follow that
attribute-value: */
content: attr(data-prefix) ': ';
font-weight: bold;
}
.wrapper img {
object-fit: cover;
grid-area: img;
}
.wrapper img:empty {
border: 2px solid currentColor;
background-image: repeating-linear-gradient(45deg, transparent 0 10px, #ccc 10px 15px);
text-align: center;
}
<div class="wrapper">
<div class="card">
<img src="images/vanguard.jpeg" alt="Article GTA" class="center">
<!-- a page should have a <h1> element to title the page or document; here I use a
<h2> element (though any other type of heading element could be used) as it's
hierarchically/semantically less important than the page-title; if the cards
appear in a section that itself has a heading, this element should be titled
with a lower-significance heading, <h3>, <h4>... -->
<h2 class="title">CALL OF DUTY : VANGUARD : Est-il bon ?</h2>
<p>Les avis des fans de la saga sont mitigés et ça peut se comprendre, plusieurs bugs ont été détectés et empêche les joueurs de jouer convenablement...</p>
<!-- in order to make the date of release (arguably) accessible to user-agents that
can parse such information I chose to use a <time> element with the datatime
attribute set to the referenced date: -->
<time class="release-date" datetime="2021-11-25" data-prefix="Publié le">25 novembre 2021 </time>
</div>
<div class="card">
<img src="images/marvel.jpg" alt="Article GTA" class="center">
<h2 class="title">MARVEL AVENGERS : Le personnage de Spider-Man bientôt dans le jeu.</h2>
<p> Les fans demandent, Square Enix donne. En effet, Spider-Man sera bientôt jouable dans le jeu sortit il y a peu via DLC...</p>
<time class="release-date" datetime="2021-11-25" data-prefix="Publié le">25 novembre 2021 </time>
</div>
</div>
References:
CSS:
Adjacent-sibling combinator (+).
attr().
content.
display.
flex (shorthand).
:last-child.
:not().
object-fit.
Pseudo-elements.
HTML:
<time>.
<h2>.
Bibliography:
"Basic concepts of flexbox."
"CSS Grid Layout."
"<h1>–<h6>: The HTML Section Heading Elements."
You should always post working code. At the very least I assume you forgot to add the <div class="articleactu">.
Also p1 and p2 are not valid HTML elements. If you want to style them differently, use a valid element (such as p) and classes.
Your problem is that you forgot that the <hr> elements also are included in the grid.
The elements inside the grid, are distributed (by default) from the top left, row by row. Without the <br> something like this:
+-------+-------+
| img | div |
+-------+-------+
| hr | img |
+-------+-------+
| div | |
+-------+-------+
By adding the <br> you are adding an element that is then placed into the second column:
+-------+-------+
| img | div |
+-------+-------+
| hr | br |
+-------+-------+
| img | div |
+-------+-------+
However now the <hr> only covers the first column which you try to compensate with the width.
Instead you need to tell the hr, to cover two columns like this:
+-------+-------+
| img | div |
+-------+-------+
| hr |
+-------+-------+
| img | div |
+-------+-------+
This can be done, for example with the grid-columns property and the span keyword:
hr.solid {
grid-column: span 2;
with: 100%
opacity: 12%;
}
The width is needed, because as a grid element the <hr> looses it default width. Also remove the negative margin.
The large gap around the <hr> is due to grid-gap: 36px with applies to vertical and horizontal gaps. To reduce the distance around the <hr>, set a separate value for the horizontal gaps:
grid-gap: 0 36px;
For a complete example look at https://jsfiddle.net/3qywz8e7/1/
BTW, you should learn to use the developer tools of your browser. They have tools built in to help you visualize the grid. For example in Chrome: https://developer.chrome.com/docs/devtools/css/grid/
Here is a flexbox sample of your code and need some change, good luck.
.flex-container {
display: flex;
flex-direction: column;
align-content: flex-start;
height: 100%;
padding: 15px;
gap: 5px;
}
.flex-container > div{
border-radius: 5px;
padding: 8px;
}
.articleactu {
grid-column: 1 / -1;
grid-gap: 36px;
}
.articleactu img {
border-radius: 15px;
max-width: 200px;
}
p {
word-wrap: break-word;
max-width: 650px;
}
p1 {
line-height: 30px;
font-weight: bold;
}
p2 {
font-size: 14px;
font-weight: bold;
color: #662189;
}
hr.solid {
margin : 10px auto 10px auto;
width: 100%;
opacity: 12%;
}
<div class="flex-container">
<div>
<img src="https://via.placeholder.com/250" alt="Article GTA " class="center">
<p1>CALL OF DUTY : VANGUARD : Est-il bon ?</p1>
<p> Les avis des fans de la saga sont mitigés et ça peut se comprendre, plusieurs bugs ont été détectés et empêche les joueurs de jouer convenablement...</p>
<p2> Publié le 25 novembre 2021 </p2>
</div>
<hr class="solid">
<div>
<img src="https://via.placeholder.com/250" alt="Article GTA " class="center">
<p1>CALL OF DUTY : VANGUARD : Est-il bon ?</p1>
<p> Les avis des fans de la saga sont mitigés et ça peut se comprendre, plusieurs bugs ont été détectés et empêche les joueurs de jouer convenablement...</p>
<p2> Publié le 25 novembre 2021 </p2>
</div>
<hr class="solid">
</div>
I want to add links for every box but whenever I try to add an "a" tag it messes everything up. What am I missing :-/ ? I have tried a lot of stuff and still can't figure out what wrong. Would appreciate your help.
Thanks
This is how it is supposed to look
http://oi66.tinypic.com/iykcc5.jpg
https://jsfiddle.net/983wga5c/7/
HTML
<div class="fwsmain">
<div class="fwsside side-text"><span>Tinutul Neamtului</span><p class="text">Pentru cei care au fost prima data, tinutul Neamtului a devenit locul in care te intorci cu bucurie. Platoul cu preparate moldovenesti de la Hanul Ancutei, drumetiile pe Ceahlau, fotografiile de la Barajul Bicaz, viata de noapte din Piatra Neamt, zimbrii, cetatea Neamtului, manastiri din top 10 din Romania, Muzeul de masti de la Tincabesti sau casa memoriala a lui Creanga, sunt doar cateva dintre atractiile memorabile din aceasta zona. Si ai cel putin cinci evenimente de traditie pe care nu trebuie sa le ratezi.</p></div>
<div class="fwsside">
<div class="fwsside-flex1">
<div class="fwsitem"><div class="hoverbg"><span>Case memoriale</span></div></div>
<div class="fwsitem"><div class="hoverbg"><span>Turnul lui Ștefan</span></div></div>
<div class="fwsitem"><div class="hoverbg"><span>Orașul de sus</span></div></div>
<div class="fwsitem"><div class="hoverbg"><span>Hai la ski</span></div></div>
<div class="fwsitem fullw"><div class="hoverbg"><span>Trebuie să vezi</span></div></div>
</div></div>
</div>
CSS
.fwsmain{
width: 100%;
display: flex;
flex-wrap: wrap;}
.fwsside {
height: 100%;
width: 50%;}
.side-text{
margin:auto;
padding:0 20px;}
.fwsside-flex1{
height: 100%;
width: 100%;
display:flex;
flex-shrink:1;
flex-grow:1;
flex-wrap:wrap;}
.fwsside-flex1 .fwsitem {
width:50%;
text-align: center;
background-size:cover;
}
.fullw{
width:100% !important;}
.hoverbg:hover {
background:rgba(0, 0, 0, 0.6);
}
.fwsside-flex1 .fwsitem:nth-child(1) {
background-image: url('http://descoperanordest.ro/wp-content/uploads/2016/01/calistrat-hogas.jpg');
}
.fwsside-flex1 .fwsitem:nth-child(2) {
background-image: url('http://descoperanordest.ro/wp-content/uploads/2016/01/clopotnita-turn-pnt.jpg');
}
.fwsside-flex1 .fwsitem:nth-child(3) {
background-image: url('http://descoperanordest.ro/wp-content/uploads/2016/01/telegondola.jpg');
}
.fwsside-flex1 .fwsitem:nth-child(4) {
background-image: url('http://descoperanordest.ro/wp-content/uploads/2016/01/ski.jpg');
}
.fwsside-flex1 .fwsitem:nth-child(5) {
background-image: url('http://descoperanordest.ro/wp-content/uploads/2016/01/cucuteni.jpg');
}
.fwsside-flex1 span {
line-height:33.3vh;
margin:auto;
font-size: 33px;
font-weight: bold;
color: #fff;}
It looks like you have to move your class="fwsitem" to your newly added <a> tags because they are now your flexbox container's (.fwsside-flex1) children.
Here is a updated fiddle.
I'm trying to mix "traditional" float usage for floating text around element with some adataptiveness for different resolutions. Fiddle: http://jsfiddle.net/jDTBs/5/
<article>
<header>
<div class="cover">...image...</div>
<h1>title</h1>
</header>
<div class="row">
<div class="text">some long text</div>
<section class="related">related content</section>
</div>
</article>
Responsiveness here comes in flavour of moving related content below the text. Currently .related cannot move higher than end of .text, because .text is in normal flow. I tried to use relative positioning on float, but I don't know the height to offset it, so -100% does not work.
Common approach is to use float on .text, but it interferes with text floating around .cover. I also tried moving related content above text, but then in smaller window it comes before text, which is undesirable. Also, any kind of interference with overflow or display properties in .text make text block jump away from floating .cover.
The closest I could get to is to use position: absolute on .related with right:0px;top:0px. This gives the positioning I want, but produces a CSS-unsolvable problem: related content will go below end of article.
So I'm stuck. Is there any way to mix the two approaches? Highest CSS support and any changes to layout are acceptable. Bootstrap CSS is also available, but does not help a tiny bit.
Thsi is something I'd like to achieve:
Here's an example of how the HTML and CSS could be changed to yield a beautifully responsive layout. I've added more paragraphs to the HTML so that it's easy to see that the amount of text does not affect the image position. Perhaps the biggest caveat here is that figcaption is rendered really strangely in relation to figure (I'm guessing that has something to do with the standard's definition of the default stylesheet for those elements), so unless this possibly changes in the future, you'll need to specify enough margin underneath the figure to encompass the caption.
http://jsfiddle.net/jjordanca/jDTBs/10/
HTML:
<article>
<figure class="cover">
<img src="" alt="" />
<time datetime="2013-08">Aug 2013</time>
</figure>
<header>
<h1>Wo bewirtung zerfasert so kraftiger handwerke ri la kindliche</h1>
</header>
<div class="row">
<figure class="related">
<img src="" alt="" />
<figcaption>Empor hosen ich nur funfe szene seine. Wo ri so stuckchen kammertur pa bekummert schranken hemdarmel.</figcaption>
</figure>
<div class="text">
<p>Was mehrere fur niemals wie zum einfand wachter. Wu gewohnt langsam zu nustern dankbar. Messer all erzahl las zopfen darauf. Oden sie denn froh ohne dus. Schlafer hin ansprach geworden gelernte lauschte zugvogel mir das. Ist hochmut gebogen wendete das zweimal. Hoffnungen augenblick vertreiben es da wo zueinander kindlichen. Weg uns sohn hoch bei flu eins.</p>
<p>Ei ku jawohl en mi fertig hangen konnen gesagt. Dazwischen nachmittag ein eigentlich ist sog tat. Was dazwischen launischen das vorsichtig verrichtet eigentlich wie ein. Wahres gerber gro ehe tal kannst. Naturlich in da nachgehen schwachem gegriffen ja. Gearbeitet bugeleisen birkendose neidgefuhl die das dienstmagd.</p>
<p>Was mehrere fur niemals wie zum einfand wachter. Wu gewohnt langsam zu nustern dankbar. Messer all erzahl las zopfen darauf. Oden sie denn froh ohne dus. Schlafer hin ansprach geworden gelernte lauschte zugvogel mir das. Ist hochmut gebogen wendete das zweimal. Hoffnungen augenblick vertreiben es da wo zueinander kindlichen. Weg uns sohn hoch bei flu eins.</p>
<p>Ei ku jawohl en mi fertig hangen konnen gesagt. Dazwischen nachmittag ein eigentlich ist sog tat. Was dazwischen launischen das vorsichtig verrichtet eigentlich wie ein. Wahres gerber gro ehe tal kannst. Naturlich in da nachgehen schwachem gegriffen ja. Gearbeitet bugeleisen birkendose neidgefuhl die das dienstmagd.</p>
</div>
</div>
</article>
CSS:
* {padding: 0; margin: 0;}
article {
position: relative;
}
img {
border: 1px solid black;
}
.cover {
width: 80px;
text-align: center;
font-size: 0.8em;
display: inline-block;
float: left;
margin: 0 20px 10px 0;
}
time {
display: inline-block;
width: 80px;
text-align: center;
}
header {
margin: 20px 0 0 0;
}
h1 {
position: relative;
padding-left: 10px;
font-size: 1.6em;
}
.cover img {
width: 80px;
height: 120px;
}
.row {
display: inline;
position: relative;
}
.text {
display: inline;
position: relative;
font-size: smaller;
}
.related {
display: inline-block;
width: 200px;
font-size: 0.8em;
height: 100px;
float: right;
margin: 25px 0 50px 20px;
}
.figcaption {
display: inline-block;
float: right;
}
.related img {
width: 200px;
height: 100px;
}
* {
border: 1px dotted #ccc
}
<article>
<header>
<div class="cover">...image...</div>
<h1>title</h1>
</header>
<div style="clear:both"></div>
<div class="row">
<div style="float:left" class="text">some long text</div>
<section class="related">related content</section>
</div>
<div style="clear:both"></div>
</article>
Here you go:
http://jsfiddle.net/jjordanca/jDTBs/8/
Keep in mind that this will look okay on Chrome, but not in Firefox since the img elements will require display: block; in the CSS. Some minor other adjustments may need to be made.
HTML:
<article>
<header>
<div class="cover">
<img src="" alt="" />
<time datetime="2013-08">Aug 2013</time>
</div>
<h1>Wo bewirtung zerfasert so kraftiger handwerke ri la kindliche</h1>
</header>
<div class="row">
<div class="text">
<p>Was mehrere fur niemals wie zum einfand wachter. Wu gewohnt langsam zu nustern dankbar. Messer all erzahl las zopfen darauf. Oden sie denn froh ohne dus. Schlafer hin ansprach geworden gelernte lauschte zugvogel mir das. Ist hochmut gebogen wendete das zweimal. Hoffnungen augenblick vertreiben es da wo zueinander kindlichen. Weg uns sohn hoch bei flu eins.</p>
<p>Ei ku jawohl en mi fertig hangen konnen gesagt. Dazwischen nachmittag ein eigentlich ist sog tat. Was dazwischen launischen das vorsichtig verrichtet eigentlich wie ein. Wahres gerber gro ehe tal kannst. Naturlich in da nachgehen schwachem gegriffen ja. Gearbeitet bugeleisen birkendose neidgefuhl die das dienstmagd.</p>
</div>
<section class="related">
<figure>
<img src="" alt="" />
<figcaption>Empor hosen ich nur funfe szene seine. Wo ri so stuckchen kammertur pa bekummert schranken hemdarmel.</figcaption>
</figure>
</section>
</div>
</article>
CSS:
article {
position: relative;
max-width: 480px;
}
figure {
margin: 0em
}
img {
border: 1px solid
}
.cover {
width: 80px;
text-align: center;
font-size: 0.8em;
}
.cover {
display: inline-block;
margin: 0em 2em 1em 0em;
}
time {
display: inline-block;
width: 80px;
text-align: center;
}
header {
display: inline-block;
width: 100px;
float: left;
}
h1 {
position: relative;
width: 550px;
margin-top: -180px;
top: 50px;
margin-left: 90px;
padding-left: 10px;
font-size: 1.6em;
}
.cover img {
width: 80px;
height: 120px;
}
.row {
display: inline;
position: relative;
top: 110px;
}
.text {
display: inline;
position: relative;
font-size: smaller;
}
.related {
width: 200px;
font-size: 0.8em;
height: 100px;
float: right;
position: relative;
left: 220px;
top: -200px;
}
.related img {
width: 200px;
height: 100px;
}
* {
border: 1px dotted #ccc
}
The problem with the way the HTML is structured is that this design is extremely limited in its responsiveness. If you are able to change the HTML, the page can be made truly responsive.