I have a div with this markup:
<div class="col-sm-12">
<p class="bg-info">Basic Information</p>
</div>
which looks like:
I need a link 'Add /Edit' at the right end of the div so that it looks like:
Tried adding a paragraph tag to the existing one with a link but it pushes the new content below.
I am new to CSS so any help is greatly appreciated.
Thanks in advance.
Regards.
<div class="col-sm-12">
<p class="bg-info pull-left">Basic Information</p>
<a class="pull-right">Add/Edit</a>
<div class="clearfix"></div>
</div>
<div class="col-sm-12">
<p class="bg-info">Basic Information Add /Edit</p>
</div>
Bootstrap Quick floats
I assume you're using Bootstrap because of the classes you're using.
Try this:
<div id="container">
<div style="width:80%;float:left">
Basic Information
</div>
<div style="width:20%;float:right">
Add/Edit Rule
</div>
</div>
<html>
<head>
<style>
.bg-info {display: inline; float: left;}
.bg-info2 {display: inline; float: right; color: red;}
</style>
</head>
<body>
<div class="col-sm-12">
<p class="bg-info" style="float:left">Basic Information</p><p style="float:right" class="bg-info2">Basic Information</p>
</div>
</body>
<html>
Related
So bit of background on my issue. I'm using an external carousel and I am trying to modify each image section to include text. There seems to be an overflow:hidden on the sp-carousel-frame class that is making it not visible but without this the unselected images on either side go full size.
I basically need the item-text class to be displayed.
I really hope I explained this ok.
I'm going include an image that shows the issue below.
HTML
<script src="https://wordpress-84115-1849710.cloudwaysapps.com/wp-content/themes/inspiration-marketing-theme/assets/js/carousel.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<div class="container collaboration-header">
<div class="row">
<div class="col-md-12">
<h1>Collaboration and Teamwork</h1>
</div>
</div>
</div>
<div class="container main-carousel">
<div class="row">
<div class="col-md-12">
<div class="sp-carousel-frame sp-carousel-frame-pos">
<div class="sp-carousel-inner">
<div class="sp-carousel-item" style="overflow: visible !important;">
<img src="https://gdxdesigns.com/wp-content/uploads/2021/04/Main-Slider-Image.jpg"/>
<div class="item-text">
Hello World
</div>
</div>
<div class="sp-carousel-item"><img src="https://gdxdesigns.com/wp-content/uploads/2021/04/Left-Slider-Image.jpg"/>
</div>
<div class="sp-carousel-item"><img src="https://gdxdesigns.com/wp-content/uploads/2021/04/Right-Slider-Image.jpg"/>
</div>
</div>
</div>
</div>
</div>
</div>
CSS
.collaboration-header h1{
text-align: center;
padding: 1.5em 0;
}
.main-carousel {
margin-bottom: 20% !important;
}
The JSFiddle Below:
Here is my JSFiddle
Add Class this carousel-caption on item-text
<div class="item-text carousel-caption">
Hello World
</div>
https://jsfiddle.net/lalji1051/3hyb82fg/1/
OK I got it solved basically although I probably need to tweak it a bit to get it perfect what I did was disable the overflow:hidden on the sp-carousel-frame and change it to visible. Then on the parent div col-md-12 I attached another class called overflow:
HTML
<div class="col-md-12 overflow">
<div class="sp-carousel-frame sp-carousel-frame-pos">
<div class="sp-carousel-inner">
<div class="sp-carousel-item" style="overflow: visible !important;">
<img src="/wp-content/uploads/2021/04/Main-Slider-Image.jpg"/>
<div class="item-text">
Hello Hows it going like
</div>
</div>
<div class="sp-carousel-item"><img src="/wp-content/uploads/2021/04/Left-Slider-Image.jpg"/>
</div>
<div class="sp-carousel-item"><img src="/wp-content/uploads/2021/04/Right-Slider-Image.jpg"/>
</div>
</div>
</div><!-- End sp-carousel-frame -->
<hr />
</div><!-- Close Col-md-12 -->
CSS:
.sp-carousel-frame {
overflow: visible !important;
}
.overflow {
overflow: hidden !important;
padding: 0 !important;
}
Updated JSFiddle
Here's my code
HTML:
<body>
<div id="wrapper"> <!--wrap for all the page-->
<div id="header"> <!-- div for top part-->
<!--<p><img src="image/bannerwithologo.jpg"></p>-->
<div id="txtlogo"> <!-- inside header for text-->
<p>HANA Squad</p>
</div>
<div id="menu"> <!-- inside header for menu-->
<p href=#>Vidéos</p>
<p href=#>Photos</p>
<p href=#>Agenda</p>
</div>
</div>
<div id="contenu"> <!-- contents-->
<div id="welcoming"> <!-- short presentation of the website-->
</div>
</div>
</body>
CSS:
.header {background-image: url('../image/banner.jpg');
height:500px;
width: 500px;
Don't care about the comment in my div header, i was trying something else and didn't erase it
It is not a problem of files directory because if i put the background-image in html in the css, my image is showing up
I have tried to put different size of my div header but ... Not working
I know it's a stupid problem ..
<div id="header"> you use an id in your code then you have to use a # in your css for an id declaration.
#header {background-image: url('../image/banner.jpg');
height:500px;
width: 500px;
for your code you have to set a class for example
<div class="header">
The problem is that your header in your HTML is an id (id="header") yet your CSS is targeting a class (.header).
You need to either switch your CSS to target the id, or change your HTML to be a <div class="header"></div>. For what it's worth, it's generally accepted that for more maintainable CSS, you should favour classes over IDs. So I'd go with the latter of the two options.
Here is your Answer
#header {background-image: url('https://www.google.co.in/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png');
height:500px;
width: 500px;
}
<body>
<div id="wrapper"> <!--wrap for all the page-->
<div id="header"> <!-- div for top part-->
<!--<p><img src="image/bannerwithologo.jpg"></p>-->
<div id="txtlogo"> <!-- inside header for text-->
<p>HANA Squad</p>
</div>
<div id="menu"> <!-- inside header for menu-->
<p href=#>Vidéos</p>
<p href=#>Photos</p>
<p href=#>Agenda</p>
</div>
</div>
<div id="contenu"> <!-- contents-->
<div id="welcoming"> <!-- short presentation of the website-->
</div>
</div>
</body>
Looking to have a title, subtitle and then two boxes close together and next to each other in the final third div.
Struggling to get 2 buttons to align in the centre next to each other. Seems fine in certain widths, but flows onto the next line at full width
<div class="button-box">
<div class="myoffer3 col-lg-6">
About Us
</div>
<div class="myoffer4 col-lg-6">
Our Products
</div>
</div>
</div>
My CSS
.myoffer3 {
display: inline;
padding:20px;
}
.myoffer4 {
display: inline;
padding: 0 20px;
}
.button-box {
width:100%;
text-align:center;
}
I already knew what you mean.
Here is the correct way to fix.
HTML
<div class="button-box col-lg-12">
About Us
Our Products
</div>
CSS
.button-box {
text-align:center;
margin-top:20px;
}
DEMO
You have to use boostrap class text-center
Use below like this,
<div class="button-box">
<div class="myoffer3 col-lg-6">
About Us
</div>
<div class="myoffer4 col-lg-6">
Our Products
</div>
</div>
</div>
<div style="text-align: center;">
About Us
Our Products
</div>
This works for me, the buttons are next to each other
Simplest Way to do in Bootstrap 4 and above / Two Button Inline.
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
</head>
<body>
<button class="btn btn-primary">Download</button><button class="btn btn-primary ml-3">Print Confirmation</button>
</body>
</html>
Sometimes, HTML/CSS just drives me crazy ;( ... Hopefully someone can explain this behavior and maybe how to fix it.
See HTML/CSS below or this sample JSFiddle
So what I'm doing is having a header and body div, both with floating divs inside, and using clear: both; so the container div spans over the floating inner divs. In my real code I use a more complex clearfix class, but the problem is the same.
The body has a foregrond color BLUE. For the header-div, I set a foreground of WHITE. What drives me crazy is that the foreground-color gets also applied to the body-div even if it is not contained within the header-div. How can this happen?
In my real code I have even a problem that when I explicitely set the foreground for the body-div to BLUE, the color in the header-div also switches to blue. I cannot reproduce it with this JSFiddle but if I understand this problem I can reproduce in this sample code here, maybe I also understand the other problem :)
HTML:
<div>
<div id="head">
<div class="headleft">
<h1>that's my header, baby</h1>
</div>
<div class="headright">
<p>righty right</p>
</div>
<div style="clear: both" />
</div>
<div id="body">
<div class="feature">
<h1>feature 1</h1>
</div>
<div class="feature">
<h1>feature2</h1>
</div>
<div style="clear: both;" />
</div>
</div>
CSS:
body {
color: blue;
}
div#head {
background-color: gray;
width: 400px;
color: white;
}
div#body {
background-color: lightgray;
}
.headleft {
float: left;
}
.headright {
float: right;
}
.feature
{
float: left;
margin-right: 10px;
}
Thanks for any help understanding this issue!
EDIT
Sorry by editing the pasted code I messed up the sample and removed a closing DIV. I corrected this now, the issue was not the missing closing DIV.
You forgot the closing tag on the head div.
http://jsfiddle.net/UHXr6/2/
<div>
<div id="head">
<div class="headleft">
<h1>that's my header, baby</h1>
</div>
<div class="headright">
<p>righty right</p>
</div>
<div style="clear: both" /></div>
</div>
<div id="body">
<div class="feature">
<h1>feature 1</h1>
</div>
<div class="feature">
<h1>feature2</h1>
</div>
<div style="clear: both;" />
</div>
</div>
The problem with your HTML was that you were incorrectly closing the div tags. You can't close div's like this: <div/>. You must use <div></div>. Please see this working Fiddle.
You are missing a closing <div> for head
<div>
<div id="head">
<div class="headleft">
<h1>that's my header, baby</h1>
</div>
<div class="headright">
<p>righty right</p>
</div>
<div style="clear: both" /></div>
</div>
<div id="body">
<div class="feature">
<h1>feature 1</h1>
</div>
<div class="feature">
<h1>feature2</h1>
</div>
<div style="clear: both;" />
</div>
</div>
This question has actually came from my experiments with GWT framework but I decided to simplify the question.
I'm trying to replace table tag with divs. How can I horizontally align two DIV tags that contain two vertically aligned DIV tags ?
Here is what I have:
<!doctype html>
<html>
<body>
<div style="display: block; ">
<div style="display: inline; ">
<div class="gwt-Label" >Name:</div>
<div class="gwt-Label" >Address:</div>
</div>
<div style="display: inline; ">
<div class="gwt-Label" >test1</div>
<div class="gwt-Label" >test2</div>
</div>
</div>
</body>
</html>
It's rendered in my Chrome 15.0.874.106 m as:
Name:
Address:
test1
test2
where I expected it to be:
Name: test1
Address: test2
Could you please help me ?
HTML tables are appropriate for representing tabular data. Just don't use tables for general layout. Tables are still better for tabular data though.
UPDATE: Going forward, you may want to consult the CSS3 Grid Layout specification: http://www.w3.org/TR/css3-grid-layout/
But as is, if you reeeeeeally want to make it work for whatever reason, I'd set all columns as fixed width, float left and clear on the first column. If you want different widths for different columns, you can make specific classes for those columns and set a specific width. But, if there's user data in your table, you have to make sure overflow:hidden is on, or it'll break your table.
I've pasted the code in here, but I've also created a jsfiddle link.
Here's the html:
<div class="table">
<div class="column first">Name:</div>
<div class="column">test1</div>
<div class="column first">Address:</div>
<div class="column">test2</div>
</div>
And the styles:
.table .column{
width: 100px;
float: left;
}
.table .column.first{
clear: left;
}
However, you're going to run into problems as the text inside the table changes. It's not going to act like a table. For example, when a cell's text wraps to the next line, it's not going to adjust the height of all the cells in that row, as you would expect a cell to do. Hence the overflow: hidden or just use an HTML table.
Hope that helps...
I think for the example you have an actual table would be more appropriate, however; you could also do something like this:
<body>
<div style="display: table;">
<div style="display: table-row;">
<div style="display: table-cell;">Name:</div>
<div style="display: table-cell;">test1</div>
</div>
<div style="display: table-row;">
<div style="display: table-cell;">Address:</div>
<div style="display: table-cell;">test2</div>
</div>
</div>
</body>
CSS3 has just the ticket:
.tabl {width:400px;border:1px solid blue;display:table}
.row {height:40px;display:table-row}
.cell {border:1px solid black;display:table-cell}
<div class="tabl">
<div class="row">
<div class="cell"> CELL one</div>
<div class="cell"> CELL two</div>
<div class="cell"> CELL three</div></div>
<div class="row">
<div class="cell"> CELL four
</div><div class="cell"> CELL five</div>
<div class="cell">
<div class="tabl">
<div class="row">
<div class="cell">CELL 6A</div>
<div class="cell">CELL6B</div>
</div>
</div>
</div>
</div>
</div>
That can then be allied to a structure that looks like a table In this case I've included a nested table:
If you want you can probably leave out the outside wrapper, unlike a real table the rows and cells seem not to need it. Unfortunately this only works in modern browsers that support CSS3 that leaves out IE including IE9.
<div style="display: block; ">
<div style="float:left">
<div class="gwt-Label" >Name:</div>
<div class="gwt-Label" >Address:</div>
</div>
<div style="float:left">
<div class="gwt-Label" >test1</div>
<div class="gwt-Label" >test2</div>
</div>
<div style="clear:both"></div>
</div>
your solution is as follow :-
PLease check it
<style type="text/css">
.Table
{
display: table;
}
.Row
{
display: table-row;
}
.Cell
{
display: table-cell;
}
</style>
<!doctypehtml>
<html>
<body>
<div class="Row">
<div class="Cell">
<p>Name:</p>
</div>
<div class="Cell">
<p>Test1</p>
</div>
</div>
<div class="Row">
<div class="Cell">
<p>Address:</p>
</div>
<div class="Cell">
<p>Test2</p>
</div>
</div>
</body>
</html>
If you are looking to generate dynamic tabular structure, try using jqGrid (demo)
Or if your purpose is different and still wanna go with div? Try this..
use float:left; instead display:inline. Float shrinks the div to its content size, letting space for other elements. This makes other elements accommodate beside floated element.
Corrected code:
<!doctype html>
<html>
<body>
<div style="display: block; ">
<div style="float:left; ">
<div class="gwt-Label" >Name:</div>
<div class="gwt-Label" >Address:</div>
</div>
<div style="float:left;">
<div class="gwt-Label" >test1</div>
<div class="gwt-Label" >test2</div>
</div>
</div>
</body>
</html>
Moe's way is pretty cool but it's not standard.
This is the best way.
Use CSS command "float" just like this:
HTML Code:
.gwt-Label
{
float: left;
width: 50%
}
<!doctype html>
<html>
<head>
<link href="Style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div style="display: block; ">
<div style="display: inline; ">
<div class="gwt-Label" >Name:</div>
<div class="gwt-Label" >test1</div>
</div>
<div style="display: inline; ">
<div class="gwt-Label" >Address:</div>
<div class="gwt-Label" >test2</div>
</div>
</div>
</body>
</html>
Or you can have it all in one place:
<!doctype html>
<html>
<head>
<style type="text/css">
.gwt-Label{
float: left;
width: 50%
}
</style>
</head>
<body>
<div style="display: block; ">
<div style="display: inline; ">
<div class="gwt-Label" >Name:</div>
<div class="gwt-Label" >test1</div>
</div>
<div style="display: inline; ">
<div class="gwt-Label" >Address:</div>
<div class="gwt-Label" >test2</div>
</div>
</div>
</body>
</html>