I've bee experimenting lately with a responsive container for image, text and two columns of lists and can't seem to be able to make the text adjust to the browser window when I re-size it. Let me know if you have any ideas of why this might be happening. Thank you!
Here's the HTML:
<div id="wrapper">
<div class="content">
<img src="http://www.labyrinth.net.au/~toonist/flash_goodies/graphics/image_sizes/rotate_circle_100.gif">
</div>
<div class="maintext">
<h3>Heading</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident deserunt architecto quasi quaerat cupiditate quis harum ipsum ipsa veritatis suscipit iure velit asperiores ipsam vitae reiciendis quos aliquam doloribus repellendus.</p>
<div class="linkleft">
<ul>
<li>Left Item 1</li>
<li>Left Item 2</li>
<li>Left Item 3</li>
</ul>
</div>
<div class="linkright">
<ul>
<li>Right Item 1</li>
<li>Right Item 2</li>
<li>Right Item 3</li>
</ul>
</div>
</div>
And the CSS:
p {
overflow: hidden;
}
#wrapper {
width:650px
}
.content {
float:left;
margin:0 25px;
}
.maintext {
float:left;
padding-bottom: 25px;
width:500px;
}
.linkleft, .linkright {
display: block;
width: 100%;
}
#media only screen and (min-width: 800px) {
.linkleft, .linkright {
display: inline-block;
width: 50%;
float: left;
background-color: green;
}
}
#media only screen and (min-width: 480px) {
.maintext{
background-color: tomato;
}
}
Here's also the link to the pen: http://codepen.io/carlos_serrano/pen/jrcFu
Fixing a "width" will force the div to remain that width unless otherwise stated.
Using
max-width: xyz
will allow it to expand to whatever value you like and then collapse to your min-width.
http://codepen.io/anon/pen/rhFcs
Related
How can I place an image that goes from end of .col-md-4 to the end of the screen?
Here is what I have to do by design - red lines are .container boundaries, text is aligned to the left, and on the right is an image (or slider). I can't do .col-md-8 since the image needs to go as far as the screen is wide.
Can I combine .container and .container fluid somehow? What would you suggest? Image must be visible full width across all desktop sizes.
I currently did this with position absolute but this way the image is cut out and this is not desirable. https://codepen.io/ivan-topi/pen/pGYYjj
If I remove position: relative from .row and place it on .content then I can position image nicely with right: 0 to the end of the screen, but in that case I am not sure how can I position it without overlapping text on the left?
<div class="content">
<div class="container">
<div class="row">
<div class="col-md-4">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Id odio assumenda nobis recusandae voluptates itaque possimus provident libero et earum.</p>
</div>
<div class="img-wrapper">
<img src="https://via.placeholder.com/1300x450">
</div>
</div>
</div>
</div>
.content {
overflow: hidden;
height: 450px;
position: relative;
}
.row {
position: relative;
}
p {
font-size: 20px;
}
.img-wrapper {
left: 435px;
position: absolute;
width: 100%;
height: 450px;
overflow: hidden;
}
img {
width: 100%;
}
You can consider negative margin while using col-md-8. The trick is to add the amount space on the right as a negative margin to the container inside col-md-8 to create the overflow you want:
.content {
overflow: hidden;
height: 450px;
position: relative;
}
.row {
position: relative;
}
p {
font-size: 20px;
}
img {
width:100%;
}
#media (min-width: 768px) {
.negative {
margin-right: calc((720px - 100vw)/2 - 15px);
}
}
#media (min-width: 992px) {
.negative {
margin-right: calc((960px - 100vw)/2 - 15px);
}
}
#media (min-width: 1200px) {
.negative {
margin-right: calc((1140px - 100vw)/2 - 15px);
}
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<div class="content">
<div class="container">
<div class="row">
<div class="col-md-4">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Id odio assumenda nobis recusandae voluptates itaque possimus provident libero et earum.</p>
</div>
<div class="col-md-8">
<div class="negative">
<img src="https://via.placeholder.com/1300x450" class="d-block">
</div>
</div>
</div>
</div>
</div>
If i understand you, you need this:
<div class="content">
<div class="container">
<div class="row">
<div class="col-md-4 p-0 d-flex align-items-center">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Id odio assumenda nobis recusandae voluptates itaque possimus provident libero et earum.</p>
</div>
<div class="col-md-8 p-0">
<img class="img-fluid" src="https://via.placeholder.com/1300x450">
</div>
</div>
</div>
</div>
And from .img-wrapper remove position:absolute and left: 435px;
Check it here: https://codepen.io/gionic/pen/QYoPqq
I hope it helps you.
I am trying to create a website, where their is a logo on the left side, and text on the right (alongside the logo image) and having all that above the navigation bar, however I just cannot manage to get them into position at all!
CSS
.headerLogo{
float:left;
margin-top: 20px;
}
.headerText{
float:right;
margin:auto;
}
HTML
<div class="headerLogo">
<img src="Logo.gif" />
</div>
<div class="headerText">
<h1>Together, we can create change.</h1>
<p>Qui cu imperdiet temporibus, nam at autem falli, cum audire salutandi abhorreant
eu. No postea mollis lobortis pri. Natum pertinax consulatu eam an, an vix omnium
appellantur, tamquam petentium cotidieque ut pri. In sea aliquid omittantur.</p>
</div>
<nav>
<ul class="nav">
<li>Home</li>
<li>About Us</li>
<li>Volunteer</li>
<li>Donate</li>
</ul>
</nav>
To set accordingly, try to give styles like below having div as position relative.
.headerLogo {
float:left;
margin:auto;
display:inline-block;
}
.headerText {
margin-top: 10px;
margin-right: 20px;
float: right;
position: relative;
display:inline-block;
}
I am a little bit confused by the wording but please take a look at this solution and see if this is what you mean, otherwise I will edit the answer
Jsfiddle: http://jsfiddle.net/gLLa20yp/
img{
display: inline-block;
float: left;
width: 10%;
}
nav{
margin-top: 5%
}
.nav li{
display: inline-block;
margin-left: 15%;
}
remove the last part if you don't want a horizontal menu.
Future work: To make it look better I would suggest setting the width on the <p> element and giving a margin between the image and the text
Just needed to set clearfix, Is this the result you seek?
.headerLogo{
float:left;
margin-top: 20px;
width: 50%
}
.headerText{
float:right;
margin:auto;
width: 50%
}
.clearFix{ clear: both};
<div class="headerLogo">
<img src="Logo.gif" />
</div>
<div class="headerText">
<h1>Together, we can create change.</h1>
<p>Qui cu imperdiet temporibus, nam at autem falli, cum audire salutandi abhorreant
eu. No postea mollis lobortis pri. Natum pertinax consulatu eam an, an vix omnium
appellantur, tamquam petentium cotidieque ut pri. In sea aliquid omittantur.</p>
</div>
<div class="clearFix">
<nav>
<ul class="nav">
<li>Home</li>
<li>About Us</li>
<li>Volunteer</li>
<li>Donate</li>
</ul>
</nav>
I am trying to create a collapsable sidebar and found an example here.
I would like to change it in order to have:
the "collapsed" sidebar to remain partially visible (in order to have
menu links reduced to buttons);
the "Collapse" button on the sidebar itself;
a fixed navbar on the main page on the right.
I can't find an example on the net, but I am trying to copy the interface in the "Windows 10 Preview" applications (take a look at the Mail or Calendar applications).
Thanks in advance for any help.
i've found this for you
Sidebar icon
You can mix with navbar top fixed
This HTML Part
<div id="wrapper">
<!-- Sidebar -->
<div id="sidebar-wrapper">
<ul class="sidebar-nav">
<li class="sidebar-brand">
<a href="#">
Start Bootstrap
</a>
</li>
<li>
Dashboard
</li>
<li>
Shortcuts
</li>
<li>
Overview
</li>
<li>
Events
</li>
<li>
About
</li>
<li>
Services
</li>
<li>
Contact
</li>
</ul>
</div>
<!-- /#sidebar-wrapper -->
<!-- Page Content -->
<div id="page-content-wrapper">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<h1>Simple Sidebar</h1>
<p>This template has a responsive menu toggling system. The menu will appear collapsed on smaller screens, and will appear non-collapsed on larger screens. When toggled using the button below, the menu will appear/disappear. On small screens, the page content will be pushed off canvas.</p>
<p>Make sure to keep all page content within the <code>#page-content-wrapper</code>.</p>
Toggle Menu
</div>
</div>
</div>
</div>
<!-- /#page-content-wrapper -->
</div>
Jquery part
$("#menu-toggle").click(function(e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
});
Please see this DEMO
This may help others. It has a fixed top nav, swappable mini/full side nav.
https://codepen.io/RobertoCannella/pen/poyBJGr
HTML
<div id="grid-container">
<div id="header">Header</div>
<div id="nav-button" onclick="menu()">
Navigation Button
</div>
<div id="empty-containerOne">Empty Container
</div>
<div id="navigation-menu" id="navigation-menu">Navigation Menu
</div>
<div id="mini-menu">
Mini
</div>
<div id="content">Content Window
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae accusamus voluptates earum delectus. Cum, illum accusantium! Laudantium enim ullam id veniam nemo, modi alias non eos, debitis beatae maxime nisi.Lorem Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus laborum tenetur similique eligendi! Porro sunt molestias unde fugiat, delectus, tenetur aperiam itaque dolores aspernatur veritatis recusandae, ut officiis aut consequatur.<p/>
</div>
<div id="footer">Footer
</div>
</div>
CSS:
#grid-container {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: minmax(75px, auto);
border: solid 1px red;
position: relative;
}
#grid-container > div {
position: relative;
background: #ddd;
border: dotted 1px blue;
}
#header {
grid-column: 1/5;
grid-row: 1;
}
#nav-button {
grid-column: 1;
grid-row: 2;
cursor: pointer;
}
#empty-containerOne {
grid-column: 2/5;
grid-row: 2;
}
#navigation-menu {
position: absolute;
grid-column: 1;
grid-row: 3;
left: 0px;
width: 150px;
min-height: 150px;
z-index: 1;
opacity: 90%;
transition: 300ms;
display: block;
}
#mini-menu {
position: absolute;
grid-column: 1;
grid-row: 3;
left: -30px;
width: 30px;
min-height: 150px;
z-index: 1;
opacity: 90%;
transition: 450ms;
}
#content {
grid-column: 1/5;
grid-row: 3;
padding-left: 2Rem;
}
#footer {
grid-column: 1/5;
grid-row: 4;
}
JavaScript (please ignore the poor state management.)
var i=1;
function menu() {
if(i==0){
document.getElementById("navigation-menu").style.left = '0px';
document.getElementById("mini-menu").style.left = '-30px';
i=1;
document.getElementById("toggle").src = "../images/menu.svg";
// document.getElementById("icons").style.display = 'Block';
// console.log("Colapsing menu.");
}
else {
document.getElementById("navigation-menu").style.left = '-150px';
document.getElementById("mini-menu").style.left = '0px'
i=0;
document.getElementById("toggle").src = "../images/menu_open.svg";
// document.getElementById("icons").style.display = 'none';
// console.log("Expanding menu.");
}
}
I'm trying to keep a couple of lists aligned to the left with some text and un-wrapping around an image on desktop/tablet and mobile but don't seem to be making a lot of progress.
Here's the Codepen: http://codepen.io/carlos_serrano/pen/ikjeg
and here the code for what I have so far:
HTML:
<div class="content">
<img src="any 100x 100 image.gif">
<h3>Heading</h3>
<p>Just random text here.</p>
</div>
<div class="linkcontainer">
<div class="linkleft">
<ul>
<li>Left Item 1</li>
<li>Left Item 2</li>
<li>Left Item 3</li>
</ul>
</div>
<div class="linkright">
<ul>
<li>Right Item 1</li>
<li>Right Item 2</li>
<li>Right Item 3</ul>
</div>
Here's the CSS:
p{
overflow: hidden;
}
img{
float:left;
margin: 0 25px;
}
.linkcontainer {
width: 50%;
padding-bottom: 25px;
clear: both;
}
.linkleft, .linkright {
width: 100%;
float: right;
}
#media only screen and (min-width: 481px) {
.linkleft, .linkright {
display: inline-block;
width: 30%;
float: left;
}
}
Ok, if I understood your question (and clarification in your comment) correctly, this is what you need to do:
First, move the heading and the text into the linkcontainer:
<div class="content">
<img src="http://www.labyrinth.net.au/~toonist/flash_goodies/graphics/image_sizes/rotate_circle_100.gif" />
</div>
<div class="linkcontainer">
<h3>Heading</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident deserunt architecto quasi quaerat cupiditate quis harum ipsum ipsa veritatis suscipit iure velit asperiores ipsam vitae reiciendis quos aliquam doloribus repellendus.</p>
<div class="linkleft">
<!-- ... -->
</div>
</div>
Then ensure content and linkcontainer are both floated left:
.content {
float:left;
margin:0 25px
}
.linkcontainer {
float:left;
padding-bottom: 25px;
}
I updated your pen: http://codepen.io/anon/pen/aAiqj
EDIT: Upon further clarification, there is a better solution that will help prevent wrapping the heading, text and menus on smaller screens: make sure you wrap the 2 main divs into a wrapper div and set the width of this one to the total of the inner divs (plus margins).
#wrapper {
width: 750px
}
.content {
float: left;
margin: 0 25px;
width: 200px;
}
.linkcontainer {
float: left;
padding-bottom: 25px;
width: 500px;
}
<div id="wrapper">
<div class="content">
<img src="http://www.labyrinth.net.au/~toonist/flash_goodies/graphics/image_sizes/rotate_circle_100.gif">
</div>
<div class="linkcontainer">
<!-- ... -->
</div>
</div>
Here is your newest pen: http://codepen.io/anon/pen/hJbmr
I have a little problem as a css newbie. I'm creating theme for Getsimple Cms and there is one div I can't place where I want to.
I tried everything I know but only one thing that worked was deleting "menu" div, which actually cause all this problems.
Here's css code for both 'menu' and 'kontakt' div.
#kontakt {
float: right;
margin-top: 5px;
background-color: #c43131;
width: 236px;}
and
#menu {
float: left;
margin-top: 5px;
background-color: #c43131;
width: 759px;}
#menu ul {
float:left;
width:759px;
padding:0;
margin:0;
list-style-type:none;}
#menu a {
float:left;
width:6em;
text-decoration:none;
color:white;
background-color:#7A378B;
padding:0.2em 0.6em;
border-right:1px solid white;}
#menu a:hover {background-color:#ff9000;}
#menu li {display:inline;}
html here:
<div id="content">
<div id="menu">
<ul>
<li>Link one</li>
<li>Link two</li>
<li>Link three</li>
<li>Link four</li>
</ul>
</div>
<div id="con">
<div class="con-title"><h2><?php get_page_title(); ?></h2></div>
<div class="con-text"><?php get_page_content(); ?></div>
</div>
<div id="kontakt">
<img alt="Kontakt" src="<?php get_theme_url();?>/images/kontakt.png">
Sed ut perspiciatis unde
omnis iste natus error sit
voluptatem accusantium doloremque
laudantium, totam rem aperiam,
eaque ipsa quae ab illo inventore
veritatis et quasi architecto beatae
vitae dicta sunt explicabo.
</div>
</div>
Try this:)
http://jsfiddle.net/736QQ/1/
I've just wrapped your content in Divs and floated them.
You should be able to work from this :)
<div id="header"></div>
<div id="left">
<div id="menu"></div>
<div id="con"></div>
</div>
<div id="right">
<div id="kontakt"></div>
</div>
In a nutshell, the div #menu is "taking up space" in that section of the page. This in turn will push down the following divs #con and #kontakt.
Also found this float div. Gives you the idea how float works and also be aware that paddings/margins affects the size of the div.
<div id="container">
<div id="menu"></div>
<div id="book">
<div id="column1" class="column_n">
<ul>
<li>Home</li>
</ul>
</div>
<div id="column2" class="column_n"></div>
</div>
body {
margin: 0 auto;
padding: 0;
border: 0;
font-family: Verdana;
font-size: 20px;
}
.column_n {
background: red;
border: 1px solid black;
width: 40%;
height: 100px;
margin: 20px;
float: left;
}
http://jsfiddle.net/e9a7w/1/