Follow up question to achieving hover effect answer, most said that the HTML markup below was abysmal. So I implemented one of their suggestion which is to change tables into divs.
<html>
<head>
<title>Abyssal Warder Fire</title>
<link href="http://225175.edicypages.com/stylesheets/cards.css" type="text/css" rel="stylesheet"/>
</head>
<body>
<div class="pictureholder"><img src="http://lh5.googleusercontent.com/_qvhVKLFln2A/TU-51_bGZ9I/AAAAAAAAEW4/uAmzL3e-vn0/Abyssal%20Warder%20fire.jpg" /></div>
<div class="information">
<div class="Orbs">
<div class="layout">Orbs:</div>
<div class="value"><img src="http://225175.edicypages.com/photos/N.jpg" /><img src="http://225175.edicypages.com/photos/N.jpg" /><img src="http://225175.edicypages.com/photos/N.jpg" /> <i>(3)</i></div>
<div class="Affinity">
<div class="layout">Affinity:</div>
<div class="value"><font color="red">Fire</font></div>
</div>
<div class="Energy">
<div class="layout">Energy:</td>
<div class="value">250</td>
</div>
<div class="Type">
<div class="layout">Type:</td>
<div class="value">Creature <i>(Giant Destroyer)</i></div>
</div>
<div class="Charges">
<div class="layout">Charges:</div>
<div class="value">1</div>
</div>
<div class="Rarity">
<div class="layout">Rarity:</div>
<div class="value">UR</div>
</div>
<div class="Edition">
<div class="layout">Edition:</div>
<div class="value">Lost Souls</div>
</div><br />
<div class="WeaponType">
<div class="layout">Weapon:</div>
<div class="value">L</div>
</div>
<div class="Size">
<div class="layout">Size:</div>
<div class="value">XL</div>
</div>
<div class="Attack">
<td class="layout">Attack:</div>
<td class="value">2500</div>
</div>
<div class="Defense">
<div class="layout">Defense:</div>
<div class="value">2500</div>
</div>
<div class="CardID">
<div class="layout">CardID:</div>
<div class="value"></div>
</div><br />
<div class="Abilities">
<p class="description"><i>
<img src="http://225175.edicypages.com/photos/Activated.jpg" />Crystal Spikes - Activate to ram Abyssal Warder's crystaline fist into the ground. Crystal Spikes will erupt from the ground and within 4 seconds cover a 20m radius. They deal 570 damage to enemies within it, up to 1710 in total that cannot be warded off with the help of damage reducing abilities as the crystals are able to circumvent every buff or protective shield. Knocks back small and medium units. Only affects ground entities. Reusable every 20 seconds. (Power: 80)<br /><br />
<img src="http://225175.edicypages.com/photos/Passive_r.jpg" />Infused Breakdown - Upon dying the unit collapses into pieces that will reassemble on their own to form two large sized Abyssal Warders. If those die their remains will again form to medium sized golems each. All smaller variants of Abyssal Warder are enraged and deal increasingly more damage the longer they attack.
</i></p></div>
</div>
<div class="upgrades">
<div class="Upgrade1">
<div class="L U1"><u>Upgrade I:</u></div>
<div class="V Map1">Empire <br />(<font color="green">Standard</font>)</div><br />
<div class="L HT1">Honor Tokens:</div>
<div class="V HTV1">0</div>
<div class="L VT1">Victory Tokens:</div>
<div class="V VTV1">4</div>
<div class="L BT1">Battle Tokens:</div>
<div class="V BTV1">30</div>
<div class="L PR1">PvP Rank:</div>
<div class="V PRV1">8</div>
</div><div class="Upgrade2">
<div class="L U2"><u>Upgrade II:</u></div>
<div class="V Map2">Empire <br />(<font color="orange">Advance</font>)</div><br />
<div class="L HT2">Honor Tokens:</div>
<div class="V HTV2">0</div>
<div class="L VT2">Victory Tokens:</div>
<div class="V VTV2">30</div>
<div class="L BT2">Battle Tokens:</div>
<div class="V BTV2">60</div>
<div class="L PR2">PvP Rank:</div>
<div class="V PRV2">9</div>
</div><div class="Upgrade3">
<div class="L U3"><u>Upgrade III:</u></div>
<div class="V Map3">Empire <br />(<font color="red">Expert</font>)</div><br />
<div class="L HT3">Honor Tokens:</div>
<div class="V HTV3">40</div>
<div class="L VT3">Victory Tokens:</div>
<div class="V VTV3">70</div>
<div class="L BT3">Battle Tokens:</div>
<div class="V BTV3">120</div>
<div class="L PR3">PvP Rank:</div>
<div class="V PRV3">10</div></div>
</div>
<div class="comments"></div>
Here is before and after the changes. Before I proceed to CSS, is there any html codes I should add or remove? Any div tags I should change?
P.S. I will be using Microsoft Excel to automate more than 500 html pages and uploading them manually one by one, so it is important that I get this right.
Layouts and individual styling should be done in CSS, agreed. However, if within a layout you have tabular data, you should use tables. You don't want to indulge in "divs for divs' sake"!
Looking at your mark-up, it's very "dense"—there are an awful lot of classes specified in there. For ease of maintenance (and your sanity), I'd really try to think about what you're trying to achieve and go from there.
For example, this sort of mark-up, with subtly different (and obscurely-named) classes is a bear to maintain:
<div class="L BT2">Battle Tokens:</div>
<div class="V BTV2">60</div>
Perhaps you could use a list instead; this seems more readable to me, but your mileage may vary:
<li class="tokens">Battle Tokens:<span class="count">60</span></div>
1st of all, it is great that you changed from <Table> to <div>, however!
You have to understand that each tag has it's own purpose, and the fact that you use div for everything, is quite bad HTML etiquette.
Also, the <i>, <font> tags are OBSOLETE, instead of writing your code like that, you can use the styling properties of CSS, for example:
p{font-style: italics}
or if you want to color the element
p{color:red}
and if you already have styled element, it's not a problem adding a sub-style (or an extra style to the element)
<p class='style 1 style2'>bla bla</p>
in this case, the <p> element will make usage of both style1 and style2.
also, I believe that you can be MUCH, MUCH smarter if you'll not create 500 html pages, and you'll make usage of database power, so you could easily change the pages if you'll want later on, and simply parse the pages using simple PHP.
Will be MUCH EASIER than to re-write 500+ html pages in the future, incase you'll want to change the layout.
Sniff around the topics of PHP and MySQL - it might seem a bit tricky at first, but in the long run, it'll make your life much easier.
I'm not sure, this looks pretty tabular for me, so id try working with tables, making sure to use proper semantic.
This is a reference http://www.htmlcodetutorial.com/tables/_THEAD.html
Although I'd work the layout with divs (html/css stuffs)
GL.
Related
When I use the W3-card class, the right side of the element is not always used.
I have set the padding-right to 0px and still same.
What could be reason.
Code below
<div class="w3-content w3-card-4" style="width:500px; padding-right:2px ">
<div class="w3-row">
<div class="col-md-7">
<h2 style="color:blue;"> Logged Out </h2>
<br />
You have Logged Out Successfully. You can <a runat="server" class="w3-badge
w3-purple w3-hover-blue" href="~/Login.aspx">Login</a> here
</div>
</div>
</div>
The issue was the use of that class="col-md-7". it is limiting the usage of the other side.
Got it cracked
I'm implementing a Jumbotron element like this:
<div className="jumbotron">
<div>
<h6 className="display-6">Reset Password</h6>
<p className="lead">We've just emailed you password reset instructions at <u>{this.email && this.email}</u></p>
<hr className="my-4" />
</div>
</div>
Unfortunately, the content overflows the jumbotron, like this:
How do I fix this?
EDIT: Here's another one. The compiled HTML appears like this in my browser:
<div class="container">
<div class="jumbotron">
<h6 class="display-6">Activate account</h6>
<p class="lead"><!-- react-text: 215 -->Please confirm the verification code we've just emailed you at <!-- /react-text --><u>b_kogan#hotmail.com</u></p>
<button class="btn btn-primary">Resend email verification code</button>
</div>
</div>
And, again, it's overflowing:
Here is a quick example of what you have in your HTML and with using bootstrap 4 and everything looks as expected,I think you have different style applied or this is not the rendered html on the browser.
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<div class="jumbotron">
<div>
<h6 class="display-6">Reset Password</h6>
<p class="lead">We've just emailed you password reset instructions at <u>{this.email && this.email}</u></p>
<hr class="my-4" />
</div>
</div>
I know similar questions have been asked earlier, but I have tried them and they aren't working. I have a dialog box, with some text and a button, which I need to position in the center of the box. My HTML is given below:
<div id='step3' class='item'>
<div class='row span9'>
<div class="text center"><button id='loginButton' class='btn btn-success' onClick='window.location.reload()'>Login again</button></div>
<small>using your new credentials.</small>
</div>
</div>
I tried placing the button inside a div and used <div style="text-align:center"> but it didn't work. Does anyone know how I could place the button in the center, preferably without adding an external CSS class?
Your class="text center" should be class="text-center", and you also don't need the row tag (it breaks the responsiveness).
<div id="step3" class="item">
<div class="span12">
<div class="text-center">
<button id="loginButton" class="btn btn-success" onClick="window.location.reload()">Login again</button>
<br> <small>using your new credentials.</small>
</div>
</div>
Also you have single quotes '' on most of your markup. Keep in mind this is with an old version of Bootstrap so depending on how wide the viewport is it might not be perfectly center.
I know I am doing it all wrong. At the moment, I used Tables to format my screen. Bad, I know. I am looking at learning Twitter Bootstrap, but for a test site, I am just trying to move away from Tables and try use DIVs for layout.
At the moment, I am trying to make a page header that shows a title on the left, and a login box on the right.
<div>
<table style="width: 100%;">
<tr style="vertical-align: top">
<td style="text-align: left">
<h1>Basic Finance</h1>
</td>
<td style="text-align: right">#Html.Partial("_Login", new LoginModel())</td>
</tr>
</table>
<hr />
#RenderBody()
</div>
How can I use DIVs to do this? Are DIVs the right idea? I see Twitter Bootstrap uses <SPAN> - but I am days away from getting to grips with it.
So, I went a completely separate route form everybody else. First, here is my example of what I think you want but let me know if this is not correct.
DEMO
Now, let me break it down a bit for you. I first started by taking what you said with a login and having some type of header along with a login table by or on the same line. This was done via the HTML code below:
<div id="wrapper">
<h1 style="float:left;"> Example Text </h1>
<form action="" method="post">
<ul id="regis_ul">
<li id="regis_li">
<label><span> Username: </span>
<span><input type = 'text' name ='username' id ='username' value = ></span>
</label>
</li>
<li id="regis_li">
<label> <span> Password: </span>
<span><input type = 'password' name ='password' id ='password' value ='' ></span>
</label>
</li>
<input type='submit' name='submit' value='Register'>
</form>
</div>
Which is then accompanied by some CSS code:
#regis_ul {
display:table;
}
#regis_li {
display:table-row-group;
}
span {
display: table-cell;
}
label {
display: table-row;
}
form{
float: right;
}
The above code is what produced the JsFiddle output. Something to read into is the display method "table" that will tell you more about why this CSS trick actually works. This can be found in the Almanac.
Another thing that is good to read up on is why exactly a list may be better than a table which.. a great argument with pros and cons is found in this stack question here.
Finally, I encourage you to play with any of the JsFiddle's on this page, you may end up finding a perfect combination that really suites what you are looking for, giving you that unique feel :) If you have any questions about my Demo, just comment below and I will try my best to answer it for you :)
You can use divs and it's a good idea if you want to switch, you can use display properties according to your needs
<div style="width: 100%;">
<div style="vertical-align: top">
<div style="text-align: left;display:inline-block;">
<h1>Basic Finance</h1>
</div>
<div style="text-align: right;display:inline-block;">#Html.Partial("_Login", new LoginModel())</div>
</div>
</div>
And twitter-bootstrap have some classes like pull-left and pull-right have a look at it, i recommend you to use divs instead of tables!
Fiddle Demo
Try this layout
<div class="navbar">
<div class="navbar-inner">
<a class="brand" href="#">Basic Finance</a>
<div class="pull-right">
#Html.Partial("_Login", new LoginModel())
</div>
</div>
</div>
You can use
display:table; for <table>
display:table-row; for <tr>
display:table-cell; for <td>
in div format
here is a demo (it has css table vs html table-compare and check for your understanding)
CSS to play with
body{
height:100%;
}
#main{
height:100%;
width:100%;
}
.table{
display:table;
width: 100%;
}
.tr{
display:table-row;
}
.td{
display:table-cell;
}
With just plain divs you can use the float property to get them next to each other
<div>
<div class="table">
<div class="left">
<h1>Basic Finance</h1>
</div>
<div class="right">
#Html.Partial("_Login", new LoginModel())
</div>
</div>
#RenderBody()
</div>
Then you can style it the way you like with CSS, for instance:
.left{float: left;width: 50%;;height:100%;text-align:left;}
.right{height:100%; text-align:right;padding-top: 30px;}
.table{height: 75px;}
Output of this code:
http://jsfiddle.net/7Qv8r/1/
Cheers
You can try this
Check Fiddle here
<div>
<div style="width: 100%;">
<div style="float: left">
<h1>
Basic Finance</h1>
</div>
<div style="float: right; padding-top: 30px;">
#Html.Partial("_Login", new LoginModel())</div>
</div>
<div style="clear: both">
</div>
<hr />
#RenderBody()
</div>
Good Luck n Happy New Year...:)
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 8 years ago.
Improve this question
I have been starting to use BEM as a CSS methodology for organizing my CSS and over the course of the projects, pretty much everything has turned into a module.
I put layout styles for a module in the parent module. That has been working nicely.
What has been confusing me and I can't grasp a hold of is something like this: Say I have the following:
<div class="picture-holder">
<div class="picture-box">
<img class="image" />
<span class="caption">text</span>
</div>
<div class="picture-box">
<img class="image" />
<span class="caption">text</span>
</div>
</div>
So at this stage, following the rules of BEM, I would add the parent class name of a module to it's own module name:
<div class="picture-holder">
<div class="picture-holder__picture-box">
<img class="image" />
<span class="caption">text</span>
</div>
<div class="picture-holder__picture-box">
<img class="picture-box__image" />
<span class="picture-box__caption">text</span>
</div>
</div>
and then add the sole module name to each one:
<div class="picture-holder">
<div class="picture-holder__picture-box picture-box">
<img class="image" />
<span class="caption">text</span>
</div>
<div class="picture-holder__picture-box picture-box">
<img class="picture-box__image image" />
<span class="picture-box__caption caption">text</span>
</div>
</div>
Does this look right?
What would you call the individual files holding each of the module styles?:
- picture-box.sass
- picture-holder.sass
- picture.sass
- caption.sass
It seems like whenever I get nesting like this, I end up with a module that hardly has a meaning or is something too generic like "picture", "image", "box" or "caption"
I get the same problems higher up the hierarchy. So where I have a wrapping div around the site, e.g.: .container, I now have .container-header, .container-main and .container-footer.
I like the main concept behind BEM and everything in modules but it's the module in module thing I get confused with.
All the articles explaining BEM, never talk about this and show super simple examples that don't hit this issue.
Am I doing it wrong?
I basically just want peoples ideas on this subject and how I can improve?
you are on the right track, but you don't need to add the 'base' class without the module prefix.
Here is your version:
<div class="picture-holder">
<div class="picture-holder__picture-box picture-box">
<img class="image" />
<span class="caption">text</span>
</div>
<div class="picture-holder__picture-box picture-box">
<img class="picture-box__image image" />
<span class="picture-box__caption caption">text</span>
</div>
</div>
Here's what you likely need:
<div class="picture-holder">
<div class="picture-box">
<img class="picture-box__image" />
<span class="picture-box__caption">text</span>
</div>
<div class="picture-box">
<img class="picture-box__image" />
<span class="picture-box__caption">text</span>
</div>
</div>
Depending on how you are going to use 'picture-box' you could further simplify:
<div class="picture-holder">
<div class="picture-holder__box">
<img class="picture-holder__image" />
<span class="picture-holder__caption">text</span>
</div>
<div class="picture-holder__box">
<img class="picture-holder__image" />
<span class="picture-holder__caption">text</span>
</div>
</div>