Coding from scratch isscue

jamesacp
(@jamesacp)

1 year, 3 months ago
Hello,

I am building a clients website and he wants hyperlinks in a column and rows format. I am attempting to code using html as I am not skilled enough in CSS and the plugins I have found are not useful. Whilst adding the hyperlinks the columns will jump around after publishing. If I don’t hyperlink the text and just add text it publishes the way its supposed to. It seems to be a problem only when attempting to add the hyperlinks. If anyone can help that would be great
- This topic was modified 1 year, 3 months ago by Jan Dembowski.

Viewing 5 replies - 1 through 5 (of 5 total)

Moderator Jose Castaneda
(@jcastaneda)

THEME COFFEE MONKEY

1 year, 3 months ago

Hi there,

Are you able to share an example of the markup? How are you creating that?
Thread Starter jamesacp
(@jamesacp)

1 year, 3 months ago
Hello,

Thank you for your speedy response. Below is the code.
```
<!DOCTYPE html>
<html>
<head>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<style>
* {
box-sizing: border-box;
}

/* Create four equal columns that floats next to each other */
.column {
float: left;
width: 25%;
padding: 10px;
height: 300px; /* Should be removed. Only for demonstration */
}

/* Clear floats after the columns */
.row:after {
content: “”;
display: table;
clear: both;
}
</style>
</head>
<body>

<div class=”row”>
<div class=”column” style=”background-color:#ffff;”
• ELECTRICAL
• PLUMBING
• POWER WASHING
• CONCRETE
• DRYWALL
• STUCCO
• PAINT
• FRAMING
• GARAGE STORAGE UNITES
(ASSEMBLY / BUILDING)
• ROUGH & FINISH CARPENTRY
*VALUE ENGIREERING
*CONSTRUCTION PROJECTS & CONSULTATION
*ELDERY AND HANDY-CAPABLE RAILS & EQUIPMENT
(INSTALLATION & ASSEMBLY)
</div>

<div class=”column” style=”background-color:#ffff;”>
• WINDOW SCREENS
• DOORS & WINDOWS
• FIREPLACES
• CABINETS
• TRASH REMOVAL & YARD CLEAN-UP
• DECKS
• FENCES
• COMMERCIAL & RESIDENTIAL
• (HOURLY & MONTHLY MAINTENANCE
• SERVICE CONTRACTS AVAILABLE)
• CONSTRUCTION & PROJECT CONSULTATION<

</div>
<div class=”column” style=”background-color:#ffff;”>]
• DEMOLTION & TRASH HALLING
• HONEY DO LISTS
• MAINTENANCE (HOURLY / MONTHY)
• AIR B&B MAINTENANCE & UPGRADES
(MONTHLY CONTRACTS AVAILABLE)
• REAL ESTATE AND RENTAL MAINTENANCE
(MONTHLY CONTRACTS AVAILABLE)
KITCHENS
BATHROOMS
MINOR ROOF REPAIRS
</div>

</div>
</div>

</body>
</html>
```
- This reply was modified 1 year, 3 months ago by Jose Castaneda. Reason: code formatting
Ramona
(@nextend_ramona)

1 year, 3 months ago
I’d rather suggest avoiding the float and using grid:
https://www.w3schools.com/css/css_grid.asp
https://css-tricks.com/snippets/css/complete-guide-grid/

This way you can make the columns and even make them responsive with just a couple of lines of CSS:
```
.row{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px,1fr));
    grid-gap: 10px;
    width: 100%; /* you might not need this, but I did in my WP test */
}
```
And you could use flexbox:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
https://www.w3schools.com/css/css3_flexbox.asp
for the inner elements to make the links display below another:
```
.column{
    display: flex;
    flex-direction: column;
}
```
Here’s a codepen example:
https://codepen.io/nextend_ramona/pen/wvPQMPb

Also, a > is missing from the first column’s markup. It looks like this now:
<div class="column" style="background-color:#ffff;"
but it needs to be like this:
<div class="column" style="background-color:#ffff;">
Moderator Jose Castaneda
(@jcastaneda)

THEME COFFEE MONKEY

1 year, 3 months ago

Ah. Okay so you’re coding a template (I’m guessing).

My initial thought was you were using a plugin or page builder and it was acting oddly.

Yeah, I would suggest using grid as well like noted above instead of the float.

Thread Starter jamesacp
(@jamesacp)

1 year, 3 months ago

Thank you both for your speedy reply, and help. I have one last question as CSS is foreign to me where html was my area of study in college. If I want to chose a different theme it changes the layout of the grid instead of the rows being horizontal it changes the rows to vertical. Is there a css coding fix for this?

Viewing 5 replies - 1 through 5 (of 5 total)

The topic ‘Coding from scratch isscue’ is closed to new replies.

Views