Hey so Im new to boostrap 3 and Im trying to recreate a site as practice. I need to find a way to add 3 rows with (various col-md*sizes) of boxes to the left and a large picture to the right that stretch to the bottom of the page without disturbing my other boxes/rows that are on the left side. Ive looked up multiple ways to do this but if someone out there can provide a code on how this is possible with an explanation that would help me with this project and many more to come. If you go to the link below, the example is the first one with the guy wearing the yellow rain coat:
http://www.geckoandfly.com/13189/7-impressive-online-cv-resume-template-successful-job-hunting/
Well if you show you code will be a bit easier but ... the code should look something like this
<div class="row col-lg-12">
<div class="col-lg-8 leftSide">
<!--This is the left side of that"div"and here you can add rows as much as you want-->
<row>
<div class="col-lg-6"></div>
<div class="col-lg-6"><div>
</row>
<row>
<div class="col-lg-7"></div>
<div class="col-lg-5"><div>
</row>
</div>
<div class="col-lg-8 right side">
<!--The image part is here-->
</div>
</div>
Related
In odoo 11, we have the choice between 4 layout when it comes to create invoices. When trying to modify one (not only the css but also the content), I started to modify the external_layout_clean, as a first test before writing my own.
The problem
here's what the QWeb looks like :
<?xml version="1.0"?>
<t t-name="web.external_layout_clean">
<div class="header o_clean_header">
<div class="row">
<<.... HEADER CONTENT ....>>
</div>
</div>
<div class="article o_report_layout_clean">
<t t-raw="0"/>
</div>
<div class="footer o_clean_footer">
<div class="row mt8">
<< .... FOOTER CONTENT .... >>
</div>
</div>
</t>
So modifying the header and the footer is easy. But the most important part, the body, does not appear here.
o_clean_footer can be found in o_clean_footer.less file, it's just some cssless. When you remove it from the code above, the style disappear. But when you remove the article class, everything disappear. So I don't know how, but this css class contain all the information.
The question
where to find the article class, especially the part that is the vector of datas?
Maybe we're just not meant to modify like that, then how should I modify it?
NB: In openerp, this was modified straight in a view, like for the header, I don't know how this works in odoo 11. I found some clue about odoo 10, but it seems like it was different
I´m a Bootstrap guy, and find Semantic UI, i think it´s awesome. So i´m in the basic learning process, and most of all the GRID SYSTEM.
I read and experiment my own excercise with the grid, and find that works with 16 columns grid, columns size can be definied in the row:
<div class="ui grid">
<div class="five column row">
<div class="column">1</div>
...
</div>
... and in the column itself:
<div class="eight wide column"></div>
And learn about stackable and doubling columns, and learn that you can specify colums sizes for each three devices ( mobile, tablet, computer ).
<div class="six wide tablet eight wide computer column"></div>
My question is, since it´s a 16 columns based grid, it´s not divisible in 3 with equal values how do i get 3 columns in a specific device? Maybe this can be done with doubling but i need a solid solution, i mean, don´t depend in the other devices sizes.
In Bootstrap it would be as simple as ( example of small screen, 12 columns grid ):
<div class="col-sm-4">Content here</div>
Thanks!
Sebastián.
<div class="ui equal width three column grid">
<div class="column">1</div>
<div class="column">2</div>
<div class="column">3</div>
</div>
If I understand your question right this should work for you.
Grid Example - Semantic UI
Can anyone help me? i tried using Firepath for a correct Xpath however the code it gives me is incorrect in my eyes. First line in the examples, is the provided one.
.//*[#id='content']/div/div/div[1]/h2/span
<div id="content" class="article">
<h1>News</h1>
<div>
<div>
<div class="summary">
<h2>
<span>9</span>
// this should be the correct xpath i think
_driver.findElement(By.xpath("//*div[#id='content']/div/span.getText()"));
Here i want check if the text in between is greater or equal to 1
and the other is:
.//*[#id='content']/div/div/div[3]
<div id="content" class="article">
<h1>News</h1>
<div>
<div>
<div class="summary">
<div class="form fancy">
<div class="common results">
Here i want to check if the div class common results has been made, 1 item equals 1 common results
For retrieving span text you can use this
String spanText=driver.findElement(By.xpath("//div[#id='content']/div/div/div/h2/span")).getText();
System.out.println(spanText);
From the second question I am not so much clear.You can get class name like this, Please explain me if its not your solution
String className=driver.findElement(By.xpath("//*[#id='content']/div/div/div/div/div")).getAttribute("class");
System.out.println(className);
I would suggest you making usage of:
//div[#id='content']/div/div/div/h2/span/text()
Note: the html code you shared was not well formed. I would suggest you to test in advance the code and the xpath with http://www.xpathtester.com/xpath (to fix the code) and http://codebeautify.org/Xpath-Tester (to test your xpath)
I am relatively new to programming and am making a website using bootstrap 3.0.
I want to make two rows that center in the middle of the page. For the first row I used div class="col-md-4 col-md-offset-2" and for the second row div class="col-md-4".
My first question is if it is ok that this adds up to 10 rows instead of 12 or if I need to specify the 2 rows on the right also? If so, how can this be done?
Also I would like to increase the horizontal spacing between the columns. I did a bit of research on that and came across mixins but its quit hard for me to grasp. If anybody here can provide me with a simple way to increase the horizontal spacing between two columns that would be great.
Thanks in advance.
looks like this is what you want
<div class="container">
<div class="row">
<div class="col-md-4 col-md-offset-2">col-md-4-offset</div>
<div class="col-md-4">col-md-4</div>
</div>
</div>
its perfectly fine to have column not add up to 12
here is a bootply
and if you want to pad your rows just add padding to .row class, by default there is no padding or margins between rows
Question 1: Yes, it's fine to leave dangling space after your columns, but good practice to tie it off by closing the .row after it.
Question 2: You can add margin to left and right of the column. But that throws off the offset column, so get around that by putting an empty .col-md-2 before them.
<div class="container">
<div class="row">
<div class="col-md-2"></div><!-- empty -->
<div class="col-md-4 margin">col-md-4</div>
<div class="col-md-4 margin">col-md-4</div>
</div>
</div>
CSS:
.margin {
margin-left:10px;
margin-right:10px;
}
Demo: http://www.bootply.com/OS6FX9sie8#
Also, you'll notice in my demo I put the custom class in a media-query. Do that if you want that margin adjustment to only apply on large screen devices, so the columns reach the screen edge on phones.
is the following syntax good to go to emhpasize a multicolumn headline totalling around 20 ~ 30 words? I dont want to use CSS3 multicolumns since it is not supported in IE9 etc.
<H3>
<div id="headingLeft" >blaa blaa blaa</div>
<div id="headingRight">blue blue blue</div>
</H3>
In response to a request from the OP:
[That's] what I was looking for! Place it as an answer so that I can accept is as an answer! The up-vote in your answer would be for the quality of the link you added. Explains everything in very clear language!
Have you considered using html5's header element, and the html5 doctype of course?
The headings shouldn't have div's inside of them. Maybe something more like this... The data in the two headings must not be too closely related, otherwise you shouldn't be splitting them apart at all. I'm assuming it's like a callout or something.
<div class="headings">
<h3 id="headingLeft" >blaa blaa blaa</h3>
<h4 id="headingRight">blue blue blue</h4>
</div>
Why not use a <div> with a class associated to it (or a css selector) instead of using H3 this way. I'm not sure this is the more SEO-friendly way of doing what you want to do.
<div class="headline">
<div id="headingLeft">blaa blaa blaa</div>
<div id="headingRight">blue blaa blue</div>
</div>
It doesn't seem that you're using H3 in a semantic way.